Changing the speed in a shader example

edited January 2017 in GLSL / Shaders

I have this shader code taken from The Book of Shaders.

I'm trying to figure out how to increase the velocity of these lines based on the mouse y position. However, when I do this, it seems to be making this strange "scrubbing" type of effect where as i move the mouse it speeds up (or slows down ). and then only does it set the velocity correctly. what i would prefer to have is each of these lines just moving at a speed that is proportional to the y position of the mouse. I've been trying to tweak things here and there, but can't seem to figure out how to make this happen. have been having simlar problems with other sketches. so i'm wondering what it is i'm not understanding.

// Author @patriciogv - 2015
// Title: Ikeda Data Stream

#ifdef GL_ES
precision mediump float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_spd;

float random (in float x) {
    return fract(sin(x)*1e4);

float random (in vec2 st) { 
    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);

float pattern(vec2 st, vec2 v, float t) {
    vec2 p = floor(st+v);
    return step(t, random(100.+p*.000001)+random(p.x)*0.5 );

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;

    vec2 grid = vec2(100.0,50.);
    st *= grid;

    vec2 ipos = floor(st);  // integer
    vec2 fpos = fract(st);  // fraction

    //float spdfactor=u_mouse.y/u_resolution.y;
    float spdfactor=u_spd;// does the same thing.

    //vec2 vel = vec2(u_time*2.*max(grid.x,grid.y)); // time
    vec2 vel = vec2(u_time*spdfactor*2.*max(grid.x,grid.y)); // time
    //vec2 vel = vec2(2.*max(grid.x,grid.y));
    //vel *= vec2(-1.,0.0) * random(1.0+ipos.y); // direction // Assign a random value base on the integer coord
    //vel *= vec2(-1.,0.0) *random(1.0+ipos.y); // direction

    vel *= vec2(-1.,0.0) * (ipos.y+1)/100; // direction    // Assign a random value base on the integer coord

    //offset means shift the rgb  channels a bit.  
    vec2 offset = vec2(0.6,0.); 
    //vec2 offset = vec2(ipos.x,0.);//interesting effect but not what is wnated.

    vec3 color = vec3(0.);
    color.r = pattern(st+offset,vel,0.5+u_mouse.x/u_resolution.x);
    color.g = pattern(st,vel,0.5+u_mouse.x/u_resolution.x);
    color.b = pattern(st-offset,vel,0.5+u_mouse.x/u_resolution.x);

    //color.r = pattern(st+offset,vel,u_time+0.5+u_mouse.x/u_resolution.x);
    //color.g = pattern(st,vel,u_time+0.5+u_mouse.x/u_resolution.x);
    //color.b = pattern(st-offset,vel,u_time+0.5+u_mouse.x/u_resolution.x);

    // Margins
    color *= step(0.5,fpos.y);

    //gl_FragColor = vec4(1.0-color,1.0);
    gl_FragColor = vec4(color,1.0);

and here is the pde code PShader shader;

void setup() {
  size(640, 360, P2D);

  shader = loadShader("shader7.frag"); // one thru 13

float m;
void draw() {
  shader.set("u_resolution", float(width), float(height));
  shader.set("u_mouse", float(mouseX), float(mouseY));
  shader.set("u_time", millis() / 1000.0);
  shader.set("u_spd", m);
  rect(0, 0, width, height);

  m=map(mouseY, 0, height, 0, 1);


  • edited May 2017 Answer ✓

    from thebookofshaders

    uniform vec2 u_mouse; // mouse position in screen pixels

    you are mixing fragment coordinates and windows coords something like this would help: vec2 mouse= u_mouse/u_resolution.xy;


Sign In or Register to comment.