​

let x1 = 0;

let y1 = 0;

let x2 = 0;

let y2 = 0;

let x3 = 0;

let y3 = 0;

let r = 0;

let g = 0;

let b = 0;

let a = 0;

​

function setup() {

  createCanvas(3840, 1080);

  for(i = 0; i < 255; i ++){

   shapes[i] = new Shape(x1, y1, x2, y2, x3, y3, map(x1, 0, width, 0, 255), map(x2, 0, width, 0, 255), map(x3, 0, width, 0, 255), a);

    x1 = random(width);   

    y1 = random(height);

    x2 = random(width);   

    y2 = random(height);

    x3 = random(width);   

    y3 = random(height);

    r = random(50, 255);   

    g = random(50, 255);

    b = random(50, 255);

    a = random(50, 255);

  }

}

​

function draw() {

  background(r, g, b);

  noFill();

    for(i = 0; i < shapes.length; i ++){

      //shapes[i].move();

      shapes[i].show();

  }

  noLoop();

}

​

class Shape {

  constructor(x1, y1, x2, y2, x3, y3, r, g, b, a) {

    this.x1 = x1;

    this.y1 = y1;

    this.x2 = x2;

    this.y2 = y2;

    this.x3 = x3;

    this.y3 = y3;

    this.r = r;

    this.g = g;

    this.b = b;

    this.a = a;

  }

​

  move() {

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

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

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

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

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

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

  }

  show() {

    strokeWeight(4);

    stroke(this.r + 10, this.g + 10, this.b + 10, 0)

    fill(this.r, this.g, this.b, this.a);

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

  }

​

}