Ocean - OpenProcessing

main.js
xxxxxxxxxx
 
var stars = [];
​
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  
  for (let i = 0; i < 100; i++) {
    stars.push({
      x: random(width),
      y: random(0, height / 4),
      rad: random(4),
      opacity: random(50, 255)
    });
  }
}
​
function draw() {
  colorMode(RGB, 255);
  background(5, 20, 65);
  
  for (let i = 0; i < stars.length; i++) {
    strokeWeight(stars[i].rad);
    stroke(255, stars[i].opacity);
    point(stars[i].x, stars[i].y);
  }
  
  colorMode(HSB, 360);
  noStroke();
  
  let waveCount = 10;
  
  for (let i = 0; i < waveCount; i++) {
    wave(
      map(i, 0, waveCount, 220, 250), 
      map(i, 0, waveCount, 200, 100),
      height / 2 + pow(i, 2.5) + map(mouseY, 0, height, 0, 15) * (i + 1),
      map(i, 0, waveCount, 0.1, 0.75), 
      map(i, 0, waveCount, 4, 15)
    );
  }
}
​
function wave(waveHue, waveBrightness, waveHeight, speed, amp) {
  fill(waveHue, 255, waveBrightness);
  
  let count = 25;
  
  beginShape();
  
  vertex(0, waveHeight / 2);
  vertex(0, waveHeight / 2);
  
  for (let x = 0; x < width; x+=width / count) {
    let y = waveHeight / 2 + sin(frameCount * 0.02 - x * speed) * amp;
    curveVertex(x, y);
  }
  
  vertex(width, waveHeight / 2);
  vertex(width, waveHeight / 2);
  vertex(width, height);
  vertex(0, height);
  vertex(0, waveHeight / 2);
  
  endShape();
}