This sketch creates a calming ocean wave animation with layered sine waves in multiple shades of blue. Three waves move at different speeds and amplitudes, creating a sense of depth and peaceful motion. A gradient background transitions from light sky blue to deep ocean blue, and the canvas automatically resizes with the window.
Code flow showing setup, draw, wave, windowresized
๐ก Click on function names in the diagram to jump to their code
setup()setup() runs once when the sketch starts. Here we create a full-screen canvas that will display our ocean waves. windowWidth and windowHeight are p5.js variables that automatically contain the browser window's dimensions.
function setup(){createCanvas(windowWidth,windowHeight);}createCanvas(windowWidth,windowHeight)draw()draw() runs 60 times per second, creating smooth animation. Each frame, we redraw the background gradient and three waves at slightly different positions. The waves move because we pass the time variable t to the wave function, which uses it in a sine calculation. Different speed values (0.6, 0.4, 0.25) make each wave move at a different rate, creating a natural, layered ocean effect.
function draw(){
let g=drawingContext.createLinearGradient(0,0,0,height);
g.addColorStop(0,'#87cefa');g.addColorStop(1,'#004f7a');
drawingContext.fillStyle=g;drawingContext.fillRect(0,0,width,height);
noStroke();let t=frameCount*0.02;
wave(height*0.7,20,color('#a7d8ff'),0.6,t);
wave(height*0.73,25,color('#64b5f6'),0.4,t);
wave(height*0.76,30,color('#1e88e5'),0.25,t);
}let g=drawingContext.createLinearGradient(0,0,0,height); g.addColorStop(0,'#87cefa');g.addColorStop(1,'#004f7a');
Creates a vertical gradient that transitions from light sky blue at the top to deep ocean blue at the bottom
drawingContext.fillStyle=g;drawingContext.fillRect(0,0,width,height);
Sets the gradient as the fill style and draws a rectangle covering the entire canvas
let t=frameCount*0.02;
Creates a time variable that increases each frame, used to animate the waves smoothly
wave(height*0.7,20,color('#a7d8ff'),0.6,t); wave(height*0.73,25,color('#64b5f6'),0.4,t); wave(height*0.76,30,color('#1e88e5'),0.25,t);
Calls the wave function three times with different parameters to create layered waves at different heights, colors, and speeds
let g=drawingContext.createLinearGradient(0,0,0,height)g.addColorStop(0,'#87cefa')g.addColorStop(1,'#004f7a')drawingContext.fillStyle=gdrawingContext.fillRect(0,0,width,height)noStroke()let t=frameCount*0.02wave(height*0.7,20,color('#a7d8ff'),0.6,t)wave(height*0.73,25,color('#64b5f6'),0.4,t)wave(height*0.76,30,color('#1e88e5'),0.25,t)wave(yBase, amp, col, s, t)This function creates one wave by using a sine function to calculate smooth up-and-down motion. The key formula is sin(x*a-t*s)*amp: the x*a part creates the wave pattern across the screen, the -t*s part makes it animate (the negative sign makes it move left), and *amp scales it to the right height. By calling this function three times with different parameters, we create the layered effect.
function wave(yBase,amp,col,s,t){
fill(col);beginShape();
for(let x=0;x<=width+20;x+=20){
let a=0.01,y=yBase+sin(x*a-t*s)*amp;
vertex(x,y);
}
vertex(width,height);vertex(0,height);endShape(CLOSE);
}for(let x=0;x<=width+20;x+=20){ let a=0.01,y=yBase+sin(x*a-t*s)*amp; vertex(x,y); }
Loops across the canvas width, calculating sine wave points every 20 pixels and adding them as vertices to create the wave shape
let a=0.01,y=yBase+sin(x*a-t*s)*amp
Calculates the y position of each point using a sine wave formula that creates smooth oscillation
function wave(yBase,amp,col,s,t)fill(col)beginShape()for(let x=0;x<=width+20;x+=20)let a=0.01y=yBase+sin(x*a-t*s)*ampvertex(x,y)vertex(width,height)vertex(0,height)endShape(CLOSE)windowResized()windowResized() is a special p5.js function that automatically gets called whenever the browser window is resized. By calling resizeCanvas() here, we ensure the ocean waves always fill the entire screen, no matter how large or small the window is. This makes the sketch responsive to different screen sizes.
function windowResized(){resizeCanvas(windowWidth,windowHeight);}resizeCanvas(windowWidth,windowHeight)g
object
Stores the gradient object created by createLinearGradient. This gradient transitions from light blue to dark blue and is used to fill the background
let g=drawingContext.createLinearGradient(0,0,0,height);
t
number
Stores the animation time variable (frameCount * 0.02). This increases each frame and controls how far the waves have moved, creating smooth animation
let t=frameCount*0.02;
x
number
Loop variable in the wave function that tracks the horizontal position as we generate wave points across the canvas
for(let x=0;x<=width+20;x+=20)
a
number
Frequency value (0.01) that controls the wavelength - how tight or loose the wave oscillations are. Smaller values = longer waves
let a=0.01
y
number
Calculated y position of each wave point. Starts at yBase and oscillates up and down based on the sine function
y=yBase+sin(x*a-t*s)*amp
Experiment with the code by making these changes:
Here are some ways this code could be enhanced:
The gradient is recreated every single frame (60 times per second) even though it never changes. This is wasteful computation
๐ก Move the gradient creation to setup() and store it in a global variable, then reuse it in draw(). This way it's only created once
Single-letter variable names like 'a', 's', 't', 'x', 'y' are hard to understand. The parameter names yBase, amp, col, s are abbreviated
๐ก Use descriptive names: rename 'a' to 'frequency', 's' to 'speed', 't' to 'time', 'col' to 'color', 'amp' to 'amplitude' for better readability
The loop goes to 'width+20' which means the last wave point might be drawn slightly off-screen, potentially causing visual artifacts
๐ก Change the loop condition to 'x<=width' to ensure all points stay within canvas bounds
The wave speeds and amplitudes are hardcoded, making it difficult to adjust the overall effect without editing multiple lines
๐ก Create global variables for wave parameters (speeds, amplitudes, colors) at the top of the sketch so they're easy to modify in one place
