31:T412,chart9 = { let radians = Math.PI / 180; let canvas = html`

`; canvas.width = width; canvas.height = height; let ctx = canvas.getContext("2d"); // dots.forEach(d => { // ctx.fillRect(d.x, d.y, 3, 3); // }); triangles.forEach(t => { ctx.fillStyle = t.fill; // ctx.fillRect(t.x, t.y, t.s, t.s); ctx.beginPath(); ctx.moveTo(t.x, t.y); ctx.lineTo(t.x + t.s, t.y); ctx.lineTo(t.x + t.s / 2, t.y + t.s / 2); ctx.lineTo(t.x, t.y); ctx.fill(); }); //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate ctx.translate(width / 2, height / 2); ctx.rotate(angleTri * radians); ctx.translate(-width / 2, -height / 2); // ctx.scale(1 / scale3, 1 / scale3); triangles.forEach(t => { ctx.fillStyle = t.fill; // ctx.fillRect(t.x, t.y, t.s, t.s); ctx.beginPath(); ctx.moveTo(t.x, t.y); ctx.lineTo(t.x + t.s, t.y); ctx.lineTo(t.x + t.s / 2, t.y + t.s / 2); ctx.lineTo(t.x, t.y); ctx.fill(); }); return canvas; }33:T46f,trianglesGrid = { let numTriangles = 10; let lines = []; // https://observablehq.com/@sinclarius/html5-canvas-triangle-grid // https://github.com/bit101/grid/blob/master/grid.js var max = Math.sqrt(width * width + height * height), cos60 = Math.cos(Math.PI / 3), sin60 = Math.sin(Math.PI / 3), cos120 = Math.cos((Math.PI * 2) / 3), sin120 = Math.sin((Math.PI * 2) / 3); let y = 0; let x = 0; let i = 0; for (i = x; i <= x + width; i += numTriangles) { lines.push([{ x: i, y: y }, { x: i + cos60 * max, y: y + sin60 * max }]); lines.push([{ x: i, y: y }, { x: i + cos120 * max, y: y + sin120 * max }]); } let dy = sin60 * numTriangles, maxX = Math.ceil(width / numTriangles) * numTriangles + x; for (i = y; i <= y + height; i += dy) { lines.push([{ x: x, y: i }, { x: x + width, y: i }]); } for (i = y + dy * 2; i <= y + height; i += dy * 2) { if (i > 0) { lines.push([{ x: x, y: i }, { x: x + cos60 * max, y: i + sin60 * max }]); } lines.push([ { x: maxX, y: i }, { x: maxX + cos120 * max, y: i + sin120 * max } ]); } return lines; }34:[] 2f:{"title":"Freaky Dot Patterns","cells":[{"id":0,"value":"md`# Freaky Dot Patterns\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Rotate and Translate\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## Scale\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"num = 5000","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"angles = d3.range(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"viewof angle = Scrubber(angles, { delay: 150 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"chart = {\n let radians = Math.PI / 180;\n let canvas = html`

`;\n canvas.width = width;\n canvas.height = height;\n\n let ctx = canvas.getContext(\"2d\");\n\n dots.forEach(d => {\n ctx.fillRect(d.x, d.y, 3, 3);\n });\n\n //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate\n ctx.translate(width / 2, height / 2);\n ctx.rotate(angle * radians);\n ctx.translate(-width / 2, -height / 2);\n\n dots.forEach(d => {\n // ctx.fillStyle = \"blue\";\n ctx.fillRect(d.x, d.y, 3, 3);\n });\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"chart2 = {\n let radians = Math.PI / 180;\n let canvas = html`

`;\n canvas.width = width;\n canvas.height = height;\n\n let ctx = canvas.getContext(\"2d\");\n\n // dots.forEach(d => {\n // ctx.fillRect(d.x, d.y, 3, 3);\n // });\n\n angles.forEach(i => {\n ctx.save();\n // ctx.globalAlpha = (i / angles.length) * 0.4;\n //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate\n ctx.translate(width / 2, height / 2);\n ctx.rotate(i * radians);\n ctx.translate(-width / 2, -height / 2);\n\n dots.forEach(d => {\n // ctx.fillStyle = \"blue\";\n ctx.fillStyle = color(i);\n ctx.fillRect(d.x, d.y, 3, 3);\n });\n\n ctx.restore();\n });\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"viewof translateX = slider({\n value: 0,\n min: -(height / 2),\n max: height / 2,\n description: \"Translate X\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"viewof translateY = slider({\n value: 0,\n min: -(width / 2),\n max: width / 2,\n description: \"Translate Y\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"chart3 = {\n let radians = Math.PI / 180;\n let canvas = html`

`;\n canvas.width = width;\n canvas.height = height;\n\n let ctx = canvas.getContext(\"2d\");\n\n // dots.forEach(d => {\n // ctx.fillRect(d.x, d.y, 3, 3);\n // });\n\n angles.forEach(i => {\n ctx.save();\n // ctx.globalAlpha = (i / angles.length) * 0.4;\n //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate\n ctx.translate(width / 2, height / 2);\n ctx.rotate(i * radians);\n ctx.translate(-width / 2, -height / 2);\n ctx.translate(\n (translateX * i) / angles.length,\n (translateY * i) / angles.length\n );\n // let s = (scale * i) / angles.length;\n // ctx.scale(s, s);\n\n dots.forEach(d => {\n // ctx.fillStyle = \"blue\";\n ctx.fillStyle = color(i);\n ctx.fillRect(d.x, d.y, 3, 3);\n });\n\n ctx.restore();\n });\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"viewof scale = slider({\n value: 1,\n min: 0.1,\n max: 10,\n step: 0.1,\n description: \"Scale\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"chart4 = {\n let radians = Math.PI / 180;\n let canvas = html`

`;\n canvas.width = width;\n canvas.height = height;\n\n let ctx = canvas.getContext(\"2d\");\n\n // dots.forEach(d => {\n // ctx.fillRect(d.x, d.y, 3, 3);\n // });\n\n angles.forEach(i => {\n ctx.save();\n // ctx.globalAlpha = (i / angles.length) * 0.4;\n //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate\n ctx.translate(width / 2, height / 2);\n ctx.rotate(i * radians);\n ctx.translate(-width / 2, -height / 2);\n ctx.translate(\n (translateX * i) / angles.length,\n (translateY * i) / angles.length\n );\n let s = (scale * i) / angles.length;\n ctx.scale(s, s);\n\n dots.forEach(d => {\n // ctx.fillStyle = \"blue\";\n ctx.fillStyle = color(i);\n ctx.fillRect(d.x, d.y, 3, 3);\n });\n\n ctx.restore();\n });\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"chart5 = {\n let radians = Math.PI / 180;\n let canvas = html`

`;\n canvas.width = width;\n canvas.height = height;\n\n let ctx = canvas.getContext(\"2d\");\n\n // dots.forEach(d => {\n // ctx.fillRect(d.x, d.y, 3, 3);\n // });\n\n angles.forEach(i => {\n ctx.save();\n // ctx.globalAlpha = (i / angles.length) * 0.4;\n //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate\n\n // Move the pen to the middle\n ctx.translate(width / 2, height / 2);\n\n // Rotate the global canvas\n ctx.rotate(i * radians);\n\n // Move the pen back to where it started\n ctx.translate(-width / 2, -height / 2);\n\n // Move each dot iteration by the sliders\n ctx.translate((-10 * i) / angles.length, (-10 * i) / angles.length);\n\n ctx.scale(scaler(i), scaler(i));\n\n dots.forEach(d => {\n // ctx.fillStyle = \"blue\";\n ctx.fillStyle = color(i);\n ctx.fillRect(d.x, d.y, 3, 3);\n });\n\n ctx.restore();\n });\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"viewof scale3 = slider({\n value: .96,\n min: 0.9,\n max: 1.1,\n step: 0.01,\n description: \"Scale\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"chart6 = {\n let radians = Math.PI / 180;\n let canvas = html`

`;\n canvas.width = width;\n canvas.height = height;\n\n let ctx = canvas.getContext(\"2d\");\n\n dots.forEach(d => {\n ctx.fillRect(d.x, d.y, 3, 3);\n });\n\n //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate\n ctx.translate(width / 2, height / 2);\n ctx.rotate(5 * radians);\n ctx.translate(-width / 2, -height / 2);\n ctx.scale(1 / scale3, 1 / scale3);\n\n dots.forEach(d => {\n // ctx.fillStyle = \"blue\";\n ctx.fillRect(d.x, d.y, 3, 3);\n });\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"numTriangles = 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"chart8 = {\n let radians = Math.PI / 180;\n let canvas = html`

`;\n canvas.width = width;\n canvas.height = height;\n\n let ctx = canvas.getContext(\"2d\");\n\n // dots.forEach(d => {\n // ctx.fillRect(d.x, d.y, 3, 3);\n // });\n triangles.forEach(t => {\n ctx.fillStyle = t.fill;\n ctx.fillRect(t.x, t.y, t.s / 2, t.s / 2);\n });\n ctx.stroke();\n\n //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate\n ctx.translate(width / 2, height / 2);\n ctx.rotate(5 * radians);\n ctx.translate(-width / 2, -height / 2);\n ctx.scale(1 / scale3, 1 / scale3);\n\n // dots.forEach(d => {\n // // ctx.fillStyle = \"blue\";\n // ctx.fillRect(d.x, d.y, 3, 3);\n // });\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"viewof angleTriAnim = Scrubber(d3.range(180 * 20).map(d => d / 20), {\n // delay: 16,\n alternate: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"viewof angleTri = slider({\n value: 1,\n min: 0,\n max: 180,\n step: 0.01,\n description: \"Angle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"triangles = {\n let xspacing = width / numTriangles;\n let yspacing = height / numTriangles;\n return d3.range(numTriangles * numTriangles).map(i => {\n let xi = i % numTriangles;\n let yi = Math.floor(i / numTriangles);\n let startColor = yi % 2 ? \"seagreen\" : \"#111\";\n let endColor = yi % 2 ? \"#111\" : \"seagreen\";\n return {\n x: xi * xspacing,\n y: yi * yspacing,\n s: xspacing,\n fill: \"#111\" //i % 2 ? startColor : endColor\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"chart7 = {\n let radians = Math.PI / 180;\n let canvas = html`

`;\n canvas.width = width;\n canvas.height = height;\n\n let ctx = canvas.getContext(\"2d\");\n\n // dots.forEach(d => {\n // ctx.fillRect(d.x, d.y, 3, 3);\n // });\n trianglesGrid.forEach(t => {\n ctx.moveTo(t[0].x, t[0].y);\n ctx.lineTo(t[1].x, t[1].y);\n });\n ctx.stroke();\n\n //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate\n ctx.translate(width / 2, height / 2);\n ctx.rotate(5 * radians);\n ctx.translate(-width / 2, -height / 2);\n ctx.scale(1 / scale3, 1 / scale3);\n\n // dots.forEach(d => {\n // // ctx.fillStyle = \"blue\";\n // ctx.fillRect(d.x, d.y, 3, 3);\n // });\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"scaler = d3\n .scaleLinear()\n .domain([0, angles.length])\n .range([0.92, 0.97])","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"angles.length * dots.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"color(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"color = d3.scaleSequential(rndColorScale).domain([0, angles.length])","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"dots = {\n let chance = new Chance(seed);\n\n return d3.range(num).map(i => {\n return {\n x: chance.floating({ min: 0, max: width }),\n y: chance.floating({ min: 0, max: height })\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"Chance = require(\"chance\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"seed = Math.random()","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"d3 = require(\"d3@6.0.0-rc.3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"rndColorScale = {\n let chance = new Chance(seed);\n let scales = [\"interpolateBlues\", \"interpolateRdYlBu\"];\n\n let chosenScale = chance.pick(scales);\n return d3[chosenScale];\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}