A simple Commanche-like that won the 20lines 'Terrain' contest at the OzoneAsylum in July 2004
Use the arrow keys to turn and go up or down. The lower and longer you fly the higher the score.
The heightmap is generated using the classic plasma fracal, with a twist: The heights are interpolated using a bilinear or bicubic interpolation with added midpoint.
The terrain is rendered using DOM elements in position absolute, to represent the perpspective view seen from the helicopter, including the fog. Only the top property of each element move.
Source code
/* 1 */ mapSmall=[]
/* 2 */ mapBig=[]
/* 3 */ keyboardState = []
/* 4 */ for( x=y=z=p=angle=i=j=score=0*isNaN(bla=""); j<512?1:0*(document.getElementById('renderArea').innerHTML+=bla); mapSmall[j++&255]=Math.min(Math.random()*48,24) )
/* 5 */ bla += "<span style='position:absolute;left:"+ Math.round( 160+((j&31)-16)/(32-(j>>5))*318 ) +";top:0;width:"+ Math.round( 1+1.0/(32-(j>>5))*318 ) +";height:420px;background-color:rgb("+ Math.floor(204-(1+j>>5)*153/16) +","+ Math.floor(204-(1+j>>5)*( (((j&15)^((j>>5)&3))&0)+153)/16) +","+ Math.floor(204-(1+j>>5)*204/16+ 0*(keyboardState[j]=0)) +")'></span>\n"
/* 6 */ for( spanCollection=document.getElementsByTagName("span"); i<65536; mapBig[ i++ ]=(v1=Math.pow(((i>>8)&15)/15,1+(((i&255)^(i>>8))&255?1:0)))*(mapSmall[((i/16+1)&15)+(((i>>8)/16+1)&15)*16]*(u1=Math.pow((i&15)/15,1+(((i&255)^(i>>8))&240?1:0)))+mapSmall[((i/16)&15)+(((i>>8)/16+1)&15)*16]*(u0=1.0-u1))+(1.0-v1)*(mapSmall[((i/16+1)&15)+(((i>>8)/16)&15)*16]*u1+mapSmall[((i/16)&15)+(((i>>8)/16)&15)*16]*u0)+mapSmall[(i&15)+((i>>8)&15)*16]/48 )
/* .. */ {
/* .. */ }
/* .. */ document.onkeydown = function( evt )
/* .. */ {
/* 7 */ keyboardState[ evt?evt.keyCode:event.keyCode ] = 1
/* .. */ }
/* .. */ document.onkeyup = function( evt )
/* .. */ {
/* 8 */ keyboardState[ evt?evt.keyCode:event.keyCode ] = 0
/* .. */ }
/* .. */ function hop()
/* .. */ {
/* 9 */ for( k=0*(x+=Math.sin(angle+=(keyboardState[39]-keyboardState[37])/16)+ 0*(y-=Math.cos(angle)+0*(score+=8-z)))+0*(Z=z-8-0*mapBig[ (x&255)+(y&255)*256 ]/1) ;k<512; spanCollection[ k++ ].style.top=( Z+ mapBig[ ((x+(((k&31)-16)*(fovRatio=Math.cos( ((k&31)-16)/16*Math.PI/8 ))*Math.cos( angle )-((k>>5)-16)*fovRatio*Math.sin( angle )))&255)+((y+(((k&31)-16)*fovRatio*Math.sin( angle )+((k>>5)-16)*fovRatio*Math.cos( angle )))&255)*256 ] )*fovRatio*320/(32-(k>>5)) )
/* .. */ {
/* .. */ }
/* 10 */ document.getElementById('sprite').style.backgroundPosition = (-160*(1+keyboardState[39]-keyboardState[37])) +"px 0px"
/* 11 */ document.getElementById('power' ).style.left = 320-(p+=(hit=((z+mapBig[ (x&255)+(y&255)*256 ])<16))?32:0)
/* 12 */ p>=320?alert( "your score: "+ Math.round(score) ):z=Math.min( 8, z+(hit?2:0)-.5*(keyboardState[38]-keyboardState[40]) )
/* 13 */ clearInterval(intervalHandle+p-320)
/* .. */ }
/* 14 */ intervalHandle = setInterval( hop, 10 )Other recent experiments
There are many experiments and projects like COPTER CRUISE to discover other here.
FRONTFEST MOSCOW It was an honour to be invited to Fronfest Moscow 2017 with the little family to give my first workshop; implementing a Twin-stick shooter using ES6 and Canvas, and to continue my CODE🎙ART series of talks + live coding aiming to inspire new web developer artists. on November 18th, 2017
VOLTRA VOLTRA: Grinding the Universe, a gritty JavaScript demo, winner of the 1024 bytes demo competition at the Assembly 2017. on August 6th, 2017
BREATHING EARTH Another take on Nadieh Bremer mesmerizing Breathing Earth visualisation, running at 60fps on a 2D Canvas without libraries or frameworks. on June 26th, 2017
JS1K 2015 INVITATION JS1k 2015, the yearly 1kb JavaScript contest, is around the corner and kuvos asked a couple of optimizer extraordinaires to open the show. Hopefully this little invitation will tingle the spider sense of talented developers and code golfers in time for them to submit high quality entries to JS1k 2015. on January 28th, 2015
JAVASCRIPT IS JARIG Javascript is 18 years old! Let's celebrate with a nice little tune. on September 14th, 2013
OOMA The winning bootsector of Outline 2005, featuring two images zooming with experimental music in a valid 480bytes Atari bootsector. on March 30th, 2005
FIRE Warming up with a 32 bytes fire effect for MSDOS after a few years break from the demoscene for studies and work. on September 30th, 2004
SIERPINSKI GASKET A cute Sierpinski gaskets in 96 bytes of DHTML. on June 14th, 2004
Let's talk
Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking, workshop or performance opportunity.