javascript - 处理为 P5 — 如何转换？

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

没有办法神奇地将脚本从Processing转换为P5。

阅读this tutorial about Processing transition to p5 .

---

正如 @John Coleman 所说，变量必须使用 var 创建

var sourceImage;
var maskImage;

P5.Graphics 的工作方式几乎与处理中一样。但您不需要 beginDraw 和 endDraw

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

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

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

我们到了!

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