处理：分屏=1canvas？

Question

我正在处理 7680x1080 投影的可视化。

制作公司要我将其输出为 3840x2160。

我如何在 Processing 中执行此操作，以便 Processing 仍然将其视为 1 个大 canvas 并且我可以在整个宽度上拥有无缝图形？

谢谢！哔叽

Answer 1

加工已经是一大canvas。您可以控制绘制的内容和绘制位置。

您可以只跟踪您的视口大小和位置，然后将绘图拆分为函数：

float viewportTwoX;
float viewportTwoY;

float viewportWidth;
float viewportHeight;

void setup() {
  size(768, 108);
  viewportTwoX = width/2;
  viewportTwoY = 0;
  viewportWidth = width/2;
  viewportHeight = height;
}

void draw() {
  background(0);
  drawViewportOne();
  drawViewportTwo();
}

void drawViewportOne() {
  fill(64);
  noStroke();
  rect(0, 0, viewportWidth, viewportHeight);
  fill(255);
  text("viewport 1", viewportWidth/2, viewportHeight/2);
}

void drawViewportTwo() {
  translate(viewportTwoX, viewportTwoY); 

  fill(128);
  noStroke();
  rect(0, 0, viewportWidth, viewportHeight);
  fill(255);
  text("viewport 2", viewportWidth/2, viewportHeight/2);
}

那么如果你想改变第二个视口的位置，你只需要改变那些变量的值：

void setup() {
  size(384, 216);
  viewportTwoX = 0;
  viewportTwoY = height/2;
  viewportWidth = width;
  viewportHeight = height/2;
}

Answer 2

在处理中绘图是在 PGraphics 和 PImage 对象中完成的（在此处了解更多信息：https://processing.org/reference/PImage.html）

然后您可以读取您放入 PGraphics 中的像素 canvas 并将它们拆分为 2 个 PImage 对象

示例：

int w = 500;
int h = 500;
PImage topCanvas;
PImage bottomCanvas;
PGraphics mainCanvas;

void setup() {
  background(255);
  size(w, h, P3D);
  mainCanvas = createGraphics(w, h, P2D);

  mainCanvas.beginDraw();
  for(int i=0; i<w; i++){
     for(int j=0; j<h; j++){
        mainCanvas.stroke( random(255), random(255), random(255), random(255)); 
        mainCanvas.point(i, j); 
     } 
  }
  mainCanvas.endDraw();
} 

void draw(){

  topCanvas = mainCanvas.get(0,0,w, h/2);
  bottomCanvas = mainCanvas.get(0,h/2,w, h/2);

  image(topCanvas, 0, 0);
  image(bottomCanvas, 0, h/2);

}

处理：分屏=1canvas？

Processing: Split screen = 1 canvas?

split

screen

processing