2c:null 2d:["$","title",null,{"children":"PPGAS · Floating Facets chapter | DrummerHead | Observable"}] 32:T8f5,floatingFacets = p5(s => { const getRandomColor = getRandomColorCurry(colors); const canvasId = "universe"; const centerDistance = width / 2; const sw = unit * borderProportion; // Stroke weight let centerShitfX = 1; let centerShitfY = 1; let willDraw = true; const colorize = (s, size) => { s.strokeWeight(0); for (let x = 0; x < size; x++) { s.fill( saturation > 0 ? transformColor(getRandomColor(), saturation) : getRandomColor() ); s.rect(0, 0 + x * unit, size * unit, unit); } }; const diamondMask = (s, size) => { s.strokeWeight(0); s.erase(); const sta = 0; const end = size * unit; const mid = end / 2; s.triangle(sta, sta, sta, mid, mid, sta); s.triangle(mid, sta, end, sta, end, mid); s.triangle(sta, mid, sta, end, mid, end); s.triangle(mid, end, end, mid, end, end); s.noErase(); }; const stroke = (s, size) => { s.strokeWeight(sw); s.stroke( saturation > 0 ? transformColor(borderColor, saturation) : borderColor ); s.fill(0, 0, 0, 0); const sta = 0; const end = size * unit; const mid = end / 2; s.quad(mid, sta + sw, end - sw, mid, mid, end - sw, sta + sw, mid); }; const placeDiamond = (size, position, s) => { const diamond = s.createGraphics(size * unit, size * unit); colorize(diamond, size); diamondize && diamondMask(diamond, size); borderProportion > 0 && stroke(diamond, size); s.image(diamond, position.x, position.y); }; const draw = () => { !preserveDraw && s.clear(); for (let size = iterations; size > 0; size = size - 2) { const x = centerDistance - (size * unit * centerShitfX) / 2; const y = centerDistance - (size * unit * centerShitfY) / 2; placeDiamond(size, { x, y }, s); } }; const shift = ev => { if (ev.target.id === canvasId) { willDraw = true; centerShitfX = guideLockOne(ev.layerX / centerDistance); centerShitfY = guideLockOne(ev.layerY / centerDistance); } }; s.setup = () => { s.createCanvas(width, width).id(canvasId); draw(); }; s.draw = () => { if (willDraw) { draw(); willDraw = false; } }; s.mousePressed = shift; s.mouseDragged = shift; })33:T53f,notes = md`## Notes - [x] Create function that takes an array of strings and returns one of the strings randomly, but never the same string I just returned before; so it needs some state - [x] Some perlin noise or something for the background to emulate stars or make it interesting - [x] Find a way to have the background exist without the preloading, it's messing with the variable changing smoothness - [ ] Using this could be interesting https://p5js.org/reference/#/p5/lerpColor I could add a "mode" that uses lerp - [x] In the end make the parameters easy to change by the user of the notebook, make it easy to interact and play with - [x] Add modifiable border thickness, down to non-existent - [x] Border color in Static parameters area - [x] toggle the diamondization - [x] 2 dimensional modification of diamond relative placement (off center recursion) - [x] Toggle cleaning of drawing - [x] Colors pass through a function that increases saturation, and the level of saturation is controlled by the user. That saturation has to go up on take off. - [x] Add "guide" that will make it easier to get a centered in X or Y axis shift - [ ] Use [discrete color palettes](https://github.com/d3/d3-scale-chromatic/blob/master/README.md) to choose from alternative color palettes - [ ] Delete this notes area when done `34:[{"id":"f925acc0ffcc97c8c5b9050d434ea119fb5f5d6640e6d9de97c31cae13ee253e285700a403442008a8837163a6eb6530f6d402d585617f65427f412146e9e088","href":"https://static.observableusercontent.com/files/f925acc0ffcc97c8c5b9050d434ea119fb5f5d6640e6d9de97c31cae13ee253e285700a403442008a8837163a6eb6530f6d402d585617f65427f412146e9e088","name":"The_motion_of_two_million_stars_pillars.jpg","type":"image/jpeg","lastModified":1616111333139.206,"size":579310},{"id":"d636e5decfcf81fb4ac313d8294692ae8ee6f0ffe4c4f9e0825356d45d2d76952dcb4d6d583fc2c92a9f77c333dd286bad15805667f37411b4db965dbe8ca117","href":"https://static.observableusercontent.com/files/d636e5decfcf81fb4ac313d8294692ae8ee6f0ffe4c4f9e0825356d45d2d76952dcb4d6d583fc2c92a9f77c333dd286bad15805667f37411b4db965dbe8ca117","name":"xi5n241cowh61@1.jpg","type":"image/jpeg","lastModified":1613735260447.46,"size":2811078}] 30:{"id":"dd5ba537e07d5191","slug":"ppgas-floating-facets-chapter","title":"PPGAS · Floating Facets chapter","thumbnail":"24bbc72710819ea91bd921fde8908e6b00bd843858edcfe99565a8be28ebde00","access_level":"public","create_time":"$D2021-02-18T19:20:23.098Z","update_time":"$D2021-06-01T08:39:56.704Z","view_time":null,"first_public_time":"$D2021-03-19T01:04:47.249Z","has_unpublished_edits":null,"fork":{"id":"7337daffc48b6103","slug":"p5-starting-template","title":"P5 Starting Template","owner":{"id":"4f642d1d7e523043","login":"drummerhead","name":"DrummerHead"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4f642d1d7e523043","login":"drummerhead","name":"DrummerHead","avatar_url":"https://avatars-next.observableusercontent.com/b7e751f2eba1fcd63ae173d366f860ff7bcc9aa3d79ed6d243ec68048386ba4f","tier":"starter_2024"},"version":655,"publish_version":655,"role":null,"authored":false,"authors":[{"type":"individual","id":"da6dec1a4722bc2c","login":"drummerhead","name":"DrummerHead","avatar_url":"https://avatars-next.observableusercontent.com/b7e751f2eba1fcd63ae173d366f860ff7bcc9aa3d79ed6d243ec68048386ba4f","tier":null}],"members":[{"type":"individual","id":"da6dec1a4722bc2c","login":"drummerhead","name":"DrummerHead","avatar_url":"https://avatars-next.observableusercontent.com/b7e751f2eba1fcd63ae173d366f860ff7bcc9aa3d79ed6d243ec68048386ba4f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"PPGAS · Floating Facets chapter","cells":[{"id":0,"value":"html`

`PPGAS` · Floating Facets chapter

Parametric Procedurally Generated Art Shenanigans

\n Click and drag on the diamonds to shift center\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"viewof unit = Inputs.range([5, 77], {\n value: 20,\n step: 1,\n label: \"Size\",\n width\n}) // length in pixels of one \"unit of size\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"viewof iterations = Inputs.range([1, 77], {\n value: 42,\n step: 1,\n label: \"Depth\",\n width\n}) // number of diamonds","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"viewof borderProportion = Inputs.range([0, 24.6], {\n value: 0.15,\n label: \"Border\",\n width\n}) // Border thickness as proportion of unit size","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"viewof saturation = Inputs.range([0, 7.77], {\n value: 0,\n label: \"Saturation\",\n width\n}) // Saturation modifier","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"viewof diamondize = Inputs.toggle({ label: \"Diamondize\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"viewof preserveDraw = Inputs.toggle({ label: \"System error\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"staticparametersTitle = h2(\"Static parameters\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"colors = ['#8dceda', '#92c2b6', '#d4b4c3', '#e0b55e', '#9f688b', '#72b3a9'];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"colorsFrontend = html`

${colors.map(\n c => `

`\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"borderColor = \"#fff1f6\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"borderColorFrontend = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"originalTitle = h2(\"Original\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"image = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"appendixTitle = h2(\"Appendix\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"links = md`https://p5js.org/reference/\n\nhttps://github.com/d3/d3-color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"css = {\n const swatchWidth = width / colors.length;\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"p5min = require('https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"function* p5(sketch) {\n const element = DOM.element('div');\n\n yield element;\n\n const instance = new p5min(sketch, element, true);\n\n try {\n while (true) {\n yield element;\n }\n } finally {\n instance.remove();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"h2 = (title) => html`

${title}

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"getRandomColorCurryTest = {\n const getRandomColor = getRandomColorCurry(colors, true);\n return html`

max index = ${colors.length - 1}

\n ${(() => {\n let acc = '';\n for (let i = 0; i < 25; i++) {\n const [i, color] = getRandomColor();\n acc += `

${i}

`;\n }\n return acc;\n })()}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"getRandomColorCurry = (colors, debugMode = false) => {\n let lastIndex = 0;\n return function r() {\n const randIndex = Math.floor(Math.random() * colors.length);\n if (randIndex === lastIndex) {\n return r();\n }\n lastIndex = randIndex;\n return debugMode ? [randIndex, colors[randIndex]] : colors[randIndex];\n };\n};\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"transformColorTest = html`

${colors.map(\n c =>\n `

`\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"transformColor = (color, saturationDelta = 1) => {\n const { l, c, h } = d3.lch(color);\n return d3.lch(l, c + 18 * saturationDelta, h).toString();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"guideLockOne = n => {\n const shift = 0.05;\n const target = 1;\n return target - shift < n && n < target + shift ? target : n;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"hydrogen71helium27 = await FileAttachment(\"The_motion_of_two_million_stars_pillars.jpg\").url();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"