2c:null 2d:["$","title",null,{"children":"Spin WebGL | Ricky Reusser | Observable"}] 32: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; }33:[] 30:{"id":"a8cd582587e65d2e","slug":"spin-webgl","title":"Spin WebGL","thumbnail":"b71c9f8c9741e77e07ddc5e003864406f3c543dfe5385c00aaebb935ec9f2073","access_level":"public","create_time":"$D2019-09-10T21:56:01.014Z","update_time":"$D2021-03-26T01:18:20.293Z","view_time":null,"first_public_time":"$D2019-09-10T23:16:38.421Z","has_unpublished_edits":null,"fork":{"id":"8925776cc7c16c4e","slug":"spin-css","title":"Spin CSS","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"stars":27,"starred":false,"owner":{"type":"team","id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/49c18a2ac0092176d4ea8348a1dd538e0b460b086b89d602b8d21ffe0821d92e","tier":"starter_2024"},"version":862,"publish_version":862,"role":null,"authored":false,"authors":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null}],"members":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":{"id":"2ef792b9227476b4","slug":"webgl","title":"WebGL","owner":{"id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser"}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"viewof easeFn = select({\n options: Object.keys(eases),\n title: 'Easing',\n value: 'cubicInOut'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"createREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"import { eases } from '@rreusser/eases'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"function clampedEase(t) {\n return eases[easeFn](Math.max(0, Math.min(1, t)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"import { slider, select, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"size = Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"