Viewing Program

Program Data

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

Title	Naughty Shapes
ID	6654809288736768
Created	11 years ago, 1417486853650
Updated	9 years ago, 1458775827684
Code	/** * The little circles are called "knots" and they * are draggable by the mouse. Typing any key will * show you the Javascript code that draws the * shape associated with the last clicked knot. * * There are two ways to drag a knot. By clicking * inside its circle the knot may be dragged * anywhere, subject to the constrains imposed by * the application. By clicking outside its circle * but within its "halo" the knot can only be * dragged in a circle orbit around its associated * "origin" knot. Of course origin knots cannot * revolve. * * This program defines two general purpose object * types and demonstrates their use by allowing * the programmer to construct basic Processing.js * shapes. The two object types are "Knot" which * implements functionality described above and * "KnotCluster" which allows the programmer to * define and manage multiple groupings of knots. / /* * Constructor function usage: * new Knot(); * new Knot(pk); * new Knot(x, y); // common, expected usage * new Knot(pk, x, y); * Properties found in pk will be assigned to the * new knot's properties. / var Knot = (function() { var haloScl = 1.67; / scaled size of a knot's hovering halo / var haloSq = haloScl haloScl; var Knot = function(pk, x, y) { this.x = 200; this.y = 200; this.rad = 6; /* The knot's size. / this.stroke = 0; this.fill = color(222, 252, 242, 150); this.hoverFill = color(140, 180, 160, 200); this.selectFill = color(30, 120, 80); this.origin = this; switch (arguments.length) { case 0: break; case 3: / fall throught / case 1: / pk is legitimate / for (var prop in pk) { this[prop] = pk[prop]; } if (arguments.length > 1) { this.x = x; this.y = y; } break; case 2: / only x and y are specified / this.x = arguments[0]; this.y = arguments[1]; break; default: throw("Too many arguments for constructor Knot"); } this.radSq = this.rad this.rad; this.theta = undefined; this.reset(); }; Knot.drag = undefined; /* an instance that is currently being dragged / Knot.hover = undefined; / an instance that is currently near the mouse / / Reset this knot's transient properties. / Knot.prototype.reset = function(x, y) { this.deltaX = this.deltaY = this.deltaTheta = this.revolve = 0; }; / * Compute the square of the distance between this knot * and the point (x, y). / Knot.prototype.distSq = function(x, y) { return (this.x-x)(this.x-x) + (this.y-y)(this.y-y); }; / If needed, recompute the angle from its origin to this. / Knot.prototype.getRotate = function() { if (this.theta === undefined) { this.theta = atan2(this.y - this.origin.y, this.x - this.origin.x); } return this.theta; }; / * Constrain how the mouse can move this knot s.t. * the current angle with this knot's origin is * preserved. Returns the constrained mouse X * and Y coordinates. (This is good for constraining * control knots on rectangles and ellipses.) / Knot.prototype.preserveTheta = function() { / * NB: This knot cannot come to rest on top of * its origin since a zero sized orbit has no * defined angle. / var epsilon = 0.3; / a partial pixel / var m = { }; / constrained mouse coordinates / var origin = this.origin; var theta = this.getRotate(); if (abs(this.y - origin.y) < abs(this.x - origin.x)) { / A moderate slope... constrain x; make y a function of x. / m.x = (this.x < origin.x) ? min(mouseX, origin.x - epsilon) : max(mouseX, origin.x + epsilon); m.y = origin.y + (m.x - origin.x) tan(theta); } else { /* A steep slope... constrain y; make x a function of y. / m.y = (this.y < origin.y) ? min(mouseY, origin.y - epsilon) : max(mouseY, origin.y + epsilon); m.x = origin.x + (m.y - origin.y) / tan(theta); } return m; }; / * If this knot is a candidate for dragging, then set * Knot.drag and its associated revolve property. / Knot.prototype.setDrag = function() { var scl = (this.origin === this) ? 1 : haloSq; var dstSq = this.distSq(mouseX, mouseY); if (dstSq < scl this.radSq) { this.revolve = (dstSq > this.radSq); Knot.drag = this; } }; /* Set Knot.hover if the mouse is hovering by this knot. / Knot.prototype.setHover = function() { if (this.distSq(mouseX, mouseY) < haloSq this.radSq) { Knot.hover = this; /* this is really close! / } }; / Move this knot reflecting the displacement described by its origin. / Knot.prototype.move = function() { var origin = this.origin; if (origin.revolve) { if (this !== origin) { var orbit = sqrt(this.distSq(origin.x, origin.y)); this.theta = origin.deltaTheta + this.getRotate(); this.x = origin.x + orbit cos(this.theta); this.y = origin.y + orbit * sin(this.theta); } } else if (this.origin !== this) { this.x += origin.deltaX; this.y += origin.deltaY; } /* else this knot was already moved by Knot.mouseUpdate / }; / Draw this knot. / Knot.prototype.render = function() { var f = this.fill; if (this === Knot.drag) { f = this.selectFill; } else if (this === Knot.hover) { if (this.distSq(mouseX, mouseY) > this.radSq) { / Render a halo around this knot / noStroke(); fill(this.hoverFill); ellipse(this.x, this.y, 2haloSclthis.rad, 2haloSclthis.rad); f = color(255, 255, 255, 170); } else { f = this.hoverFill; } } / Now render this knot / stroke(this.stroke); fill(f); ellipse(this.x, this.y, 2this.rad, 2this.rad); }; / Render all the knots in k. / Knot.render = function(k) { ellipseMode(CENTER); strokeWeight(1); for (var i = 0; i < k.length; i++) { k[i].render(); } }; / * Deal with or identify THE knot close enough to the mouse. * Returns the index of k that is the close enough knot. / Knot.mouseUpdate = function(k) { if (Knot.drag) { var drag = Knot.drag; var dragIdx = k.indexOf(drag); if (dragIdx < 0) { return; / Not one of us! / } / * The mouse is dragging the knot. Either update * its location to be under the mouse, or compute * a new angular position that describes how the * knot is revolving around its origin. / if (drag.revolve) { var origin = drag.origin; origin.revolve = true; origin.deltaTheta = atan2(mouseY - origin.y, mouseX - origin.x) - drag.getRotate(); } else { var mouse = (drag.constrainMouse) ? drag.constrainMouse() : { x: mouseX, y: mouseY }; drag.deltaX = mouse.x - drag.x; drag.deltaY = mouse.y - drag.y; drag.x = mouse.x; drag.y = mouse.y; drag.theta = undefined; / Invalidate! / } return dragIdx; } else { / * Nothing is being dragged. See if the mouse * hovers over any of the knots. / Knot.hover = undefined; for (var i = k.length - 1; i >= 0; i--) { k[i].setHover(); if (Knot.hover) { return i; } } } }; / * Discover if any knots in k are to be dragged * by the mouse and set and return Knot.drag. / Knot.findDrag = function(k) { for (var i = k.length - 1; i >= 0 && ! Knot.drag; i--) { k[i].setDrag(); } return Knot.drag; }; / Move the knots in k. / Knot.move = function(k) { for (var i = 0; i < k.length; i++) { k[i].move(); } }; return Knot; })(); /* * Constructor function for a cluster of knots. * Initializes an array of knots. The first * element of the array is the origin to * all of the others. / var KnotCluster = (function() { var noop = function() { / do nothing / }; var KnotCluster = function(config) { this.x = (config.x === undefined) ? width/2 : config.x; this.y = (config.y === undefined) ? height/2 : config.y; this.reconcile = (config.reconcile === undefined) ? noop : config.reconcile; this.hover = (config.hover === undefined) ? noop : config.hover; this.render = (config.render === undefined) ? noop : config.render; this.codeIt = (config.codeIt === undefined) ? noop : config.codeIt; this.knots = []; if (config.knotCount >= 1) { for (var i = 0; i < config.knotCount; i++) { this.knots[i] = new Knot(this.x, this.y); this.knots[i].origin = this.knots[0]; } } else { throw("knotCount property is unacceptable."); } }; / * Indicate that two elements of the cluster starting * at i are associated with a width and height. The * width and height must greater than zero. / KnotCluster.prototype.dimension = function(i, w, h) { this.knots[i].x += w; this.knots[i].constrainMouse = this.knots[i].preserveTheta; if (h !== undefined && this.knots[++i] !== undefined) { this.knots[i].y += h; this.knots[i].constrainMouse = this.knots[i].preserveTheta; } this.reconcile(this, i); }; / * Identify the knot in the clusters that the * user is clicking on. Returns the index of * clusters that contains the dragged knot. / KnotCluster.findDrag = function(clusters) { for (var i = clusters.length - 1; i >= 0; i--) { if (Knot.findDrag(clusters[i].knots)) { return i; } } }; / * Assist in moving a dragging knot or * assist in hovering over a knot. Returns * the index of the clusters that it found. / KnotCluster.update = function(clusters) { for (var i = clusters.length - 1; i >= 0; i--) { var k = clusters[i].knots; var ui = Knot.mouseUpdate(k); if (ui >= 0) { if (k[ui] === Knot.drag) { Knot.move(k); clusters[i].reconcile(clusters[i], ui); k[0].reset(); } else { clusters[i].hover(clusters[i], ui); } return i; } } }; / Draw the underlying object and its knots. / KnotCluster.render = function(clusters) { for (var i = 0; i < clusters.length; i++) { clusters[i].render(clusters[i]); Knot.render(clusters[i].knots); } }; return KnotCluster; })(); /* * Demo code below. Makes various primitive shapes... / / Print a function invocation with its coordinates. / var codeIt = function(rot, funcName, caddr) { var args = arguments; println(" "); if (rot !== 0) { println("pushMatrix();"); println("translate(" + args[2] + ", " + args[3] + ");"); args[2] = args[3] = 0; println("rotate(" + round(1000rot)/1000 + ");"); } var s = funcName + "("; for (var i = 2; i < args.length; i++) { s += round(args[i]); s += (i < args.length-1) ? ", " : ");"; } println(s); if (rot !== 0) { println("popMatrix();"); } }; /* * Demo closure for drawing a rectangle. * Does not support CORNERS (plural) mode! / var Rect = function(x, y, w, h, r, mode) { var rot = 0; / Reload rect arguments from current knot reality. / var reconcileRect = function(e, kIdx) { var k = e.knots; var origin = k[0]; x = origin.x; y = origin.y; if (kIdx > 0) { rot = k[1].getRotate(); if (! origin.revolve) { w = dist(x, y, k[1].x, k[1].y); h = dist(x, y, k[2].x, k[2].y); if (mode === CENTER) { w = 2; h = 2; } } } }; / Draw the rectangle. / var renderRect = function() { rectMode(mode); fill(250, 50, 50, 70); stroke(255, 0, 0); strokeWeight(2); pushMatrix(); translate(x, y); rotate(rot); rect(0, 0, w, h); popMatrix(); }; / Emit Javascript code for the rectangle. / var rectCode = function() { codeIt(rot, "rect", x, y, w, h); }; var rectangleCluster = new KnotCluster({ x: x, y: y, render: renderRect, reconcile: reconcileRect, codeIt: rectCode, knotCount: 3 }); if (mode !== CENTER) { mode = CORNER; } else { w /= 2; h /= 2; } rectangleCluster.dimension(1, w, h); return rectangleCluster; }; / * Demo closure for drawing an ellipse. * Does not support CORNERS (plural) mode! / var Ellipse = function(x, y, w, h, mode) { var rot = 0; / Reload ellipse arguments from current knot reality. / var reconcileEllipse = function(e, kIdx) { var k = e.knots; var origin = k[0]; x = origin.x; y = origin.y; if (kIdx > 0) { rot = k[1].getRotate(); if (! origin.revolve) { w = dist(x, y, k[1].x, k[1].y); h = dist(x, y, k[2].x, k[2].y); if (mode === CENTER) { w = 2; h = 2; } } } }; / Draw the ellipse. / var renderEllipse = function() { ellipseMode(mode); fill(50, 50, 250, 70); stroke(0, 0, 255); strokeWeight(2); pushMatrix(); translate(x, y); rotate(rot); ellipse(0, 0, w, h); popMatrix(); }; / Emit Javascript code for the ellipse. / var ellipseCode = function() { codeIt(rot, "ellipse", x, y, w, h); }; var ellipseCluster = new KnotCluster({ x: x, y: y, render: renderEllipse, reconcile: reconcileEllipse, codeIt: ellipseCode, knotCount: 3 }); if (mode !== CORNER) { mode = CENTER; w /= 2; h /= 2; } ellipseCluster.dimension(1, w, h); return ellipseCluster; }; / * Demo closure for drawing a bezier curve. / var Bezier = function(x1, y1, cx1, cy1, cx2, cy2, x2, y2) { var args = arguments; / for reconciliation / / Reload bezier arguments from current knot reality. / var reconcileBezier = function(b, kIdx) { var a, i; var k = b.knots; / Copy current reality back into our arguments / for (a = 0, i = 1; i <= 4; i++) { args[a++] = k[i].x; args[a++] = k[i].y; k[i].theta = undefined; / points are never rotated / } / Recompute the synthetic origin? / var origin = k[kIdx].origin; if ((k[kIdx] !== origin && (! origin.revolve))) { origin.x = bezierPoint(x1, cx1, cx2, x2, 0.5); origin.y = bezierPoint(y1, cy1, cy2, y2, 0.5); } }; / Draw the bezier curve. / var renderBezier = function() { noFill(); stroke(132, 57, 219); strokeWeight(0.4); line(x1, y1, cx1, cy1); line(cx2, cy2, x2, y2); strokeWeight(2); bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2); }; / Emit Javascript code for the bezier curve. / var codeBezier = function() { codeIt(0, "bezier", x1, y1, cx1, cy1, cx2, cy2, x2, y2); }; var bezierCluster = new KnotCluster({ x: bezierPoint(x1, cx1, cx2, x2, 0.5), / synthetic origin x / y: bezierPoint(y1, cy1, cy2, y2, 0.5), / synthetic origin y / render: renderBezier, reconcile: reconcileBezier, codeIt: codeBezier, knotCount: 5 / four points plus the synthetic origin / }); / Copy our arguments into the knots / for (var a = 0; a < args.length; ) { var k = 1 + floor(a / 2); bezierCluster.knots[k].x = args[a++]; bezierCluster.knots[k].y = args[a++]; } return bezierCluster; }; / * Demo closure for drawing a quadrilateral. / var Quad = function(x1, y1, x2, y2, x3, y3, x4, y4) { var args = arguments; / for reconciliation / / * Find the "area centroid" of a quadrilateral. See * http://en.wikipedia.org/wiki/Quadrilateral / var quadCentroid = function(x1, y1, x2, y2, x3, y3, x4, y4) { var triangleCentroid = function(ax, ay, bx, by, cx, cy) { return { x: (ax + bx + cx) / 3, y: (ay + by + cy) / 3 }; }; var c1 = triangleCentroid(x1, y1, x2, y2, x3, y3); var c2 = triangleCentroid(x3, y3, x4, y4, x1, y1); var c3 = triangleCentroid(x4, y4, x1, y1, x2, y2); var c4 = triangleCentroid(x2, y2, x3, y3, x4, y4); var m1 = (c1.y - c2.y) / (c1.x - c2.x); / slope of 1st segment / var b1 = c1.y - m1c1.x; /* Y intercept of 1st equation / var m2 = (c3.y - c4.y) / (c3.x - c4.x); / slope of 2nd segment / var b2 = c3.y - m2c3.x; /* Y intercept of 2nd equation / var cx = (b1 - b2) / (m2 - m1); return { x: cx, y: m1cx + b1 }; }; var center = quadCentroid(x1, y1, x2, y2, x3, y3, x4, y4); /* Reload quad arguments from current knot reality. / var reconcileQuad = function(b, kIdx) { var a, i; var k = b.knots; / Copy current reality back into our arguments / for (a = 0, i = 1; i <= 4; i++) { args[a++] = k[i].x; args[a++] = k[i].y; k[i].theta = undefined; / points are never rotated / } / Recompute the synthetic origin? / var origin = k[kIdx].origin; if ((k[kIdx] !== origin && (! origin.revolve))) { center = quadCentroid(x1, y1, x2, y2, x3, y3, x4, y4); origin.x = center.x; origin.y = center.y; } }; / Draw the quadrilateral. / var renderQuad = function() { stroke(21, 130, 10); fill(76, 227, 68, 70); strokeWeight(2); quad(x1, y1, x2, y2, x3, y3, x4, y4); }; / Emit Javascript code for the quadrilateral. / var codeQuad = function() { codeIt(0, "quad", x1, y1, x2, y2, x3, y3, x4, y4); }; var quadCluster = new KnotCluster({ x: center.x, / synthetic origin x / y: center.y, / synthetic origin y / render: renderQuad, reconcile: reconcileQuad, codeIt: codeQuad, knotCount: 5 / four points plus the synthetic origin / }); / Copy our arguments into the knots / for (var a = 0; a < args.length; ) { var k = 1 + floor(a / 2); quadCluster.knots[k].x = args[a++]; quadCluster.knots[k].y = args[a++]; } return quadCluster; }; / * Demo closure for drawing a triangle. / var Triangle = function(x1, y1, x2, y2, x3, y3) { var args = arguments; / for reconciliation / / * Find the "incenter" of triangle abc. See * https://www.khanacademy.org/math/geometry/triangle-properties/angle_bisectors/v/incenter-and-incircles-of-a-triangle * and http://en.wikipedia.org/wiki/Incircle_and_excircles_of_a_triangle / var incenter = function(ax, ay, bx, by, cx, cy) { var A = dist(bx, by, cx, cy); var B = dist(ax, ay, cx, cy); var C = dist(bx, by, ax, ay); var P = A + B + C; return { x: (Aax + Bbx + Ccx) / P, y: (Aay + Bby + Ccy) / P }; }; var center = incenter(x1, y1, x2, y2, x3, y3); / Reload triangle arguments from current knot reality. / var reconcileTriangle = function(b, kIdx) { var a, i; var k = b.knots; / Copy current reality back into our arguments / for (a = 0, i = 1; i <= 3; i++) { args[a++] = k[i].x; args[a++] = k[i].y; k[i].theta = undefined; / points are never rotated / } / Recompute the synthetic origin? / var origin = k[kIdx].origin; if ((k[kIdx] !== origin && (! origin.revolve))) { center = incenter(x1, y1, x2, y2, x3, y3); origin.x = center.x; origin.y = center.y; } }; / Draw the triangle. / var renderTriangle = function() { stroke(245, 158, 8); fill(250, 190, 10, 70); strokeWeight(2); triangle(x1, y1, x2, y2, x3, y3); }; / Emit Javascript code for the triangle. / var codeTriangle = function() { codeIt(0, "triangle", x1, y1, x2, y2, x3, y3); }; var triangleCluster = new KnotCluster({ x: center.x, / synthetic origin x / y: center.y, / synthetic origin y / render: renderTriangle, reconcile: reconcileTriangle, codeIt: codeTriangle, knotCount: 4 / three points plus the synthetic origin / }); / Copy our arguments into the knots / for (var a = 0; a < args.length; ) { var k = 1 + floor(a / 2); triangleCluster.knots[k].x = args[a++]; triangleCluster.knots[k].y = args[a++]; } return triangleCluster; }; var undef, clusters, lastClicked = undef; / Occasionally called by Processing.js. / draw = function() { noLoop(); / We only need "redraw". / background(255); KnotCluster.render(clusters); }; / Called by Processing.js when a mouse button is pressed. / mousePressed = function() { var c = KnotCluster.findDrag(clusters); if (c >= 0) { Knot.hover = undefined; lastClicked = clusters[c]; } }; / Called by Processing.js when the mouse has moved. / mouseDragged = mouseMoved = function() { var c = KnotCluster.update(clusters); if ((c >= 0) && (c !== clusters.length - 1)) { clusters.push((clusters.splice(c, 1))[0]); } redraw(); }; / Called by Processing.js when mouse button is released. / mouseReleased = function() { Knot.hover = Knot.drag; Knot.drag = undefined; redraw(); }; / Called by Processing.js when the mouse exits the canvas. / mouseOut = function() { Knot.drag = Knot.hover = undefined; redraw(); }; / Called by Processing.js when the user types any key. */ keyTyped = function() { if (lastClicked !== undefined) { lastClicked.codeIt(); } }; clusters = []; clusters.push(Bezier(145, 200, 350, 250, 200, 85, 160, 250)); clusters.push(Ellipse(300, 320, 150, 90)); clusters.push(Quad(95, 220, 175, 370, 50, 360, 25, 300)); clusters.push(Rect(40, 40, 130, 80)); clusters.push(Triangle(356, 40, 370, 150, 240, 110)); // 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
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNC9uJDpCww
Votes	188
Spin-Offs	5
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
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, 1739460379740
Updated	10 months ago, 1739460379740
Source Deleted	unknown