下载P5.js并写一段程序
下面我们就开始使用p5.js来画点东西。
第一步,下载p5.js到本机。
到官网下载页面(https://p5js.org/download/) ,从”Complete Library"下载完整包到本机,如下图所示。
下载后,应该是一个名为"p5.zip“的压缩包:
第二步,解压压缩包并运行和编辑”模板“程序:
然后解压出来,应该呈现为下列文件结构:
如上图所示,找到文件夹"empty-example",这是p5.js提供的一个”模板“程序,其实就是一个不做任何事情的js程序。
先试试运行程序,即用浏览器打开文件”index.html",打开后应该是看到一个完全空白的网页:
现在可以开始编写程序,用任意文本编辑器开文件sketch.js,可以看到是完全空白。
第三步,写第一个程序,即在sketch.js中输入下列代码,注意不能写错一个字母,包括大小写:
1 2 3 4 5 6 7 8 9 10 |
|
然后,再次打开index.html文件(或者刷新显示),可以看到在页面上出现了一个圆形:
小目标达成! Level UP!!!
查询参考文档
为了更好的理解这段程序,我们要到官网查询一下函数createCanvas()和ellipse()的具体用法:
p5.js的所有功能都包含在参考文档中:
https://p5js.org/reference/
其中,可以找到createCanvas()和ellipse():
点开createCanvas()可以查看它的语法/示例程序和运行效果:
上面地描述都是英文,可能绘吓跑一批小朋友。我这里在做一个简单地翻译:
创建一个画布,并设置它地尺寸。这个函数应该只在start()函数中调用一次。如果调用多次,可能造成难以预料的行为......
拖到页面下方可以看到它的句法规范:
翻译过来为:
Syntax (句法)
createCanvas(w,h,[renderer])
Parameters (参数)
w | 数值:画布的宽度,单位像素 |
h | 数值:画布的高度,单位像素
|
renderer | 常量: P2D or WEBGL |
此外,还要用用这里的最酷功能——编辑示例代码看效果!并且若编辑出错误代码导致不知所措,可以很方便地恢复到最初状态:
下面在看看ellipse()函数的参考文档:
简单翻译过来,大意就是“画一个椭圆,前两个参数指定中心位置,第三个参数为横轴长度,第四个参数为纵轴长度。
以及它的句法:
翻译一下,就是:
Syntax(句法)
ellipse(x,y,w,[h])
Parameters(句法)
x | 数值:中心点的横坐标 |
y | 数值:中心点的纵坐标 . |
w | 数值:椭圆的宽度(横轴长度)
|
h | 数值:椭圆的长度(纵轴长度),不指定时默认与w取相同数值 |
改造程序,增强功能
有了它,就方便我们理解程序中具体调用ellipse的含义了,例如,我们程序中的语句”ellipse(320,240,100,100); // 画圆形“的含义就是”画椭圆,中心点坐标(320,240),宽度高度均为100“。
现在考虑一个问题:若将320增大到400,圆形的位置会如何变化?若将240减小到140,圆形位置如何变化?
试试将代码改为如下:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
也就是增加两行:
再次运行index.html,效果如下:
这三个圆圈和代码是如何对应的呢?请看下图:
画布坐标系统
能否从上图中看出来,ellipse()的第一个和第二个参数如何影响其位置?
目前为止,我们还并不了解画布上的坐标和具体位置的对应关系,而要画出任何东西,都必须首先了解如何在画布上定为,也就是画布的坐标系统,下图便是解释:
理解了坐标系统,就能够精确地在画布上任意位置画想要的椭圆了。
画一些不同的表情
为了多赚一点经验值,我们再试试去实现最先示例的那段懵逼头像绘制程序,并且做一些小小的改造:
完整程序代码
下面贴出最原始的卡通头像绘制代码,请自行尝试修改,做出不同效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
|
绘制效果为:
相关资源