声明: 本文由DataScience发表,未经允许不得转载。 转载请注明本文链接mlln.cn, 并在文后留言转载.
本文代码运行环境:
- windows10
- jupyter notebook
- p5.js 0.6.1
在计算机屏幕上绘图就像在方格纸上绘图一样。但随着新概念的引入，用软件绘制简单的形状扩展到绘制动画和界面。在我们进行高阶应用之前，我们需要从头开始。计算机屏幕是像素构成的网格。像素的坐标就是在屏幕上的位置。创建p5.js程序时，可以使用Web浏览器进行预览。在浏览器的窗口中，p5.js创建一个画布，即绘制图形的区域。画布可以与窗口大小相同，也可以具有不同的尺寸。画布通常位于窗口的左上角，但您可以将其放置在其他位置。在画布上绘制时，x坐标是距画布左边缘的距离，y坐标是距上边缘的距离。我们写这样一个像素的坐标：（x，y）。因此，如果画布是200×200像素，左上角是（0,0），中间是（100,100），右下角是（199,199）。这些数字可能看起来令人困惑;为什么我们从0到199而不是1到200？答案是，在代码中，我们通常从0开始计算，这使得很多程序写起来更简单。
(下面我们注册p5魔法, 以便于在jupyter notebook中使用p5.js, 如果你不用notebook, 请忽略这部分python代码)
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
| from IPython.core.magic import register_cell_magic
from IPython.display import IFrame
TEMPLATE = """
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"></script>
<title>Notebook中显示P5.js页面</title>
</head>
<body>
<a href="http://mlln.cn" target="_blank"><h5>p5.js效果展示: %(name)s</h5></a>
<script>
%(script)s
</script>
</body>
</html>
"""
@register_cell_magic
def p5(line, cell):
file_id, kws = line.split(' ')[0], line.split(' ')[1:]
kwargs = {}
for kw in kws:
k, v = kw.split('=')
kwargs[k] = v
filename = f"p5js-html/p5-02-{file_id}.html"
with open(filename, "w") as fp:
fp.write(TEMPLATE % {"script": cell, "name": filename})
if 'height' not in kwargs:
kwargs['height'] = '200px'
return IFrame(filename, width="100%", **kwargs)
del p5
|
创建画布
创建画布并通过函数在内部绘制图像。函数是p5.js程序的基本构建块。函数的行为由其参数定义。例如，几乎每个p5.js程序都有一个createCanvas函数，用于创建具有特定宽度和高度的绘图画布。如果您的程序没有createCanvas函数，则p5会默认的创建尺寸为100×100像素的画布。
createCanvas函数有两个参数;第一个设置绘图画布的宽度，第二个设置高度。要绘制宽度为80像素，高度为60像素的画布，请键入：
1
2
3
4
5
6
7
| %%p5 create-canvas height=100px
function setup() {
createCanvas(80, 60);
// 设置背景以便于你看清画布
background(100)
}
|
输出:
绘制基本图形
像素点
要设置画布中单个像素的颜色，我们使用point（）函数。它有两个定义位置的参数：x坐标后跟y坐标。要在它的中心创建一个小画布和一个点，坐标（24,6），键入：
1
2
3
4
5
6
7
| %%p5 draw-point height=100px
function setup() { createCanvas(48, 24); }
function draw() {
background(204)
point(24, 6)
}
|
输出:
你可能看不清这个像素点。
线段
要在坐标（20,50）和（420,110）之间画一条线，请尝试：
1
2
3
4
5
6
7
| %%p5 draw-line height=150px
function setup() { createCanvas(480, 120); }
function draw() {
background(204);
line(20, 50, 420, 110);
}
|
输出:
图形
遵循上例的模式，三角形需要六个参数，四边形需要八个（每个点一对）：
1
2
3
4
5
6
7
8
9
10
| %%p5 draw-shape height=180px
function setup() { createCanvas(480, 120); }
function draw() {
background(204);
// 四边形
quad(118, 55, 199, 14, 392, 66, 351, 107);
// 三角形
triangle(247, 54, 392, 9, 392, 66);
}
|
输出:
矩形和圆形
矩形和椭圆都用四个参数定义：第一个和第二个是锚点的x和y坐标，第三个是宽度，第四个是高度。
1
2
3
4
5
6
7
8
9
10
| %%p5 draw-rect-ellipse height=180px
function setup() { createCanvas(480, 120); }
function draw() {
background(204);
// 矩形
rect(10,10,100,100)
// 圆形
ellipse(150,60,80,100)
}
|
输出:
绘制扇形
arc可以绘制圆形的一部分。
第一个和第二个参数设置位置，而第三个和第四个参数设置宽度和高度。第五个参数设置开始弧的角度，第六个参数设置要停止的角度。角度以弧度而不是度数设置。弧度是基于pi值（3.14159）的角度测量值。图3-2显示了两者的关系。如本例中所示，使用了四个弧度值，因此它们的特殊名称被添加为p5.js的一部分。值PI，QUARTER_PI，HALF_PI和TWO_PI可用于替换180°，45°，90°和360°的弧度值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| %%p5 draw-arc height=180px
let x = 0
function setup() { createCanvas(580, 120); }
function draw() {
background(204);
x += 0.1
arc(90, 60, 80, 80, 0, HALF_PI);
arc(190, 60, 80, 80, 0, PI+HALF_PI);
arc(290, 60, 80, 80, PI, TWO_PI+HALF_PI);
// 动态改变起始位置, 可以看到转动效果
arc(390, 60, 80, 80, QUARTER_PI+x, PI+QUARTER_PI+x);
// 如果你想使用度数, 而不是弧度
arc(490, 60, 80, 80, radians(30), radians(90))
}
|
输出:
图形重叠次序
先后绘制的图形有可能覆盖之前绘制的图形。
1
2
3
4
5
6
7
8
9
10
| %%p5 draw-overlap height=180px
function setup() { createCanvas(480, 120); }
function draw() {
background(204);
// 矩形
rect(10,10,100,100)
// 圆形
ellipse(100,60,80,100)
}
|
输出:
图形属性
轮廓粗细(strokeWeight)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| %%p5 stroke-properties height=180px
function setup() { createCanvas(480, 120); }
let weight = 1
function draw() {
weight += 1
background(204);
// 设置线粗细
strokeWeight(weight)
// 圆形
ellipse(100,60,80,100)
if (weight==200){
weight=0
}
}
|
输出:
轮廓端点风格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| %%p5 strokeJoin height=180px
function setup() { createCanvas(480, 120); strokeWeight(12); }
function draw() {
background(204);
// 圆弧夹角
strokeJoin(ROUND);
rect(40, 25, 70, 70);
// Bevel型夹角
strokeJoin(BEVEL);
rect(140, 25, 70, 70);
// 直角线端点
strokeCap(SQUARE);
line(270, 25, 340, 95);
// 圆弧形端点
strokeCap(ROUND);
line(350, 25, 420, 95);
}
|
输出:
颜色
到目前为止，所有的形状都是白色的，带有黑色轮廓。要更改此设置，请使用fill（）和stroke（）函数。参数值的范围为0到255，其中255为白色，128为中灰色，0为黑色。我们在前面的例子中看到的background（）函数以相同的方式工作，它设置画布的背景颜色。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| %%p5 color height=180px
function setup() { createCanvas(480, 120) }
function draw() {
background(204);
// 填充红色
// 三个参数分别是 R G B
fill(255, 0, 0)
// 轮廓黑色
stroke(0,0,0);
rect(40, 25, 70, 70);
// 填充绿色
fill(0, 255, 0)
// 轮廓红色
stroke(255,0,0);
rect(140, 25, 70, 70);
// 轮廓颜色(随便设置了一个颜色)
stroke(129,20,255);
line(270, 25, 340, 95);
// 第4个参数设置透明度
fill(0, 255, 0, 100)
rect(370, 25, 70, 70);
}
|
输出:
复杂图形
你不仅可以使用这些基本几何形状 - 还可以通过连接一系列点来定义新形状。
beginShape（）函数指示新形状的开始。 vertex（）函数用于定义点的x和y坐标。最后，调用endShape（）来表示形状已完成：
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
| %%p5 beginshape-endshape height=180px
function setup() { createCanvas(480, 120) }
function draw() {
background(204);
// 绘制一个太阳
fill(255,0,0)
stroke(255, 255, 0)
strokeWeight(6)
ellipse(360, 110, 100, 100)
// 开始绘制山的图形
// 设置颜色为灰色
fill(45,45,45)
stroke(0, 0, 0)
strokeWeight(1)
beginShape()
vertex(0,120)
vertex(10, 40)
vertex(40, 100)
vertex(80, 20)
vertex(110, 80)
vertex(260, 50)
vertex(360, 110)
vertex(400, 10)
vertex(480, 120)
// 结束绘制图形
endShape()
}
|
输出:
如果你觉得不过瘾, 可以做一个太阳落山的动画:
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
| %%p5 beginshape-endshape-moving height=180px
let sun_y=0
function setup() { createCanvas(480, 120) }
function draw() {
sun_y += 1
if(sun_y==200){
sun_y=1
}
background(204);
// 绘制一个太阳
fill(255,0,0)
stroke(255, 255, 0)
strokeWeight(6)
ellipse(360, sun_y, 100, 100)
// 开始绘制山的图形
// 设置颜色为灰色
fill(45,45,45)
stroke(0, 0, 0)
strokeWeight(1)
beginShape()
vertex(0,120)
vertex(10, 40)
vertex(40, 100)
vertex(80, 20)
vertex(110, 80)
vertex(260, 50)
vertex(360, 110)
vertex(400, 10)
vertex(480, 120)
// 结束绘制图形
endShape()
}
|
输出:
注意
本文由jupyter notebook转换而来, 您可以在这里下载notebook
统计咨询请加QQ 2726725926, 微信 mllncn, SPSS统计咨询是收费的
微博上@mlln-cn可以向我免费题问
请记住我的网址: mlln.cn 或者 jupyter.cn
