Project 03: Dynamic Drawing

var angle = 0;
function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
    background(max(mouseX/2, mouseY/2), 200, 255);
    noStroke();

    //little fish bottom left swimming in circles
    push();
    translate(350, 60);
    rotate(radians(-angle));
    fill(190, 88, 77);
    ellipse(0, 0, 100, 45);
    triangle(0, 0, 60, -30, 60, 30);
    //little fish top right swimming in circles
    pop();
    push();
    translate(60, 350);
    rotate(radians(angle));
    fill(190, 88, 77);
    ellipse(0, 0, 100, 45);
    triangle(0, 0, 60, -30, 60, 30);
    pop();
    angle += 2; 

    //little fish swimming through the ripples
    fill(190, 88, 77);
    ellipse(mouseX, mouseY, 100, 55);
    triangle(mouseX, mouseY, mouseX-60, mouseY-30, mouseX-60, mouseY+30);

    //water ripples
    //restrict mouseX to 0-450
    var mX = max(min(mouseX, 700), 0);
    //sizing of circles based on mouseX
    var size1 = mouseX;
    var size2 = mX/2;
    var size3 = mX/3;
    var size4 = mX/4;
    var size5 = mX/5;
    //first water drop
    fill(50, 0, mouseX/2, 100);
    ellipse(20, height/2, size1);
    ellipse(20, height/2, size2);
    ellipse(20, height/2, size3);
    ellipse(20, height/2, size4);
    ellipse(20, height/2, size5);
    push();
    //second water drop
    translate(150, 0);
    if (mouseX >= width/3) {
        //delays time of expansion with mouse
        var offset = -30;
        //circle
        fill(50, 50, mouseX/2, 80);
        ellipse(20, height/2, size1+offset);
        ellipse(20, height/2, size2+offset);
        ellipse(20, height/2, size3+offset);
        ellipse(20, height/2, size4+offset);
        ellipse(20, height/2, size5+offset);
    }
    //third water drop
    pop();
    push();
    translate(300, 0);
    if (mouseX >= width/2) {
        //delays time of expansion with mouse
        var offset = -60;
        //circles
        fill(50, 100, mouseX/2, 60);
        ellipse(20, height/2, size1+offset);
        ellipse(20, height/2, size2+offset);
        ellipse(20, height/2, size3+offset);
        ellipse(20, height/2, size4+offset);
        ellipse(20, height/2, size5+offset);
    }
    //fourth water drop
    pop();
    push();
    translate(400, 0);
    if (mouseX >= width/2+100) {
        //delays time of expansion with mouse
        var offset = -80;
        //circles
        fill(50, 150, mouseX/2, 40);
        ellipse(20, height/2, size1+offset);
        ellipse(20, height/2, size2+offset);
        ellipse(20, height/2, size3+offset);
        ellipse(20, height/2, size4+offset);
        ellipse(20, height/2, size5+offset);
    }   
    //fifth water drop
    pop();
    push();
    translate(500, 0);
    if (mouseX >= width/2+150) {
        //delays time of expansion with mouse
        var offset = -80;
        //circles
        fill(50, 200, mouseX/2, 40);
        ellipse(20, height/2, size1+offset);
        ellipse(20, height/2, size2+offset);
        ellipse(20, height/2, size3+offset);
        ellipse(20, height/2, size4+offset);
        ellipse(20, height/2, size5+offset);
    }   



}