0.0.2 • Published 3 years ago
template-p5 v0.0.2
ts-p5
ts-p5 为了提供给 p5 提供更好的代码提示,与更符合初学者直觉的书写方式。
如何写?
import { sketchCreator } from 'ts-p5';
import { getWindowSize } from 'ts-p5/utils';
sketchCreator(
{
preload: function () {},
setup: function (p) {
const { width, height } = getWindowSize();
p.createCanvas(width, height);
p.background(0);
},
draw: function (p) {
p.background(0);
p.noStroke();
},
mousePressed: function (p) {
console.log(p.mouseX);
console.log(p.mouseY);
},
},
document.querySelector('#sketch')
);
utils
import { map, getWindowSize } from 'ts-p5/utils'
将常用的函数实现了一遍放在该文件夹下,方便使用。
Service
将动画效果抽象为一项服务是解耦的重点。
例如下雨动画中,我们将雨滴储存在一个数组中 raindrops: Raindrop
,通过 update
方法更新雨滴的数量。
0.0.2
3 years ago