эффект матрицы
Mar. 17th, 2013 12:17 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
avvaКрасивый эффект "Матрицы" в минимальном Джаваскрипте, меньше 600 байт:
<body style=margin:0 onload="for(s=window.screen,w=q.width=s.width,h=q.height=s.height,m=Math.random,p=[],i=0;i<256;p[i++]=1);setInterval('9Style=\'rgba(0,0,0,.05)\'9Rect(0,0,w,h)9Style=\'#0F0\';p.map(function(v,i){9Text(String.fromCharCode(3e4+m()*33),i*10,v);p[i]=v>758+m()*1e4?0:v+10})'.split(9).join(';q.getContext(\'2d\').fill'),33)"><canvas id=q>
Чтобы разобраться в том, как это сделано, я немного развернул и и прокомментировал текст, не меняя основную логику.
(уже после того, как я это сделал, обнаружил другое объяснение, более подробное и развернутое).
<body style=margin:0 onload="for(s=window.screen,w=q.width=s.width,h=q.height=s.height,m=Math.random,p=[],i=0;i<256;p[i++]=1);setInterval('9Style=\'rgba(0,0,0,.05)\'9Rect(0,0,w,h)9Style=\'#0F0\';p.map(function(v,i){9Text(String.fromCharCode(3e4+m()*33),i*10,v);p[i]=v>758+m()*1e4?0:v+10})'.split(9).join(';q.getContext(\'2d\').fill'),33)"><canvas id=q>
Чтобы разобраться в том, как это сделано, я немного развернул и и прокомментировал текст, не меняя основную логику.
(уже после того, как я это сделал, обнаружил другое объяснение, более подробное и развернутое).
![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
no subject
Date: 2013-03-17 11:44 am (UTC)Браузер пожаловался на string которая разнесена на отдельные lines, ( "unterminated quote" ) и на пропущеный 0 в 1e4?:v+10})
Попробуйте вместо <pre> - <font face="consolas,monospace">
Авва, какие у вас ощущения от де-обфускации кода?
no subject
Date: 2013-03-17 12:04 pm (UTC)context.fillText(String.fromCharCode(48+m()*10),i*10,v);
катакана, как оно в матрице и было:
context.fillText(String.fromCharCode(0x30A0+85*m()),i*10,v);
русские буквы:
context.fillText(String.fromCharCode(1040+32*m()),i*10,v);
иврит:
context.fillText(String.fromCharCode(0x05D0+26*m()),i*10,v);
арабский:
context.fillText(String.fromCharCode(0x620+m()*60),i*10,v);
тайский:
context.fillText(String.fromCharCode(0x0E50+m()*12),i*10,v);
no subject
Date: 2013-03-17 04:08 pm (UTC)В русском направление письма слева направо, поэтому буковки должны двигаться в том же направлении. Для этого нужно в коде поменять "i*10,v" на "v,i*10".
А в иврите буковки должны двигаться справа налево. Для этого в коде "p[i++]=1" меняется на "p[i++]=758", а "p[i]=v>758+m()*1e4 ? 0 : v+10;" на "p[i]=v<-m()*1e4 ? 758 : v-10;".
no subject
Date: 2013-03-17 01:52 pm (UTC)Не знаю, а какие должны быть ощущения? Красивая штука, я бы сам не додумался так написать, потому что плохо знаю платформу и не знал, что можно постепенно затемнять экран, используя заполнение с альфа-каналом.
no subject
Date: 2013-03-17 03:41 pm (UTC)no subject
Date: 2013-03-17 05:03 pm (UTC)no subject
Date: 2013-03-17 02:36 pm (UTC)no subject
Date: 2013-03-17 03:39 pm (UTC)Смотрите:
<font ...> <canvas> </font>
no subject
Date: 2013-03-17 12:34 pm (UTC)no subject
Date: 2013-03-17 01:42 pm (UTC)no subject
Date: 2013-03-17 03:06 pm (UTC)no subject
Date: 2013-03-17 05:01 pm (UTC)no subject
Date: 2013-03-17 05:14 pm (UTC)no subject
Date: 2013-03-17 05:53 pm (UTC)no subject
Date: 2013-03-17 05:58 pm (UTC)no subject
Date: 2013-03-17 06:02 pm (UTC)no subject
Date: 2013-03-18 01:15 pm (UTC)Может быть, дело ещё в наличии соответствующих шрифтов?
no subject
Date: 2013-03-17 03:07 pm (UTC)no subject
Date: 2013-03-17 06:14 pm (UTC)Opera + Mint
no subject
Date: 2013-03-17 06:42 pm (UTC)no subject
Date: 2013-03-18 09:24 am (UTC)Даже "бегущая" полоска при загрузки Windows 95 была реализована похожим образом.
:)
Date: 2014-01-07 04:11 am (UTC)