Create several windows of one sketch in the Processing section

Question

How to create more than one window of one sketch in the Processing section?

In fact, I want to detect and track a specific color (through a webcam) in one window and display the detected coordinates as a point in another window. Now I can display the points in the same window where it is detected. But I want to split it into two different windows.

Answer 1

You need to create a new frame and a new PApplet ... here is 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; } } 

Answer 2

One option would be to create a sketch twice the size of the original window and simply shift the detected coordinates to half the size of the sketch.

Here's a very crude code snippet (adding blob will be the 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); } 

Honestly, it would be easier to overlay tracked information. For example, if you are doing color tracking, simply display the outline of the bounding box of the tracked area.

If you really want to display another window, you can use JPanel . See this answer for an example with running code.

Answer 3

I would recommend using G4P , a graphics library for processing, which has some functionality built-in to handle multiple windows. I used this before with a webcam and it worked well. It comes with a GWindow object that will easily open a window. The basics website has a short tutorial .

I have included some old code that I have that will show you the main idea. What happens in the code is that I make two GWindows and send them each displayed PImage: one receives a webcam image and the other receives an image. The way you do this is to increment the GWinData object to also include the data that you would like to pass to the windows. Instead of creating one specific object for each window, I just created one object with two PImages. Each GWindow gets its own drawing cycle (at the bottom of the example), where it loads a PImage from an overridden GWinData object and displays it. In the basic drawing scheme, I read the webcam and then processed it to create two images and then save them to a GWinData object.

Hope this 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); }