Viewing Program

Program Data

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

Title	Meta Object Editor
ID	1727802136
Created	12 years ago, 1371064217722
Updated	10 years ago, 1450843709178
Code	/* A Better Meta Object Editor To begin, click the mouse cursor in the canvas and choose a NEW object, e.g. "new Ellipse". A new object (e.g. an ellipse) will appear on the canvas. Then move the mouse inside that object. Every object has CONTROL BUBBLES which are used for positioning. You will see those bubbles whenever the cursor is inside of the object. Clicking on the object's middle bubble allows the object to MOVE with the mouse. The other bubbles affect the object's geometry AND its rotation relative to its center. To MOVE a control bubble, click the mouse in the exact center of the bubble. To ROTATE a control bubble, click the bubble on its edge (not in its center). Every object also has a MENU which is brought up by clicking the mouse inside of the object (but not in its control bubbles). The menu items allow for all other useful manipulations of the object. An object's first menu items, FILL and STROKE (and TEXT) affect the object's interior (e.g. green) and perimeter (e.g. blue) colors, respectively. Choosing one of these menu items will cause a COLOR SUB-PANEL to appear. Moving the mouse into the sub-panel will cause its bubbles to appear. Clicking on the sub-panel QUIT bubble will leave the object unaffected, whereas clicking on DONE commits the changes to the object. In the case of STROKE (and TEXT) there are minus (-) and plus (+) bubbles which affect the object's STROKEWEIGHT (and TEXTSIZE). The color sub-panel also shows four SLIDERS that correspond to the components which determine the object's colors. Those components are RED, GREEN, BLUE and ALPHA in left to right order. The component values range from ZERO on the bottom of the slider to 255 on the top of the slider. (Completely opaque objects have an alpha value of 255 while completely transparent objects have an alpha value of zero.) The next four menu items, UP, TOP, BOTTOM and DOWN affect how the objects stacks relative to all other objects. Their meanings are obvious. Hot keys up-arrow and down-arrow correspond to UP and DOWN, respectively. Note that UP and DOWN may appear to be no-ops when the repositioned object is not obscured by (or is not obscuring) the object it is promoted above or demoted below... The menu item CLONE ME will cause an exact copy of the object to appear, while the last menu item DELETE ME will destroy all traces of that object. Hot keys Delete and Backspace(on some browsers) will also destroy the object. Finally, menu item CODE ME opens the Processingjs environment's console and produces Javascript code which is suitable for reproducing that object in a new program at Khan Academy. (Use copy and paste to duplicate the code in the new program.) Be aware that concatenating code from two objects may disappoint. (The global menu item CODE ALL properly handles multiple objects.) The background itself is a special object and it has its own special menu items which are brought up by clicking the mouse in the background. The first menu item, BACKGROUND invokes a color sub-panel which allows for the manipulation of the background's color and transparency. The color sub-panel has been described above. The next six menu items creates new objects. They are: BEZIER curves, ELLIPSES, LINES, RECTANGLES, TEXT boxes, and TRIANGLES. (You can also programmatically load IMAGES into this program. An example of loading an image is at the end of this file.) Note that a TEXT box is a rectangle with text inside it. Its default stroke and fill colors are transparent. Newly created (or cloned) text boxes cause a sophisticated text-editor panel to be launched where you can type in the desired text. Use the Delete or Backspace(on some browsers) or ctrl-LEFT arrow key to delete from the end of the text string. The eighth and ninth background menu items, CODE ALL and CODE FOR IMAGE open the Processingjs environment's console and produces Javascript code which is suitable for reproducing entire canvas in a new program at Khan Academy. The latter, CODE FOR IMAGE writes a Javascript function which creates and returns a square IMAGE containing the objects shown on the canvas. In addition, such an image is automatically loaded onto the canvas. (When creating an image, it may behoove you to make its background color transparent.) The final background menu item, CHECK-POINT also opens the Processingjs environment's console and produces Javascript code. This code is suitable for appending to the end of THIS FILE (or a spin-off) when you want to preserve (e.g. Save) your objects across object editing sessions. Support for images is minimal since their generation is outside the scope of this program. For example, without the Javascript eval() function, this program cannot Check-point a generated image and reload it. However, after check-pointing a canvas with a generated image, upon re-entry into this program, if one re-Codes-for-image and then clicks the Restart button, the generated checked-pointed image will reappear. This now remembers your edits across sessions. To defeat this, comment-out the Restore(); line at the end of this file. Enjoy. I can be reached at Robert.B.Lyon at google dot com. / var undef; var alfa = "α"; var quote = '"'; var squote = "'"; var tab = " "; var black = color(0, 0, 0); var white = color(255, 255, 255); var transparent = color(255, 255, 255, 0); var mouseGray = color(199, 190, 190); var selectGray = color(80, 90, 100); var bubbleSz = 10; / diameter for drawing / var bubbleInfluence = bubbleSz - 2; / radius for dist / var bubbleInfluenceSqrd = bubbleInfluencebubbleInfluence; var bubbleCenter = bubbleInfluence / 2 - 1; /* radius for dist / var mouseWasPressed = false; var menuObj = undef; / zero or one transient object / var colorObj = undef; / zero or one transient object / var newTextObj = undef; / zero or one special transient object / var pressedObj = undef; / the object we are focussed upon / var pressedI = undef; / control point index of focussed obj / var pressedRot = undef; / focussed control pnt is for rotation / var proto; / prototypical objects / var objects = undef; / array of THE managed objects / var generatedImage; / image generate by this program / var forceRadians = false; / for generating images / angleMode = "degrees"; / because beginners & KA like them / rectMode(CENTER); / required for our sanity / imageMode(CENTER); / required for our sanity / / Because at KA, Object is Read-only undefined... / var bObject = (function(what) { return this[what]; })("Object"); var F = (function(what) { return this[what]; })("Function"); var c = ","; var restored = false; / * Chase away a KA bug by "initiaziling" the PGraphics mechanism. * This must be called from repeated invocations of "draw" until * it returns true. / var initGraphics = function() { if (! initGraphics.initted) { var osb = createGraphics(8, 8, JAVA2D); initGraphics.initted = (osb && (typeof osb.beginDraw === "function")); } return initGraphics.initted; }; / * Extend was lifted from * www.adobe.com/devnet/html5/articles/javascript-object-creation.html / var bobExtend = function(obj, props) { for (var prop in props) { if (props.hasOwnProperty(prop)) { obj[prop] = props[prop]; } } }; / * Return the hexadecimal string representing w. * Lifted from stackoverflow.com / var hexString = function(w) { if (w < 0) { w = 0xFFFFFFFF + w + 1; } return ("0x" + w.toString(16).toUpperCase()); }; / round to the nearest 100th / var rnd100 = function(n) { return round(n 100) / 100; }; /* Object that contains the Processing.js functions. / var pjs = { stroke: stroke, noStroke: noStroke, strokeWeight: strokeWeight, fill: fill, noFill: noFill, background: background, color: color, rect: rect, ellipse: ellipse, triangle: triangle, line: line, point: point, bezier: bezier, image: image, text: text, textSize: textSize, textAlign: textAlign, translate: translate, scale: scale, rotate: rotate, pushMatrix: pushMatrix, popMatrix: popMatrix }; / * Rather than render objects, this renders code * that renders objects. This has a cache optimizer. / var Coder = { nom: "Coder", singleObject: false, rectMode: "", imageMode: "", prefix: "", radians: false, / How the Coder gets created / extend: function(props) { var obj = bObject.create(this); bobExtend(obj, props); return obj; }, / Initialize the Coder / reInit: function() { this.rectMode = "CENTER"; this.imageMode = "CENTER"; if (this.singleObject) { var tmp = this.prefix; var bg = objects[0].fill; this.prefix = "//" + this.prefix; this.background(bg); this.prefix = tmp; } }, func: function(name, args) { var l = this.prefix + name + "(" + args.join(", ") + ");"; println(l); }, comment: function(c) { / XXX / var tab = (this.tab) ? this.tab : ""; println(tab + "// " + c); }, background: function(bg) { this.func("background", [ hexString(bg) ] ); }, fill: function(f) { if (f !== this.lastFill) { this.func("fill", [ hexString(f) ] ); } this.lastNoFill = false; this.lastFill = f; }, noFill: function() { if (this.lastNoFill !== true) { this.func("noFill", [ ] ); } this.lastFill = undefined; this.lastNoFill = true; }, stroke: function(s) { if (s !== this.lastStroke) { this.func("stroke", [ hexString(s) ] ); } this.lastNoStroke = false; this.lastStroke = s; }, noStroke: function() { if (this.lastNoStroke !== true) { this.func("noStroke", [ ] ); } this.lastStroke = undefined; this.lastNoStroke = true; }, strokeWeight: function(w) { w = rnd100(w); if (w !== this.lastStrokeWeight) { this.func("strokeWeight", [ w ] ); } this.lastStrokeWeight = w; }, text: function(t, x, y, w, h) { var a = [quote + t + quote, rnd100(x), rnd100(y)]; if (w !== undefined) { a.push(rnd100(w)); } if (h !== undefined) { a.push(rnd100(h)); } this.func("text", a); }, textSize: function(sz) { if (sz !== this.lastTextSize) { this.func("textSize", [ rnd100(sz) ] ); } this.lastTextSize = sz; }, textAlign: function(h, v) { var symb = []; symb[TOP] = "TOP"; symb[CENTER] = "CENTER"; var a = [symb[h]]; if (v !== undefined) { a.push(symb[v]); } if (h !== this.lastTextAlignHorz \|\| v !== this.lastTextAlignVert) { this.func("textAlign", a); } this.lastTextAlignHorz = h; this.lastTextAlignVert = v; }, bezier: function(a, b, c, d, e, f, g, h) { this.func("bezier", [ rnd100(a), rnd100(b), rnd100(c), rnd100(d), rnd100(e), rnd100(f), rnd100(g), rnd100(h) ] ); }, ellipse: function(x, y, w, h) { this.func("ellipse", [ rnd100(x), rnd100(y), rnd100(w), rnd100(h) ] ); }, line: function(x1, y1, x2, y2) { this.func("line", [ rnd100(x1), rnd100(y1), rnd100(x2), rnd100(y2) ] ); }, rect: function(x, y, w, h) { if (this.rectMode.length > 0) { this.func("rectMode", [ this.rectMode ] ); this.rectMode = ""; } this.func("rect", [ rnd100(x), rnd100(y), rnd100(w), rnd100(h) ] ); }, triangle: function(a, b, c, d, e, f) { this.func("triangle", [ rnd100(a), rnd100(b), rnd100(c), rnd100(d), rnd100(e), rnd100(f) ] ); }, image: function(i, x, y, w, h) { if (this.imageMode.length > 0) { this.func("imageMode", [ this.imageMode ] ); this.imageMode = ""; } this.func("image", [ i, rnd100(x), rnd100(y), rnd100(w), rnd100(h) ] ); }, pushMatrix: function() { if (! this.singleObject) { this.func("pushMatrix", [ ] ); } }, popMatrix: function() { if (! this.singleObject) { this.func("popMatrix", [ ] ); } }, translate: function(x, y) { if ((x !== 0) \|\| (y !== 0)) { this.func("translate", [ rnd100(x), rnd100(y) ] ); } }, rotate: function(r) { if (r !== 0) { if (this.radians) { this.func("rotate", ["radians("+ rnd100(r) +")" ]); } else { this.func("rotate", [ rnd100(r) ] ); } } }, scale: function(x, y) { this.func("scale", [ rnd100(x), rnd100(y) ] ); } }; var codeSingleObject = function(obj) { var gfx = Coder.extend({ singleObject: true }); gfx.reInit(); obj.render(gfx); println(tab); }; var Image; var codeAll = function(makeAnImage) { var img, blankLine = true, sz = 140; var prefix = (makeAnImage) ? (tab + "gfx.") : ""; var gfx = Coder.extend( { prefix: prefix, radians: makeAnImage }); gfx.reInit(); var doit = function() { for (var i = 0; i < objects.length; i++) { objects[i].render(gfx); if (blankLine) { println(tab); } } }; if (makeAnImage) { println("// Generates a square image of sz×sz pixels."); println("var generateImage = function(sz) {"); println(tab + "sz = (sz === undefined) ? " + sz + " : sz;"); println(tab + "var gfx = createGraphics(sz, sz, JAVA2D);"); println(tab + "gfx.beginDraw();"); println(tab + "gfx.scale(sz / width, sz / width);"); println(tab); gfx.tab = tab; } doit(); if (makeAnImage) { println(tab + "gfx.endDraw();"); println(tab + "return gfx;"); println("};"); println(tab); generatedImage = gfx = createGraphics(sz, sz, JAVA2D); gfx.beginDraw(); gfx.scale(sz / width, sz / width); gfx.rectMode(CENTER); gfx.imageMode(CENTER); forceRadians = true; blankLine = false; doit(); forceRadians = false; gfx.endDraw(); img = Image.extend({ img: generatedImage, imageName: "generatedImage" }); objects.push(img); img.reInit(); } }; var json = (function() { return this.JSON; })(); var myKey = "MetaObjectEditor.save"; var copiedNotRefd = ["nom", "x", "y", "ax", "ay", "bx", "by", "cx", "cy", "dx", "dy", "width", "height", "rotate", "stroke", "strokeWeight", "fill", "imageName", "" ]; / * extend() employs JSON to COPY these fields instead of * referencing them. / var extendFilter = function(key, value) { if (key === "cntrlPoints") { / force a recomputation of this... / value = null; } else if (copiedNotRefd.indexOf(key) < 0) { return; } return value; }; var Save = function() { var jsonReplacer = function(key, value) { if (key === "cntrlPoints" \|\| key === "menu" \|\| key === "wayPoints" \|\| key === "img") { return; } else if (key === "reload") { value = true; }else if (typeof value === "number") { value = rnd100(value); } return value; }; var s = json.stringify(objects, jsonReplacer); var ls = (function(what){return this[what];})("localStorage"); ls.setItem(myKey, s); }; var Restore = function() { var obj, a, b = []; if (objects !== undefined && objects.length > 0) { return; } var ls = (function(what){return this[what];})("localStorage"); var s = ls.getItem(myKey); if (s) { try { a = json.parse(s); if ((typeof a) !== (typeof b)) { return; } objects = []; for (var i = 0; i < a.length; i++) { for (var j = 0; j < proto.length; j++) { if (a[i].nom === proto[j].nom) { objects.push(obj = proto[j].extend(a[i])); obj.reInit(); } } } } catch(err) {} } }; var CheckPoint = function() { println("// To reload the canvas, place the following lines at the end of the program:"); println("if (true) { // Get a scope to declare variables"); println(tab + "var obj;"); println(tab + "objects = [];"); for (var i = 0; i < objects.length; i++) { objects[i].checkPoint(); } println("}"); println(tab); }; var objectComment = function(gfx, obj) { if (gfx.comment === undefined) { return; } var who = obj.nom; if (who === "Bezier") { who = "Bezier curve"; } else if (who === "Text") { who = "Textbox"; } var n = objects.indexOf(obj); gfx.comment(who + "... Object #" + n); }; var renderCntrlBubble = function(p) { strokeWeight(1); stroke(black); noFill(); var d = dist(p.x, p.y, mouseX, mouseY); if (d < bubbleInfluence) { if (mouseIsPressed) { fill(selectGray); } else { fill(mouseGray); } } else if ((pressedObj !== undefined) && (p === pressedObj.cntrlPoints[pressedI])) { fill(selectGray); } ellipse(p.x, p.y, bubbleSz, bubbleSz); if (p.lx !== undefined) { strokeWeight(0.3); stroke(p.obj.stroke); line(p.x, p.y, p.lx, p.ly); } }; / This is where all the CPU time goes / var mouseIsOverCntrl = function(cp) { var dx, dy, mx = mouseX, my = mouseY; for (var i = 0; i < cp.length; i++) { dx = mx - cp[i].x; dy = my - cp[i].y; if (dxdx + dydy < bubbleInfluenceSqrd) { return (i); } } return -1; }; var preRender = function(gfx, obj, doMatrix) { if (doMatrix) { gfx.pushMatrix(); gfx.translate(obj.x, obj.y); gfx.rotate((forceRadians) ? radians(obj.rotate) : obj.rotate); } gfx.fill(obj.fill); if (obj.strokeWeight === 0) { gfx.noStroke(); } else { gfx.stroke(obj.stroke); gfx.strokeWeight(obj.strokeWeight); } }; var commonMenuSelect = function(obj, n) { var knew, bg, j = objects.indexOf(obj); switch (n - obj.menu.common) { case 0: / move the object up one level / if (j < objects.length-1) { objects[j] = objects[j+1]; objects[j+1] = obj; } break; case 1: / place this object on the top / objects.splice(j, 1); / remove obj from array / objects.push(obj); / and put it back / break; case 2: / place this object on the bottom / objects.splice(j, 1); / remove obj from array / bg = objects.shift(); / remove the background / objects.unshift(obj); / replace obj at bottom / objects.unshift(bg); / replace background / break; case 3: / move the object down one level / if (j > 1) { objects[j] = objects[j-1]; objects[j-1] = obj; } break; case 4: / clone this object / var x = (obj.x > 200) ? -50 : 50; var y = (obj.y > 200) ? -50 : 50; knew = obj.extend({ x: obj.x + x, y: obj.y + y }); objects.push(knew); knew.reInit(); break; case 5: / show the code for this object / codeSingleObject(obj); break; case 6: / delete this object / objects.splice(j, 1); / remove obj from array / break; } }; var Menu = { nom: "Menu", item: null, / array of items (tags) / x: 200, y: 200, width: 100, height: 16, textSize: 12, / How the menu gets created / extend: function(props) { var obj = bObject.create(this); bobExtend(obj, props); return obj; }, / Initialize the menu / reInit: function() { this.textSize = this.height - 4; }, mouseIsOver: function() { var i, dy = mouseY - this.y + this.height/2; if (dy < 0 \|\| mouseX < this.x - this.width/2 \|\| mouseX > this.x + this.width/2) { return -1; } i = floor(dy / this.height); return (i >= this.item.length) ? -1 : i; }, mouseInControl: function(i) { / the Menu object has no stink'n control points / }, menuSelect: function(i) { / the Menu object is not recursive / }, render: function(x, y) { var i, cy, w2 = this.width / 2, h2 = this.height / 2; var mx = mouseX, my = mouseY; if (this.item === null) { return; } textSize(this.textSize); textAlign(LEFT, TOP); if (y + (this.item.length this.height) >= 400) { y = 399 - (this.item.length * this.height); } this.y = y; if (x + this.width/2 >= 400) { x = 399 - this.width/2; } if (x - this.width/2 < 0) { x = this.width/2; } this.x = x; stroke(black); strokeWeight(1); mx = ((mx > x - w2) && (mx < x + w2)); for (cy = y, i = 0; i < this.item.length; i++, cy += this.height) { if (mouseIsPressed && mx && my > cy - h2 && my < cy + h2) { fill(mouseGray); } else { fill(white); } rect(x, cy, this.width, this.height); fill(black); text(" " + this.item[i], x-w2, cy-h2, this.width, this.height); } return this.y; } }; var getMenu = function(bg, tags) { var menu, common; if (bg) { for (var p = 1; p < proto.length; p++) { if (proto[p] !== undefined) { tags.push("n" + "ew " + proto[p].nom); } } common = tags.length; tags.splice(common, 0, "Code all", "Code for image", "Check-point"); } else { common = tags.length; tags.splice(common, 0, "Up", "Top", "Bottom", "Down", "Clone me", "Code me", "Delete me"); } menu = Menu.extend({ item: tags, common: common }); menu.reInit(); return menu; }; var Color = { nom: "Color", x: 200, y: 200, width: 100, height: 220, cntrlPoints: [], subTitle: null, menu: null, who: null, /* where the results are applied / scale: 128, / How the color get created / extend: function(props) { var obj = bObject.create(this); bobExtend(obj, props); return obj; }, getWeight: function() { return ((this.number === "textSize") ? this.who.textSize : this.who.strokeWeight); }, setWeight: function(w) { if (this.number === "textSize") { this.who.textSize = w; } else { this.who.strokeWeight = w; } }, loadWho: function() { var h = this; h.fill = h.who.fill; h.stroke = h.who.stroke; h.strokeWeight = h.who.strokeWeight; h.textSize = h.who.textSize; h.textFill = h.who.textFill; }, abortWho: function() { var h = this; h.who.fill = h.fill; h.who.stroke = h.stroke; h.who.strokeWeight = h.strokeWeight; h.who.textSize = h.textSize; }, colorShift: function(rgb) { var h = this; var y = h.slideY + (255 - rgb) h.scale / 256; return constrain(y, 0, 400); }, colorUnshift: function(y) { var h = this; var rgb = (y - h.slideY) * 256 / h.scale; rgb = constrain(round(255 - rgb), 0, 255); return rgb; }, colorToCntrlPoints: function(c, i) { var h = this, incr = h.width/5, x = h.x - h.width/2 + incr, cp = h.cntrlPoints; if (c === undefined \|\| c === null) { c = transparent; } cp[i++] = { x: x, y: h.colorShift(red(c)), obj: h }; x += incr; cp[i++] = { x: x, y: h.colorShift(green(c)), obj: h }; x += incr; cp[i++] = { x: x, y: h.colorShift(blue(c)), obj: h }; x += incr; cp[i++] = { x: x, y: h.colorShift(alpha(c)), obj: h }; }, cntrlPointsToColor: function(i) { var h = this, cp = h.cntrlPoints; return color(h.colorUnshift(cp[i++].y), h.colorUnshift(cp[i++].y), h.colorUnshift(cp[i++].y), h.colorUnshift(cp[i].y)); }, /* Initialize the color / reInit: function() { var colour, h = this; colorObj = h; h.x = (h.who.x > 200) ? 20 + h.width / 2 : 380 - h.width / 2; h.y = (h.who.y > 200) ? 20 + h.height / 2 : 380 - h.height / 2; h.menu = getMenu(true, []); h.cntrlPoints = [ { x: h.x-40, y: h.y-h.height/2+1.5bubbleSz, obj: h }, { x: h.x+40, y: h.y-h.height/2+1.5bubbleSz, obj: h }]; h.slideY = h.y + h.height/2 - 3bubbleSz - 128; h.numBase = h.y - h.height/2 + 3.4bubbleSz; h.loadWho(); if (h.subTitle === "Text") { colour = h.who.textFill; } else if (h.subTitle === "Stroke") { colour = h.who.stroke; } else { colour = h.who.fill; } h.colorToCntrlPoints(colour, 2); if (h.number !== undefined && h.number.length > 0) { h.cntrlPoints.push({x: h.x-1.6bubbleSz, y: h.numBase, obj: h}); h.cntrlPoints.push({x: h.x+1.6bubbleSz, y: h.numBase, obj: h}); } }, mouseIsOver: function() { var mx = mouseX, w2 = this.width/2; if (mx > this.x - w2 && mx < this.x + w2) { var my = mouseY, h2 = this.height/2; return (my > this.y - h2 && my < this.y + h2); } return false; }, mouseInControl: function(i) { var num, incr, h = this; switch (i) { case 0: / abort. Back-out the changes / h.abortWho(); i = objects.indexOf(this); if (i > 0) { objects.splice(i, 1); / we are done! / } colorObj = undefined; return; case 1: / quit now... mods are in-place / i = objects.indexOf(this); if (i > 0) { objects.splice(i, 1); / we are done! / } colorObj = undefined; return; case 2: / Fall through / case 3: / Fall through / case 4: / Fall through / case 5: h.cntrlPoints[i].y = constrain(mouseY, h.slideY, h.slideY + 128); var colour = h.cntrlPointsToColor(2); if (h.subTitle === "Text") { h.who.textFill = colour; } else if (h.subTitle === "Stroke") { h.who.stroke = colour; } else { h.who.fill = colour; } break; case 6: / decrease strokeWeigth or textSize / num = h.getWeight(); incr = (num <= 3) ? 0.1 : 1; h.setWeight(max(0, num - incr)); break; case 7: / increase strokeWeigth or textSize / num = h.getWeight(); incr = (num < 3) ? 0.1 : 1; h.setWeight(num + incr); break; } }, menuSelect: function(i) { / the Color object has no stink'n menu / }, render: function() { var h = this; fill(white); stroke(black); strokeWeight(1); textSize(12); rect(h.x, h.y, h.width, h.height); fill(black); textAlign(LEFT, CENTER); text("quit", h.x-50+17, h.y-h.height/2+1.5bubbleSz); textAlign(RIGHT, CENTER); text("Done", h.x+50-17, h.y-h.height/2+1.5bubbleSz); textAlign(CENTER, CENTER); strokeWeight(2); var y1 = h.y+h.height/2-1bubbleSz; text(h.subTitle, h.x, y1); text(alfa, h.x+3/10h.width, y1 - bubbleSz - 1); y1 = h.slideY; var y2 = y1 + 128; var x = h.x - h.width/2 + h.width/5; var cp = h.cntrlPoints; stroke(255, 0, 0); line(x, y1, x, y2); line(x-4, cp[2].y, x+4, cp[2].y); x += 20; stroke(0, 255, 0); line(x, y1, x, y2); line(x-4, cp[3].y, x+4, cp[3].y); x += 20; stroke(0, 0, 255); line(x, y1, x, y2); line(x-4, cp[4].y, x+4, cp[4].y); x += 20; stroke(black); line(x, y1, x, y2); line(x-4, cp[5].y, x+4, cp[5].y); if (h.number !== undefined && h.number.length > 0) { textAlign(CENTER, TOP); var num = (h.number === "textSize") ? h.who.textSize : h.who.strokeWeight; num = (num >= 2) ? round(num) : round(num 10) / 10; text("- " + num + " +\n" + h.number, h.x - h.width/2, h.numBase-bubbleSz/2-1, h.width, 40); } } }; var commonTextFillStroke = function(obj, n) { var s, number, knew; if (n >= obj.menu.common) { return commonMenuSelect(obj, n); } if (n === obj.menu.common - 1) { s = "Stroke"; number = "strokeWeight"; } else if (obj.menu.common === 2 \|\| n === 1) { s = "Fill"; } else { s = "Text"; number = "textSize"; } knew = Color.extend({ who: obj, subTitle: s, number: number }); objects.push(knew); knew.reInit(); }; var checkPointOut = function(obj, p) { var msg = tab + "objects.push(obj = " + obj.nom + ".extend({ " + p.join(", ") + " })); obj.reInit();"; println(msg); }; var Bezier = { nom: "Bezier", x: 250, /* parametric center (t = 1/2) of the curve / y: 250, ax: 250 + 100, / start vertex coordinate / ay: 250 - 60, bx: 250 - 100, / stop vertex coordinate / by: 250 + 60, cx: 250 - 120, / cntrl point1 coordinate / cy: 250 + 120, dx: 250 + 120, / cntrl point2 coordinate / dy: 250 - 120, rotate: 0, strokeWeight: 3, stroke: color(146, 46, 217), fill: transparent, cntrlPoints: null, / How a Bezier gets created / extend: function(props) { var obj = bObject.create(this); bobExtend(obj, json.parse( json.stringify(this, extendFilter))); bobExtend(obj, props); return obj; }, checkPoint: function() { var h = this; var a = [ "x: " + rnd100(h.x), "y: " + rnd100(h.y), "ax: " + rnd100(h.ax), "ay: " + rnd100(h.ay), "bx: " + rnd100(h.bx), "by: " + rnd100(h.by), "cx: " + rnd100(h.cx), "cy: " + rnd100(h.cy), "dx: " + rnd100(h.dx), "dy: " + rnd100(h.dy), "strokeWeight: " + h.strokeWeight, "stroke: " + hexString(h.stroke), "fill: " + hexString(h.fill) ]; checkPointOut(h, a); }, / Initialize a bezier / reInit: function() { var i, t, h = this; if (h.cntrlPoints === null) { h.cntrlPoints = [{ x: bezierPoint(h.ax, h.cx, h.dx, h.bx, 0.5), y: bezierPoint(h.ay, h.cy, h.dy, h.by, 0.5), obj: h }]; h.wayPoints = []; h.menu = getMenu(false, ["Fill", "Stroke"]); } var center = h.cntrlPoints[0]; if (h.x !== center.x \|\| h.y !== center.y) { var dX = h.x - center.x; var dY = h.y - center.y; h.ax += dX; h.ay += dY; h.bx += dX; h.by += dY; h.cx += dX; h.cy += dY; h.dx += dX; h.dy += dY; } if (h.rotate !== 0) { / make the rotation zero! / var c = cos(h.rotate); var s = sin(h.rotate); var x = h.ax - center.x; var y = h.ay - center.y; h.ax = cx - sy + center.x; h.ay = sx + cy + center.y; x = h.bx - center.x; y = h.by - center.y; h.bx = cx - sy + center.x; h.by = sx + cy + center.y; x = h.cx - center.x; y = h.cy - center.y; h.cx = cx - sy + center.x; h.cy = sx + cy + center.y; x = h.dx - center.x; y = h.dy - center.y; h.dx = cx - sy + center.x; h.dy = sx + cy + center.y; h.rotate = 0; } else { h.x = bezierPoint(h.ax, h.cx, h.dx, h.bx, 0.5); h.y = bezierPoint(h.ay, h.cy, h.dy, h.by, 0.5); } h.cntrlPoints[0] = { x: h.x, y: h.y, obj: h }; h.cntrlPoints[1] = { x: h.ax, y: h.ay, obj: h }; h.cntrlPoints[2] = { x: h.bx, y: h.by, obj: h }; h.cntrlPoints[3] = { x: h.cx, y: h.cy, obj: h, lx: h.ax, ly: h.ay }; h.cntrlPoints[4] = { x: h.dx, y: h.dy, obj: h, lx: h.bx, ly: h.by }; for (t = 1/16, i = 0; i < 8; i++, t+= 1/8) { h.wayPoints[i] = { x: bezierPoint(h.ax, h.cx, h.dx, h.bx, t), y: bezierPoint(h.ay, h.cy, h.dy, h.by, t) }; } }, mouseIsOver: function() { return ( (mouseIsOverCntrl(this.cntrlPoints) >= 0) \|\| (mouseIsOverCntrl(this.wayPoints) >= 0)); }, mouseInControl: function(i) { var p = this.cntrlPoints[i]; if (i === 0) { / the bezier on the move / this.x = mouseX; this.y = mouseY; this.reInit(); return; } if (pressedRot === undefined) { pressedRot = (dist(mouseX, mouseY, p.x, p.y) > bubbleCenter); } if (pressedRot) { / Rotate the bezier / var origin = this.cntrlPoints[0]; var alpha = atan2(p.y - origin.y, p.x - origin.x); var gamma = atan2(mouseY - origin.y, mouseX -origin.x); this.rotate = gamma - alpha; this.reInit(); return; } / Stretch the vertex / switch (i) { case 1: this.ax = mouseX; this.ay = mouseY; break; case 2: this.bx = mouseX; this.by = mouseY; break; case 3: this.cx = mouseX; this.cy = mouseY; break; case 4: this.dx = mouseX; this.dy = mouseY; break; } this.reInit(); }, menuSelect: function(i) { commonTextFillStroke(this, i); }, render: function(gfx) { var h = this; objectComment(gfx, this); preRender(gfx, h, false); gfx.bezier(h.ax, h.ay, h.cx, h.cy, h.dx, h.dy, h.bx, h.by); } }; var Line = { nom: "Line", x: 100, y: 100, width: 100, height: 0, / zero height will be used for mousing / rotate: -60, strokeWeight: 3, stroke: black, fill: transparent, cntrlPoints: null, / How a Line gets created / extend: function(props) { var obj = bObject.create(this); bobExtend(obj, json.parse( json.stringify(this, extendFilter))); bobExtend(obj, props); return obj; }, checkPoint: function() { var h = this; var a = [ "x: " + rnd100(h.x), "y: " + rnd100(h.y), "width: " + rnd100(h.width), "rotate: " + rnd100(h.rotate), "strokeWeight: " + h.strokeWeight, "stroke: " + hexString(h.stroke) ]; checkPointOut(h, a); }, / Initialize an line / reInit: function() { this.menu = getMenu(false, ["Stroke"]); this.height = this.strokeWeight + 6; this.cos = cos(this.rotate); this.sin = sin(this.rotate); this.cntrlPoints = this.cntrlPoints \|\| []; this.cntrlPoints[0] = { x: this.x, y: this.y, obj: this }; this.cntrlPoints[1] = { x: this.x + this.costhis.width/2, y: this.y + this.sinthis.width/2, obj: this }; this.cntrlPoints[2] = { x: this.x - this.costhis.width/2, y: this.y - this.sinthis.width/2, obj: this }; }, mouseInControl: function(i) { if (i === 0) { / the line on the move / this.x = mouseX; this.y = mouseY; this.reInit(); return; } var dst, p = this.cntrlPoints[i]; if (pressedRot === undefined) { pressedRot = (dist(mouseX, mouseY, p.x, p.y) > bubbleCenter); } if (pressedRot) { this.rotate = atan2(mouseY - this.y, mouseX - this.x); if (i === 2) { this.rotate += 180; } this.reInit(); return; } / drag one end of the line, then recompute everything / p = this.cntrlPoints; p[i].x = mouseX; p[i].y = mouseY; this.width = dist(p[1].x, p[1].y, p[2].x, p[2].y); this.rotate = atan2(p[1].y - p[2].y, p[1].x - p[2].x); this.x = (p[1].x + p[2].x) / 2; this.y = (p[1].y + p[2].y) / 2; this.reInit(); }, mouseIsOver: function() { if (mouseIsOverCntrl(this.cntrlPoints) >= 0) { return true; } var w = this.width; var h = this.height; var x = mouseX - this.x; var y = mouseY - this.y; var s = this.sin; var c = this.cos; return (abs(c x + s * y) <= w/2 && abs(s * x - c * y) <= h/2); }, menuSelect: function(i) { commonTextFillStroke(this, i); }, render: function(gfx) { objectComment(gfx, this); preRender(gfx, this, true); gfx.line(-this.width/2, 0, this.width/2, 0); gfx.popMatrix(); } }; var Rect = { nom: "Rect", x: 150, y: 150, width: 100, height: round(2 100 / (sqrt(5) + 1)), rotate: 0, strokeWeight: 3, stroke: color(255, 0, 255), fill: color(0, 255, 255), cntrlPoints: null, / How a Rect gets created / extend: function(props) { var obj = bObject.create(this); bobExtend(obj, json.parse( json.stringify(this, extendFilter))); bobExtend(obj, props); return obj; }, checkPoint: function() { var h = this; var a = [ "x: " + rnd100(h.x), "y: " + rnd100(h.y), "width: " + rnd100(h.width), "height: " + rnd100(h.height), "rotate: " + rnd100(h.rotate), "strokeWeight: " + h.strokeWeight, "stroke: " + hexString(h.stroke), "fill: " + hexString(h.fill) ]; checkPointOut(h, a); }, / Initialize an rect / reInit: function() { this.menu = getMenu(false, ["Fill", "Stroke"]); this.cos = cos(this.rotate); this.sin = sin(this.rotate); this.cntrlPoints = this.cntrlPoints \|\| []; this.cntrlPoints[0] = { x: this.x, y: this.y, obj: this }; this.cntrlPoints[1] = { x: this.x + this.costhis.width/2, y: this.y + this.sinthis.width/2, obj: this }; this.cntrlPoints[2] = { x: this.x - this.sinthis.height/2, y: this.y + this.costhis.height/2, obj: this }; }, mouseInControl: function(i) { if (i === 0) { / the rect on the move / this.x = mouseX; this.y = mouseY; this.reInit(); return; } if (pressedRot === undefined) { var p = this.cntrlPoints[i]; pressedRot = (dist(mouseX, mouseY, p.x, p.y) > bubbleCenter); } var gamma = atan2(mouseY - this.y, mouseX - this.x); if (i === 1) { / the width wants to change / if (pressedRot) { this.rotate = gamma; } else { this.width = abs(2 (mouseX - this.x) / this.cos); } } if (i === 2) { /* the height wants to change / if (pressedRot) { this.rotate = gamma - 90; } else { this.height = abs(2 (mouseY - this.y) / this.cos); } } this.reInit(); }, mouseIsOver: function() { if (mouseIsOverCntrl(this.cntrlPoints) >= 0) { return true; } var w = this.width; var h = this.height; var x = mouseX - this.x; var y = mouseY - this.y; var s = this.sin; var c = this.cos; return (abs(c * x + s * y) <= w/2 && abs(s * x - c * y) <= h/2); }, menuSelect: function(i) { commonTextFillStroke(this, i); }, render: function(gfx) { objectComment(gfx, this); if (this.rotate === 0) { preRender(gfx, this, false); gfx.rect(this.x, this.y, this.width, this.height); } else { preRender(gfx, this, true); gfx.rect(0, 0, this.width, this.height); gfx.popMatrix(); } } }; var Image = { nom: "Image", x: 250, y: 100, width: -1, height: -1, rotate: 0, strokeWeight: 0, stroke: transparent, fill: transparent, cntrlPoints: null, img: null, imageName: "imageName", /* How a Image gets created / extend: function(props) { var obj = bObject.create(this); bobExtend(obj, json.parse( json.stringify(this, extendFilter))); bobExtend(obj, props); return obj; }, checkPoint: function() { var h = this; var img = "(" + h.imageName + " === undefined) ? 0 : " + h.imageName; var a = [ "x: " + rnd100(h.x), "y: " + rnd100(h.y), "width: " + rnd100(h.width), "height: " + rnd100(h.height), "rotate: " + rnd100(h.rotate), "strokeWeight: " + h.strokeWeight, "stroke: " + hexString(h.stroke), "fill: " + hexString(h.fill), "imageName: " + squote + h.imageName + squote, "img: " + img ]; checkPointOut(h, a); }, / Initialize an Image / reInit: function() { this.menu = getMenu(false, []); if (this.width < 0 \|\| this.height < 0) { this.width = this.img.width; this.height = this.img.height; } this.cos = cos(this.rotate); this.sin = sin(this.rotate); this.cntrlPoints = this.cntrlPoints \|\| []; this.cntrlPoints[0] = { x: this.x, y: this.y, obj: this }; this.cntrlPoints[1] = { x: this.x + this.costhis.width/2, y: this.y + this.sinthis.width/2, obj: this }; this.cntrlPoints[2] = { x: this.x - this.sinthis.height/2, y: this.y + this.costhis.height/2, obj: this }; }, mouseInControl: function(i) { if (i === 0) { / the rect on the move / this.x = mouseX; this.y = mouseY; this.reInit(); return; } if (pressedRot === undefined) { var p = this.cntrlPoints[i]; pressedRot = (dist(mouseX, mouseY, p.x, p.y) > bubbleCenter); } var gamma = atan2(mouseY - this.y, mouseX - this.x); if (i === 1) { / the width wants to change / if (pressedRot) { this.rotate = gamma; } else { this.width = abs(2 (mouseX - this.x) / this.cos); } } if (i === 2) { /* the height wants to change / if (pressedRot) { this.rotate = gamma - 90; } else { this.height = abs(2 (mouseY - this.y) / this.cos); } } this.reInit(); }, mouseIsOver: function() { if (mouseIsOverCntrl(this.cntrlPoints) >= 0) { return true; } var w = this.width; var h = this.height; var x = mouseX - this.x; var y = mouseY - this.y; var s = this.sin; var c = this.cos; return (abs(c * x + s * y) <= w/2 && abs(s * x - c * y) <= h/2); }, menuSelect: function(i) { commonMenuSelect(this, i); }, render: function(gfx) { var img = this.img; objectComment(gfx, this); if (gfx.comment !== undefined) { img = this.imageName; } if (this.rotate !== 0) { preRender(gfx, this, true); gfx.image(img, 0, 0, this.width, this.height); gfx.popMatrix(); } else { preRender(gfx, this, false); gfx.image(img, this.x, this.y, this.width, this.height); } } }; var Text = { nom: "Text", x: 100, y: 250, width: 100, height: round(2 100 / (sqrt(5) + 1)), rotate: 0, strokeWeight: 0, stroke: transparent, fill: transparent, textFill: black, textSize: 16, cntrlPoints: null, msg: null, parentMsg: null, reload: false, / How a text box gets created / extend: function(props) { var obj = bObject.create(this); bobExtend(obj, json.parse( json.stringify(this, extendFilter))); bobExtend(obj, props); obj.parentMsg = obj.msg; obj.msg = null; return obj; }, checkPoint: function() { var h = this; var a = [ "x: " + rnd100(h.x), "y: " + rnd100(h.y), "width: " + rnd100(h.width), "height: " + rnd100(h.height), "rotate: " + rnd100(h.rotate), "strokeWeight: " + h.strokeWeight, "stroke: " + hexString(h.stroke), "fill: " + hexString(h.fill), "textFill: " + hexString(h.textFill), "textSize: " + h.textSize, "msg: " + quote + h.msg + quote, "reload: " + true ]; checkPointOut(h, a); }, / Initialize a text box / reInit: function() { this.menu = getMenu(false, ["Text", "Fill", "Stroke"]); this.cos = cos(this.rotate); this.sin = sin(this.rotate); this.cntrlPoints = this.cntrlPoints \|\| []; this.cntrlPoints[0] = { x: this.x, y: this.y, obj: this }; this.cntrlPoints[1] = { x: this.x + this.costhis.width/2, y: this.y + this.sinthis.width/2, obj: this }; this.cntrlPoints[2] = { x: this.x - this.sinthis.height/2, y: this.y + this.costhis.height/2, obj: this }; if (this.msg === null) { if (! this.reload) { newTextObj = this; } this.msg = this.parentMsg; if (this.msg === null) { this.msg = "Your text here..."; } } this.reload = false; }, mouseInControl: function(i) { if (i === 0) { / the rect on the move / this.x = mouseX; this.y = mouseY; this.reInit(); return; } if (pressedRot === undefined) { var p = this.cntrlPoints[i]; pressedRot = (dist(mouseX, mouseY, p.x, p.y) > bubbleCenter); } var gamma = atan2(mouseY - this.y, mouseX - this.x); if (i === 1) { / the width wants to change / if (pressedRot) { this.rotate = gamma; } else { this.width = abs(2 (mouseX - this.x) / this.cos); } } if (i === 2) { /* the height wants to change / if (pressedRot) { this.rotate = gamma - 90; } else { this.height = abs(2 (mouseY - this.y) / this.cos); } } this.reInit(); }, mouseIsOver: function() { if (mouseIsOverCntrl(this.cntrlPoints) >= 0) { return true; } var w = this.width; var h = this.height; var x = mouseX - this.x; var y = mouseY - this.y; var s = this.sin; var c = this.cos; return (abs(c * x + s * y) <= w/2 && abs(s * x - c * y) <= h/2); }, renderTextInput: function() { var cRate = 20; var fc = frameCount % cRate; var textCursor = (fc < cRate/2) ? "\|" : " "; pushMatrix(); resetMatrix(); fill(255, 255, 255, 245); stroke(black); strokeWeight(1); translate(200, 200); rect(0, 0, 220, 200); translate(-100, -100); textAlign(CENTER, TOP); textSize(this.textSize); fill(this.textFill); text(this.msg + textCursor, 0, 0, 200, 400); text("Backspace or Delete to edit. " + "Return or Enter when done.", 0, 140, 220, 200); popMatrix(); }, menuSelect: function(i) { commonTextFillStroke(this, i); }, render: function(gfx) { var h = this; if (h === newTextObj) { h.renderTextInput(); return; } objectComment(gfx, this); if (h.rotate !== 0) { preRender(gfx, h, true); gfx.rect(0, 0, h.width, h.height); gfx.fill(h.textFill); gfx.textAlign(CENTER, TOP); gfx.textSize(h.textSize); gfx.text(h.msg, -h.width/2, -h.height/2, h.width, h.height); gfx.popMatrix(); } else { preRender(gfx, h, false); gfx.rect(h.x, h.y, h.width, h.height); gfx.fill(h.textFill); gfx.textAlign(CENTER, TOP); gfx.textSize(h.textSize); gfx.text(h.msg, h.x-h.width/2, h.y-h.height/2, h.width, h.height); } } }; var Triangle = { nom: "Triangle", x: 200, /* incenter coordinate / y: 200, ax: 200 + 0, / vertex coordinate / ay: 200 - 60, bx: 200 - round(30sqrt(3)), by: 200 + 30, cx: 200 + round(30sqrt(3)), cy: 200 + 30, rotate: 0, strokeWeight: 3, stroke: color(255, 0, 0), fill: color(255, 255, 0), A: null, / A, B, C and P are cached side lengths & perim / cntrlPoints: null, / How a Triangle gets created / extend: function(props) { var obj = bObject.create(this); bobExtend(obj, json.parse( json.stringify(this, extendFilter))); bobExtend(obj, props); return obj; }, checkPoint: function() { var h = this; var a = [ "x: " + rnd100(h.x), "y: " + rnd100(h.y), "ax: " + rnd100(h.ax), "ay: " + rnd100(h.ay), "bx: " + rnd100(h.bx), "by: " + rnd100(h.by), "cx: " + rnd100(h.cx), "cy: " + rnd100(h.cy), "strokeWeight: " + h.strokeWeight, "stroke: " + hexString(h.stroke), "fill: " + hexString(h.fill) ]; checkPointOut(h, a); }, / Initialize a triangle / reInit: function() { var h = this, reCenter = true; / recompute the incenter based on vertices / var incenter = function() { if (h.A === null) { h.A = dist(h.bx, h.by, h.cx, h.cy); h.B = dist(h.ax, h.ay, h.cx, h.cy); h.C = dist(h.bx, h.by, h.ax, h.ay); h.P = h.A + h.B + h.C; } h.cntrlPoints = [ { x: (h.Ah.ax + h.Bh.bx + h.Ch.cx) / h.P, y: (h.Ah.ay + h.Bh.by + h.Ch.cy) / h.P, obj: h } ]; }; if (h.cntrlPoints === null) { h.A = null; incenter(); h.menu = getMenu(false, ["Fill", "Stroke"]); } var center = h.cntrlPoints[0]; if (h.x !== center.x \|\| h.y !== center.y) { var dX = h.x - center.x; var dY = h.y - center.y; h.ax += dX; h.ay += dY; h.bx += dX; h.by += dY; h.cx += dX; h.cy += dY; } if (h.rotate !== 0) { / make the rotation zero! / var c = cos(h.rotate); var s = sin(h.rotate); var x = h.ax - center.x; var y = h.ay - center.y; h.ax = cx - sy + center.x; h.ay = sx + cy + center.y; x = h.bx - center.x; y = h.by - center.y; h.bx = cx - sy + center.x; h.by = sx + cy + center.y; x = h.cx - center.x; y = h.cy - center.y; h.cx = cx - sy + center.x; h.cy = sx + cy + center.y; h.rotate = 0; reCenter = false; } / recompute the incenter based on vertices / if (reCenter) { incenter(); } h.x = h.cntrlPoints[0].x; / recenter / h.y = h.cntrlPoints[0].y; h.cntrlPoints[1] = { x: h.ax, y: h.ay, obj: h }; h.cntrlPoints[2] = { x: h.bx, y: h.by, obj: h }; h.cntrlPoints[3] = { x: h.cx, y: h.cy, obj: h }; }, mouseIsOver: function() { var h = this, mx = mouseX, my = mouseY; / * Return true iff the mouse and origin are on the * same side of the line described by A-B / var sameSide = function(ax, ay, bx, by, px, py, qx, qy) { if (ax === bx) { / vertical line would cause zero division later / return ((px < ax) === (qx < ax)); } var m = (by - ay) / (bx - ax); / the slope / var k = ay - (m ax); /* intercept / 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 ((mouseIsOverCntrl(h.cntrlPoints) >= 0) \|\| ( sameSide(h.ax, h.ay, h.bx, h.by, h.cx, h.cy, mx, my) && sameSide(h.ax, h.ay, h.cx, h.cy, h.bx, h.by, mx, my) && sameSide(h.cx, h.cy, h.bx, h.by, h.ax, h.ay, mx, my))); }, mouseInControl: function(i) { var p = this.cntrlPoints[i]; if (i === 0) { / the triangle on the move / this.x = mouseX; this.y = mouseY; this.reInit(); return; } if (pressedRot === undefined) { pressedRot = (dist(mouseX, mouseY, p.x, p.y) > bubbleCenter); } if (pressedRot) { / Rotate the triangle / var origin = this.cntrlPoints[0]; var alpha = atan2(p.y - origin.y, p.x - origin.x); var gamma = atan2(mouseY - origin.y, mouseX -origin.x); this.rotate = gamma - alpha; this.reInit(); return; } / Stretch the vertex / this.A = null; / forces recomputing of perimeter / switch (i) { case 1: this.ax = mouseX; this.ay = mouseY; break; case 2: this.bx = mouseX; this.by = mouseY; break; case 3: this.cx = mouseX; this.cy = mouseY; break; } this.reInit(); }, menuSelect: function(i) { commonTextFillStroke(this, i); }, render: function(gfx) { var h = this; objectComment(gfx, this); preRender(gfx, h, false); gfx.triangle(h.ax, h.ay, h.bx, h.by, h.cx, h.cy); } }; var Ellipse = { nom: "Ellipse", x: 300, y: 300, width: 140, height: 90, rotate: 0, strokeWeight: 3, stroke: color(0, 0, 255), fill: color(0, 255, 0), cos: 0, sin: 0, cntrlPoints: null, / How an Ellipse gets created / extend: function(props) { var obj = bObject.create(this); bobExtend(obj, json.parse( json.stringify(this, extendFilter))); bobExtend(obj, props); return obj; }, checkPoint: function() { var h = this; var a = [ "x: " + rnd100(h.x), "y: " + rnd100(h.y), "width: " + rnd100(h.width), "height: " + rnd100(h.height), "rotate: " + rnd100(h.rotate), "strokeWeight: " + h.strokeWeight, "stroke: " + hexString(h.stroke), "fill: " + hexString(h.fill) ]; checkPointOut(h, a); }, / Initialize an ellipse / reInit: function() { this.menu = getMenu(false, ["Fill", "Stroke"]); this.cos = cos(this.rotate); this.sin = sin(this.rotate); this.cntrlPoints = this.cntrlPoints \|\| []; this.cntrlPoints[0] = { x: this.x, y: this.y, obj: this }; this.cntrlPoints[1] = { x: this.x + this.costhis.width/2, y: this.y + this.sinthis.width/2, obj: this }; this.cntrlPoints[2] = { x: this.x - this.sinthis.height/2, y: this.y + this.costhis.height/2, obj: this }; }, mouseInControl: function(i) { if (i === 0) { / the ellipse on the move / this.x = mouseX; this.y = mouseY; this.reInit(); return; } if (pressedRot === undefined) { var p = this.cntrlPoints[i]; pressedRot = (dist(mouseX, mouseY, p.x, p.y) > bubbleCenter); } var gamma = atan2(mouseY - this.y, mouseX - this.x); if (i === 1) { / the width wants to change / if (pressedRot) { this.rotate = gamma; } else { this.width = abs(2 (mouseX - this.x) / this.cos); } } if (i === 2) { /* the height wants to change / if (pressedRot) { this.rotate = gamma - 90; } else { this.height = abs(2 (mouseY - this.y) / this.cos); } } this.reInit(); }, mouseIsOver: function() { if (mouseIsOverCntrl(this.cntrlPoints) >= 0) { return true; } var w = this.width; var h = this.height; var x = mouseX - this.x; var y = mouseY - this.y; var s = this.sin; var c = this.cos; var termX = 2 * (c * x + s * y) / w; var termY = 2 * (s * x - c * y) / h; return ((termX * termX) + (termY termY) <= 1); }, menuSelect: function(i) { commonTextFillStroke(this, i); }, render: function(gfx) { objectComment(gfx, this); if (this.rotate !== 0) { preRender(gfx, this, true); gfx.ellipse(0, 0, this.width, this.height); gfx.popMatrix(); } else { preRender(gfx, this, false); gfx.ellipse(this.x, this.y, this.width, this.height); } } }; var Background = { nom: "Background", x: 0, y: 0, width: 400, height: 400, rotate: 0, strokeWeight: 0, stroke: transparent, fill: color(235, 240, 245), cntrlPoints: null, / How the background gets created / extend: function(props) { var obj = bObject.create(this); bobExtend(obj, json.parse( json.stringify(this, extendFilter))); bobExtend(obj, props); return obj; }, checkPoint: function() { var h = this; var a = [ "fill: " + hexString(h.fill) ]; checkPointOut(h, a); }, / Initialize the background / reInit: function() { this.cntrlPoints = []; this.menu = getMenu(true, ["Background"]); }, mouseInControl: function(i) { / There are no control points for the Background / }, mouseIsOver: function() { return true; }, menuSelect: function(i) { var knew, props; switch (i) { case 0: props = { who: this, subTitle: this.nom }; knew = Color.extend(props); break; case 1: / Fall through / case 2: / Fall through / case 3: / Fall through / case 4: / Fall through / case 5: / Fall through / case 6: props = { x: round(random(180, 220)), y: round(random(180, 220)) }; knew = proto[i].extend(props); break; case 7: codeAll(false); return; case 8: codeAll(true); return; case 9: CheckPoint(); return; } if (knew !== undefined) { objects.push(knew); knew.reInit(); } }, render: function(gfx) { objectComment(gfx, this); gfx.background(this.fill); } }; proto = [Background, Bezier, Ellipse, Line, Rect, Text, Triangle]; var updateKeyStroke = function(keycode) { var obj = newTextObj; if (obj !== undefined) { switch (keycode) { case DELETE: / Fall through / case BACKSPACE: if (obj.msg.length > 0) { obj.msg = obj.msg.slice(0, -1); } break; case ENTER: / Fall through / case RETURN: newTextObj = undef; break; case CONTROL: / Fall through / case SHIFT: / Fall through / case 20: / Caps Lock / break; default: obj.msg = obj.msg + str(key); break; } return; } for (var i = objects.length; --i >= 0; ) { if (objects[i].mouseIsOver()) { obj = objects[i]; break; } } if (obj === undefined) { return; } switch (keycode) { case UP: if ((i > 0) && (i < objects.length-1)) { objects[i] = objects[i+1]; objects[i+1] = obj; } break; case DOWN: if (i > 1) { objects[i] = objects[i-1]; objects[i-1] = obj; } break; case DELETE: / Fall through / case BACKSPACE: if (i > 0) { objects.splice(i, 1); / delete that object i / } break; } Save(); }; var updateMouse = function(cp) { var i, d; if ((! mouseWasPressed) && mouseIsPressed && cp !== undefined) { i = mouseIsOverCntrl(cp); if (i >= 0) { mouseWasPressed = true; pressedObj = cp[i].obj; pressedI = i; } } if (mouseWasPressed && mouseIsPressed) { pressedObj.mouseInControl(pressedI); } }; var objDraw = function() { if (objects === undefined \|\| objects[0].reInit !== Background.reInit) { var bg = Background.extend(); objects = objects \|\| []; objects.unshift(bg); bg.reInit(); } for (var i = 0; i < objects.length; i++) { objects[i].render(pjs); } if (newTextObj !== undefined) { return; } if (menuObj !== undefined) { menuObj.menu.render(menuObj.menu.x, menuObj.menu.y); return; } / control point shine through all obscuring objects / var cp = (pressedObj === undefined) ? pressedObj : pressedObj.cntrlPoints; for (i = objects.length; (cp === undefined) && (--i >= 0); ) { if (objects[i].mouseIsOver()) { cp = objects[i].cntrlPoints; } } for (i = 0; (cp !== undefined) && i < cp.length; i++) { renderCntrlBubble(cp[i]); } updateMouse(cp); if (pressedObj !== undefined) { return; } for (i = objects.length; (colorObj === undefined) && mouseIsPressed && (--i >= 0); ) { var y, x, obj = objects[i]; if (obj.mouseIsOver()) { x = objects[i].x - mouseX; x = mouseX + (((x < 0) ? 0.6 : -0.6) obj.menu.width); y = obj.menu.height / 2; y = obj.menu.render(x, mouseY + y); menuObj = objects[i]; break; } } if (! mouseIsPressed) { noLoop(); } }; var handleSelectedObjects = function() { if (menuObj !== undefined) { var i = menuObj.menu.mouseIsOver(); if (i >= 0) { menuObj.menuSelect(i); } } mouseWasPressed = false; pressedRot = pressedI = pressedObj = menuObj = undefined; }; mousePressed = mouseMoved = keyPressed = mouseDragged = loop; /* Called by Processingjs when the mouse button is released / mouseReleased = function() { mouseIsPressed = false; handleSelectedObjects(); Save(); loop(); }; / Called when a key is released / var myKeyReleased = function(e) { loop(); if (e !== undefined && e.keyCode !== undefined) { keyCode = e.keyCode; if ((keyCode === 46) \|\| (e.ctrlKey && keyCode === LEFT)) { keyCode = DELETE; } } updateKeyStroke(keyCode); }; / Called by Processingjs numerous times per second / var delayCnt = 10; draw = function() { if (! initGraphics()) { return; } if (delayCnt > 0) { delayCnt--; return; } if (! restored) { Restore(); restored = true; return; } var d = (function(what) { return this[what];})("document"); if (d !== undefined && d.body !== undefined) { d.body.onkeyup = myKeyReleased; } objDraw(); }; / ignore this! It's only used in advertising the program! / var thumb; if (thumb) { var obj; objects = []; objects.push(obj = Background.extend({ fill: 0xFFEBF0F5 })); obj.reInit(); objects.push(obj = Image.extend({ x: 309, y: 76, width: 170.01, height: 156, rotate: -0.59, strokeWeight: 0, stroke: 0xFFFFFF, fill: 0xFFFFFF, imageName: 'getImage("space/planet")', img: (getImage("space/planet") === undefined) ? 0 : getImage("space/planet") })); obj.reInit(); objects.push(obj = Line.extend({ x: 136.5, y: 198.5, width: 425.82, rotate: -57.47, strokeWeight: 3, stroke: 0xFF000000 })); obj.reInit(); objects.push(obj = Rect.extend({ x: 286, y: 312, width: 100, height: 62, rotate: 0, strokeWeight: 3, stroke: 0xFFFF00FF, fill: 0xFF00FFFF })); obj.reInit(); objects.push(obj = Ellipse.extend({ x: 105, y: 302, width: 140, height: 90, rotate: 0, strokeWeight: 3, stroke: 0xFF0000FF, fill: 0xFF00FF00 })); obj.reInit(); objects.push(obj = Triangle.extend({ x: 87, y: 92, ax: 87, ay: 32.01, bx: 35, by: 122.01, cx: 139, cy: 122.01, strokeWeight: 3, stroke: 0xFFFF0000, fill: 0xFFFFFF00 })); obj.reInit(); objects.push(obj = Bezier.extend({ x: 206, y: 203, ax: 366.13, ay: 226, bx: 30.13, by: 258, cx: 184.13, cy: 374, dx: 233.13, dy: 6, strokeWeight: 3, stroke: 0xFF922ED9, fill: 0xFFFFFF })); obj.reInit(); objects.push(obj = Text.extend({ x: 186, y: 236, width: 100, height: 62, rotate: 45.73, strokeWeight: 0, stroke: 0xFFFFFF, fill: 0xFFFFFF, textFill: 0xFF000000, textSize: 16, msg: "Bezier curves", reload: true })); obj.reInit(); objects.push(obj = Text.extend({ x: 202, y: 109, width: 100, height: 62, rotate: -59.74, strokeWeight: 0, stroke: 0xFFFFFF, fill: 0xFFFFFF, textFill: 0xFF000000, textSize: 16, msg: "Lines", reload: true })); obj.reInit(); objects.push(obj = Text.extend({ x: 288, y: 385, width: 100, height: 62, rotate: 0, strokeWeight: 0, stroke: 0xFFFFFF, fill: 0xFFFFFF, textFill: 0xFF000000, textSize: 16, msg: "Rectangles", reload: true })); obj.reInit(); objects.push(obj = Text.extend({ x: 102, y: 383, width: 100, height: 62, rotate: 0, strokeWeight: 0, stroke: 0xFFFFFF, fill: 0xFFFFFF, textFill: 0xFF000000, textSize: 16, msg: "Ellipses", reload: true })); obj.reInit(); objects.push(obj = Text.extend({ x: 85, y: 159, width: 100, height: 62, rotate: 0, strokeWeight: 0, stroke: 0xFFFFFF, fill: 0xFFFFFF, textFill: 0xFF000000, textSize: 16, msg: "Triangles", reload: true })); obj.reInit(); objects.push(obj = Text.extend({ x: 304, y: 163, width: 100, height: 62, rotate: 0, strokeWeight: 0, stroke: 0xFFFFFF, fill: 0xFFFFFF, textFill: 0xFF000000, textSize: 16, msg: "Images", reload: true })); obj.reInit(); objects.push(obj = Text.extend({ x: 279, y: 205, width: 100, height: 62, rotate: 0, strokeWeight: 0, stroke: 0xFFFFFF, fill: 0xFFFFFF, textFill: 0xFFFF3500, textSize: 33, msg: "Text!", reload: true })); obj.reInit(); } / * This program can import images. Here's an example: * (Change the false to true and Restart.) */ var demoImage; if (demoImage) { var img = getImage("space/planet"); var obj = Image.extend({ img: img, imageName: 'getImage("space/planet")' }); objects = [obj]; obj.reInit(); }
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIUCxIKU2NyYXRjaHBhZBiY1vC3Bgw
Votes	165
Spin-Offs	5
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"1422255759","title":"ellipse & rect interiors","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, 1739282751744
Updated	10 months ago, 1739282751744
Source Deleted	unknown