Sofia Syjuco – Project-03 – Dynamic Drawing

sketch

// Sofia Miren Syjuco
// Section A
// smsyjuco@andrew.cmu.edu
// Assignment-03-C

xPosition1 = 320;
yPosition1 = 0;
yPosition2 = 240;
rectSize = 30;
circleSize = 15;
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    noStroke();

    // have background gradiate as mouseY changes from pink to green
    colR = map(mouseY, 0, height, 255, 152);
    colB = map(mouseY, 0, height, 153, 151);
    colG = map(mouseY, 0, height, 0, 255);
    background(colR, colG, colB);

    push();
    translate(320, 240);
    fill (0);
    // rotate the squares faster/slower depending on mouseY position
    rotate (millis ()/mouseY);
    // create the black rectangle
    rect (0 - rectSize/2, yPosition1, rectSize, rectSize);
    // if mouseY is on lower half of screen, alter the yPosition variables
    // this will effect rectangle placement
    if ((mouseY > 0) & (mouseY < 200)) {
        yPosition1 = mouseY;
        yPosition2 = (0 - mouseY);
         }
    pop();

    push();
    translate (320, 240);
    fill ("white");
    // rotate the squares faster/slower depending on mouseY position
    rotate (millis ()/mouseY);
    // create the white rectangle
    rect (0 - rectSize/2, yPosition2, rectSize, rectSize);
    // if mouse Y on upper half of screen, let mouseY effect square's position
    if ((mouseY < 0) & (mouseY > -200)){
        yPosition2 = mouseY;
     }
    pop();
 
    push();
    // make the circle's color gradiate from black/white depending on mouseY
    fill (mouseY);
    // create the ellipse
    ellipse (xPosition1, height/2, circleSize, circleSize);
    // if the mouseY is within certain bounds, change ellipse position
    if ((mouseY > 40) & (mouseY < 440)){
        xPosition1 = mouseY + 100;
    // if the circle is on right half of screen, make it big (20x20)
        if (xPosition1 > 320){
            circleSize = 20;
            }
    // if the circle is on the left half of screen, make it small (10x10)
         if (xPosition1 < 320) {
            circleSize = 10;
            }
    }
    pop();
}

My process for this project was to slowly cobble together elements of what we had learned, and step-by-step create a foundation which I could later experiment on. It took a lot of testing and just moving numbers around, but in the end I think I have a better understanding of manipulating shapes, and translating things.