Perlin Noise Example random number generators try out different random number genreators with the perlin noise algorithm concept very simple random number generator function random1 seed let x Math sin seed 10000 let r x Math floor x return r 255 var ca 4373 var cb 7879 var cc 10000 function chaos seed seed 100 let cx ca seed cb cc let r Math abs cx cc 0 to 1 return r 255 0 255 function random2 seed seed 1000 let m 2 35 31 let a 185852 let s seed m let r s a m m return r 255 let Perlin new function private helper functions function fade t return t t t t t 6 15 10 function lerp t a b return a t b a function grad hash x y z let h hash 15 CONVERT LO 4 BITS OF HASH CODE let u h 8 x y INTO 12 GRADIENT DIRECTIONS v h 4 y h 12 h 14 x z return h 1 0 u u h 2 0 v v function scale n return 1 n 2 perlin noise member function this noise function x y z try out differnet random number generators p chaos p random1 p random2 var X Math floor x 255 FIND UNIT CUBE THAT Y Math floor y 255 CONTAINS POINT Z Math floor z 255 x Math floor x FIND RELATIVE X Y Z y Math floor y OF POINT IN CUBE z Math floor z let u fade x COMPUTE FADE CURVES v fade y FOR EACH OF X Y Z w fade z let A p X Y AA p A Z AB p A 1 Z HASH COORDINATES OF let B p X 1 Y BA p B Z BB p B 1 Z THE 8 CUBE CORNERS return scale lerp w lerp v lerp u grad p AA x y z AND ADD grad p BA x 1 y z BLENDED lerp u grad p AB x y 1 z RESULTS grad p BB x 1 y 1 z FROM 8 lerp v lerp u grad p AA 1 x y z 1 CORNERS grad p BA 1 x 1 y z 1 OF CUBE lerp u grad p AB 1 x y 1 z 1 grad p BB 1 x 1 y 1 z 1 function clamp x lo hi return Math min Math max x lo hi let canvas document createElement canvas canvas width 256 canvas height 256 document body appendChild canvas let context canvas getContext 2d var canvasData context getImageData 0 0 canvas width canvas height dt 0 0 setInterval function dt 2 0 for var x 0 x canvas width x for var y 0 y canvas height y var idx x y canvas width 4 var c Perlin noise x dt canvas width 3 0 y canvas height 3 0 0 c clamp Math pow c 4 0 0 0 25 4 0 if c 0 5 c 0 6 c 1 0 else c 0 0 canvasData data idx 0 c 255 canvasData data idx 1 c 255 canvasData data idx 2 c 255 canvasData data idx 3 255 alpha context putImageData canvasData 0 0 10 console log ready
COMPUTE FADE CURVES v fade y FOR EACH OF X Y Z w fade z let A p X Y AA p A Z AB p A 1 Z HASH COORDINATES OF let B p X 1 Y BA p B Z BB p B 1 Z THE 8 CUBE CORNERS return scale lerp w lerp v lerp u grad p AA x y z AND ADD grad p BA x 1 y z BLENDED lerp u grad p AB x y 1 z RESULTS grad p BB x 1 y 1 z FROM 8 lerp v lerp u grad p AA 1 x y z 1 CORNERS grad p BA 1 x 1 y z 1 OF CUBE lerp u grad p AB 1 x y 1 z 1 grad p BB 1 x 1 y 1 z 1 function clamp x lo hi return Math min Math max x lo hi let canvas document createElement canvas canvas width 256 canvas height 256 document body appendChild canvas let context canvas getContext 2d var canvasData context getImageData 0 0 canvas width canvas height dt 0 0 setInterval function dt 2 0 for var x 0 x canvas width x for var y 0 y canvas height y var idx x y canvas width 4 var c Perlin noise x dt canvas width 3 0 y canvas height 3 0 0 c clamp Math pow c 4 0 0 0 25 4 0 if c 0 5 c 0 6 c 1 0 else c 0 0 canvasData data idx 0 c 255 canvasData data idx 1 c 255 canvasData data idx 2 c 255 canvasData data idx 3 255 alpha context putImageData canvasData 0 0 10 console log ready