p5.js教程01-一文入门p5.js

2018年07月06日

文章目录

1. 概述
2. 注册所需魔法

Hello world

1. 创建画板
2. 鼠标动作和触摸交互
3. 异步和文件加载
4. 默认函数
5. 实例化/命名空间
6. 库
7. 编辑器

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

本文代码运行环境:

windows10
jupyter notebook
p5.js 0.6.1

概述

p5.js是一个JavaScript库，以Processing为蓝本进行开发 - 可供艺术家，设计师，教育工作者和初学者使用。p5.js的名称使用了软件速写本的隐喻，p5.js具有一整套绘图功能。但是，它不仅限于在canvas上绘图，你可以将整个浏览器页面视为画板！为此，p5.js有很多插件实现了对including text, input, video, webcam, and sound等html5元素的控制。

p5.js是一种新的解释器，它正在积极开发中。官方编辑器即将推出，还有更多功能！

本系列教程的代码都是在jupyter notebook中运行的, 有关如何在jupyter notebook中运行p5.js的说明，请参阅p5.js在jupyter-notebook中使用。如果你不想使用这个运行环境, 你完全可以把我的代码复制到一个sketch.js文件中, 然后创建一个index.html文件来引用p5.js的库和sketch.js脚本。然后你就会看到和我的教程里一样的效果了。具体如何做, 你需要参考这篇文章:https://p5js.org/get-started/ , 但是需要强调的是, 本教程的代码可以在两种情况下通用, 不需要改任何代码。

注册所需魔法

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-01-{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

Hello world

想要绘制图像, 你需要只是定义两个主要的函数。 setup（）函数运行一次，通常用于初始化，或者用于创建不需要重复循环运行代码的程序。 draw（）函数重复运行，用于动画绘制。

对于你的第一个“Hello World”程序，创建一个setup（）函数并添加一行：

%%p5 1
function setup() {
    background(100)
    line(15, 25, 70, 90);
}

输出:

如果您在浏览器中查看此内容，则应该看到一条线。

添加draw()函数使您可以生成动画。p5js会每隔一定时间自动调用你写的draw函数, 在下面的示例中，每次draw()运行时，都会更新变量x，而这个变量决定了圆的水平位置, 所以动画效果就是在屏幕上移动一个圆圈。一个动画就是这么简单。

%%p5 2
var x = 0;

function setup() {
  background(100);  
}

function draw() {
    ellipse(x, height/2, 20, 20);
    x = x + 1;
    if(x>100){
        x=0
    }
}

输出:

创建画板

默认情况下，绘图画布的大小为100x100。如果要设置自定义大小，请使用createCanvas（）函数。总是把它作为setup（）的第一行是个好主意。下面的代码将画布设置为600x400：

(你可能看不全这个图, 需要下拉滚动条, 这是因为在notebook中输出区域的高度小于iframe页面的高度)

%%p5 3 height=450

function setup() {
  createCanvas(600, 400);
  line(15, 25, 650, 200);
}

输出:

createCanvas（）将创建一个指定大小的绘图画布，并将其附加到你正在使用的html页面。如果您的html页面正文中有其他内容，那么它将在此之后添加到页面，因此你可能无法在窗口顶部看到它。

画布也会受到页面上任何现有css（样式）的影响，包括浏览器设置的默认值。例如，许多浏览器在页面末尾都有一个默认填充。如果您注意到窗口左上角的画布并非一直存在，这可能就是原因。要解决这个问题，你可以在你的html文件的<head>中添加一行来覆盖默认的填充，如下所示：

1	<style> body{padding:0; margin:0;} </style>

如果要为画布指定位置，而不是直接附加到末尾，则可以使用parent方法。在你的html文件的<body>中，创建一个你想要插入画布的容器，其中包含你选择的ID：

1	<div id='myContainer'></div>

然后在setup()函数中调用parent方法:

function setup() {
  var myCanvas = createCanvas(600, 400);
  myCanvas.parent('myContainer');
}

p5.js API提供了许多用于创建图形的功能，但是有一些HTML5 Canvas功能未被p5封装。你仍然可以使用变量drawingContext直接调用它，如下例所示。有关本机canvas API的信息，请参阅[reference]（https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D）。

function setup() {
  drawingContext.shadowOffsetX = 5;
  drawingContext.shadowOffsetY = -5;
  drawingContext.shadowBlur = 10;
  drawingContext.shadowColor = "black";
  background(200);
  ellipse(width/2, height/2, 50, 50);
}

鼠标动作和触摸交互

p5.js有一套处理鼠标和触摸交互的方法。下面的列表显示了它们在概念上的关系。

鼠标	触摸
mouseX	touchX
mouseY	touchY
touches[]
mouseIsPressed
mousePressed()	touchStarted()
mouseMoved()
mouseDragged()	touchMoved()
mouseReleased()	touchEnded()
mouseClicked()
mouseScrolled()

你可能会注意到触摸，除非你定义了touchStarted方法，否则屏幕可能会对你的移动设备的默认触摸行为做出反应（即，当拖动手指时，整个屏幕视图可能会移动）。如果你添加一个空的touchStarted方法，就不会有这个问题。

许多浏览器都有各种交互的默认行为。例如，移动设备上的touchMoved可能会导致拖动整个窗口。要防止这些行为，请在定义的函数末尾添加return false行。

function touchMoved() {
  // do some stuff
  return false;
}

异步和文件加载

JS是单线程和顺序执行的，但是，使用了异步函数可以使程序更快地执行。加载图像和外部文件通常由异步函数处理。

回调函数

All of the load functions will accept a callback function as an optional last argument. In the following example, an image is drawn once it is loaded.

所有加载函数都将接受回调函数作为可选的最后一个参数。在以下示例中，图像在加载后执行drawCat函数。

function setup() {
  createCanvas(400, 240);
  loadImage('cat.jpg', drawCat);
}

function drawCat(img) {
  image(img, 0, 0);
}

如果loadImage之后直接调用image，结果你看不到这个图片, 因为loadImage是异步执行, image(img, 0, 0);执行的时候, img图片还没有下载完成：

function setup() {
  createCanvas(400, 240);
  var img = loadImage('cat.jpg');
  image(img, 0, 0);
}

预加载

或者，你可以使用preload函数。如果存在preload函数，它首先会运行，然后setup将等待preload执行完毕，这样你就可以在setup和draw中使用preload中加载的东西。请注意，除了加载函数之外，其他任何内容都不应该在preload中，所有其他初始化应该在setup中进行。另外, 预加载中的加载函数不需要回调。

var img;
function preload() {
  img = loadImage('cat.jpg');
}

function setup() {
  createCanvas(400, 240);
  image(img, 0, 0);
}

Loading Screen

如上所述，如果你的程序依赖大的媒体文件，如图像，音频或视频，则应使用preload函数将这些依赖项加载到草图中。由于加载大文件可能需要一些时间，因此你可能希望向用户显示加载过程。这将表明你的程序没有死 - 它正在加载很多很酷的东西。要在p5.js程序中添加加载动画，你需要做的就是在页面上包含一个ID为“p5_loading”的HTML元素。它看起来像下面这样：

<div id="p5_loading" class="loadingclass">this could be some sweet graphics loading lots of bits.</div>

P5.js查看你的HTML，看看你是否包含了一个id为“p5_loading”的元素。 P5.js将使用此元素及其内容作为草图的加载提示。由于加载元素包含在HTML中，因此你可以添加任何其他类和/或设置。

有关使用加载屏幕的草图示例，请参阅p5.js源中的examples / loadingscreen / index.html。

默认函数

有一些变量和功能使浏览器交互更容易，将来还会有更多！

你还应该能够在p5.js程序中使用任何本地JS函数而不会出现问题，MDN JavaScript参考是一个了解更多信息的好地方。阅读下一节，了解如何让p5在项目的其余部分发挥出色。

实例化/命名空间

默认情况下，所有p5.js函数都在全局命名空间中（即绑定到window对象），这意味着你可以直接调用函数ellipse（），fill（）等。但是，如果你这可能不方便正在与其他JS库混用（同步或异步）或编写自己的长程序。 p5.js目前支持两种解决此问题的方法：“实例模式”和“按需全局模式”。在实例模式中，所有p5函数都绑定在单个变量中，而不是污染全局命名空间。

考虑这样的程序：

var x = 100;
var y = 100;

function setup() {
  createCanvas(200,200);
}

function draw() {
  background(0);
  fill(255);
  ellipse(x,y,50,50);
}

转换为“实例模式”如下所示：

var s = function( p ) {

  var x = 100; 
  var y = 100;

  p.setup = function() {
    p.createCanvas(700, 410);
  };

  p.draw = function() {
    p.background(0);
    p.fill(255);
    p.rect(x,y,50,50);
  };
};

var myp5 = new p5(s);

你可以为画布指定默认容器，并使用第二个参数指定要追加的任何其他元素。你可以在html或html节点中提供元素的ID：

var myp5 = new p5(s, 'myContainer');

请注意，创建这样的实例还允许您在单个网页上拥有多个p5程序，因为它们将使用自己的变量进行包装。当然，你可以使用iframe在全局模式下拥有多个p5程序。

按照这些方式，按需全局模式还允许在页面加载之前实例化p5，可以编写以下类型的程序：

new p5();

var boop = random(100);

function setup() {
    createCanvas(100, 100);
}

function draw() {
    background(255, 0, boop);
}

库

p5.js背后的核心思想之一是，你的草图不仅仅是图形画布，而是浏览器中的整个网页。出于这个原因，有p5.dom库可以轻松地与其他HTML5对象进行交互，包括文本，超链接，图像，输入，视频，音频和网络摄像头。还有一个p5.sound库，它为HTML5 web音频API提供了一个友好的接口，用于加载，播放和合成声音。

学习如何使用这些库或自己开发看这里。

编辑器

你可以使用任何您喜欢的编辑环境，此外，p5.js编辑器正在开发中，你现在可以试用alpha版本。 p5.js编辑器处理设置项目并为你运行本地服务器。你通常可以在没有服务器的情况下运行p5.js程序，但如果你正在执行某些操作（例如加载外部文件），则需要它。以下是设置本地服务器的说明。

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

#p5.js

p5.js教程01-一文入门p5.js

概述

注册所需魔法

Hello world

创建画板

鼠标动作和触摸交互

异步和文件加载

回调函数

预加载

Loading Screen

默认函数

实例化/命名空间

库

编辑器

统计咨询

赞助

赞助推荐

常用工具

p5.js

友商赞助