Calling drawing commands externally in Processing - user-interface

I am trying to use g4p-controls library in Processing to create a button that executes a drawing command in another window. In this library, a child window is created by the code
GWindow window = GWindow.getWindow(this, "Main", 100, 50, 500, 500, JAVA2D);
where this is the main applet, and the other arguments specify the name, position, and renderer.
GWindow is a subclass of PApplet, so I should feasibly be able to call a drawing command, for example window.background(0);, from anywhere in my code to paint that window black. However, this does not work, and I cannot figure out why. After all, the same code works when I put it in a handler function and add it to the window:
window.addDrawHandler(this, "windowDraw");
where the windowDraw method is
public void windowDraw(PApplet app, GWinData data) {
app.background(0);
}
Looking into the source code, the draw handler method windowDraw is invoked by the GWindow object with the first argument this, which is exactly the object referred to when I attempted window.background(0);. So window should be the object whose background() method is called to paint the canvas black.
If I am misunderstanding something fundamental about event-driven programming, please let me know. It does seem like the handlers take the relevant applet as an argument for a reason, but I really cannot see what's different about invocation inside and outside the handler functions.
Some additional notes: calling window.background(0); works if it's inside the main draw() function. It does not work if it's in the setup() function, and unfortunately for me, it doesn't work if it's in a button handler method:
public void handleButtonEvents(GButton button, GEvent event) {
if (this.button == button) {
if (event == GEvent.PRESSED) {
window.background(0);
}
}
}
Obviously, I have made sure this code actually runs when I press the button.
Even more strangely, if I substitute the above drawing call to window with something like window.strokeWeight(10), the change actually takes place, and subsequent lines in that canvas are drawn thicker. It only fails to actually draw things. I am just at a loss.

In the future, please try to post a MCVE instead of a bunch of disconnected code snippets. Here's an example:
import g4p_controls.*;
GWindow window;
void setup(){
window = GWindow.getWindow(this, "Main", 100, 50, 500, 500, JAVA2D);
}
void draw(){
background(255, 0, 0);
window.ellipse(mouseX, mouseY, 25, 25);
window.draw();
}
void mousePressed(){
window.background(0, 255, 0);
}
I would expect this code to draw circles in the second window, and to draw green in the second window when I press the mouse in the first window. However, it seems to only draw those things very sporadically.
In fact, here's the same type of program, in "pure Processing" without using the G4P library:
SecondApplet sa;
void setup() {
String[] args = {"TwoFrameTest"};
sa = new SecondApplet();
PApplet.runSketch(args, sa);
}
void settings() {
size(200, 200);
}
void draw() {
background(0);
sa.ellipse(mouseX, mouseY, 25, 25);
}
void mousePressed() {
sa.background(255, 0, 0);
}
public class SecondApplet extends PApplet {
public void settings() {
size(200, 200);
}
void draw() {
}
}
I would also expect this to work, but we see a similar gray window for the second sketch. I've filed a bug here to get feedback from the Processing devs about whether this is expected behavior.
In the meantime, you'll have better luck if you do something like this:
SecondApplet sa;
float drawMouseX;
float drawMouseY;
color drawBackground = #0000ff;
void setup() {
String[] args = {"TwoFrameTest"};
sa = new SecondApplet();
PApplet.runSketch(args, sa);
}
void settings() {
size(200, 200);
}
void draw() {
background(0);
drawMouseX = mouseX;
drawMouseY = mouseY;
}
void mousePressed() {
drawBackground = #00ff00;
}
public class SecondApplet extends PApplet {
public void settings() {
size(200, 200);
}
void draw() {
background(drawBackground);
ellipse(drawMouseX, drawMouseY, 25, 25);
}
}
Instead of calling the drawing functions directly, we're now setting some variables that are then used in the second applet's draw() function. There are a bunch of ways to do this, but the idea is the same: just don't call the draw functions directly, and call them from the draw() function instead.
Update: I heard back from Ben Fry (a founder of Processing) and codeanticode (a developer of Processing) on the bug I filed on GitHub, and I understand better now why this doesn't work.
The reason it doesn't work is because each sketch has its own UI thread, which is responsible for drawing and handling events. You can't draw to a sketch from a different thread, otherwise weird things happen. But you're trying to draw to a second sketch from the first sketche's event thread, which is not the second sketch's drawing thread, which is why it doesn't work.
See the bug for a discussion on alternative approaches, but honestly your best bet is probably to go with the approach I outlined of just sharing variables between the sketches.

Related

Processing: running draw cycle into an independent thread

QUESTION
I've noticed that draw() cycle is interrupted by events elaboration.
In the following example the circle animation will stop at mouse click until the elaborating_function() ends.
void setup(){
size(800, 600);
background(#818B95);
frameRate(30);
}
void draw(){
background(#818B95);
//simple animation
fill(0,116,217);
circle(circle_x, 200, 50);
circle_x += animation_speed;
if(circle_x>800){ circle_x = 0; }
}
void mouseClicked() {
elaborating_function();
}
void elaborating_function(){
println("elaboration start");
delay(1000);
println("elaboration end");
}
Of course, a simple solution to run the elaboration without stopping the animation could be to thread("elaborating_function");
But my question is: if it is possible to run the draw cycle into an independent thread instead?
SOLUTION
I've found a possible solution inverting my problem and creating an "independent cycle" parallel to the draw one. Within this cycle is possible to run any function and it will not interfere with the draw execution. Every event triggered by the user needs only to set a specific variable in order to activate (once or more time) the function within the cycle.
int circle_x = 0;
int animation_speed = 5;
boolean call_elaborating_function = false;
void setup(){
size(800, 600);
background(#818B95);
frameRate(30);
IndependentCycle independentCycle = new IndependentCycle();
independentCycle.setFrequency(1);
new Thread(independentCycle).start();
}
void draw(){
background(#818B95);
//simple animation
fill(0,116,217);
circle(circle_x, 200, 50);
circle_x += animation_speed;
if(circle_x>800){ circle_x = 0; }
}
public class IndependentCycle implements Runnable{
private int frequency; //execution per seconds
public IndependentCycle(){
frequency = 0;
}
public void setFrequency(int frequency){
this.frequency = 1000/frequency;
println(this.frequency);
}
public void run(){
while(true){
print(".");
delay(this.frequency);
//DO STUFF HERE
//WITH IF EVENT == ture IN ORDER TO RUN JUST ONCE !!
if(call_elaborating_function){
call_elaborating_function = false;
elaborating_function();
}
}
}
}
void mouseClicked() {
call_elaborating_function = true;
}
void elaborating_function(){
println("elaboration start");
delay(1000);
println("elaboration end");
}
As far as I know Processing has it's own AnimationThread.
Your proposed solution to thread elaborating_function() is great.
You could have a basic class that implements Runnable if you need a bit more control. With this thread running in parallel, Processing's main animation thread should run along side it just fine without pausing rendering.
This options sounds much simpler than trying to mess with Processing's AnimationThread and potentially have to deal with unexpected behaviour.
What is the actual goal you're trying achieve ?

Why does this processing object disappear momentarily after program start?

This program
size(600, 480, P3D);sphere(400);
produces the expected object
but a fraction of a second later, it disappears.
Why does it disappear?
Note: workaround
void setup()
{
size(100, 100, P3D);
}
void draw()
{
sphere(100);
}
EDIT: With Processing on V3.0.2, Windows 64-bit Pro.
The fact that you wrote sphere() just next to size() tells me that you wrote those lines in setup() which is called only once and hence you see the sphere for a split second, for you to see it continuously you need to call sphere() in draw()

Assigning different code to update() of different objects of the same class

Would it be possible to load different code into the update function of different objects of the same class? Ie:
Button button = new Button();
class Button {
// constructor, variables, etc
void update() {
//load code specific to the object
}
}
Could I create a pointer to an external function (ie in a different file)? I know I can't point in java but is there anything similar?
A class is used to define certain behavior. Of course, not all instances of a class have to behave exactly the same (button1 displays red, button2 displays blue, for instance), but it is still the same basic behavior. A button would not act like a tree, and it doesn't make sense to have button1.func() do one thing and button2.func() do something completely different. Having said that, if you want some method of two buttons to do different things, you have two options: either split the behavior into two methods, or (and this is probably what you want) have the buttons contain an indentifier variable and have the method contain a conditional based on that variable. Here's an example:
class Button {
// ID is 1 for green and 2 for blue
int ID;
Button(int id){
ID = id;
}
void update(){
if(ID == 1){ //green
//do something
else if(ID == 2){
//do something else
}
}
}
To answer your question: dynamic code loading (eg from a text file) is a bad idea for lots of reasons. First, it's not clear what the code would do if you read over it (you'd have to go look at another file to find out), and second, it would be a huge security flaw because someone could replace your text file with something malicious and you'd have uncontrolled code execution.
Sample interface code
Button r = new RedButt(); // note Buton = new RedButt...
Button b = new BlueButt();
Button[] buttons = new Button[2];
void setup(){
size(200,200);
buttons[0] = r;
buttons[1] = b;
for(Button b : buttons){
b.display();
}
}
interface Button{
void display();
}
class RedButt implements Button{
RedButt(){
}
void display(){
fill(255,0,0);
ellipse(random(25, width-25), random(25, height -25), 50, 50);
}
}
class BlueButt implements Button{
BlueButt(){
}
void display(){
fill(0, 0, 255);
ellipse(random(25, width-25), random(25, height -25), 50, 50);
}
}

Create more than one window of a single sketch in Processing

How to create more than one window of a single sketch in Processing?
Actually I want to detect and track a particular color (through webcam) in one window and display the detected co-ordinates as a point in another window.Till now I'm able to display the points in the same window where detecting it.But I want to split it into two different windows.
You need to create a new frame and a new PApplet... here's a sample sketch:
import javax.swing.*;
SecondApplet s;
void setup() {
size(640, 480);
PFrame f = new PFrame(width, height);
frame.setTitle("first window");
f.setTitle("second window");
fill(0);
}
void draw() {
background(255);
ellipse(mouseX, mouseY, 10, 10);
s.setGhostCursor(mouseX, mouseY);
}
public class PFrame extends JFrame {
public PFrame(int width, int height) {
setBounds(100, 100, width, height);
s = new SecondApplet();
add(s);
s.init();
show();
}
}
public class SecondApplet extends PApplet {
int ghostX, ghostY;
public void setup() {
background(0);
noStroke();
}
public void draw() {
background(50);
fill(255);
ellipse(mouseX, mouseY, 10, 10);
fill(0);
ellipse(ghostX, ghostY, 10, 10);
}
public void setGhostCursor(int ghostX, int ghostY) {
this.ghostX = ghostX;
this.ghostY = ghostY;
}
}
One option might be to create a sketch twice the size of your original window and just offset the detected coordinates by half the sketch's size.
Here's a very rough code snippet (assumming blob will be a detected color blob):
int camWidth = 320;
int camHeight = 240;
Capture cam;
void setup(){
size(camWidth * 2,camHeight);
//init cam/opencv/etc.
}
void draw(){
//update cam and get data
image(cam,0,0);
//draw
rect(camWidth+blob.x,blob.y,blob.width,blob.height);
}
To be honest, it might be easier to overlay the tracked information. For example, if you're doing color tracking, just display the outlines of the bounding box of the tracked area.
If you really really want to display another window, you can use a JPanel.
Have a look at this answer for a running code example.
I would recommend using G4P, a GUI library for Processing that has some functionality built in for handling multiple windows. I have used this before with a webcam and it worked well. It comes with a GWindow object that will spawn a window easily. There is a short tutorial on the website that explains the basics.
I've included some old code that I have that will show you the basic idea. What is happening in the code is that I make two GWindows and send them each a PImage to display: one gets a webcam image and the other an effected image. The way you do this is to augment the GWinData object to also include the data you would like to pass to the windows. Instead of making one specific object for each window I just made one object with the two PImages in it. Each GWindow gets its own draw loop (at the bottom of the example) where it loads the PImage from the overridden GWinData object and displays it. In the main draw loop I read the webcam and then process it to create the two images and then store them into the GWinData object.
Hopefully that gives you enough to get started.
import guicomponents.*;
import processing.video.*;
private GWindow window;
private GWindow window2;
Capture video;
PImage sorted;
PImage imgdif; // image with pixel thresholding
MyWinData data;
void setup(){
size(640, 480,P2D); // Change size to 320 x 240 if too slow at 640 x 480
// Uses the default video input, see the reference if this causes an error
video = new Capture(this, 640, 480, 24);
numPixels = video.width * video.height;
data = new MyWinData();
window = new GWindow(this, "TEST", 0,0, 640,480, true, P2D);
window.isAlwaysOnTop();
window.addData(data);
window.addDrawHandler(this, "Window1draw");
window2 = new GWindow(this, "TEST", 640,0 , 640,480, true, P2D);
window2.isAlwaysOnTop();
window2.addData(data);
window2.addDrawHandler(this, "Window2draw");
loadColors("64rev.csv");
colorlength = mycolors.length;
distances = new float[colorlength];
noCursor();
}
void draw()
{
if (video.available())
{
background(0);
video.read();
image(video,0,0);
loadPixels();
imgdif = get(); // clones the last image drawn to the screen v1.1
sorted = get();
/// Removed a lot of code here that did the processing
// hand data to our data class to pass to other windows
data.sortedimage = sorted;
data.difimage = imgdif;
}
}
class MyWinData extends GWinData {
public PImage sortedimage;
public PImage difimage;
MyWinData(){
sortedimage = createImage(640,480,RGB);
difimage = createImage(640,480,RGB);
}
}
public void Window1draw(GWinApplet a, GWinData d){
MyWinData data = (MyWinData) d;
a.image(data.sortedimage, 0,0);
}
public void Window2draw(GWinApplet a, GWinData d){
MyWinData data = (MyWinData) d;
a.image(data.difimage,0,0);
}

Can mousePressed be defined within a class?

I am trying to create a class called InputManager to handle mouse events. This requires that mousePressed be contained within the InputManager class.
like so
class InputManager{
void mousePressed(){
print(hit);
}
}
problem is, that doesn't work. mousePressed() only seems to work when it's outside the class.
How can I get these functions nicely contained in a class?
Try this:
in main sketch:
InputManager im;
void setup() {
im = new InputManager(this);
registerMethod("mouseEvent", im);
}
in InputManager Class:
class InputManager {
void mousePressed(MouseEvent e) {
// mousepressed handling code here...
}
void mouseEvent(MouseEvent e) {
switch(e.getAction()) {
case (MouseEvent.PRESS) :
mousePressed();
break;
case (MouseEvent.CLICK) :
mouseClicked();
break;
// other mouse events cases here...
}
}
}
Once you registered InputManger mouseEvent in PApplet you don't need to call it and it will be called each loop at the end of draw().
Most certainly, but you are responsible for ensuring it gets called:
interface P5EventClass {
void mousePressed();
void mouseMoved();
// ...
}
class InputManager implements P5EventClass {
// we MUST implement mousePressed, and any other interface method
void mousePressed() {
// do things here
}
}
// we're going to hand off all events to things in this list
ArrayList<P5EventClass> eventlisteners = new ArrayList<P5EventClass>();
void setup() {
// bind at least one input manager, but maybe more later on.
eventlisteners.add(new InputManager());
}
void draw() {
// ...
}
void mousePressed() {
// instead of handling input globally, we let
// the event handling obejct(s) take care of it
for(P5EventClass p5ec: eventlisteners) {
p5ec.mousePressed();
}
}
I would personally make it a bit tighter by also passing the event variables explicitly, so "void mousePressed(int x, int y);" in the interface and then calling "p5ec.mousePressed(mouseX, mouseY);" in the sketch body, simply because relying on globals rather than local variables makes your code prone to concurrency bugs.
The easiest way to do so would be:
class InputManager{
void mousePressed(){
print(hit);
}
}
InputManager im = new InputManager();
void setup() {
// ...
}
void draw() {
// ...
}
void mousePressed() {
im.mousePressed();
}
This should solve any problems you were having with variable scoping in your class.
Note: In the class, it doesn't even have to be named mousePressed, you can name it anything you wish, as long as you call it inside of the main mousePressed method.

Resources