Lotus Challenge Rendering demo

Code

/* Functions

* gfx.update(method);
Update (every 30 ms) - Parameter: method = Method to be called.

-----------------------------------------------------------------
* gfx.Hline(col,x0,x1,y);
Draw a line  - Parameters: col = color,
                            x0 = start position in x,
                            x1 = end position in x,
                             y = vertical position

-----------------------------------------------------------------
* gfx.Clear(col);            
Clear canvas - Parameters:  col = color

function Init(func){
   var c=document.getElementById("canvas");
   var ctx=c.getContext("2d");
   gfx = new GFX(ctx, c.width, c.height, func);
   MainFunc = gfx;
   ctx.imageSmoothingEnabled = false;/*
   ctx.mozImageSmoothingEnabled = false;
   ctx.webkitImageSmoothingEnabled = false;
   ctx.msImageSmoothingEnabled = false;*/
}

function GFX(_ctx, _w, _h, _f){
   this.ctx = _ctx;
   this.width = _w;
   this.height = _h;
   this.intervalID = 0;

this.Update = function(){ 
     this.intervalID = window.setInterval(_f, 20);
   }
 
   this.Stop = function(){
      window.clearInterval(this.intervalID);
      for(var i=0;i<20;++i){ window.clearInterval(i); }
   }
  
   this.Clear = function(col){
       this.ctx.fillStyle=col;
       this.ctx.fillRect(0,0,this.width,this.height);
   }

this.HLine = function(col, x0,x1,y){
       this.ctx.beginPath();  
       this.ctx.strokeStyle=col;
       this.ctx.lineWidth = 2;
  
       this.ctx.moveTo(x0,y);
       this.ctx.lineTo(x1,y);
       this.ctx.stroke();
   }
}

function demo(){
   if(demo.tim == undefined){
      demo.tim = 0;
   }
   gfx.Clear("#3333BB");
   demo.tim += 1/60;
 
   clearDbg();
   dbg(demo.tim);
   drawRoad(demo.tim*4);
}

function drawRoad(dist){
   if(drawRoad.rdl == undefined){
      drawRoad.rdl = new Array(128);
      drawRoad.rdw = new Array(128);
      drawRoad.rds = new Array(128);
      drawRoad.grassCol = [["#00FF00"],["#00CC00"]];
      drawRoad.roadCol  = [["#284040"],["#405050"]];
   }
   var xr2 = gfx.width/2;
   var yr2 = gfx.height/2;

var d = 0, h = 0, sc = 0;
   
   // Generate road segments
   for(i=0;i<128;++i){
      d=i+4;
      h = hill(dist/4,i/100)*(i>0)+8
      sc=xr2/2;
      drawRoad.rdl[i]=sc*h/d+yr2;
      drawRoad.rds[i]= 10/d;
   }

var hval = gfx.height; // set current height value
   // Render segments
   for(i=0;i<128;++i){
      // Check if the road is behind the mountain if yes skip
      if(drawRoad.rdl[i+1]>hval){ continue; }

// get current height value
      hval = Math.min(drawRoad.rdl[i+1],hval);

drawSegments(dist+i/10,drawRoad.rds[i],drawRoad.rds[i+1],drawRoad.rdw[i],drawRoad.rdl[i],drawRoad.rdl[i+1]);
   }
}

function hill(d,i){
   d+=i;
   return (Math.sin(d*.3-Math.cos(d*.8)))*i*64; //(Math.sin(d*.2-Math.cos(d*.3)))*i*48
}

function drawSegments(d,rds0,rds1,rdw,y0,y1){
   if(drawSegments.roadCol == undefined){
      drawSegments.roadCol = [[0x212021], [0x112111]];
      drawSegments.grassCol = [[0x214500], [0x205500]];
   }

var c = Math.floor((d)/.6)%2;  
   
   var dy = (y0-y1);
   var ds = (rds0-rds1)/dy;

var xres = gfx.width;   
   var xr3 = xres/3;
   var xr2 = xres/2;
   var pwidth = 20;

for(var y=0;y<dy;++y){
      // Get the width based on the scale
      var w = ((xres*(1-(rds0-ds*y)))/2);

// Draw Road and grass
      gfx.HLine(drawRoad.roadCol[c],w,xres-w,Math.floor(y0-y));
      gfx.HLine(drawRoad.grassCol[c],0,w,Math.floor(y0-y));
      gfx.HLine(drawRoad.grassCol[c],xres-w,xres,Math.floor(y0-y));

// Draw Pit Lane      
      if(c){
         pl = (rds0-ds*y);
         gfx.HLine("#FFF",w,w+pl*pwidth,Math.floor(y0-y));
         gfx.HLine("#FFF",xres-w,xres-w-pl*pwidth,Math.floor(y0-y));

gfx.HLine("#FFF",w+pl*xr3,w+pl*(xr3+pwidth),Math.floor(y0-y));
         gfx.HLine("#FFF",xres-w-pl*xr3,xres-w-pl*(xr3-pwidth),Math.floor(y0-y));
      }
   }
}

Init(demo);

Debug

Lotus

Tile

Lotus Challenge Rendering Example v0.2