V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
liaa
V2EX  ›  分享创造

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

  •  1
     
  •   liaa · 2014-06-14 15:32:33 +08:00 · 8639 次点击
    这是一个创建于 3822 天前的主题,其中的信息可能已经有所发展或是发生改变。
    demo: http://blog.kidliaa.com/demo/siri%20wave

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

    1. 衰弱方程

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

    PS: v2ex上做交互的大牛,希望听一下你们是怎么学习(数学怎么学,如何在代码中实践)
    28 条回复    2015-01-16 17:53:11 +08:00
    liteneo
        1
    liteneo  
       2014-06-14 15:38:38 +08:00
    感觉更像水波。。。
    liaa
        2
    liaa  
    OP
       2014-06-14 15:44:38 +08:00
    @liteneo 它们本来就很像的...
    dongbeta
        3
    dongbeta  
       2014-06-14 16:17:07 +08:00
    振幅不变化好生硬,如果可以监测鼠标点击模拟声音输入的强度来调整振幅的话,就太好了。
    liaa
        4
    liaa  
    OP
       2014-06-14 16:19:39 +08:00
    @dongbeta 目前是根据背景音乐来调整幅度的.

    PS: 请使用Chrome观看
    ChiangDi
        5
    ChiangDi  
       2014-06-14 18:08:18 +08:00
    优雅,艺术
    RIcter
        6
    RIcter  
       2014-06-14 19:36:42 +08:00
    好贊!!!!
    求放到github 0w0
    xxr3376
        7
    xxr3376  
       2014-06-14 20:36:57 +08:00
    @liaa 可以考虑调用Audio API,直接读取麦克风的声音呀!以及求github开源!
    liaa
        8
    liaa  
    OP
       2014-06-14 21:07:59 +08:00
    @RIcter @xxr3376 直接看index.js就好了. 如果想要控制曲线的化.可以修改 Noise和F参数

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

    目前我就是读取音源的声音大小来更新这两个值的.
    xxr3376
        9
    xxr3376  
       2014-06-14 21:25:58 +08:00
    @liaa Thx
    zhujinliang
        10
    zhujinliang  
       2014-06-14 21:51:34 +08:00
    挺不错,赞一个
    同用到数学公式时深深的挫败感
    RIcter
        11
    RIcter  
       2014-06-14 22:19:27 +08:00
    @liaa 震動的寬度範圍能不能調整,我想再讓它往兩邊拉伸一下>_>
    liaa
        12
    liaa  
    OP
       2014-06-14 22:25:37 +08:00
    @RIcter 调整K值即可
    Mutoo
        13
    Mutoo  
       2014-06-14 23:22:29 +08:00   ❤️ 2
    推荐你一个大神的博客 acko.net
    他的两个讲座非常棒:
    Making Things With Maths
    Making WebGL Dance
    Dzinlife
        14
    Dzinlife  
       2014-06-14 23:47:28 +08:00
    liaa
        15
    liaa  
    OP
       2014-06-14 23:58:24 +08:00
    @Dzinlife 是的,在这基础上做的...
    Dzinlife
        16
    Dzinlife  
       2014-06-15 03:13:11 +08:00
    @liaa 哦,那就根本没牵扯到图形算法嘛,不过你改变系数的时候至少要做一层缓冲,突变是非常生硬的。
    cnallenzhao
        17
    cnallenzhao  
       2014-06-15 03:25:34 +08:00
    背景音很好听,求一发。。
    GPU
        18
    GPU  
       2014-06-15 14:18:30 +08:00
    Chrome 35 稳定版 , 加载5分钟反应呢?
    Vindia
        19
    Vindia  
       2014-06-15 14:20:41 +08:00
    @liaa 求BGM
    GPU
        20
    GPU  
       2014-06-15 14:21:09 +08:00
    @liaa 好吧 。第一次加载没反应 。需要刷新一下才加载成功 。还有可以自定义歌曲吗?
    Exin
        21
    Exin  
       2014-06-15 20:35:32 +08:00
    求BGM
    liaa
        22
    liaa  
    OP
       2014-06-15 22:18:17 +08:00   ❤️ 1
    @cnallenzhao @Vindia @Exin http://blog.kidliaa.com/demo/siri%20wave/sound.mp3

    @Dzinlife 是的,也发现这个问题. 接下来要弄这个(其实现在还不知道怎么弄).
    Dzinlife
        23
    Dzinlife  
       2014-06-15 23:51:05 +08:00   ❤️ 1
    liaa
        24
    liaa  
    OP
       2014-06-16 01:10:07 +08:00
    @Dzinlife 使用之后效果真的很明显,谢谢指点.

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

    另外希望能指点一下应该如何系统的来学习这些东西.上网搜了Interactive Design之类的,也没能看到一些好的答案.
    Dzinlife
        25
    Dzinlife  
       2014-06-16 02:08:40 +08:00   ❤️ 1
    @liaa 这类东西似乎是 processing 拥有最多的教学资源。D3.js 和 paper.js 官网的showcase里不少大牛的blog也不错。还有就是 codepen.com
    vagrancy
        26
    vagrancy  
       2015-01-16 14:13:42 +08:00
    这个波形的算法,在音乐比较激烈的情况,由于波形衰减速度过慢,导致整个波形一直维持在一个水平上看不出变化,哪个参数能够加快衰减速度呢。
    vagrancy
        27
    vagrancy  
       2015-01-16 15:51:33 +08:00
    @liaa 请作者关注下啊
    liaa
        28
    liaa  
    OP
       2015-01-16 17:53:11 +08:00   ❤️ 1
    @vagrancy Dzinife 的公式

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

    修改ALPHA 参数。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2700 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 12:10 · PVG 20:10 · LAX 04:10 · JFK 07:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.