DOCTYPE html html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title xbdev net Fractal Noise title style canvas border 1px solid black style head body canvas id fractalCanvas width 400 height 400 canvas script const canvas document getElementById fractalCanvas const ctx canvas getContext 2d function generateNoise width height const noise for let y 0 y height y noise y for let x 0 x width x noise y x Math random return noise Function to interpolate noise values function interpolateNoise x y noise const intX Math floor x const intY Math floor y const fracX x intX const fracY y intY const v1 smoothNoise intX intY noise const v2 smoothNoise intX 1 intY noise const v3 smoothNoise intX intY 1 noise const v4 smoothNoise intX 1 intY 1 noise const i1 interpolate v1 v2 fracX const i2 interpolate v3 v4 fracX return interpolate i1 i2 fracY Function to smooth noise values function smoothNoise x y noise const width noise 0 length const height noise length const corners getNoise x 1 y 1 noise getNoise x 1 y 1 noise getNoise x 1 y 1 noise getNoise x 1 y 1 noise 16 const sides getNoise x 1 y noise getNoise x 1 y noise getNoise x y 1 noise getNoise x y 1 noise 8 const center getNoise x y noise 4 return corners sides center function getNoise x y noise const width noise 0 length const height noise length Wrap around edges const wrappedX x width width const wrappedY y height height return noise wrappedY wrappedX Function to interpolate between two values function interpolate a b x const ft x Math PI const f 1 Math cos ft 0 5 return a 1 f b f Function to generate fractal noise using fBm algorithm function generateFractalNoise width height octaves persistence const noise generateNoise width height const fractalNoise for let y 0 y height y fractalNoise y for let x 0 x width x fractalNoise y x 0 let frequency 1 let amplitude 1 for let i 0 i octaves i fractalNoise y x interpolateNoise x frequency y frequency noise amplitude frequency 2 amplitude persistence return fractalNoise function drawNoise ctx noise scale const width noise 0 length const height noise length ctx fillStyle black ctx fillRect 0 0 width scale height scale for let y 0 y height y for let x 0 x width x const value noise y x 255 ctx fillStyle rgb value value value ctx fillRect x scale y scale scale scale Generate and draw fractal noise const octaves 8 Number of layers const persistence 0 5 Persistence controls how quickly the amplitudes diminish for each octave const fractalNoise generateFractalNoise canvas width canvas height octaves persistence drawNoise ctx fractalNoise 4 script body html
nst height noise length Wrap around edges const wrappedX x width width const wrappedY y height height return noise wrappedY wrappedX Function to interpolate between two values function interpolate a b x const ft x Math PI const f 1 Math cos ft 0 5 return a 1 f b f Function to generate fractal noise using fBm algorithm function generateFractalNoise width height octaves persistence const noise generateNoise width height const fractalNoise for let y 0 y height y fractalNoise y for let x 0 x width x fractalNoise y x 0 let frequency 1 let amplitude 1 for let i 0 i octaves i fractalNoise y x interpolateNoise x frequency y frequency noise amplitude frequency 2 amplitude persistence return fractalNoise function drawNoise ctx noise scale const width noise 0 length const height noise length ctx fillStyle black ctx fillRect 0 0 width scale height scale for let y 0 y height y for let x 0 x width x const value noise y x 255 ctx fillStyle rgb value value value ctx fillRect x scale y scale scale scale Generate and draw fractal noise const octaves 8 Number of layers const persistence 0 5 Persistence controls how quickly the amplitudes diminish for each octave const fractalNoise generateFractalNoise canvas width canvas height octaves persistence drawNoise ctx fractalNoise 4 script body html