forked from lo-th/olympe
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test_noise.html
84 lines (77 loc) · 2.32 KB
/
test_noise.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Perlin Noise</title>
<style type="text/css">canvas{border:5px solid #ccc;}</style>
<script src="js/perlin-noise-classical.js"></script>
<script>
window.addEventListener('load', init, false);
function init(){
var canvas = document.getElementById("canvas");
if (canvas.getContext('2d')){
main(canvas);
} else {
console.log("Canvas tag is not supported");
}
}
/**
* Main function.
*/
function main(canvas){
var canvas = canvas;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255,255,255,1.0)";
var perlin = new ClassicalNoise(); // Perlin Noise instance
var waves = 4; // scale/multiplier
var zOff = 0; // z-offset.
const CANVAS_WIDTH = canvas.width; // canvas width
const CANVAS_HEIGHT = canvas.height; // canvas height
setInterval(draw, 30);
/**
* Draws animation.
*/
function draw() {
var imageData = ctx.createImageData(CANVAS_WIDTH, CANVAS_HEIGHT);
for (var x = 0; x < CANVAS_WIDTH; x++){
var xVal = (x/CANVAS_WIDTH)*waves;
for (var y = 0; y < CANVAS_HEIGHT; y++){
var yVal = (y/CANVAS_HEIGHT)*waves;
// create noise
var result = perlin.noise(xVal, yVal, zOff);
// translate to RGB range of 0-255
result = translateRange(-1, 1, 0, 255, result);
var index = (x + y * CANVAS_WIDTH) * 4;
imageData.data[index ] = 0; // Red
imageData.data[index + 1] = result; // Green
imageData.data[index + 2] = 255; // Blue
imageData.data[index + 3] = 255; // Alpha
}
}
// write image data
ctx.putImageData(imageData, 0, 0);
zOff += .02;
}
/**
* Translates a value between two numeric ranges.
* Usage example: trace(translateRange(0, 10, 0, 100, 5)); // returns 50
* @param a1 (Number) minimum value of original range
* @param a2 (Number) maximum value of original range
* @param b1 (Number) minimum value of new range
* @param b2 (Number) maximum value of new range
* @param num (Number) number from original range to translate
* @return Number Value of num in new range
*/
function translateRange(a1, a2, b1, b2, num) {
var c = ((num - a1) * (b2 -b1)/(a2 - a1)) + b1;
return c;
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</body>
</html>