下载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 |
// 函数setup() ：准备阶段
function setup() {
createCanvas(640,480);
}
// 函数draw()：作画阶段
function draw() {
fill(255);// 填充白色
ellipse(320,240,100,100); // 画圆形
}
|
然后，再次打开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 |
// 函数setup() ：准备阶段
function setup() {
createCanvas(640,480);
}
// 函数draw()：作画阶段
function draw() {
fill(255);// 填充白色
ellipse(320,240,100,100); // 画圆形
ellipse(400,240,100,100);
ellipse(320,140,100,100);
}
|
也就是增加两行：
再次运行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 |
// 函数setup() : 准备阶段
function setup() {
// 创建画布，宽度640像素，高度480像素
// 画布的坐标系统为，左上角坐标为（0，0），
// x方向水平向右，y方向垂直向下，单位像素
createCanvas(640,480);
}
// 函数draw()：作画阶段
function draw() {
fill(255);// 填充白色
// 1 画脸
ellipse(320,240,200,200);// 圆圈
// 2 左眼
ellipse(280,240,50,50);// 另一个圆圈
// 3 右眼
ellipse(360,240,50,50);
// 4 嘴巴
ellipse(320,300,80,40);
fill(0);// 填充黑色
// 5 左眼珠
ellipse(280,240,20,20);
// 6 右眼珠
ellipse(360,240,20,20);
// 7 头发：从左到右画一排竖线
line(260,180,260,100);
line(280,180,280,100);
line(300,180,300,100);
line(320,180,320,100);
line(340,180,340,100);
line(360,180,360,100);
line(380,180,380,100);
}
|
绘制效果为：
相关资源
