let x1 = 150;

let x2 = 200;

let x3 = 100;

let x4 = 400;

let x5 = 350;

let x6 = 300;

let y1 = 350;

let y2 = 150;

let y3 = 200;

let y4 = 300;

let y5 = 210;

let y6 = 280;

​

//shape shifting variable

let directionX1 = 1;

let directionX2 = 2;

let directionX3 = 1;

let directionX4 = 2;

let directionX5 = 1;

let directionX6 = 2;

let directionY1 = 1;

let directionY2 = 2;

let directionY3 = 1;

let directionY4 = 2;

let directionY5 = 1;

let directionY6 = 2;

​

function setup() {

  createCanvas(800, 800);

}

​

function draw() {

 background(0);

  strokeWeight(3);

  stroke(0, 0, 255);

  //use "for loop" to draw 3 shape shifting curved polygons in a slight offset from one another

  for (let i = 0; i < 15; i = i + 5) {

    point(x1 + i, y1 + i);

    point(x2 + i, y2 + i);

    point(x3 + i, y3 + i);

    point(x4 + i, y4 + i);

    point(x5 + i, y5 + i);

    point(x6 + i, y6 + i);

​

    beginShape();

    strokeWeight(1);

    noFill();

    curveVertex(x1 + i, y1 + i);

    curveVertex(x1 + i, y1 + i);

​

    curveVertex(x2 + i, y2 + i);

    curveVertex(x3 + i, y3 + i);

    curveVertex(x4 + i, y4 + i);

    curveVertex(x5 + i, y5 + i);

    curveVertex(x6 + i, y6 + i);

​

    endShape(CLOSE);

​

    //pong style shape shifting of the canva

    x1 = x1 + directionX1;

    x2 = x2 + directionX2;

    x3 = x3 + directionX3;

    x4 = x4 + directionX4;

    x5 = x5 + directionX5;

    x6 = x6 + directionX6;

    y1 = y1 + directionY1;

    y2 = y2 + directionY2;

    y3 = y3 + directionY3;

    y4 = y4 + directionY4;

    y5 = y5 + directionY5;

    y6 = y6 + directionY6;

// keep the movement in the center

    if (x1 > 600 || x1 < 200) {

      directionX1 = -directionX1;

    }

    if (x2 > 600 || x2 < 200) {

      directionX2 = -directionX2;

    }

    if (x3 > 600 || x3 < 200) {

      directionX3 = -directionX3;

    }

    if (x4 > 600 || x4 < 200) {

      directionX4 = -directionX4;

    }

    if (x5 > 600 || x5 < 200) {

      directionX5 = -directionX5;

    }

    if (x6 > 600 || x6 < 200) {

      directionX6 = -directionX6;

    }

​

    if (y1 > 600 || y1 < 200) {

      directionY1 = -directionY1;

    }

    if (y2 > 600 || y2 < 200) {

      directionY2 = -directionY2;

    }

    if (y3 > 600 || y3 < 200) {

      directionY3 = -directionY3;

    }

    if (y4 > 600 || y4 < 200) {

      directionY4 = -directionY4;

    }

    if (y5 > 600 || y5 < 200) {

      directionY5 = -directionY5;

    }

    if (y6 > 600 || y6 < 200) {

      directionY6 = -directionY6;

    }

  }

}

​