2d:null 2e:["$","title",null,{"children":"Space Fill Spiral 2 | bchoatejr | Observable"}] 33:T8b1,{ // let height = 400; const height = Math.ceil(width * screen.height / screen.width); let ctx = DOM.context2d(width, height) // let cellWidth = fm.cellWidth, cellHeight = fm.cellHeight; let cellHeight = cellWidth; let cols = Math.floor(width / cellWidth); let rows = Math.floor(height / cellHeight); let size = cols*rows; let cells = [...Array(size)].map((d, i)=>i) let filled_cells = [...Array(size)].map((d, i)=>-1) // full list, random position, random w/h. random value color(color_sc(d)); while (true) { if (cells.length>0) { let ri = parseInt(Math.random()*cells.length) //-~Math.random()*6? let xy = cells[ri]; // each cell's value is the original array index. cells.splice(ri, 1); const row = xy / cols | 0; const col = xy % cols; filled_cells[xy] = ri; let x = col * cellWidth + cellWidth/2; let y = row * cellHeight + cellHeight/2; ctx.fillStyle = color(color_sc(Math.random())); // // sunflower_spiral(ctx, x, y, cellWidth, 50, 50, 0.45, 2) // sunflower_spiral(ctx, width/2, height/2, sfm.width, sfm.increment, sfm.circles, sfm.ratio, sfm.sm_rad) if (spiral_mode == "Star") sunflower_spiral(ctx, x, y, cellWidth, 50, 50, 0.45, circle_radius) else if (spiral_mode == "Curl") { const start_angle = Math.random()*Math.PI*2; sunflower_spiral(ctx, x, y, cellWidth, 10, 50, 0.45, circle_radius, start_angle); } else if (spiral_mode == "Longer Curl") { const di = Math.random()*16; sunflower_spiral(ctx, x, y, cellWidth, 10+di, 50, 0.45, circle_radius); } else if (spiral_mode == "Compact") { const di = Math.random()*16; sunflower_spiral(ctx, x, y, cellWidth, 10+di, 127, 0.4, 1.5); } } yield Promises.delay(fm.delay, ctx.canvas); // yield ctx.canvas; } }34:T9a7,// from [@emerycarr/manhattan-particles](https://observablehq.com/@emerycarr/manhattan-particles) // make import. seperate opt, options variables. viewof fm = { let makeDict = (pairs) => Object.assign({}, ...Array.from(pairs, ([key, val]) => ({[key]: val}) )); const params = (keys, vals) => makeDict(keys.map((key, i) => [key, vals[i]])); const opt = { select: (vals) => select(params(['title','options','value'], vals)), slider: (vals) => slider(params(['title','min','max','step','value'], vals)), color: (vals) => color(params(['title','value'], vals)), }; const options = { // title options value // colors: opt.select( ["colors", color_schemes]), // title min max step default // width: opt.slider( ["width", 4, width, 1, width/4 ]), // height: opt.slider( ["height", 4, width, 1, width/4]), delay: opt.slider( ["delay", 1, 5000, 1, 1]), minC: opt.slider( ["min color", 0, 1, 0.05, 0]), maxC: opt.slider( ["max color", 0, 1, 0.05, 1]), // bgColor: opt.color( ["background", "#000000"]), }; const element = html`

${values(options)}

`; element.oninput = function() { const result = {}; for (var x in options) { result[x] = options[x].value } element.value = result; } element.oninput(); return element; function values(dict) { const result = []; for (var x in dict) { result.push(dict[x]); }; return result; } }36:T5d4,// original: https://observablehq.com/@jbum/circles-spirals-and-sunflowers, Jim Bumgardner { // let width = width; let height = width; let spiral_incr = 64; const dc = DOM.context2d(width, height); var refresh = function (dc, width, height, increment) // Sample code by Jim Bumgardner { dc.clearRect(0,0,width,height); dc.fillStyle='#000'; var nbr_circles = 100; var angle_incr = increment * Math.PI/180; var cx = width/2; var cy = height/2; var outer_rad = width*.45; var sm_rad = 2; // let attrs = {"font-family":"Verdana", "font-size":"12", fill:"#000"}; // Object.assign(attrs, dc); dc.textAlign = "center" for (var i = 1; i <= nbr_circles; ++i) { var ratio = i/nbr_circles; var angle = i*angle_incr; var spiral_rad = ratio * outer_rad; var x = cx + Math.cos(angle) * spiral_rad; var y = cy + Math.sin(angle) * spiral_rad; // draw tiny circle at x,y const r = i / nbr_circles * 24; dc.beginPath(); dc.fillStyle='#000'; dc.arc(x, y, r, 0, 2*Math.PI, false); dc.fill(); dc.beginPath(); dc.beginPath(); dc.fillStyle='#ccc'; const hr = 0.6; dc.arc(x, y-r*hr*0.3, r*hr, 0, 2*Math.PI, false); dc.fill(); dc.beginPath(); dc.fillStyle='#fff'; dc.font = `${r}px serif`; dc.fillText(i.toFixed(0), x, y); } } refresh(dc, width, height, spiral_incr); return dc.canvas; } 37:[] 31:{"id":"eb5dbc191b86da82","slug":"space-fill-spiral-2","title":"Space Fill Spiral 2","thumbnail":"e85af3fad8cc072bce40d62fd50265758b65cb241d1a1b6c5814068db96a4ebf","access_level":"public","create_time":"$D2019-06-18T23:19:45.647Z","update_time":"$D2019-06-21T05:15:14.221Z","view_time":null,"first_public_time":"$D2019-06-21T05:15:30.385Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"727607e20e3c61f9","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":"starter_2024"},"version":332,"publish_version":332,"role":null,"authored":false,"authors":[{"type":"individual","id":"43e14e124e3e99b4","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":null}],"members":[{"type":"individual","id":"43e14e124e3e99b4","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"a3fc927b5af97b4d","slug":"graphics","title":"graphics","owner":{"id":"727607e20e3c61f9","login":"bchoatejr","name":""}},"type":"notebook","body":{"title":"Space Fill Spiral 2","cells":[{"id":0,"value":"md`# Space Fill Spiral 2\nspiral from [@jbum/circles-spirals-and-sunflowers](https://observablehq.com/@jbum/circles-spirals-and-sunflowers)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"viewof cellWidth = slider({\n min: 10, \n max: 300, \n step: 1, \n value: 60, \n title: \"cell width\", \n description: \"cell size\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"viewof c_scheme = select({\n title: \"Scheme\",\n description: \"Color Scheme\",\n options: color_schemes,\n value: \"YlGnBu\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"viewof spiral_mode = select({\n title: \"Mode\",\n description: \"Spiral Modes\",\n options: [\"Star\", \"Curl\", \"Longer Curl\", \"Compact\"],\n value: \"Star\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"fullscreen = {\n const button = html`