31:T8e7,viewof gif = { //const w = mywidth; const gif = new GIF; const h = w; const canvas = DOM.canvas(w, h); const context = canvas.getContext("2d"); var imgData = context.createImageData(w, h); var strokescale = d3.scaleLinear() .domain([0, 0.5*w, 1.41*w]) .range(['#222222ff','#22222244','#22222211']); for (let t = 0, n = 150; t < n; ++t) { for(var rr=0; rr0)&(myR<2*w)){ context.strokeStyle = strokescale(myR); context.beginPath(); context.arc(pp.x, pp.y, myR, 0, 2 * Math.PI); context.stroke(); } } } } context.putImageData(imgData,0,0); gif.addFrame(canvas, {copy: true, delay: 30}); yield canvas; } canvas.value = new Promise(resolve => gif.on("finished", resolve)); gif.render(); invalidation.then(() => gif.clear()); yield canvas; }32:T636,colorscale = { var c = ['#009392','#72aaa1','#b1c7b3','#f1eac8','#e5b9ad','#d98994','#d0587e']; // TealRose if (col == "ArmyRose"){ c = ['#798234','#a3ad62','#d0d3a2','#fdfbe4','#f0c6c3','#df91a3','#d46780']; } else if (col == "TealRose"){ c = ['#009392','#72aaa1','#b1c7b3','#f1eac8','#e5b9ad','#d98994','#d0587e']; } else if (col == "Fall"){ c = ['#3d5941','#778868','#b5b991','#f6edbd','#edbb8a','#de8a5a','#ca562c']; } else if (col == "Tropic"){ c = ['#009B9E','#42B7B9','#A7D3D4','#F1F1F1','#E4C1D9','#D691C1','#C75DAB']; } else if (col == "Geyser"){ c = ['#008080','#70a494','#b4c8a8','#f6edbd','#edbb8a','#de8a5a','#ca562c']; } else if (col == "Earth"){ c = ['#A16928','#bd925a','#d6bd8d','#edeac2','#b5c8b8','#79a7ac','#2887a1']; } else if (col == "Temps"){ c = ['#009392','#39b185','#9ccb86','#e9e29c','#eeb479','#e88471','#cf597e']; } var d = [-9, -1.3, -0.4, -0.15, -0.1, 0, 0.1, 0.15, 0.4, 1.3, 9]; if (sat == 'Gradual'){ d = [-9, -0.2, -0.15, -0.10, -0.005, 0, 0.005, 0.10, 0.15, 0.2, 9]; } else if (sat == 'Binary'){ d = [-9, -0.03, -0.02, -0.01, -0.001, 0, 0.001, 0.01, 0.02, 0.03, 9]; } else if (sat == 'Hand-Tweaked 😎'){ d = [-9, -0.2, -0.15, -0.10, -0.05, 0, 0.05, 0.10, 0.15, 0.2, 9]; } var c = d3.scaleLinear() //.domain([-9,-1.3,-0.4,-0.15,-0.1,0,0.1,0.15,0.4,1.3,9]) .domain(d) .range([c[0],c[0],c[1],c[2], c[3],c[3],c[3], c[4],c[5],c[6],c[6]]); return(c) }33:[] 2f:{"title":"Fourier Interference Pattern - GIF Maker","cells":[{"id":0,"value":"md`\n# Fourier Interference Pattern - GIF Maker\n### Genuary 2021: Day 9 -- Interference Patterns\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`This is my fork [(main notebook here)](https://observablehq.com/@mattdzugan/squares-from-circles-an-alternative-educational-viz-for-fo) for exporting a GIF for the [twitterverse](https://twitter.com/MattDzugan).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"viewof N_pts = slider({\n min: 1, \n max: 15, \n step: 1, \n value: 5, \n title: \"Number of Nodes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"viewof r2 = radio({\n title: 'Source Nodes are Ordered:',\n options: [\n { label: 'Clockwise by frequency', value: 'o' },\n { label: 'Random #yolo', value: 'r' },\n ],\n value: 'o'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof ch1 = checkbox({\n title: \"Annotations\",\n options: [\n { value: \"m\", label: \"Annotate Center\" },\n { value: \"s\", label: \"Annotate Sources\" },\n { value: \"c\", label: \"Annotate Crests\" },\n { value: \"h\", label: \"Heatmap Itself\" }\n ],\n value: [\"h\"],\n submit: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"viewof r1 = radio({\n title: 'Waves Travel at:',\n options: [\n { label: 'Constant Speed', value: 's' },\n { label: 'Constant Wavelength', value: 'w' },\n ],\n value: 'w'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"viewof sat = select({\n title: \"Color Saturation\",\n options: [\"Gradual\", \"Binary\", \"Hand-Tweaked 😎\"],\n value: \"Hand-Tweaked 😎\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"viewof col = select({\n title: \"Color Palette\",\n description: \"Courtesy of https://carto.com/carto-colors/\",\n options: [\"ArmyRose\", \"TealRose\", \"Fall\", \"Tropic\", \"Geyser\", \"Earth\", \"Temps\"],\n value: \"Tropic\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"viewof aggType = select({\n title: \"Aggregation Method\",\n options: [\"Sum\", \"Nearest\"],\n value: \"Sum\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"DOM.download(gif)","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"md`## building the model:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"nodes = {\n var p = [];\n var N = N_pts;\n var R = mywidth/2;\n var nodeIndx = [];\n for(var ii=0; ii response.blob())\n .then(blob => URL.createObjectURL(blob, {type: \"text/javascript\"}))\n ]);\n return class extends gif {\n constructor(options) {\n super({workerScript, ...options});\n }\n clear() {\n this.abort();\n for(const w of this.freeWorkers) w.terminate();\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}