如何在Processing3.2.1 3.2.1中翻转FaceOSC

Question

我对这个过程是个新手，现在正在尝试使用FaceOSC。一切都已经完成了，但是当所有东西都不是镜像时，很难玩我做的游戏。因此，我想翻转FaceOSC发送给processing以创建视频的数据。

我不确定是不是FaceOSC发送了视频，因为我试过像视频一样翻转，但它不起作用。我也像一个图像一样翻转，画布，但仍然不能工作。或许是我做错了。请帮帮我！

//XXXXXXX//这是我的部分代码。

import oscP5.*;
 import codeanticode.syphon.*;

 OscP5 oscP5;
SyphonClient client;

PGraphics canvas;

boolean found;
PVector[] meshPoints;

void setup() {
size(640, 480, P3D);
frameRate(30);
initMesh();

oscP5 = new OscP5(this, 8338);

// USE THESE 2 EVENTS TO DRAW THE 
 // FULL FACE MESH:
  oscP5.plug(this, "found", "/found");
  oscP5.plug(this, "loadMesh", "/raw");
  // plugin for mouth
  oscP5.plug(this, "mouthWidthReceived", "/gesture/mouth/width");
  oscP5.plug(this, "mouthHeightReceived", "/gesture/mouth/height");
      // initialize the syphon client with the name of the server
  client = new SyphonClient(this, "FaceOSC");
  // prep the PGraphics object to receive the camera image
  canvas = createGraphics(640, 480, P3D);

}

void draw() {  
  background(0);
  stroke(255);
// flip like a vdo here, does not work
     /* pushMatrix(); 
  translate(canvas.width, 0);
  scale(-1,1);
  image(canvas, -canvas.width, 0, width, height);  
  popMatrix(); */

  image(canvas, 0, 0, width, height); 


  if (found) {
    fill(100);
    drawFeature(faceOutline);
    drawFeature(leftEyebrow);
    drawFeature(rightEyebrow);
    drawFeature(nosePart1);   
    drawFeature(nosePart2);           
    drawFeature(leftEye);     
    drawFeature(rightEye);        
    drawFeature(mouthPart1);  
    drawFeature(mouthPart2);  
    drawFeature(mouthPart3);
    drawFeature(mouthPart4);
    drawFeature(mouthPart5);
  }


 }
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
void drawFeature(int[] featurePointList) {
  for (int i = 0; i < featurePointList.length; i++) {
    PVector meshVertex = meshPoints[featurePointList[i]];
    if (i > 0) {
      PVector prevMeshVertex = meshPoints[featurePointList[i-1]];
 line(meshVertex.x, meshVertex.y, prevMeshVertex.x, prevMeshVertex.y);
}
ellipse(meshVertex.x, meshVertex.y, 3, 3);
  }
}
/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
public void found(int i) {
  // println("found: " + i); // 1 == found, 0 == not found
  found = i == 1;
}
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Answer 1

您正在尝试使用的scale()和translate()片段很有意义，但是看起来您在错误的地方使用它。我不确定canvas应该做什么，但我猜面部特征是使用drawFeature()调用绘制的，这是您想要镜像的。如果是这样，您应该将这些调用放在pushMatrix()和popMatrix()调用之间，紧跟在scale()之后。

我会在draw()中尝试如下所示：

void draw() {  
  background(0);
  stroke(255);
  //flip horizontal
  pushMatrix(); 
  translate(width, 0);
  scale(-1,1);


  if (found) {
    fill(100);
    drawFeature(faceOutline);
    drawFeature(leftEyebrow);
    drawFeature(rightEyebrow);
    drawFeature(nosePart1);   
    drawFeature(nosePart2);           
    drawFeature(leftEye);     
    drawFeature(rightEye);        
    drawFeature(mouthPart1);  
    drawFeature(mouthPart2);  
    drawFeature(mouthPart3);
    drawFeature(mouthPart4);
    drawFeature(mouthPart5);
  }

  popMatrix();
 }

push/pop矩阵调用隔离坐标空间。坐标系原点(0，0)是左上角:这就是为什么在缩放x -1之前，所有内容都按宽度平移。因为它不在中心，所以简单的镜像不会将内容留在相同的位置。

有关更多详细信息，请查看Processing Transform2D tutorial

下面是一个基本的例子：

boolean mirror; 

void setup(){
  size(640,480);
}
void draw(){
  if(mirror){
    pushMatrix();
    //translate, otherwise mirrored content will be off screen (pivot is at top left corner not centre)
    translate(width,0);
    //scale x -= 1 mirror
    scale(-1,1);
    //draw mirrored content
    drawStuff();
    popMatrix();
  }else{
    drawStuff();
  }
}
//this could be be the face preview
void drawStuff(){
  background(0);
  triangle(0,0,width,0,0,height);
  text("press m to toggle mirroring",450,470);
}
void keyPressed(){
  if(key == 'm') mirror = !mirror;
}

另一种选择是镜像每个坐标，但在您的情况下，当scale(-1,1)可以做到这一点时，这将是非常困难的。作为参考，要镜像坐标，您只需从最大值中减去当前值：

void setup(){
  size(640,480);
  background(255);
}
void draw(){
  ellipse(mouseX,mouseY,30,30);
  //subtract current value(mouseX in this case) from the largest value it can have (width in this case)
  ellipse(width-mouseX,mouseY,30,30);
}

您可以在此处运行这些示例：

​

var mirror; 

function setup(){
  createCanvas(640,225);
  fill(255);
}
function draw(){
  if(mirror){
    push();
    //translate, otherwise mirrored content will be off screen (pivot is at top left corner not centre)
    translate(width,0);
    //scale x -= 1 mirror
    scale(-1,1);
    //draw mirrored content
    drawStuff();
    pop();
  }else{
    drawStuff();
  }
}
//this could be be the face preview
function drawStuff(){
  background(0);
  triangle(0,0,width,0,0,height);
  text("press m to toggle mirroring",450,470);
}
function keyPressed(){
  if(key == 'M') mirror = !mirror;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>

​

​

function setup(){
  createCanvas(640,225);
  background(0);
  fill(0);
  stroke(255);
}
function draw(){
  ellipse(mouseX,mouseY,30,30);
  //subtract current value(mouseX in this case) from the largest value it can have (width in this case)
  ellipse(width-mouseX,mouseY,30,30);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>

​