融入动画技术的音乐可视化交互技术——Fun Beats

灵感来源
音乐给人带来美好的沉浸感体验,那么随着乐感的律动欣赏有趣的特效,一定是一场绝妙的视听盛宴。Fun beats是我们大创项目正在研究的一款培养乐感的交互式小程序,在原有的框架上,我结合《代码本色》中的知识,添加了动态特效,融入动画技术,用户不仅可以选择歌曲,调整节奏、频率等,还可以自行选择喜欢的动画特效,体验到具有“形象”的乐曲~
开发环境:p5.js
《代码本色》中涉及到的技术:
第0章 perlin噪声
第1章 向量
第4章 粒子系统

功能介绍
融入动画技术的音乐可视化交互技术——Fun Beats_第1张图片
界面中下部分是控制面板:
融入动画技术的音乐可视化交互技术——Fun Beats_第2张图片
选择特效
选择歌曲
调节音量
调节频率
开始
暂停
功能展示:
特效1

特效2

特效3
融入动画技术的音乐可视化交互技术——Fun Beats_第3张图片
特效4

调节音量

调节频率

相关技术
Perlin噪声
Perlin噪声算法用于生成随机数,它能生成符合自然排序的伪随机数序列。在perlin这个特效中,使用perlin噪声控制粒子运动生成动画,其运动方向随鼠标的运动而改变。对应特效4。
融入动画技术的音乐可视化交互技术——Fun Beats_第4张图片
粒子系统
使用粒子系统实现飞溅动态效果的动画,该动画在processing上调试时实现,这里放初步调试动态图参考,后期主要的运行环境都是基于p5.js.对应特效2

融入动画技术的音乐可视化交互技术——Fun Beats_第5张图片
运动特效
在特效中使用向量、三角函数知识控制粒子随音频运动轨迹,对应特效3融入动画技术的音乐可视化交互技术——Fun Beats_第6张图片
在研究代码本色这本书时,我体验到了很多代码暗藏的“本领”,程序语言并不仅仅是冷冰冰的代码,它可以是有声音的,有画面的,极富有艺术感的,而且能让你参与其中的。对代码的趣味研究并不会随着这次互动媒体课程的结束而结束,这片领域的知识内容值得我们花更过的时间去钻研。希望每个学习这本书的同学都能学有所获~

你可能感兴趣的:(融入动画技术的音乐可视化交互技术——Fun Beats)