Translate glsl to Processing glsl Code

Processing Coding Questions
1

How can one translate glsl code to processing glsl code?

3

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, 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.

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. );
}
"""};
3 Likes
4

Python Mode (Jython) version of @scudlyā€™s Java Mode version: :snake:

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 );
}
"""]