//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.