未分類
3 2 月 2021

几乎 100% 还原了黑客帝国中的代码雨特效

几乎 100% 还原了黑客帝国中的代码雨特效

資深大佬 : M3oM3oBug 12

演示地址 CodePen 此示例可以轻易自定义各种参数，或者嵌入自己的网站。

虽然我现在做前端 Web 开发，但是做页面或业务还是及不上自己创造的感觉，所以在一段努力之后创造了基于 HTML5 Canvas 2d 的开发框架 janvas。

在此基础上开发了一些示例的代码：janvasexamples

目前在考虑想接需求，或者大家有推荐的好点的做内容输出的网站吗，比如 CSDN 一类的。

顺便可不可以求一点小心心。

大佬有話說 (86)

  • 資深大佬 : beimenjun

    感觉挺有趣的

  • 資深大佬 : oubfgiar

    喜欢

  • 資深大佬 : ijrou

    挺有意思的~~

  • 資深大佬 : leonidas

    sixsixsix

  • 資深大佬 : youla

    我想放在我的博客园里。

  • 資深大佬 : wdytoya

    牛逼

  • 資深大佬 : youla

    博客园加入了~~嘻嘻，博客园的代码乱糟糟的，也没时间整理，加上去毫无违和感~ https://www.cnblogs.com/iamverylovely

  • 主 資深大佬 : M3oM3oBug

    @youla 放吧，引入 janvasexamples 库或者单独复制那段代码，直接以 document.body 为容器就可以

  • 主 資深大佬 : M3oM3oBug

    @youla 可爱风的博客园啊哈哈，你也可以考虑在 props 里自己修改一些配置适配这个可爱风~

  • 資深大佬 : youla

    @M3oM3oBug 做得太水了，之前刚学习前端时，草草做的页面，代码还是 jquery 拼接，导致我已经没办法写代码了，发 /浏览 博客的功能都被搞丢了，有时间的话可能会用 vue.min.js 全部改了。之前上面原有的 console 是可以输内容的，rm -rf / 回车就会执行 document.body.innerHTML=”把页面清空。因为这个挺好看的，所以就直接把之前的功能换掉了，感谢！！！

  • 資深大佬 : IsaacYoung

    666

  • 資深大佬 : dartabe

    喜欢 很好看

  • 資深大佬 : roshad

    ？黑客帝国全是日语吗？我看的时候没发现

  • 資深大佬 : OHyn

    很漂亮！

  • 資深大佬 : DylanZ

    @roshad 原版是日文菜单 ：）

  • 主 資深大佬 : M3oM3oBug

    @roshad [这个](

  • 主 資深大佬 : M3oM3oBug

    @DylanZ 搞得到这个菜单吗哈哈，那这样就更加几乎 100% 还原了

  • 資深大佬 : x86

    07 年那会很多黑页都是这个

  • 資深大佬 : revalue

    万人血书火星文版

  • 資深大佬 : cigarzh

    不支持 Safari ？

  • 資深大佬 : sasalemma

    GOOD ！先藏一份

  • 主 資深大佬 : M3oM3oBug

    @revalue 你进那个 CodePen 的地址，改 chars: “添加你想要的字符”.split(“”) 就可以了

    @cigarzh 我手机的 Safari 可以的诶刚刚试了

  • 資深大佬 : hantsy

    大学时候最这个最初是用 Flash ActionScript 编程实现的。

  • 資深大佬 : guanhui07

    还可以

  • 資深大佬 : hantsy

    Flash 动画还是经典的火柴人，把成龙那些招势全部加入了。

  • 資深大佬 : Kiske

    大佬, 我可以把它发布在 steam wallpaper engine 的创意工坊里吗

  • 主 資深大佬 : M3oM3oBug

    @hantsy 以后需要 Flash 处理的内容会不会有可能转变为 Canvas 需求，或者是舍弃了那些需求还是换了什么其他的解决方案呢？。

    @Kiske 标注出处就行，你是想把桌面背景换成这嘛哈哈。

  • 資深大佬 : 580a388da131

    额，为啥现在突然想起搞这个了？
    我还以为谁在挖坟。

  • 資深大佬 : jiangfkyyy

    6666

  • 主 資深大佬 : M3oM3oBug

    @580a388da131 为了给 [janvas]( https://github.com/jarenchow/janvas) 求小心心呀。。基于此高效绘制的

  • 資深大佬 : konnnnn

    原版是从他妻子的菜谱上随便找的

  • 資深大佬 : vfxx

    喜欢

  • 資深大佬 : Kilerd

    好家伙，吃掉了我 30% 的 CPU 资源

  • 資深大佬 : ligiggy

    @youla 我 tmd 快被二次元声音吓死了

  • 資深大佬 : magic3584

    @youla #7 为啥 safari 访问就看不到效果

  • 主 資深大佬 : M3oM3oBug

    @Kilerd 我处理器 E3-1231v3 也是差不多，为了尽可能还原原特效：
    每个 Text 都在进行矩阵变换（左右上下翻转），Text 的 Hsl 颜色饱和度和亮度都是不同的，拖尾效果是留下了一个 Text 并按照颜色的亮度决定透明度减小直到消失后复用
    感觉最主要消耗时间的还是原生的 fillText 方法，这我也没法处理哈哈
    其实已经很快了，谁能复现这个且比我的占用更低我拜他为师，嗑仨响头的那种

  • 資深大佬 : youla

    @ligiggy 一直准备换个温柔点的，忘了。。

    @magic3584 因为我引用了一个叫 pixi.js 的 sdk，我用的最新版，貌似除了 chrome 都不支持。

  • 資深大佬 : love

    原版似乎要密要快，这个一开始太稀稀拉拉了没那种感觉

  • 資深大佬 : James369

    1.缺少三维空间感。2. 字体太圆润细腻，缺少黑客科技感。

  • 資深大佬 : mathzhaoliang

    建议直接嵌入 shader 代码，用 neo 躲子弹的视频做动作纹理。

    https://www.shadertoy.com/view/lsXSDn

    js 写的肯定不如 shader 效果屌炸。

  • 資深大佬 : EGOISTK21

    很棒，已收藏

  • 資深大佬 : dartabe

    @mathzhaoliang 你发的这个效果比主的差远了 不知道你仔细看了没

  • 資深大佬 : Hugehard

    @Kiske #26 给个地址，我也做桌面看看效果

  • 資深大佬 : youla

    @mathzhaoliang 你发的这个虽然看着是比较炫酷，但是确实比主的差了点精致。

  • 資深大佬 : towser

    以前很多黑客网站首页都是这种特效，还伴随着不约而同但也不知道叫什么名的振奋音乐。

  • 資深大佬 : Kiske

    @Hugehard 我没有验证手机号,链接直接发不出来, 用 base64 解码以下

    aHR0cHM6Ly9zdGVhbWNvbW11bml0eS5jb20vc2hhcmVkZmlsZXMvZmlsZWRldGFpbHMvP2lkPTIzNjMzNTYzNzM=

  • 資深大佬 : MasterMonkey

    不行，我也得造一个

  • 資深大佬 : lifetimeporn

    能调整速度吗？

  • 主 資深大佬 : M3oM3oBug

    @MasterMonkey 一起玩啊造啊哈哈

    @lifetimeporn coderain.js 中 `head.timespan = this.rand(50, 100, true);` 是调整速度的，随机了一个 50 到 100 之间的值，这个值代表 50~100 毫秒触发一次变动，可以用那个 [CodePen]( https://codepen.io/jarenchow/pen/rNMQpMe) 试试。

  • 資深大佬 : jingslunt

    @Kiske 做等效果，放 18+区域

  • 資深大佬 : whitehack

    只有我发现这不是开源项目吗? 而且还没有 ts 定义

  • 資深大佬 : p1gd0g

    已经出现的字符不是不会变吗？
    （我在关注些什么。。。

  • 資深大佬 : li492135501

    最下面的是不是堆到一起去了

  • 資深大佬 : ETiV

    想起了当年玩 Flash 的时光…

  • 資深大佬 : gkiwi

    棒！

  • 資深大佬 : mathzhaoliang

    @youla
    @dartabe

    不敢赞同二位。

  • 資深大佬 : ysmood

    https://matrix.logic-wire.de/

  • 資深大佬 : xiangbing74

    把文字改成唐诗 300 首 我觉得可行 哈哈哈

  • 資深大佬 : hantsy

    @M3oM3oBug 今天看到一个大新闻，大连铁路局某系统，由于新采购的电脑一些系统没有预安装 Flash，无法登录到 XX 系统，导致服务大面积 XXX 。专家连夜奋斗 XX 小时，最终找到问题所在，安装回 Flash 成功解决问题。

  • 資深大佬 : hantsy

    黑客帝国应该重新翻拍一下，当时只是互联网刚刚兴起。

    现在的题材太多 ，可以发挥的东西太多了，更有意思。

  • 資深大佬 : pigmen

    可不可以纯 CSS 实现

  • 資深大佬 : nekolr

    很棒！

  • 資深大佬 : jackmod

    确实超赞

  • 資深大佬 : DylanZ

    @M3oM3oBug 当年很多人都以为《黑客帝国》里面有日本文字的原因是因为导演华卓斯基姐妹（原来是兄弟，后来变性）喜爱日本的文化，不过最近《黑客帝国》的美术指导 Simon Whitley 说道“《黑客帝国》的瀑布文字其实是日文片假名的寿司菜单”

    为什么会这样呢？根据 Simon Whitely 介绍，他的妻子是一个日本人，当年想不出什么创意，刚好发现了他妻子收藏的食谱，扫了扫他妻子的食谱之后便诞生了用这个食谱来充当黑客的瀑布流文字的特效素材。

    原文網址： https://kknews.cc/news/pe4vn5j.html

    难度有点大哈哈

  • 資深大佬 : IgniteWhite

    之前我为了屏保找过很多这个效果，主是我见过做的最好的

  • 資深大佬 : Augi

    已 star

  • 資深大佬 : jqtmviyu

    这不来段大悲咒[: 狗头]

  • 資深大佬 : WishMeLz

    我大一的时候在 jq22 上面看到过这个，一模一样

  • 資深大佬 : Desiree

    文艺复兴

  • 資深大佬 : ai277014717

    感觉文字密度有点低。没有信息量爆炸的感觉

  • 資深大佬 : amwyyyy

    666， 能飞快点就好了

  • 資深大佬 : zaul

    有点东西

  • 資深大佬 : zhuangjia

    打开网页，F11

  • 資深大佬 : b1ackjack

    之前见过其他人的实现，主的实现也很酷，感觉主的字体偏亮，效果更好看

  • 資深大佬 : yeeyeung

    好想做成桌面啊！

  • 資深大佬 : mlxj

    因曲思婷

  • 資深大佬 : MxxIsBest

    为啥是日文符号？

  • 資深大佬 : Ritter

    666

  • 資深大佬 : lithiumii

    @MxxIsBest 电影里就是，抄的寿司菜单

  • 資深大佬 : tachikomachann

    @roshad 这就要说到攻壳机动队了

  • 資深大佬 : linziyanleo

    大佬太强 666

  • 資深大佬 : ispinfx

    一打开我以为我要进化了

  • 資深大佬 : xuboying

    这个效果已经是见过的特效里算非常优秀的了，但是要 100%还原最好还能做点前后虚化效果和光晕。

  • 資深大佬 : idealhs

    @hantsy 你真的看过黑客帝国吗，电影跟互联网有什么关系。整部片子讨论的是真实与虚无这样一个哲学题材，别对着标题望文生义了。

  • 資深大佬 : Lemeng

    有点意思呢

  • 資深大佬 : CallMeReznov

    文艺复兴