# Porting GLSL from Shadertoy to Processing

**URL:** https://discourse.processing.org/t/porting-glsl-from-shadertoy-to-processing/2762
**Category:** Gallery
**Created:** [August 18, 2018, 7:07pm UTC](https://discourse.processing.org/t/porting-glsl-from-shadertoy-to-processing/2762 "2018-08-18T19:07:30Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)
#### Post date: [August 18, 2018, 7:07pm UTC](https://discourse.processing.org/t/porting-glsl-from-shadertoy-to-processing/2762/1 "2018-08-18T19:07:31Z")

</div>

A few years ago, I wrote an example on how to port GLSL shader code from [Shadertoy.com](http://Shadertoy.com) to Processing. Since then, Shadertoy has changed quite a lot (adding a lot of new uniforms and input methods) so an update was long overdue.

You can find it here: [https://github.com/SableRaf/Shadertoy2Processing](https://github.com/SableRaf/Shadertoy2Processing)

There is still work to be done, but it should be a good starting point for anyone wanting to learn about shaders from the great material available at Shadertoy, and experiment with it in Processing.

I hope that will be helpful to some of you 🙂

 ![001](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4ac22d4a7364e8241c301b51d226a113273eef1a.jpeg)

---

<div class="post-metadata">

### Author: ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)
#### Post date: [August 18, 2018, 10:45pm UTC](https://discourse.processing.org/t/porting-glsl-from-shadertoy-to-processing/2762/2 "2018-08-18T22:45:01Z")

</div>

Hi Raph 🙂 Nice work!

In the TODO I see “supporting multipass shaders”. The [PixelFlow](https://diwi.github.io/PixelFlow/) library does that somehow. Maybe it can be useful to study how it works there. See [https://github.com/diwi/PixelFlow/tree/master/examples/Shadertoy](https://github.com/diwi/PixelFlow/tree/master/examples/Shadertoy) (Expansive Reaction Diffusion).

---

<div class="post-metadata">

### Author: ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)
#### Post date: [August 20, 2018, 8:39am UTC](https://discourse.processing.org/t/porting-glsl-from-shadertoy-to-processing/2762/3 "2018-08-20T08:39:12Z")

</div>

Very interesting! Thanks hamoid. 🙂

---

<div class="post-metadata">

### Author: ![Hewes](https://avatars.discourse-cdn.com/v4/letter/h/e79b87/32.png) [@Hewes](https://discourse.processing.org/u/Hewes)
#### Post date: [September 5, 2018, 2:54am UTC](https://discourse.processing.org/t/porting-glsl-from-shadertoy-to-processing/2762/4 "2018-09-05T02:54:38Z")

</div>

Hi Raph:

In the TODO, I want to know how to do “input Sound”. I have a project about “music visualization”. Help 🐕

---

<div class="post-metadata">

### Author: ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)
#### Post date: [September 5, 2018, 5:17am UTC](https://discourse.processing.org/t/porting-glsl-from-shadertoy-to-processing/2762/5 "2018-09-05T05:17:04Z")

</div>

I suspect the only way would be using one of the Processing audio libraries (like Sound, Minim, Beads or something else). With such libraries you can load a sound file, play it, get the FFT analysis, and send the FFT values to the shader as a uniform.

Shadertoy plays Soundcloud using their JavaScript API but Soundclound for Java or Processing seems to be no longer maintained since 4 ~ 5 years ago:

> **[soundcloud/java-api-wrapper](https://github.com/soundcloud/java-api-wrapper)**
>
> SoundCloud Java API wrapper (OAuth2 only), works on Android - soundcloud/java-api-wrapper

  

> **[nok/soundcloud-processing](https://github.com/nok/soundcloud-processing)**
>
> \[unmaintained\] Library to use the SoundCloud API in Processing. - nok/soundcloud-processing

But: you could use p5.js, access the Soundcloud API, get the FFT, and forward the data to a shader, everything in the browser (unfortunately without using @sableraph’s library).

---

<div class="post-metadata">

### Author: ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)
#### Post date: [March 4, 2019, 11:12pm UTC](https://discourse.processing.org/t/porting-glsl-from-shadertoy-to-processing/2762/6 "2019-03-04T23:12:50Z")

</div>

Hi Hewes,

I’ve been working on the sound input example. You can follow this issue on the repository for updates:

> <https://github.com/SableRaf/Shadertoy2Processing/issues/2>

---

<div class="post-metadata">

### Author: ![morisil](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/morisil/32/6166_2.png) [@morisil](https://discourse.processing.org/u/morisil)
#### Post date: [April 14, 2019, 2:08pm UTC](https://discourse.processing.org/t/porting-glsl-from-shadertoy-to-processing/2762/7 "2019-04-14T14:08:50Z")

</div>

@hamoid And here it is. Not “expansive” though 🙂

> <https://github.com/SableRaf/Shadertoy2Processing/pull/4>

---

<div class="post-metadata">

### Author: ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)
#### Post date: [April 14, 2019, 8:10pm UTC](https://discourse.processing.org/t/porting-glsl-from-shadertoy-to-processing/2762/8 "2019-04-14T20:10:05Z")

</div>

Update:

- The sound issue has been solved! Now features both FFT and Waveform. Thanks @hamoid for the tips!
- @morisil, your multipass example is now merged. Thanks a lot for the contribution!

---

<div class="post-metadata">

### Author: ![Spenc](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@Spenc](https://discourse.processing.org/u/Spenc)
#### Post date: [June 8, 2020, 11:55pm UTC](https://discourse.processing.org/t/porting-glsl-from-shadertoy-to-processing/2762/9 "2020-06-08T23:55:21Z")

</div>

How exactly did you copy the Shadertoy and make a .glsl file? I thought I could just make a .txt file and replicate what you had and save it as a .glsl file but that did not work. So how do I save as .glsl files?

---

<div class="post-metadata">

### Author: ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)
#### Post date: [June 12, 2020, 8:33am UTC](https://discourse.processing.org/t/porting-glsl-from-shadertoy-to-processing/2762/10 "2020-06-12T08:33:00Z")

</div>

Hi Spenc and welcome to the forums 🙂

You will have to remove text formatting from your file or (better) use a dedicated text editor such as SublimeText, Atom, Brackets, or any of the many text editors designed for code. Copy the glsl code inside the editor, make your changes, and save it directly as a .glsl file. There is no need to go through a .txt step.
