P5.js结构函数(Structure)粗解

以下内容不是纯翻译,主要是基于原文得出的自己的理解,本人英文烂,各位慎重观看。

preload()

预加载函数,在setup()执行之前执行,用于处理异步操作。所有需要加载的内容(如图片文件、json文件、字体文件等)加载完毕的时候再执行setup()。

在加载内容的时候默认的提示“loading”,如果想要自定义“loading”的样式,则可以在body里加入一段id为“p5_loading”的标签即可,比如:

<div id="p5_loading" style="color:red;">这是我自定义的预加载提示内容</div>

如果不添加,则程序默认调用默认的loadind:

<div id="p5_loading" style="position: absolute;">Loading...</div>

setup()

程序初始化函数,里面可以定义屏幕宽高、背景色、加载媒体文件等,程序开始执行时调用(有preload()函数时在preload()执行完后调用)。一个项目中只能有一个setup()函数,且只调用一次。另需要注意的一点就是在setup()里声明的变量在其他函数里不能访问,包括draw()函数。

draw()

绘制函数,在setup()后执行,一个画布(sketch)只能有一个draw()函数,draw()自动触发,不需要手动执行。draw()函数是循环执行的,直到程序结束或者noLoop()方法被执行的时候停止执行。

draw()函数可以被noLoop()、redraw()、loop()、frameRate()函数影响:noLoop()可以让draw()停止运行,loop()让draw()继续运行,redraw()可以让draw()里面的内容执行一次,frameRate()可以决定draw()函数一秒钟内执行的次数。

需要注意的是,绘图坐标系统在每次执行draw()之前都会重置,比如在draw()内设置的各种坐标转换如scale, rotate,translate,在下一次draw()之前,都会被清空,但是设置的一些样式类的值会被保留。

比如略微修改demo中的代码:

var yPos = 0;
function setup() { // setup() runs once
    frameRate(30);
}
function draw() { // draw() loops forever, until stopped
    if (yPos == 20) {
        stroke(255, 204, 0);
        rotate(PI / 3.0);
    }
    background(204);
    yPos = yPos - 1;
    if (yPos < 0) {
        yPos = height;
    }
    line(0, yPos, width, yPos);
}

可以看出,在yPos=20的时候,线条旋转一下然后马上恢复,而线条颜色改变之后则一直保持不变。

remove()

这个比较好理解,就是删除呗,删除整个由P5.js创建的画布,包括由P5.js创建的canvas以及其他元素。事件、创造的全局对象也会被删除,只会留下一个p5变量便于创建新的画布,当然也可以手动给这个p5变量赋值为null来彻底删除。

noLoop()

上面说了,能使draw()停止。如果想在setup()里引用noLoop(),则noLoop()语句必须在setup()里的最后一行。如果noLoop()被执行了,那么通过一些事件处理函数比如mousePressed()、keyPressed()中设置的访问或操作screen对象的方法将失效。但是可以通过在这些事件处理函数中触发redraw()或loop()函数进而触发draw()函数,才能继续对screen对象进行更新。这意味着noLoop()被调用的时候,没有绘图动作正在进行,saveFrame()或loadPixels()等函数会失效。

需要注意的是,如果画布的大小被调整了,比如手动修改p5创建的canvas的大小,redraw()会被自动触发来更新画布,即使noLoop()已经执行了。

loop()

draw()被noLoop()停止的时候可以通过调用loop()函数重新执行。

push()&pop()

push()跟pop()一般成对出现,push()可以把当前的绘图状态如样式设置、旋转移动缩放的值存储起来,pop()则读取这些设置。理解起来也简单,比如某一种图形的设置比较常用,就可以用push()存储起来,之后可能会设置很多其他的样式来绘图,当遇到那个常用的图形,就不需要再重新写样式,直接pop()之前push()存储的样式就可以了。可以多次push(),也可以多次pop(),后进先出。

redraw()

执行一边draw()中的代码,进而对画布进行一次必要的更新。一般redraw()多用在各种事件中,比如mousePressed()、keyPressed()等。

可以给redraw()设置参数来指定redraw()的执行次数。比如redraw(5)。

参考:http://p5js.org/reference/#group-Structure,

未经允许不得转载:前端撸码笔记 » P5.js结构函数(Structure)粗解

上一篇:

下一篇: