Project 3: Dynamic Drawing

sketch

//Jacky Lococo
//jlococo
//Section C
var Rc = 255 // color variables for the moving cirlce, top rectagle, small circles
var Gc = 193
var Bc = 193
var angle = 0
var Rr = 0
var Gr = 60
var Br =  255
var colorChange = 1
var strokeOpacity = 255

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(255);
    strokeWeight(0);
    fill(Rr, Gr, Br);
    ellipse(160, 160, 200, 200);
    fill(255, 239, 239);
    rect(0, 300, 600, 300); //pink rectangle

    strokeWeight(0);
    fill(Rc, Gc, Bc, 100);
    ellipse(mouseX + 10, mouseY + 10, min (mouseX, 200), min (mouseX,200));
        //shadow of ellipse that follows mouse

    fill(255, 239, 239);
    ellipse(mouseX, mouseY, min (mouseX, 200), min (mouseX,200)); 
        //pale pink circle behind main ellipse

    fill(Rc, Gc, Bc, 200);
    ellipse(mouseX, mouseY, min (mouseX, 200), min (mouseX,200)); 
        //ellipse that follows the mouse and grows smaller at x=200

    fill(Rr, Gr, Br, 200);
    rect(0, 0, 600, 300)
    strokeWeight(0);
    fill(255, 239, 239);
    ellipse(150, 150, 200, 200);
    fill(Rc, Gc, Bc, 200);

    push(); //for top rotating tiny circles
    translate(150, 150)
    rotate(radians(angle));
    ellipse(50, 50, 50, 50);
    angle += 1
    rotate(radians(angle));
    ellipse(50, 50, 50, 50);
    angle += 0.5
    rotate(radians(angle));
    ellipse(50, 50, 50, 50);
    angle +=0 // on circle slower at 0 speed
    if(mouseY > 300){
        angle += 1
    }
    pop();

    push(); // for mouse following rotating cirlces
    translate(mouseX, mouseY);
    rotate(radians(angle));
    ellipse(50, 50, 50, 50);
    angle += 1
    rotate(radians(angle));
    ellipse(50, 50, 50, 50);
    angle += 0.5
    rotate(radians(angle));
    ellipse(50, 50, 50, 50);
    angle += 0
    if(mouseY > 300){
        angle += 1
    }
    pop()

    strokeOpacity = mouseX - 150
    //line that moves - starting from bottom of canvas
    strokeWeight(7)
    stroke(255, 255, 255, strokeOpacity);
    line(100, 0, 100, 600)

    //line that moves - starting from top of canvas
    strokeWeight(7) 
    stroke(255, 255, 255, strokeOpacity);
    line(140, 0, 140, 600)


    //colors alternating with each press if the mouse
    if (colorChange == 1){
        Rc = 255
        Gc = 193
        Bc = 193
        Rr = 0
        Gr = 60
        Br =  255
    }
    if (colorChange == 2){
        Rc = 0
        Gc = 60
        Bc = 193
        Rr = 255
        Gr = 193
        Br = 193
    }
    //text that follows the mouse
    strokeWeight(0);
    fill(255);
    textSize(15)
    text('p r e s s', mouseX, mouseY);
} 

//mouse pressed function that switches the colors
function mousePressed () {
    colorChange = colorChange + 1
    if (colorChange == 3)
        colorChange = 1
    print(colorChange.toString);
}

This project was a bit challenging at first, but I think once I had a clear sketch and idea for it, the tasks and process became a lot more manageable.

Sketch: