createCanvas(400, 400);

  //slider to control the blinking rate at which the colors change

  slider = createSlider(0, 60, 60);

  slider.position(0, 400);

  slider.style('width', '80px');

}

​

function draw() {

  //assign user selected speed to frame rate

  let val = slider.value();

  frameRate(val);

  //when mouse pressed, draw random-color circle at mouse position

  if (mouseIsPressed) {

    fill(random(255),random(255),random(255));

    ellipse(mouseX, mouseY, 70);

  }

  else //if mouse not pressed, display the artwork

  {

    //draw circles in background

    drawBgCircles();

    //draw rectangles in background

     drawBgRects();

    //draw triangles on top-right corner

     getTriangles();

    //draw the blinking circles in the top-left and bottom-right           corners

     getCircles(20,50,8);

     getCircles(110,30,7);

     getCircles(90,130,8);

     getCircles(320,380,8);

     getCircles(380,340,8);

    //draw flowers on the bottom-left corner

     getFlowers();

  }

}

​

//create circles with centre posX and posY and width that changes by circleWidth

function getCircles(posX,posY,circleWidth) {

  //alternate color of each circle between black and a random value between black and white

  colorBlack = true;

  noStroke();

  //loop 20 times, each time increasing the width of the circle centered at x and y

  for (let i = 20; i>0; i--) {

    //alternating colors

      if (colorBlack == true)

        {

          colorBlack=false;

          fill(random(10),random(15),random(15));

        }

      else {

        colorBlack = true; 

            fill(random(255));

      }

    //making the ellipse

      ellipse(posX,posY, circleWidth*i, circleWidth*i);

    }

}

​

//to create triangles at top-right 

function getTriangles(){

  //initial x and y coordinates

  triangleX=240;

  triangleY=160;

  //different colors - shades between white and black

  let colorBlack =true;

  for (let i =0; i < 10; i++)

    {

      if (colorBlack){

        fill(i*25);

        colorBlack=false;

      }else {

        fill(0);

        colorBlack =true;

      }

      //create triangle and then increment x and decrement y so next triangle is smaller and closer to top-right corner

      triangle(triangleX,0, width,triangleY, width,0);

      triangleX=triangleX+20;

      triangleY=triangleY-20;

    }

}

​

//create circles in background using while loop 

function drawBgCircles(){

  //until x has not exceeded width and y has not exceeded height, increment them and create a circle at x and y, so that entire background has a "grid" of circles 

  let circleX=0;

  while (circleX < width+20){

    let circleY=0;

   while(circleY<height+20) {

    fill(0, 10,20,50);

    ellipse(circleX, circleY, 20,20);

    circleY=circleY+20;

  }

    circleX=circleX+20;

  }

}

​

//draw squares/rects in the background such that there is a colored square, then an empty space(square), then a colored squared, then empty and so on so background is a "grid" of squares and spaces

function drawBgRects(){

  let colorBlack=false;

  let posX=0;

  while (posX < width ){

    let posY=0;

    if(colorBlack == true)

      {

        colorBlack = false;

      }

    else {

      colorBlack = true;

    }

   while(posY<height) {

     if (colorBlack == false)

       {

         fill(random(255));

         colorBlack=true;

       }

     else{

      noFill();

       colorBlack = false;

     }

    rect(posX, posY, 20,20);

    posY=posY+20;

  }

    posX=posX+20;

  }

}

​

//draw a flower at x and y using rotating ellipses

function drawFlower(posX,posY){

  noStroke();

​

  for (let i = 0; i < 10; i ++) {

    fill(0,127);

    ellipse(posX,posY,10, 60);

    rotate(PI/5);

  }

}

​

//helper function to draw a flower 

function drawFlowers(posX,posY)

{

  translate(posX,posY);

  drawFlower(0,0);

}

​

//function to create a bunch of flowers in bottom-left

function getFlowers(){

  drawFlowers(50, 350);

  drawFlowers(30, 30);

  drawFlowers(-60, 10);

  drawFlowers(0, -80);

}

​

//function to get rectangles in center - not used in the current sketch

function getCenterRects(){

  w=100; x=160; y=160; c=0;

  for (let i=0; i < 4; i++){

    fill(c);

    square(x,y,w);

    x=x+5; y=y+5; w=w-25;

    if (c==0) {c=255;}

    else {c=0;}

  }

}