p5.js在jupyter-notebook中使用
xxxspy
2018-07-06 20:17:55
声明: 本文由DataScience发表,未经允许不得转载。 转载请注明本文链接mlln.cn, 并在文后留言转载.
本文代码运行环境:
- windows10
- jupyter notebook
- p5.js 0.6.1
什么是p5.js
p5.js是一个JavaScript库，创建之初的目的是模仿Processing软件，为艺术家，设计师，教育工作者和初学者提供便捷的编程工具，并重新定义当今的互联网。p5.js的名称使用了软件速写本的隐喻，p5.js具有一整套绘图功能。但是，它不仅限于在canvas上绘图，你可以将整个浏览器页面视为画板！为此，p5.js有很多插件实现了对including text, input, video, webcam, and sound等html5元素的控制。
p5.js是一种新的解释器，它正在积极开发中。官方编辑器即将推出，还有更多功能！
怎样在notebook中使用p5.js
我们可以使用notebook提供的cell magic来生成p5.js的页面, 然后用一个Iframe嵌入这个页面。如果你不知道什么是cell magic以及如何二次开发jupyter-notebook, 你可以访问这篇文章notebook扩展开发之前端插件开发。当然, 我们可以不关心这些技术细节, 只要执行下面的代码, 你就注册了一个p5魔法。
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
| 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"><h3>文件: %(name)s</h3></a>
<script>
%(script)s
</script>
</body>
</html>
"""
@register_cell_magic
def p5(line, cell):
file_id = int(line)
filename = f"p5js-html/p5-pre-{file_id}.html"
with open(filename, "w", encoding='utf8') as fp:
fp.write(TEMPLATE % {"script": cell, "name": filename})
return IFrame(filename, width="100%", height="500")
del p5
|
使用
注册好了p5魔法, 我们可以在cell的第一行写下%%p5 1即可在这个cell中撰写p5的代码了。其中数字1表示页面ID。如果你仔细阅读了上面的代码, 你会发现, 我们需要在本notebook目录下创建一个文件夹p5js-html用于存放生成的p5页面。下面是一个例子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| %%p5 1
var x = 100;
var y = 100;
function setup () {
createCanvas(700, 410);
};
function draw () {
background(100);
fill(255);
rect(x,y,50,50);
};
|
输出:
需要注意的是, 如果你想再生成一个p5页面, 你需要使用不同的结果ID, 否则, 新生成的页面会覆盖原先的页面。
注意
本文由jupyter notebook转换而来, 您可以在这里下载notebook
统计咨询请加QQ 2726725926, 微信 mllncn, SPSS统计咨询是收费的
微博上@mlln-cn可以向我免费题问
请记住我的网址: mlln.cn 或者 jupyter.cn