2c:null 2d:["$","title",null,{"children":"WebGL's Simple Animation & Stats & Code-Prettify | Chuncheng | Observable"}] 32:[] 30:{"id":"fda9111ace20bfe5","slug":"webgls-template","title":"WebGL's Simple Animation & Stats & Code-Prettify","thumbnail":"fe19fb96da70694da8037740a6be761138ad63bf7e8423d25c6b8ddc4c63db81","access_level":"public","create_time":"$D2023-09-10T09:00:06.904Z","update_time":"$D2023-09-11T08:11:23.218Z","view_time":null,"first_public_time":"$D2023-09-10T09:00:06.904Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":320,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"1a3bf472363b1040","slug":"webgl-baby-step","title":"WebGL baby steps","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"type":"notebook","body":{"titling":"auto","title":"WebGL's Simple Animation & Stats & Code-Prettify","cells":[{"id":0,"value":"# WebGL's Simple Animation & Stats & Code-Prettify","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"shaderSource = {\n const vert = `\n${glsl.precision}\n\nattribute vec2 position;\n\nvarying vec2 v_position;\n\nvoid main () {\n v_position = position;\n gl_Position = vec4(position, 0.0, 1.0);\n}\n`,\n frag = `\n${glsl.useStandardDerivatives}\n${glsl.constants}\n${glsl.precision}\n${glsl.hsv2rgb}\n\nvarying vec2 v_position;\n\n${glsl.dist}\n\nvec2 pow(vec2 src, float p) {\n return vec2(pow(src.x, p), pow(src.y, p));\n}\n\nvoid main () {\n float hue = atan(v_position.x, v_position.y) / PI / 2.0;\n float sat = dist(v_position) * 1.5;\n gl_FragColor = vec4(hsv2rgb(vec3(hue, sat, 1.0)), 1.0);\n\n // Draw a ring around the (0, 0)\n float d = dist(v_position);\n if (d > 0.3 - 0.01 && d < 0.3) gl_FragColor = vec4(vec3(1.0), 1.0);\n}\n`;\n\n return { vert, frag };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof backgroundColor = Inputs.color({\n label: \"Background Color\",\n value: \"#052742\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"viewof n = Inputs.range([3, 10], { label: \"N\", step: 1, value: 5 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"

${statsMonitor.dom}

Canvas for WebGL

Vert for REGL

Frag for REGL

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"/**\n * Draw the triangle using regl\n */\n{\n const { regl, blend } = reglDrawer;\n\n function redraw() {\n regl.clear({ color: backgroundColorForWebGL });\n\n // Example of position parameter\n // const position = [\n // [-0.5, -0.5],\n // [0.5, -0.5],\n // [0, 0.5]\n // ];\n\n const position = [triangleVertex.map((d) => [d.x, d.y])];\n\n const drawTriangle = regl({\n vert: shaderSource.vert,\n frag: shaderSource.frag,\n attributes: { position },\n uniforms: {},\n count: position[0].length,\n blend\n });\n\n drawTriangle();\n\n statsMonitor.update();\n }\n\n now;\n triangleVertex.updateXY();\n redraw();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"triangleVertex = {\n const data = [],\n limit = [-1, 1],\n rnd = d3.randomUniform(limit[0], limit[1]);\n\n for (let i = 0; i < n; ++i) {\n for (let j = 0; j < 3; ++j) {\n data.push({ i, j, x: rnd(), y: rnd(), vx: rnd() / 100, vy: rnd() / 100 });\n }\n }\n\n function updateXY() {\n data.map((d) => {\n d.x += d.vx;\n d.y += d.vy;\n if (d.x > limit[1] || d.x < limit[0]) d.vx *= -1;\n if (d.y > limit[1] || d.y < limit[0]) d.vy *= -1;\n });\n }\n\n Object.assign(data, { limit, updateXY });\n\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"reglDrawer = {\n const canvas = DOM.canvas(width, height),\n pixelRatio = 2.0,\n extensions = [\"oes_standard_derivatives\"],\n regl = wrapREGL({\n canvas,\n pixelRatio,\n extensions\n }),\n blend = {\n enable: true,\n func: {\n srcRGB: \"src alpha\",\n srcAlpha: 1,\n dstRGB: \"one minus src alpha\",\n dstAlpha: 1\n },\n equation: {\n rgb: \"add\",\n alpha: \"add\"\n }\n };\n\n Object.assign(canvas, { width, height });\n\n {\n const div = document.getElementById(\"canvasDivForWebGL\");\n div.innerHTML = \"\";\n div.appendChild(canvas);\n }\n\n updateDivForREGL(shaderSource);\n\n return { canvas, regl, blend };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"updateDivForREGL = (shaderSource) => {\n const { vert, frag } = shaderSource;\n\n {\n const div = document.getElementById(\"vertDivForREGL\");\n div.innerHTML = \"\";\n\n d3.select(div)\n .append(\"pre\")\n .attr(\"class\", \"prettyprint linenums lang-c\")\n .append(\"code\")\n .text(vert.trim());\n }\n\n {\n const div = document.getElementById(\"fragDivForREGL\");\n div.innerHTML = \"\";\n\n d3.select(div)\n .append(\"pre\")\n .attr(\"class\", \"prettyprint linenums lang-c\")\n .append(\"code\")\n .text(frag.trim());\n }\n\n PR.prettyPrint();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"backgroundColorForWebGL = [d3.color(backgroundColor)].map(\n ({ r, g, b, opacity }) => [r / 255, g / 255, b / 255, opacity]\n)[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"glsl = ({\n useStandardDerivatives: `\n#extension GL_OES_standard_derivatives : enable\n`,\n constants: `\n#define PI 3.141592653589793238\n#define HALF_PI 1.57079632679\n#define HALF_PI_INV 0.15915494309\n#define LOG_2 0.69314718056\n#define C_ONE (vec2(1.0, 0.0))\n#define C_I (vec2(0.0, 1.0))\n#define TO_RADIANS 0.01745329251\n`,\n precision: `\nprecision highp float;\n`,\n dist: `\nfloat dist(vec2 d) {\n return sqrt(pow(d.x, 2.0) + pow(d.y, 2.0));\n}\n\nfloat dist(vec2 a, vec2 b) {\n vec2 d = a - b;\n return dist(d);\n}\n`,\n hsv2rgb: `\nvec3 hsv2rgb(vec3 c) {\n vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n}\n`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"---\n\n## Vert\n\n```glsl\n${shaderSource.vert}\n```\n\n## Frag\n\n```glsl\n${shaderSource.frag}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"// // Append the statsMonitor\n// statsMonitorDom = {\n// const { dom } = statsMonitor;\n// dom.style.position = \"relative\";\n// return dom;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"statsMonitor = {\n const stats = new Stats(),\n { dom } = stats;\n dom.style.position = \"relative\";\n\n return stats;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"Stats = require(\"https://cdn.jsdelivr.net/npm/stats-js@1.0.1/build/stats.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"PR = require(\"https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"wrapREGL = require(\"regl\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"