Question

我正在尝试将以下草图转换为P5.js.不幸的是，我收到了包括PGraphics, beginDraw() and endDraw()在内的几种语法的错误。我的问题是：

将Processing转换为P5的最佳方法是什么，反之亦然？而且，这些有问题的语法的P5.js替换是什么？

PGraphics sourceImage;
PGraphics maskImage;

function setup() {
  createCanvas(512, 512);

  // create source
  sourceImage = createGraphics(512,512);
  sourceImage.beginDraw();
  sourceImage.fill(255,0,0);
  sourceImage.translate(width/2,height/2);
  sourceImage.rotate(PI/3);
  sourceImage.rect(0,0,100,500);
  sourceImage.endDraw();

  // create mask
  maskImage = createGraphics(512,512);
  maskImage.beginDraw();
  maskImage.triangle(30, 480, 256, 30, 480, 480);
  maskImage.endDraw();

  // apply mask
  sourceImage.mask(maskImage);
}

function draw() {
  // show masked source
  image(sourceImage, 0, 0);
}

Answer 1

无法将脚本从处理神奇地转换为P5。

阅读this tutorial about Processing transition to p5。

正如@John Coleman所说，必须使用for (auto i = cbegin(arry); i != cend(arry); i++)

创建变量

var

P5.Graphics的工作方式与Processing类似。但是，您不需要var sourceImage; var maskImage;和beginDraw

endDraw

此外，面具不适用于图形。在P5中，这仅适用于图像。没有简单的方法将图形转换为图像。所以，我写了一个函数。

function setup() {
  createCanvas(512, 512);

  // create source
  sourceImage = createGraphics(512,512);
  sourceImage.fill(255,0,0);
  sourceImage.translate(width/2,height/2);
  sourceImage.rotate(PI/3);
  sourceImage.rect(0,0,100,500);

  // create mask
  maskImage = createGraphics(512,512);
  maskImage.fill(0, 0, 0);
  maskImage.triangle(30, 480, 256, 30, 480, 480);

我们有！

  // apply mask
  sourceImage = graphicToImage(sourceImage);
  maskImage = graphicToImage(maskImage);
  sourceImage.mask(maskImage)
}

function graphicToImage(graphic){
  // create an image with the same size.
  img = createImage(graphic.width, graphic.height);
  // load graphic and img pixels into pixels array
  graphic.loadPixels();
  img.loadPixels();

  // copy pixels from graphic to img
  for (var i = 0; i < img.pixels.length; i++) {
    img.pixels[i] = graphic.pixels[i];
  }
  // update img's pixels from pixels array
  img.updatePixels();

  // return copied image
  return img;
}

Answer 2

Cdrom's answer已经非常出色，但我会添加一条建议：你不应该尝试将代码从一种语言转换为另一种语言。相反，你应该退后一步，用英语写下原始程序正在做的事情。

Break the program down into smaller steps并用英语写出每个步骤。如果您已经写下来，那么您可以使用目标语言实现算法。

在您的情况下，您的算法可能如下所示：

创建源缓冲图形。
将场景绘制到缓冲图形。（这可以进一步细分为更小的步骤。）
创建蒙版图形。
在面具图形上绘制一个三角形。
使用蒙版图形掩盖源缓冲区图形。

然后你可以采取这些单独的步骤并使用P5.js实现它们。将每一个打破成更小的步骤，你可以开始谷歌搜索，并从那里开始。然后，如果你遇到困难，你可以发布MCVE只是你坚持的步骤。但真正的教训是，你应该不逐行翻译代码。祝你好运。

处理到P5 - 如何转换？

2 个答案: