Julia Nishizaki – Project 03 – Dynamic Drawing

sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project-03

var oceanY = 480;
var oceanSpeed = 0.05;
var diffocean = 0;
var diffwaves = 1;
var deg = 0;
var brightness = 0;

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

}

function draw() {
    background(220);

    noStroke();
    fill(34, 110, 148);
    rectMode(CORNERS);

    //ocean rising and falling
    diffocean = mouseY - oceanY;
    oceanY = oceanY + oceanSpeed * diffocean;
    let conocean = constrain(oceanY, 200, 400)
    rect(0, conocean, width, height);

    //rain
    let rainWeight = constrain(((height - mouseY) / 48), 0, 10);
    strokeWeight(rainWeight);
    stroke(50, 120, 147, 20);
    var cloudsX = width - mouseX;
    line(cloudsX + 25, 100, cloudsX + 25, conocean);
    line(cloudsX + 50, 100, cloudsX + 50, conocean);
    line(cloudsX + 75, 100, cloudsX + 75, conocean);
    line(cloudsX + 100, 100, cloudsX + 100, conocean);
    line(cloudsX + 125, 100, cloudsX + 125, conocean);

    //clouds
    noStroke();
    rectMode(CORNER);
    fill(constrain(mouseY, 50, 255));
    rect(cloudsX, 50, 150, 50, 30, 30, 30);
    
    //boat and boat variables
    //bmX and bmY are boat middle X and Y
    var bmX = 0;
    var bmY = 0;
    //bw and bh are boat height and width
    var bw = 75;
    var bh = 40;
    //bd is displacement of left and right boat corners above bmY
    var bd = 10;
    //bblX and bbrX are boat base left and right X
    var bblX = bmX - bw / 2;
    var bbrX = bmX + bw / 2;

    //boat stroke and fill
    stroke('black');
    strokeWeight(5);
    strokeJoin(ROUND);
    fill('white');
    
    //rotation of the boat
    push();
    translate(width / 2, conocean);
    rotate(radians(deg), bmX, bmY);
    triangle(bblX, bmY, bmX, bmY, bmX, bmY - bh);
    triangle(bbrX, bmY, bmX, bmY, bmX, bmY - bh);
    triangle(bblX - bw / 2, bmY - bd, bblX, bmY + bh, bmX, bmY);
    triangle(bblX, bmY + bh, bbrX, bmY + bh, bmX, bmY);
    triangle(bbrX + bw / 2, bmY - bd, bbrX, bmY + bh, bmX, bmY);
    pop();
    var waves = ((height - mouseY) * 0.05);
    deg += (waves / 8) * diffwaves;
    if (deg > waves || deg < -waves) {
        diffwaves = -diffwaves;
    }

    //water in front of boat
    fill(34, 110, 148);
    noStroke();
    rect(0, conocean + 25, width, height);

    //stormy filter, makes things darker
    brightness = height - mouseY;
    let conbrightness = constrain(brightness, 0, 100);
    fill(12, 52, 68, conbrightness);
    rect(0, 0, width, height);

}

For this project, I wanted to play with the idea of a boat at sea that gets caught in a storm. While I ended up simplifying the project as I went along, I still was able to experiment a little with changing position, color, stroke weight, size, and rotation. However, I struggled a lot with getting the rotation to work, and I still wasn’t able to get it to function without occasionally glitching if your mouse goes too low on the canvas.