topical media & game development

talk show tell print

mobile-query-three-vendor-threex-threex.texturePoolBall.js / js



  // NOTE: this match THREE namespace on purpose
  if(typeof THREEx === "undefined")                var THREEx        = {};
  if(typeof THREEx.Texture === "undefined")        THREEx.Texture        = {};
  
  

  
  THREEx.Texture.PoolBall        = {
          clear        : function(canvas){
                  var w        = canvas.width;
                  var ctx        = canvas.getContext( '2d' );
                  clearRect(0, 0, w, w);        
          },
          
display the shaddow of the smiley in a texture
parameter: {canvasElement} the canvas where we draw

  
          draw        : function(canvas, textData, stripped, color){
                  var ctx                = canvas.getContext( '2d' );
                  var w                = canvas.width;
                  var h                = canvas.height;
                  
                  // base color is white
                  ctx.save();
                  ctx.fillStyle        = "#FFFFFF";
                  ctx.fillRect(0,0, w, h);
                  ctx.restore();
  
                  ctx.save();
                  ctx.translate(w/2, h/2)
                  var rectH        = stripped ? h/2 : h;
                  ctx.fillStyle        = color.getContextStyle();
                  ctx.fillRect(-w/2,-rectH/2, w, rectH);
                  ctx.restore();
  
                  ctx.save();
                  ctx.translate(w/2, h/2)
                  ctx.fillStyle        = "#FFFFFF";
                  var radiusW        = 0.7 * w/4;
                  var radiusH        = 1.2 * h/4;
                  ctx.fillEllipse( -radiusW/2, -radiusH/2, radiusW, radiusH);
                  ctx.restore();
  
                  ctx.save();
                  ctx.translate(w/2, h/2)
                  var textH        = w/4;
                  ctx.font        = "bolder "+textH+"px Arial";
                  ctx.fillStyle        = "#000000";
                  var textW        = ctx.measureText(textData).width;
                  ctx.fillText(textData, -textW/2, 0.8*textH/2);
                  ctx.restore();
          },
  
  
////////////////////////////////////////////////////////////////////////////

// texture helper //
////////////////////////////////////////////////////////////////////////////

ballTexture: function( textData, stripped, color, canvasW, mapping, callback ) { var canvasDrawer = function(canvas){ THREEx.Texture.PoolBall.draw(canvas, textData, stripped, color); } return THREEx.Texture.PoolBall._buildTexture( canvasW, mapping, callback, canvasDrawer ); }, _buildTexture: function( canvasW, mapping, callback, canvasDrawer ) { canvasW = typeof canvasW !== 'undefined' ? canvasW : 64; var canvas = document.createElement('canvas'); canvas.width = canvas.height = canvasW; var texture = new THREE.Texture(canvas, mapping); canvasDrawer(canvas); texture.needsUpdate = true; if( callback ) callback( this ); return texture; }, }


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.