JS1k 2015 - Hype Train

1-script.js

w=b.offsetWidth
h=b.offsetHeight
wh=Math.sqrt(w*w+h*h)
s=b.style
s.background='#222'
q=Math.random

n=30
i=n
r=[] //rectangles	
s.perspective = 3*w/n+'px'
while(i--){ //add divs
	d=r[i]=document.createElement("div") //create div
	s=d.style //style
	s.height=w/(n*3)+'px'
	s.width=w/4+'px'
	s.background="#fff"
	s.position='absolute'
	s.top='0'
	b.appendChild(d)
}

p=[] //particles
o=500
i=o
while(i--) {
	p.push([q()*w,q()*h,q()])
}
f=0
l = function() { //loop
	i=n
	t=Date.now()*.08
	while(i--) {
		
		d=r[i] //get a div
		s=d.style //style
		z=(i*h/n+t)%h*3-h*2.8 //Depth of the track
		e=t*.02+i/n*2*Math.PI //theta
		a=Math.sin(e)
		y=Math.sin(a/3)
		x=Math.cos(a/3)
		s.transform="matrix3d("+[x,-y,0,0,y,x,-1,0,0,1,0,0,w/10*a+w*3/8,h*.8+a*h*.05,z,1].join(',')+")"
		s.opacity = z/900+2
	}
	f-=.005
	fx=Math.cos(f)*.5+.5
	fy=Math.sin(f)*.5+.5
	b.style.perspectiveOrigin = (fx*50+25)+"% "+(fy*50+25)+"%"
	
	i=o
	while(i--){
		d=p[i]
		c.fillStyle='hsl('+t/10%360+',50%,'+(25+d[2]*50)+'%)'
		m=wh*d[2]/100+2
		c.fillRect(
			(d[0]-w*(fx*.5+.25))*d[2]*2+w*(fx*.5+.25),
			(d[1]-h*(fy*.5+.25))*d[2]*2+h*(fy*.5+.25),
			m,m
		)
		d[2]=(d[2]+0.005)%1
	}
	c.fillStyle='hsla('+(t/10-20)%360+',50%,20%,.1)'
	c.fillRect(0,0,w,h)
	requestAnimationFrame(l)
}
l()

2-regpacked.js

for(_='tyleN*.5+.Mx=cosLeightK;i=J.0("="c.fill(f()+");;while(i--){d=r[i]d[2]M25))**2+;Rect(=sintion.sN0+2/10SNhslh*	=b.offsetpx")M5;0,0,%360,50%,perspective;s.background#
wWidth;hHK;wh=sqrt(w*w+	hs=b
222";q=random;n=30Jn;r=[]=3*w/n=document.createElementdiv"s=dhK=w/(n*3)width=w/4
fff"posiabsolute"top0";b.appendChild(d)}p=[];o=500Jop.push([q*w,q*h,q])}f=0;l=func{i=n;t=Date.now*8;s=d;A=(i*h/n+t)%	3-	2.8;e=t*2+i/n*2*PI;a(ey(a/3L(a/3)transformmatrix3d+[x,-y,y,x,-1,1,w*a+w*3/8,	.8+a*	5,A,1].join,"))"opacity=A/90}f-=05;fLfyb.Origin=fx*55% "+y*55)%"Jod=p[i];+t"+(25+*50)%)";m=w	(d[0]-w*xw*x,(d[1]-	y	y,m,m=(+05)%1}a+(t-20)20%,.1)"w,hrequestAnimaFrame(l)};l';g=/[
-J-N]/.exec(_);)with(_.split(g))_=join(shift());with(Math)eval(_)