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

p5.js在jupyter-notebook中使用

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

文章目录
  1. 1. 什么是p5.js
  2. 2. 怎样在notebook中使用p5.js
  3. 3. 使用

声明: 本文由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

赞助

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