# Translate glsl to Processing glsl Code

**URL:** <https://discourse.processing.org/t/translate-glsl-to-processing-glsl-code/43699>\
**Category:** Coding Questions\
**Created:** [January 16, 2024, 1:26am UTC](https://discourse.processing.org/t/translate-glsl-to-processing-glsl-code/43699 "2024-01-16T01:26:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)\
**Post date:** [January 16, 2024, 1:26am UTC](https://discourse.processing.org/t/translate-glsl-to-processing-glsl-code/43699/1 "2024-01-16T01:26:49Z")

</div>

How can one translate glsl code to processing glsl code?

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [January 16, 2024, 3:38am UTC](https://discourse.processing.org/t/translate-glsl-to-processing-glsl-code/43699/3 "2024-01-16T03:38:16Z")

</div>

glsl is its own language. It’s used in vertex and fragment shaders as well as geometry, tessellation and compute shaders.

By “translate to Processing glsl”, you presumably mean emulating within Processing the input “uniform” variables that some other environment provides. [shadertoy.com](http://shadertoy.com), for instance, provides resolution, time, and mouse inputs. Those are easy to create in Processing by just `set()`ing them on the shader. See my example code below. shadertoy also provides multiple drawing layers that feed into one another. That’s rather trickier to do and I’ve never tried to work it out.

Here’s a simple example to get you started. Processing sets a `resolution` uniform. I create my own `time` uniform.

```auto
PShader shdr;

void setup() {
  size( 800, 800, P2D );
  noStroke();
  shdr = new PShader( this, vertSrc, fragSrc );
}

void draw() {
  shdr.set( "time", frameCount/60. );
  shader( shdr );
  rect( 0, 0, width, height );
}

String[] vertSrc = {"""
#version 330
uniform mat4 transform; // passed in by Processing
in vec4 position;
void main() {
  gl_Position = transform * position;
}
"""};

String[] fragSrc = {"""
#version 330
precision highp float;
uniform vec2 resolution; // passed in by Processing
uniform float time;
#define TAU 6.283185307179586

out vec4 fragColor;
void main() {
  vec2 uv = (2.*gl_FragCoord.xy-resolution)/resolution.y;
  uv = vec2( time*0.5 - log(length(uv)), atan( uv.y, uv.x ) / TAU + .5 );
  uv = fract( vec2( 1.*uv.x+3.*uv.y, -1.*uv.x+6.*uv.y ) );
  fragColor = vec4( step(0.8, uv), 0., 1. );
}
"""};

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 16, 2024, 6:47am UTC](https://discourse.processing.org/t/translate-glsl-to-processing-glsl-code/43699/4 "2024-01-16T06:47:16Z")

</div>

Python Mode (Jython) version of @scudly’s Java Mode version: 🐍

```auto
from processing.opengl import PShader

def setup():
    size( 800, 600, P2D )
    noStroke()

    global shdr
    shdr = PShader( this, vertSrc, fragSrc )

def draw():
    shdr.set( "time", frameCount / 120. )
    shader( shdr )
    rect( 0, 0, width, height )

vertSrc = ["""
#version 330

uniform mat4 transform; // passed in by Processing
in vec4 position;

void main() {
  gl_Position = transform * position;
}
"""]

fragSrc = ["""
#version 330

#define TAU 6.28318530718

precision lowp float;
out vec4 fragColor;

uniform vec2 resolution; // passed in by Processing
uniform float time; // updated in draw()

void main() {
  vec2 uv = (2 * gl_FragCoord.xy - resolution) / resolution.y;

  uv = vec2( time - log( length(uv) ), atan( uv.y, uv.x ) / TAU + .5 );
  uv = fract( vec2( 3*uv.y + uv.x, 6*uv.y - uv.x ) );

  fragColor = vec4( step(.8, uv), 0, 1 );
}
"""]

```