30:Ta98,{ const canvas = this || document.createElement('canvas'); canvas.width = canvas.height = size * devicePixelRatio; canvas.style.width = canvas.style.height = `${size}px`; const regl = canvas.value || createREGL({ canvas, pixelRatio: devicePixelRatio }); const draw = regl({ vert: ` precision highp float; varying vec2 uv; attribute vec2 position; void main () { uv = position; gl_Position = vec4(position, 0, 1); }`, frag: ` precision highp float; varying vec2 uv; uniform float phase, phaseDerivative, rings; uniform vec2 resolutionInv; uniform float gamma; #define PI_INV 0.3183098861837907 const int blurSamples = ${blurSamples}; const int supersampling = ${supersampling}; void main () { float nInv = 1.0 / float(blurSamples); float sum = 0.0; // Perform brute force, silly supersampling for (int x = 0; x < supersampling; x++) { for (int y = 0; y < supersampling; y++) { vec2 uvaa = uv + 2.0 * ((vec2(float(x), float(y)) + 0.5) / float(supersampling) - 0.5) * resolutionInv; float r2 = dot(uvaa, uvaa); float angle = atan(uvaa.y, uvaa.x) * PI_INV; float k = pow(2.0, floor(r2 * rings)); for (int i = 0; i < blurSamples; i++) { sum += r2 > 1.0 ? 1.0 : (fract( angle * k + (phase + float(i) * nInv * phaseDerivative) * ${distance}.0 ) > 0.5 ? 1.0 : 0.0); } } } sum *= nInv / float(supersampling * supersampling); // We averaged colors in a linear color space, but of course we need // to display them with correct gamma! gl_FragColor = vec4(vec3(pow(sum, gamma)), 1); } `, uniforms: { phase: ctx => clampedEase(((ctx.time * speed) / distance) % 1.2), phaseDerivative: ctx => { // A bit silly, but a finite difference to get the derivative of the easing function let dt = 0.01; return ( (clampedEase( (((ctx.time * speed) / distance) % 1.2) + (dt * speed) / distance ) - clampedEase(((ctx.time * speed) / distance) % 1.2)) / (dt * 60.0 * 0.6) // <-- magic number :shrug: ); }, resolutionInv: ctx => [1.0 / ctx.viewportWidth, 1.0 / ctx.viewportHeight], gamma: () => 1 / gamma, rings: ringCount }, attributes: { position: [-4, -4, 4, -4, 0, 4] }, depth: { enable: false }, count: 3 }); let frame = regl.frame(draw); invalidation.then(() => frame.cancel()); canvas.value = regl; return canvas; }31:[] 2e:{"title":"Spin WebGL","cells":[{"id":0,"value":"md`# Spin WebGL\n\n_A fork of [Tom MacWright's notebook](https://observablehq.com/@tmcw/spin-css) that uses a WebGL fragment shader with brute force antialiasing and brute force motion blur. Because GPUs are fast, I guess._\n\nVia are.na, via tumblr, as all best addictive motion graphics are. https://www.are.na/block/647219`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"viewof speed = slider({\n title: \"Speed\",\n value: 11,\n min: 1,\n max: 11,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"viewof distance = {\n const form = html``;\n form.i.oninput = () =>\n (form.o.value = `${(form.value = Math.pow(2, form.i.valueAsNumber)).toFixed(\n 0\n )}`);\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"viewof ringCount = slider({\n title: \"Ring Count\",\n value: 8,\n min: 1,\n max: 11,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"viewof blurSamples = slider({\n title: \"Motion blur samples\",\n value: 40,\n min: 1,\n max: 60,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"viewof supersampling = slider({\n title: \"Supersampling\",\n value: 2,\n min: 1,\n max: 4,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"viewof easeFn = select({\n options: Object.keys(eases),\n title: 'Easing',\n value: 'cubicInOut'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"viewof gamma = slider({\n title: 'Gamma correction',\n value: 2.2,\n min: 1,\n max: 2.4,\n step: 0.1,\n description:\n '1.0 = no correction, 2.2 = approximate correction for linear -> sRGB. Performing motion blur and antialiasing in linear colorspace means we need to apply gamma correction, otherwise shaded pixels appear artifically dark when they should reflect constant average brightness.'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"createREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"import { eases } from '@rreusser/eases'","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"function clampedEase(t) {\n return eases[easeFn](Math.max(0, Math.min(1, t)));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"import { slider, select, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"size = Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}