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

p5.js教程05-图片处理

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

文章目录
  1. 1. 概述
  2. 2. 加载图片

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

本文代码运行环境:

  • windows10
  • jupyter notebook
  • p5.js 0.6.1

概述

为了制作更漂亮的p5程序, 我们通常需要加载外部图片, 然后绘制到画布上。这篇文章主要介绍p5js处理图片的一些技术。为了完成这篇文章, 我先下载了一个图片(example-img.png), 下面的代码里会经常用到。

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

为了能在notebook中使用p5加载图片, 我们需要在启动notebook的时候, 设置密码为空, 否则在加载图片(loadImage)的时候, 会返回一个登陆页。

1
jupyter notebook --ip='*' --NotebookApp.token='' --NotebookApp.password=''

另外你需要设置允许跨域访问资源(在notebook的配置文件中设置):

1
2
3
4
5
6
c.NotebookApp.tornado_settings = {
'headers': {
'Content-Security-Policy': "frame-ancestors 'self' http://localhost:8888 ",
'Access-Control-Allow-Origin': '*',
}
}

加载图片

我们通常在preload方法中加载耗时资源, 这样可以在程序运行时, 保证所需资源已经加载完毕。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
%%p5 load-image height=380px

let img;
function preload() {
img = loadImage("example-img.png");

}
function setup() {
createCanvas(480, 300);
background(200)
}
function draw(){
image(img, 0, 0);
}
输出:

我们可以传入位置参数来控制图片的位置, 同样的方法, 图片的尺寸也是可以控制的。

1
2
3
4
5
6
7
8
9
10
11
12
13
%%p5 load-image-position-size height=380px

let img;
function preload() {
img = loadImage("example-img.png");
}
function setup() {
createCanvas(580, 300);
background(200)
}
function draw(){
image(img, mouseX, mouseY, 50, 50);
}
输出:

如果你不想在preload中加载图片, 你可以使用异步的方式在setup函数中加载。

1
2
3
4
5
6
7
8
9
10
11
%%p5 load-image-setup height=140px


function setup() {
createCanvas(200, 100);
background(200)
loadImage("example-img.png", function(img){
image(img, 10, 20, 50, 50);
})
}

输出:

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

赞助

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