Trace

let rects = [];

let triangles = [];

c = 24;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  frameRate(c);

​

}

​

function mousePressed() {

  let l = random(10, 50);

  let rect = new Rectangle(mouseX, mouseY, l);

  let tri = new Triangle(mouseX, mouseY, mouseX + 30, mouseY + 60, mouseX + 60, mouseY + 30);

  rects.push(rect);

  triangles.push(tri);

}

​

function draw() {

  background(c);

  for (let rect of rects) {

    rect.move();

    rect.show();

  }

  for (let tri of triangles) {

    tri.move();

    tri.show();

  }

}

​

​

class Rectangle {

  constructor(x, y, l) {

    this.x = x;

    this.y = y;

    this.l = l;

  }

​

  move() {

    this.x = this.x + noise(10, 50);

    this.y = this.y //+ noise(-5, 5);

  }

​

  show() {

    stroke(255);

    noFill();

    rect(this.x, this.y, this.l, this.l);

  }

}

​

class Triangle {

  constructor(x1, y1, x2, y2, x3, y3) {

    this.x1 = x1;

    this.y1 = y1;

    this.x2 = x2;

    this.y2 = y2;

    this.x3 = x3;

    this.y3 = y3;

  }

​

  move() {

    this.x1 = this.x1 + random(-5, 5);

    this.y1 = this.y1 + random(-5, 5);

    this.x2 = this.x2 + random(-5, 5);

    this.y2 = this.y2 + random(-5, 5);

    this.x3 = this.x3 + random(-5, 5);

    this.y3 = this.y3 + random(-5, 5);

  }

​

  show() {

    noStroke();

    if (mouseX > windowWidth * (3 / 4) || mouseX < windowWidth / 8) {

      fill(255, 110, 134, 150);

    } else {

      noFill();

    }

    triangle(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3);

  }

}