Abstract Noise

The above gradient picker edits the colors in the noise generation, to the right is the peak of the color value and the left is the trough. You can change the color of each stop by clicking the color picker below the gradient bar. Double clicking adds a new stop. Dragging the stop towards or away from other stops defines how steep is the gradient change.

How Does it work?

So originally i wanted to make a perlin noise implimentation, which is basically the same thing made by the same guy but it users triangular grids rather than cubic grid.

This makes the computation way faster the Big O goes from O(2n) to 0(n), which basically means that a 2D grid calculation takes no more than 2 times the calculation of 1D grid. For contrast a 2D perline noise would take 4 times the calculations as compaired to 1D perline noise.

The render that you are seeing is a 3D calculation on a canvas of 400/400 pixels. Before switching to simplex i gave perline a try, the animation was very studdery "can't be low fps right" then i noticed my laptop was actually getting hot rendering this. Turns out my intel UHD620 was too slow for it.

This is when i came across other noise function(Yes there are many) Simplex was one of the and it was made by the same guy. I saw curl noise which is just most amazing looking noise render but too difficult for me so simplex it is.

Someone actually made the simplex algo in vanilla javascript and there you go a 3D simplex noise render in vanilla javascript.


Things i have in mind

So noise rendering is cool and all but it is not special everyone has made a noise render but i want this to be a little more special so i want to impliment the followling in the future


Want to see this through?

This is a passion project for me and it is almost impossible for me to juggle my job, my studies and my projects at once, if you fell like this is actually something worth your time please consider supporting me.... Thank You