// this sketch first before you 

// start working on it.

​

​

// This sketch demonstrates how to use

// conditionals based on the state of the mouse.

// You can follow this tutorial

// https://www.openprocessing.org/sketch/972447

// to read more about if-else statements.

​

​

function setup() {

    createCanvas(windowWidth, windowHeight);

    background(40);

    noStroke();

    fill(200,255,200);

    ellipse(width/2, height/2, 150, 150);

}

​

function draw() {

    if(mouseX < width/2) { 

        // part 1

        // comparison operator <

        // (1 comparision: smaller)

        //

        // true for the X-location of the mouse 

        // smaller than half of the canvas width.

        // (mouse inside second and third quadrant)

        // Draw a small white dot.

        fill(255);

        ellipse(mouseX, mouseY, 10, 10);

    } else if (mouseX > width/2 && mouseY<height/2) {

        // part 2

        // logical operator &&

        // (2 comparisons and 1 logical operator)

        // 

        // if the above condition is not true, but 

        // the X-location of the mouse is inside  

        // the right half of the canvas AND the 

        // Y-location of the mouse is in the upper  

        // half of the canvas.

        // (mouse inside first quadrant)

        // Draw a green dot.

        fill(200,255,200);

        ellipse(mouseX, mouseY, 40, 40);

    } else {

        //

        // if both of the above conditions  

        // are NOT true.

        // (mouse inside fourth quadrant)

        // Draw a purple dot.

        fill(200,200,255);

        ellipse(mouseX, mouseY, 100, 100);

    }

}

​

function mousePressed() {

  background(40);

}

​

​

// Four Quadrants:

// 

// 

//             |

//       2     |      1

//             |

// ----------------------------

//             |

//       3     |      4

//             |

//             |

// 

// 

​