2a:null 2b:["$","title",null,{"children":"Voronoi with gpu.js | Fil | Observable"}] 30:T70d,kernel = function( xpos, ypos, values, speedx, speedy, colorScaleImageData, distance_type, radius ) { var flagDist = -1; var mindist = radius; var dist = 0; var A = 20; // speed look-ahead (for speed-based distance) var border = 0; for (var i = 0; i < this.constants.numPoints; i++) { var x = this.thread.x - xpos[i], y = this.thread.y - ypos[i]; // show speed arrow if ( Math.abs(Math.atan2(y, x) - Math.atan2(speedy[i], speedx[i])) < 0.02 && x * x + y * y < A * A * (speedy[i] * speedy[i] + speedx[i] * speedx[i]) ) { this.color(1, 0, 0, 1); continue; // fixed in v2.0.1 😇 } if (Math.sqrt(x * x + y * y) < 4) { mindist = 0; flagDist = 0; } // fwd if (distance_type == 4 || distance_type == 5) { x = x - A * speedx[i]; y = y - A * speedy[i]; } // euclidian if (distance_type != 1) { dist = Math.sqrt(x * x + y * y); } // weighted if (distance_type == 3 || distance_type == 5) { dist = dist * (1 + (4 * i) / this.constants.numPoints); } // manhattan if (distance_type == 1) { dist = Math.abs(x) + Math.abs(y); } if (dist < mindist) { if (mindist - dist < 3) { border = 1; } else { border = 0; } mindist = dist; flagDist = i + 1; } } var value = values[flagDist]; var c = Math.ceil(255 * value); if (flagDist == 0) { this.color(0.2, 0.2, 0.2, 1); } else if (border == 1) { this.color(1, 1, 1, 1); } else if (flagDist > 0) { this.color( colorScaleImageData[c * 4] / 255, colorScaleImageData[1 + c * 4] / 255, colorScaleImageData[2 + c * 4] / 255, 1 ); } else if (flagDist < 0) { this.color(1, 1, 1, 1); } }31:[] 2e:{"id":"dbf1a53d8e1a36ef","slug":"voronoi-with-gpu-js","title":"Voronoi with gpu.js","thumbnail":"9d4afc63d454fd04da4a0c17a03bc94b6eeb093eb7a497a31937dc1fa2b74f3e","access_level":"public","create_time":"$D2018-05-29T09:05:40.177Z","update_time":"$D2022-03-28T15:05:13.056Z","view_time":null,"first_public_time":"$D2018-06-01T21:25:54.763Z","has_unpublished_edits":null,"fork":{"id":"ee34b1fb39c2263a","slug":"inverse-of-the-distance-with-gpu-js","title":"Inverse of the distance with gpu.js","owner":{"id":"84c194f738aa2fd0","login":"rveciana","name":"Roger Veciana i Rovira"}},"stars":16,"starred":false,"owner":{"type":"team","id":"da2a32154638c457","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":"starter_2024"},"version":724,"publish_version":724,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":12,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Voronoi with gpu.js","cells":[{"id":0,"value":"md`# Voronoi with gpu.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"viewof distance_type = radio({\n title: 'Distance type',\n description: \"\", //'Please select your preferred distance',\n options: [\n { label: 'Manhattan', value: 1 },\n { label: 'Euclidian', value: 2 },\n { label: 'Weighted', value: 3 },\n { label: 'Forward looking', value: 4 },\n { label: 'Fwd+weighted', value: 5 },\n ],\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"draw = {\n var fpsTime = performance.now();\n mutable fps = 60;\n var canvas, context;\n while (true) {\n render(\n values.xpos,\n values.ypos,\n values.values,\n values.speedx,\n values.speedy,\n colorScaleImageData,\n +distance_type,\n +radius\n );\n yield render.getCanvas();\n mutable fps =\n (1 + mutable fps) *\n (1 + 0.000984 * (fpsTime - (fpsTime = performance.now())));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"mutable fps = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"movement = {\n var t = new Date();\n while (true) {\n let time = (new Date() - t)/1000,\n mult1 = Math.sin(time),\n mult2 = Math.cos(time);\n values.speedx = values.dx.map(d => d * mult1 + 2 * Math.cos(d));\n values.speedy = values.dy.map(d => d * mult2 + 2 * Math.sin(d));\n values.xpos = values.xpos.map((d,i) => (d + values.speedx[i] + width) % width )\n values.ypos = values.ypos.map((d,i) => (d + values.speedy[i] + height) % height )\n yield time;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"md`Note to self: https://www.labri.fr/perso/nrougier/python-opengl/code/chapter-07/voronoi.py uses gl_FragDepth to give the z-index of each color, and the GPU sorts it this way.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"render = {\n var gpu = new GPU.GPU({ mode: processorType });\n return gpu\n .createKernel(kernel)\n .setConstants({ numPoints: values.values.length })\n .setOutput([width, height])\n .setGraphical(true);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"viewof processorType = {if(webglChecker) {return html``;} else {\nreturn html``;\n}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"webglChecker = {let canvas = document.createElement('canvas');\n let ctx = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');\n return ctx!==null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"viewof numValues = slider({min: 1, max: 400, value: 50, step: 2, \n title: \"Set the number of points\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"viewof radius = slider({min: 6, max: 300, value: 120, step: 1, \n title: \"Set radius\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"viewof colorscheme = select({\n options: Object.keys(colormaps.colors),\n value: \"Lajolla\",\n title: \"Color scheme\",\n description: \"From Fabio Crameri’s scientific colours maps.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"viewof width = slider({min: 100, max: 900, value: 500, step: 10, title: \"Set image width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"viewof height = slider({min: 100, max: 900, value: 400, step: 10, \n title: \"Set image height\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"values = {\n for (var values=[],i=0;i