Emma NM-Project-03(Dynamic Drawing)

Emma’s dynamic drawing

/* 
Emma Nicklas-Morris
Section B
enicklas@andrew.cmu.edu
Dynamic Drawing
*/

var b = 255;
var r = 200;
var cir = true;

function setup() {
    createCanvas(640, 480);
    
    
}

function draw() {
    background("black");
    b = mouseX/3;
    r = mouseY/2;

    // Changes dot color as you move your mouse
    // Red color is controlled by mouseY and Blue is controlled by mouseX position
    fill(r, 50, b);
    noStroke();

    // Dots increase if mouse moves right or up. 
    // Dot position depends on mouse position from the width or height
    if (cir) {
        ellipse(width-mouseX/2, height-mouseY/2, mouseX/2, mouseX/2); 
        ellipse(width-mouseX, height-mouseY, mouseY/2, mouseY/2);
    }
    else {
        rect(width-mouseX/2, height-mouseY/2, mouseX/2, mouseX/2); 
        rect(width-mouseX, height-mouseY, mouseY/2, mouseY/2);
    }
    
    // Create smaller dots to the left and up on the grid. Follows same principles as above
    push();
    translate(-width/3, -height/3);
    if (cir) {
        ellipse(width-mouseX/2, height-mouseY/2, mouseX/3, mouseX/3);
        ellipse(width-mouseX, height-mouseY, mouseY/3, mouseY/3);
    }
    else {
        rect(width-mouseX/2, height-mouseY/2, mouseX/3, mouseX/3);
        rect(width-mouseX, height-mouseY, mouseY/3, mouseY/3);
    }
    pop();

    // Rotates grid based on mouseX position and follows principles above. Dots are smaller than above
    push();
    translate(-width/3, -height/3);
    rotate(radians(mouseX/3));
    if (cir) {
        ellipse(width-mouseX/2, height-mouseY/2, mouseX/4, mouseX/4);
        ellipse(width-mouseX, height-mouseY, mouseY/4, mouseY/4);
    }
    else {
        rect(width-mouseX/2, height-mouseY/2, mouseX/4, mouseX/4);
        rect(width-mouseX, height-mouseY, mouseY/4, mouseY/4);
    }
    pop();

    // Rotates grid based on mouseY position. Follows same principles as above
    push();
    translate(width/3, 0);
    rotate(radians(mouseY/4));
    if (cir) {
        ellipse(width-mouseX/2, height-mouseY/2, mouseX/4, mouseX/4);
        ellipse(width-mouseX, height-mouseY, mouseY/4, mouseY/4);
    }
    else {
        rect(width-mouseX/2, height-mouseY/2, mouseX/4, mouseX/4);
        rect(width-mouseX, height-mouseY, mouseY/4, mouseY/4);
    }
    pop();

    

}

// By clicking the mouse you switch back and forth between circles and squares
function mousePressed() {
    if (cir == true) {
        cir = false;
    }

    else {
        cir = true;
    }
	
}

I knew I wanted to create a dynamic drawing with circles so I started there and then moved into changing size, position, translation, and rotation based on mouse position. I added one more feature of if you click the screen you can change between circles and squares.