JS1k 2014 entries

blog


Last year I said I had a very ambitious idea for the js1k 2013 competition but I didn’t had the time and I thought to leave it for the following year. This year, once again, I could only work on my entry the day before the deadline, so I decided to do something else and start from scratch.
I saw this animated gif long time ago (which, by the way, I don’t know the original source or author)

So I thought it would be good to make a 1k version of it.
To be honest I’m not very happy with the result, I’m pretty sure it could be done better & nicer. Anyway I submitted it to the competition and here is the result:
http://js1k.com/2014-dragons/demo/1973
Find below the full source code or check the details page on js1k

//values are just trial & error
w=window
f=w.innerHeight/w.innerWidth
w=1343
h=w*f
_=Math
C=_.cos
S=_.sin
R=_.random
F=512
Z=2200
P=6.28
l=[]
A=[]
B=[]
L=54
p=P/L
Y=N=0
//generate lamp posts in a circle on both sides and pointing to the center
df='000100110010000001011010010110110010010011011010'.split('')
for(i=0;i=3;k--) {
    x=k*F*S(p*i)
    z=k*F*C(p*i)
    x2=(k+v)*F*S(p*i)
    z2=(k+v)*F*C(p*i)
    for(j=0;j9&&j&2){
        xv=x2
        zv=z2
      }
      A[N++]=xv+df[j*3  ]*10
      A[N++]=-df[j*3+1]*512
      A[N++]=zv+df[j*3+2]*8
    }
    i+=.5
    v=-v
  }
}
//store where lamp posts end
K=N
//generate random lines
k=0
for(i=L*8;i--;) {
  l[k++]=R()*P
  l[k++]=R()
  l[k++]=-R()*128-64
  l[k++]=R()*.2+.2;
}
N+=L*96;	//8*12
setInterval(function(){
  Y+=.004
  b.style.background='#000'
  //clear screen
  a.width=w
  a.height=h
  //generate trail lines & move them
  j = K
  k=i=0;
  for(;i<l*8;i++) {
    d=l[k++]
    p=l[k++]
    y=l[k++]
    e=l[k++]
    r=(3.1+p*.8)*F
    v=4*S(y+i)
    g=[0,v,v,0]
    for(v=0;v<4;v++) {
      x=r*S(d)
      z=r*C(d)
      A[j++]=x
      A[j++]=y+g[v]
      A[j++]=z
      if(v&1) d+=e
    }
    l[k-4]+=.02
    // // move lines in both directions
    // if(i= K - trail lines, half red #f22, half white #fff
  k=i=0
  for(;i=K) {
      if(i*12=2) {
        c.lineTo(B[k],B[k+1]);
      }
      k+=3
    }
    c.fill()
    //draw lamp post light after drawing the last top horizontal quad
    //lamp posts are formed of 4 quads:
    //0 & 1 vertical
    //2 & 3 top horizontal
    //avoid drawing lights on trail lights
    if(i % 4 == 3 && i*12<k) {
      c.fillStyle="#fff"
      c.beginPath()
      c.arc(B[k-3], B[k-2], (2-B[k-1])*13,0,P)
      c.fill()
    }
  }
}, 20)

Code is compressed under 1k thanks to Google Closure Compiler and RegPack v3
As I wasn’t really happy with the result I did another quick entry based on the old good daCube2 colors & idea:
[youtube https://www.youtube.com/watch?v=OYABLIPjF7Q?rel=0&w=640&h=480]
Find below the result:
http://js1k.com/2014-dragons/demo/1969
and the source code or check the details page on js1k:

w=window
h=w.innerHeight
w=w.innerWidth
_=Math
mC=_.cos
mS=_.sin
R=_.random
F=512
Z=2048
N=L=X=Y=0
A=[]
B=[]
C=[]
D=[]
addCube=function(s) {
  k=N/3
  j='000100010110001101011111'.split('')
  for(i=0;i<24;i++) {
    A[N++]=(j[i]-.5)*2*s
  }
  l='011332200445514662577367'.split('')
  for(i=0;i<24;i++) {
    D[L++]=k+(l[i]|0)
  }
}
for(z=200;z--;){
  addCube(100+z*5)
}
anim=.004
setInterval(function(){
  Y+=anim*R()+anim
  X+=anim*R()+anim
  y=Y
  x=X
  //X+=.01
  b.style.background='#444'
  //clear screen
  a.width=w
  a.height=h
  k=0
  //dy rotation
  for(i=N;i--;) {
    if(k%24*3==0) y-=anim*2
    C[k+2]=A[k+2]*mC(y)-A[k]*mS(y)
    C[k  ]=A[k+2]*mS(y)+A[k]*mC(y)
    k+=3
  }
  k=0
  //dx rotation
  for(i=N;i--;) {
    if(k%24*3==0) x+=anim*2
    B[k+1]=A[k+1]*mC(x)-C[k+2]*mS(x)
    B[k+2]=A[k+1]*mS(x)+C[k+2]*mC(x)
    k+=3
  }
  //transform 3d-2d
  k=p=0
  for(i=N;i--;) {
    C[k++]=F*C[p  ]/(C[p+2]+Z)+w/2
    C[k++]=F*B[p+1]/(C[p+2]+Z)+h/2
    p+=3
  }
  p=0
  for(i=0;i<l/24;i++) {
    c.strokeStyle="#fff"
    c.globalAlpha=(i/(L/24))
    c.beginPath()
    for(k=24;k--;){
      j=D[p++]
      c.moveTo(C[j*2],C[j*2+1]);
      j=D[p++]
      c.lineTo(C[j*2],C[j*2+1]);
    }
    c.stroke()
  }
}, 20)