Shell steps

by Vladimir

CSS

.odd {
        background:#DDD;
    }
    td {
        padding: 3px;
    }

JavaScript

var x = 15,
    y = 16,
    arr = new Array(x),
    max = x * y,
    xmax = x-1,
    ymax = y-1,
    xmin = 0,
    ymin = 0,
    ix = x,
    iy = y-1,
    dirx = -1,
    diry = 0;
   for(var i=0; i<x; i++) {
           arr[i] = new Array(y);
   }
  console.log('1st.  ix: '+ix+'; iy: '+iy);
for(var i=1; i<=max; i++) {
    
    ix += dirx;
    iy += diry; 
    console.log('1st. i: '+i+'; try['+ix+','+iy+']');

    if(ix<xmin) {
        console.log('ix less');
      ix++;
      dirx = 0;
      diry = -1; 
      iy += diry;   
      ymax--;     
    }
    
    if(ix>xmax) {
        console.log('ix more');
      ix = xmax;
      dirx = 0;
      diry = 1;  
      iy += diry;
      ymin++;        
    }
    
    if(iy<ymin) {
        console.log('iy less');
      iy++;
      diry = 0;
      dirx = 1; 
      ix += dirx;  
      xmin++;      
    }
    
    if(iy>ymax) {
        console.log('iy more');
      iy = ymax;
      diry = 0;
      dirx = -1; 
      ix += dirx; 
      xmax--;       
    }
    console.info('2nd. arr['+ix+']['+iy+'] = '+i+'; x:{'+xmin+','+xmax+'}; y:{'+ymin+','+ymax+'}, dirX:'+dirx+', diry:'+diry);

    arr[ix][iy] = i;   
}
var str = '<table rules="all" border=1>';
for(var i=0; i<arr.length; i++) {
    str += '<tr>';
    for(var j=0; j<arr[i].length; j++) {
        str += '<td '+(((i+j)%2)?' class=odd':'')+'>'+arr[i][j]+'</td>';
    }
    str += '</tr>';
}
str += '</table>'; 
document.write(str);
console.log(arr);