Sand Animation

sand.js

var xOffset = 0.0;
var time = 0.0;
var dark, light;
var waves;
var maxWave;
var parent; 
var widthGuide;
var parentWidth;
var parentBufferedWidth;
var interval;
let bufferedInterval;
var noiseOverlays;

function setup() {
  widthGuide = document.getElementById("sand-container-guide");
  parent = document.getElementById("sand-container");
  let width = window.innerWidth < 992 ? window.innerWidth : widthGuide.offsetWidth + widthGuide.offsetLeft;
  var canvas = createCanvas(width, parent.offsetHeight, WEBGL);
  let waveInterval = width / 2.4;
  waves = [];
  var index = 0;
  maxWave = waveInterval * 5;
  for (i = 5; i > -1; i--) {
    waves.push({
      x: i * waveInterval,
      index: index
    });
    index++;
  }
  canvas.parent(parent);
  if (parent.className.includes("sand-black")) {
    dark = color(0, 0, 0);
    light = color(51, 51, 51);
  } else if (parent.className.includes("sand-purple")) {
    dark = color(127, 79, 165);
    light = color(174, 103, 183);
  } else {
    dark = color(235, 83, 103);
    light = color(255, 135, 192);
  }
  noStroke();
  parentWidth = parent.offsetWidth;
  parentBufferedWidth = parent.offsetWidth * 1.4;
  interval = parentWidth / 2.4;
  bufferedInterval = interval * 1.8;
  generateNoise();
}

function windowResized() {
  let widthToResizeTo = window.innerWidth < 992 ? window.innerWidth : widthGuide.offsetWidth + widthGuide.offsetLeft;
  resizeCanvas(widthToResizeTo, parent.offsetHeight);
  parentWidth = parent.offsetWidth;
  parentBufferedWidth = parent.offsetWidth * 1.4;
  interval = parentWidth / 2.4;
  bufferedInterval = interval * 1.8;
  waves = [];
  var index = 0;
  maxWave = interval * 5;
  for (i = 5; i > -1; i--) {
    waves.push({
      x: i * interval,
      index: index
    });
    index++;
  }
}

function generateNoise() {
  noiseOverlays = []
  for (i = 0; i < 2; i++) {
    noiseOverlays[i] = createImage(width, height);
    noiseOverlays[i].loadPixels();
    for (x = 0; x < width; x ++) {
      for (y = 0; y < height; y++) {
        noiseOverlays[i].set(x, y, color(random(255), random(255), random(255) , 30));
      }
    }
    noiseOverlays[i].updatePixels();
  }
}

function draw() {
  background(dark);
  translate(-width/2, -height/2);
  noStroke();
  for (var i = 0; i < waves.length; i++) {
    wave = waves[i];
    var yOffset = 0;
     beginShape(TRIANGLE_STRIP);
    for (var y = -20; y <= height + 20; y += 10) {
      if (-wave.x + parentBufferedWidth - time < -bufferedInterval) {
        wave.x = wave.x - waves.length  * interval;
      }
      var x = sin(y/30 * noise(yOffset) * noise(wave.index)  + xOffset) * 100 * noise(yOffset) -  wave.x + parentBufferedWidth - time;
      var rightX = x + parentWidth;

      if (y % 2 == 0) {
        fill(dark);
        vertex(x, y); 
        fill(light);
        vertex(rightX, y);
      } else {
        fill(light);
        vertex(rightX, y);
        fill(dark);
        vertex(x, y); 
      }
      yOffset += 0.03;
    }
    endShape();
  }
  waves = waves.sort(function(w1, w2) {
    return w2.x - w1.x
  });

  let multiplier = Math.floor(time / width);
  image(noiseOverlays[0], (width * multiplier) - time, 0, width, height);
  image(noiseOverlays[1], (width * (multiplier + 1)) - time, 0, width, height);
  xOffset += 1/128.0;  
  time += 1/2;
  canvas.id = "primary-branding-element"
}