-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
117 lines (101 loc) · 3.93 KB
/
test.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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<title>Particles</title>
<link rel='stylesheet' type='text/css' href='styles.css' />
</head>
<body>
<canvas id="canvas" width=480 height=480 style='position:absolute; left:0px; top:0px;'>
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</body>
<script>
function generatePerlinNoise(width, height, options) {
options = options || {};
var octaveCount = options.octaveCount || 4;
var amplitude = options.amplitude || 0.1;
var persistence = options.persistence || 0.2;
var whiteNoise = generateWhiteNoise(width, height);
var smoothNoiseList = new Array(octaveCount);
var i;
for (i = 0; i < octaveCount; ++i) {
smoothNoiseList[i] = generateSmoothNoise(i);
}
var perlinNoise = new Array(width * height);
var totalAmplitude = 0;
// blend noise together
for (i = octaveCount - 1; i >= 0; --i) {
amplitude *= persistence;
totalAmplitude += amplitude;
for (var j = 0; j < perlinNoise.length; ++j) {
perlinNoise[j] = perlinNoise[j] || 0;
perlinNoise[j] += smoothNoiseList[i][j] * amplitude;
}
}
// normalization
for (i = 0; i < perlinNoise.length; ++i) {
perlinNoise[i] /= totalAmplitude;
}
return perlinNoise;
function generateSmoothNoise(octave) {
var noise = new Array(width * height);
var samplePeriod = Math.pow(2, octave);
var sampleFrequency = 1 / samplePeriod;
var noiseIndex = 0;
for (var y = 0; y < height; ++y) {
var sampleY0 = Math.floor(y / samplePeriod) * samplePeriod;
var sampleY1 = (sampleY0 + samplePeriod) % height;
var vertBlend = (y - sampleY0) * sampleFrequency;
for (var x = 0; x < width; ++x) {
var sampleX0 = Math.floor(x / samplePeriod) * samplePeriod;
var sampleX1 = (sampleX0 + samplePeriod) % width;
var horizBlend = (x - sampleX0) * sampleFrequency;
// blend top two corners
var top = interpolate(whiteNoise[sampleY0 * width + sampleX0], whiteNoise[sampleY1 * width +
sampleX0], vertBlend);
// blend bottom two corners
var bottom = interpolate(whiteNoise[sampleY0 * width + sampleX1], whiteNoise[sampleY1 * width +
sampleX1], vertBlend);
// final blend
noise[noiseIndex] = interpolate(top, bottom, horizBlend);
noiseIndex += 1;
}
}
return noise;
}
}
function generateWhiteNoise(width, height) {
var noise = new Array(width * height);
for (var i = 0; i < noise.length; ++i) {
noise[i] = Math.random();
}
return noise;
}
function interpolate(x0, x1, alpha) {
return x0 * (1 - alpha) + alpha * x1;
}
const arr = []
const options = {
octaveCount: 0,
amplitude: 10,
persistence: 0.1,
}
const resolutionX = 200
const resolutionY = 200
const sizeX = 480
const sizeY = 480
const noise = generatePerlinNoise(resolutionX, resolutionY, options)
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
for (let x = 0; x < resolutionX; x++) {
for (let y = 0; y < resolutionY; y++) {
const height = noise[x + y * resolutionX]
const xCoordinate = (x / resolutionX) * sizeX
const yCoordinate = (y / resolutionY) * sizeY
ctx.fillStyle = "rgba(0, 0, 0, " + height + ")"
ctx.strokeStyle = "rgba(0, 0, 0, " + height + ")"
ctx.fillRect(xCoordinate, yCoordinate, 2 ,2 );
}
}
</script>
</html>