在 Processing 中为单个草图创建多个窗口

Question

如何在 Processing 中为一个草图创建多个窗口？

实际上，我想在一个窗口中检测和跟踪特定颜色（通过网络摄像头），并将检测到的坐标显示为另一个窗口中的一个点。直到现在我能够在检测的同一窗口中显示这些点它。但我想把它分成两个不同的窗口。

Answer 1

您需要创建一个新框架和一个新的 PApplet...这是一个示例草图：

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

一种选择可能是创建一个两倍于原始窗口大小的草图，并将检测到的坐标偏移草图大小的一半。

这是一个非常粗略的代码 sn-p（假设 blob 将是检测到的颜色 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);
}

说实话，覆盖跟踪信息可能更容易。例如，如果您正在进行颜色跟踪，只需显示跟踪区域的边界框的轮廓即可。

如果你真的想显示另一个窗口，你可以使用JPanel。 查看this answer 以获取运行代码示例。

Answer 3

我建议使用G4P，这是一个用于处理的 GUI 库，它内置了一些用于处理多个窗口的功能。我以前用过这个网络摄像头，效果很好。它带有一个GWindow 对象，可以轻松生成一个窗口。网站上有一个short tutorial 解释了基础知识。

我已经包含了一些旧代码，这些代码将向您展示基本思想。代码中发生的事情是我制作了两个 GWindows，并分别向它们发送一个 PImage 以显示：一个获取网络摄像头图像，另一个获取受影响的图像。这样做的方法是扩充 GWinData 对象，使其也包含您想要传递给窗口的数据。我没有为每个窗口制作一个特定的对象，而是制作了一个包含两个 PImage 的对象。每个 GWindow 都有自己的绘制循环（在示例的底部），它从被覆盖的 GWinData 对象加载 PImage 并显示它。在主绘制循环中，我读取网络摄像头，然后对其进行处理以创建两个图像，然后将它们存储到 GWinData 对象中。

希望这能给您足够的入门知识。

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