动画&交互&P5.js

最新推荐文章于 2022-12-23 08:09:44 发布

REDswag

最新推荐文章于 2022-12-23 08:09:44 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/Yangjin121/article/details/89603871

版权

这篇博客介绍了p5.js编程库，它是基于JavaScript的，用于创作视觉艺术和交互式动画。文章讨论了p5.js与Processing的区别，如size()替换为createCanvas()，并解释了如何处理异步加载、鼠标和触摸事件。此外，还提到了《代码本色》这本书作为灵感来源，介绍了通过鼠标点击改变颜色和实现粒子系统的创意功能。

摘要由CSDN通过智能技术生成

一、背景

编程语言：p5.js，p5.js是JavaScript的程式库，它起源于processing的原旨。

p5.js 看起来与 Processing 非常相似，但有一些变化：

因为 size() 已经被 createCanvas() 代替，所以我们的草图不仅仅是画布，还能创建其他元素。
frameRate(num) 设置帧速率，但该 frameRate 变量已被删除。要获取当前帧速率，请用 frameRate() 不带参数调用。
JavaScript 并不总能同步加载，下面有几个方法可解决这个问题：
① 所有的加载方法都有一个可选的回调参数。也就是在文件加载完后调用的函数。
② 另外，我们可以将加载调用放在 preload() 函数中，其发生在 setup() 之前。如果存在 preload() 函数，则 setup() 函数会等待，直到加载完所有内容为止。
变量 mousePressed 已替换成 mouseIsPressed 。
除鼠标事件外，还有触摸事件，映射如下所示：
① mouseX 〜 touchX
② mouseY 〜 touchY
③ mousePressed() 〜 touchStarted()
④ mouseDragged() 〜 touchMoved()
⑤ mouseReleased() 〜 touchEnded()
⑥ 有一个 touches[] 数组包含一系列对象，其中 x 和 y 属性对应于每个手指的位置。
push/popMatrix() 、push/popStyle() 已替换为 push() 和 pop() ，这相当于同时调用 matrix 和 style 方法。
默认情况下