2c:null 2d:["$","title",null,{"children":"Creative coding using p5.js | Deepali Kank | Observable"}] 32:T6ff,p5((sketch) => { let particles = []; let noiseScale = 0.01; sketch.setup = () => { sketch.createCanvas(1000, 400); for (let i = 0; i < 100; i++) { particles.push(new Particle(sketch)); } }; sketch.draw = () => { sketch.background(0, 10); // Semi-transparent black for trails for (let particle of particles) { particle.update(); particle.display(); } }; class Particle { constructor(s) { this.s = s; this.pos = s.createVector(s.random(s.width), s.random(s.height)); this.vel = s.createVector(0, 0); this.color = s.color(s.random(255), s.random(255), s.random(255), 150); this.size = s.random(2, 8); } update() { let angle = this.s.noise( this.pos.x * noiseScale, this.pos.y * noiseScale, this.s.frameCount * 0.01 ) * this.s.TWO_PI * 2; this.vel.x = this.s.cos(angle); this.vel.y = this.s.sin(angle); this.vel.mult(2); this.pos.add(this.vel); if (this.pos.x < 0) this.pos.x = this.s.width; if (this.pos.x > this.s.width) this.pos.x = 0; if (this.pos.y < 0) this.pos.y = this.s.height; if (this.pos.y > this.s.height) this.pos.y = 0; } display() { this.s.noStroke(); this.s.fill(this.color); this.s.ellipse(this.pos.x, this.pos.y, this.size); } } sketch.mousePressed = () => { sketch.noiseSeed(sketch.random(1000)); for (let particle of particles) { particle.pos = sketch.createVector( sketch.random(sketch.width), sketch.random(sketch.height) ); particle.color = sketch.color( sketch.random(255), sketch.random(255), sketch.random(255), 150 ); } }; })33:Tef4,p5((sketch) => { const palette = ["#05668D", "#028090", "#00A896", "#02C39A", "#F0F3BD"]; sketch.setup = () => { sketch.createCanvas(1000, 400); sketch.noLoop(); }; sketch.draw = () => { sketch.background("#02111B"); // Create background pattern for (let i = 0; i < sketch.width; i += 20) { for (let j = 0; j < sketch.height; j += 20) { sketch.stroke(255, 20); sketch.noFill(); sketch.rect(i, j, 20, 20); } } // Generate large complex shapes for (let i = 0; i < 5; i++) { generateComplexShape( sketch, sketch.random(sketch.width), sketch.random(sketch.height), sketch.random(150, 250) ); } // Generate medium complex shapes for (let i = 0; i < 10; i++) { generateComplexShape( sketch, sketch.random(sketch.width), sketch.random(sketch.height), sketch.random(80, 150) ); } // Generate small complex shapes for (let i = 0; i < 20; i++) { generateComplexShape( sketch, sketch.random(sketch.width), sketch.random(sketch.height), sketch.random(30, 80) ); } // Add connection lines for (let i = 0; i < 30; i++) { sketch.stroke(sketch.random(palette)); sketch.strokeWeight(sketch.random(0.5, 2)); let x1 = sketch.random(sketch.width); let y1 = sketch.random(sketch.height); let x2 = x1 + sketch.random(-100, 100); let y2 = y1 + sketch.random(-100, 100); sketch.line(x1, y1, x2, y2); } }; function generateComplexShape(s, x, y, size) { s.push(); s.translate(x, y); s.rotate(s.random(s.TWO_PI)); s.noStroke(); s.fill(s.random(palette)); let shapeType = s.random(["star", "spiral", "polygon", "wave"]); switch (shapeType) { case "star": drawStar(s, 0, 0, size / 2, size / 4, 7); break; case "spiral": drawSpiral(s, size / 2); break; case "polygon": drawPolygon(s, 0, 0, size / 2, s.floor(s.random(5, 10))); break; case "wave": drawWave(s, size); break; } // Add some detail s.stroke(255, 100); s.noFill(); for (let i = 0; i < 5; i++) { let detailSize = s.random(size / 4, size / 2); let detailX = s.random(-size / 4, size / 4); let detailY = s.random(-size / 4, size / 4); drawSpiral(s, detailSize, detailX, detailY); } s.pop(); } function drawStar(s, x, y, radius1, radius2, npoints) { let angle = s.TWO_PI / npoints; let halfAngle = angle / 2.0; s.beginShape(); for (let a = 0; a < s.TWO_PI; a += angle) { let sx = x + s.cos(a) * radius2; let sy = y + s.sin(a) * radius2; s.vertex(sx, sy); sx = x + s.cos(a + halfAngle) * radius1; sy = y + s.sin(a + halfAngle) * radius1; s.vertex(sx, sy); } s.endShape(s.CLOSE); } function drawSpiral(s, size, x = 0, y = 0) { s.beginShape(); for (let i = 0; i < 200; i++) { let angle = 0.1 * i; let x1 = x + ((1 + angle) * s.cos(angle) * size) / 40; let y1 = y + ((1 + angle) * s.sin(angle) * size) / 40; s.vertex(x1, y1); } s.endShape(); } function drawPolygon(s, x, y, radius, npoints) { let angle = s.TWO_PI / npoints; s.beginShape(); for (let a = 0; a < s.TWO_PI; a += angle) { let sx = x + s.cos(a) * radius; let sy = y + s.sin(a) * radius; s.vertex(sx, sy); } s.endShape(s.CLOSE); } function drawWave(s, size) { s.beginShape(); for (let i = 0; i < s.TWO_PI; i += 0.1) { let x = (i * size) / s.TWO_PI; let y = (s.sin(i) * size) / 4; s.vertex(x, y); } s.endShape(); } sketch.mousePressed = () => { sketch.redraw(); }; })34:T4d0,p5((sketch) => { const palette = [ "#b4bd9b", "#bc455a", "#fdba77", "#f6cf98", "#81bdc3", "#fdf8ec", "#f9d6d3", "#ccd5c3" ]; let stripes = []; sketch.setup = () => { sketch.createCanvas(1000, 400); sketch.noLoop(); generateStripes(); }; sketch.draw = () => { sketch.background("#8B4513"); for (let stripe of stripes) { sketch.noStroke(); sketch.fill(stripe.color); sketch.beginShape(); for (let i = 0; i <= sketch.width; i += 10) { let y = stripe.baseY + Math.sin(i * 0.01 + stripe.offset) * stripe.amplitude; sketch.vertex(i, y); } sketch.vertex(sketch.width, sketch.height); sketch.vertex(0, sketch.height); sketch.endShape(sketch.CLOSE); } }; function generateStripes() { let y = 0; while (y < sketch.height) { let stripeHeight = sketch.random(10, 10); stripes.push({ baseY: y, amplitude: sketch.random(20, 80), offset: sketch.random(sketch.TWO_PI), color: sketch.random(palette) }); y += stripeHeight; } } sketch.mousePressed = () => { stripes = []; generateStripes(); sketch.redraw(); }; })35:[] 30:{"id":"9822585ca0216fc7","slug":null,"title":"Creative coding using p5.js","thumbnail":"772a743812a81e5a8dcf8f526fbd456f9dbbf0aaf1f86c15a57b5cab29a32a0c","access_level":"public","create_time":"$D2024-06-27T12:12:40.696Z","update_time":"$D2024-06-28T02:45:44.531Z","view_time":null,"first_public_time":"$D2024-06-27T12:22:15.810Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024"},"version":44,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null}],"members":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null,"role":"editor"},{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Creative coding using p5.js","cells":[{"id":0,"value":"# Creative coding using p5.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import { p5 } from \"@josesho/p5-latest\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"