# Help with shaders

**URL:** https://discourse.processing.org/t/help-with-shaders/24070
**Category:** Coding Questions
**Created:** [September 23, 2020, 3:33am UTC](https://discourse.processing.org/t/help-with-shaders/24070 "2020-09-23T03:33:16Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)
#### Post date: [September 23, 2020, 3:33am UTC](https://discourse.processing.org/t/help-with-shaders/24070/1 "2020-09-23T03:33:16Z")

</div>

I’m trying to code a simple shader which will take the mouse position to assign the color of the shader.

```auto
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main() {
//vec2 st = gl_FragCoord.xy/u_mouse;
gl_FragColor = vec4(u_mouse.x,u_mouse.y,0.0,1.0);
}

```

```auto

PShader s;
PImage img ;
void setup() {
  size(640, 360, P2D);
  noStroke();
 
  s = loadShader("blur.glsl");
  //monjori.set("resolution", float(width), float(height));   
  img = loadImage("frog.jpg");
}

void draw() {
  //s.set("u_time", millis() / 1000.0);
  //if(mouseY>0)
  s.set("u_mouse",new PVector(mouseX,mouseY));
  
  shader(s);
  rect(0, 0, width, height);  
}

```

This is my first time coding a shader so I dont know all the basics yet.

code from the book of shaders.

---

<div class="post-metadata">

### Author: ![raron](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/raron/32/13651_2.png) [@raron](https://discourse.processing.org/u/raron)
#### Post date: [September 24, 2020, 1:24am UTC](https://discourse.processing.org/t/help-with-shaders/24070/2 "2020-09-24T01:24:45Z")

</div>

Thanks for the tip, seems like a nice place to start looking into the magic of shaders!  
(links are always nice though - [The Book of Shaders](https://thebookofshaders.com/))

As for your question, you forgot to normalize the mouse coordinates (between 0.0 and 1.0).

```auto
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main() {
  vec2 mo = u_mouse/u_resolution; // Normalize mouse coordinates
  gl_FragColor = vec4(mo.x, mo.y, 0.0, 1.0);
}

```

As for showing an image with the shader I have no idea atm (I’m new to shaders as well - just did the odd test here and there made by others).

You need to add in the “u\_resolution” variable to get the shader to work:  
`s.set("u_resolution", float(width), float(height));`

(The picture thing doesn’t work with the shader here. That’s probably a bit further in the book)

```auto
PShader s;
PImage img ;

void setup() {
  size(640, 360, P2D);
  noStroke();
 
  s = loadShader("blur.glsl");
  //monjori.set("resolution", float(width), float(height));   
  img = loadImage("tokyo.jpg");
}

void draw() {
  s.set("u_resolution", float(width), float(height));
  s.set("u_mouse", float(mouseX), float(mouseY));
  //s.set("u_time", millis() / 1000.0);

  shader(s);
  //rect(0, 0, width, height);
  image(img, 0, 0, width, height);
}

```

---

<div class="post-metadata">

### Author: ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)
#### Post date: [September 24, 2020, 1:34am UTC](https://discourse.processing.org/t/help-with-shaders/24070/3 "2020-09-24T01:34:27Z")

</div>

Its a really good book which really takes you from the basics. The processing reference is also good too though and will be able to show you how to link the shaders to the sketch, which I didnt notice in the book of shaders (likely an oversight on my part). In any case I’m glad I took the plunge because shaders tremendously increase the speed, and dispite what I’d feared for ages the code is very approachable.

I noticed the normalization issue, a little while later, but wasnt online so I couldnt update the post.

also for those who want the pdf version of the book.

> **[r/programming - The Book of Shaders](https://www.reddit.com/r/programming/comments/2zb3z0/the_book_of_shaders/)**
>
> 148 votes and 56 comments so far on Reddit