2a:null 2b:["$","title",null,{"children":"Freaky dot patterns | Torben Jansen | Observable"}] 30:[] 2e:{"id":"6647b064a222791e","slug":"freaky-dot-patterns","title":"Freaky dot patterns","thumbnail":"046b6e865cc14280a17a3a0bab271a98a5fbd5f08c5401150d159e09d357fa39","access_level":"public","create_time":"$D2019-11-25T17:54:16.357Z","update_time":"$D2019-11-26T19:36:13.431Z","view_time":null,"first_public_time":"$D2019-11-26T19:27:14.616Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"03836a98946da550","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":"starter_2024"},"version":226,"publish_version":226,"role":null,"authored":false,"authors":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null}],"members":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Freaky dot patterns","cells":[{"id":0,"value":"md`# Freaky dot patterns\n\nRef.: [Numberphile - Freaky Dot Patterns](https://www.youtube.com/watch?v=QAja2jp1VjE)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"{\n const context = DOM.context2d(width, height);\n const { rotation, scale, shape } = options; \n \n context.save();\n context.scale(scale, scale);\n context.drawImage(shapes[shape].canvas, 0, 0);\n context.restore();\n \n context.save();\n context.translate(width / 2, height / 2);\n context.rotate(rotation * Math.PI / 180);\n context.drawImage(shapes[shape].canvas, -width / 2, -height / 2);\n context.restore();\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"viewof options = {\n \n const form = html`\n

\n \n Dots\n \n Squares\n \n Triangles\n

\n \n

Rotation

\n \n

Scale

\n\n`\n form.oninput = () => {\n form.value = {\n rotation: form.rotation.valueAsNumber,\n scale: form.scale.valueAsNumber,\n shape: form.shape.value\n }\n }\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = Math.floor(width / 3 * 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"dots = {\n const context = DOM.context2d(width, height);\n \n for (let i = 0; i < 10000; ++i) {\n context.beginPath();\n context.arc(Math.random() * width, Math.random() * height, 2, 0, 2 * Math.PI);\n context.fill();\n }\n \n return context;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"squares = {\n const squares = DOM.context2d(10, 10);\n squares.fillRect(0, 0, 5, 5);\n squares.fillRect(5, 5, 10, 10);\n \n const context = DOM.context2d(width, height);\n const pattern = context.createPattern(squares.canvas, \"repeat\");\n context.fillStyle = pattern;\n context.fillRect(0, 0, width, height);\n \n return context;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"triangles = {\n const h = (Math.sqrt(3) / 2) * 10\n const triangles = DOM.context2d(10, h * 2);\n \n triangles.beginPath();\n triangles.lineTo(5, h);\n triangles.lineTo(10, 0);\n triangles.lineTo(10, h);\n triangles.lineTo(0, h);\n triangles.lineTo(0, 0);\n triangles.moveTo (5, h);\n triangles.lineTo(10, h * 2);\n triangles.lineTo(0, h * 2);\n triangles.fill();\n \n const context = DOM.context2d(width, height);\n const pattern = context.createPattern(triangles.canvas, \"repeat\");\n context.fillStyle = pattern;\n context.fillRect(0, 0, width, height);\n \n return context;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"shapes = ({ dots, squares, triangles })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2f:"$2e:body"