p5.js 和 Processing 的恩怨情仇

序卷

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 samenoFill();                  // noFill() is the same
}function draw() {                         // **change** void draw() to function draw()background(0);                          // background() is the samefor (var i = 0; i < 200; i += 20) {     // **change** int i to var ibezier(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 varfunction setup() {                          // **change** void setup() to function setup()createCanvas(640, 360);                   // **change** size() to createCanvas()strokeWeight(9);                          // strokeWeight() is the samestroke(255, 100);                         // stroke() is the samefor(var i=0; i<x.length; i++) {         // initialize the arrayx[i]=0;y[i]=0;}
}function draw() {                           // **change** void draw() to function draw()background(0);                            // background() is the samedrawSegment(0, mouseX, mouseY);           // functions calls, mouseX and mouseY are the samefor(var i=0; i<x.length-1; i++) {         // **change** int i to var idrawSegment(i+1, x[i], y[i]);           // function calls are the same}
}function drawSegment(i, xin, yin) {         // **change** void drawSegment() to function drawSegment(), remove type declarationsvar dx = xin - x[i];                      // **change** float to varvar dy = yin - y[i];                      // **change** float to varvar angle = atan2(dy, dx);                // **change** float to var, atan2() is the samex[i] = xin - cos(angle) * segLength;      // cos() is the samey[i] = yin - sin(angle) * segLength;      // sin() is the samesegment(x[i], y[i], angle);               // function calls are the same
}function segment(x, y, a) {                 // **change** void segment() to function segment(), remove type declarationspush();                                   // pushMatrix() becomes push()translate(x, y);                          // translate() is the samerotate(a);                                // rotate() is the sameline(0, 0, segLength, 0);                 // line() is the samepop();                                    // 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 ibezier(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 floatvoid 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 idragSegment(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 floatfloat dy = yin - y[i];                         // **change** var to floatfloat angle = atan2(dy, dx);                   // **change** var to floatx[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

尾语

原文链接：https://github.com/processing/p5.js/wiki/Processing-transition
当你在 p5.js 和 Processing 转换过程中，遇到问题，欢迎 @Hewes。

p5.js 和 Processing 的恩怨情仇相关推荐

p5.js 编程基础学习合集【2】
之前在< p5.js 和 Processing 的恩怨情仇>曾提及 p5.js 与 Processing 的不同点之一就是: 在 JavaScript 中,变量没有类型.使用 var 而不 ...
p5.js 光速入门中文教程
本文简介点赞 + 关注 + 收藏 = 学会了本文的目标是和各位工友一起有序的快速上手 p5.js ,会讲解 p5.js 的基础用法. 本文会涉及到的内容包括: 项目搭建 p5.js 基础2D图形 ...
用P5 JS绘制二维动画场景——静态篇
绘画根据wiki百科的定义,绘画是在技术层面上,是一个以表面作为支撑面,再在其之上加上颜色的行为,那些表面可以是纸张.油画布.木材.玻璃.漆器或混凝土等,加颜色的工具可以是画笔.也可以是刀.海绵或是 ...
p5.js 编程基础学习合集【1】
不知道你是否了解过 Processing 语言的家谱(如下图所示).与人类语言一样,编程语言同样属于相关语言的家族.而今天,我要引出的,即其家族成员之一的 p5.js(官网). ###Introduc ...
用p5.js制作烟花特效
前言之前看过一篇文章,使用processing制作烟花特效.效果如下网上调查了一圈了,发现processing是一个互动编程软件,java语言发展而来.而且动画效果是跑在processing专门的 ...
Processing.js vs P5.js –有什么区别？
几天前, P5.js被释放了. 这是一个遵循处理原则的用于可视化编程的JavaScript库. 根据这篇文章 : 处理是一种环境/编程语言,旨在使视觉交互式应用程序非常易于编写. 它可以用于从教孩子如 ...
Processing “迁” p5.js【秒懂小白篇】
We ❤ P5js, we decided to throw our full support on P5js in the future and drop support on Processing ...
使用processing编译器写p5.js代码
1.打开processing编译器,点击右上角Jav的下拉小箭头 2.选择添加模式进入如下界面,在上方菜单栏选择Modes,在屏幕中选P5.js一项,点击右下角installed.3.安装完成后返回, ...
P5.js 实现交互式动态绘画
p5.js 实现交互式动态绘画 1.关于交互式绘画的思考 2.选定题目 3.内容展示 4.代码分析 (1).按钮的实现 (2).笔刷(画笔) (3).动作 5.总结 6.参考文献 1.关于交互式绘画的 ...

p5.js 和 Processing 的恩怨情仇

序卷

前因

风云

基本草图

Processing 转换 p5.js

p5.js 转换 Processing

事实

尾语

p5.js 和 Processing 的恩怨情仇相关推荐

最新文章

热门文章