如何将 ProcessingJS 库转换为 p5.js？

Question

我正在尝试将我在可汗学院 （processingJS 库） 中创建的代码转换为 Code Sandbox (p5.js).任何帮助都会很棒。我在使用背景和文本功能时遇到问题。 处理js的代码。

var l = "1. Have an open heart.";
var k = "2. Be kind.";
var h = "3. Respect boundaries.";
var x = 10;

draw = function() {
    background(165, 231, 232);
    //title
createFont("bookman old style");    
textSize(30);
text("LOVE, ACTUALLY!", 23, 30);
textSize(20);
//first line
text(l, 18, 64);
textSize(20);

// second line
text(k, 18, 88);
textSize(20);

// third line
text(h, 18, 109);
fill(158, 32, 32);

//face outline
noStroke();
ellipse(x,206,142,127);

//eyes
fill(255, 255, 255);
rect(x,175,34,21);
fill(255, 255, 255);
rect(x - 50,175,34,21);
fill(43, 46, 35);

//pupils
ellipse(x + 10,185,13,14);
ellipse(x -33,185,13,14);

//mouth
fill(51, 48, 23);
strokeWeight(7);
arc(x, 223, 55 ,71, 1, 180);

//tongue
fill(222, 11, 11);
arc(x, 223, 20 ,60, 1, 180);
x = x + 2;
     
};

来自 p5.js 的错误消息 'draw' 未定义。（无-undef） eslint 'background' 未定义。（无-undef） eslint 'createFont' 未定义。（无-undef） eslint 'textSize' 未定义。（无-undef） eslint 'text' 未定义。（无-undef） eslint 'textSize' 未定义。（无-undef） eslint 'text' 未定义。（无-undef） eslint 'textSize' 未定义。（无-undef） eslint 'text' 未定义。（无-undef） eslint

Answer 1

您的 index.html 文件中是否导入了 p5.js？

<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>

而且您似乎没有 function setup(){ ... 声明。
此函数中的默认代码：

function setup() {
  createCanvas(windowWidth, windowHeight);
}

如何将 ProcessingJS 库转换为 p5.js？

How to convert ProcessingJS library to p5.js?

p5.js

processing.js

codesandbox