Viewing Program

Program Data

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

Title	3D + perspective & shading
ID	4521460558135296
Created	7 years ago, 1516604233539
Updated	4 years ago, 1636934139654
Code	/** * Double click the mouse in the black background to select NO * shapes. When no shapes are selected, you can rotate the entire * universe of shapes by dragging the mouse around the canvas. * The LEFT (or 'a') and the RIGHT (or 'd') keys will rotate * shapes around the canvas's Z axis. * * Click the mouse on a shape. You can then rotate that selected * shape in the same manner described above. You can also rotate * it around ITS original X, Y, and Z axes by pressing the lower * (positive angle rotation) and upper (negative angle rotation) * cases of the 'x', 'y', and 'z' keys. * * The selected shape can also be resized by pressing the '-' * or '+' keys. It can be moved by dragging it to a new location. * Its Z coordinate can be changed using the UP (or 'w') for * increasing the Z coordinate and the DOWN (or 's') key for * decreasing the Z coordinate. * * The space bar ' ' will print the current coordinates of the * selected shape. The 'j' key will print the JSON description * of the selected shape or of all shapes if none are selected. * The 'c' key will clone the current shape; make sure to move * the original and the clone away from one another. The DELETE * or BACKSPACE or 'k' key will remove the selected shape from * the canvas. * * Remember to double click the black background again to * deselect the current shape. / 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(). / PVector.fromAngle = function(angle, v) { v = v \|\| PVector.new(); v.x = cos(angle); v.y = sin(angle); return v; }; / Rewrite static function to invoke PVector.new(). / PVector.random3D = function(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; }; /* Rewrite static function to invoke PVector.new(). / PVector.lerp = function(v1, v2, amt) { var retval = PVector.new(v1.x, v1.y, v1.z); retval.lerp(v2, amt); return retval; }; / Let also fix a real bug in Processing.js PVectors... / PVector.angleBetween = function(a, b) { var cosine = a.dot(b) / (a.mag() b.mag()); return acos(constrain(cosine, -1, 1)); }; })(PVector); /* Patches PVector leaks... / / Return the reference to the Processing.js object. / function getPjs() { var wasDraw = draw; draw = function() { return this; }; var pjs = draw(); draw = wasDraw; return pjs; } / * Constructor function for a Versor, which is a * quaternion of magnitude one. Versors are useful * for very fast rotations, no gimbal lock, * easy accumulation of rotations, and efficient * inverses. See: * https://en.wikipedia.org/wiki/Quaternions_and_spatial_rotation * and for idiots like me, see: * http://barbic.usc.edu/cs520-s12/quaternions/quaternions-cs520.pdf / var Versor = (function() { var pjs = getPjs(); var PVector = pjs.PVector; var acos = pjs.acos; var cos = pjs.cos; var sin = pjs.sin; var random = pjs.random; var round = Math.round; var hypot = Math.hypot; var tau = (cos(PI) < 0) ? TWO_PI : 360; / KA silliness / var orbitEpsilon = 1/1024; var epsilon = 1/1024/1024; var defaultOrigin = PVector.new(0, 0, 0); var staticMatrix = { rowX: PVector.new(), rowY: PVector.new(), rowZ: PVector.new() }; / * Constructor. Actually constructs a quaternion. * It is up to the caller to insure magnitude one. / function Versor(x, y, z, w) { PVector.call(this); this.init.apply(this, arguments); } Versor.prototype = Object.create(PVector.prototype); / (re)Initial value of this. / function init(x, y, z, w) { if (arguments.length === 0) { / identity quaternion: / this.x = this.y = this.z = 0; this.w = 1; } else if (arguments.length > 1) { this.set(x, y, z); this.w = w \|\| 0; } else { this.set(x); this.w = x.w \|\| 0; } this.renormCnt = this.renormCnt \|\| 0; return this; } Versor.prototype.init = init; / * Return a versor that can rotate points by angle theta * around the axle vector. / function rotationAxle(axle, theta) { var rotation = Versor.new(axle); rotation.normalize(); rotation.mult(sin(theta/2)); rotation.w = cos(theta/2); return rotation; } Versor.rotationAxle = rotationAxle; / Return the string representation of this. / function versor2String() { return "[[" + this.x + "," + this.y + "," + this.z + "]," + this.w + "]"; } Versor.prototype.toString = versor2String; / * Return the inverse of this Versor. Since (if?) this * magnitude is one, then the inverse is this conjugate. / function inverse() { return Versor.new(-this.x, -this.y, -this.z, this.w); } Versor.prototype.inverse = inverse; / * Pre-multiply this by r (another Versor). * Specifically, this = (r)(this). / function apply(r) { var q = this, a = r.w, b = r.x, c = r.y, d = r.z, e = q.w, f = q.x, g = q.y, h = q.z, x = af + be + ch - dg, y = ag - bh + ce + df, z = ah + bg - cf + de, w = ae - bf - cg - dh; if (++this.renormCnt > 1000) { / Renormalize to offset accumulated error... / var m = 1 / hypot(x, y, z, w); q.init(mx, my, mz, mw); this.renormCnt = random(0, 250); } else { q.init(x, y, z, w); } return q; } Versor.prototype.apply = apply; / * Rotate a single point(s) p, in place, by this Versor. * p = qpq' or (0, v') = (0, v + q₀t + q⨯t) where * t = 2q⨯v and q₀ is this w property. See * https://en.wikipedia.org/wiki/Conversion_between_quaternions_and_Euler_angles#Vector_Rotation / function rotateV(p) { var qw = this.w, qx = this.x, qy = this.y, qz = this.z; / t = 2(q ⨯ v) / var tx = (qy p.z - qz * p.y) * 2, ty = (qz * p.x - qx * p.z) * 2, tz = (qx * p.y - qy * p.x) * 2; /* v' = v + q₀t + (q ⨯ t) / p.x += qw tx + qy * tz - qz * ty; p.y += qw * ty + qz * tx - qx * tz; p.z += qw * tz + qx * ty - qy * tx; return p; } Versor.prototype.rotateV = rotateV; /* * Transform the node, either in place, or to its property named by rp. * The node is relative to its origin, and the transformation is relative * to postOrigin. All tranformation parameters are in (this). / function transformNode(node) { var rp = this.rp, results = (rp) ? (node[rp] \|\| (node[rp] = PVector.new())) : node, po = this.postOrigin, origin = this.origin, x = node.x - origin.x, y = node.y - origin.y, z = node.z - origin.z, row = this.rowX; results.x = row.xx + row.yy + row.zz + po.x; row = this.rowY; results.y = row.xx + row.yy + row.zz + po.y; row = this.rowZ; results.z = row.xx + row.yy + row.zz + po.z; } /* * Same as rotateV above, but applied to an ARRAY of nodes relative * to the origin, and converts the quaternion to a rotation matrix. * The results are in-place, or placed in each node's rp property. * (Actually faster after an expensive setup. See * https://en.wikipedia.org/wiki/Quaternions_and_spatial_rotation ) / function rotateA(nodes, origin, rp, postOrigin) { var matrix = staticMatrix; matrix.origin = origin \|\| defaultOrigin; matrix.postOrigin = postOrigin \|\| matrix.origin; matrix.rp = rp; var qr = this.w, qi = this.x, qj = this.y, qk = this.z; matrix.rowX.set( 1 - (qjqj + qkqk)2, (qiqj - qkqr)2, (qiqk + qjqr)2 ); matrix.rowY.set( (qiqj + qkqr)2, 1 - (qiqi + qkqk)2, (qjqk - qiqr)2 ); matrix.rowZ.set( (qiqk - qjqr)2, (qjqk + qiqr)2, 1 - (qiqi + qjqj)2 ); nodes.forEach(transformNode, matrix); return nodes; } Versor.prototype.rotateA = rotateA; /* * Return a Versor such that its rotates point src * to point dest. That is, dest === results.rotateV(src) * Parameters src, dest, and up must be normalized. See * https://gamedev.stackexchange.com/questions/15070/orienting-a-model-to-face-a-target / function getRotation(src, dest, up) { var rotation; / the resulting Versor / var dot = src.dot(dest); if (dot > 1-epsilon) { / +1 dot product means pointing exactly where we want! / rotation = Versor.new(); } else if (dot < -1+epsilon) { / * -1 dot product means pointing in the * opposite direction. Rotate by the * half angle of 180° wrt up axis. / println("What's up! " + up); / XXX / rotation = Versor.new(up); / rotation.mult(sin(tau / 4)) is a noop / rotation.w = 0; / same as w = cos(tau / 4) / } else { var theta = acos(dot); / angle between src and dest / rotation = rotationAxle(src.cross(dest), theta); } return rotation; } Versor.getRotation = getRotation; / * Returns a versor that describes a circular 3D orbit around the * origin, running through point p0 and (optionally) as close as * possible to p1. If p1 is unspecificed or colinear with p0 and * the origin, then a random orbit is chosen through p0. The points * origin, p0, and p1 define a plane that slices the sphere * centered at the origin in half. So the orbit is a great circle. * * (Optional) delta is the arc angle between each point of the * orbit. So one degree (the default) will generate 360 points * in an orbit. * * The orbit's points are generated by repeatedly applying * the versor to p0. e.g. versor.rotateV(p0) sets p0 to * the next point of the orbit. / function circularOrbit(p0, p1, delta) { p1 = p1 \|\| PVector.new(random(-1, 1), random(-1, 1), random(-1, 1)); delta = delta \|\| (tau / 360); var orbit = rotationAxle(p0.cross(p1), delta); var crossMag = orbitEpsilon round(orbit.mag() / orbitEpsilon); return (crossMag === 0) ? Versor.circularOrbit(p0, null, delta) : orbit; } Versor.circularOrbit = circularOrbit; return Versor; })(); /* * Face is a constructor function for creating faces described * by their nodes and color. Many support methods & functions * are provided for rendering the faces, culling invisible * faces, and shading the faces with respect to a static light * source. / var Face = (function() { / * The drawn faces are rendered using "flat shading". See * https://en.wikipedia.org/wiki/Shading#Flat_shading The * light source is infinitely far away, but the lightSrc * vector is used to determine its 3D angles from the faces. * So a light source perpendicular to the picture canvas is * the vector(0, 0, <any positive number>). Note that shapes * do not cast shadows! / var lightSrc = PVector.new(-30, -50, 100); var lightMag = lightSrc.mag(); var dark = color(40); / the color of no light / / Bring well-used globals much closer to where they are used... / var pjs = getPjs(); var beginShape = pjs.beginShape; var color = pjs.color; var endShape = pjs.endShape; var fill = pjs.fill; var lerpColor = pjs.lerpColor; var PVector = pjs.PVector; var stroke = pjs.stroke; var vertex = pjs.vertex; var min = Math.min; / Constructor function. Uses (does NOT dup) nodes. / function Face(nodes, colour, norhr) { this.nodes = nodes; this.color = colour \|\| color(random(230), 200, random(230)); this.normal = PVector.new(); if (! norhr) { rightHandRule(this); } } / Emit one call to vertex. / function eachVertex(node) { vertex(node.persp.x, node.persp.y); } / Draw this Face. / function drawMethod() { var cosTheta = this.normal.dot(lightSrc) / this.normal.mag() / lightMag; var interpolation = (cosTheta < 0) ? 0 : cosTheta; var c = lerpColor(dark, this.color, interpolation); fill(c); stroke(c); beginShape(); this.nodes.forEach(eachVertex, this); endShape(CLOSE); } Face.prototype.draw = drawMethod; / * Return true iff point (x, y) is in this rendered face. * See https://www.khanacademy.org/cs/p/5211412870725632 * which implements even/odd ray tracing. / Face.prototype.isOver = function(x, y) { var isIn = false; var nodes = this.nodes; for (var i = 0, j = nodes.length - 1; i < nodes.length; j = i++) { var pi = nodes[i].persp, xi = pi.x, yi = pi.y; var pj = nodes[j].persp, xj = pj.x, yj = pj.y; var intersect = yi > y !== yj > y && x < (xj - xi) (y - yi) / (yj - yi) + xi; if (intersect) { isIn = !isIn; } } return isIn; }; /* Returns the right-handed (unless "left") normal of this face. / function getNormal(nodes, left) { var next = PVector.sub(nodes[2], nodes[1]); var prev = PVector.sub(nodes[0], nodes[1]); return (left) ? next.cross(prev) : prev.cross(next); } / * Is this face currently visible? See * https://en.wikipedia.org/wiki/Back-face_culling / function isVisible() { this.normal = getNormal(this.nodes); return this.normal.z > 0; } Face.prototype.isVisible = isVisible; / * Assists both back face culling and flat shading. Assumes * this face is part of a shape centered at the origin. * Finds the correct ordering of face's nodes such that * a cross product of two vectors sharing the common nodes[1] * points away from the origin. / function rightHandRule(face) { var common = face.nodes[1]; var right = getNormal(face.nodes); right.add(common); right = right.mag(); var left = getNormal(face.nodes, true); left.add(common); left = left.mag(); if (right < left) { face.nodes.reverse(); } } / Compare two faces based on their minimum Z (or average Z) coordinates. / function compareFace(a, b) { return (a.minZ - b.minZ) \|\| (a.aveZ - b.aveZ); } / Render the face. / function drawEachFace(face) { face.draw(); } / * Find (this) face's minimun Z and average Z values * based on the series of (this) face's nodes. / function eachFaceNode(node) { var z = node.z; this.aveZ += z; this.minZ = min(this.minZ, z); } / Recompute the face's min and average Z values. / function eachFace(face) { face.minZ = Infinity; face.aveZ = 0; face.nodes.forEach(eachFaceNode, face); face.aveZ /= face.nodes.length; } / Draw the faces. Sorts faces to be drawn in the correct order. / function drawFaces(faces) { faces.forEach(eachFace); faces.sort(compareFace); faces.forEach(drawEachFace); } Face.draw = drawFaces; / If face is visible, then push it into (this) array. / function eachVisibleFace(face) { if (face.isVisible()) { this.push(face); } } / Append any face in the faces array to the visible array if it is visible . / function appendVisibleFaces(faces, visible) { faces.forEach(eachVisibleFace, visible); } Face.appendVisibleFaces = appendVisibleFaces; Face.bg = dark; return Face; })(); / * Shape3D is a constructor function for a generic shape that is * always constructed at the origin (0, 0, 0). Shapes have methods * for moving, scaling, XYZ axes rotating, and rotating around an axle. * * Shape3D also provides static library functions that are similar * to the methods but apply to the entire universe of shapes and * their nodes. / var Shape3D = (function() { / Bring well-used globals much closer to where they are used... / var pjs = getPjs(); var cos = pjs.cos; var PVector = pjs.PVector; / * A simple perspective is drawn wrt a fixed camera at * a positive Z offset. / var camera = PVector.new(0, 0, 2.2 max(width, height)); var tau = (cos(PI) < 0) ? TWO_PI : 360; /* KA silliness / var json = (function(what) { return this[what]; })("JSON"); var jsonInclude = [ "x", "y", "z", "ux", "uy", "uz", "faces", "nodes", "color", "" ]; var defaultOrigin = PVector.new(0, 0, 0); var ux = PVector.new(1, 0, 0); var uy = PVector.new(0, 1, 0); var uz = PVector.new(0, 0, 1); var staticArray = []; var staticMatrix = {}; var TRIANGULAR_FACES = false; var drawnFaces = []; / All most recently drawn faces. / var shapes = []; / All managed shapes. / / Constructor function of a generic shape. / function Shape3D(noRecord) { PVector.call(this, 0, 0, 0); / this shape's coordinates / this.nodes = []; this.faces = []; this.rotations = Versor.new(); / cumulative rotations. / if (! noRecord) { shapes.push(this); } / * All constructed nodes are bound to this shape. * A constructor in a constructor? Really? / var thisShape = this; this.Node = function(x, y, z) { PVector.call(this, x, y, z); thisShape.nodes.push(this); this.persp = PVector.new(); / perspective of this. / }; this.Node.prototype = PVector.prototype; } Shape3D.prototype = Object.create(PVector.prototype); / Remove this shape from the managed shapes array. / function remove() { shapes.splice(shapes.indexOf(this), 1); / snip / } Shape3D.prototype.remove = remove; / Append this nodes to array a. / function appendNodes(a) { a.push.apply(a, this.nodes); a.push(this); / include this origin. / } Shape3D.prototype.appendNodes = appendNodes; / * (re)set unit vectors. They will undergo * all of the transformations that affect all other * nodes. Handy for personalized rotation axis... / function setUnitAxes() { if (! this.ux) { this.ux = this.Node.new(); this.uy = this.Node.new(); this.uz = this.Node.new(); } this.ux.set(ux); this.uy.set(uy); this.uz.set(uz); } Shape3D.prototype.setUnitAxes = setUnitAxes; / Add face (or something like it) to this Shape3D's faces array. / function addFace(face) { var nodes = face.nodes; if (nodes.length > 3 && TRIANGULAR_FACES) { / Split this face up into a series of triangles, and add them. / for (var prev = 0, i = 1; i < nodes.length; prev = i++) { var triFace = Face.new([nodes[0], nodes[prev], nodes[i]], face.color); this.addFace(triFace, true); } } else { this.faces.push(face); face.shape = this; } } Shape3D.prototype.addFace = addFace; / Compute the perspective of node / function nodePerspective(node) { var persp = node.persp; var scale = camera.z / camera.dist(node); persp.set(scale node.x, scale * node.y, nodePerspective); } /* (re)Compute this shape's X and Y coordinates wrt perspective. / function perspectives() { this.nodes.forEach(nodePerspective, this); } Shape3D.prototype.perspective = perspectives; / Move node by adding (this) delta to it. / function moveNode(node) { node.add(this); } / * Moves this shape by a relative amount delta, * which is either a vector or three numbers. / function move(delta) { if (arguments.length === 3) { delta = PVector.new.apply(PVector, arguments); } this.nodes.forEach(moveNode, delta); this.add(delta); / move the origin too / } Shape3D.prototype.move = move; / * Moves this shape to new absolute coordinates, * either described by a vector or by three coordinates. / function translates(tx, ty, tz) { var delta = (arguments.length === 1) ? tx.get() : PVector.new(tx, ty, tz); delta.sub(this); this.move(delta); } Shape3D.prototype.translate = translates; / Scale node by sf according to (this) origin. / function scaleNode(node) { node.sub(this); node.mult(this.sf); node.add(this); } / * Scales this shape according to one number, * one vector, or three numbers. / function scales(sf) { if (arguments.length === 3) { sf = PVector.new.apply(PVector, arguments); } this.sf = sf; this.nodes.forEach(scaleNode, this); } Shape3D.prototype.scale = scales; / * Rotate the nodes about a 3D axle described by * the line between "from" and "to". Info at * https://en.wikipedia.org/wiki/Quaternions_and_spatial_rotation / Shape3D.rotateNodesAxle = function(nodes, theta, from, to) { if (theta !== 0) { var q = Versor.rotationAxle(PVector.sub(to, from), theta); q.rotateA(nodes, from); } }; / * Rotate the nodes of this shape about a 3D axle described by * the line between this coordinates and axle. / Shape3D.prototype.rotateAxle = function(theta, axle) { Shape3D.rotateNodesAxle(this.nodes, theta, this, axle); }; / * Generate a method for 3D rotation of this shape... * Invoke a method like: * myShape.rotateZ3D(theta); / function rotate3DMethod(unitVector) { function rotate3DMethod(theta) { Shape3D.rotateNodesAxle(this.nodes, theta, this, PVector.add(this, unitVector)); } return rotate3DMethod; } Shape3D.prototype.rotateZ3D = rotate3DMethod(uz); Shape3D.prototype.rotateY3D = rotate3DMethod(uy); Shape3D.prototype.rotateX3D = rotate3DMethod(ux); / Append shape's nodes to the results. / function appendShapeNodes(results, shape) { shape.appendNodes(results); return results; } / * Rotate every node about a 3D axle described by * the line between "from" and "to". / Shape3D.rotateAxle = function(theta, from, to) { if (theta !== 0) { var allNodes = staticArray; allNodes.length = 0; shapes.reduce(appendShapeNodes, allNodes); Shape3D.rotateNodesAxle(allNodes, theta, from, to); } }; / * Generate a function for universal (all shapes) 3D rotation. * Invoke a static function like: * Shape3D.rotateZ3D(theta, origin); // origin can be defaulted / function rotate3DUniversal(unitAxisVector) { function rotate3DUniversal(theta, origin) { Shape3D.rotateAxle(theta, origin \|\| defaultOrigin, unitAxisVector); } return rotate3DUniversal; } Shape3D.rotateZ3D = rotate3DUniversal(uz); Shape3D.rotateY3D = rotate3DUniversal(uy); Shape3D.rotateX3D = rotate3DUniversal(ux); / * Compute all the face's perspective points. * Then add visible faces to (this) drawnFaces array. / function eachShape(shape) { shape.perspective(); Face.appendVisibleFaces(shape.faces, this); } / * Draw all shapes from back to front. The * rendering of collided shapes is undefined * and often disappointing. / function drawShapes() { drawnFaces.length = 0; shapes.forEach(eachShape, drawnFaces); Face.draw(drawnFaces); drawnFaces.reversed = false; } Shape3D.draw = drawShapes; / If face is over the X, Y coordinates, set overFace and return false. / function everyFace(face) { if (face.isOver(this.overFaceX, this.overFaceY)) { this.overFace = face; return false; / do not continue / } return true; / continue to look / } / Return the shape that the point (x, y) is over. / Shape3D.over = function(x, y) { if (! drawnFaces.reversed) { drawnFaces.reverse(); drawnFaces.reversed = true; } this.overFaceX = x; this.overFaceY = y; return (drawnFaces.every(everyFace, this)) ? null : this.overFace.shape; }; / Is 2D point (x, y) over this shape's 2D projection? / Shape3D.prototype.isOver = function(x, y) { return Shape3D.over(x, y) === this; }; / * Return the JSON description of shape be it * a shape or an array of shapes. / Shape3D.stringify = function(shape) { shape = shape \|\| shapes; var myNodes; var replacer = function(key, value) { if ((! Array.isArray(this)) && (jsonInclude.indexOf(key) < 0)) { return; / ignore unwanted key and value / } if (key === "nodes") { if (this.faces && typeof this.z === "number") { / Remember the actual nodes of this shape. / myNodes = value; } else { / Replace node references with indices into myNodes. / var replacement = []; for (var l = value.length, i = 0; i < l; i++) { replacement.push(myNodes.indexOf(value[i])); } return replacement; } } else if (key === "ux" \|\| key === "uy" \|\| key === "uz") { / Replace value with an index into myNodes. / return myNodes.indexOf(value); } return value; }; return json.stringify(shape, replacer); }; / Return the JSON description of this shape. / Shape3D.prototype.stringify = function() { return Shape3D.stringify(this); }; / Make a brand new shape based on the properties of conf. / var newShape = function(conf) { var shape = Shape3D.new(); var myNodes = shape.nodes; shape.set(conf.x, conf.y, conf.z); for (var nodes = conf.nodes, l = nodes.length, i = 0; i < l; i++) { var node = nodes[i]; shape.Node.new(node.x, node.y, node.z); } for (var faces = conf.faces, l = faces.length, i = 0; i < l; i++) { var face = faces[i]; for (var nodes = face.nodes, m = nodes.length, j = 0; j < m; j++) { nodes[j] = myNodes[nodes[j]]; } shape.addFace(Face.new(nodes, face.color, true), true); } if (conf.ux >= 0) { shape.ux = myNodes[conf.ux]; shape.uy = myNodes[conf.uy]; shape.uz = myNodes[conf.uz]; } return shape; }; / Parse string s and build new shapes. / Shape3D.parse = function(s) { var shapes = json.parse(s); if (! Array.isArray(shapes)) { shapes = [ shapes ]; } for (var i = shapes.length; --i >= 0; ) { newShape(shapes[i]); } }; / Clone this shape. / Shape3D.prototype.clone = function() { var s = this.stringify(); var conf = json.parse(s); return newShape(conf); }; / Hack for compitibilty with other programs / Shape3D.prototype.Face = Face; Shape3D.tau = tau; Shape3D.ux = ux; Shape3D.uy = uy; Shape3D.uz = uz; Shape3D.origin = defaultOrigin; Shape3D.shapes = shapes; return Shape3D; })(); / Constructor function for a 3D star. / var Star = (function() { var tau = (cos(PI) < 0) ? TWO_PI : 360; var ratio = sin(1/20 tau) / sin(7/20 * tau); var starNode = []; /* Constructor function for a star at (0, 0, 0). / function Star(extRadius, depth, topColor, bottomColor) { Shape3D.call(this); bottomColor = bottomColor \|\| color(random(50, 110), 250, random(160, 220)); topColor = topColor \|\| color(250, random(160, 220), random(50, 110)); var interior = ratio extRadius; var n = 10; starNode.length = 0; for (var theta = 0; theta < tau; theta += tau / n) { var radius = (radius === extRadius) ? interior : extRadius; var x = radius * cos(theta - tau/4); var y = radius * sin(theta - tau/4); starNode.push(this.Node.new(x, y, 0)); } var topNode = this.Node.new(0, 0, depth/2); var bottomNode = this.bottomNode = this.Node.new(0, 0, -depth/2); for (var prev = n - 1, i = 0; i < n; prev = i++) { this.addFace(this.Face.new([ topNode, starNode[prev], starNode[i] ], topColor)); this.addFace(this.Face.new([ bottomNode, starNode[prev], starNode[i] ], bottomColor)); } this.setUnitAxes(); } Star.prototype = Shape3D.prototype; return Star; })(); /* Constructor function for a cuboid. / var Cuboid = (function() { / Constructor function for cuboid centered at origin. / var Cuboid = function(w, h, d) { Shape3D.call(this); w /= 2; h /= 2; d /= 2; var bottom = [ this.Node.new(-w, -h, -d), this.Node.new(-w, +h, -d), this.Node.new(+w, +h, -d), this.Node.new(+w, -h, -d), ]; var top = [ this.Node.new(-w, -h, +d), this.Node.new(-w, +h, +d), this.Node.new(+w, +h, +d), this.Node.new(+w, -h, +d), ]; for (var l = top.length, prev = l - 1, i = 0; i < l; prev = i++) { this.addFace(this.Face.new([ bottom[prev], top[prev], top[i], bottom[i] ], faceColor())); } this.addFace(this.Face.new(top, faceColor())); this.addFace(this.Face.new(bottom, faceColor())); this.setUnitAxes(); }; Cuboid.prototype = Shape3D.prototype; var faceColor = function() { return color(70, random(120, 160), random(190, 230)); }; return Cuboid; })(); / Constructor function for a regular icosahedron. / var Icosahedron = (function() { var tau = (cos(PI) < 0) ? TWO_PI : 360; var phi = (1 + sqrt(5)) / 2; / golden mean / var coord = []; / avoids leaks / var edge; / cached answer / var triangles; / cached answer / / Constructor function. / function Icosahedron(radius, colour) { Shape3D.call(this); var nodes = this.nodes; colour = colour \|\| color(230, 67, 227); / * See https://en.wikipedia.org/wiki/Regular_icosahedron * for node coordinates, edge length, and face generation. / for (var sa = -1; sa < 2; sa += 2) { for (var sb = -1; sb < 2; sb += 2) { coord.length = 0; coord.push(0, sa, sbphi); for (var i = 0; i < coord.length; i++) { this.Node.new(coord[0], coord[1], coord[2]); coord.push(coord.shift()); /* rotate / } } } / The twelve nodes make thirty edges of length 2. Find them. / var edge = wireFrame(nodes); / Generate twenty triangular faces. / var triangles = getFaces(edge); for (var i = 0; i < triangles.length; i++) { var t = triangles[i]; this.addFace(this.Face.new([ nodes[t[0]], nodes[t[1]], nodes[t[2]] ], colour)); } this.scale(radius / 2 / sin(tau/5)); this.rotateY3D(tau/6); this.setUnitAxes(); } Icosahedron.prototype = Shape3D.prototype; / * Compute the edges of the Icosahedron given the nodes. * Only needed once, ever. The twelve nodes make thirty * edges of length 2. / function wireFrame(nodes) { if (! edge) { edge = []; for (var l = nodes.length, i = 0; i < l; i++) { for (var j = i + 1; j < l; j++) { if (nodes[i].dist(nodes[j]) === 2) { edge[i] = edge[i] \|\| []; edge[i].push(j); } } } } return edge; } / * Find the triangle faces of the icosahedron given the edges. * Only needed once, ever. / function getFaces(edge) { if (! triangles) { triangles = []; for (var A = 0; A < edge.length; A++) { var neighborsA = edge[A]; for (var a = 0; a < neighborsA.length; a++) { var B = neighborsA[a]; var neighborsB = edge[B]; for (var b = 0; neighborsB && b < neighborsB.length; b++) { var C = neighborsB[b]; if (neighborsA.indexOf(C) >= 0) { triangles.push([ A, B, C ]); } } } } } return triangles; } return Icosahedron; })(); / Constructor function for a soccer ball. / var SoccerBall = (function() { var tau = (cos(PI) < 0) ? TWO_PI : 360; var phi = (1 + sqrt(5)) / 2; / golden mean / var pentNodes = []; / nodes numbers of pentagons that generate hexagons / var visited5 = []; / node numbers that made pentagons / var visited6 = []; / list of constructed hexagons / var va = PVector.new(); var vc = PVector.new(); var edge; / cached answer / var polygon; / cached answer / / Constructor function. / function SoccerBall(radius, color5, color6) { Shape3D.call(this); var nodes = this.nodes; color5 = color5 \|\| color(60, 100, 180); color6 = color6 \|\| color(220, 200, 150); / * See https://en.wikipedia.org/wiki/Truncated_icosahedron * for node coordinates, edge length, and face generation. / var x, y, z, sa=0, sb, sc; for (sb = -1; sb < 2; sb += 2) { for (sc = -1; sc < 2; sc += 2) { x = 0; y = sb; z = sc3phi; pentNodes.push(nodes.length); this.Node.new(x, y, z); if (sc !== sb) { pentNodes.push(nodes.length); } this.Node.new(y, z, x); this.Node.new(z, x, y); } } for (sa = -1; sa < 2; sa += 2) { for (sb = -1; sb < 2; sb += 2) { for (sc = -1; sc < 2; sc += 2) { x = sa; y = sb(2 + phi); z = sc2phi; this.Node.new(x, y, z); this.Node.new(y, z, x); this.Node.new(z, x, y); } } } for (sa = -1; sa < 2; sa += 2) { for (sb = -1; sb < 2; sb += 2) { for (sc = -1; sc < 2; sc += 2) { x = sa2; y = sb(1 + 2phi); z = scphi; this.Node.new(x, y, z); this.Node.new(y, z, x); this.Node.new(z, x, y); } } } /* The sixty nodes make ninety edges of length 2. Find them. / var edge = wireFrame(nodes); / Generate 12 pentagon and 20 hexagon faces. / var polygon = getFaces(edge, nodes); for (var i = polygon.length; --i >= 0; ) { var p = polygon[i]; var ns = nodesFromNumber(p, nodes); this.addFace(this.Face.new(ns, (ns.length === 5) ? color5 : color6)); } this.scale(radius / sqrt(9phi + 10)); this.setUnitAxes(); } SoccerBall.prototype = Shape3D.prototype; /* * Compute the edges of the truncated icosahedron given * the nodes. Only needed once, ever. The sixty nodes * make ninety edges of length 2. / function wireFrame(nodes) { if (! edge) { edge = []; for (var cnt = 0, l = nodes.length, i = 0; i < l; i++) { for (var j = i + 1; j < l; j++) { if (nodes[i].dist(nodes[j]) === 2) { edge[i] = edge[i] \|\| []; var k = edge[i].indexOf(j); if (k < 0) { edge[i].push(j); } edge[j] = edge[j] \|\| []; k = edge[j].indexOf(i); if (k < 0) { edge[j].push(i); } cnt++; } } } } return edge; } / Exchange face's node numbers for actual nodes. / function nodesFromNumber(face, nodes) { var n = []; for (var l = face.length, i = 0; i < l; i++) { n.push(nodes[face[i]]); } return n; } / Compute the angle abc / function angle(a, b, c) { var ba = PVector.sub(a, b); var bc = PVector.sub(c, b); return PVector.angleBetween(ba, bc); } / * Arrange face's node numbers in a consistent order. * The first node is the smallest number. The second * number is the smallest possible. / function beautifyFace(face) { var least = Math.min.apply(null, face); while (face[0] !== least) { face.push(face.shift()); } if (face[1] > face[face.length-1]) { face.shift(); / snip / face.reverse(); face.unshift(least); / unsnip / } } / Find the edge that connects the two pentagons. / function connectPentagons(edge, a, b) { for (var i = a.length; --i >= 0; ) { var neighbor = edge[a[i]]; for (var j = neighbor.length; --j >= 0; ) { var k = b.indexOf(neighbor[j]); if (k >= 0) { return [ a[i], b[k] ]; / a new hexagon is born / } } } } / Find a face containing node number n. / function findByNode(faces, n) { for (var i = faces.length; --i >= 0; ) { var f = faces[i]; if (f.indexOf(n) >= 0) { return f; } } } / Given a pentagon face, identify five new hexagons. / function sixFromFive(edge, nodes, pentagons, face) { var faces = []; for (var l = face.length, p = l - 1, pp = p - 1, i = 0; i < l; pp = p, p = i++) { var nj, nk, n = face[p]; var neighbor = edge[n]; for (var j = 0; j < neighbor.length; j++) { nj = neighbor[j]; if (nj !== face[pp] && nj !== face[i]) { break; } } var neighborFace1 = findByNode(pentagons, nj); var next = (i + 1) % l; var m = face[i]; var neighbor = edge[m]; for (var k = 0; k < neighbor.length; k++) { nk = neighbor[k]; if (nk !== face[p] && nk !== face[next]) { break; } } var neighborFace2 = findByNode(pentagons, nk); var hex = connectPentagons(edge, neighborFace1, neighborFace2); hex.push(nk, m, n, nj); beautifyFace(hex); faces.push(hex); } return faces; } / * Given the current and previous node numbers of a * pentagon face, return the next node number of that face. / function getNext5(edge, nodes, prev, curr) { var neighbors = edge[curr]; for (var i = neighbors.length; --i >= 0; ) { if (neighbors[i] !== prev && angle(nodes[prev], nodes[curr], nodes[neighbors[i]]) < tau/3) { return neighbors[i]; } } } / Identify an unknown pentagon face beginning at nodes[n]. / function getPentagon(edge, nodes, n) { if (visited5.indexOf(n) < 0) { var face = [ n ]; var neighbor = edge[n]; for (var l = neighbor.length, p = l - 1, i = 0; i < l; p = i++) { var theta = angle(nodes[neighbor[p]], nodes[n], nodes[neighbor[i]]); if (theta < tau/3) { for (var p = neighbor[p], j = 0; j < 4; j++) { n = getNext5(edge, nodes, p, p = n); face.push(n); } / * Remember those nodes so that they * are never considered again. / visited5.push.apply(visited5, face); return face; } } } } / Identify and return the (twelve) pentagon faces. / function getPentagons(edge, nodes) { var f, faces = []; for (var n = nodes.length; --n >= 0; ) { f = getPentagon(edge, nodes, n); if (f) { faces.push(f); } } return faces; } / * Find the faces of the truncated icosahedron given the * edges and nodes. Only needed once, ever. / function getFaces(edge, nodes) { if (! polygon) { var hexagon = []; polygon = getPentagons(edge, nodes); / twelve pentagon faces / for (var i = pentNodes.length; --i >= 0; ) { var hex = sixFromFive(edge, nodes, polygon, polygon[pentNodes[i]]); / Append those new hexes iff they are new. / for (var j = hex.length; --j >= 0; ) { var hash = hex[j].toString(); / hex's unique hash / if (! visited6[hash]) { visited6[hash] = true; / record the unique hash / hexagon.push(hex[j]); } } } polygon.push.apply(polygon, hexagon); } return polygon; } return SoccerBall; })(); / Constructor function for a torus. / var Torus = (function() { var tau = (cos(PI) < 0) ? TWO_PI : 360; var circle = Shape3D.new(true); var circleFace; / generic cross section / / * Constructor function for a torus with * a cross section radius of r and a major * radius of R. / function Torus(R, r) { circle.scale(r); circle.translate(R, 0, 0); circle.set(0, 0, 0); / set "center" back to origin / var cNodes = circleFace.nodes, cl = cNodes.length; Shape3D.call(this); / * Generate all nodes, storing them in a series of * cross-section arrays all stored in crossSec. / var crossSec = []; for (var tn = 23, i = 0; i < tn; i++) { / Duplicate the circle's nodes to the current cross section. / var cs = crossSec[i] = []; for (var j = 0; j < cl; j++) { var cNode = cNodes[j]; cs.push(this.Node.new(cNode.x, cNode.y, cNode.z)); } circle.rotateY3D(tau/tn); / rotate off-center cross section / } / * Generate the quad faces by visiting * all nodes in all cross sections. / for (var p = tn - 1, i = 0; i < tn; p = i++) { var curr = crossSec[i]; var prev = crossSec[p]; for (var q = cl - 1, j = 0; j < cl; q = j++) { this.addFace(this.Face.new([ prev[j], prev[q], curr[q], curr[j] ], false, true), true); } } this.rotateX3D(tau/4); this.setUnitAxes(); / circle.POP / circle.translate(-R, 0, 0); circle.set(0, 0, 0); / "center" returns to origin / circle.scale(1/r); } Torus.prototype = Shape3D.prototype; / Build the generic cross section of a torus. / for (var epsilon = 1/1024, c = 13, i = 0; i < c; i++) { var x = cos(i tau/c); var y = sin(i * tau/c); circle.Node.new(x, y, epsilon); } circleFace = circle.Face.new(circle.nodes.slice()); circle.translate(0, 0, -epsilon); return Torus; })(); /* Constructor function for a ellipsoid. / var Ellipsoid = (function() { var tau = (cos(PI) < 0) ? TWO_PI : 360; var epsilon = 1/1024/1024; var soid; / Round n to assist with comparison tests... / function rnd(n) { return epsilon round(n / epsilon); } /* Push and return a UNIQUE node into the nodes array. / function anotherNode(x, y, z) { x = rnd(x); y = rnd(y); z = rnd(z); var n = soid.nodes[soid.nodes.length - 1]; if (n && n.x === x && n.y === y && n.z === z) { / A duplicate! / } else { n = soid.Node.new(x, y, z); } return n; } / Push and return another face into the faces array. / function anotherFace(f, facesColor) { for (var i = 1; i < f.length; i++) { if (f[i] === f[i-1]) { f.splice(i, 1); / snip degenerate edge / break; } } return this.Face.new(f, facesColor); } / Constructor... See * https://en.wikipedia.org/wiki/Ellipsoid#Parameterization * for parametric equations of an ellipsoid. / function Ellipsoid(width, height, depth, facesColor) { var a = width/2; / ellipsoid X radius / var b = height/2; / ellipsoid Y radius / var c = depth/2; / ellipsoid Z radius / Shape3D.call(this); soid = this; for (var curr, prev = null, theta = -tau/4; theta < tau/4 + epsilon; theta += tau/18, prev = curr) { var cosTheta = cos(theta); var z = c sin(theta); curr = []; for (var omega = -tau/2; abs(tau/2 - omega) > epsilon; omega += tau/12) { var x = a * cosTheta * cos(omega); var y = b * cosTheta * sin(omega); curr.push(anotherNode(x, y, z)); } for (var p = curr.length - 1, i = 0; prev && i < curr.length; p = i++) { this.addFace(anotherFace.call(soid, [ prev[p], prev[i], curr[i], curr[p] ], facesColor)); } } this.setUnitAxes(); } Ellipsoid.prototype = Shape3D.prototype; return Ellipsoid; })(); /* Constructor for a dodecahedron. / var Dodecahedron = (function() { / lifted from https://www.khanacademy.org/cs/do/5418618996736000 / var phi = (sqrt(5) + 1) / 2; // golden ratio var k = 1; var l = k; var dNodes = [ [-l, -l, -l], [-l, -l, l], [-l, l, -l], [-l, l, l], [ l, -l, -l], [ l, -l, l], [ l, l, -l], [ l, l, l], [0, k(phi), k(1/phi)], [0, k-(phi), k(1/phi)], [0, k(phi), k-(1/phi)], [0, k-(phi), k-(1/phi)], [k(phi), k(1/phi), 0], [k-(phi), k(1/phi), 0], [k(phi), k-(1/phi), 0], [k-(phi), k-(1/phi), 0], [k(1/phi), 0, k(phi)], [k-(1/phi), 0, k(phi)], [k(1/phi), 0, k-(phi)], [k-(1/phi), 0, k-(phi)], ]; var dFaces = [[9,5,16,17,1],[10,6,18,19,2],[17,3,8,7,16],[4,18,19,0,11],[17,1,15,13,3],[6,18,4,14,12],[3,8,10,2,13],[9,11,4,14,5],[14,12,7,16,5],[19,0,15,13,2],[0,11,9,1,15],[6,10,8,7,12]]; var dColors = [ color(255, 255, 255), color(156, 156, 156), color(222, 60, 60), color(255, 157, 0), color(17, 99, 4), color(119, 224, 103), color(255, 247, 133), color(255, 234, 0), color(38, 103, 255), color(112, 170, 245), color(183, 0, 255), color(255, 153, 196) ]; / Constructor function for a Dodecahedron / function Dodecahedron(radius, colors) { colors = colors \|\| dColors; Shape3D.call(this); var nodes = this.nodes; var faces = this.faces; for (var d = 0; d < dNodes.length; d++) { var n = dNodes[d]; this.Node.new(n[0], n[1], n[2]); } for (var d = 0; d < dFaces.length; d++) { var f = dFaces[d]; var face = this.Face.new( [nodes[f[0]], nodes[f[1]], nodes[f[2]], nodes[f[3]], nodes[f[4]]], colors[d % colors.length]); this.addFace(face); } this.scale(radius); this.setUnitAxes(); } Dodecahedron.prototype = Shape3D.prototype; return Dodecahedron; })(); / Create and position some demo shapes. / var shp = Cuboid.new(80, 80, 80); shp.rotateY3D(Shape3D.tau/30); shp.rotateX3D(-Shape3D.tau/60); shp.translate(90, 65, -70); var shp = Torus.new(47, 20); shp.translate(99, -90, -85); var shp = Icosahedron.new(0.15min(width, height)); shp.translate(-90, -95, -80); var shp = Star.new(0.2min(width, height), 40); shp.translate(-80, +90, +75); var shp = SoccerBall.new(56); var shp = Ellipsoid.new(120, 70, 90, color(245, 240, 70)); shp.translate(110, 125, 70); shp.rotateX3D(+Shape3D.tau/10); var shp = Dodecahedron.new(30); shp.translate(0, -125, 70); var current = null; / current selected shape / var mpressed = null; / shape under the cursor when mousePressed / var delta = Shape3D.tau/300; / a small (incremental) angle / var originX = width/2; var originY = height/2; translate(originX, originY); / center the 2D origin / noStroke(); / Called by Processing.js when a mouse button is clicked. / mouseClicked = function() { current = Shape3D.over(mouseX - originX, mouseY - originY); mpressed = null; }; / Called by Processing.js when the mouse button is pressed. / mousePressed = function() { mpressed = Shape3D.over(mouseX - originX, mouseY - originY); cursor(ARROW); }; / Called by Processing.js when the user releases a mouse button. / mouseReleased = function() { cursor(ARROW); mpressed = null; }; / Called by Processing.js when the user drags the mouse. / mouseDragged = function() { if (current) { if (mpressed === current) { / MOVE the current shape. / cursor("NONE"); current.translate(mouseX - originX, mouseY - originY, current.z); } else if (! mpressed) { / ROTATE the current shape. / current.rotateX3D((pmouseY - mouseY) delta); current.rotateY3D((mouseX - pmouseX) * delta); } } else { /* ROTATE the universe. / Shape3D.rotateX3D((pmouseY - mouseY) delta); Shape3D.rotateY3D((mouseX - pmouseX) * delta); } redraw(); }; /* * Called by Processing.js when the user presses a key. * Key presses are explained at the top of the program. / keyPressed = function() { var ks = key.toString(); var which = current \|\| Shape3D; if (keyCode === RIGHT \|\| ks === 'd' \|\| ks === 'D') { which.rotateZ3D(-delta); } else if (keyCode === LEFT \|\| ks === 'a' \|\| ks === 'A') { which.rotateZ3D(+delta); } else if (ks === 'j' \|\| ks === 'J') { println(which.stringify()); } else if (current) { var theta = delta 2; if (keyCode === UP \|\| ks === 'w' \|\| ks === 'W') { if (current.z < max(width, height)) { current.move(0, 0, 1); } } else if (keyCode === DOWN \|\| ks === 's' \|\| ks === 'S') { if (current.z > -max(width, height)) { current.move(0, 0, -1); } } else if (ks === '+' \|\| ks === '=') { current.scale(1.01); } else if (ks === '-' \|\| ks === '_') { current.scale(1/1.01); } else if (ks === 'z') { current.rotateAxle(+theta, current.uz); } else if (ks === 'Z') { current.rotateAxle(-theta, current.uz); } else if (ks === 'y') { current.rotateAxle(+theta, current.uy); } else if (ks === 'Y') { current.rotateAxle(-theta, current.uy); } else if (ks === 'x') { current.rotateAxle(+theta, current.ux); } else if (ks === 'X') { current.rotateAxle(-theta, current.ux); } else if (ks === ' ') { println("[" + round(current.x) + ", " + round(current.y) + ", " + round(current.z) + "]"); } else if (keyCode === DELETE \|\| keyCode === BACKSPACE \|\| ks === 'k') { current.remove(); } else if (ks === 'c' \|\| ks === 'C') { current.clone(); } } redraw(); }; /* Called by Processing.js to draw the canvas. / draw = function() { noLoop(); background(20); Shape3D.draw(); }; // 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 /* * See http://la94022.com/~blyon/letters/grant2018.02.pdf * for a donation made in connection with this program. */
Folds	31,35,38,104,107,115,127,365,374,535,546,913,916,948,951,988,991,1082,1085,1357,1360,1426,1429,1497,1500,1573
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLyT6YeECAw
Votes	178
Spin-Offs	7
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Bob Lyon
Author Name	BobLyon
Author ID	kaid_1116520053705160540512971
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739362892865
Updated	10 months ago, 1739362900499
Source Deleted	unknown