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

Question

如何在加工过程中创建单个草图的多个窗口？

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

Answer 1

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

我已经包含了一些旧的代码，可以向您展示基本的想法。代码中发生的事情是，我制作了两个Gwindow，并分别向它们发送一个PImage来显示：一个获得一个网络摄像头图像，另一个获得一个受影响的图像。这样做的方式是扩充GWinData对象，使其也包含希望传递给windows的数据。我没有为每个窗口制作一个特定的对象，而是制作了一个包含两个PImages的对象。每个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);
}

Answer 2

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

下面是一个非常粗略的代码片段（假设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。看看这个答案，看一个正在运行的代码示例。

Answer 3

你需要创建一个新的框架和一个新的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;
  }
}