siri 声波效果. 请自备支持 HTML5 的浏览器

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3833 天前的主题，其中的信息可能已经有所发展或是发生改变。

demo: http://blog.kidliaa.com/demo/siri%20wave

前两天特别想亲手写一个siri打开时的动画效果. 发现这个siri动画效果并不是那么简单. 当初认为用bezier曲线就能做到,后来发现没那么简单...搜索后发现完成这样的效果需要用到一个方程:

1. 衰弱方程

尼玛,根本就没接触过啊(大学不是学数学的).方程也就算了,尼玛还要自己调参数. 深深的挫败感,我还是好好学习去吧.

PS: v2ex上做交互的大牛,希望听一下你们是怎么学习(数学怎么学,如何在代码中实践)

方程

Siri

效果

28 条回复 • 2015-01-16 17:53:11 +08:00

liteneo

2014-06-14 15:38:38 +08:00

感觉更像水波。。。

liaa

2014-06-14 15:44:38 +08:00

@liteneo 它们本来就很像的...

dongbeta

2014-06-14 16:17:07 +08:00

振幅不变化好生硬，如果可以监测鼠标点击模拟声音输入的强度来调整振幅的话，就太好了。

liaa

2014-06-14 16:19:39 +08:00

@dongbeta 目前是根据背景音乐来调整幅度的.

PS: 请使用Chrome观看

ChiangDi

2014-06-14 18:08:18 +08:00

优雅，艺术

RIcter

2014-06-14 19:36:42 +08:00

好贊！！！！
求放到github 0w0

xxr3376

2014-06-14 20:36:57 +08:00

@liaa 可以考虑调用Audio API，直接读取麦克风的声音呀！以及求github开源！

liaa

2014-06-14 21:07:59 +08:00

@RIcter @xxr3376 直接看index.js就好了. 如果想要控制曲线的化.可以修改 Noise和F参数

Noise: 控制震动幅度(0~1, 越大曲线震动的越高)
F : 控制单个波浪起伏的个数

目前我就是读取音源的声音大小来更新这两个值的.

xxr3376

2014-06-14 21:25:58 +08:00

@liaa Thx

zhujinliang

2014-06-14 21:51:34 +08:00

挺不错,赞一个
同用到数学公式时深深的挫败感

RIcter

2014-06-14 22:19:27 +08:00

@liaa 震動的寬度範圍能不能調整，我想再讓它往兩邊拉伸一下>_>

liaa

2014-06-14 22:25:37 +08:00

@RIcter 调整K值即可

Mutoo

2014-06-14 23:22:29 +08:00

推荐你一个大神的博客 acko.net
他的两个讲座非常棒：
Making Things With Maths
Making WebGL Dance

Dzinlife

2014-06-14 23:47:28 +08:00

https://github.com/CaffeinaLab/SiriWaveJS

liaa

2014-06-14 23:58:24 +08:00

@Dzinlife 是的,在这基础上做的...

Dzinlife

2014-06-15 03:13:11 +08:00

@liaa 哦，那就根本没牵扯到图形算法嘛，不过你改变系数的时候至少要做一层缓冲，突变是非常生硬的。

cnallenzhao

2014-06-15 03:25:34 +08:00

背景音很好听，求一发。。

GPU

2014-06-15 14:18:30 +08:00

Chrome 35 稳定版，加载5分钟反应呢？

Vindia

2014-06-15 14:20:41 +08:00

@liaa 求BGM

GPU

2014-06-15 14:21:09 +08:00

@liaa 好吧。第一次加载没反应。需要刷新一下才加载成功。还有可以自定义歌曲吗？

Exin

2014-06-15 20:35:32 +08:00

求BGM

liaa

2014-06-15 22:18:17 +08:00

@cnallenzhao @Vindia @Exin http://blog.kidliaa.com/demo/siri%20wave/sound.mp3

@Dzinlife 是的,也发现这个问题. 接下来要弄这个(其实现在还不知道怎么弄).

Dzinlife

2014-06-15 23:51:05 +08:00

@liaa https://gist.github.com/Dzinlife/0eb9b949e698d23ae19d

liaa

2014-06-16 01:10:07 +08:00

@Dzinlife 使用之后效果真的很明显,谢谢指点.

让我想到了这句话:
Math is hard, use computer.
Computer is hard, use Math.

另外希望能指点一下应该如何系统的来学习这些东西.上网搜了Interactive Design之类的,也没能看到一些好的答案.

Dzinlife

2014-06-16 02:08:40 +08:00

@liaa 这类东西似乎是 processing 拥有最多的教学资源。D3.js 和 paper.js 官网的showcase里不少大牛的blog也不错。还有就是 codepen.com。

vagrancy

2015-01-16 14:13:42 +08:00

这个波形的算法，在音乐比较激烈的情况，由于波形衰减速度过慢，导致整个波形一直维持在一个水平上看不出变化，哪个参数能够加快衰减速度呢。

vagrancy

2015-01-16 15:51:33 +08:00

@liaa 请作者关注下啊

liaa

2015-01-16 17:53:11 +08:00

@vagrancy Dzinife 的公式

const double ALPHA = 0.05;
resultSpeed = ALPHA * currentSpeed + (1.0 - ALPHA) * resultSpeed;

修改ALPHA 参数。