mobile-query-three-plugins-pacman-tmp-Threex.TextureSmiley.js / js
- depends on a lib excanvas which isnt there - to get idea on how to draw http://www.wpclipart.com/smiley/glossy_smiley/glossy_pink_smileys/glossy_smiley_pink_angry.png.html */ THREEx.Texture.Smiley = { clear : function(canvas){ var w = canvas.width; var ctx = canvas.getContext( '2d' ); clearRect(0, 0, w, w); }, display an happy smiley on a canvas for texture
parameter: {canvasElement} the canvas where we drawhappy : function(canvas){ var w = canvas.width; var ctx = canvas.getContext( '2d' ); var eyeDx = w/16; var eyeDy = w/12; var eyeW = w/16; var eyeH = w/6; var mouthW = w/12; var mouthDy = w/12; var mouthRbeg = 0; var mouthRend = 180 * Math.PI / 180; ctx.fillStyle = "rgb(0,0,0)"; // right eyes ctx.save(); ctx.translate(w/2 - w/4, w/2); ctx.fillEllipse(eyeDx - eyeW/2, - eyeDy - eyeH/2, eyeW, eyeH); ctx.restore(); // left eyes ctx.save(); ctx.translate(w/2 - w/4, w/2); ctx.fillEllipse(- eyeDx - eyeW/2, - eyeDy - eyeH/2, eyeW, eyeH); ctx.restore(); // right part of the mouth ctx.save(); ctx.beginPath(); ctx.translate(w/2 - w/4, w/2); ctx.arc(0, mouthDy, mouthW, mouthRbeg, mouthRend, false) ctx.fill(); ctx.restore(); }, display an hurt smiley on a canvas for texturehurt : function(canvas){ var w = canvas.width; var ctx = canvas.getContext( '2d' ); var eyeDx = w/16; var eyeDy = w/12; var eyeW = w/24; var eyeH = w/9; var mouthW = w/12; var mouthDx = 0; var mouthDy = w/12; ctx.fillStyle = "#000000"; ctx.lineCap = "round"; ctx.lineWidth = w/48; // right eyes ctx.save(); ctx.beginPath(); ctx.translate(w/2 - w/4, w/2); ctx.translate(eyeDx, -eyeDy); ctx.moveTo(-eyeW/2, -eyeH/2); ctx.lineTo(+eyeW/2, +eyeH/2); ctx.stroke(); ctx.moveTo(+eyeW/2, -eyeH/2); ctx.lineTo(-eyeW/2, +eyeH/2); ctx.stroke(); ctx.restore(); // left eyes ctx.save(); ctx.beginPath(); ctx.translate(w/2 - w/4, w/2); ctx.translate(-eyeDx, -eyeDy); ctx.moveTo(-eyeW/2, -eyeH/2); ctx.lineTo(+eyeW/2, +eyeH/2); ctx.stroke(); ctx.moveTo(+eyeW/2, -eyeH/2); ctx.lineTo(-eyeW/2, +eyeH/2); ctx.stroke(); ctx.restore(); ctx.lineWidth = w/32; // mouth flat (rigth) ctx.save(); ctx.beginPath(); ctx.translate(w/2 - w/4, w/2); ctx.translate(+mouthDx, +mouthDy); ctx.moveTo(-mouthW/2, 0); ctx.lineTo(+mouthW/2, 0); ctx.stroke(); ctx.restore(); }, display an angry smiley on a canvas for textureangry : function(canvas){ var w = canvas.width; var ctx = canvas.getContext( '2d' ); var eyeDx = w/16; var eyeDy = w/10; var eyeW = w/12; var eyeH = w/10; var mouthW = w/12; var mouthDy = w/10; var mouthRbeg = 180 * Math.PI / 180; var mouthRend = 0; ctx.fillStyle = "rgb(0,0,0)"; var eyeBrowW = w/6; var eyeBrowH = w/20; var eyeBrowDx = w/16; var eyeBrowDy = w/5; var eyeBrowRot = 30*Math.PI/180; // right eyebrow ctx.save(); ctx.translate(w/2 - w/4, w/2); ctx.translate(eyeBrowDx, -eyeBrowDy); ctx.rotate(-eyeBrowRot) ctx.fillRect( -eyeBrowW/2, -eyeBrowH/2, eyeBrowW, eyeBrowH); ctx.restore(); / right eyes ctx.save(); ctx.translate(w/2 - w/4, w/2); ctx.fillEllipse(eyeDx - eyeW/2, - eyeDy - eyeH/2, eyeW, eyeH); ctx.restore(); // left eyebrow ctx.save(); ctx.translate(w/2 - w/4, w/2); ctx.translate(-eyeBrowDx, -eyeBrowDy); ctx.rotate(+eyeBrowRot) ctx.fillRect( -eyeBrowW/2, -eyeBrowH/2, eyeBrowW, eyeBrowH); ctx.restore(); // left eyes ctx.save(); ctx.translate(w/2 - w/4, w/2); ctx.fillEllipse(- eyeDx - eyeW/2, - eyeDy - eyeH/2, eyeW, eyeH); ctx.restore(); // the mouth ctx.save(); ctx.beginPath(); ctx.translate(w/2 - w/4, w/2); ctx.arc(0, mouthDy, mouthW, mouthRbeg, mouthRend, false) ctx.fill(); ctx.restore(); }, display an happy smiley on a canvas for texture
parameter: {canvasElement} the canvas where we drawpupil : function(canvas){ var w = canvas.width; var ctx = canvas.getContext( '2d' ); var eyeDx = 0; var eyeDy = 0; var eyeW = w/12; var eyeH = w/3; ctx.fillStyle = "#000000"; // pupil ctx.save(); ctx.translate(w/2 - w/4, w/2); ctx.fillEllipse(eyeDx - eyeW/2, - eyeDy - eyeH/2, eyeW, eyeH); ctx.restore(); }, display the shaddow of the smiley in a texture
parameter: {canvasElement} the canvas where we drawshaddow : function(canvas){ var w = canvas.width; var ctx = canvas.getContext( '2d' ); ctx.fillStyle = "#333333"; var circleW = 8*w/8; var circleH = 8*w/8; ctx.save(); ctx.translate(w/2 , w/2); ctx.fillEllipse(-circleW/2, -circleH/2, circleW, circleH); ctx.restore(); }, display the shaddow of the smiley in a texture
parameter: {canvasElement} the canvas where we drawtextOnBack : function(canvas, textData, fontSize){ var w = canvas.width; var ctx = canvas.getContext( '2d' ); ctx.fillStyle = "#000000"; ctx.save(); ctx.translate(+3*w/4, w/2-w/32) ctx.font = "bolder "+fontSize+" Arial"; var textW = ctx.measureText(textData).width; ctx.strokeStyle = "rgb(0,0,0)"; //console.log("measutreText", ctx.measureText(textData)); ctx.fillText(textData, -textW/2, 0); ctx.restore(); }, ////////////////////////////////////////////////////////////////////////////
// texture helper //////////////////////////////////////////////////////////////////////////////
happyTexture: function( canvasW, mapping, callback ) { var canvasDrawer = THREEx.Texture.Smiley.happy; return THREEx.Texture.Smiley._buildTexture( canvasW, mapping, callback, canvasDrawer ); }, hurtTexture: function( canvasW, mapping, callback ) { var canvasDrawer = THREEx.Texture.Smiley.hurt; return THREEx.Texture.Smiley._buildTexture( canvasW, mapping, callback, canvasDrawer ); }, angryTexture: function( canvasW, mapping, callback ) { var canvasDrawer = THREEx.Texture.Smiley.angry; return THREEx.Texture.Smiley._buildTexture( canvasW, mapping, callback, canvasDrawer ); }, pupilTexture: function( canvasW, mapping, callback ) { var canvasDrawer = THREEx.Texture.Smiley.pupil; return THREEx.Texture.Smiley._buildTexture( canvasW, mapping, callback, canvasDrawer ); }, shaddowTexture: function( canvasW, mapping, callback ) { var canvasDrawer = THREEx.Texture.Smiley.shaddow; return THREEx.Texture.Smiley._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; }, }
[]readme course(s) prefaceI 1 2II 3 4III 5 6 7IV 8 9 10V 11 12 afterthought(s)appendix reference(s) example(s)resource(s) _![]()
(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.