P5.js样板 - Javascript

P5.js是一款运行在浏览器上的javascript创意编程框架。它提供了很多的可视化和交互能力，让用户能够直接在浏览器里面编写代码，并且实时查看效果。

本篇文章将为你介绍P5.js的样板代码，以及这些代码的详细解释。让我们开始吧！

P5.js样板代码

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse_mode(CENTER);
  fill(255, 0, 0);
  ellipse(width/2, height/2, 100, 100);
}

解释

这是一个最简单的P5.js程序。它包含两个函数：setup()和draw()。

在setup()函数中，我们创建了一个400 * 400的画布。

在draw()函数中，我们首先用background()函数设置了画布的背景颜色为灰色（其实是rgb值为220，220，220，看起来像灰色）。接下来，我们使用ellipse()函数画了一个红色圆形。其中（width / 2，height / 2）表示圆心在画布的中心位置，而另外两个数值（100，100）分别是圆形的宽和高。

最后，我们使用ellipseMode()函数将圆形的对齐方式设置为中心对齐。这意味着我们传递给ellipse()函数的参数x，y将代表圆形的中心位置，而不是左上角。

使用说明

要使用这个P5.js样板代码，您需要将其保存为.js文件，并将其链接到HTML文件中的