Viewing Program

Program Data

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

Title	BS or screens cubed
ID	3424538152
Created	9 years ago, 1458001883103
Updated	3 years ago, 1646613941775
Code	/** * BS: Bob's Screens (not scenes) managed on the faces of a * die (or cube). A screen is a virtual canvas. * * To enable cube rotation, click the mouse outside the cube. * When enabled, the cube will rotate according to the motions * of the mouse. At the same time, (normal) Z-axis rotations * are accomplished by typing the LEFT and RIGHT arrow keys. * Change the SIZE of the cube with the UP and DOWN arrows. * Click the mouse again to disable rotations. * * To type into a screen, first click the mouse in that screen. * * To make any screen full-sized (and properly oriented), hold * down the Ctrl key and click the mouse in the desired screen. * Ctrl-click again to return the screen to the cube. * * To Restart any screen hold down the Ctrl key and click the * mouse's CENTER button in that screen. * * The end of the program documents how you can add your own screen. / / * Give every object a "new" method that works around * the Khan Academy leak. / function whatNewDoes() { var obj = Object.create(this.prototype); this.apply(obj, arguments); return obj; } Object.constructor.prototype.new = whatNewDoes; (function(PVector) { / * Khan Academy leaks objects. Here is a PVector "patch" that * can mitigate PVector leaks iff the programmer invokes * PVector.new() * instead of "new PVector()". / / Reimplement the get method to call PVector.new(). / function get() { return PVector.new(this.x, this.y, this.z); } PVector.prototype.get = get; / Reimplement the cross method to call PVector.new(). / function cross(v) { var ax = this.x, ay = this.y, az = this.z; return PVector.new(ayv.z - azv.y, azv.x - axv.z, axv.y - ayv.x); } PVector.prototype.cross = cross; / * Rewrite static function to invoke PVector.new(). Why the * static method was not robotically generated is a mystery. / function sub(v1, v2) { return PVector.new(v1.x - v2.x, v1.y - v2.y, v1.z - v2.z); } PVector.sub = sub; / Rewrite static function to invoke PVector.new(). / function fromAngle(angle, v) { v = v \|\| PVector.new(); v.x = cos(angle); v.y = sin(angle); return v; } PVector.fromAngle = fromAngle; / Rewrite static function to invoke PVector.new(). / function random3D(v) { var angle = Math.random() TWO_PI; var vz = Math.random() * 2 - 1; var mult = Math.sqrt(1 - vz * vz); var vx = mult * Math.cos(angle); var vy = mult * Math.sin(angle); if (! v) { v = PVector.new(vx, vy, vz); } else { v.set(vx, vy, vz); } return v; } PVector.random3D = random3D; /* Rewrite static function to invoke PVector.new(). / function lerp(v1, v2, amt) { var retval = PVector.new(v1.x, v1.y, v1.z); retval.lerp(v2, amt); return retval; } PVector.lerp = lerp; / Let's also fix a real bug in Processing.js PVectors... / function angleBetween(a, b) { var cosine = a.dot(b) / (a.mag() b.mag()); return acos(constrain(cosine, -1, 1)); } PVector.angleBetween = angleBetween; })(PVector); /* Patches PVector leaks... / /* * DeKhan is a library with five static functions: * loopDetect(f) returns a function like f with no loop detection code. * * renew(f) returns a function like f with the "new" keyword reinserted. * * applyRegExp(f, rExp, replacement) returns a function like f where the * caller specifies replacmenet arguments, rExp and replacement. * * printText(source) prints source via println in a broswer sensitive fashion. * * print(f, prefix, suffix) prints the (nearly) original source * of function f along with optional prefix and suffix strings. / var DeKhan = (function() { / Regular expressions derived from Element118 delag() function. / var plusPlusExp = new RegExp("__env__\\.KAInfiniteLoopCount\\+\\+;\\n", "g"); var ifClauseExp = new RegExp("\\n\\sif \$__env__\\.KAInfiniteLoopCount > 1000\$ {[\\s]+__env__\\.KAInfiniteLoopProtect\$'[^']'\$;[^}]+}", "g"); var newExp = new RegExp("__env__\\.PJSCodeInjector\\.applyInstance\$(\\S+), '\\S+'\$", "g"); var envExp = new RegExp("__env__\\.", "g"); var noBreakSpace = "\u00a0"; / primenumbers7532@gmail.com / var lineBreak = String.fromCharCode(10); / Larry Serflaten for IE Windows / var spaceExp = new RegExp(" ", "g"); var newlineExp = new RegExp("\\n", "g"); var wasFrameCount = frameCount; frameCount = function() { frameCount = wasFrameCount; return this; }; var globals = frameCount(); var metIpseMecum = (0 \|\| arguments).callee; / Given source code, return a function in the global scope. / var conjureFunctionFrom = function (source) { / Copied from Element118 delag() function. / return Object.constructor('return (function(__env__) {return ' + source + ';});')()(globals); }; return { / Return a function like f without any loop detection. / loopDetect: function(f) { var source = f.toString(); source = source.replace(plusPlusExp, ""); source = source.replace(ifClauseExp, ""); return conjureFunctionFrom(source); }, / Return a function like f where the caller supplies the filter. / applyRegExp: function(f, rExp, replacement) { var source = f.toString(); source = source.replace(rExp, replacement); return conjureFunctionFrom(source); }, / Return a function like f that uses the keyword "new" again. / renew: function(f) { return this.applyRegExp(f, newExp, "new $1"); }, / * Print completely deKhanified function f source out via println. * All arguments are optional. / print: function(f, prefix, suffix) { f = f \|\| metIpseMecum; prefix = prefix \|\| ""; suffix = suffix \|\| ""; f = this.loopDetect(f); f = this.renew(f); var source = f.toString(); source = source.replace(envExp, ""); source = prefix + source + suffix; this.printText(source); }, / Print source line(s) out via println. / printText: function(source) { source = source \|\| " "; / blank line if nothing else... / source = source.replace(spaceExp, noBreakSpace); source = source.replace(newlineExp, lineBreak); println(source); }, }; })(); / Library / / * Get an object with methods that allow us to push and pop * new environments to & from the Processing.js state. / var pjsContext = DeKhan.loopDetect(function() { var bs = frameCount; frameCount = function() { return this; }; var global = frameCount(); frameCount = bs; var bs = "bobsScreensBaseContext"; / Return the global value associated with the symbol. / var peek = function(symbol) { return global[symbol]; }; var oldContext = peek(bs); if (oldContext) { oldContext.reset(); } var pjsContext = {}; / what we return / var orig = {}; / A collection of Processing.js functions, persists across Restarts / var pjs = {}; / an evolving copy of orig / var prev = {}; / subset of orig, sans state symbols / var stack = [ pjs ]; / a stack of contexts / / These symbols ought to be (safely?) ignored. / var ignore = [ "alpha", "append", "arrayCopy", "binary", "blue", "brightness", "camera", "Character", "_clearLogs", "__codePointAt", "color", "concat", "constrain", "__contains", "day", "dist", "__endsWith", "__equals", "__equalsIgnoreCase", "expand", "green", "__hashCode", "hex", "hour", "hue", "__instanceof", "__int_cast", "join", "lights", "loadBytes", "loadStrings", "mag", "map", "match", "matchAll", "max", "millis", "min", "minute", "modelX", "modelY", "modelZ", "month", "nf", "nfc", "nfp", "nfs", "noise", "noiseDetail", "noiseSeed", "norm", "ortho", "parseBoolean", "parseByte", "parseChar", "parseFloat", "parseInt", "perspective", "PMatrix2D", "PMatrix3D", "PMatrixStack", "printCamera", "printProjection", "__printStackTrace", "PShape", "PShapeSVG", "PVector", "random", "Random", "randomSeed", "red", "__replace", "__replaceAll", "__replaceFirst", "reverse", "saturation", "saveStrings", "screenX", "screenY", "screenZ", "second", "shorten", "size", "sort", "sphereDetail", "splice", "__split", "split", "splitTokens", "sq", "__startsWith", "str", "subset", "__toCharArray", "trim", "unbinary", "unhex", "XMLElement", "year", "constructor", "mix", "peg", "lerpColor", "blendColor", "exit", "status", "lerp", "degrees", "radians", "save", "saveFrame", "print", "println", "link", "loadImage", "requestImage", "PImage", "createImage", "beginCamera", "endCamera", "loadFont", "glyphLook", "loadGlyphs", "noCursor" ]; / These symbols are volatile. The users can change them at any time. / var volatile = [ "angleMode", "draw", "keyPressed", "keyReleased", "keyTyped", "mouseClicked", "mouseDragged", "mouseMoved", "mouseOut", "mouseOver", "mousePressed", "mouseReleased", "mouseScrolled" ]; / * The state of these non-function symbols must be saved and * restored before and after context switches. There may be more? / var state = [ "keyIsPressed", "mouseButton", "mouseIsPressed", "mouseScroll", "mouseX", "mouseY", "pmouseX", "pmouseY", "width", "height", "frameCount", "focused", ]; state.push.apply(state, volatile); / * Given a graphics buffer, osb determine the common methods / * functions between Processing.js and osb. Record those * functions in orig. / var assignmentCandidates = function() { var osb = createGraphics(16, 16, JAVA2D); / First find all candidates for interposition / for (var p in osb) { if (osb.hasOwnProperty(p) && (ignore.indexOf(p) < 0) && typeof osb[p] === "function") { var thisCounterpart = peek(p); if ((thisCounterpart !== osb[p]) && (typeof thisCounterpart === "function")) { prev[p] = pjs[p] = orig[p] = thisCounterpart; } } } / Make sure that all "state" symbols are also included. / for (var i = 0; i < state.length; i++) { var sym = state[i]; if (! orig[sym]) { pjs[sym] = orig[sym] = peek(sym); } } }; assignmentCandidates(); / * Load the global state from ctx. Then invoke userFunc and callBack. * Then restore the global state. Boolean ignoreState lets us ignore * costly state saving and restoration. * * (This function is mutually recursive with a caller.) / pjsContext.invoke = function(ctx, userFunc, callBack, ignoreState) { if (userFunc) { var invocationResults, saved, symbol, i, l; var gbl = global, prevCtx = stack[stack.length - 1]; stack[stack.length] = ctx; / push / / save the currect state. / if (! ignoreState) { saved = {}; for (l = state.length, i = 0; i < l; i++) { symbol = state[i]; saved[symbol] = gbl[symbol]; } } / Smash ctx into Processing.js state / for (symbol in orig) { gbl[symbol] = ctx[symbol]; } / Invoke the function! / invocationResults = userFunc(); / Load volatile values back into ctx's state / for (l = volatile.length, i = 0; i < l; i++) { symbol = volatile[i]; ctx[symbol] = gbl[symbol]; } / Do the call back / if (callBack) { callBack(); } / Restore the state. / if (! ignoreState) { / From the previous stack entry / for (symbol in prev) { gbl[symbol] = prevCtx[symbol]; } / From what we saved / for (symbol in saved) { gbl[symbol] = saved[symbol]; } } stack.length--; / pop / return invocationResults; } }; / Return the current "real" Processing.js context. / pjsContext.pjs = function() { return pjs; }; / Resets on Restart. The object is an ancestor. / pjsContext.reset = function() { for (var symbol in orig) { global[symbol] = orig[symbol]; } }; global[bs] = pjsContext; / Remember this for Restart! / return pjsContext; })(); /* * Constructor function for a Screen. The constructor takes one * argument, a configuration object, e.g. * * var myScreen = new Screen( {} ); * * The single argument may also be the "main" function of * the screen, e.g. * * var myScreen = new Screen(main); * * The config properties and their default values are as follow: * * main: null, // main will be called ONCE immediately after construction * width: 400, // the original KA default * height: 400, // the original KA default * x: 0, // X coordinate of rendered screen * y: 0, // Y coordinate of rendered screen * renderW: 192, // rendered width * renderH: 192, // rendered height * managed: true, // place the constructed object in management array * * Pass a config object to the "reconfig" method whenever you to (re)set * any of your screen properties. / var Screen = DeKhan.loopDetect(function() { var pjs = pjsContext.pjs(); var mouseInside; / The constructor function that is returned. / var Screen = function(config) { if (typeof config === "function") { config = { main: config }; } config = config \|\| {}; this.main = DeKhan.loopDetect(config.main); this.x = this.y = 0; this.renderW = this.renderH = 192; var wid = (config.width > 3) ? (config.width \| 0) : 400; var hgt = (config.height > 3) ? (config.height \| 0) : 400; var osb = this.osb = createGraphics(wid, hgt, JAVA2D); osb.background(255); osb.angleMode = angleMode; osb.loop = this.wrap(Screen.loop); osb.noLoop = this.wrap(Screen.noLoop); osb.redraw = this.wrap(Screen.redraw); osb.frameRate = this.wrap(Screen.frameRate); osb.cursor = this.wrap(Screen.cursor); this.redrawInterval = 1000 / 60; / milliseconds / Screen.screens.push(this); this.reconfig(config); this.startMain(); }; Screen.screens = []; / managed screens / / Change this configuration. / Screen.prototype.reconfig = function(config) { this.x = (typeof config.x === "number") ? config.x : this.x; this.y = (typeof config.y === "number") ? config.y : this.y; this.renderW = (config.renderW > 0) ? (config.renderW \| 0) : this.renderW; this.renderH = (config.renderH > 0) ? (config.renderH \| 0) : this.renderH; var i = Screen.screens.indexOf(this); if ((config.managed === true) && (i < 0)) { Screen.screens.push(this); } else if ((config.managed === false) && (i >= 0)) { Screen.screens.splice(i, 1); / snip / } this.redrawTime = 0; }; / Call the user's main to (Re)start his app. / Screen.prototype.startMain = function() { var dis = this; dis.redrawTime = dis.osb.frameCount = 0; dis.osb.cursor(ARROW); dis.osb.focused = false; if (typeof dis.main === "function") { var main = function() { dis.main(dis); }; try { pjsContext.invoke(dis.osb, main); } catch(err) { println(err); } } }; / * Return the Processing.js environment * associated with this screen. / Screen.prototype.pjs = function() { return this.osb; }; / * Iff the mouse is in this screen, convert the * canvas mouse coordinates to the corresponding * screen coordinates. Returns true iff action * was taken. / Screen.prototype.canvasToScreenMouse = function() { var x = mouseX, y = mouseY; var lastX = this.x + this.renderW, lastY = this.y + this.renderH; var inside = ((x >= this.x) && (y >= this.y) && (x < lastX) && (y < lastY)); if (inside) { this.osb.pmouseX = this.osb.mouseX; this.osb.pmouseY = this.osb.mouseY; this.osb.mouseX = map(x, this.x, lastX, 0, this.osb.width) \| 0; this.osb.mouseY = map(y, this.y, lastY, 0, this.osb.height) \| 0; } return inside; }; / Render this screen. / Screen.prototype.render = function() { imageMode(CORNER); image(this.osb, this.x, this.y, this.renderW, this.renderH); }; / * Put this in a new location within the management array. * If newIdx<0, this is removed from the array. / Screen.prototype.relocate = function(newIdx, these) { var i, s = these \|\| Screen.screens, li = s.length-1; if (newIdx >= li && s[li] === this) { return; / Common, noop case / } else if ((i = s.indexOf(this)) >= 0) { s.splice(i, 1); / snip / if (newIdx < 0) { if (this === Screen.keyFocus) { Screen.keyFocus = null; } if (this === Screen.mouseFocus) { Screen.mouseFocus = null; } } else { newIdx = min(newIdx, li); s.splice(newIdx, 0, this); / insert / } } }; / Wrap a static function into a method of this. / Screen.prototype.wrap = function(func) { var screen = this; return function() { return func.apply(screen, arguments); }; }; / A redraw function for a screen's osb. Should be method... / Screen.redraw = function() { this.osb.focused = this.osb.focused && focused; pjsContext.invoke(this.osb, this.osb.draw); }; / A noLoop function for a screen's osb. Should be method... / Screen.noLoop = function() { this.redrawTime = Infinity; }; / A loop function for a screen's osb. Should be method... / Screen.loop = function() { this.redrawTime = 0; }; / A frameRate function for a screen's osb. Should be method... / Screen.frameRate = function(rate) { if (rate >= 0) { this.redrawInterval = (rate === 0) ? 0 : (1 + 1000 / rate) \| 0; this.redrawTime = millis(); } }; / A cursor function for a screen's osb. Should be method... / Screen.cursor = function() { this.cursorArgs = Array.prototype.slice.call(arguments); if (this === mouseInside) { / change it now (without switching contexts?) / pjs.cursor.apply(null, this.cursorArgs); } }; / * Update all the managed screens by ivoking the users' * "draw" functions. Tail-recursive loop avoids restoring * and resaving our state between invocations of each of * the user's "draw" functions. / Screen.update = function(these) { var isFocused = focused; var screen, s = these \|\| Screen.screens; var len = s.length, i = 0, now = millis(); var doNext = function() { var ongoing = !! screen; while (i < len) { screen = s[i++]; var osb = screen.osb; if (osb.draw && now >= screen.redrawTime) { screen.redrawTime = now + screen.redrawInterval; osb.frameCount++; osb.focused = osb.focused && isFocused; return pjsContext.invoke(osb, osb.draw, s[i] && doNext, ongoing); } } }; doNext(); }; / Render all the managed screens. / Screen.render = function(these) { var s = these \|\| Screen.screens; background(0, 0, 0, 0); / transparent white! / for (var i = 0, len = s.length; i < len; i++) { s[i].render(); } }; / Find and return which screen the mouse is over. / Screen.mouseLocation = function(these) { var s = these \|\| Screen.screens; for (var i = s.length; --i >= 0; ) { mouseInside = s[i]; if (mouseInside.canvasToScreenMouse()) { return mouseInside; } } mouseInside = null; }; / Called by Processing.js when the mouse is pressed. / Screen.mousePressed = function(these) { var over = Screen.mouseLocation(these); if (over) { over.mouseIsPressed = over.osb.mouseIsPressed = true; over.osb.mouseButton = mouseButton; Screen.mouseFocus = over; over.osb.focused = over.osb.focused && focused; pjsContext.invoke(over.osb, over.osb.mousePressed); } }; / Called by Processing.js when the mouse is released. / Screen.mouseReleased = function(these) { var over = Screen.mouseLocation(these); if (over && over.mouseIsPressed) { over.osb.focused = over.osb.focused && focused; pjsContext.invoke(over.osb, over.osb.mouseReleased); over.mouseIsPressed = over.osb.mouseIsPressed = false; } }; / Called by Processing.js when the mouse was clicked. / Screen.mouseClicked = function(these) { var over = Screen.mouseLocation(these); if (Screen.keyFocus !== over && Screen.keyFocus) { Screen.keyFocus.osb.keyIsPressed = false; Screen.keyFocus.osb.focused = false; Screen.keyFocus = null; } if (over) { Screen.keyFocus = Screen.mouseFocus = over; over.osb.focused = true; pjsContext.invoke(over.osb, over.osb.mouseClicked); } }; / Handle the intricacies of the mouse over this screen / Screen.prototype.mouseOver = function() { cursor.apply(null, this.cursorArgs); this.osb.focused = this.osb.focused && focused; pjsContext.invoke(this.osb, this.osb.mouseOver); }; / Called by Processing.js when the mouse enters the canvas. / Screen.mouseOver = function(these) { var f = Screen.mouseFocus = Screen.mouseLocation(these); if (f) { f.mouseOver(); } else { cursor(ARROW); } }; / Called by Processing.js when the mouse leaves the canvas. / Screen.mouseOut = function() { if (Screen.mouseFocus) { Screen.mouseFocus.osb.focused = Screen.mouseFocus.osb.focused && focused; pjsContext.invoke(Screen.mouseFocus.osb, Screen.mouseFocus.osb.mouseOut); Screen.mouseFocus = null; } }; / Called by Processing.js when the mouse has moved (or dragged). / Screen.mouseMoved = Screen.mouseDragged = function(these) { var mouseWasInside = mouseInside; var over = Screen.mouseLocation(these); if (over !== Screen.mouseFocus) { / Transitioned from one screen to another / if (Screen.mouseFocus) { Screen.mouseFocus.osb.focused = Screen.mouseFocus.osb.focused && focused; pjsContext.invoke(Screen.mouseFocus.osb, Screen.mouseFocus.osb.mouseOut); Screen.mouseFocus = null; } if (over) { over.mouseOver(); Screen.mouseFocus = over; } else if (mouseWasInside) { cursor(ARROW); } } else if (over) { / Moving over a single screen / over.osb.focused = over.osb.focused && focused; if (over.mouseIsPressed) { pjsContext.invoke(over.osb, over.osb.mouseDragged); } else { pjsContext.invoke(over.osb, over.osb.mouseMoved); } } }; / Called by Processing.js when the mouse wheel was scrolled. / Screen.mouseScrolled = function(these) { var over = Screen.mouseLocation(these); if (over) { over.osb.mouseScroll = mouseScroll; over.osb.focused = over.osb.focused && focused; pjsContext.invoke(over.osb, over.osb.mouseScrolled); } }; / * All three Processing.js keyboard events are handled * in (almost) the same manner. They are are passed through * to the screen that currently has the keyboard focus. / var getKeyHandler = function(name, postIsPressed) { return function() { if (Screen.keyFocus) { var osb = Screen.keyFocus.osb; osb.keyIsPressed = keyIsPressed; pjsContext.invoke(osb, osb[name]); osb.keyIsPressed = postIsPressed && osb.keyIsPressed; } }; }; Screen.keyPressed = getKeyHandler("keyPressed", true); Screen.keyReleased = getKeyHandler("keyReleased", false); Screen.keyTyped = getKeyHandler("keyTyped", true); / * Called by Processing.js numerous times per second. It * in turn causes each screen to be updated and rendered. / Screen.draw = function() { Screen.update(); Screen.render(); }; / * Called once to set the Processing.js functions to the * corresponding Screen management functions. / Screen.run = function() { draw = Screen.draw; keyPressed = Screen.keyPressed; keyReleased = Screen.keyReleased; keyTyped = Screen.keyTyped; mousePressed = Screen.mousePressed; mouseReleased = Screen.mouseReleased; mouseClicked = Screen.mouseClicked; mouseOver = Screen.mouseOver; mouseOut = Screen.mouseOut; mouseMoved = Screen.mouseMoved; mouseDragged = Screen.mouseDragged; mouseScrolled = Screen.mouseScrolled; }; return Screen; })(); / * Constructor for 2D rendering matrix which inherits from * the Processing.js rendering matrices, PMatrix2D. The * only documentation for PMatrix2D is the code found at * https://raw.github.com/processing-js/processing-js/v1.4.8/processing.js / var RMatrix2D = (function() { var isArray = Array.isArray; var aTan2 = atan2; var abs = Math.abs; var sqrt = Math.sqrt; var orthogEpsilon = 1/1024/16; var epsilon = 1/1024/1024/1024; / Constructor function. Objects inherit everything from PMatrix2D / function RMatrix2D() { PMatrix2D.apply(this, arguments); this.mops = Object.new(); this.eigenVector1 = PVector.new(); this.eigenVector2 = PVector.new(); } / * Inherited PMatrix2D properties include: * elements: a six element array of numbers * set: function takes another PMatrix2D, an array, or six numbers * get: function replaced by RMatrix2D.prototype.get * reset: function sets this to the identity matrix * translate: function * determinant: function * invert: inverts the matrix in place; returns a success boolean * scale: function * apply: function this = this * argument(s); matrix multiplication * preApply: function this = argument(s) * this; matrix multiplication * mult: function(source, target) arguments are PVectors or arrays * rotate: function * print: function like printMatrix * Others that are avoided are: * array: function returns a new array of this.elements * multX: function, computes only the X tansformation of a point * multY: function, computes only the Y tansformation of a point * skewX: function * skewY: function * shearX: function(angle) * shearY: function(angle) * transpose: function, does nothing! * rotateZ: invokes rotate * invRotateZ: function() undo rotateZ * invTranslate: function undo translate * invScale: function undo scale / RMatrix2D.prototype = Object.create(PMatrix2D.prototype); RMatrix2D.prototype.resetMatrix = PMatrix2D.prototype.reset; / alias / RMatrix2D.prototype.printMatrix = PMatrix2D.prototype.print; / alias / RMatrix2D.prototype.transform = PMatrix2D.prototype.mult; / alias / / Return a clone of this. / function get() { return RMatrix2D.new(this); } RMatrix2D.prototype.get = get; / Set the values of this RMatix2D. Avoids KA leaks and loop detector. / function setMatrix(src) { var S; if (src instanceof PMatrix2D) { S = src.elements; } else if (arguments.length === 6) { S = arguments; } else if (isArray(src)) { S = src; } else { throw "RMatrix2D.prototype.set: invalid arguments!"; } var E = this.elements = this.elements \|\| []; E.length = 0; E.push(S[0], S[1], S[2], S[3], S[4], S[5]); } RMatrix2D.prototype.set = setMatrix; / Provide the same functionality as pushMatrix() as a method. / function push() { this.stack = this.stack \|\| []; / NB: Array.new() does not work / this.stack.push(this.get()); } RMatrix2D.prototype.push = RMatrix2D.prototype.pushMatrix = push; / Provide the same functionality as popMatrix() as a method. / function pop() { var stack = this.stack; if (stack && stack.length > 0) { this.set(stack.pop()); } } RMatrix2D.prototype.pop = RMatrix2D.prototype.popMatrix = pop; / * Return the inverse of this matrix. Caller provides * a target results matrix or is provided a STATIC * property of this matrix. / function inverse(results) { var E = this.elements, e0 = E[0], e1 = E[1], e2 = E[2], e3 = E[3], e4 = E[4], e5 = E[5]; var d = this.determinant(); if (abs(d) < epsilon) { throw "No matrix inverse possible!"; } d = 1 / d; results = results \|\| (this.inverted = this.inverted \|\| RMatrix2D.new()); results.elements.length = 0; results.elements.push( e4 d, e1 * -d, (e1 * e5 - e4 * e2) * d, e3 * -d, e0 * d, (e3 * e2 - e0 * e5) * d ); return results; } RMatrix2D.prototype.inverse = inverse; /* * Compute this 2×2 matrix's eigenvalues and UNIT eigenvectors. See * http://www.math.harvard.edu/archive/21b_fall_04/exhibits/2dmatrices/index.html * for formulas. / function eigen() { var ev1 = this.eigenVector1; var ev2 = this.eigenVector2; var E = this.elements, e0 = E[0], e1 = E[1], e3 = E[3], e4 = E[4]; var halfTrace = (e0 + e4) / 2; var discrim = halfTrace halfTrace - this.determinant(); discrim = (discrim < epsilon) ? 0 : sqrt(discrim); var lamda1 = this.lamda1 = halfTrace + discrim; var lamda2 = this.lamda2 = halfTrace - discrim; if (abs(e3) > epsilon) { ev1.set(lamda1 - e4, e3, 0); ev2.set(lamda2 - e4, e3, 0); } else if (abs(e1) > epsilon) { ev1.set(e1, lamda1 - e0, 0); ev2.set(e1, lamda2 - e0, 0); } else if (abs(e0 - lamda1) < epsilon) { ev1.set(1, 0, 0); ev2.set(0, 1, 0); return; } else { ev2.set(1, 0, 0); ev1.set(0, 1, 0); return; } ev1.normalize(); ev2.normalize(); } RMatrix2D.prototype.eigen = eigen; var myV = RMatrix2D.new(); var myP = RMatrix2D.new(); /* * Find the Singular Value Decomposition of this. Parameters * are all required RMatrix2D output targets. So this = U×S×VT. * Returns true on success. See section 8.1 of * https://datajobs.com/data-science-repo/SVD-Tutorial-[Kirk-Baker].pdf / function svd(U, S, VT) { / Degenerate matrices (collinear vectors) are a big fail. / if (abs(this.determinant()) < epsilon) { return false; } var E = this.elements, a = E[0], b = E[1], c = E[3], d = E[4]; / Special (simple) case for orthogonal vectors. / if (abs(ab + cd) < orthogEpsilon) { var magX = sqrt(aa + cc); var magY = sqrt(bb + dd); U.set( a/magX, b/magY, 0, c/magX, d/magY, 0 ); S.set( magX, 0, 0, 0, magY, 0); VT.resetMatrix(); / VT = Identity matrix / return true; } / U is derived from the eigenvector of EE' / myP.set(a, c, 0, b, d, 0); / sets myP = E' / myP.preApply(this); myP.eigen(); var u1 = myP.eigenVector1, u2 = myP.eigenVector2; U.set(u1.x, u2.x, 0, u1.y, u2.y, 0); / S diag is 1/sqrt of the eigenvalues / S.set(sqrt(myP.lamda1), 0, 0, 0, sqrt(myP.lamda2), 0); / * V = [v1, v2] where the column vectors * v1 = (1/sqrt(lamda1))·E'·u1 and * v2 = (1/sqrt(lamda2))·E'·u2. / var V = myV; myP.set(a, c, 0, b, d, 0); / myP = E' / myP.transform(u1, u1); u1.div(S.elements[0]); myP.transform(u2, u2); u2.div(S.elements[4]); V.set(u1.x, u2.x, 0, u1.y, u2.y, 0); / * Multiply U and V by minusOne if U does not appear to be a * valid rotation matrix. minusOne × minusOne === Identity, so * U×S×V remains the same. minusOne = [ -1, 0, 0, 0, 1, 0 ]. This * is the same as negating each X column vector of the two matrices. / U = U.elements; V = V.elements; if (U[0] U[4] <= 0) { U[0] = -1; U[3] = -1; V[0] = -1; V[3] = -1; } VT.set(V[0], V[3], 0, V[1], V[4], 0); /* VT = V' / return true; } RMatrix2D.prototype.svd = svd; var myU = RMatrix2D.new(); var myS = RMatrix2D.new(); var myVT = RMatrix2D.new(); var rotReflect = RMatrix2D.new(); var tuY = PVector.new(); / * This method provides the arguments to translate, * rotate, and scale that can reconstruct a rendering * matrix. Results parameter is returned. If no results * parameter is given then a STATIC object is returned. * Will return null on failure. See applyMopsToPJS() * for HOW to apply the transformations. / function reconstitute(results) { var atan2 = aTan2; var matrix = this; var mops = results \|\| matrix.mops; var E = matrix.elements; mops.tx = E[2]; mops.ty = E[5]; if (matrix.determinant() < 0) { / * A negative determinant means that the Y axis * is a negative angle from X axis in a universe * where the Y axis must be a positive angle from X axis. * So, find the SVD of a similar "positive" matrix whose * X column vector is collinear with the X axis, and * whose Y column vector is reflected by the X axis. / var a = E[0], b = E[1], c = E[3], d = E[4]; tuY.set(b, d, 0); mops.rot0 = atan2(c, a); / rotation FROM X axis / tuY.rotate(-mops.rot0); / normalize tuX & tuV back TO X axis. / rotReflect.set(sqrt(aa + cc), tuY.x, 0, 0, -tuY.y, 0); matrix = rotReflect; mops.initSy = -1; / reconcile reflection, -tuY.y / } else { mops.rot0 = 0; / no rotation / mops.initSy = 1; / no reflection / } / Now, factor matrix into three matrices... / if (! matrix.svd(myU, myS, myVT)) { return null; } / * Since matrix = U×S×VT, compute arguments to rotate and * scale that can reconstruct matrix. Do the first rotate... / mops.rot1 = atan2(myU.elements[3], myU.elements[0]); / Then do a scale. / mops.sx = myS.elements[0]; mops.sy = myS.elements[4]; / Finally do another rotate. / mops.rot2 = atan2(myVT.elements[3], myVT.elements[0]); return mops; } RMatrix2D.prototype.reconstitute = reconstitute; / * Static function applies the results of the reconstitute() * method to THE Processing.js rendering matrix. The only * way to do that is via a series of tranformation calls. * Returns true if mops. / function applyMopsToPJS(mops) { if (mops) { void((mops.tx \|\| mops.ty) && translate(mops.tx, mops.ty)); void(mops.rot0 && rotate(mops.rot0)); void((mops.initSy !== 1) && scale(1, mops.initSy)); void(mops.rot1 && rotate(mops.rot1)); void((mops.sx !== 1 \|\| mops.sy !== 1) && scale(mops.sx, mops.sy)); void(mops.rot2 && rotate(mops.rot2)); return true; } } RMatrix2D.applyMopsToPJS = applyMopsToPJS; / * Apply this RMatrix2D to THE Processing.js rendering matrix. * Returns true iff successful. / function applyMopsToPJS() { return RMatrix2D.applyMopsToPJS(this.reconstitute()); } RMatrix2D.prototype.applyMopsToPJS = applyMopsToPJS; / * (The Holy Grail.) * Static function applies the RMatrix2D rm to THE * Processing.js rendering matrix. If you want to SET * the Processing.js matrix, then invoke resetMatrix() * prior to invoking this function. Returns true iff * successful. / function applyMatrix(/ rm /) { var rm = arguments[0]; / KA silliness / return rm.applyMopsToPJS(); } RMatrix2D.applyMatrix = applyMatrix; / * Static function that converts the string * produced by Processing.js printMatrix to a * RMatrix2D object. KA printMatrix() outputs * six numbers on two lines that look like * a b c * d e f * You should pass ONE string that looks like * a b c d e f * where the numbers are separated by blanks. * Optional parameter results is where the result * are placed and returned. It must be a RMatrix2. * If none is provided then a new one is created. / function string2RMatrix(s, results) { try { / more KA silliness / results = results \|\| RMatrix2D.new(); var token = s.split(" "); var num = results.elements; for (var n = 0, i = 0; (n < 6) && (i < token.length); i++) { var f = parseFloat(token[i]); if (f > f - 1) { / f is really a (useful) number / num[n++] = f; } } if (n !== 6) { println("Expected six, but got " + n + " numbers!"); } return results; } catch(err) {} } RMatrix2D.string2RMatrix = string2RMatrix; / Names of extremely interesting Processing.js functions. / RMatrix2D.transforms = [ "translate", "scale", "rotate", "pushMatrix", "popMatrix", "resetMatrix" ]; / * This static function returns a RMatrix2D that * reflects the transformation operations performed * on the Processiong.js transformation functions. * Sane people will most likely invoke this after a * resetMatrix(). * The Interpose parameter is the Interpose library that * knows how to capture calls to Processing.js. Get that * library at * https://www.khanacademy.org/cs/i/5992045511049216 / function mirrorPJS(Interpose) { var mirror = RMatrix2D.new(); / * This interpose-function invokes the equivalent * method in the RMatrix2D object "mirror" that * reflects the Processing.js rendering matrix. / function mirrorMatrixOp() { var mirroredFunction = mirror[this.name]; if (mirroredFunction && mirroredFunction.apply) { / * This should ALWAYS be the case, but life with the * KA live-editor and resetMatrix is really tough. / mirroredFunction.apply(mirror, arguments); } } / Interpose plumbing... / RMatrix2D.transforms.forEach( function(val) { Interpose.push(val, mirrorMatrixOp); }); / Undo method. The method itself disappears... / function breakMirror() { RMatrix2D.transforms.forEach( function(val) { Interpose.pop(val); }); delete mirror.breakMirror; } mirror.breakMirror = breakMirror; return mirror; } RMatrix2D.mirrorPJS = mirrorPJS; return RMatrix2D; // last edited 2022.03.02 })(); / RMatrix2D is a constructor copied from www.khanacademy.org/cs/mr/3793059675 / / * A better(?) screen manager. Invoke ScreenMgr() rather than * Screen.run(). * * This puts six screens on the faces of a rotatable die. / var cubeScreenMgr = DeKhan.loopDetect(function() { var controlKey = CONTROL; var ctrl; / true iff when the controlKey is held down / var zoom; / screen being currently full sized / var sideLen = min(width, height); var maxLen = round(350/400 sideLen); sideLen = round(0.55sideLen); var halfLen = sideLen / 2; var tX = width/2; var tY = height/2; var deepestZ, visibleScreens, mouseRotate; var node0 = new PVector(-halfLen, -halfLen, -halfLen); var node1 = new PVector(-halfLen, -halfLen, halfLen); var node2 = new PVector(-halfLen, halfLen, -halfLen); var node3 = new PVector(-halfLen, halfLen, halfLen); var node4 = new PVector(+halfLen, -halfLen, -halfLen); var node5 = new PVector(+halfLen, -halfLen, halfLen); var node6 = new PVector(+halfLen, halfLen, -halfLen); var node7 = new PVector(+halfLen, halfLen, halfLen); var nodes = [node0, node1, node2, node3, node4, node5, node6, node7]; var faces = []; faces.push({ nodes: [node1, node5, node7, node3] }); faces.push({ nodes: [node5, node4, node6, node7] }); faces.push({ nodes: [node0, node4, node5, node1] }); faces.push({ nodes: [node3, node7, node6, node2] }); faces.push({ nodes: [node0, node1, node3, node2] }); faces.push({ nodes: [node4, node0, node2, node6] }); var tau = (cos(PI) < 0) ? TWO_PI : 360; var epsilon = tau / 720; var rightAngle = tau/4; / Draw one face of the die... / var render = function() { pushMatrix(); RMatrix2D.applyMopsToPJS(this.face.renderMatrix.mOps); image(this.osb, 0, 0, sideLen, sideLen); popMatrix(); / Black face edges / for (var n = this.face.nodes, j = n.length-1, i = 0; i < n.length; j = i, i++) { line(n[j].x, n[j].y, n[i].x, n[i].y); } }; / * Return true iff the mouse is in this screen; * if so and if not noSet then also set new values * for this mouseX and mouseY. / var canvasToScreenMouse = function() { var mx, my, osb = this.osb; if (this === zoom) { var lastX = this.x + this.renderW; var lastY = this.y + this.renderH; mx = map(mouseX, this.x, lastX, 0, osb.width); my = map(mouseY, this.y, lastY, 0, osb.height); } else { var mouse = new PVector(mouseX - tX, mouseY - tY, 0); var inv = this.face.renderMatrix.inverse(); inv.transform(mouse, mouse); mx = map(mouse.x, 0, sideLen, 0, osb.width); my = map(mouse.y, 0, sideLen, 0, osb.height); } var inside = (mx < osb.width && my < osb.height && my >= 0 && mx >= 0); if (inside) { osb.pmouseX = osb.mouseX; osb.pmouseY = osb.mouseY; osb.mouseX = mx \| 0; osb.mouseY = my \| 0; } return inside; }; / * Copy screens from the src array to the dest array * iff they have z coordinates NOT near to the minimum * z value. (Those screens are not visible.) * * If a face is copied, precompute its rendering info. / var getVisibleFaces = function(src, dest) { for (var i = 0; i < src.length; i++) { var face = src[i].face, n = face.nodes; for (var j = 0, copy = true; copy && j < n.length; copy = (abs(n[j].z - deepestZ) > 3), j++) { / nada / } if (copy) { dest.push(src[i]); / copy that! / var ox = n[0].x, oy = n[0].y, rm = face.renderMatrix, mOps = rm.mOps \|\| {}; rm.set((n[1].x - ox) / sideLen, (n[3].x - ox) / sideLen, ox, (n[1].y - oy) / sideLen, (n[3].y - oy) / sideLen, oy); rm.mOps = mOps = rm.reconstitute(mOps); } } }; / * Rotate shape around a major axis, affecting * the specified X and Y properties. Returns the * minimum Z value of the nodes. / var rotate3D = function(theta, xProp, yProp) { var sinTheta = sin(theta); var cosTheta = cos(theta); for (var minZ = Infinity, n = 0; n < nodes.length; n++) { var node = nodes[n]; var x = node[xProp]; var y = node[yProp]; node[xProp] = x cosTheta - y * sinTheta; node[yProp] = y * cosTheta + x * sinTheta; minZ = min(minZ, node.z); } visibleScreens.length = 0; return minZ; }; /* Rotate shape around the z-axis & find minimum z value. / var rotateZ3D = function(theta) { return rotate3D(theta, "x", "y"); }; / Rotate shape around the y-axis & find minimum z value. / var rotateY3D = function(theta) { return rotate3D(theta, "z", "x"); }; / Rotate shape around the x-axis & find minimum z value. / var rotateX3D = function(theta) { return rotate3D(theta, "y", "z"); }; / Change the size of the cube. / var resize = function(delta) { var oldLen = sideLen; sideLen = constrain(sideLen + delta, 50, maxLen); var scale = sideLen / oldLen; var minZ = Infinity; for (var n = 0; n < nodes.length; n++) { var node = nodes[n]; node.mult(scale); minZ = min(minZ, node.z); } visibleScreens.length = 0; return minZ; }; var smMouseClicked = function() { if (mouseRotate) { mouseRotate = false; return; } var cs = Screen.mouseLocation(visibleScreens); if (! cs) { / Clicked on no screen, so enable rotation / mouseRotate = true; } else if (ctrl) { if (mouseButton === CENTER) { / Restart the screen. / cs.startMain(); } else if (cs === zoom) { zoom = null; } else { var scl = min(width / cs.renderW, height / cs.renderH); cs.renderW = ceil(scl cs.renderW); cs.renderH = ceil(scl * cs.renderH); cs.x = cs.y = 0; cs.relocate(Infinity, visibleScreens); /* on top / zoom = cs; } } else { Screen.mouseClicked([cs]); } }; var smMouseMoved = function() { if (mouseRotate) { rotateY3D(mouseX - pmouseX); deepestZ = rotateX3D(pmouseY - mouseY); } else { Screen.mouseMoved(visibleScreens); } }; var smKeyPressed = function() { if (keyCode === controlKey) { ctrl = true; } else if (mouseRotate && keyCode === LEFT) { deepestZ = rotateZ3D(-2); } else if (mouseRotate && keyCode === RIGHT) { deepestZ = rotateZ3D(+2); } else if (mouseRotate && keyCode === UP) { deepestZ = resize(+1); } else if (mouseRotate && keyCode === DOWN) { deepestZ = resize(-1); } else { Screen.keyPressed(); } }; var smKeyReleased = function() { if (keyCode === controlKey) { ctrl = false; } else { Screen.keyReleased(); } }; var smDraw = function() { Screen.update(); if (zoom) { / Full screen / background(0, 0, 0, 0); image(zoom.osb, 0, 0, zoom.renderW, zoom.renderH); } else { pushMatrix(); translate(tX, tY); // Draw the visible faces if (visibleScreens.length === 0) { getVisibleFaces(Screen.screens, visibleScreens); } Screen.render(visibleScreens); popMatrix(); } }; / Pass through the other uninteresting functions. / var smOther = function(other) { return function() { if (! mouseRotate) { other(visibleScreens); } }; }; / * Called once to initialize and to set the Processing.js * functions to the corresponding screenMgr functions. / var run = function() { Screen.run(); Screen.prototype.render = render; Screen.prototype.canvasToScreenMouse = canvasToScreenMouse; keyPressed = smKeyPressed; keyReleased = smKeyReleased; keyTyped = smOther(keyTyped); mousePressed = smOther(mousePressed); mouseReleased = smOther(mouseReleased); mouseClicked = smMouseClicked; mouseDragged = smOther(mouseDragged); mouseMoved = smMouseMoved; mouseOver = smOther(mouseOver); mouseOut = smOther(mouseOut); mouseScrolled = smOther(mouseScrolled); draw = smDraw; / Connect die faces to screens... / while (Screen.screens.length > 6) { Screen.screens.shift(); / dumped! / } for (var s = 0, len = min(6, Screen.screens.length); s < len; s++) { var screen = Screen.screens[s]; var face = faces[s]; face.screen = screen; screen.face = face; face.renderMatrix = new RMatrix2D(); } ctrl = false; visibleScreens = []; rotateX3D(tau/12); rotateY3D(tau/12); deepestZ = rotateZ3D(-tau/8); }; return run; })(); /* * * * * * * * * * Various screen demos * * * * * * * * * / / * Closure for an animated car ported from & inspired by * https://www.khanacademy.org/computing/computer-programming/programming/animation-basics/p/making-animations / var introToAnimation = function() { textSize(24); noStroke(); // position of the car var x = 10; var y = 200; draw = function() { // all lines of code inside here will be run repeatedly background(131, 234, 237); text("Press UP or DOWN arrow...", 60, 350); // draw the car body fill(255, 0, 115); rect(x, y, 100, 20); rect(x + 15, y-22, 70, 40); // draw the wheels fill(77, 66, 66); ellipse(x + 25, y+21, 24, 24); ellipse(x + 75, y+21, 24, 24); x = (x + 3) % width; }; keyPressed = function() { if (keyCode === UP) { y = (y - 3 + height) % height; } else if (keyCode === DOWN) { y = (y + 3) % height; } }; mouseScrolled = function() { y = constrain(y + mouseScroll, 0, height); }; }; new Screen(introToAnimation); / * Closure for a rain storm ported from & inspired by * www.khanacademy.org/computing/computer-programming/programming/arrays/p/project-make-it-rain / var makeItRain = function() { textSize(24); var img = [ getImage("avatars/orange-juice-squid"), getImage("avatars/old-spice-man"), getImage("avatars/mr-pink") ]; var xPositions = [200]; var yPositions = [0]; draw = function() { background(72, 247, 127); text("Click for more rain.", 99, 350); for (var i = 0; i < xPositions.length; i++) { image(img[i % img.length], xPositions[i], yPositions[i], 30, 30); yPositions[i] += 5; if (yPositions[i] > height) { yPositions[i] = -20; } } }; mouseClicked = function() { xPositions.push(mouseX); yPositions.push(mouseY); }; }; new Screen(makeItRain); / Copied from https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/memory-game/a/playing-the-game / var memoryGame = function() { var Tile = function(x, y, face) { this.x = x; this.y = y; this.face = face; this.width = 70; }; Tile.prototype.drawFaceDown = function() { fill(214, 247, 202); strokeWeight(2); rect(this.x, this.y, this.width, this.width, 10); image(getImage("avatars/leaf-green"), this.x, this.y, this.width, this.width); this.isFaceUp = false; }; Tile.prototype.drawFaceUp = function() { fill(214, 247, 202); strokeWeight(2); rect(this.x, this.y, this.width, this.width, 10); image(this.face, this.x, this.y, this.width, this.width); this.isFaceUp = true; }; Tile.prototype.isUnderMouse = function(x, y) { return x >= this.x && x <= this.x + this.width && y >= this.y && y <= this.y + this.width; }; // Global config var NUM_COLS = 5; var NUM_ROWS = 4; // Declare an array of all possible faces var faces = [ getImage("avatars/piceratops-seed"), getImage("avatars/leafers-seedling"), getImage("avatars/piceratops-ultimate"), getImage("avatars/leafers-tree"), getImage("creatures/Winston"), getImage("avatars/marcimus"), getImage("avatars/mr-pants"), getImage("avatars/mr-pink"), getImage("avatars/old-spice-man"), getImage("avatars/robot_female_1") ]; // Make an array which has 2 of each, then randomize it var possibleFaces = faces.slice(0); var selected = []; for (var i = 0; i < (NUM_COLS NUM_ROWS) / 2; i++) { // Randomly pick one from the array of remaining faces var randomInd = floor(random(possibleFaces.length)); var face = possibleFaces[randomInd]; // Push twice onto array selected.push(face); selected.push(face); // Remove from array possibleFaces.splice(randomInd, 1); } // Now we need to randomize the array selected.sort(function() { return 0.5 - Math.random(); }); // Create the tiles var tiles = []; for (var i = 0; i < NUM_COLS; i++) { for (var j = 0; j < NUM_ROWS; j++) { tiles.push(new Tile(i * 78 + 10, j * 78 + 40, selected.pop())); } } background(250, 103, 228); textAlign(CENTER, CENTER); textSize(24); fill(15, 15, 200); text("Memory Game", width/2, 20); // Now draw them face up for (var i = 0; i < tiles.length; i++) { tiles[i].drawFaceDown(); } var flippedTiles = []; var delayStartFC = null; var numTries = 0; mouseClicked = function() { for (var i = 0; i < tiles.length; i++) { if (tiles[i].isUnderMouse(mouseX, mouseY)) { if (flippedTiles.length < 2 && !tiles[i].isFaceUp) { tiles[i].drawFaceUp(); flippedTiles.push(tiles[i]); if (flippedTiles.length === 2) { numTries++; if (flippedTiles[0].face === flippedTiles[1].face) { flippedTiles[0].isMatch = true; flippedTiles[1].isMatch = true; } delayStartFC = frameCount; loop(); } } } } var foundAllMatches = true; for (var i = 0; i < tiles.length; i++) { foundAllMatches = foundAllMatches && tiles[i].isMatch; } if (foundAllMatches) { textSize(20); text("You found them all in " + numTries + " tries!", width/2, 375); } }; draw = function() { if (delayStartFC && (frameCount - delayStartFC) > 30) { for (var i = 0; i < tiles.length; i++) { if (!tiles[i].isMatch) { tiles[i].drawFaceDown(); } } flippedTiles = []; delayStartFC = null; noLoop(); } }; }; new Screen(memoryGame); /* * Closure of bouncing balls ported from & inspired by * https://www.khanacademy.org/computer-programming/elastic-collisions-w-pvector/6239663899672576 / new Screen(function() { /* * Left click mouse adds another ball. * Right click mouse removes a ball. * * Demonstrates 2D elastic collisions, * but only considers two at any instance. / / * Construct a new ball of mass m at coordinates (x, y) * with velocity (dx, dy). / var Ball = function(m, x, y, dx, dy) { if (m === undefined) { m = floor(random(3, 13)); } this.mass = m; this.rad = round(m4); if (x === undefined) { x = random(this.rad, width - this.rad); y = random(this.rad, height - this.rad); } if (dx === undefined) { dx = random(-3, 4); dy = random(-4, 3); } this.pos = new PVector(x, y); this.vel = new PVector(dx, dy); }; /* Draw this ball. / Ball.prototype.draw = function() { var diam = 2 this.rad; if (this.color === undefined) { noFill(); } else { fill(this.color); } ellipse(this.pos.x, this.pos.y, diam, diam); fill(0); text(this.mass, this.pos.x, this.pos.y); }; /* Return true iff this ball collides with that ball. / Ball.prototype.collide = function(that) { var d = this.rad + that.rad, / dist between centers at impact / p = PVector.sub(this.pos, that.pos); / delta positions / return p.dot(p) <= dd; }; Ball.prototype.align = function(that) { var d = this.rad + that.rad, /* dist between centers at impact / p = PVector.sub(this.pos, that.pos), / delta positions / v = PVector.sub(this.vel, that.vel), / delta velocities / / Quadratic formula for (a)t² + (b)t + c = 0 / a = v.dot(v), / t² coefficient / b = p.dot(v) 2, /* t coefficient / c = p.dot(p) - dd, /* constant / t = (-b - sqrt(bb - 4ac)) / (2a); / the answer! / / Back them up to the touching point ... / this.pos.add(PVector.mult(this.vel, t)); that.pos.add(PVector.mult(that.vel, t)); this.t = that.t = -t; / partial time left on this iteration / }; / * Bounces that ball off of this ball. See * http://wikipedia.org/wiki/Elastic_collision / Ball.prototype.bounce = function(that) { var p = PVector.sub(this.pos, that.pos), / delta positions / v = PVector.sub(this.vel, that.vel), / delta velocities / cf = this.rad + that.rad; / common factor / cf = 2 v.dot(p) / (cfcf (this.mass + that.mass)); this.vel.sub(PVector.mult(p, cf * that.mass)); that.vel.add(PVector.mult(p, cf * this.mass)); that.pos.add(PVector.mult(that.vel, that.t)); /* resume partial journey / this.pos.add(PVector.mult(this.vel, this.t)); / resume partial journey / }; / * Delicately handle side cushion bounces and * update this ball's position. / Ball.horizontalBounce = new PVector(-1, 1); Ball.verticalBounce = new PVector(1, -1); Ball.prototype.update = function() { if ((this.pos.x <= this.rad && this.vel.x < 0) \|\| (this.pos.x >= width - 1 - this.rad && this.vel.x > 0)) { this.vel.mult(Ball.horizontalBounce); } if ((this.pos.y <= this.rad && this.vel.y < 0) \|\| (this.pos.y >= height - 1 - this.rad && this.vel.y > 0)) { this.vel.mult(Ball.verticalBounce); } this.pos.add(this.vel); }; / * Move the balls. Look for collisions * and deal with them. Draw the balls. / Ball.run = function(balls) { for (var i = 0; i < balls.length; i++) { balls[i].update(); } for (i = 0; i < balls.length - 1; i++) { var s = balls[i]; for (var j = i + 1; j < balls.length; j++) { var t = balls[j]; if (s.collide(t)) { s.align(t); s.bounce(t); } } } for (i = 0; i < balls.length; i++) { balls[i].draw(); } }; var colors = [ color(250, 40, 240), color(252, 145, 15), color(13, 179, 250), color(35, 247, 148), color(250, 23, 68), color(135, 121, 135), ]; var c = floor(random(colors.length)); var balls = []; / * Add another ball to the balls array. * The ball cannot be colliding with another. / var anotherBall = function(x, y, mass) { var i, collision; var b = new Ball(mass, x, y); for (collision = true; collision; b.pos.add(b.vel)) { for (collision = false, i = 0; (!collision) && i < balls.length; i++) { collision = b.collide(balls[i]); } } b.color = colors[c]; c = ++c % colors.length; balls.push(b); }; / Called by Processing.js numerous times per second. / draw = function() { background(250, 250, 125); Ball.run(balls); }; / Called by Processing.js when ever... / mouseClicked = function() { if (mouseButton === LEFT) { anotherBall(mouseX, mouseY); } else { balls.splice(0, 1); / snip / } }; textAlign(CENTER, CENTER); anotherBall(); anotherBall(); anotherBall(); }); / Copied from https://www.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-particle-systems/p/challenge-fish-bubbles / var fishBubbles = function() { var Particle = function(position) { this.acceleration = PVector.new(0, -0.05); this.velocity = PVector.new(random(-1, 1), random(-1, 0)); this.position = position.get(); this.timeToLive = 200; }; Particle.prototype.run = function() { this.update(); this.display(); }; Particle.prototype.update = function(){ this.velocity.add(this.acceleration); this.position.add(this.velocity); this.timeToLive -= 2; }; Particle.prototype.display = function() { stroke(255, 255, 255, 100); strokeWeight(2); fill(255, 255, 255, 50); var radius = 10; ellipse(this.position.x, this.position.y, radius, radius); }; Particle.prototype.isDead = function() { if (this.timeToLive < 0) { return true; } else { return false; } }; var ParticleSystem = function(position) { this.origin = position.get(); this.particles = []; }; ParticleSystem.prototype.addParticle = function() { this.particles.push(Particle.new(this.origin)); }; ParticleSystem.prototype.run = function() { for (var i = this.particles.length-1; i >= 0; i--) { var p = this.particles[i]; p.run(); if (p.isDead()) { //this.particles.splice(i, 1); LEAKS! / Instead, replace element i with the last element. / var lastElement = this.particles.pop(); if (i < this.particles.length) { this.particles[i] = lastElement; } } } }; var Fish = function(position) { this.position = position.get(); this.velocity = new PVector(3.5, 0); this.width = 100; this.height = 60; }; Fish.prototype.swim = function() { this.position.add(this.velocity); if (this.position.x < -this.width \|\| this.position.x > width + this.width) { this.velocity.mult(-1); } }; Fish.prototype.display = function() { noStroke(); fill(255, 191, 0); pushMatrix(); if (this.velocity.x < 0) { translate(2this.position.x, 0); scale(-1, 1); } ellipse(this.position.x, this.position.y, this.width, this.height); triangle(this.position.x-this.width/2+10, this.position.y, this.position.x-this.width0.75, this.position.y+this.height/3, this.position.x-this.width0.75, this.position.y-this.height/3); fill(255, 191, 0); triangle(this.position.x+this.width/2+10, this.position.y-this.height/12, this.position.x+this.width/2-2, this.position.y+this.height/8, this.position.x+this.width/2-2, this.position.y-this.height/8); triangle(this.position.x+this.width/2+10, this.position.y-this.height/12+18, this.position.x+this.width/2-10, this.position.y+this.height/8+10, this.position.x+this.width/2-12, this.position.y-this.height/8+10); fill(255, 255, 255); ellipse(this.position.x+this.width/2-10, this.position.y-11, 15, 20); fill(0, 0, 0); ellipse(this.position.x+this.width/2-7, this.position.y-10, 6, 6); popMatrix(); }; var mouthPos = new PVector(); /* static reusable result / Fish.prototype.getMouthPosition = function() { if (this.velocity.x > 0) { mouthPos.set(this.position.x+this.width/2+10, this.position.y); } else { mouthPos.set(this.position.x-this.width/2-10, this.position.y); } return mouthPos; }; var fish = Fish.new(PVector.new(width/2, height/2)); var bubbles = ParticleSystem.new(fish.getMouthPosition()); var keysTyped; textAlign(CENTER, CENTER); textSize(20); draw = function() { background(17, 78, 117); if (! keysTyped) { fill(255); text("Press UP or DOWN arrow key.", width/2, height - 30); } bubbles.run(); bubbles.addParticle(); bubbles.addParticle(); fish.swim(); fish.display(); bubbles.origin.set(fish.getMouthPosition()); }; keyPressed = function() { if (keyCode === UP) { fish.position.y -= 2; keysTyped = true; } else if (keyCode === DOWN) { fish.position.y += 2; keysTyped = true; } fish.position.y = constrain(fish.position.y, fish.height, height - fish.height); }; }; new Screen(fishBubbles); / Inspired by this program. / var canvasSnap = function(myScreen) { var pjs = pjsContext.pjs(); / Return a snap shot of THE Processing.js canvas / var snapCanvas = function() { return get(0, 0, width, height); }; draw = function() { var f = frameCount % 100; if (f === 0) { cursor(WAIT); } else if (f === 50) { cursor(CROSS); } background(255, 151, 21); var pjsCanvasImg = pjsContext.invoke(pjs, snapCanvas); image(pjsCanvasImg, 8, 8, width-16, height-16); }; }; new Screen({ main: canvasSnap, width: width/2, height: height/2 }); /* * * * * * * * * * End of screen demos * * * * * * * * * / / KEEP THIS AT THE END OF THE PROGRAM. / cubeScreenMgr(); / Let's light this candle! / /* How to succeed at adding a new screen: 1. In a separate KA Javascript program, write and debug your program or animation until you believe it is bug free and performs the way that you like. 2. Remaining in that program, wrap all the code into a closure function. That is as simple as inserting new first line and and two new last lines: var main = function() { }; main(); Extra credit if you properly indent all the code after wrapping it. Your program should continue to run flawlessly. 3. Remove the last line that invokes "main". 4. Remaining in that program, add code to construct your screen. (This will break your program since the functions that you invoke will not exist.) You program will look like: var main = function() { // your orignal code is here }; new Screen( {main: main} ); The creation of the Screen object also accepts: new Screen(main); The width and height of the screen defaults to 400. Those two defaults can only be overridden when the new screen is constructed, e.g. var myScreen = new Screen( { width: 800, height: 600, main: main } ); All other properties can be changed at anytime by using the screen's "reconfig" method. 5. Now, copy everything from Step 4 into this program. Paste it prior to the "End of screen demos" comment. */ // 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	34,104,120,189,195,361,388,748,750,755,756,1160,1162,1167,1168,1446,1454,1494,1501,1525,1529,1659,1666,1839
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIUCxIKU2NyYXRjaHBhZBionPngDAw
Votes	278
Spin-Offs	18
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	6 months ago, 1739287132307
Updated	6 months ago, 1739287132307
Source Deleted	unknown