Viewing Program

Program Data

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

Title	Cubic Quadrilaterals
ID	5976462779957248
Created	5 years ago, 1600302819018
Updated	3 years ago, 1671734374866
Code	/ Nickname: xacer Current Level: Advanced Competition: Interactive Images Deadline: September 16th Contest homepage: https://www.khanacademy.org/cs/i/5888721971658752 Click anywhere outside the cube and drag to rotate it Mouse over each side of the cube to interact with it- most faces can also be clicked (left and right!) Press keys 1-6 or press buttons on the bottom to automatically go to a specific face. The code is neatly commented, I recommend you look through it :) / /* DeKhan library, made by Bob Lyon: https://www.khanacademy.org/cs/i/5149916573286400 / 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); }, }; })(); / Loop detect the whole code, also make all variables local for faster retrieval. The draw loop is automatically run, so this code will be automatically executed whenver the program is ready / draw = DeKhan.loopDetect(function () { / Storage for keycodes (for arrow keys) / var keyCodes = {}; / Is the mouse clicked? Only true for one frame / var clicked = false; / For the fractal side of the cube / var screenshot = get(0, 0, width, height); / Check if mouse is inside canvas / var mouseInCanvas = function (mx, my) { return mx > 0 && mx < 400 && my > 0 && my < 400; }; / Cubic smoothstep function / var smoothstep = function (t) { return t t * (3 - 2 * t); }; /* Shear function created by Element118, an absolute legend / var TAN22 = tan(22.5); var SQRT2 = sqrt(2); var SQRT22 = sqrt(1+1/SQRT2); var shearX = function(x) { if (+x === 0) { return; } scale(SQRT22, -SQRT22/x); rotate(-22.5); scale(1, TAN22); rotate(45); scale(1, -xSQRT2); }; /* 2D Vector library / var vec2 = { / Create a new vector / new: function (x, y) { return [x, y]; }, / Set a vector to a value / set: function (v, x, y) { v[0] = x; v[1] = y; }, / Add two vectors / add: function (u, v) { return [u[0] + v[0], u[1] + v[1]]; }, / Subtract two vectors / sub: function (u, v) { return [u[0] - v[0], u[1] - v[1]]; }, / Scale vector u by factor f / scl: function (u, f) { return [u[0] f, u[1] * f]; }, /* Calculate the magnitude of a vector / mag: function (v) { return sqrt(v[0] v[0] + v[1] * v[1]); }, /* Normalize a vector / normalize: function (v) { var scl = 1 / sqrt(v[0] v[0] + v[1] * v[1]); return [v[0] * scl, v[1] * scl]; }, /* Rotate vector v by angle theta / rotate: function (v, theta) { var ct = Math.cos(theta); var st = Math.sin(theta); return [v[0] ct - v[1] * st, v[0] * st + v[1] * ct]; }, /* Dot product between two vectors / dot: function (a, b) { return a[0] b[0] + a[1] * b[1]; }, /* Magnitude squared (v dot v)/ dot2: function (v) { return v[0] v[0] + v[1] * v[1]; }, }; /* 2D Matrix library / var mat2 = { / Create a zero matrix / zero: function () { return [0, 0, 0, 0]; }, / Create an identity matrix / identity: function () { return [1, 0, 0, 1]; }, / Transform a 2x2 vector / transform: function (m, v) { return [ m[0] v[0] + m[1] * v[1], m[2] * v[0] + m[3] * v[1] ]; }, /* Create a matrix / create: function (a, b, c, d) { return [a, b, c, d]; }, / Multiply two 2x2 matrix / mul: function (m1, m2) { return [ m1[0] m2[0] + m1[1] * m2[2], m1[0] * m2[1] + m1[1] * m2[3], m1[2] * m2[0] + m1[3] * m2[2], m1[2] * m2[1] + m1[3] * m2[3] ]; }, /* Clone a matrix / clone: function (m) { return [m[0], m[1], m[2], m[3]]; }, / Singular value decomposition / svd: function (m) { // A = [a b c d] = U E * VT var a = m[0], b = m[1], c = m[2], d = m[3]; var a2 = a * a, b2 = b * b, c2 = c * c, d2 = d * d; var prod = a2 + b2 - c2 - d2; var theta = 0.5 * atan2(2 * (a * c + b * d), prod); var ct = cos(theta), st = sin(theta); var sx = a2 + b2 + c2 + d2; var sy = Math.sqrt(prod * prod + 4 * sq(a * c + b * d)); var phi = 0.5 * atan2(2 * (a * b + c * d), a2 - b2 + c2 - d2); var cp = cos(phi), sp = sin(phi); var s1 = Math.sign((a * ct + c * st) * cp + (b * ct + d * st) * sp), s2 = Math.sign((a * st - c * ct) * sp + (d * ct - b * st) * cp); /* [ s1 * cp, -s2 * sp, s1 * st, s2 * cp ] / return { theta: -theta, scale: [sx s1, sy * s2], phi: -phi, correct: [s1, s2] }; }, /* Determinant of 2x2 matrix / determinant: function (m) { return m[0] m[3] - m[1] * m[2]; }, /* Determine eigenvectors/values of a 2x2 matrix / eigen: function (m) { var v1 = [0, 0]; var v2 = [0, 0]; var trace = m[0] + m[3]; var discrim = trace trace / 4 - this.determinant(m); var lambda1 = trace / 2 + discrim; var lambda2 = trace / 2 - discrim; if (Math.abs(m[2]) > EPSILON) { vec2.set(v1, lambda1 - m[3], m[2]); vec2.set(v2, lambda2 - m[3], m[2]); } else if (Math.abs(m[1]) > EPSILON) { vec2.set(v1, m[1], lambda1 - m[0]); vec2.set(v1, m[1], lambda2 - m[0]); } else if (Math.abs(m[0] - lambda1) < EPSILON) { vec2.set(v1, 1, 0); vec2.set(v2, 0, 1); } else { vec2.set(v1, 0, 1); vec2.set(v2, 1, 0); } v1 = vec2.normalize(v1); v2 = vec2.normalize(v2); return { eigen1: v1, eigen2: v2, lambda1: lambda1, lambda2: lambda2 }; }, /* Singular value decomposition method 2 / svd2: function (m) { if (this.determinant(m) < EPSILON) { return false; } var a = m[0], b = m[1], c = m[2], d = m[3]; if (Math.abs(a b + c * d) < EPSILON) { var magX = sqrt(aa + cc); var magY = sqrt(bb + dd); return { U: [a / magX, b / magY, c / magX, d / magY], S: [magX, 0, 0, magY], VT: [1, 0, 0, 1] }; } var mT = this.mul([a, c, b, d], m); var me = this.eigen(mT); var u1 = me.eigen1, u2 = me.eigen2; var U = [u1[0], u2[0], u1[1], u2[1]]; var S = [Math.sqrt(me.lambda1), 0, 0, Math.sqrt(me.lambda2)]; var mP = [a, c, b, d]; u1 = this.transform(mP, u1); u2 = this.transform(mP, u2); u1 = vec2.scl(u1, 1 / S[0]); u2 = vec2.scl(u2, 1 / S[3]); var V = [u1[0], u2[0], u1[1], u2[1]]; if (U[0] * U[3] <= 0) { U[0] = -1; U[2] = -1; V[0] = -1; V[2] = -1; } return { U: U, S: S, VT: [V[0], V[3], V[1], V[4]] }; }, /* Create matrix from two axis / fromQuad: function (a1, a2) { return [a1[0], a2[0], a1[1], a2[1]]; }, / Apply pjs matrix operations / applyOps: function (m) { var ops = this.svd(m); //scale(ops.correct[0], ops.correct[1]); rotate(ops.theta); scale(ops.scale[0], ops.scale[1]); rotate(ops.phi); }, / Second method / applyOps2: function (m) { var ops = {}; var results = this.svd2(m); if (!results) { return null; } if (this.determinant(m) < 0) { var a = m[0], b = m[1], c = m[2], d = m[3]; ops.rot0 = atan2(c, a); var uY = vec2.rotate([b, d], -ops.rot0); m[0] = Math.sqrt(a a + c * c); m[1] = uY[0]; m[2] = 0; m[3] = -uY[1]; ops.initSy = -1; } else { ops.rot0 = 0; ops.initSy = 1; } ops.rot1 = atan2(results.U[2], results.U[0]); ops.sx = results.S[0]; ops.sy = results.S[1]; ops.rot2 = atan2(results.VT[2], results.VT[0]); rotate(ops.rot0); scale(1, ops.initSy); rotate(ops.rot1); scale(ops.sx, ops.sy); rotate(ops.rot2); }, /* Third method oml WORKS YES / applyOps3: function (m) { var d = Math.sqrt(m[0] m[0] + m[2] * m[2]); var u = [m[0] / d, m[2] / d]; var p = [-u[1], u[0]]; var s = m[1] * u[0] + m[3] * u[1]; var h = m[1] * p[0] + m[3] * p[1]; s /= h; rotate(atan2(m[2], m[0])); if (abs(s) > 0.01) { shearX(s); } scale(d / 50, h / 50); }, /* Calculate inverse of a 2x2 matrix / inverse: function (m) { var d = 1 / this.determinant(m); return [ m[3] d, -m[1] * d, -m[2] * d, m[0] * d ]; }, }; /* 3D Vector library / var vec3 = { / Create a new vector / new: function (x, y, z) { return [x, y, z]; }, / Create a new vector based on a quaternion / fromQuaternion: function (q) { return [q[1], q[2], q[3]]; }, / Add two vectors / add: function (u, v) { return [u[0] + v[0], u[1] + v[1], u[2] + v[2]]; }, / Subtract two vectors / sub: function (u, v) { return [u[0] - v[0], u[1] - v[1], u[2] - v[2]]; }, / Scale vector u by scale f / scl: function (u, f) { return [u[0] f, u[1] * f, u[2] * f]; }, /* Cross product between two vectors / cross: function (u, v) { return [ u[1] v[2] - v[1] * u[2], u[2] * v[0] - v[2] * u[0], u[0] * v[1] - v[0] * u[1] ]; }, /* Average point in a face / center: function (a, b, c, d) { return [ (a[0] + b[0] + c[0] + d[0]) / 4, (a[1] + b[1] + c[1] + d[1]) / 4, (a[2] + b[2] + c[2] + d[2]) / 4, ]; }, / Square magnitude of a vector / dot2: function (u) { return u[0] u[0] + u[1] * u[1] + u[2] * u[2]; }, /* Orthogontal projection / ortho: function (v) { return [v[0] 300 + 300, v[1] * 300 + 300]; }, /* Magnitude of a vector / mag: function (v) { return Math.sqrt(v[0] v[0] + v[1] * v[1] + v[2] * v[2]); }, /* Normalize a vector / normalize: function (v) { var s = 1 / Math.sqrt(v[0] v[0] + v[1] * v[1] + v[2] * v[2]); return [v[0] * s, v[1] * s, v[2] * s]; }, }; /* Quaternion library / var quat = { / Create a new quaternion / fromCoordinates: function (r, i, j, k) { / Real + 3 imagninary components / return [r, i, j, k]; }, / Create a quaternion based on axis and theta / fromAngle: function (axis, theta) { axis = vec3.normalize(axis); var st = Math.sin(theta / 2); return this.normalize([ Math.cos(theta / 2), axis[0] st, axis[1] * st, axis[2] * st ]); }, /* Create a quaternion from a vector / fromVector: function (v) { return [0, v[0], v[1], v[2]]; }, / Get axis and theta of quaternion / getAngle: function (q) { / Retrieve information / var r = q[0], i = q[1], j = q[2], k = q[3]; var m = Math.sqrt(i i + j * j + k * k); return { axis: vec3.scl([i, j, k], 1 / m), theta: 2 * Math.atan2(m, r) }; }, /* Get conjugate quaternion / conjugate: function (q) { var r = q[0], i = q[1], j = q[2], k = q[3]; var m = r r + i * i + j * j + k * k; return [r / m, -i / m, -j / m, -k / m]; }, /* Create a quaternion based on a rotation matrix / fromMatrix: function (m) { // 0 = Rt(R - I)u + (R - I)u // = (RtR - Rt + R - I)u // = (I - Rt + R - I)u // = (R - Rt)u // [u]x = (R - Rt) = u x u = 0 var axis = [m[7] - m[5], m[2] - m[6], m[3] - m[1]]; // \|u\| = 2 sin theta var theta = Math.asin(vec3.mag(axis) 0.5); if (axis[0] + axis[1] + axis[2] === 0) { axis[0] = 1; } return this.fromAngle(axis, theta); }, /* Normalize a quaternion / normalize: function (q) { var qm = q[0] q[0] + q[1] * q[1] + q[2] * q[2] + q[3] * q[3]; if (qm === 0) { return [1, 0, 0, 0]; } qm = 1 / Math.sqrt(qm); return [q[0] / qm, q[1] / qm, q[2] / qm, q[3] / qm]; }, /* Add two quaternions / add: function (a, b) { return [a[0] + b[0], a[1] + b[1], a[2] + b[2], a[3] + b[3]]; }, / Subtract one quaternion from another / sub: function (a, b) { return [a[0] - b[0], a[1] - b[1], a[2] - b[2], a[3] - b[3]]; }, / Dot product of two quaternions / dot: function (a, b) { return a[0] b[0] + a[1] * b[1] + a[2] * b[2] + a[3] * b[3]; }, /* Scale a quaternion / scl: function (a, f) { return [a[0] f, a[1] * f, a[2] * f, a[3] * f]; }, /* Spherical interpolation of two quaternions / slerp: function (a, b, t) { a = this.normalize(a); b = this.normalize(b); var dt = this.dot(a, b); if (dt < 0) { a = this.scl(a, -1); dt = -1; } var dot_threshold = 0.9995; /* If it's too close then linearly interp / if (dt > dot_threshold) { var res = this.lerp(a, b, t); return this.normalize(res); } var theta0 = Math.acos(dt); var theta = theta0 t; var st = Math.sin(theta); var st0 = Math.sin(theta0); var s0 = Math.cos(theta) - dt * st / st0; var s1 = st / st0; return [ a[0] * s0 + b[0] * s1, a[1] * s0 + b[1] * s1, a[2] * s0 + b[2] * s1, a[3] * s0 + b[3] * s1 ]; }, /* Linear interpolation of two quaternions / lerp: function (a, b, t) { / Only used when two quaternions are very close / return [ a[0] + (b[0] - a[0]) t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t, a[3] + (b[3] - a[3]) * t, ]; }, /* Multiply two quaternions / mul: function (a, b) { / Hamilton product, based on ijk = i^2 = j^2 = k^2 = -1 / var a1 = a[0], a2 = b[0], b1 = a[1], b2 = b[1], c1 = a[2], c2 = b[2], d1 = a[3], d2 = b[3]; return [ a1 a2 - b1 * b2 - c1 * c2 - d1 * d2, a1 * b2 + b1 * a2 + c1 * d2 - d1 * c2, a1 * c2 - b1 * d2 + c1 * a2 + d1 * b2, a1 * d2 + b1 * c2 - c1 * b2 + d1 * a2 ]; }, /* Transform a point based on a quaternion / transform: function (q, v) { / p' = qp(q^-1) / var inv = this.conjugate(q); var p = this.fromVector(v); var res = this.mul(q, this.mul(p, inv)); return vec3.fromQuaternion(res); }, / Clone a quaternion / clone: function (q) { return [q[0], q[1], q[2], q[3]]; }, }; / What to draw on each cube / var scenes = [ / Balls / (function () { / Graphics unit only for the blur effect/ var g = createGraphics(400, 400, P2D); g.init = true; var ballz = []; / Mouse radius / var mr = 20; / Number of balls / var N = 20; / rc = random color / var rc = function () { return color(random(55, 212), random(55, 212), random(55, 212)); }; ballz.add = function (x, y, radius, col) { this.push({ x: x, y: y, vx: 0, vy: 0, radius: radius, color: col, light: lerpColor(col, 0xffffffff, 0.3) }); }; / Draw style similar to that of agar.io / ballz.displayAll = function () { g.strokeWeight(4); this.forEach(function (ele, indx, arr) { g.stroke(ele.color); g.fill(ele.light); g.pushMatrix(); g.translate(ele.x, ele.y); g.scale(ele.radius / 10); g.ellipse(0, 0, 20, 20); g.popMatrix(); }); }; for (var i = 0; i < N; i ++) { ballz.add(random(20, 400 - 20), random(20, 400 - 20), random(10, 20), rc()); } return function (mx, my) { g.noStroke(); / Draw background on the real canvas / fill(255); rect(0, 0, 400, 400); if ((mx > 0 && my > 0 && mx < 400 && my < 400) \|\| g.init) { g.init = false; / Blur effect on the fake canvas / g.fill(255, 255, 255, 20); g.rect(0, 0, 400, 400); ballz.displayAll(); var mx = constrain(mx, mr + 2, 400 - mr - 2); var my = constrain(my, mr + 2, 400 - mr - 2); g.stroke(74, 74, 74); g.fill(173, 173, 173); g.ellipse(mx, my, mr 2, mr * 2); for (var i = N; i --;) { var a = ballz[i]; for (var j = i; j --;) { var b = ballz[j]; var pbx = b.x; var pby = b.y; var pax = a.x; var pay = a.y; var dx = b.x - a.x; var dy = b.y - a.y; var dm = sq(dx) + sq(dy); if (dm < sq(a.radius + b.radius)) { dm = Math.sqrt(dm); dx /= dm; dy /= dm; /* Correct ball position / var cr = a.radius / (a.radius + b.radius) dm; var cx = a.x + cr * dx; var cy = a.y + cr * dy; a.x = cx - dx * (a.radius + 0.01); a.y = cy - dy * (a.radius + 0.01); b.x = cx + dx * (b.radius + 0.01); b.y = cy + dy * (b.radius + 0.01); /* This isn't how a real ball bounces but too bad / var bm = sqrt(sq(b.vx) + sq(b.vy)); var am = sqrt(sq(a.vx) + sq(a.vy)); b.vx = dx 0.5 * am; b.vy = dy * 0.5 * am; a.vx = -dx * 0.5 * bm; a.vy = -dy * 0.5 * bm; } } a.x += a.vx; a.y += a.vy; //a.vx = 0.90; //a.vy = 0.90; var dx = a.x - mx; var dy = a.y - my; var dm = sq(dx) + sq(dy); if (dm < sq(a.radius + mr)) { dm = Math.sqrt(dm); dx /= dm; dy /= dm; /* Correct ball position / a.x = mx + dx (a.radius + mr); a.y = my + dy * (a.radius + mr); /* Again, cheap velocity fix / a.vx += dx dm * 0.05; a.vy += dy * dm * 0.05; } /* Check for edges and reflect velocity / if (a.x < a.radius + 2) { a.x = a.radius + 2; a.vx = -1; } if (a.y < a.radius + 2) { a.y = a.radius + 2; a.vy = -1; } if (a.x > 400 - a.radius - 2) { a.x = 400 - a.radius - 2; a.vx = -1; } if (a.y > 400 - a.radius - 2) { a.y = 400 - a.radius - 2; a.vy = -1; } } } / Draw fake canvas on real canvas / image(g, 0, 0); }; }) (), / Loadpixels/updatepixels / (function () { / preload text / var tg = createGraphics(400, 400, P2D); tg.textAlign(3, 3); tg.background(0, 0, 0, 0); tg.textSize(30); tg.fill(0); tg.text("Welcome to\nCubic Quadrilaterals", 200, 52); tg.fill(255); tg.text("Welcome to\nCubic Quadrilaterals", 200, 50); tg.textSize(25); tg.fill(0, 0, 0); tg.text("Drag to rotate the cube", 200, 151); tg.text("Press keys 1-6 to\njump directly to\na face", 200, 251); tg.text("Each face is interactive\nand only moves when\nyou mouse over", 200, 351); tg.fill(255); tg.text("Drag to rotate the cube", 200, 150); tg.text("Press keys 1-6 to\njump directly to\na face", 200, 250); tg.text("Each face is interactive\nand only moves when\nyou mouse over", 200, 350); tg = tg.get(); / graphics unit small since we want a gradient anyways / var g = createGraphics(64, 64, P2D); g.loadPixels(); var pixels = g.imageData.data; g.init = true; return function (mx, my) { if ((mx > 0 && my > 0 && mx < 400 && my < 400) \|\| g.init) { g.init = false; for (var x = 0; x < 64; x ++) { for (var y = 0; y < 64; y ++) { var l = x + (y << 6) << 2; var dx = (x - mx 64 / 400) / 200; var dy = (y - my * 64 / 400) / 200; var dm = dx * dx + dy * dy; pixels[l] = x * 4 * 0.5 + 0.25 * 255; pixels[l+1] = y * 4 * 0.5 + 0.25 * 255; pixels[l+2] = dm * 255 * 25; } } g.updatePixels(); } image(g, 0, 0, 400, 400); image(tg, 0, 0); }; }) (), /* Rows of boxes with glowing circles (scrapped) / // (function () { // / Number of rows/columns and how far apart each space is / // var N = 5; // var stepSize = 400 / N; // / Box animation time and box color / // var boxT = []; // var boxC = []; // for (var i = 0; i < N N; i ++) { // boxT[i] = 0; // boxC[i] = color(random(55, 212), random(55, 212), random(55, 212)); // } // /* Is value inside range / // var isInside = function (x, minimum, maximum) { // return x >= minimum && x < maximum; // }; // / Preload box graphic / // var boxG = createGraphics(16, 16, P2D); // boxG.noStroke(); // boxG.background(196, 196, 196); // boxG.fill(133, 74, 10); // boxG.rect(0, 8, 16, 8); // boxG.fill(214, 182, 19); // boxG.rect(0, 8, 16, 2); // boxG.rect(0, 8, 2, 4); // boxG.rect(16 - 2, 8, 2, 4); // boxG.fill(0, 0, 0, 5); // for (var i = 0; i < 8; i += 1) { // boxG.rect(0, i, 16, 8 - i); // } // boxG = boxG.get(); // var g = createGraphics(400, 400, P2D); // g.init = true; // return function (mx, my) { // if ((mx > 0 && mx < 400 && my > 0 && my < 400) \|\| g.init) { // g.init = false; // / Draw background / // g.noStroke(); // g.fill(209, 209, 209); // g.rect(0, 0, 400, 400); // / Loop through boxes / // for (var i = 0; i < N N; i ++) { // var x = i % N; // var y = i / N \| 0; // g.pushMatrix(); // g.translate((x + 0.5) * stepSize, (y + 0.5) * stepSize); // g.scale(stepSize / 20); // g.image(boxG, -8, -8); // g.fill(boxC[i]); // g.ellipse(0, -4, boxT[i] * 8, boxT[i] * 8); // g.popMatrix(); // if (isInside(mx - x * stepSize, 0, stepSize) && isInside(my - y * stepSize, 0, stepSize)) { // boxT[i] += (1 - boxT[i]) / 2; // } else { // boxT[i] += (0 - boxT[i]) / 30; // } // } // } // image(g, 0, 0); // }; // }) (), /* Sand / (function () { var cmap = []; var fmap = []; var SIZE = 100; var g = createGraphics(SIZE, SIZE, P2D); var cols = [ color(183, 230, 247), color(97, 158, 224), color(18, 73, 235), color(245, 224, 161), color(156, 117, 19), color(50) ]; for (var x = 0; x < SIZE; x ++) { for (var y = 0; y < SIZE; y ++) { cmap[x + y SIZE] = Math.random() * cols.length \| 0; fmap[x + y * SIZE] = 0; } } var step = function () { for (var rx = 0; rx < SIZE; rx ++) { //var side = (rx % 2) * 2 - 1; //var x = 50 + side * (50-ceil(rx/2)); var x = rx; for (var y = SIZE; --y > 0; ) { var l = x + y * SIZE; var cur = cmap[l]; var up = cmap[l - SIZE]; var down = cmap[l + SIZE]; var bottomLeft = cmap[l - 1 + SIZE]; var bottomRight = cmap[l + 1 + SIZE]; if (fmap[l] !== 0) { continue; } if (y > 0 && up > cur && fmap[l - SIZE] < 1) { fmap[l] = up; fmap[l - SIZE] = cur; continue; } if (y < SIZE - 1 && down < cur && fmap[l + SIZE] < 1) { fmap[l] = down; fmap[l + SIZE] = cur; continue; } if (x < SIZE - 1 && bottomRight < cur && fmap[l + 1 + SIZE] < 1) { fmap[l] = bottomRight; fmap[l + 1 + SIZE] = cur; continue; } if (x > 0 && bottomLeft < cur && fmap[l - 1 + SIZE] < 1) { fmap[l] = bottomLeft; fmap[l - 1 + SIZE] = cur; continue; } if (y > 0 && up === cur) { if (x > 0) { var left = cmap[l - 4]; if (left < cur) { } } } fmap[l] = -1; } } for (var i = 0; i < SIZE * SIZE; i ++) { if (fmap[i] === -1) { fmap[i] = cmap[i]; } cmap[i] = fmap[i]; fmap[i] = 0; } }; return function (mx, my) { g.loadPixels(); var pix = g.imageData.data; for (var x = 0; x < SIZE; x ++) { for (var y = 0; y < SIZE; y ++) { var l = x + y * SIZE << 2; var c = cols[cmap[l >> 2]]; pix[l + 0] = red(c); pix[l + 1] = green(c); pix[l + 2] = blue(c); } } g.updatePixels(); if (mx > 0 && my > 0 && mx < 400 && my < 400 && mouseIsPressed) { var x = (mx / 400) * SIZE \| 0; var y = (my / 400) * SIZE \| 0; for (var ix = -2; ix <= 2; ix ++) { for (var iy = -2; iy <= 2; iy ++) { var rx = constrain(x + ix, 0, SIZE - 1), ry = constrain(y + iy, 0, SIZE - 1); cmap[rx + ry * SIZE] = mouseButton === LEFT ? 0 : 3; } } } step(); image(g.get(), 0, 0, 400, 400); }; }) (), /* chessboard with coins, able to be flipped / (function () { / Chess board positions / var cb = []; var tcb = []; for (var i = 0; i < 64; i ++) { cb[i] = random(1) > 0.5 ? -1 : 1; tcb[i] = cb[i] + 0; } / Coin color / var c1 = color(199, 195, 199); var c2 = color(255, 255, 255); / Font colors / var f1 = color(53, 97, 230); var f2 = color(143, 86, 17); / Lighter versions of font colors / var lf = 0.3; var f3 = lerpColor(f1, 0x0, lf); var f4 = lerpColor(f2, 0x0, lf); / preload background / var s = 400 / 8; var back = createGraphics(400, 400, P2D); back.noStroke(); for (var i = 0; i < 64; i ++) { var x = i & 7; var y = i >> 3; back.fill(i&1^i>>3&1?c1:c2); back.rect(x s, y * s, s, s); } var font = createFont("trebuchet ms"); /* preload coin images / var coin0 = createGraphics(s, s, P2D); coin0.textFont(font, 20); coin0.background(0, 0, 0, 0); coin0.textAlign(3, 3); coin0.noStroke(); coin0.fill(f1); coin0.ellipse(s / 2, s / 2, s 0.8, s * 0.8); coin0.fill(f3); coin0.text("1", s / 2, s / 2 + 1); coin0.text("1", s / 2, s / 2 - 1); coin0.fill(255); coin0.text("1", s / 2, s / 2); coin0 = coin0.get(); var coin1 = createGraphics(s, s, P2D); coin1.textFont(font, 20); coin1.background(0, 0, 0, 0); coin1.textAlign(3, 3); coin1.noStroke(); coin1.fill(f2); coin1.ellipse(s / 2, s / 2, s * 0.8, s * 0.8); coin1.fill(f4); coin1.text("0", s / 2, s / 2 + 1); coin1.text("0", s / 2, s / 2 - 1); coin1.fill(255); coin1.text("0", s / 2, s / 2); coin1 = coin1.get(); /* Polynomial smoothstep between -1 and 1 / var smoothstep = function (x) { return sq(x + 1) (1 - x / 2) - 1; }; /* Is value inside range / var isInside = function (x, minimum, maximum) { return x >= minimum && x < maximum; }; var random = Math.random; var g = createGraphics(400, 400, P2D); g.init = true; return function (mx, my) { if ((mx > 0 && mx < 400 && my > 0 && my < 400) \|\| g.init) { g.init = false; g.image(back, 0, 0); g.noStroke(); for (var i = 0; i < 64; i ++) { var x = i & 7; var y = i >> 3; var scl = smoothstep(cb[i]); / Draw the coin / g.pushMatrix(); g.translate((x + 0.5) s, (y + 0.5) * s); if (scl !== 0) { g.scale(1, scl); g.image(scl < 0 ? coin0 : coin1, -s / 2, -s / 2, s, s); } g.popMatrix(); /* Change board positions / if (cb[i] !== tcb[i]) { cb[i] += (tcb[i] > cb[i]) ? 0.1 : -0.1; } if (isInside(mx - x s, 0, s) && isInside(my - y * s, 0, s) && clicked) { tcb[i] = -1; } if (random() < 0.0001) { tcb[i] = -1; } } } image(g, 0, 0); }; }) (), /* 3d sphere / (function () { / Load initial noise pattern (no shading) / var og = createGraphics(200, 200, P2D); og.loadPixels(); var p = og.imageData.data; for (var x = 0; x < 200; x ++) { for (var y = 0; y < 200; y ++) { var rx = x / 100 - 1, ry = y / 100 - 1; var rz = rx rx + ry * ry; var l = x + y * 200 << 2; if (rz >= 1) { rz = 1; } else { rz = Math.sqrt(1 - rz); } var n = noise(rx * 2, ry * 2, rz * 2); p[l] = n * 255; p[l+1] = n * 255; p[l+2] = n * 255; } } og.updatePixels(); /* New graphics unit & pixels / var g = createGraphics(200, 200, P2D); g.loadPixels(); var pixels = g.imageData.data; g.init = true; return function (mx, my) { if ((mx > 0 && mx < 400 && my > 0 && my < 400) \|\| g.init) { g.init = false; / Calculate light direction (light x, y, z) / var lx = (mx - 200) / 200; var ly = (my - 200) / 200; var lz = 1; var lm = 1 / Math.sqrt(lx lx + ly * ly + 1); lx = lm; ly = lm; lz = lm; for (var x = 0; x < 200; x ++) { for (var y = 0; y < 200; y ++) { / Determine sphere coordinates / var rx = x / 100 - 1, ry = y / 100 - 1; var rz = rx rx + ry * ry; var l = x + y * 200 << 2; if (rz >= 1) { rz = 1; } else { rz = Math.sqrt(1 - rz); } /* Calculate shade / var shade = lx rx + ly * ry + lz * rz; if (shade < 0) { pixels[l] = pixels[l+1] = pixels[l+2] = 0; continue; } /* Apply shade to noise pattern / pixels[l] = p[l] shade; pixels[l+1] = p[l] * shade; pixels[l+2] = p[l] * shade; } } g.updatePixels(); } /* Draw to real canvas / image(g, 0, 0, 400, 400); }; }) (), / image of the screen / (function () { / wow so much code smh / var g = createGraphics(400, 400, P2D); return function (mx, my) { g.background(143, 10, 46); g.pushMatrix(); g.translate(200, 200); var rot = frameCount 0.01; var scl = 1/(abs(Math.sin(rot))+abs(Math.cos(rot))); g.rotate(rot); g.scale(scl, -scl); g.fill(0, 0, 0); g.rect(-200, -200, 400, 400); g.image(screenshot, -200, -200, 400, 400); g.fill(0, 0, 0, 10); g.rect(-200, -200, 400, 400); g.popMatrix(); image(g.get(), 0, 0); }; }) (), ]; /* Faces / var faces = [ 0, 2, 3, 1, / z = 0 / 4, 5, 7, 6, / z = 1 / 0, 1, 5, 4, / y = 0 / 2, 6, 7, 3, / y = 1 / 0, 2, 6, 4, / x = 0 / 1, 3, 7, 5, / x = 1 / ]; / Get position of a point (so we don't need a nodes array) / var getPos = function (n) { / Uses bits in decimal number to encode the XYZ position / return [ (n & 1) - 0.5, // first bit (n >> 1 & 1) - 0.5, // second bit (n >> 2 & 1) - 0.5 // third bit ]; }; / Processing.js stuff / noStroke(); textAlign(3, 3); var fnt = createFont("trebuchet ms"); textFont(fnt, 30); smooth(); / frots = Face rotations / var sqrt22 = sqrt(2)/2; var frots = [ / These rotations were calculated by transforming matricies to quaternions / quat.fromCoordinates(1, 0, 0, 0), // imgData quat.fromCoordinates(0.5, -0.5, -0.5, -0.5), // image of screen quat.fromCoordinates(0, -sqrt22, sqrt22, 0), // balls quat.fromCoordinates(0.5, 0.5, -0.5, -0.5), // checkerboard quat.fromCoordinates(-0.5, 0.5, -0.5, -0.5), // sphere quat.fromCoordinates(0.5, -0.5, 0.5, -0.5), // chests ]; / Current rotation quaternion / var curRot = quat.fromCoordinates(1, 0, 0, 0); / Handles transitions between rotations / var transition = { start: function (targetFace) { / Reset variables / this.from = quat.clone(curRot); this.target = frots[targetFace]; this.time = 0; this.running = true; }, update: function () { if (this.running) { / Spherical interpolation / curRot = quat.slerp(this.from, this.target, smoothstep(this.time)); if (this.time < 1) { this.time += 0.01; } else { this.time = 1; this.running = false; } } }, }; / Handles buttons at the top / var buttonT = [0, 0, 0, 0, 0, 0]; / Handles the logo / var logo = (function () { var imgs = { masks: function () { var fnt = createFont("trebuchet ms Bold"); var g2 = createGraphics(400, 400, P2D); var g = createGraphics(400, 400, P2D); g.background(0); g.textAlign(3, 3); g.fill(255); g.textFont(fnt, 130); g.text("XACER", 200, 200); g2.background(0); g2.textAlign(3, 3); g2.textFont(fnt, 130); g2.fill(255); g2.text("XACER", 200, 200); g2.loadPixels(); g.loadPixels(); var pix = g.imageData.data; var pix2 = g2.imageData.data; for (var x = 0; x < 400; x ++) { for (var y = 0; y < 400; y ++) { var n = noise(x / 100, y / 30) > 0.5; var l = x + y 400 << 2; if (pix[l] !== 0) { pix[l] = pix[l+1] = pix[l+2] = n * pix[l]; pix2[l] = pix2[l+1] = pix2[l+2] = (1-n)pix2[l]; } } } g.updatePixels(); g2.updatePixels(); g = g.get(); g2 = g2.get(); return [g, g2]; }, texA: function () { var makeLine = function (x1, y1, x2, y2) { var dx = x2 - x1, dy = y2 - y1; var dm = 1 / Math.sqrt(dx dx + dy * dy); return [x1,y1,-dy * dm,dx * dm ]; }; var getSide = function (l, x, y) { var dx = l[0] - x; var dy = l[1] - y; return (l[2] * dx + l[3] * dy > 0) ? 1 : 0; }; var lines = []; var N = 75; var n = 4; for (var i = 0; i < N; i ++) { lines.push(makeLine(random(0, 400), random(0, 400), random(0, 400), random(0, 400))); } var g = createGraphics(400, 400, P2D); g.loadPixels(); var p = g.imageData.data; var baseCol = color(230, 47, 23); var darkCol = color(240, 104, 14); for (var x = 0; x < 400; x ++) { for (var y = 0; y < 400; y ++) { var s = 0; var l = x + y * 400 << 2; for (var i = 0; i < N; i ++) { s += getSide(lines[i], x, y); } var c = (s % n) / (n - 1); var col = lerpColor(baseCol, darkCol, c); p[l + 0] = col >> 16 & 0xff; p[l + 1] = col >> 8 & 0xff; p[l + 2] = col & 0xff; } } g.updatePixels(); return g.get(); }, texB: function () { var n = Math.random() * 255 \| 0; var g = createGraphics(400, 400, P2D); g.loadPixels(); var pix = g.imageData.data; for (var x = 0; x < 400; x ++) { for (var y = 0; y < 400; y ++) { var l = x + y * 400 << 2; var c = (x / 400 * 255) ^ (y / 400 * 255); pix[l + 0] = sin(c) * 128 + 128; pix[l + 1] = cos(255 - c) * 128 + 127; pix[l + 2] = cos(c ^ (255 - (x + y) / 800 * 255)) * 128 + 128; } } g.updatePixels(); return g.get(); }, }; var allImgs = Object.keys(imgs); var loadProgress = 0; var loadImgs = function () { imgs[allImgs[loadProgress]] = imgs[allImgs[loadProgress++]](); }; var smoothstep = function (x) { return -sq(x - 1) + 1; }; var cstep = function (t) { return (-pow(2t-1.52,2)+2.23)/2; }; var smoothstep2 = function (x) { return x x * (3 - 2 * x); }; var shakex = 0, shakey = 0; var at = 0; var arcRadius = width * Math.sqrt(2); var arcCols = []; for (var i = 0; i < 8; i ++) { var n = Math.random() * 20 + 0; arcCols.push(color(n)); } var overlay = createGraphics(600, 600, P2D); overlay.background(0, 0, 0, 0); overlay.noFill(); for (var i = 0; i < 50; i ++) { overlay.stroke(0, 0, 0, (20 - i) / 20 * 255); overlay.rect(i, i, 600 - i * 2, 600 - i * 2); } overlay = overlay.get(); return { loading: true, running: false, runningOutro: false, load: function () { loadImgs(); if (loadProgress >= allImgs.length) { imgs.texA.mask(imgs.masks[0]); imgs.texB.mask(imgs.masks[1]); this.loading = false; this.running = true; } return loadProgress / allImgs.length; }, run: function () { var lf = constrain((at - 100) / 50, 0, 1); noStroke(); if (lf > 0) { pushMatrix(); translate(300, 300); var rot = smoothstep(lf); rotate(rot * 360); scale(lf); for (var i = 0; i < 8; i ++) { var a = i / 8 * 360; fill(arcCols[i]); arc(0, 0, arcRadius, arcRadius, a, a + 45); } popMatrix(); } pushMatrix(); translate(shakex, shakey); var lf = 1 - cstep(constrain(at / 100, 0, 1)); var scl = smoothstep(constrain(at / 100, 0, 1)); var rot = smoothstep2(scl) * 360; pushMatrix(); translate(-lf * 300 + 400, -lf * 300 + 400); scale(scl); rotate(rot); image(imgs.texA, -300, -300); popMatrix(); pushMatrix(); translate(lf * 300 + 400, lf * 300 + 400); scale(scl); rotate(rot); image(imgs.texB, -300, -300); popMatrix(); popMatrix(); image(overlay, 0, 0); var lf = constrain((at - 200) / 50, 0, 1); if (lf > 0) { var lf2 = smoothstep(lf); fill(122, 120, 122); pushMatrix(); translate(300, 300); var rot = smoothstep(lf) * 180; rotate(rot + 45); rect(-500 - (1 - lf2) * 600, -500, 500, 1000); rect(-1 + (1 - lf2) * 600, -500, 500, 1000); popMatrix(); } if (at > 250) { this.running = false; this.runningOutro = true; at = 0; } if (at === 100) { shakex = Math.random() * 15; shakey = Math.random() * 15; } shakex = 0.9; shakey = 0.9; at ++; }, outro: function () { var lf = constrain(at / 50, 0, 1); var lf2 = smoothstep(lf); fill(122, 120, 122); pushMatrix(); translate(300, 300); var rot = smoothstep(lf) * 180; rotate(rot + 45); rect(-500 - lf2 * 600, -500, 500, 1000); rect(-1 + lf2 * 600, -500, 500, 1000); popMatrix(); at ++; if (at > 50) { this.runningOutro = false; } }, }; }) (); /* Is the mouse outside the box? / var canDrag = true; var isDragging = false; / Precalc the background image / var backgroundImage = (function () { var g = createGraphics(600, 600, P2D); g.background(50, 176, 235); g.noStroke(); g.fill(5, 143, 235); for (var x = 0; x < 600; x += 20) { for (var y = 0; y < 600; y += 20) { if ((x + y) % 40 === 0) { g.triangle(x, y, x + 20, y, x + 20, y + 20); } else { g.triangle(x, y, x, y + 20, x + 20, y + 20); } } } return g.get(); }) (); / Pick a different cursor for different states of the mouse / var chooseCursor = function () { cursor(ARROW); if (canDrag && !isDragging) { cursor(HAND); } else if (isDragging) { cursor("grab"); } }; / Draw each side of the cube / var main = function () { chooseCursor(); / Draw background image / image(backgroundImage, 0, 0); / UI at the bottom / fill(19, 52, 153); rect(0, height - width / 12 + width / 24, width, width / 24); for (var i = 0; i < 6; i ++) { pushMatrix(); translate(i / 6 width, height - width / 12 - width / 48); scale((1 / 6 * width) / 40); translate(20, 12 - 6 * buttonT[i]); scale(0.20); fill(33, 60, 235); rect(-100, -6 * 5, 200, 15 * 5); fill(255); text("Jump to " + (i+1), 0, 0); popMatrix(); if (floor(mouseX / (width / 6)) === i && mouseY > height - 6 / 40 * width / 2 - width / 48) { buttonT[i] += (1 - buttonT[i]) / 10; if (clicked) { transition.start(i); } } else { buttonT[i] += (0 - buttonT[i]) / 10; } } /* Calculate rotation quaternion / transition.update(); / Check for arrow keys / if (!transition.running) { if (keyCodes[LEFT]) { curRot = quat.mul(quat.fromAngle([0, 1, 0], 0.01), curRot); } if (keyCodes[RIGHT]) { curRot = quat.mul(quat.fromAngle([0, 1, 0], -0.01), curRot); } if (keyCodes[UP]) { curRot = quat.mul(quat.fromAngle([1, 0, 0], -0.01), curRot); } if (keyCodes[DOWN]) { curRot = quat.mul(quat.fromAngle([1, 0, 0], 0.01), curRot); } } / Calculate draw queue / var toDraw = []; for (var i = 0; i < faces.length; i += 4) { // i += 4 / Get points and transform them / var p1 = quat.transform(curRot, getPos(faces[i])); var p2 = quat.transform(curRot, getPos(faces[i+1])); var p3 = quat.transform(curRot, getPos(faces[i+2])); var p4 = quat.transform(curRot, getPos(faces[i+3])); / 3D sides / var d1 = vec3.sub(p2, p1); var d2 = vec3.sub(p4, p1); / Get surface normal / var cp = vec3.cross(d1, d2); / Fix normal if necessary / var ce = vec3.center(p1, p2, p3, p4); if (vec3.dot2(vec3.add(ce, cp)) < vec3.dot2(vec3.sub(ce, cp))) { cp[0] = -1; cp[1] = -1; cp[2] = -1; } /* Backface culling / if (cp[2] < -0.1) { continue; } / Project onto parallelogram / p1 = vec3.ortho(p1); p2 = vec3.ortho(p2); p4 = vec3.ortho(p4); / 2D sides / d1 = vec2.sub(p2, p1); d2 = vec2.sub(p4, p1); / (d1 dot d2)^2 = dot2(d2) * dot2(d1) / var angBetween = vec2.dot(d1, d2); / Another way of saying det(m) = 0 / if (Math.abs(angBetween angBetween - vec2.dot2(d2) * vec2.dot2(d1)) < 0.1) { continue; } /* Calculate matrix transformation / var mat = [ d1[0], d2[0], d1[1], d2[1] ]; var imat = mat2.inverse(mat); var mouse = vec2.scl(mat2.transform(imat, [mouseX - p1[0], mouseY - p1[1]]), 400); / Add to queue / toDraw.push({ matrix: mat, position: p1, mouse: mouse, depth: ce[2], tex: i >> 2 }); } / Sort queue to prevent glitching / toDraw.sort(function (a, b) { return a.depth - b.depth; }); / Draw queue / canDrag = true; for (var i = 0; i < toDraw.length; i ++) { var mx = toDraw[i].mouse[0], my = toDraw[i].mouse[1]; if (mx > 0 && my > 0 && mx < 400 && my < 400) { canDrag = false; } pushMatrix(); / Apply the matrix transformations / translate(toDraw[i].position[0], toDraw[i].position[1]); mat2.applyOps3(toDraw[i].matrix); / Fit to 400x400 frame / scale(0.125); / Draw the scene / scenes[toDraw[i].tex](toDraw[i].mouse[0], toDraw[i].mouse[1]); popMatrix(); } / Display frames per second / fill(0); pushMatrix(); translate(50, 20); scale(0.8); text(this.__frameRate, 0, 0); popMatrix(); clicked = false; screenshot = get(0, 0, width, height); background(55, 165, 250); image(screenshot, 0, 0); }; / Animation loop / draw = function () { if (logo.loading) { background(0, 0, 0); var perc = logo.load(); fill(20, 96, 227); text("LOADING", 300, 100); noFill(); strokeWeight(4); stroke(18, 100, 224); arc(300, 300, 150, 150, 0, perc 360); } else if (logo.running) { background(0); logo.run(); } else { main(); } if (logo.runningOutro) { logo.outro(); } }; /* Check for mouse interaction / mouseClicked = function () { clicked = true; }; mouseDragged = function () { if (canDrag \|\| isDragging) { isDragging = true; / I was debating only making it a right-click drag but that made it kinda awkward to control :/ / transition.running = false; var mx = +(mouseX - pmouseX) / 200; var my = -(mouseY - pmouseY) / 200; curRot = quat.mul(quat.fromAngle([0, 1, 0], mx), curRot); curRot = quat.mul(quat.fromAngle([1, 0, 0], my), curRot); } }; mouseReleased = function () { isDragging = false; }; / Check for key interaction / keyPressed = function () { keyCodes[keyCode] = true; }; keyReleased = function () { / Check for specific string results since I'm only checking for keyCodes / switch (key.toString()) { case "1": transition.start(0); break; case "2": transition.start(1); break; case "3": transition.start(2); break; case "4": transition.start(3); break; case "5": transition.start(4); break; case "6": transition.start(5); break; } keyCodes[keyCode] = false; }; }); / The miracle came true, 1.9k lines later */
Folds	27,96,115,117,120,122,128,135,138,192,195,437,440,505,508,676,679,1311,1314,1323,1326,1333,1344,1353,1359,1379,1385,1659,1666,1681,1684,1691,1887,1889,1890,1903,1904,1906,1909,1911
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgI3o-vHOCgw
Votes	176
Spin-Offs	4
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	xacer
Author Name	xacer
Author ID	kaid_936620259368561719366955
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739451836362
Updated	10 months ago, 1739451846898
Source Deleted	unknown