thlai-Project-05-Wallpaper

I wanted to create a pond-like wallpaper with fish and water ripples. At first, I had my fish going straight to the right, horizontally, but decided it looked too static. I rotated/translated instead, to make it seem like the fish were following each other in a stream.

sketch

// Tiffany Lai
// 15-104, Section A
// thlai@andrew.cmu.edu
// Project 05 - Wallpaper

function setup() {
    createCanvas(480, 480);
    noLoop();
    angleMode(DEGREES);
    ellipseMode(CENTER);
}

function draw() {
    background(245, 241, 219);

    var fx = 25;
    var fy = 10;
    var num = 7; // number of fish in each row
    var offset = 10;

    // CREATE ROWS OF FISH
    for (var y= 0; y < 9; y ++){
        for (var x = 0; x < num; x ++) {
            if(y%2==1){ // every other  row
                num = 3;
                offset = 100;
            } else {
                num = 4;
                offset = 10;   
        }
            translate(5, 0);
            rotate(x);
            fish(fx*5*x + offset, fy+60*y-20); // draw the fishes
        }
    }   

    // CREATE WATER DROPS
    var droplet = 100;
    for(var i = 0; i < 6; i++){
        push();
        stroke(255, 190);
        strokeWeight(2);
        noFill();
        ellipse(400, 10, 10+i*(5+i*10), 10+i*(5+i*10)); // right ripples
        ellipse(150, 200, i*40, i*40); // middle ripples
        ellipse(0, 50, droplet-i*20, droplet-i*20); // top ripples
        pop();
    }
}

// FISH FUNCTION
function fish(fx, fy) {

    push();
    translate(fx, fy);
    rotate(30);
    noStroke();

    fill(random(210, 255), 110, 74); // fill with random orange
    quad(20, 27, 38, 39, 28, 52, 53, 37); // tail
    triangle(71, 22, 78, 21, 83, 27); // top fin
    triangle(68, 51, 82, 42, 79, 49); // bottom fin

    fill(random(50,100), random(90,150), random(130,180)); // fill with random blue
    beginShape(); // body
        vertex(53, 37);
        vertex(78, 27);
        vertex(92, 29);
        vertex(100, 37);
        vertex(95, 43);
        vertex(77, 43);
    endShape();
    pop();
}