Javascript 二维渲染处理P5

我是javascript新手，无意中发现了以下网页：

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

HTML（index.HTML）：

---

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

处理和p5不一样。p5是JavaScript，运行时将处理转换为JavaScript。以下是一个有用的比较：

您发现的示例是用于处理的，而不是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; 
    }
}

设i=0；
函数设置（）{
createCanvas（200200）；//替换的大小（200200）
背景（255）；
光滑的（）；
冲程重量（15）；
帧率（24）；
} 
函数绘图（）{
笔划（随机（50）、随机（255）、随机（255）、100）；
线（i，0，随机（0，宽度），高度）；
如果（i<宽度）{
i++；
}否则{
i=0；
}
}

---

否则，如果要在浏览器中运行处理代码，则需要使用此处描述的过程：

谢谢您提供的有用信息。我把那两个“图书馆”搞砸了。上面的例子很好，现在我知道从哪里开始：）是正确的，但如果您想了解更多关于Processing、P5.js和Processing.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 < width) {
        i++;
    } else {
        i = 0; 
    }
}

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