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

V2EX = way to explore

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

现在注册

已注册用户请登录

爱意满满的作品展示区。

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

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

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

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

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

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

第 1 条附言 · 2021-01-19 21:22:17 +08:00

没想到得到这么多关注。。 @xuboying 朋友提到了虚化效果和光晕，不介意性能再涨一点点的朋友可以手动在 init() 方法中添加这行： this.$cfg.setShadowStyles(new janvas.ShadowStyle().setShadowColor("rgba(0, 255, 0, 0.3)").setShadowBlur(10)); 添加了阴影会更迷幻一点。。还有朋友说数量似乎少了，其实原视频里貌似就差不多这个数量，不介意性能想更多数量可以修改 resize() 方法中 this.count = Math.floor(this.column / 4); 的值，4 改成 2 就加一倍数量了可以在 CodePen 尝试一下

示例

代码

csdn

codepen

89 条回复 • 2021-01-22 17:40:24 +08:00

beimenjun

2021-01-16 12:31:33 +08:00

感觉挺有趣的

oubfgiar

2021-01-16 12:33:47 +08:00 via iPhone

喜欢

ijrou

2021-01-16 12:38:53 +08:00

挺有意思的~~

leonidas

2021-01-16 12:39:08 +08:00

sixsixsix

youla

2021-01-16 12:45:50 +08:00

我想放在我的博客园里。

wdytoya

2021-01-16 12:50:13 +08:00

牛逼

youla

2021-01-16 12:56:29 +08:00

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

M3oM3oBug

2021-01-16 12:57:28 +08:00

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

M3oM3oBug

2021-01-16 13:02:18 +08:00

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

youla

2021-01-16 13:14:22 +08:00

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

IsaacYoung

2021-01-16 13:16:22 +08:00

666

dartabe

2021-01-16 13:17:06 +08:00

喜欢很好看

roshad

2021-01-16 13:23:58 +08:00

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

OHyn

2021-01-16 13:26:57 +08:00

很漂亮！

DylanZ

2021-01-16 13:32:53 +08:00

@roshad 原版是日文菜单：）

M3oM3oBug

2021-01-16 13:39:28 +08:00

@roshad [这个](

) 应该是原版，前两天做这个效果的时候查了一下好像是说翻转的片假名，我就按照 x, y 随机翻转片假名了，可以 chars: ["你", "想", "要", "的", "字", "符"] 来自定义

M3oM3oBug

2021-01-16 13:41:03 +08:00

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

x86

2021-01-16 13:43:02 +08:00 via iPhone

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

revalue

2021-01-16 14:03:18 +08:00

万人血书火星文版

cigarzh

2021-01-16 14:08:55 +08:00

不支持 Safari ？

sasalemma

2021-01-16 14:14:14 +08:00

GOOD ！先藏一份

M3oM3oBug

2021-01-16 14:19:16 +08:00

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

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

hantsy

2021-01-16 14:40:07 +08:00

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

guanhui07

2021-01-16 14:40:11 +08:00

还可以

hantsy

2021-01-16 14:41:01 +08:00

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

Kiske

2021-01-16 14:43:23 +08:00

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

M3oM3oBug

2021-01-16 14:47:45 +08:00

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

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

580a388da131

2021-01-16 14:49:13 +08:00

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

jiangfkyyy

2021-01-16 14:56:44 +08:00

6666

M3oM3oBug

2021-01-16 15:00:11 +08:00

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

konnnnn

2021-01-16 15:03:25 +08:00

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

vfxx

2021-01-16 15:53:27 +08:00

喜欢

Kilerd

2021-01-16 16:01:50 +08:00

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

ligiggy

2021-01-16 16:14:00 +08:00

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

magic3584

2021-01-16 16:18:55 +08:00

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

M3oM3oBug

2021-01-16 16:19:56 +08:00

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

youla

2021-01-16 16:25:29 +08:00

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

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

love

2021-01-16 16:32:35 +08:00

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

James369

2021-01-16 16:40:01 +08:00

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

mathzhaoliang

2021-01-16 16:46:55 +08:00

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

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

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

EGOISTK21

2021-01-16 16:51:57 +08:00 via iPhone

很棒，已收藏

dartabe

2021-01-16 16:52:35 +08:00

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

Hugehard

2021-01-16 16:53:05 +08:00

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

youla

2021-01-16 16:54:27 +08:00

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

towser

2021-01-16 16:54:47 +08:00

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

Kiske

2021-01-16 17:00:18 +08:00

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

aHR0cHM6Ly9zdGVhbWNvbW11bml0eS5jb20vc2hhcmVkZmlsZXMvZmlsZWRldGFpbHMvP2lkPTIzNjMzNTYzNzM=

MasterMonkey

2021-01-16 17:03:10 +08:00 via iPhone

不行，我也得造一个

lifetimeporn

2021-01-16 17:13:07 +08:00

能调整速度吗？

M3oM3oBug

2021-01-16 17:20:30 +08:00

@MasterMonkey 一起玩啊造啊哈哈

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

jingslunt

2021-01-16 17:26:28 +08:00 via Android

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

whitehack

2021-01-16 17:32:09 +08:00

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

p1gd0g

2021-01-16 18:57:39 +08:00

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

li492135501

2021-01-16 19:20:39 +08:00

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

ETiV

2021-01-16 19:26:38 +08:00 via iPhone

想起了当年玩 Flash 的时光…

gkiwi

2021-01-16 19:36:54 +08:00

棒！

mathzhaoliang

2021-01-16 20:36:00 +08:00

@youla
@dartabe

不敢赞同二位。

ysmood

2021-01-16 20:55:48 +08:00

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

xiangbing74

2021-01-16 21:06:45 +08:00

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

hantsy

2021-01-16 21:16:51 +08:00

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

hantsy

2021-01-16 21:20:08 +08:00

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

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

pigmen

2021-01-16 21:22:33 +08:00

可不可以纯 CSS 实现

nekolr

2021-01-16 21:34:08 +08:00 via Android

很棒！

jackmod

2021-01-16 21:57:31 +08:00

确实超赞

DylanZ

2021-01-16 22:13:50 +08:00

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

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

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

难度有点大哈哈