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

p5.js教程07-让图动起来

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

文章目录
  1. 1. 帧的概念
  2. 2. 控制运动速度和方向
  3. 3. 计时

声明: 本文由DataScience发表,未经允许不得转载。 转载请注明本文链接mlln.cn, 并在文后留言转载.

本文代码运行环境:

  • windows10
  • jupyter notebook
  • p5.js 0.6.1

在此之前的教程中你可能已经见过动态的效果了, 不过我们在这里更详细和系统的说明下。

就像翻书一样,屏幕上的动画是通过不断显示不同的图像来显示动态效果的。我们需要绘制图像,然后绘制稍微不同的图像,然后绘制另一个图像,依此类推, 让这些图像连续出现。当以足够快的速度呈现一组相似图像时,我们的大脑将这些图像转换为运动。

(下面我们注册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
37
from IPython.core.magic import register_cell_magic
from IPython.display import IFrame

TEMPLATE = """
<html>
<head>
<meta charset="utf-8" />
<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-07-{file_id}.html"
with open(filename, "w", encoding='utf8') 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尝试以每秒60帧的速度运行draw()内的代码。帧是draw()函数的一次执行,帧速率是每秒绘制的帧数。因此,每秒绘制60帧的程序意味着程序每秒60运行60次draw()函数。

控制运动速度和方向

通常我们用物体在每帧的位移大小来表示速度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
%%p5 speed height=250
// 速度是每帧1个像素
let speed = 1
// 方向有1 和 -1两个取值
let direction = 1
let x = 1
function setup() {
createCanvas(220, 220);

}

function draw() {
// 更改小球的x坐标实现运动效果
x += speed*direction;
background(204);
ellipse(x, 100, 20, 20);
if(x > 220){
direction = -1
}else if(x < 0){
direction = 1
}
}
输出:

更复杂的案例, 制作一个随机运动的小球。

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
40
41
42
43
44
45
%%p5 speed-random height=280
// 速度是每帧1个像素
// 用random生成一个随机数
let speed_x = 1
let speed_y = 2
// 方向有1 和 -1两个取值
let direction_x = 1
let direction_y = 1
let x = 1
let y = 50
function setup() {
createCanvas(220, 220);
// 使用random方法可以生成处于两个参数之间的数字
speed_x *= random(1, 10) * 0.1
speed_y *= random(5, 10) * 0.1
// 方向也是随机的
if (random(0, 1)>0.5){
direction_x *= -1
}
if (random(0, 1)>0.5){
direction_y *= -1
}
}

function draw() {
// 更改小球的x坐标实现运动效果
x += speed_x*direction_x;
y += speed_y*direction_y;
background(204);
ellipse(x, y, 20, 20);
// 判断小球在x方向上是否出界
if(x > 210){
direction_x = -1
// 如果出界, 调转方向
}else if(x < 10){
direction_x = 1
}
// 判断小球在y方向上是否出界
if(y > 210){
// 如果出界, 调转方向
direction_y = -1
}else if(y < 10){
direction_y = 1
}
}
输出:

计时

每个p5.js程序都会计算自启动以来经过的时间。它以毫秒(千分之一秒)计,因此在1秒后,计数器为1,000; 5秒后,它达到5,000; 1分钟后,它是60,000。我们可以使用此计数器在特定时间触发动画。 millis()函数返回此计数器值。

下面我们制作一个可以定时改变颜色的小球。

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
%%p5 speed-random-change-color height=280
// 速度是每帧1个像素
// 用random生成一个随机数
let speed_x = 1
let speed_y = 2
// 方向有1 和 -1两个取值
let direction_x = 1
let direction_y = 1
let x = 1
let y = 50

// 记录上次更改颜色的时间
let change_time = 0;
function setup() {
createCanvas(220, 220);
// 使用random方法可以生成处于两个参数之间的数字
speed_x *= random(1, 10) * 0.1
speed_y *= random(5, 10) * 0.1
// 方向也是随机的
if (random(0, 1)>0.5){
direction_x *= -1
}
if (random(0, 1)>0.5){
direction_y *= -1
}
}

function draw() {
// 更改小球的x坐标实现运动效果
x += speed_x*direction_x;
y += speed_y*direction_y;
background(204);
ellipse(x, y, 20, 20);
// 判断小球在x方向上是否出界
if(x > 210){
direction_x = -1
// 如果出界, 调转方向
}else if(x < 10){
direction_x = 1
}
// 判断小球在y方向上是否出界
if(y > 210){
// 如果出界, 调转方向
direction_y = -1
}else if(y < 10){
direction_y = 1
}
// 获取当前时间
let current = millis()

// 每隔1000毫秒执行一次
// 判断时间是否超过1000毫秒
if (current - change_time > 1000){
fill(random(1, 255), random(1, 255), random(1, 255))
// change_time的值
change_time = current
}
}
输出:

注意
本文由jupyter notebook转换而来, 您可以在这里下载notebook
统计咨询请加QQ 2726725926, 微信 mllncn, SPSS统计咨询是收费的
微博上@mlln-cn可以向我免费题问
请记住我的网址: mlln.cn 或者 jupyter.cn

赞助

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