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

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

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

文章目录
  1. 1. 概述
  2. 2. 注册所需魔法
  • Hello world
    1. 1. 创建画板
    2. 2. 鼠标动作和触摸交互
    3. 3. 异步和文件加载
      1. 3.1. 回调函数
      2. 3.2. 预加载
      3. 3.3. Loading Screen
    4. 4. 默认函数
    5. 5. 实例化/命名空间
    6. 6.
    7. 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/ , 但是需要强调的是, 本教程的代码可以在两种情况下通用, 不需要改任何代码。

    注册所需魔法

    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
    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()函数并添加一行:

    1
    2
    3
    4
    5
    %%p5 1
    function setup() {
    background(100)
    line(15, 25, 70, 90);
    }
    输出:

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    %%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页面的高度)

    1
    2
    3
    4
    5
    6
    %%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方法:

    1
    2
    3
    4
    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)。

    1
    2
    3
    4
    5
    6
    7
    8
    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行。

    1
    2
    3
    4
    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函数。

    1
    2
    3
    4
    5
    6
    7
    8
    function setup() {
    createCanvas(400, 240);
    loadImage('cat.jpg', drawCat);
    }

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

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

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

    预加载

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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函数都绑定在单个变量中,而不是污染全局命名空间。

    考虑这样的程序:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var x = 100;
    var y = 100;

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    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,可以编写以下类型的程序:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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

    赞助

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