Beaded Curtain

let strings = [];

const jointLength = 30;

const jointCount = 20;

const friction = 0.95;

const beanRadius = 10;

const rooty = 16;

​

class String {

  constructor(x) {

    this.root = createVector(x, rooty);

    this.joints = Array(jointCount)

      .fill()

      .map((e) => {

        let alpha = random(256);

        let colour = color(150, 81, 77, alpha);

        return { θ: 0, vθ: 0, color: colour };

      });

    this.applyRandomForce();

  }

​

  applyWind() {

    this.joints.forEach((j, index) => {

      let n = noise(this.root.x / 999, index / 99, frameCount / 99);

      j.vθ += (n - 0.45) / 400;

    });

  }

​

  applyRandomForce() {

    this.joints.forEach((j) => (j.vθ += random(-0.25, 0.25)));

  }

​

  update() {

    stroke("black");

    let pos = this.root.copy();

    let θ = PI / 2;

    for (let i of this.joints) {

      i.θ += i.vθ;

      θ += i.θ;

      i.vθ -= sin(i.θ) / 200;

      i.θ *= friction;

      let old = pos.copy();

      pos.add(createVector(jointLength, 0).rotate(θ));

      line(old.x, old.y, pos.x, pos.y);

      fill(i.color);

      ellipse(pos.x, pos.y, beanRadius);

    }

  }

}

​

function setup() {

  createCanvas(640, 640);

  for (let x = 20; x < width; x += 30) {

    strings.push(new String(x));

  }

}

​

function draw() {

  background(255);

  strings.forEach((c) => {

    c.update();

    random(3) < 1 && c.applyWind();

  });

}

​

mouseClicked = () => strings.forEach((c) => c.applyRandomForce());

​