​

// Declaring of Variables

// x & y positions of the animations

let xPos, yPos;

// x & y increments in the respective directions

let xInc=0, yInc=0;

// The starting direction of change in the x & y directions

let xIncrement =1, yIncrement =0;

// to keep a track of the color changes with the key presses

let redColorCounter = 0,blueColorCounter = 0, yellowColorCounter = 0;

// variables to keep track of speed in x & y directions

let xSpeed=7, ySpeed=3;

​

function setup() {

  createCanvas(500, 500);

  background(220);

}

​

function draw() {

  // To increment the movement along the x-axis

  // Increasing x when there is still space in the x-axis

  if(xIncrement==1){

    xInc = xInc +xSpeed;

  }

  // Start decreasing x when we reach one end of the canvas, and move in the other end

  else{

    xInc = xInc -xSpeed;

  }

  // To check if the end of canvas in the x direction has been reached

  if(xInc >=500 && xIncrement ==1){

    xIncrement = 0;

  }

  else if (xInc <=0){

    xIncrement = 1;

  }

  // To increment the movement along the y-axis

  // Approach is similar to the x direction movement

  if(yIncrement==1){

    yInc = yInc +ySpeed;

  }

  else{

    yInc = yInc -ySpeed;

  }

  if(yInc >=500 && yIncrement ==1){

    yIncrement = 0;

  }

  else if (yInc <=0){

    yIncrement = 1;

  }

  // A loop to draw the different squares

  for (let i = 0; i<230; i=i+20)

  {   

      // Fill with the dark backgrounds in the pyramid style

      fill(i,i,i);

      // To add the different colors with the key presses, such that they are added in an incremental way

      // For the Red Color

      if (i==redColorCounter){

        fill(255,160,122)

      }

      // For the Blue Color

      if(i == blueColorCounter){

        fill(0, 0, 255);

      }

      // For the Yellow Color

      if(i == yellowColorCounter){

        fill(255, 255, 0);

      }

      // Changing xPosition and the yPosition of the squares

      xPos = i*(map(xInc, 250, 500, 1.0, 1.9))

      yPos = i*(map(yInc, 250, 500, 1.0, 1.9))

      rect(xPos,yPos, 500-(i*2))

  }

  // Make the colors 'climb' the different squares in the animation

  redColorCounter+=20;

  blueColorCounter+=20;

  yellowColorCounter+=20;

}

​

// Function for the keyPressed

// Starts off

function keyPressed() {

  if (keyCode === LEFT_ARROW) {

    redColorCounter = 0;

  }

  if (keyCode === RIGHT_ARROW) {

    blueColorCounter = 0;

  }

  print(keyCode)

  if (keyCode === 65) {

    yellowColorCounter = 0;

  }

}