topical media & game development
mobile-query-three-plugins-poolball-tquery.poolball.js / js
Creator for tQuery.PoolBall
returns: {tQuery.Mesh} instance of
tQuery.registerStatic('createPoolBall', function(opts){
// handle parameter polymorphism
if( typeof(opts) === 'string' ) opts = {ballDesc: opts};
// handle default options
opts = tQuery.extend(opts, {
ballDesc : '8',
stripped : true,
textureW : 1024
});
// build texture based on ballDesc
if( opts.ballDesc === 'cue' ){
// build the texture
var texture = tQuery.createPoolBall.ballTexture('', false, "#ffffff", opts.textureW);
}else if( opts.ballDesc === 'black' ){
// build the texture
var texture = tQuery.createPoolBall.ballTexture('', false, "#000000", opts.textureW);
}else{
var fillStylePerDesc = {
'1' : "#FDD017", // Yellow
'2' : "#2B65EC", // Blue
'3' : "#F62817", // Red
'4' : "#7A5DC7", // Purple
'5' : "#F87217", // Orange
'6' : "#348017", // Green
'7' : "#A52A2A", // Brown or burgundy (tan in some ball sets)
'8' : "#000000", // Black
'9' : "#FDD017", // Yellow
};
// sanity check
console.assert(Object.keys(fillStylePerDesc).indexOf(opts.ballDesc) !== -1);
// build the texture
var fillStyle = fillStylePerDesc[opts.ballDesc];
var texture = tQuery.createPoolBall.ballTexture(opts.ballDesc, opts.stripped,
fillStyle, opts.textureW);
}
// TODO it would be nice to cache the texture
// create the sphere and use texture
var object = tQuery.createSphere(0.5, 128,128)
.setPhongMaterial()
.map(texture)
.back()
// return the just created object
return object;
});
display the shaddow of the smiley in a texture
parameter: {canvasElement} the canvas where we draw
tQuery.createPoolBall.draw = function(canvas, textData, stripped, fillStyle){
var ctx = canvas.getContext( '2d' );
var xtx = tQuery.createPoolBall.xCanvas.create(ctx);
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();
// do the strip/full
ctx.save();
ctx.translate(w/2, h/2)
var rectH = stripped ? h/2 : h;
ctx.fillStyle = fillStyle;
ctx.fillRect(-w/2,-rectH/2, w, rectH);
ctx.restore();
if( textData ){
// do white circle around textData
ctx.save();
ctx.translate(w/4, h/2)
ctx.fillStyle = "#FFFFFF";
var radiusW = 0.7 * w/4;
var radiusH = 1.2 * h/4;
xtx.fillEllipse(-radiusW/2, -radiusH/2, radiusW, radiusH);
ctx.restore();
// draw text data
ctx.save();
ctx.translate(w/4, 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();
}
}
tQuery.createPoolBall.ballTexture = function( textData, stripped, fillStyle, canvasW, mapping ){
canvasW = typeof canvasW !== 'undefined' ? canvasW : 512;
// create the canvas
var canvas = document.createElement('canvas');
canvas.width = canvas.height = canvasW;
// create the texture
var texture = new THREE.Texture(canvas, mapping);
texture.needsUpdate = true;
// draw in the texture
tQuery.createPoolBall.draw(canvas, textData, stripped, fillStyle);
// return the texture
return texture;
};
helper for the canvas2d API to draw circle and ellipse
@type {Object}
tQuery.createPoolBall.xCanvas = {
create : function(ctx){
var xCanvas = tQuery.createPoolBall.xCanvas;
return {
fillEllipse : function(aX, aY, aWidth, aHeight){
return xCanvas.fillEllipse(ctx, aX, aY, aWidth, aHeight)
}
}
},
// Andrea Giammarchi - Mit Style License
// Circle methods
circle : function(ctx, aX, aY, aDiameter){
this.ellipse(ctx, aX, aY, aDiameter, aDiameter);
},
fillCircle : function(ctx, aX, aY, aDiameter){
ctx.beginPath();
this.circle(ctx, aX, aY, aDiameter);
ctx.fill();
},
strokeCircle : function(ctx, aX, aY, aDiameter){
ctx.beginPath();
this.circle(ctx, aX, aY, aDiameter);
ctx.stroke();
},
// Ellipse methods
ellipse : function(ctx, aX, aY, aWidth, aHeight){
var hB = (aWidth / 2) * .5522848,
vB = (aHeight / 2) * .5522848,
eX = aX + aWidth,
eY = aY + aHeight,
mX = aX + aWidth / 2,
mY = aY + aHeight / 2;
ctx.moveTo(aX, mY);
ctx.bezierCurveTo(aX, mY - vB, mX - hB, aY, mX, aY);
ctx.bezierCurveTo(mX + hB, aY, eX, mY - vB, eX, mY);
ctx.bezierCurveTo(eX, mY + vB, mX + hB, eY, mX, eY);
ctx.bezierCurveTo(mX - hB, eY, aX, mY + vB, aX, mY);
ctx.closePath();
},
fillEllipse : function(ctx, aX, aY, aWidth, aHeight){
ctx.beginPath();
this.ellipse(ctx, aX, aY, aWidth, aHeight);
ctx.fill();
},
strokeEllipse:function(ctx, aX, aY, aWidth, aHeight){
ctx.beginPath();
this.ellipse(ctx, aX, aY, aWidth, aHeight);
ctx.stroke();
}
};
(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.