let x1 = 202;

let y1 = 460;

let x2 = 268;

let y2 = 252;

let x3 = 419;

let y3 = 173;

let x4 = 597;

let y4 = 306;

let x5 = 419;

let y5 = 471;

let x6 = 547;

let y6 = 173;

let x7 = 719;

let y7 = 477;

let x8 = 186;

let y8 = 295;

let x9 = 696;

let y9 = 252;

​

//shape shifting variable

let directionX1 = 2;

let directionY1 = 1;

let directionX2 = 1;

let directionY2 = 2;

let directionX3 = 1;

let directionY3 = 1;

let directionX4 = 1;

let directionY4 = 2;

let directionX5 = 2;

let directionY5 = 1;

let directionX6 = 2;

let directionY6 = 1;

let directionX7 = 2;

let directionY7 = 1;

let directionX8 = 2;

let directionY8 = 1;

let directionX9 = 2;

let directionY9 = 1;

​

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 (i = 0; i < 30; i = i + 10) {

    noFill();

    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);

    point(x7 + i, y7 + i);

    point(x8 + i, y8 + i);

    point(x9 + i, y9 + i);

​

    beginShape();

    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);

    curveVertex(x7 + i, y7 + i);

    curveVertex(x8 + i, y8 + i);

    curveVertex(x9 + i, y9 + i);

​

    endShape(CLOSE);

    //pong style shape shifting

    x1 = x1 + directionX1;

    x2 = x2 + directionX2;

    x2 = x3 + directionX2;

    x3 = x3 + directionX3;

    x4 = x4 + directionX4;

    x5 = x5 + directionX5;

    x6 = x6 + directionX6;

    x7 = x7 + directionX7;

    x8 = x8 + directionX8;

    x9 = x9 + directionX9;

​

    y1 = y1 + directionY1;

    y2 = y2 + directionY2;

    y3 = y3 + directionY3;

    y4 = y4 + directionY4;

    y5 = y5 + directionY5;

    y6 = y6 + directionY6;

    y7 = y7 + directionY7;

    y8 = y8 + directionY8;

    y9 = y9 + directionY9;

    //make sure the movement is in the center of the canva

​

    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 (x7 > 600 || x7 < 200) {

      directionX7 = -directionX7;

    }

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

      directionX8 = -directionX8;

    }

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

      directionX9 = -directionX9;

    }

​

    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;

    }

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

      directionY7 = -directionY7;

    }

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

      directionY8 = -directionY8;

    }

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

      directionY9 = -directionY9;

    }

  }

}

​