2D渲染处理P5

Question

我是 javascript 的新手，无意中发现了这个网页：

http://processingjs.org/articles/RenderingModes.html

它描述了如何在处理中渲染二维对象。如果我打开一个新的 P5 项目并插入示例代码，代码如下所示：

HTML (index.html):

 <html>
    <head>
      <meta charset="UTF-8">

      <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
      <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
      <script language="javascript" type="text/javascript" src="sketch_180226b.js"></script>
      <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->

      <!-- This line removes any default padding and style. 
           You might only need one of these values set. -->
      <style> body {padding: 0; margin: 0;} </style>
    </head>

<body>
</body>
</html>

JS (sketch_180226b.js):

int i = 0; 
void setup() {
    size(200, 200); 
    background(255);
    smooth();
    strokeWeight(15);
    frameRate(24);
} 
void draw() {
    stroke(random(50), random(255), random(255), 100);
    line(i, 0, random(0, width), height);
    if (i &lt; width) {
        i++;
    } else {
        i = 0; 
    }
}

但是如果我运行代码 Chrome 打开并且它不显示任何内容。我必须在 HTML 代码中创建一个额外的 canvas 吗？

Answer 1

处理和p5不一样。 p5为JavaScript，Processing在运行时转为JavaScript。可以在此处找到有用的比较：https://www.sitepoint.com/processing-js-vs-p5-js-whats-difference/

您找到的示例是针对处理的，而不是 p5，因此不会运行因为它无效 JavaScript - 它会在第 1 行失败 "int".

如果您打算使用 p5，则等效（且非常相似）的示例为：

let i = 0;
function setup() {
    createCanvas(200, 200); //replaced size(200,200)
    background(255);
    smooth();
    strokeWeight(15);
    frameRate(24);
} 
function draw() {
    stroke(random(50), random(255), random(255), 100);
    line(i, 0, random(0, width), height);
    if (i < width) {
        i++;
    } else {
        i = 0; 
    }
}

否则，如果您想运行在浏览器中处理代码，则需要使用此处描述的过程：http://processingjs.org/articles/p5QuickStart.html

2D渲染处理P5

2D rendering processing P5

html

javascript

processing

p5.js