2c:null 2d:["$","title",null,{"children":"Shader | Yury Ershov | Observable"}] 32:T558,canvas = shader({width:width, height: width*3/4, uniforms: {size: "float", angle: "float", kx: "float", ky: "float"}, visibility})` mat2 rotate2d(float a) { return mat2(cos(a), -sin(a), sin(a), cos(a)); } void mainImage(out vec4 fragColor, in vec2 fragCoord) { vec2 p = (fragCoord.xy - iResolution.xy / 2.0) * rotate2d(angle + kx*fragCoord.x - ky*fragCoord.y); float k = float(mod(p.x, size * 2.0) < size == mod(p.y, size * 2.0) < size); fragColor = vec4(vec3(k), 1.0); // vec2 p = (fragCoord.xy - iResolution.xy / 2.0) * rotate2d(angle + kx*fragCoord.x - ky*fragCoord.y); // bool bx = mod(p.x, size * 2.0) < size; // bool by = mod(p.y, size * 2.0) < size; // fragColor = vec4(float(bx == by), float(bx == by && by), float(bx == by && !bx), 1.0); // vec2 pr = (fragCoord.xy - iResolution.xy / 2.0) * rotate2d(angle + kx*fragCoord.x*1.01 - ky*fragCoord.y*1.01); // vec2 pg = (fragCoord.xy - iResolution.xy / 2.0) * rotate2d(angle + kx*fragCoord.x*0.99 - ky*fragCoord.y*1.02); // vec2 pb = (fragCoord.xy - iResolution.xy / 2.0) * rotate2d(angle + kx*fragCoord.x*1.02 - ky*fragCoord.y*0.99); // fragColor = vec4( // float(mod(pr.x, size * 2.0) < size == mod(pr.y, size * 2.0) < size), // float(mod(pg.x, size * 2.0) < size == mod(pg.y, size * 2.0) < size), // float(mod(pb.x, size * 2.0) < size == mod(pb.y, size * 2.0) < size), // 1.0); }`33:T10b6,function shader({ width = 640, height = 480, devicePixelRatio = window.devicePixelRatio, invalidation, // when the canvas is considered disposed visibility, // if present, only draw when resolves uniforms = {}, // declare your uniforms here inputs = {}, // bind inputs to uniforms iMouse = false, // not yet supported! iTime = false, // enable built-in iTime uniform sources = [], // extra sources (lib functions etc.) preserveDrawingBuffer = false // if you want “Download PNG” to work } = {}) { uniforms = new Map(Object.entries(uniforms).map(([name, type]) => [name, {type}])); inputs = new Map(Object.entries(inputs)); for (const {type} of uniforms.values()) if (type !== "float") throw new Error(`unknown type: ${type}`); for (const name of inputs.keys()) if (!uniforms.has(name)) uniforms.set(name, {type: "float"}); if (iTime && !uniforms.has("iTime")) uniforms.set("iTime", {type: "float"}); if (visibility !== undefined && typeof visibility !== "function") throw new Error("invalid visibility"); return function() { const source = String.raw.apply(String, arguments); const canvas = document.createElement("canvas"); canvas.width = width * devicePixelRatio; canvas.height = height * devicePixelRatio; canvas.style = `max-width: 100%; width: ${width}px; height: auto;`; const gl = canvas.getContext("webgl", {preserveDrawingBuffer}); const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, `precision highp float; ${Array.from(uniforms, ([name, {type}]) => `uniform ${type} ${name};`).join("\n")} const vec3 iResolution = vec3( ${(width * devicePixelRatio).toFixed(1)}, ${(height * devicePixelRatio).toFixed(1)}, ${(devicePixelRatio).toFixed(1)} ); `, ...sources, source, ` void main() { mainImage(gl_FragColor, gl_FragCoord.xy); } `); const vertexShader = createShader(gl, gl.VERTEX_SHADER, ` attribute vec2 a_vertex; void main() { gl_Position = vec4(a_vertex, 0.0, 1.0); } `); const vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, Float32Array.of(-1, -1, +1, -1, +1, +1, -1, +1), gl.STATIC_DRAW); const program = createProgram(gl, vertexShader, fragmentShader); gl.useProgram(program); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); const a_vertex = gl.getAttribLocation(program, "a_vertex"); gl.enableVertexAttribArray(a_vertex); gl.vertexAttribPointer(a_vertex, 2, gl.FLOAT, false, 0, 0); for (const [name, u] of uniforms) u.location = gl.getUniformLocation(program, name); const ondispose = invalidation === undefined ? Inputs.disposal(canvas) : invalidation; let frame; let disposed = false; ondispose.then(() => disposed = true); async function render() { if (visibility !== undefined) await visibility(); frame = undefined; gl.drawArrays(gl.TRIANGLE_FAN, 0, 4); } Object.assign(canvas, { update(values = {}) { if (disposed) return false; for (const name in values) { const u = uniforms.get(name); if (!u) throw new Error(`unknown uniform: ${name}`); gl.uniform1f(u.location, values[name]); } frame || requestAnimationFrame(render); return true; } }); for (const [name, input] of inputs) { const u = uniforms.get(name); if (!u) throw new Error(`unknown uniform: ${name}`); gl.uniform1f(u.location, input.value); const update = () => { gl.uniform1f(u.location, input.value); frame || requestAnimationFrame(render); }; input.addEventListener("input", update); ondispose.then(() => input.removeEventListener("input", update)); } if (iTime) { frame = true; // always rendering const u_time = gl.getUniformLocation(program, "iTime"); let timeframe; (async function tick() { if (visibility !== undefined) await visibility(); gl.uniform1f(u_time, performance.now() / 1000); gl.drawArrays(gl.TRIANGLE_FAN, 0, 4); return timeframe = requestAnimationFrame(tick); })(); ondispose.then(() => cancelAnimationFrame(timeframe)); } else { gl.drawArrays(gl.TRIANGLE_FAN, 0, 4); } return canvas; }; }34:[] 30:{"id":"6550791a509170ee","slug":"shader","title":"Shader","thumbnail":"f6a769a4bbcc9a4e99ba9074bc62ca5229e57f16502e3ea42c77af95527104dd","access_level":"public","create_time":"$D2022-01-04T10:34:28.670Z","update_time":"$D2022-01-04T13:00:42.134Z","view_time":null,"first_public_time":"$D2022-01-04T12:20:58.601Z","has_unpublished_edits":null,"fork":{"id":"e29da4ac2a6182a3","slug":"shader","title":"Shader","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c028450100ed2bd4","login":"ershov","name":"Yury Ershov","avatar_url":"https://avatars-next.observableusercontent.com/50be16114d5f16fd20c691225ab67f7cd113e5e275231c642d16effe70a0a2d0","tier":"starter_2024"},"version":522,"publish_version":522,"role":null,"authored":false,"authors":[{"type":"individual","id":"34f017cf3f269f4d","login":"ershov","name":"Yury Ershov","avatar_url":"https://avatars-next.observableusercontent.com/50be16114d5f16fd20c691225ab67f7cd113e5e275231c642d16effe70a0a2d0","tier":null}],"members":[{"type":"individual","id":"34f017cf3f269f4d","login":"ershov","name":"Yury Ershov","avatar_url":"https://avatars-next.observableusercontent.com/50be16114d5f16fd20c691225ab67f7cd113e5e275231c642d16effe70a0a2d0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Shader","cells":[{"id":0,"value":"# Shader","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"canvas.update({\n size: width / (25.0 + Math.pow(Math.sin(now/5500),9)*10),\n// size: width / (25.0 + (Math.sin(now/5500) + Math.sin(now*1.1234/5500) + Math.sin(now*1.835/5500))*5),\n angle: now / 10000.0 % (2 * Math.PI),\n kx: Math.sin(now/1000)/(width*1.3*(1-Math.pow(Math.sin(now/15000),5))),\n ky: Math.pow(Math.sin(now/1400),3)/(width*1.3*(1-Math.pow(Math.sin(now/22000),7))),\n}),md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md`---\n\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function createShader(gl, type, ...sources) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, sources.join(\"\\n\"));\n gl.compileShader(shader);\n if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;\n throw new Error(gl.getShaderInfoLog(shader));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"function createProgram(gl, ...shaders) {\n const program = gl.createProgram();\n for (const shader of shaders) gl.attachShader(program, shader);\n gl.linkProgram(program);\n if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program;\n throw new Error(gl.getProgramInfoLog(program));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"