Soo, i thought this was interesting

alexander · August 13, 2010

A Tribute to The Beatles by Román Cortés

I'm trying to figure out how he is doing this, its pretty crazy, so far we gather that he extrapolates either the final coordinates or offset from the original position for each of the 520 characters via 3 letters from the 1560 character long string via some craaazeh math.

also gather that the numbers extrapolated by that method are used in the math calculation to figure out the motion of the given letter, each given letter...

but there are many questions that remain unanswered, so lets talk about it here or something :(

:lol:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta **********="Content-Type" content="text/html; charset=UTF-8" />
<title>A Tribute to The Beatles by Román Cortés</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
font-family: Arial, Helvetica;
line-height: 19px;
font-size: 15px;
color: #444;
}
</style>
</head>
<body>
<div id="beatles" style="cursor: pointer; text-align: center; width: 450px; height: 470px; overflow: hidden;" onclick="anim()">Yesterday,<br/>All my troubles seemed so far away,<br/>Now it looks as though they're here to stay,<br/>Oh, I believe in yesterday.<br/>Suddenly,<br/>I'm not half the man I used to be,<br/>There's a shadow hanging over me,<br/>Oh, yesterday came suddenly.<br/>Why she<br/>Had to go I don't know, she wouldn't say.<br/>I said,<br/>Something wrong, now I long for yesterday.<br/>Yesterday,<br/>Love was such an easy game to play,<br/>Now I need a place to hide away,<br/>Oh, I believe in yesterday.<br/>Why she<br/>Had to go I don't know, she wouldn't say.<br/>I said,<br/>Something wrong, now I long for yesterday.<br/>Yesterday,<br/>Love was such an easy game to play,<br/>Now I need a place to hide away,<br/>Oh, I believe in yesterday.</div>
<script type="text/javascript">/*<![CDATA[*/
var d='Q;PQD0R1F1CMF=;I73F5=QP2<OQUN0=@49CA4KK54BOQM?BW;46G1CETWSVGB;QC0EOISUKVRF3EHL44C2T?RESL17KP:GA6@@MM6P@L59I1MA;ME?O58MKLT3CSNS6PD<:KRSCORFU8WLAURN=P:03CFP3Q>WUHCWNAOP:8LF77E43BL4S?UEHNW?27UGBFJ2CC0WNI9;G?P1;G0GL35WRTMSBVB:@LJI>I03=J:RF1>>V3U?M3G=U7BF;GQ=E4=8RFBU23IMQ>GH1PINK:7D:JWC0UEPM9L>MR<SS7BL3B2LOSGW1;UI4MN:U>A6QRF?;>C7TLCU89CP?92A2U7UQCOEK<9A1S9W@7>AL562GTI7OF9?IE2UQPNSVNFK=PML1LNKFB8A32T4QOJ9W=QK?CEP6VA;UMQTA5K35W64MO25V3E5G7QC3BC=S0SB=A2GAO7VBTF8JF?BKLGQ8WPD>RECRPWSP9BPVKA2O56N?Q7DOO=3RDW;W53;QORWIF1:L22KV5SKV4=;@3=6W@0ECMJTBODP3HL=8TUMD2N1CNFSFR71D=PE>O?IN3EA5IM6HPSP@>U2S@OBG81NR551533394<K5TMTD076=;@N<C9MV>VATGMVBCR>TSKU5NGIQVES?;UD:URR7T?1E8GEAIUGS0O>PVS1GSWTP@SLLKKC?S3@34EUK<9HQ9J90:VGGI<Q6JIAG37UF32874DW3WC7>C82GGMI=?UOOOPL99:8H;>IBMLC?N3:W>4RRTR6MVA0NNEHSIFN6S?CTHGBA8A25Q;=R5@E6IT=;MADSN55909<UL>94MOWR4TIU59NGM?L4AJVN4LJG@1RRLO0CR>33<94>KE6Q5AI8V==9;T5CNU2F;O0O3GEKNISQQER0?U8@X8O1RUM7U@M8N9TQ=>UL=TQ=<ICG;JF6K5GH3<U4874M6D2QGP=PMQ>G26GESGGFC=GF3POOMNONJ3QCGT<WTRI6766;7F>H4=0ULE6;A@DRNK17D1RTD4FVTPO5WA6DVK1CVI7Q@Q?PPCQCD>QEH;FQVQ9OBQLHI?4R9P>QM3KJSDPN<N7FME6I:5T;7TE5889<RM02VMCIISGMG;0AQD:8A@MDFOCQMOC;G@;OWKK5CN66Q=GE=BTDTNIIR;M16QE3OOEW>2M87>RTL@2P:=JU6RPP@5T?>GMGASRQSQVVGS6>2=GB?RQ=JJ7AHFV@FD:NNVDPGE?<CTVCHIGP=IGKQM77H<HQ@A?2<U85FWOEN3I<1S3N1BI5P1HIQEHDHJ3QVNPMIMG@S:GVADRN5W<@JEDDHD3<KJUO28UQW>T4@J15PLURMQSER><G8GA;WGW<H75;40222J1L1W57EJ7QO5WD4D16:85DHNQN7:LFMD=>UB=K>PP3S8HJ7HVPP>;SANMTHVO0O0HBOP5M1ABQ73GE@O5@6P6PU9WRHQQ3W;F6A@ECVOWI1S5E35@<?M728A<<EPB:H:TODGAEJ41IUCUNTATBFU5TGE6=762>=P2KS97O89U2:U>OLB91J>FF>2MWV8P;1F<R1';
var xo=[], yo=[], xd=[], yd=[], e=[], an=-1, dir=-1;
var e;
function i()
{            
   var n=0, g=document.getElementById('beatles'), l=g.innerHTML, s='';
   while (n<l.length)
   {
       var r=l.charAt(n);
       if (r==' ') {s+=r; n++}
       if (r=='<') while (l.charAt(n-1)!='>') s+=l.charAt(n++);
       s+='<b>'+l.charAt(n++)+'</b>';
   }
   g.innerHTML=s;
   e=document.getElementById('beatles').getElementsByTagName('b');
   for (n=0; n<520; n++)
   {
       xo[n]=e[n].offsetLeft;
       yo[n]=e[n].offsetTop;
       var p=d.charCodeAt(n*3)*1600+d.charCodeAt(n*3+1)*40+d.charCodeAt(n*3+2)-78768;
       yd[n]=p%284;
       xd[n]=(p-yd[n])/284;
   }
   for (n=0; n<520; n++)
   {
       e[n].style.position='absolute';
       e[n].style.left=xo[n]+'px';
       e[n].style.top=yo[n]+'px';
   }
}
function ani()
{            
   for (var n=0; n<130; n++)
   {
       m=519-n;
       if ((an-n<=30)&&(an-n>=0))
       {
           var b=(Math.cos((((an-n)*Math.PI)/30))+1)/2;
           var a=1-b;                    
           for (i=0; i<=130; i+=130)
           {
               e[n+i].style.left=((xd[n+i]+111)*a+xo[n+i]*:lol:+'px';
               e[n+i].style.top=((yd[n+i]+74)*a+yo[n+i]*:lol:+'px';
               e[m-i].style.left=((xd[m-i]+111)*a+xo[m-i]*:lol:+'px';
               e[m-i].style.top=((yd[m-i]+74)*a+yo[m-i]*;)+'px';
           }
       }
   }
   an+=dir;
   if ((an<=160)&&(an>=0))
   {
       window.setTimeout("ani()", 30);
   }
}
function anim()
{
   dir*=-1;
   if ((an<0)||(an>160)) ani();
}
i();
/*]]>*/
</script>
</body>
</html>

Sign In

Soo, i thought this was interesting

Recommended Posts

alexander

Join the conversation

Browse

Activity