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

最新推荐文章于 2019-11-05 09:05:00 发布
最新推荐文章于 2019-11-05 09:05:00 发布
阅读量1.5k 收藏 30
点赞数 7
文章标签： 互动设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42312339/article/details/89856289
版权

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

功能介绍
在这里插入图片描述
界面中下部分是控制面板：
在这里插入图片描述
选择特效
选择歌曲
调节音量
调节频率
开始
暂停
功能展示：
特效1
在这里插入图片描述
特效2

最低0.47元/天 解锁文章
吴粤
关注
  • 7
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
p5.js 交互应用实战 —— 音乐可视化(案例)
拾一_M的博客
05-21 6156
案例一 将振幅转化为图形 准备工作：打开编辑器左边菜单，upload mp3音乐素材（不超过5m） //定义变量 //Sound–声音, amplitude–振幅 let Sound, amplitude; //1.预读器（新建函数用来读取上传的音频） function preload(){ Sound = loadSound(‘sound.mp3’); } //2.初始化 function setup(){ createCanvas(400,400); amplitude = new p5.Amplit
【花雕动手做】有趣好玩的音乐可视化系列小项目（01）---三色LED音乐节奏灯
雕爷学编程
08-28 1008
音乐可视化，是指一种以视觉为核心，以音乐为载体，以大众为诉求对象，借助多种新媒体技术等传播媒介，通过画面、影像来诠释音乐内容的、视听结合的大众化传播方式。这个专题的难度有点高，涉及面也比较广泛，相关的FFT和FHT等算法也相当复杂，不过还是打算从最简单的开始，实际动手做做试验，耐心尝试一下各种方案，逐步积累些有用的音乐频谱可视化的资料，也会争取成型一些实用好玩的音乐可视器项目。音乐可视化的目的是为了增强音乐的感知和欣赏，创造一种多感官的体验，或者用于艺术、教育、娱乐和研究的目的2。
music-visualization:用Java制作实时音乐可视化的原型。 https
05-08
实时音乐可视化 该软件包含一组实时的实时音乐可视化原型，这是我作为2010年在Oberlin College的计算机科学本科论文项目的一部分开发的。 该项目的目的是设计和实现一个应用程序，该应用程序通过（希望）对音高，响度和音调等功能进行信息丰富且直观的可视化，从而在音乐家练习时提供实时反馈源，从而帮助音乐家。 有关该项目的更多信息，请参见。 最终原型的屏幕截图： 如何使用 该软件需要才能运行。 您的计算机还需要有一个麦克风。 如果您不想自己构建二进制发行版，则可以使用。 下载music-visualization-dist.zip文件并解压缩内容。 在该文件夹内，运行java -jar music-visualization.jar或双击jar文件。 将出现一个小屏幕，使您可以从几种不同的可视化效果中进行选择。 您也可以暂停/继续并从该屏幕退出程序。 带时间戳的wav文件将在当
JAVA画出wav音频波形图
lt1983lt的专栏
05-31 4042
字号：大中小import java.awt.Graphics; import java.io.File; import javax.sound.sampled.AudioFormat; import javax.sound.sampled.AudioInputStream; import javax.sound.sampled.AudioSystem; import javax.sound.sampled.DataLine; import javax.sound.sampled.SourceDataLine
processing 星空图数据可视化效果
04-12
用processing写的数据可视化的效果，具体分析的是企业网络数据，约十万行的数据。。采用的可视化效果是星空图。星空图有简单的交互功能。 自己参考文献写出来的小东西，没有用什么高深的算法，很简单理解。 做了一些优化，运行速度可以蛮快的，可以接受。
数据可视化技术及其原理-简介.docx
12-18
数据可视化技术的应用领域非常广泛，涉及计算机视觉、图形绘制设计、数据采集、统计学、图解技术、数型结合、动画、立体渲染、用户交互、影像学、视知觉、空间分析、科学建模等诸多领域。数据可视化技术的发展将会对...
Python可视化交互库——dash
05-06
Python可视化交互库——dash https://xercis.blog.csdn.net/article/details/107056777
多媒体大数据的可视化与交互技术.pptx
最新发布
05-23
解决方案,研究报告,行业报告
大数据可视化技术面临的挑战及应对措施
02-24
从大数据本身的特点及其应用需求出发，结合数据可视化的研究现状，介绍了适用于大数据的数据可视化技术;分析在大数据条件下数据可视化所要解决的8个关键问题;讨论了针对大数据可视化应用需求自主研发的交互式可视化...
数据可视化与人机交互技术
01-23
数据可视化与人机交互技术
数据可视化之davinci
10-08
从今天开始，我会持续的讲解Davinci从入门到放弃相关视频。视频和相关的软件，我都会以百度云盘的方式，长期免费分享！ 视频和相关软件以百度云盘的方式，分享出来如下： 链接：https://pan.baidu.com/s/1rJ9-cTWRH0X0-5MVLZ9b3w 提取码：feig 课程中的笔记：https://blog.51cto.com/51power
由p5js及其p5sound库支持的现代线条式声音可视化
08-10
由p5js及其p5.sound库支持的现代线条式声音可视化
audioviz-experiments：使用p5.js创建的视听实验的集合
02-06
Audioviz实验 使用和创建的视听实验的集合。 查看现有草图。 跑 cd到项目文件夹，然后npm install安装依赖项。 npm start启动服务器。 打开浏览器： http://localhost:8080 作者
ym_java_音乐可视化_android_
10-03
介绍：Android下的音乐可视化效果源码，效果非常好
processing 实现声音交互
10-08
【搬运】processing 实现声音交互
Java实现歌曲可视化效果
by2n的专栏
05-22 2411
mport java.awt.Graphics; import java.io.File; import javax.sound.sampled.AudioFormat; import javax.sound.sampled.AudioInputStream; import javax.sound.sampled.AudioSystem; import javax.sound.
【小白篇】Processing 配合麦克风的实时声音可视化
热门推荐
升卿
10-28 1万+
Processing如何实现声音可视化呢？ - 必要条件：音频文件数字化； - 实现方式：逐点取出音频频率； - 呈现方式：基本形状，DIY……创意才是灵魂。 本教程主要介绍如何获取麦克风的立体声输入，并对其进行简单的可视化操作。
js可视化音频
xianghai
11-05 1577
var canvas = document.createElement("canvas"); canvas.width = 100; canvas.height = 180; var ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.strokeStyle = "blue"; ct...
【Processing入门】第九章:视频音频
Row Row Row your boat
10-25 4043
/** * Loop. * * Shows how to load and play a QuickTime movie file. * */ import processing.video.*; Movie movie; void setup() { size(640, 360); background(0); // Load and play the vid
利用D3技术写交互式的数据可视化界面系统代码
05-27
好的，下面是一个简单的利用D3技术写交互式的数据可视化界面系统的代码示例，供您参考： ```javascript // 定义数据 var dataset = [4, 8, 15, 16, 23, 42]; // 创建SVG画布 var svg = d3.select("body") .append...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值