Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	How analogue circuits compute
ID	6380579026239488
Created	10 years ago, 1438471925562
Updated	10 years ago, 1450896710947
Code	/* * This is a demo of how analogue circuits are used for * digital computing. Click on the green "blurb" button to * bring up accompanying text in the console. Note that the * console area can be grown by selecting its upper boundary * line with the mouse and dragging it upwards. * * Acknowledgements: * Larry Serflaten suggested numerous improvements and I listened * to about half of them, the most visible being the dynamic * coloring of the logic gates' inputs. * * References: * http://wikipedia.org/wiki/Logic_gate * http://www.cs.bu.edu/~best/courses/modules/Transistors2Gates/ * http://wikipedia.org/wiki/Adder_(electronics) * http://neovlsi.wordpress.com/2008/07/27/design-an-inverter-and-a-pass-gate-buffer-using-the-xor-gate/ * http://wikipedia.org/wiki/Two's_complement * http://en.wikipedia.org/wiki/Intel_4004 * http://xkcd.com/730/ / var Bus, renderComponents; / forward declarations... / var binaryMode, blurb, buses, component, dynamic, eventCnt, loopDeeDo, myMatrix, origButtons, page, pages, propQueue, rendered, repaintGates, threeVolts, title, titleX, titleY, wires, zeroVolts; var negColor = color(250, 250, 250); var posColor = color(242, 136, 136); var Blue = color(0, 0, 220); var Green = color(0, 170, 0); var darkGreen = color(40, 120, 40); var Red = color(200, 0, 0); var Purple = color(145, 0, 255); var switchOn = color(255, 0, 200); var ledOn = color(230, 0, 220); var bgColor = 0xFFEBF0F5; var invisible = color(1, 1, 1, 0); var wc = [ Blue, Green, 0, Purple ]; var gHeight = 72; var gWidth = 144; var junctionSz = 8; / point size for junctions / var jumpSz = 10; / size of arcs where wires jump over buses / var nots = 14; / size of inversion bubble / / * Code auto-generated by the ButtonGenerator at * https://www.khanacademy.org/cs/button-generator/1847123742 * Copy and paste this code into a new program. * Then consider modifying the 'draw' and * 'cursorOver' functions. / var buttons; / array of functioning buttons / var cursorOver; / called when cursor is over a button / var buttonDescriptions = '[' + '{"sides":3,"radius":20,"strokeWeight":1,"labelSz":11,"labelJustify":39,"titleSz":12,"titleWhere":37,"stroke":-16777216,"titleColor":-16777216,"labelColor":-16777216,"fill":-4915246,"hoverFill":-7340123,"selectFill":-14122456,"firstVertex":1,"label":"next","title":"","x":380,"y":380,"radiusY":12},' + '{"sides":2,"radius":18,"strokeWeight":1,"labelSz":11,"labelJustify":37,"titleSz":12,"titleWhere":37,"stroke":-16777216,"titleColor":-16777216,"labelColor":-16777216,"fill":-4915246,"hoverFill":-7340123,"selectFill":-14122456,"firstVertex":0,"label":"Blurb","title":"","x":345,"y":380,"radiusY":11},' + '{"sides":3,"radius":20,"strokeWeight":1,"labelSz":11,"labelJustify":37,"titleSz":12,"titleWhere":37,"stroke":-16777216,"titleColor":-16777216,"labelColor":-16777216,"fill":-4915246,"hoverFill":-7340123,"selectFill":-14122456,"firstVertex":3,"label":"prev","title":"","x":310,"y":380,"radiusY":12},' + '{"sides":1,"radius":7,"strokeWeight":1,"labelSz":11,"labelJustify":37,"titleSz":11,"titleWhere":102,"stroke":-16777216,"titleColor":-16777216,"labelColor":-16777216,"fill":-4915246,"hoverFill":-7340123,"selectFill":-14122456,"firstVertex":0,"label":"","title":"clocked","x":381,"y":339,"radiusY":7},' + '{"sides":1,"radius":7,"strokeWeight":1,"labelSz":11,"labelJustify":37,"titleSz":11,"titleWhere":102,"stroke":-16777216,"titleColor":-16777216,"labelColor":-16777216,"fill":-4915246,"hoverFill":-7340123,"selectFill":-14122456,"firstVertex":0,"label":"","title":"signed","x":381,"y":303,"radiusY":7}' + ']'; / See https://www.khanacademy.org/cs/button-generator/1847123742 / var button = { initialize: function (descriptions, lsKey) { / * Called once per program Restart. Returns * a freshly populated buttons array. / var h = this; var bttns = []; h.tau = (angleMode === "degrees") ? 360 : TWO_PI; h.pickedColor = h.labelColor = h.titleColor = h.stroke = h.black = color(0, 0, 0); h.fill = color(255, 255, 255); h.hoverFill = color(210, 225, 240); h.selectFill = color(110, 125, 140); h.bObject = (function(what) { return this[what]; }) ("Object"); h.json = (function(what) { return this[what]; }) ("JSON"); h.lastButt = undefined; / * Rotation angles for 1 to 8 sided polygons. * Angles are fractions of tau, so 1/4 implies 90°. * Note that a rectangle is "two-sided" and an * ellipse is a "one-sided" polygon... / h.firsts = [[0], [0], [0], [-1/4, 0, 1/4, 1/2], [0, 1/8], [-1/4, 0, 1/4, 1/2], [0, 1/4], [-1/4, 0, 1/4, 1/2], [1/16, 0]]; h.firstVertex = 0; if (descriptions === null) { h.loadCheckPoint(lsKey, bttns); } else { h.reanimate(descriptions, bttns); } return bttns; }, reanimate: function (s, bttns) { / Convert a JSON string into 'bttns'. / var i, b, bs = this.json.parse(s); for (i = 0; bs && (i < bs.length); i++) { bttns.push(b = this.extend(bs[i])); b.reInit(); / It's alive! / } }, extend: function (props) { / How a button gets created... / / * extend was lifted from * www.adobe.com/devnet/html5/articles/javascript-object-creation.html / var extend = function(obj, props) { for (var prop in props) { if (props.hasOwnProperty(prop)) { obj[prop] = props[prop]; } } }; var obj = this.bObject.create(this); extend(obj, this.json.parse( this.json.stringify(this, this.jsonButtonFilter))); extend(obj, props); return obj; }, reInit: function () { / Called anytime a button is born or modified / var h = this; / * Compute and return the vertices of a polygon centered * at (x, y) with the external radius, whose first vertex * is at tau/firstVertex. / var polygon2Vertices = function(x, y, sides, radius, firstVertex) { var i, theta = h.tau firstVertex; var v = []; for (i = 0; i < sides; i++, theta += h.tau / sides) { v.push(x + radius * cos(theta), y + radius * sin(theta)); } return v; }; /* Convert a rectangle centered at (x, y) to vertices / var rect2Vertices = function(x, y, radiusX, radiusY) { return [ x - radiusX, y - radiusY, x + radiusX, y - radiusY, x + radiusX, y + radiusY, x - radiusX, y + radiusY ]; }; if (h.moving) { h.x = mouseX; h.y = mouseY; } h.sides = constrain(h.sides, 1, 8); h.radius = max(h.radius, 4); h.radiusY = (h.sides > 2) ? round(0.62 h.radius) : h.radiusY; h.radiusY = max(h.radiusY, 4); var first = h.firsts[h.sides]; h.firstVertex = h.firstVertex % first.length; first = first[h.firstVertex]; h.vertices = (h.sides < 3) ? rect2Vertices(h.x, h.y, h.radius, h.radiusY) : polygon2Vertices(h.x, h.y, h.sides, h.radius, first); }, mouseOver: function () { /* Return true iff the cursor is over this button / / * Given an ellipse centered at (ex, ey) with RADII * rx and ry, return true iff point (x, y) is inside * the ellipse. / var inEllipse = function(ex, ey, rx, ry, x, y) { var termX = (x - ex) / rx; / sqrt of first term / var termY = (y - ey) / ry; / sqrt of second term / return ((termX termX) + (termY termY)) < 1; }; / * Return true iff p and q are on the same side of the * line defined by a and b. / var sameSide = function(ax, ay, bx, by, px, py, qx, qy) { if (ax === bx) { / (easy) vertical line / return (qx < ax) === (px < ax); } var m = (by - ay) / (bx - ax); / the slope / var k = ay - (m ax); /* line is y = mx + k / var lpy = (m * px) + k; /* (p.x, lpy) is ON line / var lqy = (m qx) + k; /* (q.x, lqy) is ON line / return (qy < lqy) === (py < lpy); }; / * Return true iff (x, y) is inside the polygon * described by v / var inPolygon = function(x, y, v) { var i, next, prev = v.length - 2; for (i = 0; i < v.length; prev = i, i += 2) { next = (i + 2) % v.length; if (! sameSide(v[i], v[i+1], v[next], v[next+1], v[prev], v[prev+1], x, y)) { return false; } } return true; }; var h = this; if (h.sides === 1) { return inEllipse(h.x, h.y, h.radius, h.radiusY, mouseX, mouseY); } return inPolygon(mouseX, mouseY, h.vertices); }, render: function (focus) { / * Draws this button. focus is the selected button. * Returns description of potential crossHairs that * need rendering. / / Draw a polygon given its vertices / var renderPolygon = function(v) { beginShape(); for (var i = 0; i < v.length; ) { vertex(v[i++], v[i++]); } endShape(CLOSE); }; var h = this; var s, flashCursor; / Figure one of four fill colors / var f = (h.editColor !== undefined) ? (h.editColor = h.pickedColor) : ((h.cursorIsOver) ? ((mouseIsPressed) ? h.selectFill : h.hoverFill) : h.fill); / Draw the button's geometric figure / stroke(h.stroke); if (h.strokeWeight > 0) { strokeWeight(h.strokeWeight); } else { noStroke(); } fill(f); if (h.sides === 1) { ellipse(h.x, h.y, 2 h.radius, 2 * h.radiusY); } else { renderPolygon(h.vertices); } /* Draw the button's label / s = (h.label === undefined) ? "" : h.label.toString(); if ((s.length > 0) \|\| h.labelEdit) { var dx; textSize(h.labelSz); if (h.labelJustify === CENTER) { dx = 0; } else if (h.labelJustify === LEFT) { dx = -h.radius + round(0.6 h.labelSz); } else { dx = h.radius - round(0.6 * h.labelSz); } textAlign(h.labelJustify, CENTER); flashCursor = (h.labelEdit && (frameCount % 20 < 10)) ? "\|" : ""; fill(h.labelColor); text(s + flashCursor, h.x + dx, h.y); } /* Draw the button's title / s = (h.title === undefined) ? "" : h.title.toString(); if ((! rendered) && ((s.length > 0) \|\| h.titleEdit)) { var x = h.x, y = h.y, deltaX, deltaY; deltaX = deltaY = 2 + round(1.1 h.radius); if (h.sides < 3) { deltaY = 2 + round(1.1 * h.radiusY); } switch (h.titleWhere) { case LEFT: textAlign(LEFT, CENTER); x += deltaX; break; case BOTTOM: textAlign(CENTER, TOP); y += deltaY; break; case RIGHT: x -= deltaX; textAlign(RIGHT, CENTER); break; case TOP: y -= deltaY; textAlign(CENTER, BOTTOM); break; } textSize(h.titleSz); flashCursor = (h.titleEdit && (frameCount % 20 < 10)) ? "\|" : ""; fill(h.titleColor); text(s + flashCursor, x, y); } return ((typeof h.renderCrosshair === "function") ? h.renderCrosshair(focus) : 0); }, updateButtons: function (b, setLastButt) { /* * Maintains buttons 'b' states and returns the index * of 'b' where the cursor is located, or -1. / var h = this, j = -1; / Reset cursorIsOver and look for "moving" or "over" / for (var i = b.length; --i >= 0; ) { b[i].cursorIsOver = false; / reset! / if (b[i].moving) { j = i; b[j].reInit(); h.lastButt = b[j]; / even when !mouseIsPressed / } if ((j < 0) && b[i].mouseOver()) { j = i; } } if (j >= 0) { b[j].cursorIsOver = true; / set! / if (setLastButt && mouseIsPressed) { h.lastButt = b[j]; } if (typeof cursorOver === "function") { / Let the application know about this situation / cursorOver(b[j], j); } } return j; }, renderButtons: function (b, doFocus) { / * Draws all buttons in array b. * Returns crosshair indication. / var h = this, crossHair = 0, focus; if (doFocus && h.lastButt && (h.lastButt.moving \|\| (h.lastButt.cursorIsOver && mouseIsPressed))) { focus = h.lastButt; } for (var i = 0; i < b.length; i++) { crossHair \|= b[i].render(focus); } return crossHair; } }; / * Reformat one blurb line to be a paragraph suitably * displayed in the println's console window. / var blurbLine = function(b, firstLine) { var limit = (firstLine) ? 47 : 50; var words = b.split(" "); var s = words[0]; var flush = function() { println(s); s = ""; limit = 50; }; for (var i = 1; i < words.length; i++) { if (s.length + 1 + words[i].length > limit) { flush(); s += words[i]; } else { s += " " + words[i]; } } if (s.length > 0) { flush(); } flush(); }; / * Take an entire blurb and reformat its individual lines * such that they are neatly displayed in the console window. / var blurbIt = function(b) { var lines = b.split("\n"); if (lines.length === 0) { lines = [ b ]; } for (var i = 0; i < lines.length; i++) { blurbLine(lines[i], i===0); } }; / Supports a "toggle" type button. / var swapColors = function(b) { var tmp = b.selectFill; b.selectFill = b.fill; b.fill = b.hoverFill = tmp; b.reInit(); }; / Called by mouseReleased. We handle generated buttons here. / var buttonMouseReleased = function () { var p, b; p = pages.indexOf(page); for (var i = buttons.length; --i >= 0; ) { b = buttons[i]; if (b.mouseOver()) { i = origButtons.indexOf(b); break; } } switch (i) { case 0: / next / p += 1; if (p < pages.length) { page = pages[p]; page(); } else { println("Sorry. That is all!"); } break; case 1: / blurb / blurbIt(blurb); break; case 2: / prev / if (binaryMode === "twosCompliment") { / hack to reset it... / binaryMode = ""; b = buttons[buttons.length - 1]; swapColors(b); } page = pages[p - 1]; page(); break; case 3: / static / dynamic = ! dynamic; swapColors(b); break; case 4: / signed / binaryMode = (binaryMode === "twosCompliment") ? "" : "twosCompliment"; swapColors(b); break; } }; / Common location functionality for logic gate images / var setInputCoordinates = function(gfx, dx) { var dy = gfx.height/4; gfx.a = []; gfx.b = []; gfx.a.x = gfx.b.x = -gfx.width/2 + dx; gfx.pinX = gfx.a.x - 13; gfx.a.y = -dy; gfx.b.y = dy; }; / Generate an inverter / var getInverterImg = function(cBody, cBubble) { if (getInverterImg.gfx && getInverterImg.gfx[cBody]) { return getInverterImg.gfx[cBody]; } var h = ceil(gHeight/2); var w = ceil(sqrt(3)/2 h + nots + 2); var gfx = createGraphics(w + 1, h, JAVA2D); if (! gfx) { return gfx; } gfx.beginDraw(); gfx.background(0, 0, 0, 0); gfx.translate(2, 0); gfx.strokeWeight(3); gfx.fill(cBody); gfx.triangle(0, 0, 0, h, sqrt(3)/2h, h/2); gfx.fill(cBubble); gfx.ellipse(sqrt(3)/2h + nots/2, h/2, nots, nots); gfx.endDraw(); if (getInverterImg.gfx === undefined) { getInverterImg.gfx = []; } getInverterImg.gfx[cBody] = gfx; setInputCoordinates(gfx, 22); gfx.a = []; gfx.a.x = -gfx.width/2; gfx.a.y = 0; return gfx; }; /* Generate an image of an AND or NAND gate / var getAndGateImg = function(normal, cBody, cBubble) { if (getAndGateImg.gfx && getAndGateImg.gfx[normal] && getAndGateImg.gfx[normal][cBody]) { return getAndGateImg.gfx[normal][cBody]; } var hSlop = ceil(gHeight / 10); var gfx = createGraphics(gWidth - 2nots, gHeight+hSlop, JAVA2D); if (! gfx) { return gfx; } gfx.beginDraw(); gfx.background(0, 0, 0, 0); gfx.translate(-nots, hSlop/2); var y = gHeight - 1; var x = gWidth - 1 - nots - y/2; if (! normal) { x -= nots; } gfx.noStroke(); gfx.fill(cBody); gfx.rect(0, 0, x, y); gfx.stroke(0); gfx.strokeWeight(3); gfx.arc(x, y/2, y, y, -PI/2, PI/2); gfx.line(0, y, x-1, y); gfx.line(nots, 0, nots, y); gfx.line(0, 0, x-1, 0); if (! normal) { gfx.fill(cBubble); gfx.ellipse(gWidth - 1 - 3nots/2, y/2, nots, nots); } gfx.fill(0); gfx.textSize(gHeight/3); gfx.textAlign(CENTER, CENTER); gfx.text((normal) ? "AND" : "NAND", 0.45gWidth, gHeight/2); gfx.endDraw(); if (getAndGateImg.gfx === undefined) { getAndGateImg.gfx = []; } if (getAndGateImg.gfx[normal] === undefined) { getAndGateImg.gfx[normal] = []; } getAndGateImg.gfx[normal][cBody] = gfx; setInputCoordinates(gfx, 12); return gfx; }; /* Generate an image of an OR gate / var getOrGateImg = function(color) { if (getOrGateImg.gfx && getOrGateImg.gfx[color]) { return getOrGateImg.gfx[color]; } var hSlop = ceil(gHeight / 10); var gfx = createGraphics(gWidth - 2nots, gHeight+hSlop, JAVA2D); if (! gfx) { return gfx; } gfx.beginDraw(); gfx.background(0, 0, 0, 0); gfx.translate(-nots, hSlop/2); var y = gHeight - 1; var x = gWidth - 1 - 2nots; gfx.strokeWeight(3); gfx.translate(nots, 0); gfx.fill(color); gfx.beginShape(); gfx.vertex(nots, 0); gfx.vertex(0, 0); gfx.bezierVertex(20, 27, 20, 45, 0, y); gfx.vertex(nots, y); gfx.bezierVertex(60, y, 80, y, x, y/2); gfx.bezierVertex(80, 0, 60, 0, nots, 0); gfx.endShape(CLOSE); gfx.fill(0); gfx.textSize(gHeight/3); gfx.textAlign(CENTER, CENTER); gfx.text("OR", gWidth/3, gHeight/2); gfx.endDraw(); if (getOrGateImg.gfx === undefined) { getOrGateImg.gfx = []; } getOrGateImg.gfx[color] = gfx; setInputCoordinates(gfx, 22); return gfx; }; / Generate an image of a NOR gate / var getNorGateImg = function(cBody, cBubble) { if (getNorGateImg.gfx && getNorGateImg.gfx[cBody]) { return getNorGateImg.gfx[cBody]; } var hSlop = ceil(gHeight / 10); var gfx = createGraphics(gWidth - 2nots, gHeight+hSlop, JAVA2D); if (! gfx) { return gfx; } gfx.beginDraw(); gfx.background(0, 0, 0, 0); gfx.translate(-nots, hSlop/2); var y = gHeight - 1; var x = gWidth - 1 - 2nots; gfx.strokeWeight(3); gfx.translate(nots, 0); gfx.fill(cBody); gfx.beginShape(); gfx.vertex(0, 0); gfx.bezierVertex(20, 27, 20, 45, 0, y); gfx.bezierVertex(60-nots, y, 80-nots, y, x-nots, y/2); gfx.bezierVertex(80-nots, 0, 60-nots, 0, 0, 0); gfx.endShape(CLOSE); gfx.fill(cBubble); gfx.ellipse(x-nots/2, y/2, nots, nots); gfx.fill(0); gfx.textSize(gHeight/3); gfx.textAlign(CENTER, CENTER); gfx.text("NOR", gWidth/3, gHeight/2); gfx.endDraw(); if (getNorGateImg.gfx === undefined) { getNorGateImg.gfx = []; } getNorGateImg.gfx[cBody] = gfx; setInputCoordinates(gfx, 22); return gfx; }; / Generate an image of an XOR gate / var getXorGateImg = function(color) { if (getXorGateImg.gfx && getXorGateImg.gfx[color]) { return getXorGateImg.gfx[color]; } var hSlop = ceil(gHeight / 10); var gfx = createGraphics(gWidth - 2nots, gHeight+hSlop, JAVA2D); if (! gfx) { return gfx; } gfx.beginDraw(); gfx.background(0, 0, 0, 0); gfx.translate(-nots, hSlop/2); var y = gHeight - 1; var x = gWidth - 1 - 2nots; gfx.strokeWeight(3); gfx.translate(nots, 0); gfx.noFill(); gfx.bezier(0, 0, 20, 27, 20, 45, 0, y); gfx.translate(nots, 0); gfx.fill(color); gfx.beginShape(); gfx.vertex(0, 0); gfx.bezierVertex(20, 27, 20, 45, 0, y); gfx.bezierVertex(60-nots, y, 80-nots, y, x-nots, y/2); gfx.bezierVertex(80-nots, 0, 60-nots, 0, 0, 0); gfx.endShape(CLOSE); gfx.fill(0); gfx.textSize(gHeight/3); gfx.textAlign(CENTER, CENTER); gfx.text("XOR", gWidth/3, gHeight/2); gfx.endDraw(); if (getXorGateImg.gfx === undefined) { getXorGateImg.gfx = []; } getXorGateImg.gfx[color] = gfx; setInputCoordinates(gfx, 36); return gfx; }; / * Do line segments ab-ae and bb-be intersect? If so return the * point of intersection along with how the former will jump over * the latter. We assume that the segments are either horizontal * or vertical. / var segIntersect = function(ab, ae, bb, be) { / return true iff c is between a and b / var isBetween = function(a, b, c) { return (a - c) (b - c) <= 0; }; var x, y; var dax = ab[0] - ae[0]; var day = ab[1] - ae[1]; var dbx = bb[0] - be[0]; var dby = bb[1] - be[1]; if ((day === 0 && dby === 0) \|\| (dax === 0 && dbx === 0)) { return; /* parallel line segments don't intersect / } if (day === 0) { y = ab[1]; x = bb[0]; if (isBetween(ab[0], ae[0], x) && isBetween(bb[1], be[1], y)) { return [ x, y, "jumpUp" ]; } } else if (dby === 0) { y = bb[1]; x = ab[0]; if (isBetween(bb[0], be[0], x) && isBetween(ab[1], ae[1], y)) { return [ x, y, "jumpRight" ]; } } else if (false) { throw({ message: "segIntersect is confused " + day + " " + dby}); } }; / * Constructor function for a wire running from object src * to object dst via any number of object ways points. * * Wires are all for show! Ideally an automatic router could * route the wires based an component propagation information. / var Wire = function(src, dst, colour, incrX) { incrX = (incrX) ? incrX : 0; this.colour = (colour) ? colour : 0; this.strokeWeight = Wire.sw[Wire.sw.length - 1]; var dx = dst.x - src.x; var dy = dst.y - src.y; this.jumped = false; this.junctions = []; this.path = []; if (src.component && src.component.wireExtend) { var se = src.component.wireExtend(src); this.path.push([se.x, se.y]); } this.path.push([src.x, src.y]); if (incrX !== 0) { this.path.push([src.x + incrX, src.y]); dx -= incrX; } if (dx !== 0 && dy !== 0) { this.path.push([src.x + incrX, dst.y]); } this.path.push([dst.x, dst.y]); if (dst.component && dst.component.wireExtend) { dst = dst.component.wireExtend(dst); this.path.push([dst.x, dst.y]); } }; / hack added for connecting "carry-out" to "carry-n" / Wire.prototype.zigzag = function(howMuch) { howMuch = (howMuch === undefined) ? 1/2 : howMuch; var p = this.path; var src = p[0]; var dst = p[p.length-2]; var ext = p[p.length-1]; var dx = dst[0] - src[0]; var xDir = abs(dx) / dx; var dy = dst[1] - src[1]; p = []; p.push([src[0], src[1]]); src[0] -= 2xDir; p.push([src[0], src[1]]); src[1] += howMuch * dy; p.push([src[0], src[1]]); src[0] += dx + 4xDir; p.push([src[0], src[1]]); src[1] = dst[1]; p.push([src[0], src[1]]); src[0] = dst[0]; p.push([src[0], src[1]]); p.push(ext); this.path = p; this.jumped = false; this.junctions = []; }; / connect the bus to the wire / Wire.prototype.connectBus = function(bus) { bus.colour = this.colour & ~invisible; var pth = this.path; for (var p = pth.length; --p > 0; ) { var i = segIntersect(pth[p], pth[p-1], bus.path[0], bus.path[1]); if (i) { / insert i into pth before pth[p] / if (! this.noJunction) { i[2] = "junction"; pth.splice(p, 0, i); } this.connectedBus = bus; break; } } }; / underlay a bus on the first virtical segment of the wire / Wire.prototype.upgrade = function(enclosure) { var bs, i, j, pth = this.path; var dst = { x: pth[pth.length-1][0], y: pth[pth.length-1][1] }; for (var p = 0; p < pth.length - 1; p++) { i = pth[p]; j = pth[p+1]; if (i[0] === j[0]) { / a vertical segment / pth.splice(p+1, pth.length); / snip / this.noJunction = true; bs = new Bus(this, 1, dst); this.noJunction = false; } } return bs; }; / this wire along with w2 are flip flob cross over wires / Wire.prototype.flipFlop = function(w2, dx) { var src, dst, path; var dy = w2.path[w2.path.length-1][1] - this.path[0][1]; src = w2.path[0]; dst = w2.path[w2.path.length-1]; path = []; path.push([src[0], src[1], "junction"]); src[1] -= 2dy; path.push([src[0], src[1]]); src[0] = dst[0] - dx; src[1] = dst[1] + dy; path.push([src[0], src[1]]); src[1] -= dy; path.push([src[0], src[1]]); src[0] += dx; path.push([src[0], src[1]]); w2.path = path; src = this.path[0]; dst = this.path[this.path.length-1]; path = []; path.push([src[0], src[1], "junction"]); src[1] += 2dy; path.push([src[0], src[1]]); src[0] = dst[0] - dx; src[1] = dst[1] - dy; path.push([src[0], src[1]]); src[1] += dy; path.push([src[0], src[1]]); src[0] += dx; path.push([src[0], src[1]]); this.path = path; }; / make sure wire jumps over all the buses / Wire.prototype.jumpBuses = function(enclosure) { var buses = enclosure.buses; var pth = this.path; this.jumped = true; for (var b in buses) { if (buses[b] === this.connectedBus) { continue; } for (var p = pth.length; --p > 0; ) { if (pth[p][0] === buses[b].path[0][0] \|\| pth[p][1] === buses[b].path[1][1]) { / this is an edge / continue; } var j = segIntersect(pth[p], pth[p-1], buses[b].path[0], buses[b].path[1]); if (j) { / insert j into pth before pth[p] / pth.splice(p, 0, j); } } } this.jumped = true; }; Wire.prototype.render = function(enclosure) { var x, y, x2, y2, type, nextType, j = 0, pth = this.path, js = 2/3jumpSz * this.strokeWeight, d = js/2; if (! this.jumped) { this.jumpBuses(enclosure); } strokeWeight(this.strokeWeight); stroke(this.colour); noFill(); for (var p = 0; p < pth.length; p++) { x = pth[p][0]; y = pth[p][1]; type = pth[p][2]; if (p < pth.length-1) { x2 = pth[p+1][0]; y2 = pth[p+1][1]; nextType = pth[p+1][2]; } else { nextType = undefined; } if (type === "junction") { stroke(this.colour & ~invisible); strokeWeight(junctionSz/2 * this.strokeWeight); point(x, y); strokeWeight(this.strokeWeight); stroke(this.colour); } else if (type === "jumpUp") { if (++j % 2) { arc(x, y, js, js, -PI, 0); } else { arc(x, y, js, js, 0, PI); } x += ((x <= x2) ? d : -d); } else if (type === "jumpRight") { arc(x, y, js, js, -PI/2, PI/2); y += ((y <= y2) ? d : -d); } /* now the line segment line segment / if (nextType === "jumpUp") { x2 -= ((x <= x2) ? d : -d); } else if (nextType === "jumpRight") { y2 -= ((y <= y2) ? d : -d); } line(x, y, x2, y2); } }; / * Constructor function for a bus which is a lot * like a straight wire with junctions. The bus * connects to the last segment of wire w at scale * along the way and runs to the lastDst. * * Like wires, buses are all for show. / var Bus = function(w, scale, lastDst) { if (lastDst.component && lastDst.component.wireExtend) { lastDst = lastDst.component.wireExtend(lastDst); } this.strokeWeight = w.strokeWeight; this.dst = lastDst; this.path = []; var j; var b = w.path[w.path.length-1]; var a = w.path[w.path.length-2]; var dx = b[0] - a[0]; var dy = b[1] - a[1]; if (dy === 0) { / last segment is horizontal / this.horizontal = false; j = [ a[0] + scaledx, a[1] ]; this.path.push(j); j = [ j[0], lastDst.y ]; } else { /* last segment is vertical / this.horizontal = true; j = [ a[0], a[1] + scaledy ]; this.path.push(j); j = [ lastDst.x, j[1] ]; } this.path.push(j); w.connectBus(this); }; Bus.prototype.addWire = function(pin, enclosure) { enclosure = (enclosure) ? enclosure : this; var w, src, isEdge; var bb = this.path[0], be = this.path[this.path.length-1]; if (this.horizontal) { src = { x: pin.x, y: bb[1] }; isEdge = (pin.x === bb[0] \|\| pin.x === be[0]); } else { src = { x: bb[0], y: pin.y }; isEdge = (pin.y === bb[1] \|\| pin.y === be[1]); } enclosure.wires.push(w = new Wire(src, pin, this.colour)); if (! isEdge) { w.path[0][2] = "junction"; } w.connectedBus = this; return w; }; Bus.prototype.render = function() { var pth = this.path; stroke(this.colour); strokeWeight(this.strokeWeight); line(pth[0][0], pth[0][1], pth[1][0], pth[1][1]); }; /* * Propagate the output of one component to the input of * the next component. If "dynamic" then the actaul propagation * is done by a later invocation of draw. Otherwise it's done * immediately. / var enqueuePropagate = function(obj, whichInput, value) { if (dynamic) { propQueue.push([ eventCnt, obj, whichInput, value ]); } else { obj.signalIn(whichInput, value); / Do it now! / } }; / * Dequeue all propagation elements with whose zeroth element is * equal to "e". Returns true if more elements can be dequeued. / var propagateQueued = function() { if (propQueue.length <= 0) { return false; } var e = propQueue[0][0]; / a previous eventCnt / while ((propQueue.length > 0) && (propQueue[0][0] === e)) { var task = propQueue.shift(); var obj = task[1]; var whichInput = task[2]; var value = task[3]; obj.signalIn(whichInput, value); } return (propQueue.length > 0); }; / Constructor function for a component's pin / var Pin = function(x, y) { this.x = x; this.y = y; this.val = undefined; }; / * Set up a propagation relationship FROM this pin * TO the nextComponent's nextPin. / Pin.prototype.setPropagate = function(nextComponent, nextPin) { if (! this.prop) { this.prop = []; } this.prop.push([ nextComponent, nextPin ]); }; / * Now that the value has been set on this output pin, * propagate the value to ALL subsequent input pins. / Pin.prototype.propagate = function() { for (var i = 0; this.prop && (i < this.prop.length); i++) { var p = this.prop[i]; var nextComponent = p[0]; var nextPin = p[1]; enqueuePropagate(nextComponent, nextPin, this.val); } }; / Generic for components / var setPropagate = function(whichResult, nxtObj, whichInput) { this.pin[whichResult].setPropagate(nxtObj, whichInput); }; / Generic button detector / var moused = function(obj) { var tx = (obj.tx === undefined) ? 0 : obj.tx; var ty = (obj.ty === undefined) ? 0 : obj.ty; var scale = (obj.mScale === undefined) ? 1 : obj.mScale; var d = dist(mouseX, mouseY, tx + scaleobj.x, ty + scaleobj.y); return (d < scale obj.diameter/2); }; /* Express pin location not provincially, rather globally / var relocatePins = function(pin, x, y, scale) { for (var p in pin) { pin[p].x = scale pin[p].x + x; pin[p].y = scale * pin[p].y + y; } }; var foldMatrix = function(matrix) { if (matrix.length !== 1) { var x = 0, y = 0, scale = 1; for (var m = 0; m < matrix.length; m++) { var e = matrix[m]; x += scale * e.x; y += scale * e.y; scale = e.scale; } matrix = [ { x: x, y: y, scale: scale } ]; } return matrix[0]; }; / * Deal with a new input signal "value" to obj's input "which". * If all inputs have been received, recursively propagate the * resulting output signal(s). / var signalIn = function(which, value) { if (this.pin[which].val === value) { / Effective noop. Give up NOW. / return; } this.pin[which].val = value; / Are all the inputs set? / for (var i = 0; i < this.inCnt; i++) { if (this.pin[which].val === undefined) { / Still waiting on more input. We are done for now. / return; } } / All inputs are set. So what are the outputs? / this.evaluate(); repaintGates.push(this); for (i = this.inCnt; i < this.pin.length; i++) { this.pin[i].propagate(); } }; / * Initialize the common fields of an object. / var initCommon = function(obj, x, y, inCnt, outCnt, scale, type, needsWiring) { obj.x = x; obj.y = y; obj.inCnt = inCnt; obj.scale = scale; obj.myType = type; if (needsWiring) { obj.component = []; obj.wires = []; obj.buses = []; } obj.pin = []; for (var c = 0; c < inCnt + outCnt; c++) { obj.pin.push(new Pin(x, y)); } myMatrix.push({ x: x, y: y, scale: scale}); obj.myMatrix = myMatrix.slice(0); / dup / }; / * Constructor for a constant component. Inputs pins: 0; * output pins: 1. The parameter "value" should be true or false. * Additional pins 2, 3, 4 for wiring only! / var Constant = function(x, y, scl, value) { initCommon(this, x, y, 1, 4, scl, "constant " + value); this.value = value; this.diameter = 28; this.width = this.height = this.scale this.diameter; this.pin[1].x += this.width/2; this.pin[2].y += this.height/2; this.pin[3].x -= this.width/2; this.pin[4].y -= this.height/2; myMatrix.pop(); }; Constant.prototype.signalIn = signalIn; Constant.prototype.setPropagate = setPropagate; Constant.prototype.evaluate = function() { this.pin[1].val = this.value * eventCnt; }; /* * If the mouse is over this, * it changes state. Returns true iff is changed. / Constant.prototype.moused = function() { var m = moused(this); if (m && (this === threeVolts)) { / ONLY on this well defined object! / this.value = (! this.value); / toggle switch state / } return m; }; Constant.prototype.render = function() { repaintGates.push(this); this.lastVal = undefined; }; Constant.prototype.repaint = function() { if ((!this.x) \|\| (!this.y) \|\| (!this.scale)) { return; / invisible / } if (this.lastVal !== this.value) { var e = foldMatrix(this.myMatrix); pushMatrix(); translate(e.x, e.y); scale(e.scale, e.scale); stroke(0); strokeWeight(2); if (this.value) { fill(posColor); } else { fill(255, 255, 255); } ellipse(0, 0, this.diameter, this.diameter); fill(0); textSize(16); textAlign(CENTER, CENTER); text((this.value) ? 1 : 0, 0, 0); textAlign(CENTER, BOTTOM); popMatrix(); this.lastVal = this.value; } }; / Constructor for an LED. Input pins: 0; output pins: 1 / var LED = function(x, y, scl) { initCommon(this, x, y, 1, 1, scl, "LED"); this.diameter = 28; this.len = 2.2 this.diameter; this.width = this.height = this.scale * this.len; this.pin[0].x = x - this.scale * this.diameter; this.pin[1].x = x + this.scale * this.diameter; this.pin[1].val = false; myMatrix.pop(); }; LED.prototype.signalIn = signalIn; LED.prototype.setPropagate = setPropagate; LED.prototype.evaluate = function() { this.pin[1].val = this.pin[0].val; /* "pass through" / }; LED.prototype.render = function() { var illuminated = this.pin[1].val && threeVolts.pin[1].val; pushMatrix(); translate(this.x, this.y); scale(this.scale, this.scale); stroke(0); strokeWeight(2); line(-this.len/2, 0, this.len/2, 0); strokeWeight(junctionSz); point(this.len/2, 0); fill(0); textSize(18); text(this.label, 0, 1.2this.diameter); popMatrix(); repaintGates.push(this); this.lastVal = undefined; }; LED.prototype.repaint = function() { var illuminated = this.pin[1].val && threeVolts.pin[1].val; if (this.lastVal !== illuminated) { var e = foldMatrix(this.myMatrix); stroke(0); strokeWeight(2); if (illuminated) { fill(ledOn); } else { fill(255, 255, 255); } ellipse(e.x, e.y, e.scalethis.diameter, e.scalethis.diameter); this.lastVal = illuminated; } }; /* * Constructor for an switch. Input pins: 0; outputs pins: 1. / var Swtch = function(x, y, scl, colour) { initCommon(this, x, y, 1, 1, scl, "swtch"); this.colour = (colour) ? colour : 0; this.diameter = 28; this.clsd = false; / state of the switch / this.width = this.height = this.scale 2 * this.diameter; this.pin[0].x = x - this.width/2; this.pin[1].x = x + this.width/2; this.pin[1].val = false; this.bgColor = bgColor; myMatrix.pop(); }; Swtch.prototype.signalIn = signalIn; Swtch.prototype.setPropagate = setPropagate; Swtch.prototype.evaluate = function() { this.pin[1].val = (this.pin[0].val && this.clsd); }; /* * If the mouse is over this switch, * it changes state. Returns true iff is changed. / Swtch.prototype.moused = function() { var m = moused(this); if (m) { this.clsd = (! this.clsd); / toggle switch state / } return m; }; / When the switch is embedded in a larger component / Swtch.prototype.transformed = function(x, y, scale) { this.tx = x; this.ty = y; this.mScale = scale; }; Swtch.prototype.render = function() { var x = this.pin[1].x; var y = this.pin[1].y; stroke(this.colour); strokeWeight(this.scale 2); line(this.pin[0].x, this.pin[0].y, x, y); strokeWeight(this.scale * junctionSz); point(x, y); pushMatrix(); translate(this.x, this.y); scale(this.scale, this.scale); fill(0); textSize(18); text(this.label, 0, 1.2this.diameter); popMatrix(); repaintGates.push(this); this.lastVal = undefined; }; Swtch.prototype.repaint = function() { var val = this.pin[1].val; if (this.lastVal !== val) { var d = this.diameter; var h = d 1.31; var e = foldMatrix(this.myMatrix); pushMatrix(); translate(e.x, e.y); scale(e.scale, e.scale); fill(this.bgColor); noStroke(); rect(0, (d - h)/2, d + 1, h); fill((val) ? switchOn : negColor); ellipse(0, 0, this.diameter, this.diameter); stroke(this.colour); strokeWeight(2); translate(-this.diameter/2, 0); if (! this.clsd) { rotate(-PI/5); } line(0, 0, this.diameter, 0); noFill(); arc(0, 0, 2this.diameter, 2this.diameter, -PI/14, PI/14); popMatrix(); this.lastVal = val; } }; /* * Constructor for a LOGIC component. Input pins: 0 and 1; * Output pin: 2. "type" must be one of 'and', 'nand', 'or', * 'nor' or 'xor'. / var Logic = function(x, y, scl, type) { initCommon(this, x, y, 2, 1, scl, type); / Setup the cooresponding images and "result" function / this.pin[2].val = false; switch (type) { case "and": this.evaluate = this.and; this.negImg = getAndGateImg(true, negColor); this.posImg = getAndGateImg(true, posColor); break; case "nand": this.evaluate = this.nand; this.negImg = getAndGateImg(false, posColor, negColor); this.posImg = getAndGateImg(false, negColor, posColor); this.pin[2].val = true; break; case "or": this.evaluate = this.or; this.negImg = getOrGateImg(negColor); this.posImg = getOrGateImg(posColor); break; case "nor": this.evaluate = this.nor; this.negImg = getNorGateImg(posColor, negColor); this.posImg = getNorGateImg(negColor, posColor); this.pin[2].val = true; break; case "xor": this.evaluate = this.xor; this.negImg = getXorGateImg(negColor); this.posImg = getXorGateImg(posColor); break; default: throw({ message: "component type " + type + " unknown!" }); } this.width = this.posImg.width; this.height = this.posImg.height; / Lots of pins' coordinates to be computed / var a = this.pin[0], b = this.pin[1], r = this.pin[2]; a.x = b.x = this.x + this.scale this.posImg.pinX; a.y = this.y - this.scale * this.posImg.height/4; b.y = this.y + this.scale * this.posImg.height/4; r.y = this.y; r.x = this.x + this.scale * this.posImg.width/2; myMatrix.pop(); }; Logic.prototype.signalIn = signalIn; Logic.prototype.setPropagate = setPropagate; Logic.prototype.and = function() { var a = this.pin[0].val; var b = this.pin[1].val; var r = this.pin[2].val = (a && b); return (r); }; Logic.prototype.nand = function() { this.pin[2].val = ! this.and(); }; Logic.prototype.or = function() { var a = this.pin[0].val; var b = this.pin[1].val; var r = this.pin[2].val = (a \|\| b); return (r); }; Logic.prototype.nor = function() { this.pin[2].val = ! this.or(); }; Logic.prototype.xor = function() { var a = (this.pin[0].val > 0); var b = (this.pin[1].val > 0); this.pin[2].val = (a !== b); }; Logic.prototype.render = function() { repaintGates.push(this); this.lastImg = undefined; }; Logic.prototype.repaint = function() { var img = (this.pin[2].val) ? this.posImg : this.negImg; pushMatrix(); var e = foldMatrix(this.myMatrix); translate(e.x, e.y); scale(e.scale, e.scale); if (this.lastImg !== img) { image(img, 0, 0); this.lastImg = img; } strokeWeight(15); stroke((this.pin[0].val) ? switchOn : negColor); point(img.a.x, img.a.y); stroke((this.pin[1].val) ? switchOn : negColor); point(img.b.x, img.b.y); popMatrix(); }; /* * Constructor function for a half-adder component. * Input pins: 0 and 1; output pins: 2 (sum) and 3 (carry). / var HalfAdder = function(x, y, scl) { initCommon(this, x, y, 2, 2, scl, "halfAdder", true); var i, l, xx, yy, xor, and, w, b, c = this.component; l = new Logic(0, 0, 1, "xor"); / for sizing / this.width = this.scale 3/2 * l.width; this.height = this.scale * 2.1 * l.height; xx = 1/4 * l.width - 1; yy = -1/2 * l.height; c.push(xor = new Logic(xx, yy, 1, "xor")); yy += l.height; c.push(and = new Logic(xx, yy, 1, "and")); this.pin[0].x = -3/4 * l.width; this.pin[0].y = xor.pin[0].y; this.wires.push(w = new Wire(this.pin[0], xor.pin[0], invisible)); this.buses.push(b = new Bus(w, 0.55, and.pin[0])); b.addWire(and.pin[0], this); this.pin[1].x = -3/4 * l.width; this.pin[1].y = and.pin[1].y; this.wires.push(w = new Wire(this.pin[1], and.pin[1], invisible)); this.buses.push(b = new Bus(w, 0.25, xor.pin[1])); b.addWire(xor.pin[1], this); this.pin[2].x = xor.pin[2].x; this.pin[2].y = xor.pin[2].y; this.pin[3].x = and.pin[2].x; this.pin[3].y = and.pin[2].y; for (i = 0; i < 2; i++) { this.pin[i].component = this; /* for wireExtend / } / Finally convert pins locations for external reference / relocatePins(this.pin, x, y, this.scale); myMatrix.pop(); }; HalfAdder.prototype.signalIn = function(which, value) { var g, gate, gates = this.component; for (g in gates) { gate = gates[g]; gate.signalIn(which, value); } }; HalfAdder.prototype.setPropagate = function(whichResult, nxtObj, whichInput) { var gate = this.component[whichResult - this.inCnt]; gate.setPropagate(2, nxtObj, whichInput); }; HalfAdder.prototype.wireExtend = function(whichPin) { var i = this.pin.indexOf(whichPin); var p = [], gates = this.component; switch (i) { case 0: / Wire runs into the XOR gate's top pin / p.x = this.scale gates[0].pin[0].x + this.x; p.y = this.scale * gates[0].pin[0].y + this.y; break; case 1: /* Wire runs into the AND gate's bottom pin / p.x = this.scale gates[1].pin[1].x + this.x; p.y = this.scale * gates[1].pin[1].y + this.y; break; default: return (whichPin); /* don't care / } return (p); }; HalfAdder.prototype.render = function() { if (this.noStroke) { noStroke(); } else { strokeWeight(1); stroke(0); } fill(240, 230, 240); pushMatrix(); translate(this.x, this.y); rect(0, 0, this.width, this.height); fill(0); textSize(this.scale 18); text(this.label, 0, this.height/2 + this.scale18 + 2); scale(this.scale, this.scale); renderComponents(this); popMatrix(); }; / * Constructor function for a full-adder component. * Input pins: 0 through 2; output pins: 3 and 4. / var C = 0, B = 1, A = 2, S = 3, CO = 4; / full adder pin names / var FullAdder = function(x, y, scl, n) { initCommon(this, x, y, 3, 2, scl, "fullAdder", true); var xx, yy, or, h1, h2, w, d, p, c = this.component; this.n = n; or = new Logic(0, 0, 1, "or"); / for sizing / h1 = new HalfAdder(0, 0, 1); / for sizing / this.width = (2.3h1.width + or.width); this.height = 1.30 * h1.height; xx = -this.width/2 + h1.width/2 + 1; yy = this.height/2 - h1.height/2; c.push(h1 = new HalfAdder(xx, yy, 1)); h1.noStroke = true; xx += 1.17 * h1.width; yy = -1; yy = -this.height/2 + h1.height/2 + 2; c.push(h2 = new HalfAdder(xx, yy, 1)); h2.noStroke = true; h1.setPropagate(2, h2, 1); xx = this.width/2 - or.width/2 - 1; yy = h1.pin[3].y - or.pin[1].y; yy = this.height/2 - or.height/2; c.push(or = new Logic(xx, yy, 1, "or")); h1.setPropagate(3, or, 1); h2.setPropagate(3, or, 0); this.pin[C].x = -this.width/2; this.pin[C].y = h2.pin[0].y; this.pin[B].x = -this.width/2; this.pin[B].y = h1.pin[0].y; this.pin[A].x = -this.width/2; this.pin[A].y = h1.pin[1].y; this.pin[S].x = this.width/2; this.pin[S].y = h2.pin[2].y; this.pin[CO].x = this.width/2; this.pin[CO].y = or.pin[2].y; d = (h2.pin[0].x - h1.pin[2].x)/2; this.wires.push(w = new Wire(h1.pin[3], or.pin[1], 0, d)); this.wires.push(w = new Wire(h1.pin[2], h2.pin[1], 0, d)); this.wires.push(w = new Wire(this.pin[C], h2.pin[0], invisible)); this.wires.push(w = new Wire(h2.pin[2], this.pin[S], invisible)); this.wires.push(w = new Wire(h2.pin[3], or.pin[0], 0, d-1)); for (p = 0; p < 4; p++) { this.pin[p].component = this; / for wireExtend / } / Finally convert pins locations for external reference / relocatePins(this.pin, x, y, this.scale); this.slicePos = 0.35 this.width; this.width = this.scale; this.height = this.scale; this.noStroke = true; myMatrix.pop(); }; FullAdder.prototype.signalIn = function(which, value) { var p, gate, gates = this.component; switch (which) { case 0: /* "carry-in" goes to zero pin of 2nd half-adder / p = 0; gate = gates[1]; break; case 1: / "b" goes to zero pin of first half-adder / p = 0; gate = gates[0]; break; case 2: / "a" goes to one pin of first half-adder / p = 1; gate = gates[0]; break; default: return; } gate.signalIn(p, value); }; FullAdder.prototype.setPropagate = function(whichResult, nxtObj, whichInput) { var gate = this.component[whichResult - 2]; gate.setPropagate(2, nxtObj, whichInput); }; FullAdder.prototype.wireExtend = function(whichPin) { var i = this.pin.indexOf(whichPin); var p, gate, gates = this.component; switch(i) { case 0: / Wire runs into the 2nd half-adder / gate = gates[1]; p = 0; break; case 1: / Wire runs into the top of 1st half adder / gate = gates[0]; p = 0; break; case 2: / Wire runs into the bottom of 1st half adder / gate = gates[0]; p = 1; break; case 3: / Wire runs from the 2nd half addr's sum / gate = gates[1]; p = 2; break; default: return (whichPin); / don't care / } p = gate.wireExtend(gate.pin[p]); p.x = this.scale p.x + this.x; p.y = this.scale * p.y + this.y; return (p); }; FullAdder.prototype.render = function() { if (this.noStroke) { noStroke(); } else { strokeWeight(1); stroke(0); } fill(225, 235, 225); pushMatrix(); translate(this.x, this.y); rect(0, 0, this.width, this.height); fill(0); textSize(18); text(this.label, 0, this.height/2 + 18 + 2); scale(this.scale, this.scale); renderComponents(this); if (this.n !== undefined) { fill(0); textSize(24); text("Full adder " + this.n, this.slicePos, 0); } popMatrix(); }; /* * Convert the four bits represented in the gates to a number. * The number can either be unsigned or two's compliment. / var gatesToNumber = function(gates, mode) { mode = (mode === undefined) ? binaryMode : mode; var gate = gates[3]; var zero = (mode === "twosCompliment" && gate.pin[1].val) ? -1 : 0; var one = zero + 1; var num = 0; for (var g = 4; --g >= 0; ) { gate = gates[g]; num = 2num + ((gate.pin[1].val) ? one : zero); } return num + zero; }; /* Convert the number n back into open & closed gates / var numberToGates = function(n, gates) { for (var g in gates) { gates[g].clsd = ((n & (1 << g)) !== 0); } }; / * Repaint the decimal number associated with either of the * gangLED or gangSwtch. / var repaintNumber = function() { var x, y, gates = this.component; var e = foldMatrix(this.myMatrix); pushMatrix(); translate(e.x, e.y); scale(e.scale, e.scale); textAlign(CENTER, BOTTOM); textSize(18); / print a number represented by the four switches / x = gates[3].x; y = 2.3gates[3].y - gates[2].y; translate(x, y); fill(this.bgColor); noStroke(); scale(2.0, 1.8); rect(0, -10, 20, 20); fill(this.colour); text(gatesToNumber(gates), 0, 0); popMatrix(); }; /* * Constructor function for a gang of four switches. * Input pins: 0; Output pins: 1 through 4. / var GangSwtch = function(x, y, scl, colour, name) { initCommon(this, x, y, 1, 4, scl, "gangSwtch", true); var xx, yy, b, w, w2, ss, l, gates = this.component; this.colour = colour; this.name = name; this.bgColor = color(220, 230, 230); ss = new Swtch(x, y, 1, 0); / just for sizing / w = ss.width; w2 = 1.2w; this.width = this.scale * w2; xx = w2/2 - w/2; this.height = this.scale * 5 * ss.height; yy = -2 * ss.height; for (var g = 1; g <= 4; g++, yy += ss.height) { gates.push(l = new Swtch(xx, yy, 1, colour)); l.transformed(x, y, this.scale); l.label = name + (g - 1); l.bgColor = this.bgColor; this.pin[g].x = l.pin[1].x; this.pin[g].y = l.pin[1].y; } /* input pin / this.pin[0].x = -w2/2; this.pin[0].y = -2 ss.height; this.wires.push(w = new Wire(this.pin[0], gates[0].pin[0], colour, 0)); this.buses.push(b = new Bus(w, 1, gates[gates.length-1].pin[0])); /* Finally convert pins locations for external reference / relocatePins(this.pin, x, y, this.scale); myMatrix.pop(); }; GangSwtch.prototype.signalIn = function(which, value) { / propagate the signal to individual swicthes / var gates = this.component; for (var g in gates) { var gate = gates[g]; gate.signalIn(0, value); } repaintGates.push(this); }; GangSwtch.prototype.moused = function() { var gate, gates = this.component; for (var g in gates) { gate = gates[g]; if (gate.moused()) { return true; } } / See if they clicked on a displayed number / var d = dist(mouseX, mouseY, this.x, this.y + 2/5 this.height); if (d < this.width/3) { var n = gatesToNumber(gates, "unsigned"); if (mouseButton === RIGHT) { n += 15; } else if (mouseButton === LEFT) { n += 1; } numberToGates(n % 16, gates); return true; } return false; }; GangSwtch.prototype.setPropagate = function(whichResult, nxtObj, whichInput) { var g = whichResult - 1; var gate = this.component[g]; gate.setPropagate(1, nxtObj, whichInput); }; GangSwtch.prototype.render = function() { var n, x, y, gates = this.component; strokeWeight(1); stroke(this.colour); fill(this.bgColor); pushMatrix(); translate(this.x, this.y); rect(0, 0, this.width, this.height); if (this.label) { pushMatrix(); translate(0, this.height/2 + this.height/7); textSize(24); scale(this.scale, this.scale); fill(0, 0, 0); text(this.label, 0, 0); popMatrix(); } scale(this.scale, this.scale); renderComponents(this); repaintGates.push(this); popMatrix(); }; GangSwtch.prototype.repaint = repaintNumber; /* * Constructor function for a gang of four LEDs. * Inputs: 0 through 3; Outputs: 4 through 7. / var GangLED = function(x, y, scl, colour, name) { initCommon(this, x, y, 4, 4, scl, "gangLED", true); var ss, yy, l, gates = this.component; this.colour = colour; this.name = name; this.bgColor = color(220, 230, 230); l = new LED(x, y, 1); / just for sizing / ss = new Swtch(x, y, 1, 0); / just for sizing / yy = -2 ss.height; for (var g = 0; g < 4; g++, yy += ss.height) { gates.push(l = new LED(0, yy, 1)); l.label = name + g; this.pin[g].x = this.scale * l.pin[0].x + x; this.pin[g].y = this.scale * l.pin[0].y + y; this.pin[g+4].x = this.scale * l.pin[1].x + x; this.pin[g+4].y = this.scale * l.pin[1].y + y; } this.width = this.scale * l.width; this.height = this.scale * 5 * ss.height; myMatrix.pop(); }; GangLED.prototype.signalIn = function(which, value) { var gate = this.component[which]; gate.signalIn(0, value); if (repaintGates.indexOf(this) < 0) { repaintGates.push(this); } }; GangLED.prototype.setPropagate = function(whichResult, nxtObj, whichInput) { var g = whichResult - 4; var gate = this.component[g]; gate.setPropagate(gate.inCnt, nxtObj, whichInput); }; GangLED.prototype.render = function() { var n, x, y, gates = this.component; strokeWeight(1); stroke(0); fill(this.bgColor); pushMatrix(); translate(this.x, this.y); rect(0, 0, this.width, this.height); if (this.label) { pushMatrix(); translate(0, this.height/2 + this.height/7); textSize(24); scale(this.scale, this.scale); fill(0, 0, 0); text(this.label, 0, 0); popMatrix(); } scale(this.scale, this.scale); renderComponents(this); repaintGates.push(this); popMatrix(); }; GangLED.prototype.repaint = repaintNumber; /* * Constructor function for a 4-bit inverter. Input pins: 0 * through 3 are data, pin 4 is the "do it" input. Output pins: * 5 through 8. / var Inverter = function(x, y, scl) { initCommon(this, x, y, 5, 4, scl, "inverter", true); var xx, yy, b, w, l, p, gates = this.component; l = new Logic(x, y, 1, "xor"); / just for sizing / this.width = 1.3 l.width; xx = this.width/2 - l.width/2; this.height = this.scale * 4.2 * l.height; yy = -3/2 * l.height; for (var g = 0; g < 4; g++, yy += l.height) { gates.push(l = new Logic(xx, yy, 1, "xor")); p = this.pin[g]; p.x = -this.width/2; p.y = l.pin[1].y; this.wires.push(w = new Wire(p, l.pin[1])); p = this.pin[g + this.inCnt]; p.x = l.pin[2].x; p.y = l.pin[2].y; } /* the special "do invertion" pin / l = gates[0]; p = this.pin[4]; p.x = -3/4 l.width + 0.2 * l.width; p.y = -this.height/ 2 / this.scale; this.wires.push(w = new Wire(p, l.pin[0], Red)); /* inverter bus / l = gates[gates.length-1]; this.buses.push(b = new Bus(w, 0.30, l.pin[0])); for (g in gates) { l = gates[g]; b.addWire(l.pin[0], this); } / Finally convert pins locations for external reference / relocatePins(this.pin, x, y, this.scale); this.width = this.scale; myMatrix.pop(); }; Inverter.prototype.signalIn = function(which, value) { var gates = this.component, gate = gates[which]; if (which === 4) { for (var g in gates) { gate = gates[g]; gate.signalIn(0, value); } } else { gate.signalIn(1, value); } }; Inverter.prototype.setPropagate = function(whichResult, nxtObj, whichInput) { var gate = this.component[whichResult - this.inCnt]; gate.setPropagate(2, nxtObj, whichInput); }; /* Render this inverter. / Inverter.prototype.render = function() { strokeWeight(1); stroke(0); fill(220, 230, 240); pushMatrix(); translate(this.x, this.y); rect(0, 0, this.width, this.height); if (this.label) { fill(0); textSize(18); textAlign(CENTER, TOP); text(this.label, 0, this.height/2); textAlign(CENTER, BOTTOM); } scale(this.scale, this.scale); renderComponents(this); popMatrix(); }; / * Constructor function for an "output clock". * Four input pins; zero outputs. / var Clock = function(x, y, scl) { var pins = initCommon(this, x, y, 4, 0, scl, "clock"); this.value = 0; this.diameter = 150; this.width = this.height = this.scale this.diameter; myMatrix.pop(); }; Clock.prototype.signalIn = function(which, value) { var v = (value) ? 1 : 0; this.value &= ~(1 << which); this.value \|= (v << which); repaintGates.push(this); }; /* Render this clock / Clock.prototype.render = function() { repaintGates.push(this); }; / Repaint this clock. / Clock.prototype.repaint = function() { var e = foldMatrix(this.myMatrix); var textSz = 12; var eSz = 18; var theta, ti = TWO_PI/16; var txtFill, x, y, d, r = this.diameter/2 - eSz/2 - 2; textSize(textSz); textAlign(CENTER, CENTER); pushMatrix(); translate(e.x, e.y); scale(e.scale, e.scale); fill(bgColor); noStroke(); d = this.diameter + 2eSz + 6; ellipse(0, 0, d, d); theta = -PI/2 + this.value * ti; x = 0.77 * r * cos(theta); y = 0.77 * r * sin(theta); strokeWeight(4); stroke(posColor); line(0, 0, x, y); stroke(0); strokeWeight(1); noFill(); ellipse(0, 0, this.diameter, this.diameter); theta = -PI/2; for (var i = 0; i < 16; i++, theta += ti) { x = r * cos(theta); y = r * sin(theta); if (i === (16 - this.value)) { fill(0); txtFill = posColor; } else if (i === this.value) { fill(posColor); txtFill = 0; } else { fill(negColor); txtFill = 0; } ellipse(x, y, eSz, eSz); fill(txtFill); text(i, x, y); } var comp = max(this.value, 16 - this.value); comp = 16 - comp; if (comp < 9 && comp > 0) { r = this.diameter/2 + eSz/2 + 2; theta = -comp * ti; stroke(0); line(0, -r-eSz/3, 0, -r+eSz/3); noFill(); strokeWeight(1); arc(0, 0, 2r, 2r, theta - PI/2, -PI/2); fill(negColor); x = r * cos(theta - PI/2); y = r * sin(theta - PI/2); ellipse(x, y, eSz, eSz); fill(0); text(-comp, x, y); } popMatrix(); }; /* Update ALL the state before rendering any images / var update = function(mouseEvent) { var moused = false; eventCnt++; var more = propagateQueued(); button.updateButtons(buttons); for (var c in component) { if (mouseEvent && component[c].moused) { moused \|= component[c].moused(); } if (keyIsPressed && component[c].keyIsPressed) { component[c].keyIsPressed(); } } if (moused) { / This starts the propagation of new signals / zeroVolts.signalIn(0, eventCnt); threeVolts.signalIn(0, eventCnt); } if (moused \|\| more) { loopDeeDo = 3; } }; / Render all the components found in enclosure / var renderComponents = function(enclosure) { for (var n in enclosure.component) { enclosure.component[n].render(); } for (n in enclosure.buses) { enclosure.buses[n].render(); } for (n in enclosure.wires) { enclosure.wires[n].render(enclosure); } enclosure.rendered = true; }; var doRepaint = function() { while (repaintGates.length > 0) { var r = repaintGates.pop(); r.repaint(); } }; / Initialize when beginning a new page / var commonPageInit = function(scale, buttonCnt) { frameRate(30); propQueue = []; repaintGates = []; buttons = origButtons.slice(0, buttonCnt); loopDeeDo = 3; title = undefined; titleX = width/2; titleY = buttons[0].y; buses = []; component = []; wires = []; myMatrix = []; / Build one of each component for sizing purposes / var gangScale = 1, dy, dg, t = []; t.threeVolts = new Constant(0, 0, scale, true); t.zeroVolts = zeroVolts = new Constant(0, 0, scale, false); t.swtch = new Swtch(0, 0, scale); t.led = new LED(0, 0, scale); t.gate = new Logic(0, 0, scale, "xor"); t.i = new Inverter(0, 0, scale); t.half = new HalfAdder(0, 0, scale); t.full = new FullAdder(0, 0, scale); t.leds = new GangLED(0, 0, gangScale scale, 0, ""); /* scale the gang switch & led to exactly fit the inverter / dy = t.i.pin[1].y - t.i.pin[0].y; dg = t.leds.pin[1].y - t.leds.pin[0].y; gangScale = dy/dg; t.leds = new GangLED(0, 0, gangScale scale, 0, ""); t.gs = new GangSwtch(0, 0, gangScale * scale, 0, ""); rendered = false; return t; }; /* Get ready to display a canvas with a full-adder on it. / var initializeFullAdder = function() { var scale = 0.5; var t = commonPageInit(scale, 3); var c = component; var f, x, y, sum, carry, a, b, ci; Wire.sw.push(3); c.push(f = new FullAdder(width/2 + 5, height/2, scale)); Wire.sw.pop(); f.noStroke = false; f.label = "full adder"; scale = 1.4; x = (width + f.pin[S].x) / 2; y = f.pin[S].y; c.push(sum = new LED(x, y, scale)); sum.label = "sum"; y = f.pin[CO].y; c.push(carry = new LED(x, y, scale)); carry.label = "carry"; x = f.pin[C].x / 2; y = f.pin[B].y; c.push(b = new Swtch(x, y, scale, 0)); b.label = "B"; y = f.pin[A].y; c.push(a = new Swtch(x, y, scale, 0)); a.label = "A"; y = b.pin[0].y - (f.pin[A].y - f.pin[B].y); c.push(ci = new Swtch(x, y, scale, 0)); ci.label = "C"; x = a.pin[0].x; c.push(threeVolts = new Constant(x, height/6, 1, true)); c.push(zeroVolts = t.zeroVolts); threeVolts.setPropagate(1, a, 0); threeVolts.setPropagate(1, b, 0); threeVolts.setPropagate(1, ci, 0); a.setPropagate(1, f, A); b.setPropagate(1, f, B); ci.setPropagate(1, f, C); f.setPropagate(S, sum, 0); f.setPropagate(CO, carry, 0); wires.push(new Wire(threeVolts.pin[2], a.pin[0])); wires.push(new Wire(a.pin[1], f.pin[A])); wires.push(new Wire(b.pin[1], f.pin[B])); wires.push(new Wire(ci.pin[1], f.pin[C])); wires.push(new Wire(f.pin[S], sum.pin[0])); wires.push(new Wire(f.pin[CO], carry.pin[0])); title = "Adding Three Bits"; titleX = 0.42 * width; blurb = "Here we add THREE single-digit ('one bit') binary numbers, A, B and C. As with the half adder, there are TWO results from the addition - the 'sum' and the 'carry'.\nWe employ two half adders to make a full adder. A and B are inputs to the first half adder. The resulting sum and C are inputs to the second half adder. The second half adder's sum is clearly the sum of A + B + C. The carry of the full adder is determined by ORing the two carry outputs of the two half adders.\nSince the full adder has three inputs and two outputs, the number of combinations of input is 2³ (eight) while the number of combinations of outputs is 2² (four). All four outputs are achievable. The sum and carry outputs are both 0 only when all of A, B and C are 0; that is, 0 + 0 + 0 is 0. Similarly the sum and carry outputs are both 1 only when all of A, B and C are 1; that is, 1 + 1 + 1 = 3. Sum = 1 and carry = 0 occurs when any one of A, B or C is 1 while the other two are 0. Finally, sum = 0 and carry = 1 occur when any one of A, B or C is 0 while the other two are 1.\nAs with the half adder, by clicking on the input switches for A, B and C, you can exhaustively test this full adder circuit. The full adder's two results can be interpreted as a two-bit binary number where 'sum' represents 2⁰ and 'carry' represents 2¹.\nNow that we have the circuitry necessary to fully add a single column of binary numbers, we can consider using multiple full adders for adding multiple columns of binary numbers. That circuit follows."; }; /* Get ready to display a canvas with a half-adder on it. / var initializeHalfAdder = function() { var scale = 1; var t = commonPageInit(scale, 3); var c = component; var h, x, y, sum, carry, a, b; c.push(h = new HalfAdder(width/2, height/2, scale)); h.label = "half adder"; x = (width + h.pin[2].x) / 2; y = h.pin[2].y; c.push(sum = new LED(x, y, scale)); sum.label = "sum"; y = h.pin[3].y; c.push(carry = new LED(x, y, scale)); carry.label = "carry"; x = h.pin[0].x / 2; y = h.pin[0].y; c.push(b = new Swtch(x, y, scale, 0)); b.label = "B"; y = h.pin[1].y; c.push(a = new Swtch(x, y, scale, 0)); a.label = "A"; x = a.pin[0].x; c.push(threeVolts = new Constant(x, height/6, 1, true)); c.push(zeroVolts = t.zeroVolts); threeVolts.setPropagate(1, a, 0); threeVolts.setPropagate(1, b, 0); a.setPropagate(1, h, 1); b.setPropagate(1, h, 0); h.setPropagate(2, sum, 0); h.setPropagate(3, carry, 0); wires.push(new Wire(threeVolts.pin[2], a.pin[0])); wires.push(new Wire(a.pin[1], h.pin[1])); wires.push(new Wire(b.pin[1], h.pin[0])); wires.push(new Wire(h.pin[2], sum.pin[0])); wires.push(new Wire(h.pin[3], carry.pin[0])); title = "Adding Two Bits"; titleX = width/2; blurb = "The task at hand is to add two single-digit ('one bit') binary numbers, A and B. There are TWO results from the addition - the 'sum' and the 'carry'. The sum of 0 and any number is that number; the corresponding carry is 0. The sum of 1 and 1 is 0; its corresponding carry is 1.\nTranslating the English description above to a logic circuit is simple. The AND of A and B determines the carry - they must both be 1 for the carry to be 1. The XOR of A and B determines the sum - it is 1 when exacly one of A or B is 1.\nBy clicking on the input switches for A and B, you can exhaustively test this 'half adder' circuit for correctness. Also note that the two results can be interpreted as a two-bit binary number where 'sum' represents 2⁰ and 'carry' represents 2¹.\nWhy is this called a 'half adder'? Because if you are considering adding more than single-digit binary numbers, you will have to consider a third input known as the 'carry-in'. So a 'full adder' has three inputs and two outputs. Its design follows."; }; / Get ready to display a canvas with a 4-bit adder circuit. / var initializeFourBitAdder = function(withSubtract) { var scale = 0.34; var t = commonPageInit(scale, (withSubtract) ? 5 : 4); var c = component; var a, b, bs, sw, invrt, j, p, sub, s, lasts, l, w, x, y, xxoff; x = 0.9 t.gs.width; /* power supply / c.push(threeVolts = new Constant(x, height - x, 2.6scale, true)); /* B's and A's input switches / y = (height-1) / 2; c.push(a = new GangSwtch(x, y+0.55t.gs.height, t.gs.scale, 0, "a")); c.push(b = new GangSwtch(x, a.y - 1.1a.height, t.gs.scale, 0, "b")); threeVolts.setPropagate(1, a, 0); threeVolts.setPropagate(1, b, 0); / inverter / y = round(b.y - 0.75b.height); if (withSubtract) { /* subtract switch / c.push(sub = new Swtch(x, y, 2scale, Red)); sub.label = " minus"; threeVolts.setPropagate(1, sub, 0); wires.push(w = new Wire(sub.pin[0], threeVolts.pin[3], Red, -b.width/5)); buses.push(bs = new Bus(w, 0, sub.pin[0])); bs.addWire(a.pin[0], this); bs.addWire(b.pin[0], this); /* inverter / c.push(invrt = new Inverter( b.x + 0.9b.width + t.i.width/2, b.y - 20, scale)); sub.setPropagate(1, invrt, 4); Wire.sw.push(1); wires.push(sw = new Wire(sub.pin[1], invrt.pin[4], Red, invrt.pin[4].x - sub.pin[1].x)); Wire.sw.pop(); zeroVolts = t.zeroVolts; } else { sub = zeroVolts = new Constant(x, y, 2.6scale, false); invrt = b; wires.push(w = new Wire(b.pin[0], threeVolts.pin[3], Red, -b.width/5)); buses.push(bs = new Bus(w, 0, b.pin[0])); bs.addWire(a.pin[0], this); } c.push(zeroVolts); / LED final readout / y = (b.y + a.y) / 2 + 5; c.push(l = new GangLED(width - t.leds.width/2 - 1, y, t.leds.scale, 0, "s")); / four slices of a full adder / Wire.sw.push(1); var dx = (l.x - l.width/2) - (invrt.x + invrt.width/2); s = t.full; x = l.x - l.width/2 - 0.42dx; y = sub.y - s.pin[C].y; dx = (l.x - l.width/2) - (x + s.width/2); var xoff = [0.8dx, 0.38dx, 0, 0.70dx]; dx = (x - s.width/2) - (invrt.x + invrt.width/2); if (invrt !== b) { xxoff = [0.8dx, 0.8dx, 0.6dx, 0dx, 0.4dx, 0.6dx, 0.2dx, -0.2dx]; } else { xxoff = [0.2dx, 0.2dx, 0.71dx, 0.71dx, 0.5dx, 0.8dx, 0.35dx, 0.2dx]; } var r = []; / routes leading to the full adders / for (j = 0; j < 4; j++, y += 1.18 s.height, lasts = s) { Wire.sw.push(2.1); c.push(s = new FullAdder(x, y, scale, j)); Wire.sw.pop(); if (j) { lasts.setPropagate(CO, s, C); wires.push(w = new Wire(lasts.pin[CO], s.pin[C], Red)); w.zigzag(0.6); } else { if (invrt !== b) { sub.setPropagate(1, s, C); buses.push(bs = new Bus(sw, 0, s.pin[C])); } else { zeroVolts.setPropagate(1, s, C); wires.push(new Wire(zeroVolts.pin[1], s.pin[C])); } } /* connect B switches to inverter / if (invrt !== b) { b.setPropagate(b.inCnt + j, invrt, j); wires.push(w = new Wire(b.pin[b.inCnt + j], invrt.pin[j], wc[j])); } / connect inverter to full adder / invrt.setPropagate(invrt.inCnt + j, s, B); wires.push(w = new Wire(invrt.pin[invrt.inCnt + j], s.pin[1], wc[j], xxoff[2j])); r.push(w); /* connect A switches to full adder / p = a.inCnt + j; a.setPropagate(p, s, A); wires.push(w = new Wire(a.pin[p], s.pin[2], wc[j], invrt.pin[invrt.inCnt + j].x - a.pin[p].x + xxoff[2j+1])); r.push(w); /* connect full adder sum to LED / s.setPropagate(S, l, j); wires.push(w = new Wire(s.pin[S], l.pin[j], wc[j], xoff[j])); } / * Bus convertion... / buses.push(bs = r[1].upgrade()); bs.addWire(bs.dst, this); buses.push(bs = r[3].upgrade()); bs.addWire(bs.dst, this); buses.push(bs = r[4].upgrade()); bs.addWire(bs.dst, this); buses.push(bs = r[6].upgrade()); bs.addWire(bs.dst, this); Wire.sw.pop(); }; / Get ready to display a canvas with a 4-bit addition circuit / var initializeAddition = function() { initializeFourBitAdder(false); title = "4-Bit Adder"; blurb = "Here is a schematic of a circuit that is capable of adding two 4-bit integers, A and B. The fours switches for A's bits are in the lower left-hand corner. B's fours switches are above A's. Since each of A and B has four bits, their values can range from zero to 2⁴-1, or zero to fifteen.\nAddition is performed by the circuit in much the same way it is performed by humans using pencil and paper. It is accomplished with four full adders - one full adder for each column of the binary numbers for A and B. The carry output of each full adder is used as the carry-in input of the next full adder. Note the least significant column never has a carry-in, so the carry-in of the initial full adder is hardwired to zero. Similarly, the carry output of the last full adder is dropped since that would represent a fifth bit and this is only a four bit circuit. Therefore, the addition performed is modulo 2⁴ (sixteen). For example, 14 + 4 is 2.\nThe one-to-one matching of 'cascading' or 'ripple' carry full adders to each column of a binary number can continue indefinitely as long as designers are willing to tolerate increasingly longer carry propagation times. So this 4-bit adder looks like an abbreviated version of 8-bit, 16-bit and 32-bit adders. Should you tire of watching the sum ripple through the circuit, you can click on the green 'clocked' button that shows only stable/final results.\nAddition is great. But what about subtraction?"; }; / * Get ready to display a canvas with a 4-bit * add/subtract circuit / var initializeArithmetic = function() { initializeFourBitAdder(true); title = "Add / Subtract"; buttons.shift(); / discard the "next" button / blurb = "This is a 4-bit add / subtract circuit. In its initial state it adds A and B. When the 'minus' switch in the upper left-hand corner is closed, the circuit subtracts B from A.\nThe operations are performed by four full adders and a conditional inverter for B. When the minus switch is closed, the inverter inverts B. Otherwise, the inverter passes B's values straight through to the adders. The minus switch is also connected to the carry input of the first full adder. When closed, the carry input is 1. Otherwise that carry input is 0.\nSo, when the minus switch is open, the circuit behaves identically the the 4-bit adder circuit shown in a previous screen; it adds. When the minus switch is closed, the circuit computes A + Inversion(B) + 1. The previous screen showed that Inversion(B) = -B - 1, so the circuit computes A + (-B - 1) + 1, or simply A - B.\nThe interpretation of the four bits of A, B and the sum or difference of A and B is defaulted to be an unsigned integer ranging from zero to fifteen. The green 'signed' button can be toggled to change that interpretation to signed integers ranging from -8 to +7. The analogue hardware neither knows nor cares about human interpretations.\nThat's all I've got. Thank you for your time and attention!\nReferences:\nhttp://wikipedia.org/wiki/Logic_gate\nhttp://www.cs.bu.edu/~best/courses/modules/Transistors2Gates/\nhttp://wikipedia.org/wiki/Adder_(electronics)\nhttp://neovlsi.wordpress.com/2008/07/27/design-an-inverter-and-a-pass-gate-buffer-using-the-xor-gate/\nhttp://wikipedia.org/wiki/Two's_complement\nhttp://en.wikipedia.org/wiki/Intel_4004\nhttp://xkcd.com/730/\nAcknowledgements:\nLarry Serflaten suggested numerous improvements and I listened to about half of them, the most visible being the dynamic coloring of the logic gates' inputs."; }; / Get ready to display a canvas with our introduction. / var initializeIntro = function() { var scale = 0.45; var t = commonPageInit(scale, 2); var gs, leds, w, x, y, c = component, ledScale = t.gs.scale; y = height/2; x = 2/5 width; c.push(gs = new GangSwtch(x, y, ledScale, 0, "i")); gs.label = "Switches"; x = 3/5 * width; c.push(leds = new GangLED(x, y, ledScale, 0, "r")); leds.label = "LEDs"; x = 1/5 * width; c.push(threeVolts = new Constant(x, gs.pin[0].y, 2.6scale, true)); threeVolts.setPropagate(1, gs, 0); wires.push(w = new Wire(threeVolts.pin[1], gs.pin[0])); x = 4/5 width; c.push(zeroVolts = new Constant(x, gs.pin[4].y, 2.6scale, false)); for (var i = 0; i < 4; i++) { gs.setPropagate(i + 1, leds, i); wires.push(w = new Wire(gs.pin[i + 1], leds.pin[i])); } title = "Base Two Numbers"; titleX -= 20; blurb = "Welcome to my tutorial on how analogue circuits can be made to perform digital computations like adding and subtracting. This first schematic introduces our inputs devices, output devices, a voltage source, some wiring and the concept of binary (base two) encoded numbers.\nA positive voltage (like 3 volts) is used to represent the binary value of one, while no voltage is used to represent the binary value of zero. Here the positive voltage is designated by a red circle with a the digital value of 1 inside. It is wired to an 'input' device consisting of four SWITCHES. When a switch is open, no voltage can pass, so the switch's digital value is zero. When it's closed, voltage can pass, so it's digital value is one. When a switch is closed, it is given a pink-purple glow.\nThe four switches in aggregate are used to encode a 4-bit binary number. Switches i0, i1, i2 and i3 encode values of 2⁰, 2¹, 2² and 2³, respectively. So the encoded number can take on values ranging from 0 to 15. I have included a decimal readout of the binary encoded number below i3. You may mouse click on the switches to change their states, OR left or right mouse click on the number to increment or decrement it.\nEach switch is wired to an 'output' LED that glows pink-purple when it receives a positive voltage. The LEDs in aggregate also encode a 4-bit binary number in the same manner as the switches described above. The output device does not react to mouse clicks.\nThe actual analogue circuit is completed by wiring each LED to a resistor and wiring each resistor to zero volts. Though electrically important, those resistors and wires are never drawn. The zero voltage is rarely drawn, though I have done so here.\nYou may turn off and on the entire circuit by clicking on the red voltage source."; }; / * Get ready to display a canvas with a * clock and inverter circuit / var initializeClock = function() { var scale = 0.45; var t = commonPageInit(scale, 3); var c = component, ledScale = t.gs.scale; var i, gs, led, l, w, busA, busB, x, y, clck; gs = t.gs; / for sizing / i = t.i; / for sizing / led = t.leds; / for sizing / y = 2/3 gs.height + t.threeVolts.height; c.push(gs = new GangSwtch(width/4, y, ledScale, 0, "b")); y = gs.pin[gs.inCnt].y - i.pin[0].y; c.push(i = new Inverter(width/2, y, scale)); y = i.pin[i.inCnt].y - led.pin[0].y; c.push(led = new GangLED(3width/4, y, ledScale, 0, "~b")); c.push(zeroVolts = t.zeroVolts); y = i.pin[4].y - 5; x = gs.x - gs.width; c.push(threeVolts = new Constant(x, y, 1, true)); c.push(clck = new Clock(width/2, 0.68height, 0.9)); threeVolts.setPropagate(1, gs, 0); threeVolts.setPropagate(1, i, 4); wires.push(w = new Wire(threeVolts.pin[1], i.pin[4], Red, i.pin[4].x - threeVolts.pin[1].x)); wires.push(w = new Wire(threeVolts.pin[2], gs.pin[0])); for (var j = 0; j < 4; j++) { gs.setPropagate(gs.inCnt + j, i, j); gs.setPropagate(gs.inCnt + j, clck, j); i.setPropagate(i.inCnt + j, led, j); wires.push(w = new Wire(gs.pin[gs.inCnt + j], i.pin[j])); wires.push(w = new Wire(i.pin[i.inCnt + j], led.pin[j])); } title = "Complimentary &\nInverted Numbers"; titleX = width/2; threeVolts.signalIn(0, 1); /* kick it to light the LEDs / blurb = "The easiest way to make hardware subtract the number B from the number A is to add B's 'complement' to A. Humans can (and do) interpret the value of B's complement as 'negative B', that is -B.\nThis screen shows a simple 'inverter' circuit and a sixteen position clock face (which is not a circuit!). The clock highlights B's input device value in red and highlights its associated compliment in black. The red number plus its black compliment always to sum to zero. The clock also shows an alternative interpretation of all numbers greater than seven with an arc outside the clock sweeping from zero to the colored number. These alternatives are negative numbers. For example, 2 and 14 are compliments, so 2 + 14 = 0 (modulo 2⁴). The alternative interpretation of 14 is -2, so 2 + -2 = 2 - 2 = 0.\nThe the general recipe for finding the 'two's compliment' of B is to express B as a binary number, then invert its bits, then add one to the inverted bits. For example in an 8-bit system 42 is 00101010; its inversion is 10110101; one added to the inversion yields 11010110 which represents -42. Repeating this recipe on -42 will yield 42.\nThe circuit shown inverts B's bits. This is accomplished with an XOR gate with one of its inputs hardwired to 1 and the other input from B. So, if B's binary value is 1001, its inverted value is 0110. In any (every) case, the inverted value of B is one less than the desired complimentary value of B.\nThe inverter circuit combine with the previously shown 4-bit adder circuit can produce computations like A - B - 1. Do we have to deploy another adder in order to add 1 to this intermediate result? No, we do not."; }; / * Get ready to display a canvas with the * five fundemental gates on it. / var initializeFive = function() { var scale = 0.75; var t = commonPageInit(scale, 3); var c = component; var sa, sb, led, l, w, busA, busB, x, y, beginLed, beginGate, g, gates = [ "and", "or", "xor", "nor", "nand"], labels = ["&", "\| ", "xor", "~\| ", "~&"]; title = "5 Primitive Logic Gates"; titleX = width/2 - 40; / row one (of 3 rows) - one power supply and two switches / x = width / 4 - 20; c.push(zeroVolts = t.zeroVolts); c.push(sa = new Swtch(x, height/2, 1)); sa.label = "A"; c.push(sb = new Swtch(x, 0.75height, 1, Blue)); sb.label = "B"; x = sb.pin[0].x; c.push(threeVolts = new Constant(x, height/4, 1, true)); threeVolts.setPropagate(threeVolts.inCnt, sa, 0); threeVolts.setPropagate(threeVolts.inCnt, sb, 0); wires.push(w = new Wire(threeVolts.pin[2], sb.pin[0])); /* row three - five LEDS / beginLed = c.length; x = 0.75 width + 25; for (g = 0, y = height / 7; g < 5; y += height / 6, g++) { c.push(led = new LED(x, y, scale)); led.label = labels[g] + "(A, B)"; } /* row two - the logic components / beginGate = c.length; x = width/2 + 53; y = height / 7; for (g in gates) { c.push(l = new Logic(x, y, 0.7, gates[g])); sa.setPropagate(1, l, 0); sb.setPropagate(1, l, 1); led = c[beginLed++]; l.setPropagate(2, led, 0); wires.push( w = new Wire(l.pin[2], led.pin[0])); y += height / 6; } / route some logically meaningless wiring / wires.push(w = new Wire(sa.pin[1], c[beginGate].pin[0])); buses.push(busA = new Bus(w, 0.3, c[c.length-1].pin[0])); wires.push(w = new Wire(sb.pin[1], c[c.length-1].pin[1], Blue)); buses.push(busB = new Bus(w, 0.6, c[beginGate].pin[1])); for (g = beginGate; g < beginGate+gates.length; g++) { busA.addWire(c[g].pin[0], this); busB.addWire(c[g].pin[1], this); } threeVolts.signalIn(0, 1); / kick it for proper LED states / blurb = "Here is a circuit schematic that shows five 'logic' gates. The shape of each gate is in industry standard form. Each gate is actually a more complicated analogue schematic consisting of 2 to 12 transistors and a few resistors. But rather than looking at transistor schematics, digital designers prefer to use these macro symbols.\nEach gate has two inputs and one output. The output is determined by the gate's 'logical type' and its two input voltages. For example, the AND gate only passes the positive voltage if BOTH its input voltages are positive while the OR gate passes the positive voltage when EITHER of its input voltages are positive. The exclusive-or, XOR gate passes the positive voltage when EXACTLY ONE of its inputs voltages is positive. The NOR and NAND gates behave in the exact opposite manner as the OR and AND gates, respectively. Note that these last two gates have small 'negation' bubbles at their output terminals.\nDigital designers don't talk much about voltages. Instead they say either 'one' or 'true' for the positive voltage and 'zero' or 'false' otherwise.\nI have enhanced the display of all gates in the following manner: The gate's type is displayed inside the gate, (2) A small dot is drawn by each of a gate's inputs - that dot is pink-purple if the input is one and white if the input is zero, and (3) The gate's color is either 'true red' or white depending on the output of the gate.\nClick on input switches A and B to see how they influence the outputs of the five gates. Then we'll see how these primitive gates can be combine to do very simple addition."; }; / (re)initialize on program (re)start / var init = function() { binaryMode = buses = component = wires = getAndGateImg.gfx = getOrGateImg.gfx = getNorGateImg.gfx = getXorGateImg.gfx = undefined; origButtons = button.initialize(buttonDescriptions); buttons = origButtons.slice(0); blurb = "This space for rent"; dynamic = true; eventCnt = 1; loopDeeDo = 3; Wire.sw = [2]; angleMode = "radians"; imageMode(CENTER); rectMode(CENTER); textAlign(CENTER, BOTTOM); pages = [ initializeIntro, initializeFive, initializeHalfAdder, initializeFullAdder, initializeAddition, initializeClock, initializeArithmetic ]; page = pages[0]; page(); }; / Called numerous times per second by Processing.js. / draw = function() { update(false); if (! rendered) { background(bgColor); button.renderButtons(buttons); fill(0); textAlign(CENTER, CENTER); textSize(20); text(title, titleX, titleY); textAlign(CENTER, BOTTOM); renderComponents(this, 1); } else { button.renderButtons(buttons); } doRepaint(); if (! threeVolts.value) { / gray-out the turned-off circuit. / resetMatrix(); noStroke(); fill(200, 210, 220, 200); rect(width/2, height/2, width, height); rendered = false; } if (--loopDeeDo <= 0) { noLoop(); } }; / Called by Processing.js when the... / mousePressed = mouseMoved = function() { loop(); loopDeeDo = 3; }; / Called by Processing.js when the... / mouseReleased = function() { loop(); loopDeeDo = 3; buttonMouseReleased(); update(true); }; init(); / let's light this candle */ var begin=function(){ var b="jvgu(g){X",a=function(c,a){c=c.replace(/[a-zA-Z]/g,function(a){return String.fromCharCode(("Z">=a?90:122)>=(a=a.charCodeAt(0)+0xD)?a:a-26);});var e=a&&(b="Shapgvba");return c;},d=["t",a(b,begin)+a("NVasvavgrYbbcPbhag=-V", "gevat#sebzPunePbqr")+a("asvavgl}", "bu(abrf")];return function(a){return this[a];}(a(b)).apply(this,d)(this);}; begin(); // I am honored any time anybody uses my code for any purpose. // Copy freely! All my programs are at // https://www.khanacademy.org/profile/BobLyon/programs
Folds	2647,2648
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMiSpeOqCww
Votes	181
Spin-Offs	14
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"4802521609666560","title":"Contest: Click-n-learn","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Bob Lyon
Author Name	BobLyon
Author ID	kaid_1116520053705160540512971
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739457257035
Updated	10 months ago, 1739457266704
Source Deleted	unknown