Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

day 003

move mouse horizontally to play with it
project link

three.js | shader


Luxuriant peach tree, flourish blossom, firm and squishy peaches, many many leaves.

learned today

Random section from the book of shaders.

Random function is an adding up result of sin

y = fract( sin( x ) * b );

By increasing b (a float number) dramatically, it will squeeze each sin wave to extremely small and thus create pseudo-random value in 1D.

To achieve random value in 2D, we use dot( ) to transform a two dimensional vector into a one dimensional floating point value.

 float random (vec2 st) {
    return fract(sin(dot(st.xy,

Using floor( ) to manipulate coordinate system, we can achieve grid/pixel like image.

    //st is the coordinate of the current pixel, it is a vec2
    st  * =  10.0; // Scale the coordinate system by 10
    vec2 ipos = floor(st);  // get the integer coords
    // Assign a random value based on the integer coord
    //or thinking about combining with camera feed, so we can achieve pixelized video
    vec3 color = vec3(random( ipos ));
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.