Water

let seed = 12345;

let cellSize = 10; // Size of each cell in the grid

​

function setup() {

  createCanvas(700, 700);

  noiseSeed(seed);

  angleMode(DEGREES);

}

​

function draw() {

  seed += 0.01;

  background(0);  

  noStroke();

  for(var y = 0; y < height ; y+=cellSize) {

    for(var x = 0; x < width ; x+=cellSize) {

      let noiseVal = getNoise(x,y);       

      if(noiseVal > 0.8) {          

        fill(76, 115, 183);

        triangle(x, y , x + cellSize + 1 , y ,x ,y + cellSize + 1);

        triangle(x + cellSize, y + cellSize , x + cellSize , y ,x ,y + cellSize);

      } else if (noiseVal > 0.6) {        

        fill(59, 89, 180);

        triangle(x, y , x + cellSize + 1 , y ,x ,y + cellSize + 1);

        triangle(x + cellSize, y + cellSize , x + cellSize , y ,x ,y + cellSize);

      } else if (noiseVal > 0.5) {        

        fill(44, 66, 147);

        triangle(x, y , x + cellSize + 1 , y ,x ,y + cellSize + 1);

        triangle(x + cellSize, y + cellSize , x + cellSize , y ,x ,y + cellSize);

      }else if(noiseVal > 0.4) {      

        fill(44, 66, 147);

        triangle(x, y , x + cellSize + 1 , y ,x ,y + cellSize + 1);

        triangle(x + cellSize, y + cellSize , x + cellSize , y ,x ,y + cellSize);

      } else if(noiseVal > 0.3) {     

        fill(37, 50, 102);

        triangle(x, y , x + cellSize + 1 , y ,x ,y + cellSize + 1);

        triangle(x + cellSize, y + cellSize , x + cellSize , y ,x ,y + cellSize);

      }else {       

        fill(34, 42, 74);

        triangle(x, y , x + cellSize + 1 , y ,x ,y + cellSize + 1);

        triangle(x + cellSize, y + cellSize , x + cellSize , y ,x ,y + cellSize);

      } 

    }

  } 

}

​

function getNoise(x, y) {

  let noiseValue = noise(x/80, y/80, seed);

  noiseValue = map(noiseValue, 0.3,0.7, 0,1);

  return noiseValue;  

}

​

​

​

​