PGraphics in processing.js

abdullah

Hi, I am using processing.js to display my processing code in a web browser. So I have a "Sphere_" class that has render() method. This method returns in PGraphics datatype.

PGraphics render()
  {
    if (!lockDiameter)
      sphereDiameter = map( particles.size(), 0, 2*NUM_OF_PARTICLES, 0.75*MEAN_SPHERE_DIAMETER, 1.25*MEAN_SPHERE_DIAMETER );
    else
      sphereDiameter = MEAN_SPHERE_DIAMETER;

    sphereScreen.beginDraw();
    //sphereScreen.clear();
    sphereScreen.pushMatrix();

    sphereScreen.translate(sphereScreen.width/2, sphereScreen.height/2);

    for ( int i=0; i<particles.size (); i++ )
    {
      particles.get(i).update(sphereDiameter);    
      setNeighbors( particles.get(i) ); 
      sphereScreen = particles.get(i).render(sphereScreen);
    }
    sphereScreen.popMatrix();
    sphereScreen.endDraw();

    return sphereScreen;
  }

There is also another class named "Particle" which also has a "render()" function that takes a PGraphics, and draws an ellipse on it and returns. After doing binary search and the println("works till here"); method, I found that in javascript mode execution stops at the sphereScreen.clear() function call. 1. Are there any alternatives to PGraphics clear() in processing.js?

After commenting the clear() call the function seemed to execute fine. But, in another part of the sketch, I am drawing this PGraphics by calling render() in a image() method:

image(s1.render(), 10, 10);

where s1 is an object of the Sphere_ class. 2. The problem is that the execution stops at this image() function call. I know that the render() function works but dont know what I am doing wrong here. Any help would be greatly appreciated.

mbraendle

Where is sphereScreen declared?

GoToLoop

Function clear() was introduced in Processing 2: https://processing.org/reference/clear_.html
Therefore, it's unavailable for Processing 1! :o3
However, it's merely sugar for background(0, 0);! :-j

abdullah

@mbraendle: The sphereScreen is declared in the Sphere_ class. It is then initialized in the Sphere_ constructor as:

sphereScreen = createGraphics(700, 700, P3D);

@GoToLoop: Does processing.js require a sketch to have Processing 1 specs?

GoToLoop

Does processing.js require a sketch to have Processing 1 specs?

Unfortunately yes! Most Processing host sites still are at version 1.4.1.
Even its latest version 1.4.8 is too far at attaining Processing 2 feature parity! [-O<

• http://processingjs.org/download/
• http://processingjs.org/reference/

abdullah

@GoToLoop Thanks for your response. I made a few changes to the sketch so that it worked on Processing 1.5 (at terrible frame rate i should add) but still, processing.js fails to execute past the image() function call.

image(s1.render(), 10, 10);

The processing 1.5 reference has an example with a PGraphics object passed to an image() function so I guess that is completely legal. But this problem completely baffles my mind.

GoToLoop

I've got a question: Does your sketch work in Java Mode? It's ideal for it to work both for Java & JS Modes!
That is so b/c JavaScript Mode's aim is to transpile Java Mode into JS language! :ar!

Your function render() is impossible to study b/c 95% of its variables aren't local (only iterator i!)
and we've got no idea where they come from nor their datatype! (~~)

And this line here puzzles me: sphereScreen = particles.get(i).render(sphereScreen);.
Why are you re-assigning sphereScreen a buncha times inside a loop? :-??

abdullah

Does your sketch work in Java Mode?

It works perfectly in Java mode. :)>-

And this line here puzzles me: sphereScreen = particles.get(i).render(sphereScreen);

The idea here is that sphereScreen (a PGraphics) is passed to a number of particles which then draw themselves on it. So there is one common screen with a lot of particles drawn on it.

And to make the render() method more understandable, here is the Sphere_ class:

class Sphere_
{
  ArrayList<Particle> particles;
  int NUM_OF_PARTICLES = 150;
  float MAX_NEIGHBOR_DIST = 40;
  float sphereDiameter, MEAN_SPHERE_DIAMETER;
  boolean lockDiameter;
  color particle_color;
  float xPos, yPos;
  PGraphics sphereScreen;

  Sphere_( float x, float y, float diam, color p_col )
  {
    xPos = x;
    yPos = y;
    MEAN_SPHERE_DIAMETER = diam;
    particle_color = p_col;

    particles = new ArrayList<Particle>();
    for ( int i=0; i<NUM_OF_PARTICLES; i++ )
    {
      particles.add( new Particle( particle_color, MEAN_SPHERE_DIAMETER) );
    }

    sphereScreen = createGraphics(300, 300, P3D);

    lockDiameter = false;
  }


  PGraphics render()
  {
    if (!lockDiameter)
      sphereDiameter = map( particles.size(), 0, 2*NUM_OF_PARTICLES, 0.75*MEAN_SPHERE_DIAMETER, 1.25*MEAN_SPHERE_DIAMETER );
    else
      sphereDiameter = MEAN_SPHERE_DIAMETER;

    sphereScreen.beginDraw();
    //sphereScreen.clear();
    sphereScreen.background(0,0);
    sphereScreen.pushMatrix();

    sphereScreen.translate(sphereScreen.width/2, sphereScreen.height/2);

    for ( int i=0; i<particles.size (); i++ )
    {
      particles.get(i).update(sphereDiameter);    
      setNeighbors( particles.get(i) ); 
      sphereScreen = particles.get(i).render(sphereScreen);
    }

    sphereScreen.popMatrix();
    sphereScreen.endDraw();

    return sphereScreen;
  }


  void setNeighbors( Particle thisParticle )
  {
    int neighbors = 0;

    float thisX = thisParticle.x;
    float thisY = thisParticle.y;
    float thisZ = thisParticle.z;

    thisParticle.neighbors.clear();

    for ( int i=0; i<particles.size () && neighbors<thisParticle.max_neighbors; i++ )
    {
      float dX = particles.get(i).x - thisParticle.x;
      float dY = particles.get(i).y - thisParticle.y;
      float dZ = particles.get(i).z - thisParticle.z;

      if ( sqrt( dX*dX + dY*dY + dZ*dZ ) < MAX_NEIGHBOR_DIST )
      {
        thisParticle.neighbors.add( particles.get(i) );
        neighbors++;
      }
    }
  }
}; 

GoToLoop

... so that it worked on Processing 1.5 (at terrible frame rate i should add)...

In Processing 1.x.x, renderer P3D is software-based and doesn't use OpenGL!
In order to get hardware accel., we gotta import processing.opengl.*; and choose OPENGL for size()!

... has an example with a PGraphics object passed to an image() function...

Class PImage is the base for many other graphics classes, including PGraphics, Movie, etc. ;)

GoToLoop

I'm afraid that I can't debug your big sketch. There are many places which can go wrong there! :-S
For starters, files, especially images, should be preloaded using `/* @pjs preload=""; */

• http://processingjs.org/reference/pjs directive/
• http://processingjs.org/reference/preload/
• http://processingjs.org/reference/font/

Also, don't specify "/data/" subfolder. Just use raw files' names: attMeter = loadImage("attMeter.png");

In short, you should get a little more experience converting Java Mode to JS Mode.
Dealing w/ files in JS isn't as easy as an offline programing language! (~~)