let x1 = 150;// how to move nicely only in the center?

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;

​

//shape shifting variable

let directionX1 = 2;

let directionX2 = 1;

let directionX3 = 2;

let directionX4 = 1;

let directionX5 = 2;

let directionX6 = 1;

let directionY1 = 2;

let directionY2 = 1;

let directionY3 = 2;

let directionY4 = 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 (let i = 0; i < 15; i = i + 5) {

    point(x1 + i, y1 + i);

    point(x1 + i, y2 + i);

    point(x2 + i, y3 + i);

    point(x3 + i, y4 + i);

    point(x4 + i, y3 + i);

    point(x5 + i, y2 + i);

    point(x5 + i, y1 + i);

    point(x6 + i, y4 + i);

​

    beginShape();

    strokeWeight(1);

    noFill();

    curveVertex(x1 + i, y1 + i);

    curveVertex(x1 + i, y1 + i);

    curveVertex(x4 + i, y3 + i);

    curveVertex(x2 + i, y3 + i);

    curveVertex(x1 + i, y2 + i);

    curveVertex(x5 + i, y1 + i);

    curveVertex(x6 + i, y4 + i);

    curveVertex(x3 + i, y4 + i);

    curveVertex(x5 + i, y2 + i);

    curveVertex(x5 + i, y1 + i);

    curveVertex(x4 + i, y3 + i);

​

    endShape(CLOSE);

​

    //pong style shape shifting

    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;

​

    if (x1 > width||x1<0) {

      directionX1 = -directionX1;

    }

    if (x2 > width||x2<0) {

      directionX2 = -directionX2;

    }

    if (x3 > width||x3<0) {

      directionX3 = -directionX3;

    }

    if (x4 > width||x4<0) {

      directionX4 = -directionX4;

    }

    if (x5 > width||x5<0) {

      directionX5 = -directionX5;

    }

    if (x6 > width||x6<0) {

      directionX6 = -directionX6;

    }

​

    if (y1 > height||y1<0) {

      directionY1 = -directionY1;

    }

    if (y2 > height||y2<0) {

      directionY2 = -directionY2;

    }

    if (y3 > height||y3<0) {

      directionY3 = -directionY3;

    }

    if (y4 > height||y4<0) {

      direction4 = -directionY4;

    }

​

  }

}

​