Skip to content

Instantly share code, notes, and snippets.

@samingle samingle/sand.js
Created Jul 16, 2019

Embed
What would you like to do?
Sand Animation
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"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.