2b:null 2c:["$","title",null,{"children":"Generative Art | Micole | Observable"}] 31:T46d,p5(sketch => { let min = 10; let max = 200; let cs = 220; sketch.setup = function() { sketch.createCanvas(w, h, sketch.WEBGL); sketch.background(cs, 30, 250); sketch.rectMode(sketch.CENTER); sketch.colorMode(sketch.HSB, 360); sketch.ortho(); createRects(); } function createRects() { for (let j = 0; j < 5; j++) { for (let i = 0; i < 500; i++) { let x = sketch.int(random(-w/2, w/2)); let y = sketch.int(random(-h/2, h/2)); let z = sketch.int(random(-h, h*.25)); let hu = random(cs, cs+40); let s = map(y, -h/2, h/2, 10, 50); let b = map(z, -h/2, (h/2)*.25, 100, 350); sketch.fill(hu, s, b); sketch.stroke(hu, s+50, b-50); sketch.push(); sketch.translate(x, y, z); sketch.rotateX(-PI/6); sketch.rotateY(PI/4); let ran = random(1); if (ran < .4) { sketch.rotateY(PI/2); } else if (ran < .6) { sketch.rotateX(PI/2); } sketch.rect(0, 0, random(min, max), random(min, max)); sketch.pop(); } } } })32:T4f6,p5(sketch => { let min = 10; let max = 200; sketch.setup = function() { sketch.createCanvas(w, h, sketch.WEBGL); sketch.background(51); sketch.rectMode(sketch.CENTER); sketch.colorMode(sketch.HSB, 360); sketch.ortho(); createRects(); } function createRects() { for (let j = 0; j < 5; j++) { for (let i = 0; i < 500; i++) { let x = sketch.int(random(-w/2, w/2)); let y = sketch.int(random(-h/2, h/2)); let z = sketch.int(random(-h, h*.25)); let hu = map(x, -w/2, w/2, 255, 160); let s = map(y, -h/2, h/2, 0, 180); let b = map(z, -h/2, (h/2)*.25, 200, 360); sketch.fill(hu, s, b); if (b > 200) { sketch.stroke(hu, s+50, b-50); } else { sketch.stroke(hu, s+50, b+50); } sketch.push(); sketch.translate(x, y, z); sketch.rotateX(-PI/6); sketch.rotateY(PI/4); let ran = random(1); if (ran < .4) { sketch.rotateY(PI/2); } else if (ran < .6) { sketch.rotateX(PI/2); } sketch.box( random(min, max), random(min, max/2), random(min, max*.75) ); sketch.pop(); } } } })33:T6ef,p5(sketch => { sketch.setup = function() { sketch.createCanvas(w, h, sketch.WEBGL); sketch.background(51); sketch.rectMode(sketch.CENTER); sketch.colorMode(sketch.HSB, 360); sketch.ortho(-w/2, w/2, -h/2, h/2, 0, w*5); // sketch.lights(); // sketch.ambientLight(100, 100, 100); sketch.background(s, random(260, 300), random(300, 360)); sketch.translate(0, 0, -500); sketch.rotateX(PI/3); sketch.rotateZ(PI/4); sketch.translate(-w/15, 0, -h/10); sketch.scale(0.75); createGravity(); } let min = 10; let max = 200; let s = 200; function createGravity() { for (let j = 0; j < 10; j++) { for (let i = 0; i < 1000; i++) { let x = random(-w*1.1, w*1.1); let y = random(-w*1.1, w*1.1); // let x = random(-h*2, h/2); // let y = random(-h/2, h/2); let z = random(-30, 30); let a = random(s, s+80); let b = random(260, 300); let c = random(300, 360); let rw = random(min, max); let rh = random(min, max); let d = sketch.dist(x, y, 0, 0); let ang = 0; let r = sketch.atan2(-y, -x); sketch.push(); sketch.translate(x, y, z); let pow = (w/2) / (4 * PI * sketch.pow(10, 2)); if (d < w/2) { ang = map(d, 0, w/2, PI/2, 0); sketch.translate(0, 0, map(d, 0, w/2, -rh, 0)); } sketch.stroke(a, b+50, c-50); sketch.fill(a, b, c); sketch.rotateZ(r); ang = sketch.constrain(ang, 0, PI/2); sketch.rotateY(ang); sketch.rect(0, 0, rw, rh); sketch.pop(); } } sketch.fill(0, 0, 360); sketch.stroke(s, 360, 360); sketch.box(200); } })34:T532,class Particle { pos; vel; acc; target; ma; maxF; size; constructor(p5, x, y, sz) { this.p5 = p5; this.pos = this.p5.createVector(w/2, h/2); this.vel = this.p5.createVector(); this.acc = this.p5.createVector(); this.target = this.p5.createVector(this.x, this.y); this.size = sz; this.ma = p5.map(this.x, 0, w, -180, 180) + p5.map(this.y, 0, h, -180, 180); this.maxF = random(0.4, 0.6); } display() { let d = p5.dist(this.pos.x, this.pos.y, this.target.x, this.target.y); let i = p5.map(d, 0, 50, 0, 1); // let from = p5.color(255, 81, 93); // let to = p5.color(185, 70, 250); let from = p5.color(255, 255, 255); let to = p5.color(255, 255, 255); let col = p5.lerpColor(from, to, i); p5.stroke(col); p5.strokeWeight(this.size); p5.point(this.pos.x, this.pos.y); } goTarget() { let steer = this.target.copy(); let d = p5.dist(this.pos.x, this.pos.y, this.target.x, this.target.y); if (d > 0.5) { let thresh = 20; steer.sub(this.pos); steer.normalize(); steer.mult(map(p5.min(d, thresh), 0, thresh, 0, this.maxF)); this.acc.add(steer); } } move() { this.goTarget(); this.vel.mult(0.95); this.vel.add(this.acc); this.pos.add(this.vel); this.acc.mult(0); } }35:T655,p5(sketch => { let N = 3500; //number of iterations let sLen = 70; //segment length let deltAng = 0.35; //delta angle let margin = 10; //border margin sketch.setup = function() { sketch.createCanvas(w, h); sketch.background(51); sketch.stroke(255, 150); sketch.fill(255); sketch.strokeCap(sketch.ROUND); sketch.strokeJoin(sketch.ROUND); sketch.strokeWeight(0.5); //loop through segment array for (let i = 0; i < segments.length-2; i++) { sketch.line(segments[i].a.x, segments[i].a.y, segments[i].b.x, segments[i].b.y); } } //setup const segments = []; //starting PVector // const A = PVector(w, h); const A = PVector(0, h); //initial starting point via imported segment class //starting at point A, turning to random direction, set length // const s = new Segment(A, PVector.add(A, PVector.fromAngle(random(-PI, -3*PI/4)).setMag(sLen))); const s = new Segment(A, PVector.add(A, PVector.fromAngle(random(-PI/2, 0)).setMag(sLen))); //add to segments array segments.push(s); while (segments.length < N) { const index = expRand(0, 1, 0.5) * (segments.length-1) | 0; const prevSeg = segments[index]; const A = prevSeg.pointAt(random()); const l = map(segments.length, 0, N, sLen, 10); const curSeg = new Segment(A, PVector.add(A, PVector.sub(prevSeg.b, prevSeg.a).setMag(l).rotateBy(random(-deltAng, deltAng)))); const isPtOut = a => (a.x < 0 || a.x > w) && (a.y < 0 || a.y > h); const isSegOut = a => isPtOut(s.a) && isPtOut(s.b); { segments.push(curSeg); } } //while segments.length < N })36:T568,p5(sketch => { // let seed = Date.now(); let seed = random() * Date.now(); let nScl = 450; let n = Array.from({length: 20}, (x, i) => i); sketch.setup = function() { sketch.createCanvas(w, h); // sketch.translate(randInt(w), randInt(h)); sketch.translate(w/2, h/10); sketch.background(51); sketch.stroke(255); sketch.strokeCap(sketch.ROUND); sketch.strokeJoin(sketch.ROUND); sketch.fill(255); n = n.map(i => { const rad = 20 + i * 8; //for each ring 360 degrees return position for each point let ring = Array.from({length: 360}, (x, i) => 1); return ring.map(j => { const ang = j / 360 * sketch.TAU; const c = Math.cos(ang); const s = Math.sin(ang); const noise = sn.noise3D(c, s, seed) * .5 + .5; const r = rad * (1 + noise * sketch.pow((i / n.length), 3)); const x = c * r; const y = s * r; console.log(x + y); return [x, y]; }); //ring.map(j) }); //n.map(i) for (let l = 0; l < n.length-1; l++) { sketch.stroke((random() > .5 ? 'white' : 'red')); sketch.strokeWeight(map(l, 20, n.length, 1, 5, true)); for (let k = 0; k < 360-1; k++) { sketch.line(n[l][k][0], n[l][k][1], n[l+1][k+1][0], n[l+1][k+1][1]); } } //for loop array } //setup loop // sketch.draw = function() {} })37:[] 2f:{"id":"0a2f92b87e0ba678","slug":null,"title":"Generative Art","thumbnail":"1042792dbd9d2a4b48d9665f458f505f9dfb3683bc397e9a097ec027c44036f5","access_level":"public","create_time":"$D2023-01-29T03:46:12.150Z","update_time":"$D2023-02-06T06:36:16.678Z","view_time":null,"first_public_time":"$D2023-01-29T03:46:12.150Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c82cd4ee74fcb22f","login":"wstl","name":"Micole","avatar_url":"https://avatars-next.observableusercontent.com/d7629f2847ab0acb13a5cc5a3509ac2605148fb251714ce070c6dff2946548b4","tier":"starter_2024"},"version":857,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4dd9c05b2974e20b","login":"wstl","name":"Micole","avatar_url":"https://avatars-next.observableusercontent.com/d7629f2847ab0acb13a5cc5a3509ac2605148fb251714ce070c6dff2946548b4","tier":null}],"members":[{"type":"individual","id":"4dd9c05b2974e20b","login":"wstl","name":"Micole","avatar_url":"https://avatars-next.observableusercontent.com/d7629f2847ab0acb13a5cc5a3509ac2605148fb251714ce070c6dff2946548b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Generative Art","cells":[{"id":0,"value":"# Generative Art","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":828,"value":"Testing out gen art in Observable and some ports from Processing to p5.\n
More via (https://www.instagram.com/wstl.ing_/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"## Rectangles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":416,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"## Cubes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":452,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"## Gravity Cube","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":471,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"## Simple 10PRINT","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"p5(sketch => {\n let x = 0;\n let y = 0;\n let space = w/22;\n \n sketch.setup = function() {\n sketch.createCanvas(w, h);\n sketch.background(51);\n sketch.stroke(255);\n\n drawLines();\n };\n\n\n function drawLines() {\n while (y < h){\n if (sketch.random(1) > 0.5) {\n sketch.line(x, y, x+space, y+space);\n } else {\n sketch.line(x, y+space, x+space, y);\n }\n \n x += space;\n \n if (x > width) {\n x = 0;\n y += space;\n }\n }\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":779,"value":"## Particles (WIP)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":802,"value":"p5(sketch => {\n let p = [];\n let margin = 140;\n \n sketch.setup = function() {\n sketch.createCanvas(w, h);\n sketch.background(51);\n\n for (let i = 0; i < 1000; i++) {\n let x = random(margin + 10, w-margin-10);\n let y = random(margin + 10, h-margin-10);\n p.push(new Particle(sketch, x, y, random(3, 10)));\n }\n }\n\n function generateDots() {\n for (let i = 0; i < p.length-1; i++) {\n let c = p[i];\n c.move();\n c.display();\n }\n }\n\n sketch.draw = function() {\n // generateDots();\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"class Mover {\n pos;\n vel;\n acc;\n home;\n maxSpd;\n maxF;\n which;\n iidx;\n rad;\n \n constructor(x, y) {\n this.pos = new p5.PVector(this.x, this.y);\n this.vel = new p5.PVector();\n this.acc = new p5.PVector();\n this.target = new p5.PVector(this.x, this.y);\n\n this.maxSpd = 4;\n this.maxF = 0.1;\n\n this.home = new p5.PVector(this.x, this.y);\n this.rad = 150;\n }\n\n display() {\n // d = p5.dist(this.pos.x, this.pos.y, )\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"p5(sketch => {\n let inc = 0.1;\n let num = 1;\n let cols;\n let rows;\n let zoff;\n let scl;\n let grid;\n \n sketch.setup = function() {\n sketch.createCanvas(w, h);\n sketch.background(51);\n\n cols = w / 10;\n rows = h / 10;\n }\n\n sketch.draw = function() {\n let xoff = 0.0;\n for (let x = 0; x < rows; x++) {\n let yoff = 0.0; \n }\n \n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":711,"value":"## Circular Walker (WIP)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":752,"value":"p5(sketch => {\n let walker;\n \n sketch.setup = function() {\n sketch.createCanvas(w, h);\n sketch.background(51);\n sketch.smooth();\n sketch.frameRate(120);\n\n walker = new Walker();\n }\n\n sketch.draw = function() {\n walker.run();\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"class Walker {\n x;\n y;\n step;\n t;\n a;\n astep;\n\n constructor() {\n this.x = random(w);\n this.y = random(h);\n this.a = random(10);\n this.astep = random(-1, 1) * 0.1;\n this.step = random(200, 500);\n }\n\n display() {\n let sw = map(this.t, 0, 500, 0, 20);\n sw = p5.constrain(sw, 0, 20);\n\n p5.fill(255);\n p5.circle(this.x, this.y, sw);\n }\n\n move() {\n let margin = 10;\n if (\n this.x < margin || this.x > w-margin ||\n this.y < margin || this.y > h-margin) {\n this.a = p5.atan2(h/2 - this.y, w/2 - this.x);\n }\n\n this.x += p5.cos(this.a);\n this.y += p5.sin(this.a);\n\n this.a += this.astep;\n this.t--;\n\n if (this.t < 0) {\n this.astep = random(-1, 1) * 0.05;\n this.t = random(200, 500);\n }\n }\n\n run() {\n for (let i = 0; i < 5; i++) {\n this.display();\n this.move();\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":309,"value":"## Tree\nvia Lionel Radisson's (maiko135) [Confined Trees](https://observablehq.com/@makio135/confined-trees?collection=@makio135/plotter)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"## Noise Rings (WIP)\nvia Lionel Radisson's (maiko135) [Growing Spaces](https://observablehq.com/@makio135/growing-spaces?collection=@makio135/plotter)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":213,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":702,"value":"### Global Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"w = 1280","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"h = (w/16) * 9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"## Imports and Implementations\nvia Lionel Radisson's [Hello p5js](https://observablehq.com/@makio135/p5) and Mark Webster's [Setting up P5js](https://observablehq.com/@motiondesign_01/setting-up-p5js)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"P5 = require('https://unpkg.com/p5/lib/p5.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"function* p5(sketch) {\n const element = DOM.element('div')\n yield element\n\n const instance = new P5(sketch, element, true)\n\n try {\n while (true) yield element\n }\n finally {\n instance.remove()\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"import {PVector, PI, TAU, array, shuffle, random, randInt, expRand, coin, map, Segment, segSegIntersection} from \"@makio135/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"import {sn} from \"@makio135/growing-spaces\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"