I've been looking for a way to get the depth map of the scene. If there are alternatives to my current method let me know. For now I am now using shaders to get it. Once I get to the fragment shader I have both the color (vertColor) that you would normally use and the depth (depthColor) which I want for my depth map. Of course gl_FragColor only outputs a single color.

On the internet people say it is possible with GLSL while other say it is not possible with GLSL ES 2.0.

Is it possible in Processing 2.0xx to output to multiple render targets from a fragment shader?

Fragment shader

1. varying vec4 vertColor;
2. varying vec4 depthColor;
3. 
   
4. void main()
5. {
6.     gl_FragColor = depthColor;
7. }

Kudos to the Processing team for working towards the big 2.0. I've been testing Processing 2.0b7 for the past few days and have been running into some issues in the combination of PGraphics and transparency. I am unsure if these are due to my own coding errors, changes in Processing, remaining bugs or hardware incompatibilities. So I'm using the forum first to see if filing an issue is necessary.

I am trying to set pixels in a P2D/P3D PGraphics to transparent. The pixels also need to stay transparent when another begin-endDraw is called on the PGraphics. In the example below, setting the color to red (or any color) is possible. However setting it to transparent doesn't work. Instead it's set to grey. Note that the code does work when it's a JAVA2D PGraphics.

Can others reproduce this behavior?
And if so...
How can I set the pixels in a P2D/P3D PGraphics to transparent?

Code Example

1. PGraphics pg;
2.  
3. void setup() {
4.   size(500, 500, P2D);
5.   pg = createGraphics(width/2, height/2, P2D);
   
6.   noFill();
7. }
8.  
9. void draw() {
10.   setTransparent();
11.   background(0, 255, 0);
12.   image(pg, width/4, height/4);
13.   rect(width/4, height/4, width/2, height/2);
14. }
15.  
16. void setTransparent() {
17.   color transparent = color(0, 0);
18.   color red = color(255, 0, 0);
19.  
20.   pg.beginDraw();
21.   pg.loadPixels();
22.   for (int y=0; y<pg.height; y++) {
23.     for (int x=0; x<pg.width; x++) {
24.       if (x>pg.width/2) {
25.         pg.pixels[x+y*pg.width] = transparent; // doesn't work with P2D/P3D
    
26.       } else {
27.         pg.pixels[x+y*pg.width] = red; // works
    
28.       }
29.     }
30.   }
31.   pg.updatePixels();
32.   pg.endDraw();
33. }

So far I've only gotten the filter(shader) method to work as a post-processing filter on the whole window. While the syntax pgraphics.filter(shader) is allowed, it doesn't seem to work. The method filter(shader) works from/to the main PGraphics, so it would make sense that pgraphics.filter(shader) would work from/to a user-defined PGraphics. At least that's what I'm hoping, because I'd like to use a GLSL fragment shader on an offscreen PGraphics.

Is this possible? And if so, how?

I need to use all of the available memory for the manipulation of large (image) data sets, but the way memory management is handled in java makes this a challenge. I am on a 64bit system with 14GB of memory set in the Processing preferences. Solutions I have tried are:

• Try-catch. Prevents OOM, but ends up so close to the max that the program runs into OOM later.
  
• A manual safe barrier. Only works by trial-and-error, so less than ideal.
  

For testing purposes here is a sketch that recreates the problem. What I am looking for the is the break condition that on the one hand prepares the maximum safe outputBuffer size and on the other hand does not crash from OOM. It needs to do this automatically (no manual magic numbers) and at runtime (no use of xms, need a solution that works from the PDE).

Test Code

1. ArrayList <PImage> outputBuffer = new ArrayList <PImage> ();
2. PImage tempImage = createImage(1920, 1080, RGB);
3. int maxMemory, totalMemory, freeMemory, percentage;
4. 
   
5. maxMemory = int(Runtime.getRuntime().maxMemory()/1000000);
6. for (int i=0; i<10000000; i++) {
7.   outputBuffer.add(tempImage.get());
8.   totalMemory = int(Runtime.getRuntime().totalMemory()/1000000);
9.   freeMemory = int(Runtime.getRuntime().freeMemory()/1000000);
10.   percentage = int((float)totalMemory/maxMemory*100);
11.   println("bufferSize: " + outputBuffer.size() + " | max: " + maxMemory + " | total: " + totalMemory + " (" + percentage + "%)" + " | free: " + freeMemory);
12.   // if something-something break;
13. }

Hey everyone,

I have a program with lots of variables and I'm using controlP5 to change them. I'd like to introduce interpolation to move smoothly from the old to the new value. Changes are currently instantaneous. To accompany my question I've included three examples below.

1. In essence my current setup without interpolation.
   
2. Basic interpolation, but not linear. It starts with big leaps and goes towards endlessly smaller increments. You could include code to stop interpolating within a certain distance. However both the interpolation and the starting-stopping aren't great with this solution.
3. Multi-variable interpolation. This is 'actual' interpolation, in this example linear but easily substituted by other types of interpolation. The starting-stopping is relatively neat, although the correct handling of values at the edges of the range could possibly be improved. But all in all better than in example 2 on both accounts. However the downside is that you need more variables (at least 3 extra vars for every variable that you want to interpolate) and more code for each individual variable.
   

So the option from example 3 would result in incredible bloat, especially in an already complex program with lots of variables. What I'm looking for is a lean-and-mean alternative to implement interpolation inside a program with as little code and extra variables as possible.

I'm not looking for interpolation methods (linear, cosine, sigmoid, exponential) but rather for best practices of handling interpolation within a program. Does anybody have suggestions, experiences or good practices to share with regard to a code-efficient solution?

Thanks!

Example 1 - DIRECT

1. import controlP5.*;
2. ControlP5 cp5;
3.  
4. int diameter = 250;
5.  
6. void setup() {
7.   size(500, 500);
8.   cp5 = new ControlP5(this);
9.   cp5.addSlider("diameter").setPosition(50, 50).setRange(0, width);
10.   smooth();
11.   noStroke();
12.   fill(0);
13. }
14.  
15. void draw() {
16.   background(125);
17.   ellipse(width/2, height/2, diameter, diameter);
18. }

Example 2 - BASIC INTERPOLATION

1. import controlP5.*;
2. ControlP5 cp5;
3.  
4. int diameter = 250;
5. float iDiameter = diameter;
6.  
7. void setup() {
8.   size(500, 500);
9.   cp5 = new ControlP5(this);
10.   cp5.addSlider("diameter").setPosition(50, 50).setRange(0, width);
11.   smooth();
12.   noStroke();
13.   fill(0);
14. }
15.  
16. void draw() {
17.   background(125);
18.   iDiameter = 0.95 * iDiameter + 0.05 * diameter;
19.   ellipse(width/2, height/2, iDiameter, iDiameter);
20. }

Example 3 - MULTI-VARIABLE INTERPOLATION

1. import controlP5.*;
2. ControlP5 cp5;
3.  
4. float oldDiameter, newDiameter, currentDiameter = 250;
5. float diameterInterpolation = 1;
6.  
7. void setup() {
8.   size(500, 500);
9.   cp5 = new ControlP5(this);
10.   cp5.addSlider("newDiameter")
11.     .setBroadcast(false)
12.     .setPosition(50, 50)
13.     .setRange(0, width)
14.     .setValue(currentDiameter)
    
15.     .setLabel("diameter")
16.     .setBroadcast(true)
17.   ;
18.   smooth();
19.   noStroke();
20.   fill(0);
21. }
22.  
23. void draw() {
24.   background(125);
25.   if (diameterInterpolation < 1) {
26.     currentDiameter = lerp(oldDiameter, newDiameter, diameterInterpolation);
27.     diameterInterpolation += 0.05;
28.   }
29.   ellipse(width/2, height/2, currentDiameter, currentDiameter);
30. }
31.  
32. void newDiameter(float theValue) {
33.   oldDiameter = currentDiameter;
34.   newDiameter = theValue;
35.   diameterInterpolation = 0;
36. }

I took the Textured Sphere example as a starting point and applied these displacement GLSL shaders to them using the GLSLshader class. The Sampler2D input for the vertex shader is a displacementMap and the input for the fragment shader is a colorMap. It runs without errors, it correctly displaces the vertices and it shows the texture (see the above image). But my question is with regard to which texture is used.

I noticed that the input textures you supply via the shader have no effect.

1.   shader.start();
2.   shader.setTexUniform("colorMap", tex2); // is not used, delete this and the endresult is unchanged
   
3.   shader.setTexUniform("displacementMap", tex2); // idem
4.   renderer.model(earth);
5.   shader.stop();

The texture that is used is the one set in the GLModel.

1.   earth.initTextures(1);
2.   earth.setTexture(0, tex); // used for both the colorMap and the displacementMap?
3.   earth.updateTexCoords(0, texCoords);

I'm iteratively optimizing code for a project I'm working on which also uses controlP5. I wanted to move several color-related Sliders into two ColorPickers. I need to get an event when the colors are changed. In the currect code I'm monitoring the controlEvents for all the individual Sliders. It seems - unlike all the other ControlGroup subclasses - ColorPicker doesn't send out controlEvents. Perhaps I'm misinterpreting the method name but activateEvent() seems to have no effect on the sending of events. Setting it to true doesn't generate events for a ColorPicker. Setting it to false doesn't prevent events for all the other ControlGroup subclasses.

So my main question is: how can I receive controlEvents from the ColorPicker?

Code Example

1. import controlP5.*;
2. ControlP5 cp5;
3. ColorPicker cp;
4.  
5. void setup() {
6.   size(400,400);
7.   noStroke();
8.   cp5 = new ControlP5(this);
9.   cp = cp5.addColorPicker("picker")
10.           .setPosition(60,100)
11.           .setColorValue(color(25,85,145,255))
12.           .activateEvent(true)
13.           ;
14. }
15.  
16. void draw() {
17.   background(cp.getColorValue());
18.   fill(0,80);
19.   rect(50,90,275,80);
20. }
21.  
22. void controlEvent(ControlEvent theEvent) {
23.   // ColorPicker is of type ControlGroup but there are no events coming in
    
24.   if (theEvent.isGroup()) {
25.     println("event from group " + theEvent.getGroup());
26.   }
27. }

I've been using GLGraphics to work with -for now mainly fragment- shaders. All computation is handled within the shader which is working really well. To tweak settings in real-time, I'm sending some (uniform) variables from Processing to the shader. Again, working fine.

Now I'd like to send an array of variables* to the shader. Is this possible in GLGraphics? And if so, how?



* meaning: more variables than 4 floats into a vec4, rather something like vec2[20] or vec3[8]

Hey guys,

I'm trying to port one of my sketches to a GLSL (fragment) shader. It works, but looks different.

I have pinpointed the culprit: noise

See the following screenshots with Processing on the left and GLSL on the right.



The Processing noise (topleft) looks like I would expect noise to look. The GLSL noise looks blurred. My guess is that the GLSL noise is in fact of a higher precision (thus smoother). I can imagine many cases where this would be a good thing. However when trying to recreate an effect that is based on the Processing noise function, it is not a good thing.

The noise function(s) I am using in my GLSL shader can be found here. I have tried several, both classic and simplex perlin noise. I am already correcting for the difference in range, which is -1 to 1 for the GLSL noise functions. All GLSL noise gives that super-smooth look, which ugly-fies my final result.

I have also looked at the source code of the Processing noise function (written by toxi / Karsten Schmidt). But this code seems to have some dependencies, so it's not straight-forward to copy-paste to a fragment shader.

Does anybody have a GLSL noise function lying around that mimics the Processing noise function?

or

How could I adapt for example this noise function to look more like Processing's output?

With all the focus on Processing tools lately, I've been motivated to look into this. I have set a modest goal for my first tool (or so I thought ). The tool I want to develop is one that allows for other file extensions (besides pde and java) to be edited in the PDE. This means for example glsl-shaders (glsl, vert, frag), xml, txt etc. All kinds of files that are currently discarded by the PDE, but that actually would be very useful to edit within the PDE.

Route 1 - Hard coding it in the source code
To test the feasibility of my idea I took a hard coded shortcut, by changing 1 single line in Processing's original source code and compiling it myself with ant. Et voilà! It worked. I was able to edit txt and other files directly inside the PDE. For completeness, the line to change is in the getExtensions() function in JavaMode.java.

1. public String[] getExtensions() {
2.   return new String[] { "pde", "java" }; // hard code other file extensions here
   
3. }

Of course, the above was just a test and not a long-term, flexible solution for multiple users. So I though this tiny tweak would be a perfect simple thing for a first entry in the world of tool development. Well, this is where my search starts...

Route 2 - An "add extensions" tool
I started by getting things up and running. I have succesfully built the tool template with Eclipse and the destructiveTool example. It works fine in the PDE. So I'm all set. Now I've been reading the Processing source code and javadocs for the Base, Editor, Sketch and SketchCode classes. Seems relevant. The tool I want to create is mainly related to the Sketch class. That class holds a SketchCode[] array of basically all the tabs you see in the PDE. When loading the files in the sketch directory, all the non pde/java files are discarded. What I want is to add these files as tabs in the PDE based on user-defined file extensions. The simplest route seemed to add them to the main SketchCode[] array, just like my hard-coded route 1 quickly facilitated. Now it's very easy to get the SketchCode's that are in the array or to get all the files in the sketch directory. But I don't want to only print the file names, I want to add them to the SketchCode[] array. However that is problematic. All the variables in this class are private (safe programming), but there are only getters and almost no setters. In short, I'm having a hard time realising my goal. I tried a couple of things, but in the end, met the above described wall.

So this leads me to my two questions:

1. Are user-created tools allowed to tweak the PDE in areas usually handled by the original source code?
2. If this is allowed, how would I be able to realise my intended tool given the restrictions described?

Hey everyone,

I'm experimenting with the awesome Hemesh library. I am using the getNeighborFaces() function in the HE_Face class. However it seems this function is not returning the most recent state of affairs. Even when there are no other faces left in the mesh, this method still returns faces. How can I solve this so I get the actual neighbor faces (which in this example - after removing all the other faces - I expected to be none)?

Run this code and the mystery will be printed to your console.

Code Example

1. import wblut.hemesh.core.*;
2. import wblut.hemesh.creators.*;
3.  
4. void setup() {
5.   HE_Mesh mesh = new HE_Mesh(new HEC_Cube().setEdge(100));
6.  
7.   // put all the faces of the mesh in an arraylist 
8.   ArrayList <HE_Face> faces = mesh.getFacesAsArrayList();
9.   println("The mesh has " + faces.size() + " faces.");
10.  
11.   // get a single face (the first one)
12.   HE_Face face = faces.get(0);
13.  
14.   // put all it's neighbor faces in an arraylist
15.   ArrayList <HE_Face> neighbors = face.getNeighborFaces();
16.   println("The selected face has " + neighbors.size() + " neighbors.");
17.  
18.   // remove all the faces except the first from the mesh
19.   for (int i=faces.size()-1; i>0; i--) {
20.     HE_Face f = faces.get(i);
21.     mesh.remove(f);
22.   }
23.  
24.   // put all the (remaining) faces of the mesh in an arraylist 
25.   faces = mesh.getFacesAsArrayList();
26.   println("The mesh has " + faces.size() + " face.");
27.  
28.   // get a single face (the first -and now only!- one)
29.   face = faces.get(0);
30.   // put all it's neighbor faces in an arraylist
31.   neighbors = face.getNeighborFaces();
32.   println("The selected face still has " + neighbors.size() + " neighbors!");
33.  
34.   println("How is this possible? Where are these neighbors coming from?");
35.  
36.   exit();
37. }

Apparantly some regular Processing code works, some does not. According to the Processing.js reference most functions are supported. But if there is no flawless transition, I have no way of telling what is the problem! For the sketches that DO NOT run in Processing.js...

• When running it in the browser you just get a white/black canvas, but no error console or something.
• When using 2.0a's Javascript mode, the applet gets exported without error messages, but doesn't run.
• When pasting it in the P5.js web IDE, no errors are displayed, but the sketch window just remains white.

So how does one determine the issue when Processing.js code doesn't compile/run correctly?

* EDIT * I found the issue that I was having, which inspired this topic. Apparantly Processing.js can't handle function overloading (with the default functions). However it would have been nice if I've gotten some kind of error message somewhere instead of being forced to go through a lengthy trial-and-error sequence.

It can be done, see: http://tumblrplayr.tumblr.com/post/3650938372/processing-js-playr

I've started a tumblr, posted the header code inside the head tags of my theme, however when posting a sketch it either displays as text or not at all. Haven't managed to make it run. Also I haven't found any other examples of someone putting a Processing.js sketch on Tumblr.

Does anybody have some suggestions?

I was testing out some additive blending in GLGraphics and I wasn't seeing any effect. I brought it down to the basic example below based on the wiki's blending example. As you can see OpenGL blending as such does work within GLGraphics as can be seen from the difference between the first and second row of ellipses. However I can't make it work with GLModels, as seen from the third row of planes. The example is pretty basic (in the real sketch there are many different GLModels), but it's just to show the problem.

The fact that OpenGL blending does not work on a GLModel can also be seen in the example included with the GLGraphics library itself (Integration > OpenGL). Disabling the depth mask works, but the blending has no effect. I have tested this on both a Radeon and NVIDIA card using Processing 1.5.1 and GLGraphics 1.0.0.

My question is: how can I use OpenGL blending on GLModels in GLGraphics?

Code Example

1. import processing.opengl.*;
2. import codeanticode.glgraphics.*;
3. import javax.media.opengl.GL;
4.  
5. GLModel plane;
6. int c = 50; // global 'color'
7.  
8. void setup() {
9.   size(800, 160, GLConstants.GLGRAPHICS);
10.   createPlane();
11.   noStroke();
12. }
13.  
14. void draw() {
15.   background(0);
16.   fill(c); 
17.  
18.   GLGraphics renderer = (GLGraphics)g;
19.   renderer.beginGL();
20.  
21.   GL gl = renderer.gl;
22.  
23.   float x = 0;   
24.  
25.   for (int i=0; i<200; i++) {
26.     x = lerp(x, width*1.9, 0.05f);
27.     ellipse(x, 40, 60, 60); // regular
    
28.   }
29.  
30.   gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE); // additive blending
31.  
32.   x = 0;
33.   translate(0, 80);
34.  
35.   for (int i=0; i<200; i++) {
36.     x = lerp(x, width*1.9, 0.05f);
37.     ellipse(x, 40, 60, 60); // blending works
    
38.   }
39.  
40.   x = 0;
41.   translate(10, 40);
42.  
43.   for (int i=0; i<50; i++) {
44.     x = lerp(x, width, 0.05f);
45.     pushMatrix();
46.     translate(x, 0);
47.     renderer.model(plane); // blending does not work
    
48.     popMatrix();
49.   }
50.   renderer.endGL();
51. }
52.  
53. void createPlane() {
54.   plane = new GLModel(this, 4, QUADS, GLModel.STATIC);
55.   plane.beginUpdateVertices();
56.   plane.updateVertex(0, -20, -20, 0);
57.   plane.updateVertex(1, +20, -20, 0);
58.   plane.updateVertex(2, +20, +20, 0);
59.   plane.updateVertex(3, -20, +20, 0);
60.   plane.endUpdateVertices();
61.   plane.initColors();
62.   plane.beginUpdateColors();
63.   plane.updateColor(0, c, c, c, 255);
64.   plane.updateColor(1, c, c, c, 255);
65.   plane.updateColor(2, c, c, c, 255);
66.   plane.updateColor(3, c, c, c, 255);
67.   plane.endUpdateColors();
68. }

I've been using Proscene and it's great. It's wonderful for creating camera paths. However I have some problems with sketches running/rendering at non-realtime framerates and the effect this has on camera interpolation. I went through all the examples and found two that were particularly interesting: Camera Interpolation and Frame Interpolation. To re-create the problem I'm having, add this line to the end of setup of either example:

1.   frameRate(2); // to simulate a low framerate sketch
   

The original interpolation will look like this:

0 sec |-------|-------|-------|-------|-------|-------|-------|-------|-------| 1 sec

The slow framerate interpolation will look like this:

0 sec |------------------------------|--------------------------------------| 1 sec

This is not good, because when you put the frames back together in a movie, you are 'missing' a lot of frames. Now I understand from the reference that the interpolation is time-based, so it is in fact effectively doing it's job. However the endresult is not what I want. I would basically like something like the original, no matter how much time it took.

I found some very useful suggestions in this thread about slowing down the interpolation speed. This is a reasonable workaround. If the original framerate was 60fps and the rendering framerate is 2fps, then you can set the interpolation speed to 2/60 and I guess you end up sort of with the same endresult. However this is not an ideal solution.

I am wondering if it's possible to have camera interpolation based on frameCount instead of time, to make the camera movement independent of the rendering / sketch speed. Or are there other ways to use smooth interpolated camera paths under non-realtime conditions?