SPSS+AMOS数据分析案例教程-关于中介模
SPSS视频教程内容目录和跳转链接
SPSS+AMOS数据分析案例教程-关于中介模
SPSS视频教程内容目录和跳转链接
R语言快速入门视频教程
Python智联招聘数据分析
LCA潜在类别分析和Mplus应用
Amos结构方程模型数据分析入门教程
倒U关系回归分析中介效应和调节效应分析SPSS视频教程

p5.js教程02-绘制简单图形

在B站@mlln-cn, 我就能回答你的问题奥!

文章目录
  1. 1. 创建画布
  2. 2. 绘制基本图形
    1. 2.1. 像素点
    2. 2.2. 线段
    3. 2.3. 图形
    4. 2.4. 矩形和圆形
    5. 2.5. 绘制扇形
  3. 3. 图形重叠次序
  4. 4. 图形属性
    1. 4.1. 轮廓粗细(strokeWeight)
    2. 4.2. 轮廓端点风格
    3. 4.3. 颜色
  5. 5. 复杂图形

声明: 本文由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

赞助

持续创造有价值的内容, 我需要你的帮助