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

p5.js教程04-平移-旋转-缩放

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

文章目录
  1. 1. 概述
    1. 1.1. 平移
    2. 1.2. 旋转坐标系
    3. 1.3. 缩放
    4. 1.4. Push and Pop

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

本文代码运行环境:

  • windows10
  • jupyter notebook
  • p5.js 0.6.1

概述

用于在屏幕上定位和移动物体的替代技术是改变屏幕坐标系。例如,您可以向右移动50个像素的形状,或者可以将坐标(0,0)的位置向右移动50个像素 - 屏幕上的可视结果是相同的。通过修改默认坐标系,我们可以创建不同的变换,包括平移,旋转和缩放。

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

平移

实现这个效果: translate()函数将屏幕的(0,0)坐标设置为鼠标位置(mouseX和mouseY)。每次draw()函数执行时,ellipse()都会在新的坐标系中绘制。看下面的代码, 每次都会调用ellipse(0, 0, 30, 30), 也就是都在(0, 0)的位置绘制矩形, 但是因为坐标系的变换, (0, 0)位置总是在鼠标的位置, 所以下面代码意义就是在鼠标所在位置绘制圆形。

1
2
3
4
5
6
7
8
9
10
11
12
%%p5 translate height=250

function setup() {
createCanvas(220, 220);
background(204);
}

function draw() {
translate(mouseX, mouseY);
ellipse(0, 0, 20, 20);
}

输出:
1
2
3
4
5
6
7
8
9
10
11
%%p5 folow-mouse height=250

function setup() {
createCanvas(220, 220);
background(204);
}

function draw() {
ellipse(mouseX, mouseY, 20, 20);
}

输出:

旋转坐标系

rotate()函数旋转坐标系。它有一个参数,即旋转的角度(弧度)。它始终相对于坐标原点(0,0)旋转,称为围绕原点旋转。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
%%p5 rotate height=250

function setup() {
createCanvas(220, 220);
background(204);
}

let r= 0;
function draw() {
rotate(r)
r += PI/4 * 0.01
ellipse(100, 100, 20, 20);
if (r > PI/4){
r = - PI / 4
background(204);
}

}
输出:

缩放

scale()函数拉伸画布上的坐标。由于坐标随着比例的变化而扩展或收缩,因此绘制到画布的所有内容的尺寸都会增大或减小。比例写为十进制百分比。因此,参数1.5 to scale()为150%,3为300%。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
%%p5 scale height=250

function setup() {
createCanvas(220, 220);
background(204);
}

let r= 0.1;
function draw() {
scale(r)
// 每次迭代增加0.01
r += 0.01
ellipse(100, 100, 20, 20);
// 如果超过一定值, 就重置r
if (r>2){
background(204);
r=0.1
}
}
输出:

Push and Pop

要隔离转换的影响,使它们不影响以后的图形,请使用push()和pop()函数。当push()运行时,它会保存当前坐标系的副本,然后在pop()之后恢复该系统。当一个形状需要变换但另一个变形不需要变换时,这很有用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
%%p5 push-pop height=250

function setup() {
createCanvas(220, 220);
background(204);
}

let r= 0.1;
function draw() {
push()
scale(r)
// 每次迭代增加0.01
r += 0.01
ellipse(100, 100, 20, 20);
// 如果超过一定值, 就重置r
if (r>2){
background(204);
r=0.1
}
pop()
// 保证不缩放矩形
rect(220-r*80, r*80, 10, 10)
}
输出:

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

赞助

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