sketchDownload
var waveDetail = 0.003; // detail in shallow wave
var waveSpeed = 0.0002; // speed of waves
var waveDetail2 = 0.002; //detail of mid wave
var waveDetail3 = 0.001; //detail of deep wave
var seaGround = []
var sunset;
function preload() {
sunset = loadImage("https://i.imgur.com/14AlgbU.png");
seaweed = loadImage("https://i.imgur.com/JHftB8t.png");
fish = loadImage("https://i.imgur.com/BFimCOm.png")
}
function setup() {
createCanvas(600, 400);
for (var i = 0; i < 5; i ++){
var rx = random(width);
var ry = random(10, 50)
seaGround[i] = makeSeaweed(rx, ry);
}
frameRate(15);
}
function draw() {
background(153, 153, 204);
image(sunset, 0, 0, 600, 400);
makeWaves();
updateSeaweed();
removeSeaweed();
image(fish, 300, 200, 300, 200);
addSeaweed();
}
function makeWaves() {
fill(95, 191, 254);
noStroke();
beginShape();
vertex(0, height);
for (var x = 0; x < width; x++) {
var t = (x * waveDetail) + (millis() * waveSpeed);
var y = map(noise(t), 0, 1, height / 8 * 2, height / 8 * 4);
vertex(x, y);
}
vertex(width, height);
endShape();
//second wave
beginShape();
fill(41, 160, 255);
vertex(0, height);
for (var x = 0; x < width; x++) {
var t2 = (x * waveDetail2) + (millis() * waveSpeed);
var y = map(noise(t2), 0, 1, 100, 300);
vertex(x, y);
}
vertex(width, height);
endShape();
//third wave
beginShape();
fill(19, 138, 233);
vertex(0, height);
for (var x = 0; x < width; x++) {
var t3 = (x * waveDetail3) + (millis() * waveSpeed);
var y = map(noise(t3), 0, 1, 300, height);
vertex(x, y);
}
vertex(width, height);
endShape();
}
function updateSeaweed(){
for (var i = 0; i < seaGround.length; i ++){
seaGround[i].move();
seaGround[i].display();
}
}
function removeSeaweed(){
var keepSeaweed=[];
for (var i = 0; i < seaGround.length; i++) {
if (seaGround[i].x < 600) {
keepSeaweed.push(seaGround[i]);
}
}
}
function addSeaweed(){
//little probability
var newSeaweedLikelihood = 0.02;
if (random(0,1) < newSeaweedLikelihood) {
seaGround.push(makeSeaweed(15, 15));
}
}
function moveSeaweed(){
this.x += this.speed;
}
function displaySeaweed(){
fill(0);
stroke(0);
push();
translate(this.x, height-300);
image(seaweed, 0, 0, 400, 320);
pop();
}
function makeSeaweed(birthLocationX, birthLocationY){
var seaweeds = {x: birthLocationX,
y:birthLocationY,
speed:random(3, 7),
move: moveSeaweed,
display: displaySeaweed};
return seaweeds;
}
I wanted to illustrate a fish swimming in the ocean, as the ocean waves and seaweed passed by. I was inspired by the sunset, and I started to think about how i can make the sunset a moving landscape. I drew the sunset, seaweed, and fish objects on Procreate.