p5.js 学习之路02-启程

game1024
44 阅读2分钟

启程

接下来，就正式进入到p5.js的代码旅程了，在这篇文章中，我们将会从p5.js的官方在线编辑器中，运行一个最简单的示例！

p5.js官方编辑器：p5.js editor

第一个示例！

进入到编辑器后，官方默认为我们生成了一段代码

image.png

点击左上角的 image.png 就能看到一块白色的区域啦！

这个东西就是我们的画布啦

image.png

怎么样简不简单！开不开心！！！是不是比你以往写 Hello world 更加容易，哈哈哈

代码解释

简单解释一下,

function setup() {
    // 定义了一张画布
    createCanvas(400, 400)
}

function draw() {
    // 给画布的背景填充颜色
    background(220);
}
  • createCanvas是用来创建画布的，所有的绘制操作都会画在这张画布中，就像你画画一样，需要先准备好一个画板、纸张，才能开始画画。后面传入的(400,400)代表的是，我需要一张 400宽，400高的画布

同样，我也可以告诉计算机，需要一张 200宽，400高的画布，看起来就像下面这样

image.png

  • background是给这张画布的背景填充颜色，后面传入的(220)代表的是一个颜色，通过预览我们可以看到，它代表的是灰色

Tips：计算机中的颜色是使用RGB（Red、Green、Blue）三中颜色混合而成的，background(220)代表的是使用220红色 220绿色 220蓝色混合之后得到的颜色，它是一种简写方式，它和background(220,220,220)等价

如果我想要一张其他颜色的背景，也可以修改参数调用 background(220,0,200)，就能看到背景变成紫粉色了

image.png

  • function setup(): setup()是p5.js的执行入口, 在这个地方我们可以做一些准备工作

  • function draw()：draw()是p5.js的绘制入口，在这个地方我们可以做一些绘制的工作，例如填充颜色，绘制图形...

比如我想绘制一下矩形和直线，可以使用rect()和line()

image.png

Tips：setup()和draw()两个函数构成了p5.js程序的基本骨架，在运行过程中，实际draw()会被不断执行，基于这个特性我们可以用来做一些动画的效果

avatar
文章
阅读
粉丝