Skip to content

Instantly share code, notes, and snippets.

@bellbind

bellbind/animation.html

Created July 27, 2012 08:58
Show Gist options
  • Save bellbind/3186926 to your computer and use it in GitHub Desktop.
Save bellbind/3186926 to your computer and use it in GitHub Desktop.
Download ZIP
[javascript]perlin noise
Raw
animation.html
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<meta charset="utf-8" />
<script src="perlin.js"></script>
<script>//<!--
window.addEventListener("load", function (ev) {
var canvas = document.getElementById("canvas");
var c2d = canvas.getContext("2d");
var imageData = c2d.createImageData(canvas.width, canvas.height);
var data = imageData.data;
var perlin = Perlin();
var z = 0;
setInterval(function () {
z += 0.1;
for (var x = 0; x < canvas.width; x++) {
for (var y = 0; y < canvas.height; y++) {
var v = perlin.get3d(11 * x / canvas.width, 29 * y / canvas.height, z);
var i = (y * canvas.width + x) * 4;
data[i + 0] = 0x0f;
data[i + 1] = 0x70;
data[i + 2] = 0x07;
data[i + 3] = 0|((1 + v) / 2 * 255);
}
}
c2d.putImageData(imageData, 0, 0);
}, 100);
}, false);
//--></script>
</head>
<body>
<p>Using Perlin Noise 3D for animated 2D</p>
<canvas id="canvas" width="256" height="256"></canvas>
</body>
</html>
Raw
curve.html
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<meta charset="utf-8" />
<script src="perlin.js"></script>
<script>//<!--
window.addEventListener("load", function (ev) {
var canvas = document.getElementById("canvas");
canvas.style.backgroundColor = "black";
var c2d = canvas.getContext("2d");
var perlin = Perlin();
var points = new Float32Array(canvas.width);
var index = 0;
points[index] = perlin.get1d(7 * index / canvas.width);
var y = function (x) {
return (1 - points[x % points.length]) * canvas.height / 2;
};
c2d.strokeStyle = "green";
c2d.lineJoin = "round";
var draw = function () {
index = index + 1;
points[index % points.length] = perlin.get1d(7 * index / canvas.width);
var zero = index + 1;
c2d.clearRect(0, 0, canvas.width, canvas.height);
c2d.beginPath();
c2d.moveTo(0, y(zero));
for (var i = 1; i < canvas.width; i++) {
c2d.lineTo(i, y(zero + i));
}
c2d.stroke();
setTimeout(draw, 100);
};
draw();
}, false);
//--></script>
</head>
<body>
<p>Using Perlin Noise 1D for Waving</p>
<canvas id="canvas" width="256" height="128"></canvas>
</body>
</html>
Raw
curve2.html
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<meta charset="utf-8" />
<script src="perlin.js"></script>
<script>//<!--
window.addEventListener("load", function (ev) {
var canvas = document.getElementById("canvas");
canvas.style.backgroundColor = "black";
var c2d = canvas.getContext("2d");
var perlin = Perlin();
var index = 0;
c2d.strokeStyle = "green";
c2d.lineJoin = "round";
var y = function (v) {
return (1 - v) * canvas.height / 2;
};
var draw = function (t) {
c2d.clearRect(0, 0, canvas.width, canvas.height);
c2d.beginPath();
c2d.moveTo(0, y(perlin.get2d(0, t)));
for (var i = 1; i < canvas.width; i++) {
c2d.lineTo(i, y(perlin.get2d(11 * i / canvas.width, t)));
}
c2d.stroke();
setTimeout(draw.bind(null, t + 0.1), 100);
};
draw(0);
}, false);
//--></script>
</head>
<body>
<p>Using Perlin Noise 2D for bounced wave</p>
<canvas id="canvas" width="256" height="128"></canvas>
</body>
</html>
Raw
perlin.js
// Perlin Noise
// from: http://www.xna-connection.com/post/Algorithme-de-Perlin-Noise-en-C
var Perlin = function () {
var mask = 0xff;
var size = mask + 1;
var values = new Uint8Array(size * 2);
for (var i = 0; i < size; i++) {
values[i] = values[size + i] = 0|(Math.random() * 0xff);
}
var lerp = function (t, a, b) {
return a + t * (b - a);
};
var fade = function (t) {
return t * t * t * (t * (t * 6 - 15) + 10);
};
var grad1d = function (hash, x) {
return (hash & 1) === 0 ? x : -x;
};
var grad2d = function (hash, x, y) {
var u = (hash & 2) === 0 ? x : -x;
var v = (hash & 1) === 0 ? y : -y;
return u + v;
};
var grad3d = function (hash, x, y, z) {
var h = hash & 15;
var u = h < 8 ? x : y;
var v = h < 4 ? y : (h === 12 || h === 14 ? x : z);
return ((h & 1) === 0 ? u : -u) + ((h & 1 === 0) ? v : -v);
};
var noise1d = function (x) {
var intX = (0|x) & mask;
var fracX = x - (0|x);
var t = fade(fracX);
var a = grad1d(values[intX], fracX);
var b = grad1d(values[intX + 1], fracX - 1);
return lerp(t, a, b);
};
var noise2d = function (x, y) {
var intX = (0|x) & mask;
var intY = (0|y) & mask;
var fracX = x - (0|x);
var fracY = y - (0|y);
var r1 = values[intX] + intY;
var r2 = values[intX + 1] + intY;
var t1 = fade(fracX);
var t2 = fade(fracY);
var a1 = grad2d(values[r1], fracX, fracY);
var b1 = grad2d(values[r2], fracX - 1, fracY);
var a2 = grad2d(values[r1 + 1], fracX, fracY - 1);
var b2 = grad2d(values[r2 + 1], fracX - 1, fracY - 1);
return lerp(t2, lerp(t1, a1, b1), lerp(t1, a2, b2));
};
var noise3d = function (x, y, z) {
var intX = (0|x) & mask;
var intY = (0|y) & mask;
var intZ = (0|z) & mask;
var fracX = x - (0|x);
var fracY = y - (0|y);
var fracZ = z - (0|z);
var r1 = values[intX] + intY;
var r11 = values[r1] + intZ;
var r12 = values[r1 + 1] + intZ;
var r2 = values[intX + 1] + intY;
var r21 = values[r2] + intZ;
var r22 = values[r2 + 1] + intZ;
var t1 = fade(fracX);
var t2 = fade(fracY);
var t3 = fade(fracZ);
var a11 = grad3d(values[r11], fracX, fracY, fracZ);
var b11 = grad3d(values[r21], fracX - 1, fracY, fracZ);
var a12 = grad3d(values[r12], fracX, fracY - 1, fracZ);
var b12 = grad3d(values[r22], fracX - 1, fracY - 1, fracZ);
var a21 = grad3d(values[r11 + 1], fracX, fracY, fracZ - 1);
var b21 = grad3d(values[r21 + 1], fracX - 1, fracY, fracZ - 1);
var a22 = grad3d(values[r12 + 1], fracX, fracY - 1, fracZ - 1);
var b22 = grad3d(values[r22 + 1], fracX - 1, fracY - 1, fracZ - 1);
return lerp(t3,
lerp(t2, lerp(t1, a11, b11), lerp(t1, a12, b12)),
lerp(t2, lerp(t1, a21, b21), lerp(t1, a22, b22)));
};
return {
get1d: noise1d,
get2d: noise2d,
get3d: noise3d,
}
};
Raw
view.html
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<meta charset="utf-8" />
<script src="perlin.js"></script>
<script>//<!--
window.addEventListener("load", function (ev) {
var canvas = document.getElementById("canvas");
var c2d = canvas.getContext("2d");
var imageData = c2d.createImageData(canvas.width, canvas.height);
var data = imageData.data;
var perlin = Perlin();
for (var x = 0; x < canvas.width; x++) {
for (var y = 0; y < canvas.height; y++) {
var v = perlin.get2d(11 * x / canvas.width, 29 * y / canvas.height);
var i = (y * canvas.width + x) * 4;
data[i + 0] = 0x0f;
data[i + 1] = 0x70;
data[i + 2] = 0x07;
data[i + 3] = 0|((1 + v) / 2 * 255);
}
}
c2d.putImageData(imageData, 0, 0);
}, false);
//--></script>
</head>
<body>
<p>Using Perlin Noise 2D for dappled texture</p>
<canvas id="canvas" width="512" height="512"></canvas>
</body>
</html>
@haylinmoore
Copy link

Is there a way to feed this a seed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment