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

p5.js教程03-动作响应

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

文章目录
  1. 1. draw和setup函数
  2. 2. 鼠标动作
    1. 2.1. 鼠标位置
    2. 2.2. 鼠标点击
  3. 3. 键盘动作
  4. 4. 总结

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

本文代码运行环境:

  • windows10
  • jupyter notebook
  • p5.js 0.6.1

本章主要讲对鼠标/键盘/触摸等事件的响应, 对这些交互事件的响应可以让我们做出更强大的应用。我们首先在第1章中遇到了setup()和draw()函数。现在我们将更多地了解它们的作用以及如何使用它们来响应这些事件。

(下面我们注册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-03-{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

draw和setup函数

draw()函数中的代码从上到下运行,然后重复执行,直到你通过关闭窗口退出程序。通过draw()的每次执行称为一帧。 (默认帧速率为每秒60帧,但可以更改。)这是你看到之前教程里出现动态效果的原因。但是setup函数只在开始执行一次。

1
2
3
4
5
6
7
8
9
10
11
12
13
%%p5 print-frameCount height=2

// 只执行一次
function setup(){
print('Begin.....')
}

// 每帧执行一次
function draw() {
// 在浏览器console中打印当前的帧数
print("I’m drawing");
print(frameCount);
}
输出:

鼠标动作

鼠标位置

mouseX 和 mouseY这两个全局变量就代表鼠标指针的坐标。所以我们可以简单的绘制一个捕捉鼠标轨迹的程序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
%%p5 mouse-track height=400

function setup(){
createCanvas(880, 380);
fill(255, 255, 255, 50)
stroke(0, 0, 0, 50)
background(240)
}

function draw() {
// mouseX和mouseY代表鼠标位置
// 使用 pmouseX, pmouseY捕捉前一个鼠标位置
// 可以使用前后两个鼠标点的位置推断鼠标速度
// 我们让速度快的轨迹深一些
let weight = dist(mouseX, mouseY, pmouseX, pmouseY)*5;
// 设置透明度为weight
stroke(0, 0, 0, weight)
// 绘制圆圈
ellipse(mouseX, mouseY, 10, 10, 0)
// 绘制轨迹,
line(mouseX, mouseY, pmouseX, pmouseY);
}
输出:

鼠标点击

mouseIsPressed变量可以显示鼠标是否点击, 它是一个布尔值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
%%p5 mouse-click height=400

function setup(){
createCanvas(880, 380);
fill(255, 255, 255, 50)
stroke(0, 0, 0, 50)
background(220)
}

let w = 0
function draw() {
// 鼠标点击加粗线条
if (mouseIsPressed){
w +=1
strokeWeight(w)
}
// 绘制轨迹,
line(mouseX, mouseY, pmouseX, pmouseY);
}
输出:

键盘动作

key变量存储已按下的最新键。与布尔变量keyIsPressed(每次释放键时恢复为false)不同,key变量保持其值,直到按下下一个键。以下示例使用key的值将字符绘制到屏幕。每次按下新键时,值都会更新并绘制一个新字符。某些键(如Shift和Alt)没有可见字符,因此当您按下它们时,不会绘制任何内容。

1
2
3
4
5
6
7
8
9
10
11
12
%%p5 show-key height=200

function setup() {
createCanvas(120, 120);
textSize(64);
textAlign(CENTER);
fill(255);
}
function draw() {
background(0);
text(key, 60, 80);
}
输出:

使用方向键控制鼠标移动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
%%p5 arrow-key height=200

let x = 215;
let y = 60
function setup() {
createCanvas(480, 120);
background(150)
}
function draw() {
if (keyIsPressed) {
if (keyCode == LEFT_ARROW) {
x--;
} else if (keyCode == RIGHT_ARROW) {
x++;
}else if(keyCode == UP_ARROW){
y --;
}else if(keyCode == DOWN_ARROW){
y ++;
}
}
ellipse(x, y, 10, 10);
}
输出:

总结

除了上面介绍的常用动作外还有很多, 这里不一一介绍, 等你在以后的应用中用到其他的动作事件, 再去查文档即可。

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

赞助

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