p5.js 和 Processing 的恩怨情仇

最新推荐文章于 2024-07-17 16:03:18 发布

升卿

最新推荐文章于 2024-07-17 16:03:18 发布

阅读量9.5k

点赞数 4

Thinking In Processing 同时被 2 个专栏收录

21 篇文章 24 订阅

订阅专栏

Thinking In p5.js

5 篇文章 1 订阅

订阅专栏

序卷

p5.js 看起来与 Processing 非常相似，但有一些变化：

因为 size() 已经被 createCanvas() 代替，所以我们的草图不仅仅是画布，还能创建其他元素。
frameRate(num) 设置帧速率，但该 frameRate 变量已被删除。要获取当前帧速率，请用 frameRate() 不带参数调用。
JavaScript 并不总能同步加载，下面有几个方法可解决这个问题：
① 所有的加载方法都有一个可选的回调参数。也就是在文件加载完后调用的函数。
② 另外，我们可以将加载调用放在 preload() 函数中，其发生在 setup() 之前。如果存在 preload() 函数，则 setup() 函数会等待，直到加载完所有内容为止，请参阅此图像示例。
变量 mousePressed 已替换成 mouseIsPressed 。
除鼠标事件外，还有触摸事件，映射如下所示：
① mouseX 〜 touchX
② mouseY 〜 touchY
③ mousePressed() 〜 touchStarted()
④ mouseDragged() 〜 touchMoved()
⑤ mouseReleased() 〜 touchEnded()
⑥ 有一个 touches[] 数组包含一系列对象，其中 x 和 y 属性对应于每个手指的位置。
push/popMatrix() 、push/popStyle() 已替换为 push() 和 pop() ，这相当于同时调用 matrix 和 style 方法。
默认情况下，所有内容都处于全局命名空间中，并且你可以像在 Processing 中一样创建草图。我们称之为 “instance mode” ，用于创建一个 p5 草图，其可与你网页上运行的其他代码一起播放。请参阅实例模式示例以及全局与实例模式教程。
在全局模式下，p5 变量和函数名不可用于 setup()，draw()，mousePressed()，等之外（除非它们被放置在由这些方法之一调用的函数内）。这意味着如果你想使用 p5 函数，当在 setup() 之前声明变量时，你需要在 setup() 里面赋值。例如：
函数 println() 在 p5.js 中不可用。而使用 print() 或 console.log() 代替。
WEBGL模式的原点（0,0,0）位于画布的中心，而不是左上角。
Processing 并非所有内容都在 p5.js 中实现，但我们正在努力！现在没有PShape 的等价物。p5.js 中的相机模型还非常基本，只有眼睛的位置，没有“看”或轴的方向。

前因

在 JavaScript 中，变量没有类型。使用 var 而不是 float、int、double、long、char、String、Array 等。我们不需要为函数指定返回类型或参数类型。
var 可以是任何东西——任何提到的类型，也可以是函数。
数组的构造非常简单（不再需要 Processing 中的 ArrayList）并且具有许多内置功能，请参阅数组示例以及更多关于 JS 数组的信息。
JavaScript 使用称为原型的东西来形成类似于 Java 类对象的东西。在这里看到这个对象的例子和更多关于 JS 对象。

风云

基本草图

这是 Processing 和 p5.js 草图的基本设置。请注意，p5.js 还需要一个空的 HTML 文件，该文件链接到标题中的 p5.js 库和草图文件。

void setup() {
  // setup stuff
}

void draw() {
  // draw stuff
}

function setup() {
  // setup stuff
}

function draw() {
  // draw stuff
}

Processing 转换 p5.js

以下是已从 Processing 转换为 p5.js 的两个示例。所做的更改显示在注释中，其他行保持不变。

/**
 * This example can be found in the Processing examples package
 * that comes with the Processing PDE.
 * Processing > Examples > Basics > Form > Bezier
 * Adapted by Evelyn Eastmond
 */

function setup() {           // **change** void setup() to function setup()
  createCanvas(640, 360);    // **change** size() to createCanvas()
  stroke(255);               // stroke() is the same
  noFill();                  // noFill() is the same
}

function draw() {                         // **change** void draw() to function draw()
  background(0);                          // background() is the same
  for (var i = 0; i < 200; i += 20) {     // **change** int i to var i
    bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0)); // bezier() is the same
  }
}

/**
 * This example can be found in the Processing examples package
 * that comes with the Processing PDE.
 * Processing > Examples > Topics > Interaction > Follow3
 * Adapted by Evelyn Eastmond
 */

var x = new Array(20);  // **change** float[] x = new float[20] to new Array(20)
var y = new Array(20);  // **change** float[] y = new float[20] to new Array(20)
var segLength = 18;                                 // **change** float to var

function setup() {                          // **change** void setup() to function setup()
  createCanvas(640, 360);                   // **change** size() to createCanvas()
  strokeWeight(9);                          // strokeWeight() is the same
  stroke(255, 100);                         // stroke() is the same
  for(var i=0; i<x.length; i++) {         // initialize the array
    x[i]=0;
    y[i]=0;
  }
}

function draw() {                           // **change** void draw() to function draw()
  background(0);                            // background() is the same
  drawSegment(0, mouseX, mouseY);           // functions calls, mouseX and mouseY are the same
  for(var i=0; i<x.length-1; i++) {         // **change** int i to var i
    drawSegment(i+1, x[i], y[i]);           // function calls are the same
  }
}

function drawSegment(i, xin, yin) {         // **change** void drawSegment() to function drawSegment(), remove type declarations
  var dx = xin - x[i];                      // **change** float to var
  var dy = yin - y[i];                      // **change** float to var
  var angle = atan2(dy, dx);                // **change** float to var, atan2() is the same
  x[i] = xin - cos(angle) * segLength;      // cos() is the same
  y[i] = yin - sin(angle) * segLength;      // sin() is the same
  segment(x[i], y[i], angle);               // function calls are the same
}

function segment(x, y, a) {                 // **change** void segment() to function segment(), remove type declarations
  push();                                   // pushMatrix() becomes push()
  translate(x, y);                          // translate() is the same
  rotate(a);                                // rotate() is the same
  line(0, 0, segLength, 0);                 // line() is the same
  pop();                                    // popMatrix() becomes pop()
}

p5.js 转换 Processing

以下是已从 p5.js 转换为 Processing 的两个示例。所做的更改显示在注释中，其他行保持不变。

/**
 * This example can be found in the Processing examples package
 * that comes with the Processing PDE.
 * Processing > Examples > Basics > Form > Bezier
 */

void setup() {                         // **change** function setup() to void setup()
  size(640, 360);                      // **change** createCanvas() to size()
  stroke(255);
  noFill();
}

void draw() {                          // **change** function draw() to void draw()
  background(0);
  for (int i = 0; i < 200; i += 20) {  // **change** var i to int i
    bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0));
  }
}

/**
 * This example can be found in the Processing examples package
 * that comes with the Processing PDE.
 * Processing > Examples > Topics > Interaction > Follow3
 * Based on code from Keith Peters. 
 */

float[] x = new float[20];                       // **change** array of 0's to be float[] x = new float[20]
float[] y = new float[20];                       // **change** array of 0's to be float[] x = new float[20]
float segLength = 18;                            // **change** var to float

void setup() {                                   // **change** function setup() to void setup() 
  size(640, 360);                                // **change** createCanvas() to size()
  strokeWeight(9);
  stroke(255, 100);
}

void draw() {                                    // **change** function draw() void draw()
  background(0);
  dragSegment(0, mouseX, mouseY);
  for(int i=0; i<x.length-1; i++) {              // **change** var i to int i
    dragSegment(i+1, x[i], y[i]);
  }
}

void dragSegment(int i, float xin, float yin) {  // **change** function drawSegment() to void drawSegment(). add type declarations.
  float dx = xin - x[i];                         // **change** var to float
  float dy = yin - y[i];                         // **change** var to float
  float angle = atan2(dy, dx);                   // **change** var to float
  x[i] = xin - cos(angle) * segLength;
  y[i] = yin - sin(angle) * segLength;
  segment(x[i], y[i], angle);
}

void segment(float x, float y, float a) {        // **change** function segment() to void segment(). add type declarations.
  pushMatrix();
  translate(x, y);
  rotate(a);
  line(0, 0, segLength, 0);
  popMatrix();
}

事实

在 p5.js 中，所有变量（无论它们是数字、字符串、数组、函数、对象，还是什么）都使用符号 “var” 声明。在 Processing 中，您必须指定变量类型。
例如，不是：

boolean button = false;

而是：

var button = false;

或，不是:

float x = 100.3;

而是：

var x = 100.3;

以下是支持的 Processing 数据类型的摘要：

名称	描述	值的范围
int	整数值	-2,147,483,648至2,147,483,647
float	浮点值	-3.40282347E+38 到 3.40282347E+38
boolean	布尔值	true 或 false
char	单个字符	A-z，0-9和符号
String	字符串	任何字母，单词，句子等
PImage	PNG，JPG或GIF图像	N / A
PFont	VLW字体; 使用创建字体工具来制作	N / A
PShape	SVG文件	N / A