V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Alander
V2EX  ›  程序员

发现个酷炫的动效用 webgl 写的,想知道这个雾化的轨迹计算是啥?

  •  
  •   Alander · 2019-11-22 14:03:27 +08:00 · 4266 次点击
    这是一个创建于 1832 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今天发现个网站: https://www.coloros.com/topic/coloros7.html

    这个网站的“专属艺术名片”页面,随着鼠标移动有雾化的彩色跟随

    想知道这个是如何计算轨迹的?

    有人能给出个大致方向吗?

    28 条回复    2019-11-23 03:43:42 +08:00
    meteor957
        1
    meteor957  
       2019-11-22 14:28:51 +08:00
    这动画确实挺秀
    Rhonin
        2
    Rhonin  
       2019-11-22 14:29:11 +08:00
    这就是个 canvas 吧,mousemove 事件?
    mengkun
        3
    mengkun  
       2019-11-22 14:43:07 +08:00   ❤️ 5
    用的是这个开源组件: https://github.com/PavelDoGreat/WebGL-Fluid-Simulation

    ----------
    题外话,coloros 这个页面感觉是实习生写的。这一连串的函数……无力吐槽
    https://i.loli.net/2019/11/22/Ia41eto5GnZFJCh.png
    Alander
        4
    Alander  
    OP
       2019-11-22 14:48:49 +08:00
    @mengkun 哈哈哈哈哈,十分感谢帮我找到这个组件,可是你是如何找到这个组件的呢?
    Alander
        5
    Alander  
    OP
       2019-11-22 14:49:19 +08:00
    @Rhonin 是的,确实是监听 mousemove 事件,只是好奇这个雾化的怎么做的
    JerryCha
        6
    JerryCha  
       2019-11-22 14:49:39 +08:00
    @mengkun j...jQuery ?????
    我还以为国内早就已经全面 ARV 化了。
    Alander
        7
    Alander  
    OP
       2019-11-22 14:52:14 +08:00
    @JerryCha 哈哈哈哈哈,在做这种小应用的时候,原生 + JQuery 可能更加快速能够出页面
    mengkun
        8
    mengkun  
       2019-11-22 14:54:36 +08:00
    @Alander 因为昨天晚上我也在思考和你这同样的问题……然后就研究了一下这个页面的源代码,然后就在 Github 上给找到了……
    meteor957
        9
    meteor957  
       2019-11-22 14:55:47 +08:00
    @mengkun 请问老哥 截图中看代码用的啥插件啊,可以格式化混淆后的 js 吗
    Alander
        10
    Alander  
    OP
       2019-11-22 14:56:25 +08:00
    @mengkun 哈哈哈哈哈哈,看来大家都比较好奇呀
    Alander
        11
    Alander  
    OP
       2019-11-22 15:01:08 +08:00
    @meteor957 格式化的话本身 chrome 的 devtools 就可以啊
    mengkun
        12
    mengkun  
       2019-11-22 15:02:18 +08:00
    @meteor957 插件是 iFormatTool,作者 @MaiCong
    格式化功能只能简单的排下版
    lvA
        13
    lvA  
       2019-11-22 15:04:24 +08:00
    是我机子垃圾吗有点卡啊
    coloz
        14
    coloz  
       2019-11-22 15:07:09 +08:00
    @lvA 1050ti 的笔记本表示,加载的时候卡
    Alander
        15
    Alander  
    OP
       2019-11-22 15:08:03 +08:00
    @coloz
    @lvA
    我公司辣鸡台式机感觉都很流畅啊,不知道啥情况
    yejinmo
        16
    yejinmo  
       2019-11-22 15:18:38 +08:00
    有没有有闲心的大佬提取下这个效果做 Wallpaper Engine 的壁纸啊。。
    Atukey
        17
    Atukey  
       2019-11-22 15:52:29 +08:00
    @yejinmo 好主意~
    yejinmo
        18
    yejinmo  
       2019-11-22 15:57:30 +08:00
    @Atukey #17

    js 被压缩混淆了。。看的头疼
    Jiajin
        19
    Jiajin  
       2019-11-22 16:18:31 +08:00
    这动画效果是挺帅的
    yangheng4922
        20
    yangheng4922  
       2019-11-22 16:20:52 +08:00
    @yejinmo 已经有了 网页的 我之前用过
    wednesdayco
        21
    wednesdayco  
       2019-11-22 16:20:56 +08:00
    我记得是 nvdia 出的源码
    yangheng4922
        22
    yangheng4922  
       2019-11-22 16:32:27 +08:00   ❤️ 1
    hyy1995
        23
    hyy1995  
       2019-11-22 17:22:19 +08:00
    挺酷
    secondwtq
        24
    secondwtq  
       2019-11-22 19:22:22 +08:00
    推荐 https://www.shadertoy.com/
    显卡不好慎开
    realpg
        25
    realpg  
       2019-11-22 19:28:11 +08:00
    以前还没有前端这个词的时候
    搞博客就喜欢搞这些没用的跟随鼠标特效

    现在这只是浏览器 API 多了 更酷炫一点
    Les1ie
        26
    Les1ie  
       2019-11-22 19:30:02 +08:00
    @yangheng4922 #22 少侠好功夫
    secondwtq
        27
    secondwtq  
       2019-11-22 19:32:48 +08:00
    @realpg 博客上面搞确实没用 ...
    这个用来宣传产品比放博客上稍微强那么一点点吧
    Cassius
        28
    Cassius  
       2019-11-23 03:43:42 +08:00 via Android   ❤️ 1
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1133 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 23:00 · PVG 07:00 · LAX 15:00 · JFK 18:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.