# Getting started with Shaders
**URL:** https://discourse.processing.org/t/getting-started-with-shaders/296
**Category:** Coding Questions
**Created:** [May 23, 2018, 3:49pm UTC](https://discourse.processing.org/t/getting-started-with-shaders/296 "2018-05-23T15:49:57Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@justin\_lincoln](https://discourse.processing.org/u/justin_lincoln)
#### Post date: [May 23, 2018, 3:49pm UTC](https://discourse.processing.org/t/getting-started-with-shaders/296/1 "2018-05-23T15:49:57Z")
Hi folks. I’ve enjoyed and recommend [https://thebookofshaders.com/](https://thebookofshaders.com/). I find the subject fascinating and have successfully run a few other people’s shaders. However I have an embarrassingly basic question. When I try to run their (Book of Shaders) example code below I get the following error "Cannot compile fragment shader:ERROR:0:9’\<'syntax error " I’ve noticed that all of the shader examples included with Processing use a file form marked .glsl instead of .fragment…is there something I am missing in terms of formatting? Thanks.
```auto
PShader shader;
void setup() {
size(640, 360, P2D);
noStroke();
// Load and compile shader
shader = loadShader("shader.frag");
}
void draw() {
// Set uniforms
shader.set("u_resolution", float(width), float(height));
shader.set("u_mouse", float(mouseX), float(mouseY));
shader.set("u_time", millis() / 1000.0);
// Replace the default pipeline programs with our shader
shader(shader);
// Draw a billboard
rect(0,0,width,height);
}
void keyPressed(){
// Reload shader everytime a key is press
shader = loadShader("shader.frag");
}
```
---
### Author:  [@hamoid](https://discourse.processing.org/u/hamoid)
#### Post date: [May 23, 2018, 3:58pm UTC](https://discourse.processing.org/t/getting-started-with-shaders/296/2 "2018-05-23T15:58:52Z")
What’s inside `shader.frag`? The file name should not matter but the error seems to indicate that the file has a syntax error…
---
### Author:  [@justin\_lincoln](https://discourse.processing.org/u/justin_lincoln)
#### Post date: [May 23, 2018, 4:20pm UTC](https://discourse.processing.org/t/getting-started-with-shaders/296/3 "2018-05-23T16:20:45Z")
Oh I just realized that when I tried to download the shader individually from Github I downloaded a link to the page. I just downloaded their whole gitHub master file it works.
However, I imagine that I will probably have other questions as I go. I wonder if we can keep this thread going for questions.
Eventually I want to write a shader that will basically act like a blend(MULTIPLY) filter on video. I’ve gotten that kind of code running without a shader but it really puts a strain on my computer. This may be some time later in the future. I’d like to get a firmer grasp on the basics.
Thanks for your help.
---
### Author:  [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [May 23, 2018, 4:46pm UTC](https://discourse.processing.org/t/getting-started-with-shaders/296/4 "2018-05-23T16:46:19Z")
> [@justin\_lincoln](#):
>
> Eventually I want to write a shader that will basically act like a blend(MULTIPLY) filter on video. I’ve gotten that kind of code running without a shader but it really puts a strain on my computer.
You know that OpenGL can support MULTIPLY with the built-in blend functions, so you could just use `blendMode(MULTIPLY)`? Note that due to Processing’s use of un-premultiplied alpha, multiply is a bit broken with translucent images, but if they’re opaque it’s fine.
---
### Author:  [@justin\_lincoln](https://discourse.processing.org/u/justin_lincoln)
#### Post date: [May 23, 2018, 6:35pm UTC](https://discourse.processing.org/t/getting-started-with-shaders/296/5 "2018-05-23T18:35:13Z")
Thanks for that tip on blendMode instead of blend. ( Even if this works I’m liable to continue digging into shaders though.) I forget, do I still need to specify OpenGL in the size for the latest version of Processing? And where should I put blendMode? This is what I’ve been using…which over time really gets my computer to heat up.
```auto
import processing.video.*;
Movie m1;
Movie m2;
void setup(){
//size(800,800);
fullScreen();
m1 = new Movie(this, "zz.mov");
m1.loop();
// m1.speed(.7);
m2 = new Movie(this, "aaa.mov");
m2.loop();
// m2.speed(.8);
}
void movieEvent(Movie m){
if (m == m1){
m1.read(); }
else{
m2.read();
}
}
void draw(){
background(255);
image(m1,0,0,width,height);
blend(m2,0,0,1280,800, 0,0,1280,800,MULTIPLY);
}
```
---
### Author:  [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [May 23, 2018, 6:40pm UTC](https://discourse.processing.org/t/getting-started-with-shaders/296/6 "2018-05-23T18:40:22Z")
Remove the `blend(...)` line and add `blendMode(...)` before the call to `image(...)` should work IIRC.
Yes, shaders are fun to play with. I adapted a few from [https://gl-transitions.com/](https://gl-transitions.com/) a while back.
---
### Author:  [@hamoid](https://discourse.processing.org/u/hamoid)
#### Post date: [May 23, 2018, 6:42pm UTC](https://discourse.processing.org/t/getting-started-with-shaders/296/7 "2018-05-23T18:42:15Z")
Is `blendMode()` equally fast with `fullScreen()` and `fullScreen(P2D)`?
---
### Author:  [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [May 23, 2018, 6:44pm UTC](https://discourse.processing.org/t/getting-started-with-shaders/296/8 "2018-05-23T18:44:12Z")
~~~That’s a funny question! 😉 `blendMode()` for those modes supported directly by OpenGL should be as fast in `fullScreen(P2D)` and `fullScreen(P3D)`. They should be a lot faster than the default renderer.~~~
EDIT - yes, I’m an idiot who doesn’t always read properly! 😰
---
### Author:  [@hamoid](https://discourse.processing.org/u/hamoid)
#### Post date: [May 23, 2018, 6:46pm UTC](https://discourse.processing.org/t/getting-started-with-shaders/296/9 "2018-05-23T18:46:17Z")
I was asking because in @justin_lincoln’s code he used `fullScreen();` and he asked about specifying OpenGL… I assumed with `P2D` / `P3D` is faster.
---
### Author:  [@justin\_lincoln](https://discourse.processing.org/u/justin_lincoln)
#### Post date: [May 23, 2018, 6:47pm UTC](https://discourse.processing.org/t/getting-started-with-shaders/296/10 "2018-05-23T18:47:40Z")
I put blendMode(MULTIPLY); into the setup and changed the blend line to a simple image call and it seems to work fine. Hope to test it over a longer period of time to see if I can find a difference in performance. Thanks, this is an interesting development.
---
### Author:  [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [May 23, 2018, 6:49pm UTC](https://discourse.processing.org/t/getting-started-with-shaders/296/11 "2018-05-23T18:49:38Z")
@hamoid - true! I’d missed that in the second code example, sorry. Your question makes more sense now! 😄 Yes, `fullScreen(P2D)` is required there.
You can get an idea of exactly what blend modes are supported in the OpenGL renderers at [https://github.com/processing/processing/blob/master/core/src/processing/opengl/PGraphicsOpenGL.java#L6221](https://github.com/processing/processing/blob/master/core/src/processing/opengl/PGraphicsOpenGL.java#L6221)
---
### Author:  [@justin\_lincoln](https://discourse.processing.org/u/justin_lincoln)
#### Post date: [May 23, 2018, 6:50pm UTC](https://discourse.processing.org/t/getting-started-with-shaders/296/12 "2018-05-23T18:50:53Z")
Oh, jeez…just put P2D in the FullScreen(); function and I see a huge speed difference. In my older versions frames seemed to drop left and right. This is blazing fast.
---
### Author:  [@n1ckfg](https://discourse.processing.org/u/n1ckfg)
#### Post date: [May 28, 2018, 3:04pm UTC](https://discourse.processing.org/t/getting-started-with-shaders/296/13 "2018-05-28T15:04:29Z")
I find setting up shaders in Processing isn’t super intuitive, but once you get the boilerplate code figured out, it’s very reusable. Here’s an example:
> **[n1ckfg/PShaderToy](https://github.com/n1ckfg/PShaderToy)**
>
> ShaderToy boilerplate for Processing 3, Unity. Contribute to n1ckfg/PShaderToy development by creating an account on GitHub.