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.
// 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();
}