tetraSpin

let tArray = [];
n = 1;
function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
  stroke(255);
  strokeWeight(0.5);
  w = min(width, height) / 3;
  tArray.push(new tetraP(0, w, 0, 0, 0));
}
function draw() {
  t = 360 * sin(frameCount / 10);
  background(0, 0, 0);
  translate(width / 2, height / 2);
  for (let i = 0; i < n; i++) {
    tArray[i].move(t);
    tArray[i].display();
  }
}

function tgraph() {
  x1 = w * sin(t) * sin(t) + w / 5;
  y1 = w * cos(t) * cos(t) + w / 5;
  x2 = w * sin(t + 90) * cos(t + 90) - w / 5;
  y2 = w * sin(t + 90) * sin(t + 90) - w / 5;
  x3 = w * sin(t + 45) * cos(t + 45);
  y3 = w * cos(t + 45) * sin(t + 45);
  x4 = w * cos(t) * sin(t) - w / 3;
  y4 = w * sin(t) * sin(t) - w / 3;
  circle(x1, y1, 10);
  circle(x2, y2, 10);
  circle(x3, y3, 10);
  circle(x4, y4, 10);
  stroke(255);
  line(x1, y1, x2, y2);
  line(x3, y3, x2, y2);
  line(x4, y4, x2, y2);
  line(x4, y4, x3, y3);
  line(x1, y1, x4, y4);
  line(x1, y1, x3, y3);
}
function mousePressed() {
  r = random(0, 360);
  c = random(10, w);
  tArray.push(new tetraP(t, c, mouseX - width / 2, mouseY - height / 2, 0));
  n++;
}

class tetraP {
  constructor(t, w, tx, ty, r) {
    this.w = w;
    this.x1 = w * sin(t) * sin(t) + w / 5;
    this.y1 = w * cos(t) * cos(t) + w / 5;
    this.x2 = w * sin(t + 90) * cos(t + 90) - w / 5;
    this.y2 = w * sin(t + 90) * sin(t + 90) - w / 5;
    this.x3 = w * sin(t + 45) * cos(t + 45);
    this.y3 = w * cos(t + 45) * sin(t + 45);
    this.x4 = w * cos(t) * sin(t) - w / 3;
    this.y4 = w * sin(t) * sin(t) - w / 3;
    this.tx = tx;
    this.ty = ty;
    this.r = r;
  }
  move(t) {
    this.x1 = this.w * sin(t + this.r) * sin(t + this.r) + this.w / 5 + this.r;
    this.y1 = this.w * cos(t + this.r) * cos(t + this.r) + this.w / 5;
    this.x2 = this.w * sin(t + 90 + this.r) * cos(t + 90 + this.r) - w / 5;
    this.y2 = this.w * sin(t + 90 + this.r) * sin(t + 90 + this.r) - w / 5;
    this.x3 = this.w * sin(t + 45) * cos(t + 45);
    this.y3 = this.w * cos(t + 45) * sin(t + 45);
    this.x4 = this.w * cos(t) * sin(t) - this.w / 3;
    this.y4 = this.w * sin(t) * sin(t) - this.w / 3;
  }
  display() {
    push();
    translate(this.tx, this.ty);
    rotate(t - this.w);
    fill(255, 255, 255 + 100 * sin(t), 200 * abs(cos(t / 2)));
    triangle(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3);
    fill(25 + 100 * sin(t), 255, 255, 200 * abs(cos(t / 2)));
    triangle(this.x1, this.y1, this.x4, this.y4, this.x3, this.y3);
    fill(255 * abs(cos(t / 2)), 25, 255 + 100 * sin(t), 200 * abs(cos(t / 2)));
    triangle(this.x3, this.y3, this.x2, this.y2, this.x4, this.y4);
    fill(255, 255 + 100 * sin(t), 25, 200 * abs(cos(t / 2)));
    triangle(this.x1, this.y1, this.x2, this.y2, this.x4, this.y4);
    fill(255)
    circle(this.x1,this.y1,5)
    circle(this.x2,this.y2,5)
    circle(this.x3,this.y3,5)
    circle(this.x4,this.y4,5)
    pop();
  }
}
function keyPressed() {
  frameCount = 0;
  tArray = [];
  n = 1;
  setup();
}