let angle, px, py;

let colorX, colorY;

​

function setup() {

  createCanvas(500, 500, WEBGL);

  setAttributes('antialias', true);

  colorX = color(0,0,255);

  colorY = color(255,0,255)

  // fill(237, 34, 93);

  noStroke();

  // strokeWeight(1);

}

​

function draw() {

  background(200);

  rotateX(frameCount * 0.01);

  rotateZ(frameCount * 0.01);

  ngon(sides, 0, 0, 180,40);

}

​

​

​

function mouseClicked(){

  if (sides > 6) {

    sides = 3;

  } else {

    sides++;

  }

}

​

function mouseMoved(){

  let x = map(mouseX, 0, width, 0, 255);

  let y = map(mouseY, 0, height, 0, 255);

  colorX = color(x, 0,255);

  colorY = color(y, 0,255);

}

​

function ngon(n, x, y, d, h) {

  beginShape(TRIANGLE_STRIP);

  for (let i = 0; i < n + 1; i++) {

    angle = TWO_PI / n * i;

    px = x + sin(angle) * d / 2;

    py = y - cos(angle) * d / 2;

    fill(colorX);

    vertex(px, py, 0);

    px = x + sin(angle) * d / 4;

    py = y - cos(angle) * d / 4;

    fill(colorY);

    vertex(px, py, h);

  }

​

  endShape();

  beginShape();

  for (let i = 0; i < n + 1; i++) {

    fill(colorX);

    angle = TWO_PI / n * i;

    px = x + sin(angle) * d / 2;

    py = y - cos(angle) * d / 2;

    vertex(px, py, 0);

  }

  endShape();

   beginShape();

  for (let i = 0; i < n + 1; i++) {

    fill(colorY);

    angle = TWO_PI / n * i;

    px = x + sin(angle) * d / 4;

    py = y - cos(angle) * d / 4;

    vertex(px, py, h);

  }

  endShape();

}