2d:null 2e:["$","title",null,{"children":"Freaky Dot Patterns | Coding with Fire | Observable"}] 33: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; }35: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; }36:[] 31:{"id":"97ef5d8bf050a402","slug":"freaky-dot-patterns","title":"Freaky Dot Patterns","thumbnail":"c5f1e0197987439e23fe7fdb919eeddc903c96cc9bed56ebed26eeba6c3ed71d","access_level":"public","create_time":"$D2020-08-25T00:05:15.469Z","update_time":"$D2020-08-25T04:15:14.795Z","view_time":null,"first_public_time":"$D2020-08-25T00:05:50.349Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire","avatar_url":"https://avatars-next.observableusercontent.com/0efd3ecc6a639fdb4fe7962b37ca4a79746ef2d2f29888495c28572970019a78","tier":"starter_2024"},"version":381,"publish_version":381,"role":null,"authored":false,"authors":[{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null}],"members":[{"type":"team","id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire","avatar_url":"https://avatars-next.observableusercontent.com/0efd3ecc6a639fdb4fe7962b37ca4a79746ef2d2f29888495c28572970019a78","tier":"starter_2024","role":"editor"},{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"f04fe829cdd37f61","slug":"coding-with-fire","title":"Season 1","owner":{"id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire"}},"type":"notebook","body":{"title":"Freaky Dot Patterns","cells":[{"id":0,"value":"md`# Freaky Dot Patterns\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## Rotate and Translate\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`## Scale\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"num = 5000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"angles = d3.range(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"viewof angle = Scrubber(angles, { delay: 150 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"numTriangles = 30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"scaler = d3\n .scaleLinear()\n .domain([0, angles.length])\n .range([0.92, 0.97])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"angles.length * dots.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"color(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"color = d3.scaleSequential(rndColorScale).domain([0, angles.length])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"Chance = require(\"chance\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"seed = Math.random()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"d3 = require(\"d3@6.0.0-rc.3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"