sketch
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);
}
}
This is my pond with swimming and rotating fish, I started with the idea of visualizing water droplets from rain, then thought it would be cool to add the motion of a fish swimming in it.