non-updating objects in front of updating background?

amcccccc

non-updating objects in front of updating background?

in Contributed Library Questions • 8 months ago

Hi, I'm trying to make the ability to doodle in front of a constantly updating SimpleOpenNi camera feed. The fact that the feed needs to update every loop has me stumped, as I need to have the miniature ellipses successively created by the drawing function stay visible, instead of being overridden by the feed's next frame. I tried putting the draw function in its own void loop and calling it first thing in void draw, didn't work.

I also tried using this Layers library, but for some reason it doesn't work when combined with the SimpleOpenNi library in one sketch. It leaves the whole applet window white, except for a top-left 100*100 square portion which functions properly. Both libraries and all the code I'm using with them work individually, but just not together for some weird reason...

I don't expect to be able to solve this problem myself, as it seems like an issue with the source code, or that they're simply incompatible with each other, so I'm wondering if anyone else knows of any other options to achieve this? Any tips/ideas would be awesome.

This is my main sketch:

/OPENNI
import SimpleOpenNI.*;
SimpleOpenNI context;
//LAYERS
import com.nootropic.processing.layers.*;
AppletLayers layers;
void setup() {
//LAYERS
layers = new AppletLayers(this);
drawing m = new drawing(this);
layers.addLayer(m);
//CAM PARAMS
// instantiate a new context
context = new SimpleOpenNI(this);
// enable depth image generation
context.enableDepth();
// context.enableRGB(640,480,30);
// create a window the size of the depth information
size(context.depthWidth(), context.depthHeight());
// size(context.rgbWidth(),context.rgbHeight());
//DRAW PARAMS
// size(displayWidth,displayHeight);
fill(0, 0, 255);
noStroke();
smooth();
noCursor();
frameRate(50);
background(0);
}
//THIS VOID PAINT IS NECESSARY FOR THE LAYERS LIBRARY TO WORK PROPERLY
void paint(java.awt.Graphics g) {
// This method MUST be present in your sketch for layers to be rendered!
if (layers != null) {
layers.paint(this);
} else {
super.paint(g);
}
}
void draw() {
//CAM
// update the camera
context.update();
// draw depth image
image(context.depthImage(), 0, 0);
}

and the class:

class drawing extends Layer {
drawing(PApplet parent) {
super(parent); // This is necessary!
}
void draw() {
fill(0, 0, 255);
noStroke();
smooth();
noCursor();
// frameRate(50);
// background(0, 0); // clear the background every time, but be transparent
//DRAW
ellipse(mouseX, mouseY, 10, 10);
if (mousePressed == true) {
ellipse(mouseX, mouseY, 10, 10);
}
}
}

I have checked the libraries' forums already, figured this would be the best place to post.

Also, a kinect is needed to run the sketch properly, but if anyone can find a problem in the code anyway, that'd be amazing. Thanks in advance

Replies(7)

asimes

Re: non-updating objects in front of updating background?

8 months ago

I don't use that library, so I didn't look into the code too much, but the general solution to this is saving the information about the shapes in an ArrayList. If just the position of your ellipse()s / doodles is important, then you will need two ArrayLists for the (x, y) coordinates (if things like size, color, etc are important you'll need to store that too).

Instead of drawing an ellipse when the mouse is pressed you would do something like this:

x.add(mouseX);
y.add(mouseY);

Then in the draw loop you would loop through all the ellipse()s and draw them all every frame.

asimes

Re: non-updating objects in front of updating background?

8 months ago

Here is an example:

ArrayList<Integer> x = new ArrayList<Integer>();
ArrayList<Integer> y = new ArrayList<Integer>();
float count = 0;
void setup() {
size(600, 600);
}
void draw() {
// Example of changing background
background((sin(count)+1)*127,
(sin(count+PI/3)+1)*127,
(sin(count+TWO_PI/3)+1)*127);
count += TWO_PI/500;
// All doodles
for (int i = 0; i < x.size(); i++) ellipse(x.get(i), y.get(i), 10, 10);
}
void mousePressed() {
x.add(mouseX);
y.add(mouseY);
}

amcccccc

Re: non-updating objects in front of updating background?

8 months ago

Wow perfect, thanks! Wasn't expecting the code to be done for me

. I just replaced void mousePressed with mouseDragged to have the ellipses continuously generate while the mouse button is pushed down. One question though, what's <integer> at the initializing line of the array lists? Never seen that before and my code works without it.

asimes

Re: non-updating objects in front of updating background?

8 months ago

An ArrayList can hold different types of data, if you want one to store ints, then you write Integer there. I would leave the type declaration there (even if it works without it) because there are cases where omitting it can cause problems.

PhiLho

Re: non-updating objects in front of updating background?

8 months ago

I would use only one ArrayList, of PVector, it is more efficient.
Alternatively, you can just do the drawing on a separate PGraphics...

asimes

Re: non-updating objects in front of updating background?

8 months ago

This is true, if you are familiar with PVector, a PVector ArrayList would be better.

amcccccc

Re: non-updating objects in front of updating background?

7 months ago

Are you guys sure that an ArrayList of PVector can keep objects in front of the updating background? I already know an ArrayList can do it, but I can't for the life of me figure out how to apply PVectors to one ArrayList and keep the background from updating in front of them instantly. Here's an example sketch:

//DECLARE
ArrayList drawCollection = new ArrayList();
boolean doOnce = false; //so that mousePressed only runs once (generating only one draw ball)
PVector v1, v2;
void setup() {
size(600, 600);
smooth();
Draw myDraw = new Draw(200, 200);
drawCollection.add(myDraw);
}
void draw() {
//background(0);
noStroke();
v1 = new PVector(mouseX, mouseY);
if (mousePressed == true && doOnce == false) {
drawCollection.add(v1);
Draw myDraw = (Draw) drawCollection.get(0);
myDraw.run();
doOnce = true;
}
if (mousePressed == false) {
doOnce = false;
}
println(drawCollection.size());
}
//CLASS
class Draw {
// GLOBAL VARIABLES
float x = 0;
float y = 0;
float speedX = 2;
float speedY = .5;
//CONSRUCTOR
Draw(float _x, float _y) {
x = _x;
y = _y;
}
//FUNCTIONS
void run() {
display();
move();
gravity();
}
void gravity() {
speedY += 0.2;
}
void move() {
x += speedX;
y += speedY;
}
void display() {
ellipse(mouseX, mouseY, 20, 20);
}
}

So the problem is that I need to initialize " v1 = new PVector(mouseX, mouseY);" in the draw loop because mouseX and mouseY need to be updated to the current mouse position at the time of mousePressed. And so I have to " drawCollection.add(v1);" in the mousePressed loop in the draw loop instead of in the setup, which I think is the source of why the draw won't update each go around. How were either of you assuming it would be done?

And if you're feeling extra helpful, I'm having another problem that the move() and gravity() in my draw class aren't taking effect.

Thanks for any tips

Oh, and yes I do need to incorporate PVectors into my ArrayList even though just two arrayLists worked fine, because it will allow me to have the drawing (the balls) to interact with the Kinect skeleton.

Top Reply