# MetaBalls from shaderToy

**URL:** <https://discourse.processing.org/t/metaballs-from-shadertoy/30414>\
**Category:** Coding Questions\
**Created:** [June 1, 2021, 1:32pm UTC](https://discourse.processing.org/t/metaballs-from-shadertoy/30414 "2021-06-01T13:32:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![matheplica](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/matheplica/32/21035_2.png) [@matheplica](https://discourse.processing.org/u/matheplica)\
**Post date:** [June 1, 2021, 1:32pm UTC](https://discourse.processing.org/t/metaballs-from-shadertoy/30414/1 "2021-06-01T13:32:46Z")

</div>

Hello,  
I’m trying to use this [metaballs shaders](https://www.shadertoy.com/view/Msf3z7) found on shaderToy with no results. I’ve got a black screen with this error :

> OpenGL error 1282 at bot endDraw(): invalid operation

I adapt a little bit the code but I’m not a shader master.  
Here’s the code that I would like to put in a PGraphics as a layer.  
Thanks for help

```auto
#define PROCESSING_COLOR_SHADER
uniform vec3 iResolution;
uniform vec2 iMouse;
uniform float iTime;
uniform	float divide;
uniform	float intensity = 0.2;

uniform	float coordX;
uniform	float coordY;
	
uniform	float ball1x;
uniform	float ball1y;
uniform	float ball1z;
	
uniform	float ball2x;
uniform	float ball2y;
uniform	float ball2z;
	
uniform	float ball3x;
uniform	float ball3y;
uniform	float ball3z;

uniform	vec3 ball1;
uniform	vec3 ball2;
uniform	vec3 ball3;

uniform	float sum = 0.0;
void mainImage( out vec4 fragColor, in vec2 fragCoord );

void main() {
    mainImage(gl_FragColor,gl_FragCoord.xy);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
	// Hold the mouse and drag to adjust  
	
	float ratio = iResolution.y / iResolution.x;
	float divider = float(iMouse.y / iResolution.x * 10.0) + 1.0;
	float intensity = float(iMouse.x / iResolution.y * 10.0) + 1.0;

	float coordX = fragCoord.x / iResolution.x;
	float coordY = fragCoord.y / iResolution.x;
	
	float ball1x = sin(iTime * 2.1) * 0.5 + 0.5;
	float ball1y = cos(iTime * 1.0) * 0.5 + 0.5;
	float ball1z = sin(iTime * 2.0) * 0.1 + 0.2;
	
	float ball2x = sin(iTime * 1.0) * 0.5 + 0.5;
	float ball2y = cos(iTime * 1.8) * 0.5 + 0.5;
	float ball2z = cos(iTime * 2.0) * 0.1 + 0.2;
	
	float ball3x = sin(iTime * 0.7) * 0.5 + 0.5;
	float ball3y = cos(iTime * 1.5) * 0.5 + 0.5;
	float ball3z = cos(iTime * 1.0) * 0.1 + 0.2;

	vec3 ball1 = vec3(ball1x, ball1y * ratio, ball1z);
	vec3 ball2 = vec3(ball2x, ball2y * ratio, ball2z);
	vec3 ball3 = vec3(ball3x, ball3y * ratio, ball3z);

	float sum = 0.0;
	sum += ball1.z / distance(ball1.xy, vec2(coordX, coordY));
	sum += ball2.z / distance(ball2.xy, vec2(coordX, coordY));
	sum += ball3.z / distance(ball3.xy, vec2(coordX, coordY));
	
    sum = pow(sum / intensity, divider);
	
	fragColor = vec4(sum * 0.2, sum * 0.2, sum * 0.4, 1.0);
}

```

```auto
PShader metaBalls;
void setup() {
  size(896, 768, P2D);
  noStroke();
  metaBalls = loadShader("metaBalls.glsl");
  metaBalls.set("iResolution", float(width), float(height));
}
void draw() {
  metaBalls.set("iTime", millis() / 500.0);  
  shader(metaBalls); 
 rect(0, 0, width, height);
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 1, 2021, 3:44pm UTC](https://discourse.processing.org/t/metaballs-from-shadertoy/30414/2 "2021-06-01T15:44:34Z")

</div>

Hi @matheplica ,

Seems the issue was already encountered before 😉 :

> <https://github.com/processing/processing/issues/2031>
>
> Win7 64bit with all updates
> Java 6u45 32 bit (removed all other versions)
> Proces…sing 2.02 32 bit
> 
> IDE and many samples work, but many sample consistently fail with the above error. For example Basics/Array/ArrayObjects example works.
> Basics/Camera/MoveEye gives above error.
> 
> For the failing examples: Processing 1.5.1 WORKS on same system. Javascript mode on 2.02 WORKS on same system (Chrome browser). Processing version 2.0, 2.01, 2.01 in Java mode FAIL with above error. (I also tried 64 bit versions of Processing and Java, and I tried with Java 7u25 - same errors with Processing 2.x in Java mode). I've rebooted to be sure.
> \## So Java appears to be working, 3D graphics seem to be working (in 1.5.1 or 2.x Javascript mode). I will be glad to provide more info (eg: log file from error). The full error in the IDE is:
> 
> OpenGL error 1282 at bot endDraw(): invalid operation
> \# 
> \# A fatal error has been detected by the Java Runtime Environment:
> \# 
> \# EXCEPTION\_ACCESS\_VIOLATION (0xc0000005) at pc=0x1a932d44, pid=6744, tid=2672
> \# 
> \# JRE version: 6.0\_37-b06
> \# Java VM: Java HotSpot(TM) Client VM (20.12-b01 mixed mode windows-x86 )
> \# Problematic frame:
> \# C \[ig4icd32.dll+0x12d44\]
> \# 
> \# An error report file with more information is saved as:
> \# C:\\Users\\zhahai\\Downloads\_software\\Processing\\processing-2.0.2\\hs\_err\_pid6744.log
> \# 
> \# If you would like to submit a bug report, please visit:
> \# http://java.sun.com/webapps/bugreport/crash.jsp
> \# The crash happened outside the Java Virtual Machine in native code.
> \# See problematic frame for where to report the bug.
> \# 
> 
> Could not run the sketch (Target VM failed to initialize).
> For more information, read revisions.txt and Help ? Troubleshooting.

> <https://github.com/processing/processing/issues/2246>
>
> code:
> 
> void setup(){
> size(200,200,P3D);
> }
> 
> error:
> OpenGL error 1282 at bot e…ndDraw(): invalid operation
> 
> code:
> 
> import processing.opengl.\*;
> 
> error:
> OpenGL error 1282 at bot endDraw(): invalid operation
> 
> PC,Vista, 64 bit; Java works; processing.js - works
> 
> All other examples work fine

[https://forum.processing.org/two/discussion/3155/opengl-error-1282-at-top-enddraw-invalid-operation](https://forum.processing.org/two/discussion/3155/opengl-error-1282-at-top-enddraw-invalid-operation)

Are your gpu drivers up to date?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [June 2, 2021, 10:07am UTC](https://discourse.processing.org/t/metaballs-from-shadertoy/30414/3 "2021-06-02T10:07:00Z")

</div>

I hesitate to say this but “it’s not how it works”. You are mixing up different GLSL versions, and you need to adapt it to the one that Processing supports. First, always start with a very simple example

```auto
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

varying vec4 vertTexCoord;

void main() {
  gl_FragColor = vec4(vertTexCoord.xy, 1.0,1.0);
}

```

```auto
PShader metaBalls;
void setup() {
  size(896, 768, P2D);
  noStroke();
  metaBalls = loadShader("metaBalls.glsl");
  metaBalls.set("iResolution", float(width), float(height));
}
void draw() {
  metaBalls.set("iTime", millis() / 500.0);  
  metaBalls.set("iMouse", mouseX, mouseY);  
  filter(metaBalls); 
}

```

if you know the shader works, then add things to it

```auto
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

varying vec4 vertTexCoord;

uniform vec2 iResolution;
uniform vec2 iMouse;
uniform float iTime;

uniform float sum = 0.0;

void main() {
	// Hold the mouse and drag to adjust  
	
	float ratio = iResolution.y / iResolution.x;
	float divider = float(iMouse.y / iResolution.x * 10.0) + 1.0;
	float intensity = float(iMouse.x / iResolution.y * 10.0) + 1.0;

	float coordX = vertTexCoord.x;// / iResolution.x;
	float coordY = vertTexCoord.y;// / iResolution.x;
	
	float ball1x = sin(iTime * 2.1) * 0.5 + 0.5;
	float ball1y = cos(iTime * 1.0) * 0.5 + 0.5;
	float ball1z = sin(iTime * 2.0) * 0.1 + 0.2;
	
	float ball2x = sin(iTime * 1.0) * 0.5 + 0.5;
	float ball2y = cos(iTime * 1.8) * 0.5 + 0.5;
	float ball2z = cos(iTime * 2.0) * 0.1 + 0.2;
	
	float ball3x = sin(iTime * 0.7) * 0.5 + 0.5;
	float ball3y = cos(iTime * 1.5) * 0.5 + 0.5;
	float ball3z = cos(iTime * 1.0) * 0.1 + 0.2;

	vec3 ball1 = vec3(ball1x, ball1y * ratio, ball1z);
	vec3 ball2 = vec3(ball2x, ball2y * ratio, ball2z);
	vec3 ball3 = vec3(ball3x, ball3y * ratio, ball3z);

	float sum = 0.0;
	sum += ball1.z / distance(ball1.xy, vec2(coordX, coordY));
	sum += ball2.z / distance(ball2.xy, vec2(coordX, coordY));
	sum += ball3.z / distance(ball3.xy, vec2(coordX, coordY));
	
  sum = pow(sum / intensity, divider);
	
	gl_FragColor = vec4(sum * 0.2, sum * 0.2, sum * 0.4, 1.0);
}

```

by the way I get endDraw error but it seems it’s not affecting the result. Also in Processing frag coord is already normalized so you don’t need to divide it by the resolution parameter.

---

<div class="post-metadata">

**Author:** ![monkstone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monkstone/32/64_2.png) [@monkstone](https://discourse.processing.org/u/monkstone)\
**Post date:** [June 2, 2021, 12:59pm UTC](https://discourse.processing.org/t/metaballs-from-shadertoy/30414/4 "2021-06-02T12:59:29Z")

</div>

Did you know there is a way to use a wrapper around a shaderToy shader, see [Raphaël de Courville](https://github.com/SableRaf/Shadertoy2Processing) on github.

 ![metaballs](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/dba55d0582f7cb1ff9b0bdf87c6d139ac016147c.png)  
I have created a similar tool for [JRubyArt](https://github.com/monkstone/shadertoy2jruby_art) see above sketch running from atom. Note the beauty of using atom as an editor is it supports glsl (and processing just use script tool to run sketches…

---

<div class="post-metadata">

**Author:** ![monkstone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monkstone/32/64_2.png) [@monkstone](https://discourse.processing.org/u/monkstone)\
**Post date:** [June 2, 2021, 3:06pm UTC](https://discourse.processing.org/t/metaballs-from-shadertoy/30414/5 "2021-06-02T15:06:17Z")

</div>

Once you have a running sketch then you can if you wish convert sketch and shader code as follows:-

```ruby
attr_reader :last_mouse_position, :mouse_click_state, :mouse_dragged, :shader_t
attr_reader :start

def settings
  size(640, 360, P2D)
end

def setup
  sketch_title 'Shadertoy Metaballs'
  @previous_time = 0.0
  @mouse_dragged = false
  @mouse_click_state = 0.0
  # Load the shader file from the "data" folder
  @shader_t = load_shader(data_path('metaballs.glsl'))
  # Assume the dimension of the window will not change over time
  shader_t.set('iResolution', width.to_f, height.to_f, 0.0)
  @last_mouse_position = Vec2D.new(mouse_x, mouse_y)
  @start = java.lang.System.current_time_millis
end

def draw
  # shader playback time (in seconds)
  current_time = (java.lang.System.current_time_millis - start) / 1000.0
  shader_t.set('iTime', current_time)
  if mouse_pressed?
    @last_mouse_position = Vec2D.new(mouse_x, mouse_y)
    @mouse_click_state = 1.0
  else
    @mouse_click_state = 0.0
  end
  shader_t.set('iMouse', last_mouse_position.x, last_mouse_position.y, mouse_click_state, mouse_click_state)
  # Apply the specified shader to any geometry drawn from this point
  shader(shader_t)
  # Draw the output of the shader onto a rectangle that covers the whole viewport.
  rect(0, 0, width, height)
end

```

And shader

```auto
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

// ----------------------
// SHADERTOY UNIFORMS -
// ----------------------

uniform vec3 iResolution; // viewport resolution (in pixels)
uniform float iTime; // shader playback time (in seconds)
uniform vec4 iMouse; // mouse pixel coords. xy: current (if MLB down), zw: click

void main()
{
	// Hold the mouse and drag to adjust

	float ratio = iResolution.y / iResolution.x;
	float divider = float(iMouse.x / iResolution.x * 10.0) + 1.0;
	float intensity = float(iMouse.y / iResolution.y * 10.0) + 1.0;

	float coordX = gl_FragCoord.x / iResolution.x;
	float coordY = gl_FragCoord.y / iResolution.x;

	float ball1x = sin(iTime * 2.1) * 0.5 + 0.5;
	float ball1y = cos(iTime * 1.0) * 0.5 + 0.5;
	float ball1z = sin(iTime * 2.0) * 0.1 + 0.2;

	float ball2x = sin(iTime * 1.0) * 0.5 + 0.5;
	float ball2y = cos(iTime * 1.8) * 0.5 + 0.5;
	float ball2z = cos(iTime * 2.0) * 0.1 + 0.2;

	float ball3x = sin(iTime * 0.7) * 0.5 + 0.5;
	float ball3y = cos(iTime * 1.5) * 0.5 + 0.5;
	float ball3z = cos(iTime * 1.0) * 0.1 + 0.2;

	vec3 ball1 = vec3(ball1x, ball1y * ratio, ball1z);
	vec3 ball2 = vec3(ball2x, ball2y * ratio, ball2z);
	vec3 ball3 = vec3(ball3x, ball3y * ratio, ball3z);

	float sum = 0.0;
	sum += ball1.z / distance(ball1.xy, vec2(coordX, coordY));
	sum += ball2.z / distance(ball2.xy, vec2(coordX, coordY));
	sum += ball3.z / distance(ball3.xy, vec2(coordX, coordY));

    sum = pow(sum / intensity, divider);

	gl_FragColor = vec4(sum * 0.2, sum * 0.2, sum * 0.4, 1.0);
}

```

Similar to @micuat, but I don’t get OpenGl error, might be due to my using vec4 for [iMouse](https://www.shadertoy.com/howto) see shadertoy howto.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [June 2, 2021, 8:15pm UTC](https://discourse.processing.org/t/metaballs-from-shadertoy/30414/6 "2021-06-02T20:15:07Z")

</div>

also PixelFlow supports Shadertoy code:

> **[diwi/PixelFlow](https://github.com/diwi/PixelFlow/tree/master/examples/Shadertoy)**
>
> master/examples/Shadertoy

---

<div class="post-metadata">

**Author:** ![matheplica](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/matheplica/32/21035_2.png) [@matheplica](https://discourse.processing.org/u/matheplica)\
**Post date:** [June 9, 2021, 7:29am UTC](https://discourse.processing.org/t/metaballs-from-shadertoy/30414/7 "2021-06-09T07:29:52Z")

</div>

Ok, thanks for all answers, it’s good to see the motivation of the community.  
Hope it help other shaders newbies.  
Thanks !