注意:
1. 最好先在https://editor.p5js.org/上写好想要的效果再往vue上移,不过直接在vue上写也行;
2. 关于p5js: 先在global mode下写再转化成 instance mode 比较简单,但直接在 instance mode下写也行;
关于这两种mode: https://github.com/processing/p5.js/wiki/Global-and-instance-mode
3. 关于引入p5js: 用npm会有问题,我是用的cdn, 既要引入p5.js也要引入p5.sound.js
4. http协议下不行哦,要https或者localhost才行
最终代码:
/* eslint-disable */
//p5js代码,看起来和一般的不一样因为是 instance mode
const s = sketch => {
//要取得多少个不同频率的音量数据
const ORI_NUM = 64
//要显示多少个不同频率的音量数据
const NUM = 48
//图案的最长和最短
const MIN_LENGTH = 112.5
const MAX_LENGTH = 185
//那个一条一条的图案的宽高
const WID = 3
const HIG = 70
//最后的颜色再变得亮一点,有多亮
const WHITE = 20
//图案里,条的颜色默认值rgba
let color1 = [255, 255, 255, 180]
//图案里,面的颜色默认值rgba
let color2 = [255, 255, 255, 150]
//存储fft对象
let fft
sketch.setup = () => {
//取得图片dom并载入
let imgDom = document.querySelector('.middle img')
sketch.loadImage(imgDom.src, afterLoadImg)
//要把canvas放到哪个div里面&#