30:[] 2e:{"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"},{"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"},{"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"},{"id":167,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = Math.floor(width / 3 * 2)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":213,"value":"shapes = ({ dots, squares, triangles })","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}