31:T450,sketch = p5(sketch => { let canvas; let div; sketch.setup = function() { canvas = sketch.createCanvas(width, height); sketch.noLoop(); sketch.pixelDensity(2); }; function drawElements(points) { points.forEach(d => { if (d.r) { // reset the stroke sketch.strokeWeight(0); sketch.fill(d.fill); sketch.ellipse(Math.round(d.x), Math.round(d.y), d.r, d.r); } if (d.x0) { sketch.stroke(d.fill); sketch.strokeWeight(d.lineWidth); sketch.line(d.x0, d.y, d.x1, d.y); } }); } sketch.draw = function() { // sketch.background('#F7F7F7'); sketch.background(colors[0]); sketch.noStroke(); // drawPoints(testPoints); patterns.forEach(points => { drawElements(points); }); // qr.toCanvas(`${document.baseURI}${hashPath}`); var img = new Image(); let ctx = canvas.canvas.getContext("2d"); img.onload = function() { ctx.drawImage(img, 10, height - 250); // Or at whatever offset you like }; let datauri = qrcode; img.src = datauri; }; })32:T761,patterns = { let chance = new Chance(seed); function pattern1(i) { let rndx0 = chance.floating({ min: 0, max: width / 2 }); let rndx1 = chance.floating({ min: rndx0, max: width }); let rndy0 = chance.floating({ min: height / 2, max: height }); let rndy1 = chance.floating({ min: rndy0, max: height }); // let r = chance.floating({ min: 0.25, max: height * 0.02 }); let r = chance.floating({ min: radiusRange[0], max: radiusRange[1] }); let offset = r * chance.floating({ min: 0.95, max: 3.5 }); let fill = chance.pick(colors); if (i !== 0 && chance.bool({ likelihood: 33 })) fill = colors[0]; // drawPattern1(rndx0, rndx1, rndy0, rndy1, r, offset, fill); return generatePattern1( chance, rndx0, rndx1, rndy0, rndy1, r, offset, fill ); } function pattern2(i) { let rndx0 = chance.floating({ min: 0, max: width / 2 }); let rndx1 = chance.floating({ min: rndx0 + 25, max: width / 2 + rndx0 }); let rndy0 = chance.floating({ min: 0, max: height / 2 }); let rndy1 = chance.floating({ min: rndy0 + 25, max: height / 2 + rndy0 }); let lineWidth = chance.floating({ min: 0.2, max: 2 }); let offset = lineWidth * chance.floating({ min: 0.9, max: 5 }); let fill = chance.pick(colors); if (i !== 0 && chance.bool({ likelihood: 33 })) fill = colors[0]; // drawPattern2(rndx0, rndx1, rndy0, rndy1, offset, lineWidth, fill); return generatePattern2( chance, rndx0, rndx1, rndy0, rndy1, offset, lineWidth, fill ); } let patterns = []; let circles = Math.round(patternCount * .7); let lines = Math.round(patternCount * .3); for (let i = 0; i < circles; i++) { patterns.push(pattern1(i)); } for (let i = 0; i < lines; i++) { patterns.push(pattern2(i)); } return patterns; }33:T5e2,generatePattern1 = function( chance, x0, x1, y0, y1, circleRadius = 4, circleOffset = 10, fill = "black", margin = 25, ) { let nodes = []; let sizeChange = chance.bool({ likelihood: 20 }); let skipCircles = chance.bool({ likelihood: 10 }); let sizeChangeSmaller = chance.bool({ likelihood: 80 }); let sizeChangeAmount = chance.floating({ min: 0.001, max: 0.004 }); x0 += margin; x1 -= margin; y0 += margin; y1 -= margin; if (chance.bool({ likelihood: 10 })) x0 = margin; if (chance.bool({ likelihood: 10 })) x1 = width - margin; if (chance.bool({ likelihood: 10 })) y0 = margin; if (chance.bool({ likelihood: 10 })) y1 = height - margin; let r = circleRadius; for (let x = x0; x <= x1; x += circleOffset) { for (let y = y0; y <= y1; y += circleOffset) { if (chance.bool({ likelihood: 25 }) && sizeChange && sizeChangeSmaller) r -= r * sizeChangeAmount; else if (chance.bool({ likelihood: 25 }) && sizeChange) { r += r * sizeChangeAmount; if (chance.bool({ likelihood: 25 })) circleOffset += r * sizeChangeAmount; } nodes.push({ x: x, y: y, r: r, fill: fill }); // sketch.fill(fill); // if (!skipCircles) { // sketch.ellipse(Math.round(x), Math.round(y), r, r); // } else if (chance.bool({ likelihood: 99 }) && skipCircles) { // sketch.ellipse(Math.round(x), Math.round(y), r, r); // } } } return nodes; }34:[{"id":"e11a50810d1ad76698f11773e9778d3b004e3d277c0eb96ff00060270bfcfddfc564079d37b8301bbdf54f3acdab6300c0a885e9fcbb6e03cd39e022ee0cb487","href":"https://static.observableusercontent.com/files/e11a50810d1ad76698f11773e9778d3b004e3d277c0eb96ff00060270bfcfddfc564079d37b8301bbdf54f3acdab6300c0a885e9fcbb6e03cd39e022ee0cb487","name":"paste.png","type":"image/png","lastModified":1597091063872.863,"size":1884590},{"id":"347a1f71e4616281c2d6b836d864dc0be94e9cffa879c81d58660f790538956461ac03a597ad2564f0e97ef71ba7ebf99964a759b25939e25cfa50e9527bbe78","href":"https://static.observableusercontent.com/files/347a1f71e4616281c2d6b836d864dc0be94e9cffa879c81d58660f790538956461ac03a597ad2564f0e97ef71ba7ebf99964a759b25939e25cfa50e9527bbe78","name":"screenshots-8fps.gif","type":"image/gif","lastModified":1597119769960.354,"size":6173999}] 2f:{"title":"Pattern Moire - Line & Circle Grids","cells":[{"id":0,"value":"md`# Pattern Moire - Line & Circle Grids\n\n\n\nShare these parameters: [${hashPath}](${document.baseURI}${hashPath})\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"viewof patternCount = slider({\n min: 2,\n max: 25,\n value: urlVariables[\"patternCount\"],\n step: 1,\n description: \"Pattern Count\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"viewof radiusRange = rangeSlider({\n min: 0.25,\n max: 50,\n value: this\n ? this.value\n : urlVariables[\"radiusRangeMin\"]\n ? [urlVariables[\"radiusRangeMin\"], urlVariables[\"radiusRangeMax\"]]\n : [0.25, 50],\n step: 0.25,\n // Custom slider CSS, replaces all styles.\n theme: themes[\"Chrome macOS\"],\n color: colors[0],\n // format: function(d) { return numericToCalendar(d) }, // render the human readable dates\n title: 'Radius Range'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"qrcode = qr.toDataURL(\n `https://observablehq.com/@codingwithfire/pattern-moire-line-circle-grids${hashPath}`,\n {\n scale: 3\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"// qr.toCanvas(`${document.baseURI}${hashPath}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"md`We generate the \"patterns\" as a bunch of arrays of elements (points or lines):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"generatePattern2 = function(\n chance,\n x0,\n x1,\n y0,\n y1,\n lineOffset = 10,\n lineWidth = 0.5,\n fill = \"black\",\n margin = 10\n) {\n let nodes = [];\n x0 += margin;\n x1 -= margin;\n y0 += margin;\n y1 -= margin;\n\n let lineStretch = chance.bool({ likelihood: 10 });\n for (let y = y0; y <= y1; y += lineOffset + lineWidth) {\n if (lineStretch)\n lineOffset += lineWidth * chance.floating({ min: 0.1, max: 1.2 });\n nodes.push({\n x0: x0,\n x1: x1,\n y: y,\n fill: fill,\n lineWidth: lineWidth,\n lineOffset: lineOffset\n });\n }\n return nodes;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"hashPath = `#seed=${seed}&patternCount=${patternCount}&radiusRangeMin=${radiusRange[0]}&radiusRangeMax=${radiusRange[1]}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`## Inspiration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"html`

\n ${await FileAttachment(\"paste.png\").image()}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = width + 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"hash = Generators.observe(notify => {\n const hashchange = () => notify(location.hash);\n hashchange();\n addEventListener(\"hashchange\", hashchange);\n return () => removeEventListener(\"hashchange\", hashchange);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"testPoints = generatePattern1(new Chance(seed), 100, 500, 100, 700)","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"urlVariables = {\n let vars = hash.slice(1).split(\"&\");\n let vals = {};\n vars.forEach(d => {\n let pair = d.split(\"=\");\n vals[pair[0]] = +pair[1];\n });\n return vals;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { p5 } from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"import { rangeSlider, themes } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"Chance = require(\"chance\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"seed = urlVariables[\"seed\"] || 42","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"import { colors } from '@codingwithfire/coding-with-doom-fire'","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"qr = require('https://unpkg.com/qrcode@1.4.4/build/qrcode.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}