p5.sound实现音乐可视化漩涡流星动画效果代码
代码语言:html
所属分类:动画
代码描述:p5.sound实现音乐可视化漩涡流星动画效果代码
代码标签: p5.sound 音乐 可视化 漩涡 流星 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { margin: 0; padding: 0; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5-1.9.0.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.sound.1.9.0.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sketch.min.js"></script> </head> <body> <script > let syllable_1_1; let syllable_2_6 = false; let syllable_3_5 = []; let syllable_1_5; let syllable_2_5; let syllable_1_4; function preload() { syllable_1_1 = loadSound( "//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3" ); } function setup() { syllable_1_2 = createCanvas(windowWidth, windowHeight); syllable_1_3 = angleMode(DEGREES); syllable_1_1.amp(0.6); syllable_1_4 = new p5.FFT(); syllable_1_5 = syllable_1_4.analyze(); for (let i = 0; i < syllable_1_5.length; i++) { syllable_3_5[i] = { x: map(i, 0, syllable_1_5.length, 0, width / 2 - 20), theta: random(0, 360) }; } } function draw() { syllable_2_1 = translate(width / 2, height / 2); syllable_2_2 = checkPlay(); syllable_2_3 = background( 105 * abs(cos(frameCount / 50)), 165 * abs(cos(frameCount / 50)), 195 * abs(cos(frameCount / 50)), 10 ); syllable_2_4 = soundProcess(); } function soundProcess() { syllable_1_5 = syllable_1_4.analyze(); syllable_2_5 = syl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0