​

const speed = 0.3;

​

function setup() {

  createCanvas(600, 600);

  background(220);

  noStroke();

}

​

function draw() {

  const newVines = [];

  vines = vines.filter(vine => {

    vine.draw();

    if(random() < vine.splitChance) {

      newVines.push(vine.split());

    }

    return vine.update();

  });

  vines = vines.concat(newVines);

}

​

function mouseReleased() {

  vines.push(new Vine(mouseX, mouseY, 400));

}

​

class Vine {

  constructor(x, y, length) {

    this.x = x;

    this.y = y;

    this.ang = random(TWO_PI);

    this.rad = 2;

    this.length = length;

    this.leafChance = 0.02;

    this.splitChance = 0.002;

    this.leafW = 8;

    this.leafH = 4;

    this.dark = color(0, 128, 50);

    this.light = color(0, 200, 50);

  }

  split() {

    const vine = new Vine(this.x, this.y, this.length);

    vine.ang = this.ang + random(-PI/2, PI/2);

    return vine;

  }

  update() {

    this.ang += random(-PI/12, PI/12);

    this.x += cos(this.ang) * this.rad * speed;

    this.y += sin(this.ang) * this.rad * speed;

    this.length -=1;

    return this.length > 0;

  }

  draw() {

    fill(this.dark);

    noStroke();

    if(random() < this.leafChance) {

      this.drawLeaf();

    } else {

      circle(this.x, this.y, this.rad * 2); 

    }

  }

  drawLeaf() {

    push();

    translate(this.x, this.y);

    rotate(this.ang + random(-PI/3, PI/3));

    fill(this.light)

    ellipse(this.rad * this.leafW/2, 0, this.rad * this.leafW, this.rad * this.leafH);

    stroke(this.dark);

    line(0, 0, this.rad * this.leafW, 0);

    pop();

  }

}