31:T1a5e,canvas = { const canvas = this || document.createElement("canvas"); canvas.setAttribute("tabindex", 0); // canvas.onclick = () => canvas.requestFullscreen(); const phi = (1 + Math.sqrt(5)) / 2; // const aspectRatio = 1 / phi; // const aspectRatio = 1; // const aspectRatio = 1440 / 2560; const aspectRatio = screen.height / screen.width; const w = Math.min(resolutionChoice.value ?? width, width); const h = Math.round(w * aspectRatio); canvas.width = w * devicePixelRatio; canvas.style.width = `${width}px`; canvas.height = h * devicePixelRatio; canvas.style.height = `${(h / w) * width}px`; canvas.style.cursor = "grab"; canvas.onpointerdown = (grabEvent) => { canvas.style.cursor = "grabbing"; let xPrev = grabEvent.x; let yPrev = grabEvent.y; // console.log(grabEvent); document.onpointermove = (moveEvent) => { event.preventDefault(); // console.log(moveEvent); const dx = moveEvent.x - xPrev; const dy = moveEvent.y - yPrev; xPrev = moveEvent.x; yPrev = moveEvent.y; directionVectors.rotX(dx / canvas.clientWidth); directionVectors.rotY(dy / canvas.clientWidth); }; document.onpointerup = (event) => { canvas.style.cursor = "grab"; document.onpointerup = null; document.onpointermove = null; }; }; function handleScrollEvent(event) { event.preventDefault(); const input = viewof viewInterpolationFactor; const value = input.value; const c = -4e-2; const newValue = clamp(value + c * Math.sign(event.deltaY), 0, 1); setInput(input, newValue); } // invalidation.then(() => // canvas.removeEventListener("scroll", handleScrollEvent) // ); // canvas.addEventListener("scroll", handleScrollEvent); canvas.onmousewheel = handleScrollEvent; function getCommandExecutor(key, iterations) { console.log({ key }); const n = iterations; const a = ((90 / 180) * Math.PI) / n; const K = 0.22522336128359255; // Hand tuned for n = 15 to error about 1e-15 function getCenterRotator(rotationSign) { const v = directionVectors.v3.values(); let maxIndex = 0; let maxAbsValue = Math.abs(v[maxIndex]); for (let i = maxIndex + 1; i < v.length; ++i) { const absValue = Math.abs(v[i]); if (absValue > maxAbsValue) { maxIndex = i; maxAbsValue = absValue; } } const directionSign = Math.sign(v[maxIndex]) || 1; const c = directionSign * rotationSign * a; switch (maxIndex) { case 0: return () => xRotate(directionSign, c); case 1: return () => yRotate(directionSign, c); case 2: return () => zRotate(directionSign, c); } } switch (key) { case "q": return () => xRotate(1, a); case "w": return () => yRotate(1, a); case "e": return () => zRotate(1, a); case "r": return () => xRotate(-1, -a); case "t": return () => yRotate(-1, -a); case "y": return () => zRotate(-1, -a); case "a": return () => xRotate(1, -a); case "s": return () => yRotate(1, -a); case "d": return () => zRotate(1, -a); case "f": return () => xRotate(-1, a); case "g": return () => yRotate(-1, a); case "h": return () => zRotate(-1, a); case "z": return getCenterRotator(1); case "x": return getCenterRotator(-1); case "arrowright": return () => directionVectors.rotX(-K / n, 0); case "arrowleft": return () => directionVectors.rotX(K / n, 0); case "arrowup": return () => directionVectors.rotY(K / n, 0); case "arrowdown": return () => directionVectors.rotY(-K / n, 0); case "0": setInput(viewof viewInterpolationFactor, 0); break; case "1": setInput(viewof viewInterpolationFactor, 1); break; } } let command; canvas.onkeydown = function setCommand(event) { // Idea for updating over several frames: // use a lock variable // copy the current state of faces // assign a function that is called by regl on every frame // this function assigns faces as an increasing appropriate rotation of the initial faces state // when the final angle (90 degrees) is reached, the function unlocks for new keypresses // we could even have a keypress queue. const n = 15; const commandExecutor = getCommandExecutor(event.key.toLowerCase(), n); if (!commandExecutor) return; event.preventDefault?.(); if (command) return; command = { execute: commandExecutor, iterationsRemaining: n }; }; let t = 0; let lastTime = 0; const period = 4; let currentViewInterpolationFactor = viewof viewInterpolationFactor.value; const regl = canvas.value || createREGL({ canvas, pixelRatio: devicePixelRatio }); const draw = regl({ vert: ` precision highp float; varying vec2 uv; attribute vec2 position; uniform float aspectRatio; void main () { uv = position * vec2(1.0 / aspectRatio, 1.0); gl_Position = vec4(position, 0, 1); }`, frag, uniforms: { aspectRatio, viewInterpolationFactor: () => { const targetViewInterpolationFactor = viewof viewInterpolationFactor .value; const d = targetViewInterpolationFactor - currentViewInterpolationFactor; const a = Math.max(0.01, Math.abs(d) / 12); currentViewInterpolationFactor = clamp( targetViewInterpolationFactor, currentViewInterpolationFactor - a, currentViewInterpolationFactor + a ); return currentViewInterpolationFactor; }, faces: () => { if (command && command.iterationsRemaining > 0) { command.execute(command.iterationsRemaining); command.iterationsRemaining -= 1; } if (command && command.iterationsRemaining <= 0) { command = null; } return faces.flat(); }, faceColors: faceColorFloatArrays.flat(), cameraMatrix: () => [ ...directionVectors.v1, // ...directionVectors.v2, ...directionVectors.v3 ] // maxSteps by cell reevaluation because for loop stop conditions can't be based on uniforms }, attributes: { position: [-4, -4, 4, -4, 0, 4] // for the vertex shader, to place the "screen triangles" }, // depth: { enable: false }, count: 3 }); let frame = regl.frame(draw); invalidation.then(() => frame.cancel()); canvas.value = regl; return canvas; }32:T82e,{ const w = 400; const theSvg = DOM.svg(w, w); const q = viewInterpolationFactor; const n = 25; const tAll = Array.from({ length: n }, (_d, i) => (2 * i) / (n - 1) - 1); const r = (w / 2) * 0.9; const rc = w / 20; const g = svg` ${q.toFixed( 2 )} `; function getPosition(uv, scale, interp) { const u = uv.x; const v = uv.y; const phi = Math.atan2(v, u); const theta = Math.PI * scale * Math.hypot(u, v); return new Vector([ -Math.sin(theta) * Math.cos(phi), -Math.sin(theta) * Math.sin(phi), -Math.cos(theta) ]); } for (let t of tAll) { const theta = t * q * Math.PI; const uv = new Vector([0, t]); const position = getPosition(uv, q, 0.5); const centerDirection = position .clone() .scaleInPlace(-1) .normalizeInPlace(); const zoom = 1; const direction = new Vector([...uv.scale(-(1 - 2 * q)), zoom]) .mixInPlace(centerDirection, q) .normalizeInPlace(); const r2 = r / 2; const x1 = r * position.z; const y1 = r * position.y; g.appendChild(svg``); g.appendChild( svg`` ); } theSvg.appendChild(g); theSvg.onmousewheel = (event) => { event.preventDefault(); const d = -0.0005 * event.deltaY; const input = viewof viewInterpolationFactor; setInput(input, clamp(input.value + d, 0, 1)); }; return theSvg; } /* float q = viewInterpolationFactor; vec3 position = R*getPosition(uv, q, 0.5); vec3 centerDirection = -normalize(position); float zoom = 1.; vec3 direction = R * normalize(vec3(-uv * (1. - 2.*q), -zoom)); direction = mix(direction, centerDirection, q); direction = normalize(direction); */33:T645,faces = { resetButton; const r = 0.15; const a = 1.5 * r; const b = 1.2 * r; const o = 0.0; const fx = [ [a, b, b, 1 / 7], [a, o, b, 1 / 7], [a, -b, b, 1 / 7], [a, b, o, 1 / 7], [a, o, o, 1 / 7], [a, -b, o, 1 / 7], [a, b, -b, 1 / 7], [a, o, -b, 1 / 7], [a, -b, -b, 1 / 7] ]; const fxi = [ [-a, b, b, 4 / 7], [-a, o, b, 4 / 7], [-a, -b, b, 4 / 7], [-a, b, o, 4 / 7], [-a, o, o, 4 / 7], [-a, -b, o, 4 / 7], [-a, b, -b, 4 / 7], [-a, o, -b, 4 / 7], [-a, -b, -b, 4 / 7] ]; const fy = [ [b, a, b, 2 / 7], [o, a, b, 2 / 7], [-b, a, b, 2 / 7], [b, a, o, 2 / 7], [o, a, o, 2 / 7], [-b, a, o, 2 / 7], [b, a, -b, 2 / 7], [o, a, -b, 2 / 7], [-b, a, -b, 2 / 7] ]; const fyi = [ [b, -a, b, 5 / 7], [o, -a, b, 5 / 7], [-b, -a, b, 5 / 7], [b, -a, o, 5 / 7], [o, -a, o, 5 / 7], [-b, -a, o, 5 / 7], [b, -a, -b, 5 / 7], [o, -a, -b, 5 / 7], [-b, -a, -b, 5 / 7] ]; const fz = [ [b, b, a, 3 / 7], [o, b, a, 3 / 7], [-b, b, a, 3 / 7], [b, o, a, 3 / 7], [o, o, a, 3 / 7], [-b, o, a, 3 / 7], [b, -b, a, 3 / 7], [o, -b, a, 3 / 7], [-b, -b, a, 3 / 7] ]; const fzi = [ [b, b, -a, 6 / 7], [o, b, -a, 6 / 7], [-b, b, -a, 6 / 7], [b, o, -a, 6 / 7], [o, o, -a, 6 / 7], [-b, o, -a, 6 / 7], [b, -b, -a, 6 / 7], [o, -b, -a, 6 / 7], [-b, -b, -a, 6 / 7] ]; const rep6 = (arr) => new Array(6).fill(arr).flat(); return [...fx, ...fy, ...fz, ...fxi, ...fyi, ...fzi]; // vec4 array }34:T432,directionVectors = { function scale(c, k) { const b = viewof viewInterpolationFactor.value; // const b = 0.5; return 7 * (1 + 0.8 * b * k) * c; // hand-tweaked parameters } const v1 = [-0.49614574539763096, -0.02100307004630967, 0.8679851786594394]; const v2 = [0.4268865617282167, -0.8764282033879338, 0.22280365284720902]; const v3 = [0.7560471299725237, 0.4810742929681735, 0.44380205261521893]; const obj = { v1: new Vector(this ? [...this.v1] : v1.slice()), v2: new Vector(this ? [...this.v2] : v2.slice()), v3: new Vector(this ? [...this.v3] : v3.slice()), rotX(c, k = 1) { this.v1.addInPlace(this.v3.scale(-scale(c, k))); this.v1.normalizeInPlace(); this.v3 = this.v1.cross(this.v2); }, rotY(c, k = 1) { this.v2.addInPlace(this.v3.scale(scale(c, k))); this.v2.normalizeInPlace(); this.v3 = this.v1.cross(this.v2); }, reset() { this.v1 = new Vector(v1.slice()); this.v2 = new Vector(v2.slice()); this.v3 = new Vector(v3.slice()); } }; return obj; }35:T732,frag_getSceneDistance = () => ` float sdBox( vec3 p, vec3 radii ) { vec3 q = abs(p) - radii; return length(max(q,0.0)) + min(max(q.x,max(q.y,q.z)),0.0); } float sdSphere(vec3 p, float radius) { return length(p) - radius; } Surface sdColSphere(vec3 p, float r, vec3 col) { float d = length(p) - r; return Surface(d, col); } Surface closestSurface(Surface obj1, Surface obj2) { if (obj1.sd <= obj2.sd) { return obj1; } else { return obj2; } } // Get distance to closest point in scene from a point float getSceneDistance(vec3 p) { float d = 100.; float smooth = 100.; // 64 for cell blob look // 200 for ok float r = 0.15; float a = 1.5 * r; float w = min(4.0 * a / pow((1.01 - viewInterpolationFactor), 4.0), 1e3); // sparsing // float w = 2.0 * a; // trippy!! // float w = 4.0 * a; // standard vec3 u = vec3(w); p = mod(p + u, vec3(2.0 * w)) - u; d = sdSphere(p - faces[0].xyz, r); for (int i = 0; i < ${faceCount}; i += 1) { d = min(d, sdSphere(p - faces[i].xyz, r)); } return d; } // Get distance to closest point in scene from a point Surface getSceneSurface(vec3 p) { float r = 0.15; float a = 1.5 * r; float w = min(4.0 * a / pow((1.01 - viewInterpolationFactor), 4.0), 1e3); // sparsing // float w = 2.0 * a; // trippy!! // float w = 4.0 * a; // standard vec3 u = vec3(w); p = mod(p + u, vec3(2.0 * w)) - u; Surface s = sdColSphere(p - faces[0].xyz, r, faceColors[0]); for (int i = 1; i < ${faceCount}; i += 1) { s = closestSurface(s, sdColSphere(p - faces[i].xyz, r, faceColors[i / ${facesPerSide}])); // s = closestSurface(s, sdColSphere(p - faces[i].xyz, r, vec3(faces[i].w))); } return s; } // Get distance to closest point in scene from a point float getSceneDistance3(vec3 p) { return sdBox(p, vec3(0.25)) - 0.01; } `36:T919,// Pretty handy class Vector { constructor(a) { this.a = a; } i(i) { return this.a[i]; } *[Symbol.iterator]() { yield* this.a; } get x() { return this.a[0]; } get y() { return this.a[1]; } get z() { return this.a[2]; } get dim() { return this.a.length; } values() { return this.a.slice(); } normalize(newLength = 1) { return this.clone().normalizeInPlace(); } normalizeInPlace(newLength = 1) { const l = Math.hypot(...this.a); if (l === 0) { throw new Error("don't normalize zero length vector"); } const s = newLength / l; return this.mapInPlace((x) => s * x); } sub(v) { return this.clone().subInPlace(v); } subInPlace(v) { return this.mapInPlace((x, i) => x - v.i(i)); } add(v) { return this.clone().addInPlace(v); } addInPlace(v) { return this.mapInPlace((x, i) => x + v.i(i)); } scale(s) { return this.clone().scaleInPlace(s); } scaleInPlace(s) { return this.mapInPlace((x) => s * x); } mix(v, t) { return this.clone().mixInPlace(v, t); } mixInPlace(v, t) { const s = 1 - t; return this.mapInPlace((x, i) => s * x + t * v.i(i)); } clamp(domain) { return this.clone().clampInPlace(domain); } clampInPlace(domain) { return this.mapInPlace((x, i) => Math.max(domain[i][0], Math.min(domain[i][1], x)) ); } cross(v) { if (this.dim !== 3 || v.dim !== 3) { throw new Error("Implemented only for 3D vectors"); // However, there is a cross product in 7D as well, I have heard. } const [x1, y1, z1] = this.a; const [x2, y2, z2] = v.a; return new Vector([ y1 * z2 - z1 * y2, z1 * x2 - x1 * z2, x1 * y2 - y1 * x2 ]); } mod(q) { return this.clone().modInPlace(q); } modInPlace(q) { return this.mapInPlace((x) => x % q); } mapInPlace(f) { for (let i = 0; i < this.a.length; i++) { this.a[i] = f(this.a[i], i); } return this; } clone() { return new Vector(this.a.slice()); } static createUniformRandom(n) { return new Vector(Array.from({ length: n }, () => -1 + 2 * Math.random())); } static createUniformRandom(domain) { return new Vector(domain.map(([a, b]) => a + (b - a) * Math.random())); } }37:[] 2f:{"title":"Wrap Your Eye Around Rubik's Cube 👁","cells":[{"id":0,"value":"md`# Wrap Your Eye Around Rubik's Cube 👁\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3086,"value":"Controls:\n```\nRotate view: mouse click and drag\nRotate face at center of view: z, x\nWrap eye around the cube: scrollwheel, 0, 1\n\nRotate faces by color clockwise: q, w, e, r, t, y\nRotate faces by color counterclockwise: a, s, d, f, g\n```","pinned":false,"hidden":false,"mode":"md"},{"id":3272,"value":"viewof resolutionChoice = {\n return Inputs.radio(resolutionOptions, {\n label: \"Resolution\",\n format: (d) => d.label, //`${d.label} (${d.value})`,\n value: resolutionOptions[1]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1274,"value":"fullscreen = {\n const button = html``;\n button.onclick = () => canvas.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1948,"value":"createViewInterpolationFactorInput()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2448,"value":"// If you want to rearrange the order of the colors, make sure to rearrange the faces, rotation functions, and key bindings as well\nhtml`

${\"qwertyasdfgh\"\n .split(\"\")\n .map((key, i) => {\n const j = i % 6;\n const button = html``;\n button.onclick = () => {\n canvas.onkeydown({ key });\n };\n return button;\n // return Inputs.button(key, { reduce: () => handleKeyPress(key) });\n })}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2432,"value":"viewof resetButton = Inputs.button(\"Reset\", {\n reduce: () => {\n directionVectors.reset();\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2714,"value":"viewof shuffle = Inputs.button(\"Shuffle\", {\n reduce: () => {\n const rotationFunctions = [xRotate, yRotate, zRotate];\n const directions = [1, -1];\n const angles = [-Math.PI / 2, Math.PI / 2];\n const pickRand = (items) => items[Math.floor(items.length * Math.random())];\n for (let i = 0; i < 100; ++i) {\n pickRand(rotationFunctions)(pickRand(directions), pickRand(angles));\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"viewof maxSteps = Inputs.range([1, 200], {\n label: \"Max ray-march steps\",\n value: 14,\n step: 1,\n width: \"100%\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3112,"value":"A technique called [ray marching](https://iquilezles.org/www/articles/raymarchingdf/raymarchingdf.htm) is used to render the cube. Usually in ray marching, rays project out from a single point. Here, we don't just project rays in different directions, but we let them start at different points! The graphic below illustrates how the ray origins and ray directions change with the _wrap factor_.\n\nScroll it to wrap!","pinned":false,"hidden":false,"mode":"md"},{"id":3166,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3238,"value":"createViewInterpolationFactorInput()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3241,"value":"---\n\n## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":2353,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2787,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2369,"value":"faceColors = [\n \"#FF5900\", // fx\n \"#FFD500\", // fy\n \"#009B48\", // fz\n \"#B90000\", // fxi\n \"#F0F0F0\", // fyi\n \"#0045AD\" // fzi\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2628,"value":"faceColorFloatArrays = {\n const q = 0.9;\n return faceColors.map((hex) => [\n (parseInt(hex.substring(1, 3), 16) / 255) * q,\n (parseInt(hex.substring(3, 5), 16) / 255) * q,\n (parseInt(hex.substring(5, 7), 16) / 255) * q\n ]); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2198,"value":"md`_Notes to self_:\n\nHere's a nice example of how to color objects in ray marching: https://www.shadertoy.com/view/fdlGWX\n\nSomething about specular shading: http://rbwhitaker.wikidot.com/specular-lighting-shader\n\nPhong shading: https://medium.com/@deshankalupahana/shaders-in-unity-specular-ec19de1043ef\n\nMore nice ray marching shading: https://www.shadertoy.com/view/tlVSRh \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2379,"value":"sideLength = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":2384,"value":"facesPerSide = sideLength ** 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":2345,"value":"faceCount = 6 * facesPerSide","pinned":true,"hidden":false,"mode":"ojs"},{"id":3251,"value":"## The shader","pinned":false,"hidden":false,"mode":"md"},{"id":1093,"value":"md`I've split the fragment shader into small _chunks_ so that I can move the canvas cell next to the chunk I'm working on, to see both the canvas and the code. This would otherwise be difficult when working on GLSL code in the middle of a large cell.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"frag_preamble = () => `\nprecision highp float;\nvarying vec2 uv;\nuniform float t;\nuniform float viewInterpolationFactor;\nuniform vec4 faces[${faceCount}];\nuniform vec3 faceColors[6];\nuniform mat3 cameraMatrix;\n\n#define PI 3.14159265358979\n#define MAX_STEPS ${maxSteps}\n#define MAX_DISTANCE 50.0\n#define HIT_DISTANCE 0.01\n\nstruct Surface {\n float sd; // signed distance value\n vec3 col; // color\n};\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"frag_getGradient = () => `\n// Finite difference approximation of the gradient of the distance field\nvec3 getGradient(vec3 p) {\n vec2 epsilon = vec2(HIT_DISTANCE, 0.0);\n float d = getSceneDistance(p);\n return d - vec3(\n getSceneDistance(p - epsilon.xyy),\n getSceneDistance(p - epsilon.yxy),\n getSceneDistance(p - epsilon.yyx)\n );\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1005,"value":"frag_getNormal = () => `\nvec3 getNormal(vec3 p) {\n return normalize(getGradient(p));\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"frag_rayMarch = () => `\n// Returns distance marched from ray origin in ray direction until limit or hit\nSurface rayMarch(\n vec3 ro, // ray origin\n vec3 rd // ray direction\n) {\n float distance = 0.0;\n Surface s;\n\n for (int i = 0; i < MAX_STEPS; ++i) {\n vec3 p = ro + rd * distance;\n s = getSceneSurface(p);\n distance += s.sd;\n if (distance > MAX_DISTANCE || s.sd < HIT_DISTANCE) break;\n }\n\n return Surface(distance, s.col);\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"frag_getLight = () => `\nfloat getLight(vec3 p) {\n vec3 lightPosition = vec3(-1, 1, 0);\n \n vec3 relativeLightPosition = lightPosition - p;\n vec3 lightDirection = normalize(relativeLightPosition);\n vec3 normal = getNormal(p);\n // scene distance in light direction\n float d = rayMarch(p + 1.1 * HIT_DISTANCE * normal, lightDirection);\n float lightDistance = length(relativeLightPosition);\n\n float diffuse = max(0.0, dot(lightDirection, normal));\n if (d < lightDistance) diffuse *= 0.3;\n\n float f = 20.0 / lightDistance;\n return diffuse * f;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1257,"value":"frag_getFisheyeRayDirection = () => `\nvec3 getFisheyeRayDirection(vec2 uv, float scale) {\n float u = uv.x;\n float v = uv.y;\n\n // Calculate spherical coordinates\n float phi = atan(v, u); // + 2.0 * PI * t / 2.0;\n float theta = PI * scale * sqrt(u*u + v*v);\n\n // Convert spherical coordinates to cartesian coordinates\n float xt = -sin(theta)*cos(phi);\n float yt = -sin(theta)*sin(phi);\n float zt = cos(theta);\n\n return vec3(xt, yt, -zt);\n\n // return vec3(zt, xt, yt);\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1380,"value":"frag_getPosition = () => `\nvec3 getPosition(vec2 uv, float scale, float interp) {\n float u = uv.x;\n float v = uv.y;\n\n // Calculate spherical coordinates\n float phi = atan(v, u); // + 2.0 * PI * t / 2.0;\n float theta = PI * scale * sqrt(u*u + v*v);\n\n // Convert spherical coordinates to cartesian coordinates\n float xt = -sin(theta)*cos(phi);\n float yt = -sin(theta)*sin(phi);\n float zt = cos(theta);\n\n return vec3(xt, yt, zt);\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"frag_main = () => `\nvoid main () {\n float q = viewInterpolationFactor;\n vec3 position = cameraMatrix * getPosition(uv, q, 0.5);\n\n vec3 centerDirection = -normalize(position);\n\n float zoom = 1.;\n vec3 direction = cameraMatrix * normalize(vec3(-uv * (1. - 2.*q), -zoom));\n\n direction = mix(direction, centerDirection, q);\n direction = normalize(direction);\n \n Surface surface = rayMarch(position, direction);\n float distance = surface.sd;\n\n vec3 point = position + distance * direction;\n\n float k = (MAX_DISTANCE - distance) / MAX_DISTANCE;\n vec3 n = getNormal(point);\n\n float diffuse = max(0.0, 0.6 - 0.4 * dot(direction, n));\n vec3 color = mix(surface.col * diffuse, vec3(1.0), 1.0 - k);\n\n gl_FragColor = vec4(color, 1.0);\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2365,"value":"function xRotate(\n sideSign, // 1 for positive side, -1 for negative side\n angleRadians\n) {\n faces\n .filter(([x, y, z]) => {\n return sideSign * x > 0.01; // should be set to include just the edge layer\n })\n .forEach((face) => {\n const c = Math.cos(angleRadians);\n const s = Math.sin(angleRadians);\n const [x, y, z] = face;\n face[1] = c * y - s * z;\n face[2] = s * y + c * z;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2423,"value":"function yRotate(\n sideSign, // 1 for positive side, -1 for negative side\n angleRadians\n) {\n faces\n .filter(([x, y, z]) => {\n return sideSign * y > 0.01; // should be set to include just the edge layer\n })\n .forEach((face) => {\n const c = Math.cos(angleRadians);\n const s = Math.sin(angleRadians);\n const [x, y, z] = face;\n face[0] = c * x + s * z;\n face[2] = -s * x + c * z;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2429,"value":"function zRotate(\n sideSign, // 1 for positive side, -1 for negative side\n angleRadians\n) {\n faces\n .filter(([x, y, z]) => {\n return sideSign * z > 0.01; // should be set to include just the edge layer\n })\n .forEach((face) => {\n const c = Math.cos(angleRadians);\n const s = Math.sin(angleRadians);\n const [x, y, z] = face;\n face[0] = c * x - s * y;\n face[1] = s * x + c * y;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1014,"value":"frag = [\n frag_preamble(),\n frag_getSceneDistance(),\n frag_getGradient(),\n frag_getNormal(),\n frag_rayMarch(),\n // frag_getLight(),\n frag_getFisheyeRayDirection(),\n frag_getPosition(),\n frag_main()\n].join(\"\\n\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"md`## Miscellaneous`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3307,"value":"resolutionOptions = [\n { label: \"Low\", value: 200 },\n { label: \"Medium\", value: 400 },\n { label: \"High\", value: 800 },\n { label: \"Full\", value: null }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3223,"value":"viewof viewInterpolationFactor = Inputs.input(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3224,"value":"function createViewInterpolationFactorInput() {\n return Inputs.bind(\n Inputs.range([0, 1], {\n label: \"Wrap factor\",\n value: 0,\n step: 1e-3,\n width: \"100%\"\n }),\n viewof viewInterpolationFactor\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3002,"value":"clamp = (x, a, b) => Math.max(a, Math.min(b, x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2996,"value":"function setInput(inputView, newValue) {\n inputView.value = newValue;\n inputView.dispatchEvent(new Event(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"createREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2792,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}