​

//each one sized height/10.  = plane. There is an option to either add a row of circles or a row of rectangles. This part is happening by chosing either the "drawcirclesline" or "drawlinerow" function.

// a  highlighter / bar moves along the mouse to filter the color and shapes.

//Playing with complimentary colors . 

//when you press the mouse the highlighter disappears and a blue filter is applied and follows the movement of the mouse cursor.

​

let plane= 0 ;

​

function setup() {

  createCanvas(1200, 600);

  //frameRate (2)

  plane =height/10;

}

​

function draw() {

  background(242, 196, 208);

  strokeWeight(15);

  stroke(242, 187, 22, random(90, 100));

​

  //draw highlighter

  fill(242, 92, 5, 60);

  if (mouseIsPressed == false)

    rect(mouseX - 100, mouseY, width + 50, plane, 80);

​

  //----- here is where the drawing part happens

  //draw circles line 1

  // each function is being called usign a variable for the row number and the size of the diameter

  fill(242, 94, 149);

  drawcirclesline(1, 30);

  //draw circles line 4

  drawcirclesline(4, 25);

  //draw circles line 6

  //add stoke

  stroke(242, 92, 5);

  drawcirclesline(6, 9);

  //draw circles line 2

  drawcirclesline(2, 5);

  //draw circles line 8

  drawcirclesline(8, 5);

  //fill(242, 68, 5);

  drawcirclesline(5, 5);

  drawcirclesline(3, 8);

  //change stroke color to pink

​

  stroke(242, 187, 22, random(90, 100));

  drawcirclesline(7, 20);

  //fill(242, 94, 149);

  drawcirclesline(9, 15);

​

  //---------- rectangles-------------------------------//

  stroke(242, 92, 5);

  // draw lines row 2

  drawlinerow(2, 20);

  // draw lines row 7

  drawlinerow(7, 20);

  // draw lines row 5

  drawlinerow(5, 20);

  // draw lines row 1

  drawlinerow(1, 5);

  // fill( 242, 235, 136)

  drawlinerow(6, 5);

  drawlinerow(4, 5);

  // draw lines row 3

  drawlinerow(9, 20);

​

​

  // /---------functions - library ------------------//

​

  //contains:  a function that can place a set of circles in each row. The variables that are being used are 2 (n=number. s=size)

  //to this function a parameter is being added : when mouse is pressed the a new colomn of circles appear slightly offseted

  // using a for loop ,that increases a step for every row , 

  function drawcirclesline(n, s) {

    let sp = 15;

      plane =height/10;

    for (let i = 0; i <= width; i += plane) {

      circle(i, n *plane, s);

//-------

      if (mouseIsPressed) {

        fill(255);

        //dublicate circles where the mouse is 

        circle(mouseX + sp, n * plane + sp, s);

         // draw a green filter and play with opacity 

        fill(120, 255, 100, 3);

        rect(mouseX - width,  -10, (width), height + 200, 80);

      }

​

    }

  }

}

// create a function that adds rectangles  in each row ( the X position is offset by 10 pixels so that there is no shape overlap )

function drawlinerow(n, l) {

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

    fill(255);

    rect(i / 2 + 10, n * plane - 20, 2, l);

​

  }

}

​