31:T6f5,await visibility(), p5(sketch => { sketch.setup = () => { sketch.createCanvas(width, 300) } sketch.draw = () => { sketch.background(0) sketch.noStroke() sketch.drawingContext.globalAlpha = .6 const n = number_elements for(let i = 0; i <= n; i++) { const x = sketch.width/9 + i/(n/overlap_of_elements*2) * sketch.width/2 const y = 150 + Math.sin(i/n * Math.PI * 2 + sketch.millis()/zoom_speed) * 45 const r = 55 + Math.cos(r_scaler/n * Math.PI * 2 + sketch.millis()/waggle_speed) * 45 if (i % 2 || i % 1){ // sketch.circle(x, y, 7 * 2) // sketch.fill(`hsl(${i/fill * 360 | 0}, 100%, 50%)`) // sketch.rect(50+y+i, y, r, n, n).fill(`hsl(${i/fill * 360/6*(x+y+i) | 0}, 100%, 50%)`) // sketch.fill(`hsl(${i/fill * 160 | 0}, 100%, 50%)`) } for(let j = 0; j <= n*2; j++) { // sketch.rect(-100+y+i*overlap_of_elements,-250+y*2+i*overlap_of_elements, r*9,7*n, n+overlap_of_elements) sketch.rect(-250+y+i*overlap_of_elements, y, r, n+overlap_of_elements, n+overlap_of_elements) sketch.rect(0+y+i*overlap_of_elements, y, r, n+overlap_of_elements, n+overlap_of_elements) sketch.rect(250+y+i*overlap_of_elements, y, r, n+overlap_of_elements, n+overlap_of_elements) sketch.rect(450+y+i*overlap_of_elements, y, r, n+overlap_of_elements, n+overlap_of_elements) // sketch.rect(650+y+i*overlap_of_elements, y, r, n+overlap_of_elements, n+overlap_of_elements) sketch.rect(0+y+i*overlap_of_elements, y, r, n+overlap_of_elements, n+overlap_of_elements) sketch.fill(`hsl(${i/fill * 360 | 0}, 100%, 50%)`) } } } })32:[] 2f:{"title":"messing around with a circle code from https://observablehq.com/@makio135/creative-coding","cells":[{"id":0,"value":"md`# messing around with a circle code from https://observablehq.com/@makio135/creative-coding`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"md `Lionel Radisson aka @makio135 made a notebook on the Observable homepage about creative coding on Observable. I've copied two examples from that notebook here and am exploring the effect of changing variables via sliders and other small changes to the code.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"await visibility(), // cell starts running when entering the viewport @observablehq/awaiting-visibility\nsvg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md `## And now let's use those variables in the p5js version without putting them in the exact right spot to mimic what is above but create something different`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"await visibility(), p5(sketch => {\n sketch.setup = () => {\n sketch.createCanvas(width, 300)\n }\n \n sketch.draw = () => {\n sketch.background(0)\n sketch.noStroke()\n sketch.drawingContext.globalAlpha = .6\n \n const n = number_elements\n for(let i = 0; i <= n; i++) {\n sketch.fill(`hsl(${i/fill * 360 | 0}, 100%, 50%)`)\n const x = sketch.width/6 + i/(n/overlap_of_elements*2) * sketch.width/2\n const y = 150 + Math.sin(i/n * Math.PI * 2 + sketch.millis()/zoom_speed) * 45\n const r = 55 + Math.cos(r_scaler/n * Math.PI * 2 + sketch.millis()/waggle_speed) * 45\n sketch.circle(x, y, r * 2)\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"viewof r_scaler = slider({min: 0, max: 100,value:40,title:'r_scaler'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"viewof waggle_speed = slider({min: 0, max: 2200,value:450,title:'waggle_speed'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"viewof zoom_speed = slider({min: 0, max: 4200,value:800,title:'zoom_speed'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof number_elements = slider({min: 1, max: 151,value:30,title:'number_of_elements'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewof overlap_of_elements = slider({min: 0, max: 25,value:2.7,title:'overlap_of_elements'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"viewof fill = slider({min: 1, max: 30,value:20,title:'fill'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"import {p5} from '@makio135/p5'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}