Playground - 코드 에디터

p5.js크리에이티브 코딩 & 제너러티브 아트

sketch.js

// p5.js Creative Coding

let particles = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
  for (let i = 0; i < 80; i++) {
    particles.push(new Particle());
  }
}

function draw() {
  background(26, 26, 46, 25);

for (let p of particles) {
    p.update();
    p.display();
    p.edges();
  }

// Draw connections
  stroke(255, 255, 255, 30);
  for (let i = 0; i < particles.length; i++) {
    for (let j = i + 1; j < particles.length; j++) {
      let d = dist(
        particles[i].pos.x, particles[i].pos.y,
        particles[j].pos.x, particles[j].pos.y
      );
      if (d < 100) {
        strokeWeight(map(d, 0, 100, 1.5, 0));
        line(
          particles[i].pos.x, particles[i].pos.y,
          particles[j].pos.x, particles[j].pos.y
        );
      }
    }
  }
}

class Particle {
  constructor() {
    this.pos = createVector(random(width), random(height));
    this.vel = p5.Vector.random2D().mult(random(0.5, 1.5));
    this.size = random(3, 7);
    this.color = color(
      random([99, 102, 241]),
      random([139, 180, 250]),
      random([244, 114, 182]),
      200
    );
  }

update() {
    this.pos.add(this.vel);
  }

display() {
    noStroke();
    fill(this.color);
    circle(this.pos.x, this.pos.y, this.size);
  }

edges() {
    if (this.pos.x > width) this.pos.x = 0;
    if (this.pos.x < 0) this.pos.x = width;
    if (this.pos.y > height) this.pos.y = 0;
    if (this.pos.y < 0) this.pos.y = height;
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Preview

Console

p5.jssketch.jsUTF-8

Ln 1, Col 1Spaces: 2