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

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

  M3oM3oBug · 43 天前 · 12630 次点击
这是一个创建于 43 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

第 1 条附言  ·  40 天前

没想到得到这么多关注。。 @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 尝试一下

89 条回复    2021-01-22 17:40:24 +08:00
beimenjun
    1
beimenjun   43 天前
感觉挺有趣的
oubfgiar
    2
oubfgiar   43 天前 via iPhone
喜欢
ijrou
    3
ijrou   43 天前
挺有意思的~~
leonidas
    4
leonidas   43 天前   ❤️ 1
sixsixsix
youla
    5
youla   43 天前
我想放在我的博客园里。
wdytoya
    6
wdytoya   43 天前
牛逼
youla
    7
youla   43 天前   ❤️ 1
博客园加入了~~嘻嘻,博客园的代码乱糟糟的,也没时间整理,加上去毫无违和感~ https://www.cnblogs.com/iamverylovely
M3oM3oBug
    8
M3oM3oBug   43 天前
@youla 放吧,引入 janvasexamples 库或者单独复制那段代码,直接以 document.body 为容器就可以
M3oM3oBug
    9
M3oM3oBug   43 天前
@youla 可爱风的博客园啊哈哈,你也可以考虑在 props 里自己修改一些配置适配这个可爱风~
youla
    10
youla   43 天前
@M3oM3oBug 做得太水了,之前刚学习前端时,草草做的页面,代码还是 jquery 拼接,导致我已经没办法写代码了,发 /浏览 博客的功能都被搞丢了,有时间的话可能会用 vue.min.js 全部改了。之前上面原有的 console 是可以输内容的,rm -rf / 回车就会执行 document.body.innerHTML=''把页面清空。因为这个挺好看的,所以就直接把之前的功能换掉了,感谢!!!
IsaacYoung
    11
IsaacYoung   43 天前
666
dartabe
    12
dartabe   43 天前
喜欢 很好看
roshad
    13
roshad   43 天前
?黑客帝国全是日语吗?我看的时候没发现
OHyn
    14
OHyn   43 天前
很漂亮!
DylanZ
    15
DylanZ   43 天前
@roshad 原版是日文菜单 :)
M3oM3oBug
    16
M3oM3oBug   43 天前
@roshad [这个](
) 应该是原版,前两天做这个效果的时候查了一下好像是说翻转的片假名,我就按照 x, y 随机翻转片假名了,可以 chars: ["你", "想", "要", "的", "字", "符"] 来自定义
M3oM3oBug
    17
M3oM3oBug   43 天前
@DylanZ 搞得到这个菜单吗哈哈,那这样就更加几乎 100% 还原了
x86
    18
x86   43 天前 via iPhone   ❤️ 1
07 年那会很多黑页都是这个
revalue
    19
revalue   43 天前   ❤️ 1
万人血书火星文版
cigarzh
    20
cigarzh   43 天前
不支持 Safari ?
sasalemma
    21
sasalemma   43 天前
GOOD !先藏一份
M3oM3oBug
    22
M3oM3oBug   43 天前   ❤️ 1
@revalue 你进那个 CodePen 的地址,改 chars: "添加你想要的字符".split("") 就可以了

@cigarzh 我手机的 Safari 可以的诶刚刚试了
hantsy
    23
hantsy   43 天前
大学时候最这个最初是用 Flash ActionScript 编程实现的。
guanhui07
    24
guanhui07   43 天前
还可以
hantsy
    25
hantsy   43 天前
Flash 动画还是经典的火柴人,把成龙那些招势全部加入了。
Kiske
    26
Kiske   43 天前   ❤️ 1
大佬, 我可以把它发布在 steam wallpaper engine 的创意工坊里吗
M3oM3oBug
    27
M3oM3oBug   43 天前
@hantsy 以后需要 Flash 处理的内容会不会有可能转变为 Canvas 需求,或者是舍弃了那些需求还是换了什么其他的解决方案呢?。


@Kiske 标注出处就行,你是想把桌面背景换成这嘛哈哈。
580a388da131
    28
580a388da131   43 天前
额,为啥现在突然想起搞这个了?
我还以为谁在挖坟。
jiangfkyyy
    29
jiangfkyyy   43 天前
6666
M3oM3oBug
    30
M3oM3oBug   43 天前
@580a388da131 为了给 [janvas]( https://github.com/jarenchow/janvas) 求小心心呀。。基于此高效绘制的
konnnnn
    31
konnnnn   43 天前
原版是从他妻子的菜谱上随便找的
vfxx
    32
vfxx   43 天前
喜欢
Kilerd
    33
Kilerd   43 天前
好家伙,吃掉了我 30% 的 CPU 资源
ligiggy
    34
ligiggy   43 天前
@youla 我 tmd 快被二次元声音吓死了
magic3584
    35
magic3584   43 天前
@youla #7 为啥 safari 访问就看不到效果
M3oM3oBug
    36
M3oM3oBug   43 天前
@Kilerd 我处理器 E3-1231v3 也是差不多,为了尽可能还原原特效:
每个 Text 都在进行矩阵变换(左右上下翻转),Text 的 Hsl 颜色饱和度和亮度都是不同的,拖尾效果是留下了一个 Text 并按照颜色的亮度决定透明度减小直到消失后复用
感觉最主要消耗时间的还是原生的 fillText 方法,这我也没法处理哈哈
其实已经很快了,谁能复现这个且比我的占用更低我拜他为师,嗑仨响头的那种
youla
    37
youla   43 天前
@ligiggy 一直准备换个温柔点的,忘了。。

@magic3584 因为我引用了一个叫 pixi.js 的 sdk,我用的最新版,貌似除了 chrome 都不支持。
love
    38
love   43 天前
原版似乎要密要快,这个一开始太稀稀拉拉了没那种感觉
James369
    39
James369   43 天前
1.缺少三维空间感。2. 字体太圆润细腻,缺少黑客科技感。
mathzhaoliang
    40
mathzhaoliang   43 天前   ❤️ 1
建议直接嵌入 shader 代码,用 neo 躲子弹的视频做动作纹理。

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

js 写的肯定不如 shader 效果屌炸。
EGOISTK21
    41
EGOISTK21   43 天前 via iPhone
很棒,已收藏
dartabe
    42
dartabe   43 天前
@mathzhaoliang 你发的这个效果比楼主的差远了 不知道你仔细看了没
Hugehard
    43
Hugehard   43 天前
@Kiske #26 给个地址,我也做桌面看看效果
youla
    44
youla   43 天前
@mathzhaoliang 你发的这个虽然看着是比较炫酷,但是确实比楼主的差了点精致。
towser
    45
towser   43 天前
以前很多黑客网站首页都是这种特效,还伴随着不约而同但也不知道叫什么名的振奋音乐。
Kiske
    46
Kiske   43 天前
@Hugehard 我没有验证手机号,链接直接发不出来, 用 base64 解码以下

aHR0cHM6Ly9zdGVhbWNvbW11bml0eS5jb20vc2hhcmVkZmlsZXMvZmlsZWRldGFpbHMvP2lkPTIzNjMzNTYzNzM=
MasterMonkey
    47
MasterMonkey   43 天前 via iPhone
不行,我也得造一个
lifetimeporn
    48
lifetimeporn   43 天前
能调整速度吗?
M3oM3oBug
    49
M3oM3oBug   43 天前   ❤️ 1
@MasterMonkey 一起玩啊造啊哈哈


@lifetimeporn coderain.js 中 `head.timespan = this.rand(50, 100, true);` 是调整速度的,随机了一个 50 到 100 之间的值,这个值代表 50~100 毫秒触发一次变动,可以用那个 [CodePen]( https://codepen.io/jarenchow/pen/rNMQpMe) 试试。
jingslunt
    50
jingslunt   43 天前 via Android
@Kiske 做等效果,放 18+区域
whitehack
    51
whitehack   43 天前
只有我发现这不是开源项目吗? 而且还没有 ts 定义
p1gd0g
    52
p1gd0g   43 天前
已经出现的字符不是不会变吗?
(我在关注些什么。。。
li492135501
    53
li492135501   43 天前
最下面的是不是堆到一起去了
ETiV
    54
ETiV   43 天前 via iPhone
想起了当年玩 Flash 的时光…
gkiwi
    55
gkiwi   43 天前
棒!
mathzhaoliang
    56
mathzhaoliang   43 天前
@youla
@dartabe

不敢赞同二位。
ysmood
    57
ysmood   43 天前
xiangbing74
    58
xiangbing74   43 天前
把文字改成唐诗 300 首 我觉得可行 哈哈哈
hantsy
    59
hantsy   43 天前
@M3oM3oBug 今天看到一个大新闻,大连铁路局某系统,由于新采购的电脑一些系统没有预安装 Flash,无法登录到 XX 系统,导致服务大面积 XXX 。专家连夜奋斗 XX 小时,最终找到问题所在,安装回 Flash 成功解决问题。
hantsy
    60
hantsy   43 天前
黑客帝国应该重新翻拍一下,当时只是互联网刚刚兴起。

现在的题材太多 ,可以发挥的东西太多了,更有意思。
pigmen
    61
pigmen   43 天前
可不可以纯 CSS 实现
nekolr
    62
nekolr   43 天前 via Android
很棒!
jackmod
    63
jackmod   43 天前
确实超赞
DylanZ
    64
DylanZ   43 天前
@M3oM3oBug 当年很多人都以为《黑客帝国》里面有日本文字的原因是因为导演华卓斯基姐妹(原来是兄弟,后来变性)喜爱日本的文化,不过最近《黑客帝国》的美术指导 Simon Whitley 说道“《黑客帝国》的瀑布文字其实是日文片假名的寿司菜单”

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


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



难度有点大哈哈
IgniteWhite
    65
IgniteWhite   43 天前
之前我为了屏保找过很多这个效果,楼主是我见过做的最好的
Augi
    66
Augi   42 天前 via iPhone
已 star
jqtmviyu
    67
jqtmviyu   42 天前
这不来段大悲咒[: 狗头]
WishMeLz
    68
WishMeLz   41 天前
我大一的时候在 jq22 上面看到过这个,一模一样
Desiree
    69
Desiree   41 天前
文艺复兴
ai277014717
    70
ai277014717   41 天前
感觉文字密度有点低。没有信息量爆炸的感觉
amwyyyy
    71
amwyyyy   41 天前
666, 能飞快点就好了
zaul
    72
zaul   40 天前
有点东西
zhuangjia
    73
zhuangjia   40 天前
打开网页,F11
b1ackjack
    74
b1ackjack   40 天前
之前见过其他人的实现,楼主的实现也很酷,感觉楼主的字体偏亮,效果更好看
yeeyeung
    75
yeeyeung   40 天前
好想做成桌面啊!
mlxj
    76
mlxj   40 天前
因曲思婷
MxxIsBest
    77
MxxIsBest   40 天前
为啥是日文符号?
Ritter
    78
Ritter   40 天前
666
lithiumii
    79
lithiumii   40 天前 via Android
@MxxIsBest 电影里就是,抄的寿司菜单
tachikomachann
    80
tachikomachann   40 天前 via Android
@roshad 这就要说到攻壳机动队了😁
linziyanleo
    81
linziyanleo   40 天前
大佬太强 666
ispinfx
    82
ispinfx   40 天前
一打开我以为我要进化了
xuboying
    83
xuboying   40 天前
这个效果已经是见过的特效里算非常优秀的了,但是要 100%还原最好还能做点前后虚化效果和光晕。
idealhs
    84
idealhs   40 天前
@hantsy 你真的看过黑客帝国吗,电影跟互联网有什么关系。整部片子讨论的是真实与虚无这样一个哲学题材,别对着标题望文生义了。
Lemeng
    85
Lemeng   40 天前
有点意思呢
CallMeReznov
    86
CallMeReznov   40 天前
文艺复兴
voids
    87
voids   40 天前
前段时间偶然看到的.. http://lab.mkblog.cn/hacker/
justNoBody
    88
justNoBody   39 天前
已收藏,准备求婚用😁
mamumu
    89
mamumu   37 天前
厉害 已 star
关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1125 人在线   最高记录 5497   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 40ms · UTC 22:52 · PVG 06:52 · LAX 14:52 · JFK 17:52
♥ Do have faith in what you're doing.