31:T873,// The normal p8g approach would be to assign a draw function to // the p8g object, but because it's imported through skypack // at runtime the p8g module is read-only. So instead we use // this workaround. createCanvas = { const p8g = await import('https://cdn.skypack.dev/p8g.js@0.8.1?min'); let canvas = null; let _draw = () => {}; let _setup = () => {}; let request = null; let state = null; return async function createCanvas(width, height, draw = _draw, setup = _setup, opts = {}) { const { css } = opts // cancel previous loop if (request) cancelAnimationFrame(request); if(typeof _setup !== "function") throw new Error("setup is not a function!"); if(typeof _draw !== "function") throw new Error("draw is not a function!") _setup = setup; _draw = draw; if (!canvas) { canvas = await html`${p8g.createCanvas(width, height)}`; } if (typeof css === "string") canvas.style = css; state = setup(p8g); // Draw Loop request = requestAnimationFrame(function tick() { draw(p8g, state); request = requestAnimationFrame(tick); }); invalidation.then(() => cancelAnimationFrame(request)); return canvas; } } // createCanvas = { // const p8g = await import('https://cdn.skypack.dev/p8g.js@0.8.1?min'); // let canvas = null; // let _draw = () => {}; // let request = null; // let state = null; // return async function createCanvas(width, height, draw = _draw) { // // cancel previous loop // if (request) { // window.setup = true // cancelAnimationFrame(request); // } // _draw = draw; // // resizing of the canvas requires a reload // if (!canvas) { // canvas = await html`${p8g.createCanvas(width, height)}`; // canvas.id="p8gCanvas" // } // // Draw Loop // // framerate() would be controlled here // request = requestAnimationFrame( // function tick() { // draw(p8g); // request = requestAnimationFrame(tick); // }); // invalidation.then(() => cancelAnimationFrame(request)); // return canvas; // } // }32:[] 2f:{"title":"Koma Tebe \"generative loom machine\"","cells":[{"id":831,"value":"# Koma Tebe \"_generative loom machine_\"\n## Precessing\nhttps://twitter.com/KomaTebe/status/1582341079797764096\nhttps://openprocessing.org/sketch/1701476\n\n```js\nlet f = 0;\nsetup = _ => {\n\tcreateCanvas(W = 400, W);\n}\ndraw = _ => {\n\tbackground(0, 44);\n\tstroke(W, 77);\n\tlet a = [];\n\tfor (let x = 0; x <= W; x += W) {\n\t\tfor (let y = -50; y < W + 50; y += 10) {\n\t\t\tlet X = noise(y + f) * 200 + x - 99;\n\t\t\tlet Y = tan(sin(y + f * 1.7)) * 99 + y - 50;\n\t\t\ta.push([X, Y]);\n\t\t\tfor (let i = 0; i < a.length; i++) {\n\t\t\t\tlet A = a[i][0];\n\t\t\t\tlet B = a[i][1];\n\t\t\t\tif (dist(X, Y, A, B) < 320) line(X, Y, A, B)\n\t\t\t}\n\t\t}\n\t}\n\tf += .01\n}\n\n```\n\nUsing [Precessing](https://bernhardfritz.github.io/p8g/) **p8g**","pinned":false,"hidden":false,"mode":"md"},{"id":1690,"value":"viewof rotated = Inputs.toggle({label: \"Rotate View\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1712,"value":"viewof threads = Inputs.range([0, 200], {label: \"Thread Intencity\", step: 1,value:80})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1746,"value":"viewof alf = Inputs.range([0, 255], {label: \"Background Alpha\", step: 1,value:40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"createCanvas(W, W, draw, setup, {css: \"background: #000\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"function draw(p8g){\n const { background, noStroke, stroke, fill, ellipse, noSmooth, text, textSize, push, pop, line} = p8g;\n const {sin, cos, tan} = Math;\n\n let count = window.count\n \n // setup code\n if( window.setup == true){ \n window.setup = false // gets reset when cancelAnimationFrame() is called in createCanvas() \n window.count = 0\n \tbackground(0) // set background to black\n }\n\n\tbackground(0,0,0,alf);\n\tstroke(200,100,0,77);\n\tlet a = [];\n\tfor (let x = 0; x <= W; x += W) { // 0 and 400 to draw to and bottom\n\t\tfor (let y = -50; y < W + 50; y += 10) {\n\t\t\tlet X = noise(y + count) * 200 + x - 99;\n\t\t\tlet Y = tan(sin(y + count * 1.7)) * 99 + y - 50;\n\t\t\ta.push([X, Y]);\n\n\t\t\tfor (let i = 0; i < a.length; i++) {\n\t\t\t\tlet A = a[i][0];\n\t\t\t\tlet B = a[i][1];\n\t\t\t\tif (dist(X, Y, A, B) < (W-threads)) rotated?line(Y , X, B, A ) : line(X, Y, A, B )\n\t\t\t}\n\t\t}\n\t}\n\n window.count += .01 // is there a better way to do these globals in observable?\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1667,"value":"window.count","pinned":true,"hidden":false,"mode":"ojs"},{"id":1007,"value":"W = 400 // width","pinned":true,"hidden":false,"mode":"ojs"},{"id":1047,"value":"H = 400 // ~~(w/1.7777777777777777)/2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1262,"value":"window.count = 0 // like frameCount","pinned":true,"hidden":false,"mode":"ojs"},{"id":1313,"value":"window.setup = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":1076,"value":"---\n## emulate P5.js functions","pinned":false,"hidden":false,"mode":"md"},{"id":837,"value":"1. `map(value, start1, stop1, start2, stop2)`\n2. `noise(1d,[2d],[3d])` \n3. `random(max)` _returns int between 0 and max_\n4. `PI` = Math.Pi\n5. `TAU` = PI*2\n6. `recursiveRandom(recursions)` details [here](https://observablehq.com/@hellonearthis/recursiverandom-circle-study)\n7. `bool()` _random boolean_ **NOT SURE WHY THATS NOT WORKING**","pinned":false,"hidden":false,"mode":"md"},{"id":942,"value":"import {map, noise, random, PI, TAU } from \"@hellonearthis/noise-like-p5js\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1643,"value":"import {dist} from \"@makio135/utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1486,"value":"map(5,0,10,0,1000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1477,"value":"noise(1,30)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1481,"value":"random(20)","pinned":true,"hidden":false,"mode":"ojs"},{"id":862,"value":"TAU ","pinned":true,"hidden":false,"mode":"ojs"},{"id":849,"value":"PI ","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"---\n## Precessing - [Using setup to initialize state for draw](https://observablehq.com/d/3d036875695e3524)\n### _p8g and wrapper_ \nhttps://bernhardfritz.github.io/p8g/\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1763,"value":"// setup and draw are both passed a `p8g` object.\n// This means you can use destructuring assignment\n// in the parameters to avoid having to write\n// `p8g.fill`, `p8g.rect`, etc.\n//\n// Note that unlike P5, `fill`, `stroke` and other\n// settings are not kept between draw calls,\n// so initializing those once in setup won't work!\n// The reason for this is that p8g does not have\n// its own `setup` function, just the `draw` loop.\nfunction setup(p8g) {\n // initiate background as bright blue\n p8g.background(0x82, 0xb4, 0xed);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1755,"value":" ","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}