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 009

No interactions for this one
[project link](

three.js | shader


Plum gradually sparse, ice has been dissolved in warm. East wind blowing, quietly came the spring. Flowing with drifting water, homing to the end of the world.

learned today

Feb 1st 2017

Image Processing Section in the book of shaders

sampler2D( ) and texture2D( )

"Once the texture is loaded and linked to a valid uniform sampler2D you can ask for specific color value at specific coordinates (formated on a vec2 variable) usin the texture2D() function which will return a color formated on a vec4 variable."

vec4 texture2D(sampler2D texture, vec2 coordinates)  

A way to distort coordinate system( st )

float scale = 2.0;
float offset = 0.5;

float angle = noise( st + u_time * 0.1 ) * PI; float radius = offset;

st * = scale; //way to rotate a cordinate st += radius * vec2(cos(angle),sin(angle));

Moving images (iterate through rows and col )

To create a moving image effect

 vec2 nRes = vec2(col,row);
    // Scale the coordenates to a single frame
    st = st/nRes;
    // Calculate the offset in cols and rows
    float timeX = u_time*15.;
    float timeY = floor(timeX/float(col));
    //S = V * T
    //S: offset; V: 1/nRes.x; T: timeX;
    vec2 offset = vec2( floor(timeX)/nRes.x,
                        1.-(floor(timeY)/nRes.y) );
    st = fract(st+offset);

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.