1+ let stage = new createjs . Stage ( "c1" ) ;
2+
3+ stage . update ( ) ;
4+
5+ let noiseMachine = new PerlinNoiseMachine ( ) ;
6+
7+ // performance testing
8+ /*let total = 0;
9+ let count = 50;
10+
11+ for(let i = 0; i < count; i++){
12+ let start = performance.now();
13+
14+ for(let j = 0; j < 1000000; j++){
15+ noiseMachine.noise(j, j*2.2, j*3.589);
16+ }
17+
18+ let end = performance.now();
19+
20+ console.log(`Run ${i}: ${end-start}`);
21+ total += end-start;
22+ }
23+
24+ console.log(`Average: ${total/count}`);*/
25+
26+
27+ let graph = new createjs . Shape ( ) ;
28+ let g = graph . graphics ;
29+ g . beginStroke ( "#000" )
30+ . moveTo ( 0 , stage . canvas . height / 2 ) ;
31+ for ( let i = 0 ; i < 960 ; i ++ ) {
32+ let y = noiseMachine . noise ( i / 10000 , i / 100 , 0.0024 * i ) * stage . canvas . height ;
33+ g . lineTo ( i , y ) ;
34+ }
35+ g . endStroke ( ) ;
36+
37+ stage . addChild ( graph ) ;
38+ stage . update ( ) ;
39+
40+ // 2D greyscale
41+
42+ let c2 = document . getElementById ( "c2" ) ;
43+ let ctx = c2 . getContext ( "2d" ) ;
44+ let imgData = ctx . getImageData ( 0 , 0 , c2 . width , c2 . height ) ;
45+
46+ for ( let i = 0 ; i < c2 . width * c2 . height ; i ++ ) {
47+ let x = i % c2 . width ;
48+ let y = ( i - x ) / c2 . width ;
49+ let val = noiseMachine . noise ( x / 70 , y / 70 , 0.012523 ) ;
50+ imgData . data [ 4 * i ] = val * 255 | 0 ; //r
51+ imgData . data [ 4 * i + 1 ] = val * 255 | 0 ; //g
52+ imgData . data [ 4 * i + 2 ] = val * 255 | 0 ; //b
53+ imgData . data [ 4 * i + 3 ] = 255 ; //a
54+ }
55+
56+
57+ ctx . putImageData ( imgData , 0 , 0 ) ;
58+
59+ // 2D Color
60+
61+ let c3 = document . getElementById ( "c3" ) ;
62+ ctx = c3 . getContext ( "2d" ) ;
63+ imgData = ctx . getImageData ( 0 , 0 , c3 . width , c3 . height ) ;
64+
65+ for ( let i = 0 ; i < c3 . width * c3 . height ; i ++ ) {
66+ let x = i % c3 . width ;
67+ let y = ( i - x ) / c3 . width ;
68+ let scale = 413 ;
69+ let offsetRed = 240 ;
70+ let offsetGreen = 17 ;
71+ let offsetBlue = 0.0027472 ;
72+ let r = noiseMachine . noise ( x / scale , y / scale , offsetRed ) ;
73+ let g = noiseMachine . noise ( x / scale , y / scale , offsetGreen ) ;
74+ let b = noiseMachine . noise ( x / scale , y / scale , offsetBlue ) ;
75+ imgData . data [ 4 * i ] = r * 255 | 0 ; //r
76+ imgData . data [ 4 * i + 1 ] = g * 255 | 0 ; //g
77+ imgData . data [ 4 * i + 2 ] = b * 255 | 0 ; //b
78+ imgData . data [ 4 * i + 3 ] = 255 ; //a
79+ }
80+
81+ ctx . putImageData ( imgData , 0 , 0 ) ;
82+
83+ // RGB
84+
85+ /*let c4 = document.getElementById("c4");
86+ ctx = c4.getContext("2d");
87+ imgData = ctx.getImageData(0,0,c4.width, c4.height);
88+
89+ for(let i = 0; i < c4.width*c4.height; i++){
90+ let x = i % c4.width;
91+ let y = (i-x)/c4.width;
92+ let scale = 413;
93+ let offsetRed = 17;
94+ let offsetGreen = 240;
95+ let offsetBlue = 0.0027472;
96+ let r = noiseMachine.noise(x/scale, y/scale, offsetRed);
97+ let g = noiseMachine.noise(x/scale, y/scale, offsetGreen);
98+ let b = noiseMachine.noise(x/scale, y/scale, offsetBlue);
99+ imgData.data[4*i ] = r*255 | 0; //r
100+ imgData.data[4*i +1] = g*255 | 0; //g
101+ imgData.data[4*i +2] = b*255 | 0; //b
102+ imgData.data[4*i +3] = 255; //a
103+ }
104+
105+ ctx.putImageData(imgData, 0, 0);
106+ let dataurl = c4.toDataURL();
107+ document.getElementById("canvasOutput").src = dataurl;*/
108+
109+ // HSL
110+
111+ let c4 = document . getElementById ( "c4" ) ;
112+ ctx = c4 . getContext ( "2d" ) ;
113+ imgData = ctx . getImageData ( 0 , 0 , c4 . width , c4 . height ) ;
114+
115+ for ( let i = 0 ; i < c4 . width * c4 . height ; i ++ ) {
116+ let x = i % c4 . width ;
117+ let y = ( i - x ) / c4 . width ;
118+ let scale = 413 ;
119+ let offsetH = 200 ;
120+ let offsetS = 240 ;
121+ let offsetL = 160 ;
122+ let h = ( noiseMachine . noise ( x / ( scale / 2 ) , y / ( scale / 2 ) , offsetH ) * 3 / 2 ) % 360 ;
123+ let s = noiseMachine . noise ( x / ( scale / 2 ) , y / ( scale / 2 ) , offsetS ) / 2 + 0.5 ;
124+ let l = noiseMachine . noise ( x / ( scale ) , y / ( scale ) , offsetL ) * 2 / 3 + 0.1 ;
125+
126+ let rgb = hslToRgb ( h , s , l ) ;
127+
128+ imgData . data [ 4 * i ] = rgb [ 0 ] | 0 ; //r
129+ imgData . data [ 4 * i + 1 ] = rgb [ 1 ] | 0 ; //g
130+ imgData . data [ 4 * i + 2 ] = rgb [ 2 ] | 0 ; //b
131+ imgData . data [ 4 * i + 3 ] = 255 ; //a
132+ }
133+
134+ ctx . putImageData ( imgData , 0 , 0 ) ;
135+ /*let dataurl = c4.toDataURL();
136+ document.getElementById("canvasOutput").src = dataurl;*/
137+
138+ function hslToRgb ( h , s , l ) {
139+ let r , g , b ;
140+
141+ if ( s === 0 ) {
142+ r = g = b = l ; // achromatic
143+ } else {
144+ let hue2rgb = function hue2rgb ( p , q , t ) {
145+ if ( t < 0 ) t += 1 ;
146+ if ( t > 1 ) t -= 1 ;
147+ if ( t < 1 / 6 ) return p + ( q - p ) * 6 * t ;
148+ if ( t < 1 / 2 ) return q ;
149+ if ( t < 2 / 3 ) return p + ( q - p ) * ( 2 / 3 - t ) * 6 ;
150+ return p ;
151+ } ;
152+
153+ let q = l < 0.5 ? l * ( 1 + s ) : l + s - l * s ;
154+ let p = 2 * l - q ;
155+ r = hue2rgb ( p , q , h + 1 / 3 ) ;
156+ g = hue2rgb ( p , q , h ) ;
157+ b = hue2rgb ( p , q , h - 1 / 3 ) ;
158+ }
159+
160+ return [ Math . round ( r * 255 ) , Math . round ( g * 255 ) , Math . round ( b * 255 ) ] ;
161+ }
0 commit comments