30:T5c1,voronoi = function( xpos, ypos, values, colorScale, distance_type, radius, alpha ) { var flagDist = -1; var mindist = radius; var dist = 0; var invAlpha = 1 / alpha; 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]; if (Math.sqrt(x * x + y * y) < 4) { mindist = 0; flagDist = 0; } // alpha if (distance_type == 3) { dist = Math.pow(Math.pow(x, alpha) + Math.pow(y, alpha), invAlpha); } // manhattan if (distance_type == 1) { dist = Math.abs(x) + Math.abs(y); } // euclidian if (distance_type == 2) { dist = Math.sqrt(x * x + y * y); } // infinity if (distance_type == 4) { dist = Math.max(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( colorScale[c * 4] / 255, colorScale[1 + c * 4] / 255, colorScale[2 + c * 4] / 255, 1 ); } else if (flagDist < 0) { this.color(1, 1, 1, 1); } }31:[] 2e:{"title":"Voronoi with gpu.js","cells":[{"id":0,"value":"md`# Voronoi with gpu.js\n\nThe distance between two points ${tex`p_1 = (x_1, y_1)`} and ${tex`p_2 = (x_2, y_2)`} is computed as:\n\n${tex`d_{\\alpha}(p_1,p_2) = \\left(\\left(x_2-x_1\\right)^{\\alpha} + \\left(y_2-y_1\\right)^{\\alpha}\\right)^{\\frac{1}{\\alpha}}`}\n\nManhattan distance is a special case where ${tex`\\alpha = 1`}:\n\n${tex`d_{1}(x,y) = \\left|x_2-x_1\\right| + \\left|y_2-y_1\\right|`}\n\nEuclidian distance is another special case where ${tex`\\alpha = 2`}:\n\n${tex`d_{2}(x,y) = \\sqrt{\\left(x_2-x_1\\right)^{2} + \\left(y_2-y_1\\right)^{2}}`}\n\n\"Infinite\" distance is a last special case where ${tex`\\alpha = \\infty`}:\n\n${tex`d_{\\infty}(x,y) = \\max \\left(\\left|x_2-x_1\\right| ,\\left|y_2-y_1\\right|\\right)`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"viewof distance_type = radio({\n title: 'Distance type',\n description: \"\", //'Please select your preferred distance',\n options: [\n { label: 'Alpha', value: 3 },\n { label: 'Manhattan', value: 1 },\n { label: 'Euclidian', value: 2 },\n { label: 'Infinity', value: 4 }\n ],\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"viewof demo = checkbox({\n options: [{ value: \"demo\", label: \"Demo on alpha value\" }],\n value: \"demo\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"viewof alphaSlider = slider({min: 0.2, max: 20, value: 0.2, step: 0.1, \n title: \"Manually set the value of the alpha value\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"alpha = (demo) ? \n 2 + 2*Math.cos(now/3000):\n alphaSlider","pinned":false,"hidden":false,"mode":"ojs"},{"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 csImageData,\n +distance_type,\n +radius,\n +alpha\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"},{"id":433,"value":"mutable fps = null","pinned":false,"hidden":false,"mode":"ojs"},{"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":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"render = {\n var gpu = new GPU.GPU({ mode: processorType });\n return gpu\n .createKernel(voronoi)\n .setConstants({ numPoints: values.values.length })\n .setOutput([width, height])\n .setGraphical(true);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"viewof processorType = {if(webglChecker) {return html``;} else {\nreturn html``;\n}}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":28,"value":"viewof numValues = slider({min: 1, max: 400, value: 10, step: 2, \n title: \"Set the number of points\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"viewof radius = slider({min: 6, max: 300, value: 200, step: 1, \n title: \"Set radius\"})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":74,"value":"viewof width = slider({min: 100, max: 900, value: 500, step: 10, title: \"Set image width\"})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":46,"value":"values = {\n for (var values=[],i=0;i