<Content Include="Account\Login.aspx" />
<Content Include="Account\Register.aspx" />
<Content Include="HTML5test0002.htm" />
+ <Content Include="Scripts\glMatrix-0.9.4.min.js" />
+ <Content Include="Scripts\glmatrix.js" />
<Content Include="Scripts\jquery-1.4.4.js" />
<Content Include="Scripts\jquery-1.4.4.min.js" />
<Content Include="Scripts\test.js" />
<Content Include="Styles\Site.css" />
<Content Include="Default.aspx" />
<Content Include="Global.asax" />
+ <Content Include="test\blog20110122.htm" />
+ <Content Include="test\blog20110125.htm" />
<Content Include="test\HTML5test0002.htm" />
<Content Include="test\html5test0003.htm" />
<Content Include="test\html5test0004.htm" />
<Content Include="test\html5test0005.htm" />
- <Content Include="test\html5test0007.htm" />
+ <Content Include="test\html5test0008.htm" />
+ <Content Include="test\html5test3d000.htm" />
+ <Content Include="test\html5test3d001.htm" />
<Content Include="Web.config" />
<Content Include="Web.Debug.config">
<DependentUpon>Web.config</DependentUpon>
--- /dev/null
+// glMatrix v0.9.4
+glMatrixArrayType=typeof Float32Array!="undefined"?Float32Array:typeof WebGLFloatArray!="undefined"?WebGLFloatArray:Array;var vec3={};vec3.create=function(a){var b=new glMatrixArrayType(3);if(a){b[0]=a[0];b[1]=a[1];b[2]=a[2]}return b};vec3.set=function(a,b){b[0]=a[0];b[1]=a[1];b[2]=a[2];return b};vec3.add=function(a,b,c){if(!c||a==c){a[0]+=b[0];a[1]+=b[1];a[2]+=b[2];return a}c[0]=a[0]+b[0];c[1]=a[1]+b[1];c[2]=a[2]+b[2];return c};
+vec3.subtract=function(a,b,c){if(!c||a==c){a[0]-=b[0];a[1]-=b[1];a[2]-=b[2];return a}c[0]=a[0]-b[0];c[1]=a[1]-b[1];c[2]=a[2]-b[2];return c};vec3.negate=function(a,b){b||(b=a);b[0]=-a[0];b[1]=-a[1];b[2]=-a[2];return b};vec3.scale=function(a,b,c){if(!c||a==c){a[0]*=b;a[1]*=b;a[2]*=b;return a}c[0]=a[0]*b;c[1]=a[1]*b;c[2]=a[2]*b;return c};
+vec3.normalize=function(a,b){b||(b=a);var c=a[0],d=a[1],e=a[2],g=Math.sqrt(c*c+d*d+e*e);if(g){if(g==1){b[0]=c;b[1]=d;b[2]=e;return b}}else{b[0]=0;b[1]=0;b[2]=0;return b}g=1/g;b[0]=c*g;b[1]=d*g;b[2]=e*g;return b};vec3.cross=function(a,b,c){c||(c=a);var d=a[0],e=a[1];a=a[2];var g=b[0],f=b[1];b=b[2];c[0]=e*b-a*f;c[1]=a*g-d*b;c[2]=d*f-e*g;return c};vec3.length=function(a){var b=a[0],c=a[1];a=a[2];return Math.sqrt(b*b+c*c+a*a)};vec3.dot=function(a,b){return a[0]*b[0]+a[1]*b[1]+a[2]*b[2]};
+vec3.direction=function(a,b,c){c||(c=a);var d=a[0]-b[0],e=a[1]-b[1];a=a[2]-b[2];b=Math.sqrt(d*d+e*e+a*a);if(!b){c[0]=0;c[1]=0;c[2]=0;return c}b=1/b;c[0]=d*b;c[1]=e*b;c[2]=a*b;return c};vec3.str=function(a){return"["+a[0]+", "+a[1]+", "+a[2]+"]"};var mat3={};mat3.create=function(a){var b=new glMatrixArrayType(9);if(a){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];b[4]=a[4];b[5]=a[5];b[6]=a[6];b[7]=a[7];b[8]=a[8];b[9]=a[9]}return b};
+mat3.set=function(a,b){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];b[4]=a[4];b[5]=a[5];b[6]=a[6];b[7]=a[7];b[8]=a[8];return b};mat3.identity=function(a){a[0]=1;a[1]=0;a[2]=0;a[3]=0;a[4]=1;a[5]=0;a[6]=0;a[7]=0;a[8]=1;return a};mat3.toMat4=function(a,b){b||(b=mat4.create());b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=0;b[4]=a[3];b[5]=a[4];b[6]=a[5];b[7]=0;b[8]=a[6];b[9]=a[7];b[10]=a[8];b[11]=0;b[12]=0;b[13]=0;b[14]=0;b[15]=1;return b};
+mat3.str=function(a){return"["+a[0]+", "+a[1]+", "+a[2]+", "+a[3]+", "+a[4]+", "+a[5]+", "+a[6]+", "+a[7]+", "+a[8]+"]"};var mat4={};mat4.create=function(a){var b=new glMatrixArrayType(16);if(a){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];b[4]=a[4];b[5]=a[5];b[6]=a[6];b[7]=a[7];b[8]=a[8];b[9]=a[9];b[10]=a[10];b[11]=a[11];b[12]=a[12];b[13]=a[13];b[14]=a[14];b[15]=a[15]}return b};
+mat4.set=function(a,b){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];b[4]=a[4];b[5]=a[5];b[6]=a[6];b[7]=a[7];b[8]=a[8];b[9]=a[9];b[10]=a[10];b[11]=a[11];b[12]=a[12];b[13]=a[13];b[14]=a[14];b[15]=a[15];return b};mat4.identity=function(a){a[0]=1;a[1]=0;a[2]=0;a[3]=0;a[4]=0;a[5]=1;a[6]=0;a[7]=0;a[8]=0;a[9]=0;a[10]=1;a[11]=0;a[12]=0;a[13]=0;a[14]=0;a[15]=1;return a};
+mat4.transpose=function(a,b){if(!b||a==b){var c=a[1],d=a[2],e=a[3],g=a[6],f=a[7],h=a[11];a[1]=a[4];a[2]=a[8];a[3]=a[12];a[4]=c;a[6]=a[9];a[7]=a[13];a[8]=d;a[9]=g;a[11]=a[14];a[12]=e;a[13]=f;a[14]=h;return a}b[0]=a[0];b[1]=a[4];b[2]=a[8];b[3]=a[12];b[4]=a[1];b[5]=a[5];b[6]=a[9];b[7]=a[13];b[8]=a[2];b[9]=a[6];b[10]=a[10];b[11]=a[14];b[12]=a[3];b[13]=a[7];b[14]=a[11];b[15]=a[15];return b};
+mat4.determinant=function(a){var b=a[0],c=a[1],d=a[2],e=a[3],g=a[4],f=a[5],h=a[6],i=a[7],j=a[8],k=a[9],l=a[10],o=a[11],m=a[12],n=a[13],p=a[14];a=a[15];return m*k*h*e-j*n*h*e-m*f*l*e+g*n*l*e+j*f*p*e-g*k*p*e-m*k*d*i+j*n*d*i+m*c*l*i-b*n*l*i-j*c*p*i+b*k*p*i+m*f*d*o-g*n*d*o-m*c*h*o+b*n*h*o+g*c*p*o-b*f*p*o-j*f*d*a+g*k*d*a+j*c*h*a-b*k*h*a-g*c*l*a+b*f*l*a};
+mat4.inverse=function(a,b){b||(b=a);var c=a[0],d=a[1],e=a[2],g=a[3],f=a[4],h=a[5],i=a[6],j=a[7],k=a[8],l=a[9],o=a[10],m=a[11],n=a[12],p=a[13],r=a[14],s=a[15],A=c*h-d*f,B=c*i-e*f,t=c*j-g*f,u=d*i-e*h,v=d*j-g*h,w=e*j-g*i,x=k*p-l*n,y=k*r-o*n,z=k*s-m*n,C=l*r-o*p,D=l*s-m*p,E=o*s-m*r,q=1/(A*E-B*D+t*C+u*z-v*y+w*x);b[0]=(h*E-i*D+j*C)*q;b[1]=(-d*E+e*D-g*C)*q;b[2]=(p*w-r*v+s*u)*q;b[3]=(-l*w+o*v-m*u)*q;b[4]=(-f*E+i*z-j*y)*q;b[5]=(c*E-e*z+g*y)*q;b[6]=(-n*w+r*t-s*B)*q;b[7]=(k*w-o*t+m*B)*q;b[8]=(f*D-h*z+j*x)*q;
+b[9]=(-c*D+d*z-g*x)*q;b[10]=(n*v-p*t+s*A)*q;b[11]=(-k*v+l*t-m*A)*q;b[12]=(-f*C+h*y-i*x)*q;b[13]=(c*C-d*y+e*x)*q;b[14]=(-n*u+p*B-r*A)*q;b[15]=(k*u-l*B+o*A)*q;return b};mat4.toMat3=function(a,b){b||(b=mat3.create());b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[4];b[4]=a[5];b[5]=a[6];b[6]=a[8];b[7]=a[9];b[8]=a[10];return b};
+mat4.toInverseMat3=function(a,b){var c=a[0],d=a[1],e=a[2],g=a[4],f=a[5],h=a[6],i=a[8],j=a[9],k=a[10],l=k*f-h*j,o=-k*g+h*i,m=j*g-f*i,n=c*l+d*o+e*m;if(!n)return null;n=1/n;b||(b=mat3.create());b[0]=l*n;b[1]=(-k*d+e*j)*n;b[2]=(h*d-e*f)*n;b[3]=o*n;b[4]=(k*c-e*i)*n;b[5]=(-h*c+e*g)*n;b[6]=m*n;b[7]=(-j*c+d*i)*n;b[8]=(f*c-d*g)*n;return b};
+mat4.multiply=function(a,b,c){c||(c=a);var d=a[0],e=a[1],g=a[2],f=a[3],h=a[4],i=a[5],j=a[6],k=a[7],l=a[8],o=a[9],m=a[10],n=a[11],p=a[12],r=a[13],s=a[14];a=a[15];var A=b[0],B=b[1],t=b[2],u=b[3],v=b[4],w=b[5],x=b[6],y=b[7],z=b[8],C=b[9],D=b[10],E=b[11],q=b[12],F=b[13],G=b[14];b=b[15];c[0]=A*d+B*h+t*l+u*p;c[1]=A*e+B*i+t*o+u*r;c[2]=A*g+B*j+t*m+u*s;c[3]=A*f+B*k+t*n+u*a;c[4]=v*d+w*h+x*l+y*p;c[5]=v*e+w*i+x*o+y*r;c[6]=v*g+w*j+x*m+y*s;c[7]=v*f+w*k+x*n+y*a;c[8]=z*d+C*h+D*l+E*p;c[9]=z*e+C*i+D*o+E*r;c[10]=z*
+g+C*j+D*m+E*s;c[11]=z*f+C*k+D*n+E*a;c[12]=q*d+F*h+G*l+b*p;c[13]=q*e+F*i+G*o+b*r;c[14]=q*g+F*j+G*m+b*s;c[15]=q*f+F*k+G*n+b*a;return c};mat4.multiplyVec3=function(a,b,c){c||(c=b);var d=b[0],e=b[1];b=b[2];c[0]=a[0]*d+a[4]*e+a[8]*b+a[12];c[1]=a[1]*d+a[5]*e+a[9]*b+a[13];c[2]=a[2]*d+a[6]*e+a[10]*b+a[14];return c};
+mat4.multiplyVec4=function(a,b,c){c||(c=b);var d=b[0],e=b[1],g=b[2];b=b[3];c[0]=a[0]*d+a[4]*e+a[8]*g+a[12]*b;c[1]=a[1]*d+a[5]*e+a[9]*g+a[13]*b;c[2]=a[2]*d+a[6]*e+a[10]*g+a[14]*b;c[4]=a[4]*d+a[7]*e+a[11]*g+a[15]*b;return c};
+mat4.translate=function(a,b,c){var d=b[0],e=b[1];b=b[2];if(!c||a==c){a[12]=a[0]*d+a[4]*e+a[8]*b+a[12];a[13]=a[1]*d+a[5]*e+a[9]*b+a[13];a[14]=a[2]*d+a[6]*e+a[10]*b+a[14];a[15]=a[3]*d+a[7]*e+a[11]*b+a[15];return a}var g=a[0],f=a[1],h=a[2],i=a[3],j=a[4],k=a[5],l=a[6],o=a[7],m=a[8],n=a[9],p=a[10],r=a[11];c[0]=g;c[1]=f;c[2]=h;c[3]=i;c[4]=j;c[5]=k;c[6]=l;c[7]=o;c[8]=m;c[9]=n;c[10]=p;c[11]=r;c[12]=g*d+j*e+m*b+a[12];c[13]=f*d+k*e+n*b+a[13];c[14]=h*d+l*e+p*b+a[14];c[15]=i*d+o*e+r*b+a[15];return c};
+mat4.scale=function(a,b,c){var d=b[0],e=b[1];b=b[2];if(!c||a==c){a[0]*=d;a[1]*=d;a[2]*=d;a[3]*=d;a[4]*=e;a[5]*=e;a[6]*=e;a[7]*=e;a[8]*=b;a[9]*=b;a[10]*=b;a[11]*=b;return a}c[0]=a[0]*d;c[1]=a[1]*d;c[2]=a[2]*d;c[3]=a[3]*d;c[4]=a[4]*e;c[5]=a[5]*e;c[6]=a[6]*e;c[7]=a[7]*e;c[8]=a[8]*b;c[9]=a[9]*b;c[10]=a[10]*b;c[11]=a[11]*b;c[12]=a[12];c[13]=a[13];c[14]=a[14];c[15]=a[15];return c};
+mat4.rotate=function(a,b,c,d){var e=c[0],g=c[1];c=c[2];var f=Math.sqrt(e*e+g*g+c*c);if(!f)return null;if(f!=1){f=1/f;e*=f;g*=f;c*=f}var h=Math.sin(b),i=Math.cos(b),j=1-i;b=a[0];f=a[1];var k=a[2],l=a[3],o=a[4],m=a[5],n=a[6],p=a[7],r=a[8],s=a[9],A=a[10],B=a[11],t=e*e*j+i,u=g*e*j+c*h,v=c*e*j-g*h,w=e*g*j-c*h,x=g*g*j+i,y=c*g*j+e*h,z=e*c*j+g*h;e=g*c*j-e*h;g=c*c*j+i;if(d){if(a!=d){d[12]=a[12];d[13]=a[13];d[14]=a[14];d[15]=a[15]}}else d=a;d[0]=b*t+o*u+r*v;d[1]=f*t+m*u+s*v;d[2]=k*t+n*u+A*v;d[3]=l*t+p*u+B*
+v;d[4]=b*w+o*x+r*y;d[5]=f*w+m*x+s*y;d[6]=k*w+n*x+A*y;d[7]=l*w+p*x+B*y;d[8]=b*z+o*e+r*g;d[9]=f*z+m*e+s*g;d[10]=k*z+n*e+A*g;d[11]=l*z+p*e+B*g;return d};mat4.rotateX=function(a,b,c){var d=Math.sin(b);b=Math.cos(b);var e=a[4],g=a[5],f=a[6],h=a[7],i=a[8],j=a[9],k=a[10],l=a[11];if(c){if(a!=c){c[0]=a[0];c[1]=a[1];c[2]=a[2];c[3]=a[3];c[12]=a[12];c[13]=a[13];c[14]=a[14];c[15]=a[15]}}else c=a;c[4]=e*b+i*d;c[5]=g*b+j*d;c[6]=f*b+k*d;c[7]=h*b+l*d;c[8]=e*-d+i*b;c[9]=g*-d+j*b;c[10]=f*-d+k*b;c[11]=h*-d+l*b;return c};
+mat4.rotateY=function(a,b,c){var d=Math.sin(b);b=Math.cos(b);var e=a[0],g=a[1],f=a[2],h=a[3],i=a[8],j=a[9],k=a[10],l=a[11];if(c){if(a!=c){c[4]=a[4];c[5]=a[5];c[6]=a[6];c[7]=a[7];c[12]=a[12];c[13]=a[13];c[14]=a[14];c[15]=a[15]}}else c=a;c[0]=e*b+i*-d;c[1]=g*b+j*-d;c[2]=f*b+k*-d;c[3]=h*b+l*-d;c[8]=e*d+i*b;c[9]=g*d+j*b;c[10]=f*d+k*b;c[11]=h*d+l*b;return c};
+mat4.rotateZ=function(a,b,c){var d=Math.sin(b);b=Math.cos(b);var e=a[0],g=a[1],f=a[2],h=a[3],i=a[4],j=a[5],k=a[6],l=a[7];if(c){if(a!=c){c[8]=a[8];c[9]=a[9];c[10]=a[10];c[11]=a[11];c[12]=a[12];c[13]=a[13];c[14]=a[14];c[15]=a[15]}}else c=a;c[0]=e*b+i*d;c[1]=g*b+j*d;c[2]=f*b+k*d;c[3]=h*b+l*d;c[4]=e*-d+i*b;c[5]=g*-d+j*b;c[6]=f*-d+k*b;c[7]=h*-d+l*b;return c};
+mat4.frustum=function(a,b,c,d,e,g,f){f||(f=mat4.create());var h=b-a,i=d-c,j=g-e;f[0]=e*2/h;f[1]=0;f[2]=0;f[3]=0;f[4]=0;f[5]=e*2/i;f[6]=0;f[7]=0;f[8]=(b+a)/h;f[9]=(d+c)/i;f[10]=-(g+e)/j;f[11]=-1;f[12]=0;f[13]=0;f[14]=-(g*e*2)/j;f[15]=0;return f};mat4.perspective=function(a,b,c,d,e){a=c*Math.tan(a*Math.PI/360);b=a*b;return mat4.frustum(-b,b,-a,a,c,d,e)};
+mat4.ortho=function(a,b,c,d,e,g,f){f||(f=mat4.create());var h=b-a,i=d-c,j=g-e;f[0]=2/h;f[1]=0;f[2]=0;f[3]=0;f[4]=0;f[5]=2/i;f[6]=0;f[7]=0;f[8]=0;f[9]=0;f[10]=-2/j;f[11]=0;f[12]=(a+b)/h;f[13]=(d+c)/i;f[14]=(g+e)/j;f[15]=1;return f};
+mat4.lookAt=function(a,b,c,d){d||(d=mat4.create());var e=a[0],g=a[1];a=a[2];var f=c[0],h=c[1],i=c[2];c=b[1];var j=b[2];if(e==b[0]&&g==c&&a==j)return mat4.identity(d);var k,l,o,m;c=e-b[0];j=g-b[1];b=a-b[2];m=1/Math.sqrt(c*c+j*j+b*b);c*=m;j*=m;b*=m;k=h*b-i*j;i=i*c-f*b;f=f*j-h*c;if(m=Math.sqrt(k*k+i*i+f*f)){m=1/m;k*=m;i*=m;f*=m}else f=i=k=0;h=j*f-b*i;l=b*k-c*f;o=c*i-j*k;if(m=Math.sqrt(h*h+l*l+o*o)){m=1/m;h*=m;l*=m;o*=m}else o=l=h=0;d[0]=k;d[1]=h;d[2]=c;d[3]=0;d[4]=i;d[5]=l;d[6]=j;d[7]=0;d[8]=f;d[9]=
+o;d[10]=b;d[11]=0;d[12]=-(k*e+i*g+f*a);d[13]=-(h*e+l*g+o*a);d[14]=-(c*e+j*g+b*a);d[15]=1;return d};mat4.str=function(a){return"["+a[0]+", "+a[1]+", "+a[2]+", "+a[3]+", "+a[4]+", "+a[5]+", "+a[6]+", "+a[7]+", "+a[8]+", "+a[9]+", "+a[10]+", "+a[11]+", "+a[12]+", "+a[13]+", "+a[14]+", "+a[15]+"]"};quat4={};quat4.create=function(a){var b=new glMatrixArrayType(4);if(a){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3]}return b};quat4.set=function(a,b){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];return b};
+quat4.calculateW=function(a,b){var c=a[0],d=a[1],e=a[2];if(!b||a==b){a[3]=-Math.sqrt(Math.abs(1-c*c-d*d-e*e));return a}b[0]=c;b[1]=d;b[2]=e;b[3]=-Math.sqrt(Math.abs(1-c*c-d*d-e*e));return b};quat4.inverse=function(a,b){if(!b||a==b){a[0]*=1;a[1]*=1;a[2]*=1;return a}b[0]=-a[0];b[1]=-a[1];b[2]=-a[2];b[3]=a[3];return b};quat4.length=function(a){var b=a[0],c=a[1],d=a[2];a=a[3];return Math.sqrt(b*b+c*c+d*d+a*a)};
+quat4.normalize=function(a,b){b||(b=a);var c=a[0],d=a[1],e=a[2],g=a[3],f=Math.sqrt(c*c+d*d+e*e+g*g);if(f==0){b[0]=0;b[1]=0;b[2]=0;b[3]=0;return b}f=1/f;b[0]=c*f;b[1]=d*f;b[2]=e*f;b[3]=g*f;return b};quat4.multiply=function(a,b,c){c||(c=a);var d=a[0],e=a[1],g=a[2];a=a[3];var f=b[0],h=b[1],i=b[2];b=b[3];c[0]=d*b+a*f+e*i-g*h;c[1]=e*b+a*h+g*f-d*i;c[2]=g*b+a*i+d*h-e*f;c[3]=a*b-d*f-e*h-g*i;return c};
+quat4.multiplyVec3=function(a,b,c){c||(c=b);var d=b[0],e=b[1],g=b[2];b=a[0];var f=a[1],h=a[2];a=a[3];var i=a*d+f*g-h*e,j=a*e+h*d-b*g,k=a*g+b*e-f*d;d=-b*d-f*e-h*g;c[0]=i*a+d*-b+j*-h-k*-f;c[1]=j*a+d*-f+k*-b-i*-h;c[2]=k*a+d*-h+i*-f-j*-b;return c};quat4.toMat3=function(a,b){b||(b=mat3.create());var c=a[0],d=a[1],e=a[2],g=a[3],f=c+c,h=d+d,i=e+e,j=c*f,k=c*h;c=c*i;var l=d*h;d=d*i;e=e*i;f=g*f;h=g*h;g=g*i;b[0]=1-(l+e);b[1]=k-g;b[2]=c+h;b[3]=k+g;b[4]=1-(j+e);b[5]=d-f;b[6]=c-h;b[7]=d+f;b[8]=1-(j+l);return b};
+quat4.toMat4=function(a,b){b||(b=mat4.create());var c=a[0],d=a[1],e=a[2],g=a[3],f=c+c,h=d+d,i=e+e,j=c*f,k=c*h;c=c*i;var l=d*h;d=d*i;e=e*i;f=g*f;h=g*h;g=g*i;b[0]=1-(l+e);b[1]=k-g;b[2]=c+h;b[3]=0;b[4]=k+g;b[5]=1-(j+e);b[6]=d-f;b[7]=0;b[8]=c-h;b[9]=d+f;b[10]=1-(j+l);b[11]=0;b[12]=0;b[13]=0;b[14]=0;b[15]=1;return b};quat4.str=function(a){return"["+a[0]+", "+a[1]+", "+a[2]+", "+a[3]+"]"};
\ No newline at end of file
--- /dev/null
+/*
+* glMatrix.js - High performance matrix and vector operations for WebGL
+* version 0.9.5
+*/
+
+/*
+* Copyright (c) 2010 Brandon Jones
+*
+* This software is provided 'as-is', without any express or implied
+* warranty. In no event will the authors be held liable for any damages
+* arising from the use of this software.
+*
+* Permission is granted to anyone to use this software for any purpose,
+* including commercial applications, and to alter it and redistribute it
+* freely, subject to the following restrictions:
+*
+* 1. The origin of this software must not be misrepresented; you must not
+* claim that you wrote the original software. If you use this software
+* in a product, an acknowledgment in the product documentation would be
+* appreciated but is not required.
+*
+* 2. Altered source versions must be plainly marked as such, and must not
+* be misrepresented as being the original software.
+*
+* 3. This notice may not be removed or altered from any source
+* distribution.
+*/
+
+// Fallback for systems that don't support WebGL
+if (typeof Float32Array != 'undefined') {
+ glMatrixArrayType = Float32Array;
+} else if (typeof WebGLFloatArray != 'undefined') {
+ glMatrixArrayType = WebGLFloatArray; // This is officially deprecated and should dissapear in future revisions.
+} else {
+ glMatrixArrayType = Array;
+}
+
+/*
+* vec3 - 3 Dimensional Vector
+*/
+var vec3 = {};
+
+/*
+* vec3.create
+* Creates a new instance of a vec3 using the default array type
+* Any javascript array containing at least 3 numeric elements can serve as a vec3
+*
+* Params:
+* vec - Optional, vec3 containing values to initialize with
+*
+* Returns:
+* New vec3
+*/
+vec3.create = function (vec) {
+ var dest = new glMatrixArrayType(3);
+
+ if (vec) {
+ dest[0] = vec[0];
+ dest[1] = vec[1];
+ dest[2] = vec[2];
+ }
+
+ return dest;
+};
+
+/*
+* vec3.set
+* Copies the values of one vec3 to another
+*
+* Params:
+* vec - vec3 containing values to copy
+* dest - vec3 receiving copied values
+*
+* Returns:
+* dest
+*/
+vec3.set = function (vec, dest) {
+ dest[0] = vec[0];
+ dest[1] = vec[1];
+ dest[2] = vec[2];
+
+ return dest;
+};
+
+/*
+* vec3.add
+* Performs a vector addition
+*
+* Params:
+* vec - vec3, first operand
+* vec2 - vec3, second operand
+* dest - Optional, vec3 receiving operation result. If not specified result is written to vec
+*
+* Returns:
+* dest if specified, vec otherwise
+*/
+vec3.add = function (vec, vec2, dest) {
+ if (!dest || vec == dest) {
+ vec[0] += vec2[0];
+ vec[1] += vec2[1];
+ vec[2] += vec2[2];
+ return vec;
+ }
+
+ dest[0] = vec[0] + vec2[0];
+ dest[1] = vec[1] + vec2[1];
+ dest[2] = vec[2] + vec2[2];
+ return dest;
+};
+
+/*
+* vec3.subtract
+* Performs a vector subtraction
+*
+* Params:
+* vec - vec3, first operand
+* vec2 - vec3, second operand
+* dest - Optional, vec3 receiving operation result. If not specified result is written to vec
+*
+* Returns:
+* dest if specified, vec otherwise
+*/
+vec3.subtract = function (vec, vec2, dest) {
+ if (!dest || vec == dest) {
+ vec[0] -= vec2[0];
+ vec[1] -= vec2[1];
+ vec[2] -= vec2[2];
+ return vec;
+ }
+
+ dest[0] = vec[0] - vec2[0];
+ dest[1] = vec[1] - vec2[1];
+ dest[2] = vec[2] - vec2[2];
+ return dest;
+};
+
+/*
+* vec3.negate
+* Negates the components of a vec3
+*
+* Params:
+* vec - vec3 to negate
+* dest - Optional, vec3 receiving operation result. If not specified result is written to vec
+*
+* Returns:
+* dest if specified, vec otherwise
+*/
+vec3.negate = function (vec, dest) {
+ if (!dest) { dest = vec; }
+
+ dest[0] = -vec[0];
+ dest[1] = -vec[1];
+ dest[2] = -vec[2];
+ return dest;
+};
+
+/*
+* vec3.scale
+* Multiplies the components of a vec3 by a scalar value
+*
+* Params:
+* vec - vec3 to scale
+* val - Numeric value to scale by
+* dest - Optional, vec3 receiving operation result. If not specified result is written to vec
+*
+* Returns:
+* dest if specified, vec otherwise
+*/
+vec3.scale = function (vec, val, dest) {
+ if (!dest || vec == dest) {
+ vec[0] *= val;
+ vec[1] *= val;
+ vec[2] *= val;
+ return vec;
+ }
+
+ dest[0] = vec[0] * val;
+ dest[1] = vec[1] * val;
+ dest[2] = vec[2] * val;
+ return dest;
+};
+
+/*
+* vec3.normalize
+* Generates a unit vector of the same direction as the provided vec3
+* If vector length is 0, returns [0, 0, 0]
+*
+* Params:
+* vec - vec3 to normalize
+* dest - Optional, vec3 receiving operation result. If not specified result is written to vec
+*
+* Returns:
+* dest if specified, vec otherwise
+*/
+vec3.normalize = function (vec, dest) {
+ if (!dest) { dest = vec; }
+
+ var x = vec[0], y = vec[1], z = vec[2];
+ var len = Math.sqrt(x * x + y * y + z * z);
+
+ if (!len) {
+ dest[0] = 0;
+ dest[1] = 0;
+ dest[2] = 0;
+ return dest;
+ } else if (len == 1) {
+ dest[0] = x;
+ dest[1] = y;
+ dest[2] = z;
+ return dest;
+ }
+
+ len = 1 / len;
+ dest[0] = x * len;
+ dest[1] = y * len;
+ dest[2] = z * len;
+ return dest;
+};
+
+/*
+* vec3.cross
+* Generates the cross product of two vec3s
+*
+* Params:
+* vec - vec3, first operand
+* vec2 - vec3, second operand
+* dest - Optional, vec3 receiving operation result. If not specified result is written to vec
+*
+* Returns:
+* dest if specified, vec otherwise
+*/
+vec3.cross = function (vec, vec2, dest) {
+ if (!dest) { dest = vec; }
+
+ var x = vec[0], y = vec[1], z = vec[2];
+ var x2 = vec2[0], y2 = vec2[1], z2 = vec2[2];
+
+ dest[0] = y * z2 - z * y2;
+ dest[1] = z * x2 - x * z2;
+ dest[2] = x * y2 - y * x2;
+ return dest;
+};
+
+/*
+* vec3.length
+* Caclulates the length of a vec3
+*
+* Params:
+* vec - vec3 to calculate length of
+*
+* Returns:
+* Length of vec
+*/
+vec3.length = function (vec) {
+ var x = vec[0], y = vec[1], z = vec[2];
+ return Math.sqrt(x * x + y * y + z * z);
+};
+
+/*
+* vec3.dot
+* Caclulates the dot product of two vec3s
+*
+* Params:
+* vec - vec3, first operand
+* vec2 - vec3, second operand
+*
+* Returns:
+* Dot product of vec and vec2
+*/
+vec3.dot = function (vec, vec2) {
+ return vec[0] * vec2[0] + vec[1] * vec2[1] + vec[2] * vec2[2];
+};
+
+/*
+* vec3.direction
+* Generates a unit vector pointing from one vector to another
+*
+* Params:
+* vec - origin vec3
+* vec2 - vec3 to point to
+* dest - Optional, vec3 receiving operation result. If not specified result is written to vec
+*
+* Returns:
+* dest if specified, vec otherwise
+*/
+vec3.direction = function (vec, vec2, dest) {
+ if (!dest) { dest = vec; }
+
+ var x = vec[0] - vec2[0];
+ var y = vec[1] - vec2[1];
+ var z = vec[2] - vec2[2];
+
+ var len = Math.sqrt(x * x + y * y + z * z);
+ if (!len) {
+ dest[0] = 0;
+ dest[1] = 0;
+ dest[2] = 0;
+ return dest;
+ }
+
+ len = 1 / len;
+ dest[0] = x * len;
+ dest[1] = y * len;
+ dest[2] = z * len;
+ return dest;
+};
+
+/*
+* vec3.str
+* Returns a string representation of a vector
+*
+* Params:
+* vec - vec3 to represent as a string
+*
+* Returns:
+* string representation of vec
+*/
+vec3.str = function (vec) {
+ return '[' + vec[0] + ', ' + vec[1] + ', ' + vec[2] + ']';
+};
+
+/*
+* mat3 - 3x3 Matrix
+*/
+var mat3 = {};
+
+/*
+* mat3.create
+* Creates a new instance of a mat3 using the default array type
+* Any javascript array containing at least 9 numeric elements can serve as a mat3
+*
+* Params:
+* mat - Optional, mat3 containing values to initialize with
+*
+* Returns:
+* New mat3
+*/
+mat3.create = function (mat) {
+ var dest = new glMatrixArrayType(9);
+
+ if (mat) {
+ dest[0] = mat[0];
+ dest[1] = mat[1];
+ dest[2] = mat[2];
+ dest[3] = mat[3];
+ dest[4] = mat[4];
+ dest[5] = mat[5];
+ dest[6] = mat[6];
+ dest[7] = mat[7];
+ dest[8] = mat[8];
+ dest[9] = mat[9];
+ }
+
+ return dest;
+};
+
+/*
+* mat3.set
+* Copies the values of one mat3 to another
+*
+* Params:
+* mat - mat3 containing values to copy
+* dest - mat3 receiving copied values
+*
+* Returns:
+* dest
+*/
+mat3.set = function (mat, dest) {
+ dest[0] = mat[0];
+ dest[1] = mat[1];
+ dest[2] = mat[2];
+ dest[3] = mat[3];
+ dest[4] = mat[4];
+ dest[5] = mat[5];
+ dest[6] = mat[6];
+ dest[7] = mat[7];
+ dest[8] = mat[8];
+ return dest;
+};
+
+/*
+* mat3.identity
+* Sets a mat3 to an identity matrix
+*
+* Params:
+* dest - mat3 to set
+*
+* Returns:
+* dest
+*/
+mat3.identity = function (dest) {
+ dest[0] = 1;
+ dest[1] = 0;
+ dest[2] = 0;
+ dest[3] = 0;
+ dest[4] = 1;
+ dest[5] = 0;
+ dest[6] = 0;
+ dest[7] = 0;
+ dest[8] = 1;
+ return dest;
+};
+
+/*
+* mat3.toMat4
+* Copies the elements of a mat3 into the upper 3x3 elements of a mat4
+*
+* Params:
+* mat - mat3 containing values to copy
+* dest - Optional, mat4 receiving copied values
+*
+* Returns:
+* dest if specified, a new mat4 otherwise
+*/
+mat3.toMat4 = function (mat, dest) {
+ if (!dest) { dest = mat4.create(); }
+
+ dest[0] = mat[0];
+ dest[1] = mat[1];
+ dest[2] = mat[2];
+ dest[3] = 0;
+
+ dest[4] = mat[3];
+ dest[5] = mat[4];
+ dest[6] = mat[5];
+ dest[7] = 0;
+
+ dest[8] = mat[6];
+ dest[9] = mat[7];
+ dest[10] = mat[8];
+ dest[11] = 0;
+
+ dest[12] = 0;
+ dest[13] = 0;
+ dest[14] = 0;
+ dest[15] = 1;
+
+ return dest;
+}
+
+/*
+* mat3.str
+* Returns a string representation of a mat3
+*
+* Params:
+* mat - mat3 to represent as a string
+*
+* Returns:
+* string representation of mat
+*/
+mat3.str = function (mat) {
+ return '[' + mat[0] + ', ' + mat[1] + ', ' + mat[2] +
+ ', ' + mat[3] + ', ' + mat[4] + ', ' + mat[5] +
+ ', ' + mat[6] + ', ' + mat[7] + ', ' + mat[8] + ']';
+};
+
+/*
+* mat4 - 4x4 Matrix
+*/
+var mat4 = {};
+
+/*
+* mat4.create
+* Creates a new instance of a mat4 using the default array type
+* Any javascript array containing at least 16 numeric elements can serve as a mat4
+*
+* Params:
+* mat - Optional, mat4 containing values to initialize with
+*
+* Returns:
+* New mat4
+*/
+mat4.create = function (mat) {
+ var dest = new glMatrixArrayType(16);
+
+ if (mat) {
+ dest[0] = mat[0];
+ dest[1] = mat[1];
+ dest[2] = mat[2];
+ dest[3] = mat[3];
+ dest[4] = mat[4];
+ dest[5] = mat[5];
+ dest[6] = mat[6];
+ dest[7] = mat[7];
+ dest[8] = mat[8];
+ dest[9] = mat[9];
+ dest[10] = mat[10];
+ dest[11] = mat[11];
+ dest[12] = mat[12];
+ dest[13] = mat[13];
+ dest[14] = mat[14];
+ dest[15] = mat[15];
+ }
+
+ return dest;
+};
+
+/*
+* mat4.set
+* Copies the values of one mat4 to another
+*
+* Params:
+* mat - mat4 containing values to copy
+* dest - mat4 receiving copied values
+*
+* Returns:
+* dest
+*/
+mat4.set = function (mat, dest) {
+ dest[0] = mat[0];
+ dest[1] = mat[1];
+ dest[2] = mat[2];
+ dest[3] = mat[3];
+ dest[4] = mat[4];
+ dest[5] = mat[5];
+ dest[6] = mat[6];
+ dest[7] = mat[7];
+ dest[8] = mat[8];
+ dest[9] = mat[9];
+ dest[10] = mat[10];
+ dest[11] = mat[11];
+ dest[12] = mat[12];
+ dest[13] = mat[13];
+ dest[14] = mat[14];
+ dest[15] = mat[15];
+ return dest;
+};
+
+/*
+* mat4.identity
+* Sets a mat4 to an identity matrix
+*
+* Params:
+* dest - mat4 to set
+*
+* Returns:
+* dest
+*/
+mat4.identity = function (dest) {
+ dest[0] = 1;
+ dest[1] = 0;
+ dest[2] = 0;
+ dest[3] = 0;
+ dest[4] = 0;
+ dest[5] = 1;
+ dest[6] = 0;
+ dest[7] = 0;
+ dest[8] = 0;
+ dest[9] = 0;
+ dest[10] = 1;
+ dest[11] = 0;
+ dest[12] = 0;
+ dest[13] = 0;
+ dest[14] = 0;
+ dest[15] = 1;
+ return dest;
+};
+
+/*
+* mat4.transpose
+* Transposes a mat4 (flips the values over the diagonal)
+*
+* Params:
+* mat - mat4 to transpose
+* dest - Optional, mat4 receiving transposed values. If not specified result is written to mat
+*
+* Returns:
+* dest is specified, mat otherwise
+*/
+mat4.transpose = function (mat, dest) {
+ // If we are transposing ourselves we can skip a few steps but have to cache some values
+ if (!dest || mat == dest) {
+ var a01 = mat[1], a02 = mat[2], a03 = mat[3];
+ var a12 = mat[6], a13 = mat[7];
+ var a23 = mat[11];
+
+ mat[1] = mat[4];
+ mat[2] = mat[8];
+ mat[3] = mat[12];
+ mat[4] = a01;
+ mat[6] = mat[9];
+ mat[7] = mat[13];
+ mat[8] = a02;
+ mat[9] = a12;
+ mat[11] = mat[14];
+ mat[12] = a03;
+ mat[13] = a13;
+ mat[14] = a23;
+ return mat;
+ }
+
+ dest[0] = mat[0];
+ dest[1] = mat[4];
+ dest[2] = mat[8];
+ dest[3] = mat[12];
+ dest[4] = mat[1];
+ dest[5] = mat[5];
+ dest[6] = mat[9];
+ dest[7] = mat[13];
+ dest[8] = mat[2];
+ dest[9] = mat[6];
+ dest[10] = mat[10];
+ dest[11] = mat[14];
+ dest[12] = mat[3];
+ dest[13] = mat[7];
+ dest[14] = mat[11];
+ dest[15] = mat[15];
+ return dest;
+};
+
+/*
+* mat4.determinant
+* Calculates the determinant of a mat4
+*
+* Params:
+* mat - mat4 to calculate determinant of
+*
+* Returns:
+* determinant of mat
+*/
+mat4.determinant = function (mat) {
+ // Cache the matrix values (makes for huge speed increases!)
+ var a00 = mat[0], a01 = mat[1], a02 = mat[2], a03 = mat[3];
+ var a10 = mat[4], a11 = mat[5], a12 = mat[6], a13 = mat[7];
+ var a20 = mat[8], a21 = mat[9], a22 = mat[10], a23 = mat[11];
+ var a30 = mat[12], a31 = mat[13], a32 = mat[14], a33 = mat[15];
+
+ return a30 * a21 * a12 * a03 - a20 * a31 * a12 * a03 - a30 * a11 * a22 * a03 + a10 * a31 * a22 * a03 +
+ a20 * a11 * a32 * a03 - a10 * a21 * a32 * a03 - a30 * a21 * a02 * a13 + a20 * a31 * a02 * a13 +
+ a30 * a01 * a22 * a13 - a00 * a31 * a22 * a13 - a20 * a01 * a32 * a13 + a00 * a21 * a32 * a13 +
+ a30 * a11 * a02 * a23 - a10 * a31 * a02 * a23 - a30 * a01 * a12 * a23 + a00 * a31 * a12 * a23 +
+ a10 * a01 * a32 * a23 - a00 * a11 * a32 * a23 - a20 * a11 * a02 * a33 + a10 * a21 * a02 * a33 +
+ a20 * a01 * a12 * a33 - a00 * a21 * a12 * a33 - a10 * a01 * a22 * a33 + a00 * a11 * a22 * a33;
+};
+
+/*
+* mat4.inverse
+* Calculates the inverse matrix of a mat4
+*
+* Params:
+* mat - mat4 to calculate inverse of
+* dest - Optional, mat4 receiving inverse matrix. If not specified result is written to mat
+*
+* Returns:
+* dest is specified, mat otherwise
+*/
+mat4.inverse = function (mat, dest) {
+ if (!dest) { dest = mat; }
+
+ // Cache the matrix values (makes for huge speed increases!)
+ var a00 = mat[0], a01 = mat[1], a02 = mat[2], a03 = mat[3];
+ var a10 = mat[4], a11 = mat[5], a12 = mat[6], a13 = mat[7];
+ var a20 = mat[8], a21 = mat[9], a22 = mat[10], a23 = mat[11];
+ var a30 = mat[12], a31 = mat[13], a32 = mat[14], a33 = mat[15];
+
+ var b00 = a00 * a11 - a01 * a10;
+ var b01 = a00 * a12 - a02 * a10;
+ var b02 = a00 * a13 - a03 * a10;
+ var b03 = a01 * a12 - a02 * a11;
+ var b04 = a01 * a13 - a03 * a11;
+ var b05 = a02 * a13 - a03 * a12;
+ var b06 = a20 * a31 - a21 * a30;
+ var b07 = a20 * a32 - a22 * a30;
+ var b08 = a20 * a33 - a23 * a30;
+ var b09 = a21 * a32 - a22 * a31;
+ var b10 = a21 * a33 - a23 * a31;
+ var b11 = a22 * a33 - a23 * a32;
+
+ // Calculate the determinant (inlined to avoid double-caching)
+ var invDet = 1 / (b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06);
+
+ dest[0] = (a11 * b11 - a12 * b10 + a13 * b09) * invDet;
+ dest[1] = (-a01 * b11 + a02 * b10 - a03 * b09) * invDet;
+ dest[2] = (a31 * b05 - a32 * b04 + a33 * b03) * invDet;
+ dest[3] = (-a21 * b05 + a22 * b04 - a23 * b03) * invDet;
+ dest[4] = (-a10 * b11 + a12 * b08 - a13 * b07) * invDet;
+ dest[5] = (a00 * b11 - a02 * b08 + a03 * b07) * invDet;
+ dest[6] = (-a30 * b05 + a32 * b02 - a33 * b01) * invDet;
+ dest[7] = (a20 * b05 - a22 * b02 + a23 * b01) * invDet;
+ dest[8] = (a10 * b10 - a11 * b08 + a13 * b06) * invDet;
+ dest[9] = (-a00 * b10 + a01 * b08 - a03 * b06) * invDet;
+ dest[10] = (a30 * b04 - a31 * b02 + a33 * b00) * invDet;
+ dest[11] = (-a20 * b04 + a21 * b02 - a23 * b00) * invDet;
+ dest[12] = (-a10 * b09 + a11 * b07 - a12 * b06) * invDet;
+ dest[13] = (a00 * b09 - a01 * b07 + a02 * b06) * invDet;
+ dest[14] = (-a30 * b03 + a31 * b01 - a32 * b00) * invDet;
+ dest[15] = (a20 * b03 - a21 * b01 + a22 * b00) * invDet;
+
+ return dest;
+};
+
+/*
+* mat4.toRotationMat
+* Copies the upper 3x3 elements of a mat4 into another mat4
+*
+* Params:
+* mat - mat4 containing values to copy
+* dest - Optional, mat4 receiving copied values
+*
+* Returns:
+* dest is specified, a new mat4 otherwise
+*/
+mat4.toRotationMat = function (mat, dest) {
+ if (!dest) { dest = mat4.create(); }
+
+ dest[0] = mat[0];
+ dest[1] = mat[1];
+ dest[2] = mat[2];
+ dest[3] = mat[3];
+ dest[4] = mat[4];
+ dest[5] = mat[5];
+ dest[6] = mat[6];
+ dest[7] = mat[7];
+ dest[8] = mat[8];
+ dest[9] = mat[9];
+ dest[10] = mat[10];
+ dest[11] = mat[11];
+ dest[12] = 0;
+ dest[13] = 0;
+ dest[14] = 0;
+ dest[15] = 1;
+
+ return dest;
+};
+
+/*
+* mat4.toMat3
+* Copies the upper 3x3 elements of a mat4 into a mat3
+*
+* Params:
+* mat - mat4 containing values to copy
+* dest - Optional, mat3 receiving copied values
+*
+* Returns:
+* dest is specified, a new mat3 otherwise
+*/
+mat4.toMat3 = function (mat, dest) {
+ if (!dest) { dest = mat3.create(); }
+
+ dest[0] = mat[0];
+ dest[1] = mat[1];
+ dest[2] = mat[2];
+ dest[3] = mat[4];
+ dest[4] = mat[5];
+ dest[5] = mat[6];
+ dest[6] = mat[8];
+ dest[7] = mat[9];
+ dest[8] = mat[10];
+
+ return dest;
+};
+
+/*
+* mat4.toInverseMat3
+* Calculates the inverse of the upper 3x3 elements of a mat4 and copies the result into a mat3
+* The resulting matrix is useful for calculating transformed normals
+*
+* Params:
+* mat - mat4 containing values to invert and copy
+* dest - Optional, mat3 receiving values
+*
+* Returns:
+* dest is specified, a new mat3 otherwise
+*/
+mat4.toInverseMat3 = function (mat, dest) {
+ // Cache the matrix values (makes for huge speed increases!)
+ var a00 = mat[0], a01 = mat[1], a02 = mat[2];
+ var a10 = mat[4], a11 = mat[5], a12 = mat[6];
+ var a20 = mat[8], a21 = mat[9], a22 = mat[10];
+
+ var b01 = a22 * a11 - a12 * a21;
+ var b11 = -a22 * a10 + a12 * a20;
+ var b21 = a21 * a10 - a11 * a20;
+
+ var d = a00 * b01 + a01 * b11 + a02 * b21;
+ if (!d) { return null; }
+ var id = 1 / d;
+
+ if (!dest) { dest = mat3.create(); }
+
+ dest[0] = b01 * id;
+ dest[1] = (-a22 * a01 + a02 * a21) * id;
+ dest[2] = (a12 * a01 - a02 * a11) * id;
+ dest[3] = b11 * id;
+ dest[4] = (a22 * a00 - a02 * a20) * id;
+ dest[5] = (-a12 * a00 + a02 * a10) * id;
+ dest[6] = b21 * id;
+ dest[7] = (-a21 * a00 + a01 * a20) * id;
+ dest[8] = (a11 * a00 - a01 * a10) * id;
+
+ return dest;
+};
+
+/*
+* mat4.multiply
+* Performs a matrix multiplication
+*
+* Params:
+* mat - mat4, first operand
+* mat2 - mat4, second operand
+* dest - Optional, mat4 receiving operation result. If not specified result is written to mat
+*
+* Returns:
+* dest if specified, mat otherwise
+*/
+mat4.multiply = function (mat, mat2, dest) {
+ if (!dest) { dest = mat }
+
+ // Cache the matrix values (makes for huge speed increases!)
+ var a00 = mat[0], a01 = mat[1], a02 = mat[2], a03 = mat[3];
+ var a10 = mat[4], a11 = mat[5], a12 = mat[6], a13 = mat[7];
+ var a20 = mat[8], a21 = mat[9], a22 = mat[10], a23 = mat[11];
+ var a30 = mat[12], a31 = mat[13], a32 = mat[14], a33 = mat[15];
+
+ var b00 = mat2[0], b01 = mat2[1], b02 = mat2[2], b03 = mat2[3];
+ var b10 = mat2[4], b11 = mat2[5], b12 = mat2[6], b13 = mat2[7];
+ var b20 = mat2[8], b21 = mat2[9], b22 = mat2[10], b23 = mat2[11];
+ var b30 = mat2[12], b31 = mat2[13], b32 = mat2[14], b33 = mat2[15];
+
+ dest[0] = b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30;
+ dest[1] = b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31;
+ dest[2] = b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32;
+ dest[3] = b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33;
+ dest[4] = b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30;
+ dest[5] = b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31;
+ dest[6] = b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32;
+ dest[7] = b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33;
+ dest[8] = b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30;
+ dest[9] = b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31;
+ dest[10] = b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32;
+ dest[11] = b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33;
+ dest[12] = b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30;
+ dest[13] = b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31;
+ dest[14] = b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32;
+ dest[15] = b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33;
+
+ return dest;
+};
+
+/*
+* mat4.multiplyVec3
+* Transforms a vec3 with the given matrix
+* 4th vector component is implicitly '1'
+*
+* Params:
+* mat - mat4 to transform the vector with
+* vec - vec3 to transform
+* dest - Optional, vec3 receiving operation result. If not specified result is written to vec
+*
+* Returns:
+* dest if specified, vec otherwise
+*/
+mat4.multiplyVec3 = function (mat, vec, dest) {
+ if (!dest) { dest = vec }
+
+ var x = vec[0], y = vec[1], z = vec[2];
+
+ dest[0] = mat[0] * x + mat[4] * y + mat[8] * z + mat[12];
+ dest[1] = mat[1] * x + mat[5] * y + mat[9] * z + mat[13];
+ dest[2] = mat[2] * x + mat[6] * y + mat[10] * z + mat[14];
+
+ return dest;
+};
+
+/*
+* mat4.multiplyVec4
+* Transforms a vec4 with the given matrix
+*
+* Params:
+* mat - mat4 to transform the vector with
+* vec - vec4 to transform
+* dest - Optional, vec4 receiving operation result. If not specified result is written to vec
+*
+* Returns:
+* dest if specified, vec otherwise
+*/
+mat4.multiplyVec4 = function (mat, vec, dest) {
+ if (!dest) { dest = vec }
+
+ var x = vec[0], y = vec[1], z = vec[2], w = vec[3];
+
+ dest[0] = mat[0] * x + mat[4] * y + mat[8] * z + mat[12] * w;
+ dest[1] = mat[1] * x + mat[5] * y + mat[9] * z + mat[13] * w;
+ dest[2] = mat[2] * x + mat[6] * y + mat[10] * z + mat[14] * w;
+ dest[4] = mat[4] * x + mat[7] * y + mat[11] * z + mat[15] * w;
+
+ return dest;
+};
+
+/*
+* mat4.translate
+* Translates a matrix by the given vector
+*
+* Params:
+* mat - mat4 to translate
+* vec - vec3 specifying the translation
+* dest - Optional, mat4 receiving operation result. If not specified result is written to mat
+*
+* Returns:
+* dest if specified, mat otherwise
+*/
+mat4.translate = function (mat, vec, dest) {
+ var x = vec[0], y = vec[1], z = vec[2];
+
+ if (!dest || mat == dest) {
+ mat[12] = mat[0] * x + mat[4] * y + mat[8] * z + mat[12];
+ mat[13] = mat[1] * x + mat[5] * y + mat[9] * z + mat[13];
+ mat[14] = mat[2] * x + mat[6] * y + mat[10] * z + mat[14];
+ mat[15] = mat[3] * x + mat[7] * y + mat[11] * z + mat[15];
+ return mat;
+ }
+
+ var a00 = mat[0], a01 = mat[1], a02 = mat[2], a03 = mat[3];
+ var a10 = mat[4], a11 = mat[5], a12 = mat[6], a13 = mat[7];
+ var a20 = mat[8], a21 = mat[9], a22 = mat[10], a23 = mat[11];
+
+ dest[0] = a00;
+ dest[1] = a01;
+ dest[2] = a02;
+ dest[3] = a03;
+ dest[4] = a10;
+ dest[5] = a11;
+ dest[6] = a12;
+ dest[7] = a13;
+ dest[8] = a20;
+ dest[9] = a21;
+ dest[10] = a22;
+ dest[11] = a23;
+
+ dest[12] = a00 * x + a10 * y + a20 * z + mat[12];
+ dest[13] = a01 * x + a11 * y + a21 * z + mat[13];
+ dest[14] = a02 * x + a12 * y + a22 * z + mat[14];
+ dest[15] = a03 * x + a13 * y + a23 * z + mat[15];
+ return dest;
+};
+
+/*
+* mat4.scale
+* Scales a matrix by the given vector
+*
+* Params:
+* mat - mat4 to scale
+* vec - vec3 specifying the scale for each axis
+* dest - Optional, mat4 receiving operation result. If not specified result is written to mat
+*
+* Returns:
+* dest if specified, mat otherwise
+*/
+mat4.scale = function (mat, vec, dest) {
+ var x = vec[0], y = vec[1], z = vec[2];
+
+ if (!dest || mat == dest) {
+ mat[0] *= x;
+ mat[1] *= x;
+ mat[2] *= x;
+ mat[3] *= x;
+ mat[4] *= y;
+ mat[5] *= y;
+ mat[6] *= y;
+ mat[7] *= y;
+ mat[8] *= z;
+ mat[9] *= z;
+ mat[10] *= z;
+ mat[11] *= z;
+ return mat;
+ }
+
+ dest[0] = mat[0] * x;
+ dest[1] = mat[1] * x;
+ dest[2] = mat[2] * x;
+ dest[3] = mat[3] * x;
+ dest[4] = mat[4] * y;
+ dest[5] = mat[5] * y;
+ dest[6] = mat[6] * y;
+ dest[7] = mat[7] * y;
+ dest[8] = mat[8] * z;
+ dest[9] = mat[9] * z;
+ dest[10] = mat[10] * z;
+ dest[11] = mat[11] * z;
+ dest[12] = mat[12];
+ dest[13] = mat[13];
+ dest[14] = mat[14];
+ dest[15] = mat[15];
+ return dest;
+};
+
+/*
+* mat4.rotate
+* Rotates a matrix by the given angle around the specified axis
+* If rotating around a primary axis (X,Y,Z) one of the specialized rotation functions should be used instead for performance
+*
+* Params:
+* mat - mat4 to rotate
+* angle - angle (in radians) to rotate
+* axis - vec3 representing the axis to rotate around
+* dest - Optional, mat4 receiving operation result. If not specified result is written to mat
+*
+* Returns:
+* dest if specified, mat otherwise
+*/
+mat4.rotate = function (mat, angle, axis, dest) {
+ var x = axis[0], y = axis[1], z = axis[2];
+ var len = Math.sqrt(x * x + y * y + z * z);
+ if (!len) { return null; }
+ if (len != 1) {
+ len = 1 / len;
+ x *= len;
+ y *= len;
+ z *= len;
+ }
+
+ var s = Math.sin(angle);
+ var c = Math.cos(angle);
+ var t = 1 - c;
+
+ // Cache the matrix values (makes for huge speed increases!)
+ var a00 = mat[0], a01 = mat[1], a02 = mat[2], a03 = mat[3];
+ var a10 = mat[4], a11 = mat[5], a12 = mat[6], a13 = mat[7];
+ var a20 = mat[8], a21 = mat[9], a22 = mat[10], a23 = mat[11];
+
+ // Construct the elements of the rotation matrix
+ var b00 = x * x * t + c, b01 = y * x * t + z * s, b02 = z * x * t - y * s;
+ var b10 = x * y * t - z * s, b11 = y * y * t + c, b12 = z * y * t + x * s;
+ var b20 = x * z * t + y * s, b21 = y * z * t - x * s, b22 = z * z * t + c;
+
+ if (!dest) {
+ dest = mat
+ } else if (mat != dest) { // If the source and destination differ, copy the unchanged last row
+ dest[12] = mat[12];
+ dest[13] = mat[13];
+ dest[14] = mat[14];
+ dest[15] = mat[15];
+ }
+
+ // Perform rotation-specific matrix multiplication
+ dest[0] = a00 * b00 + a10 * b01 + a20 * b02;
+ dest[1] = a01 * b00 + a11 * b01 + a21 * b02;
+ dest[2] = a02 * b00 + a12 * b01 + a22 * b02;
+ dest[3] = a03 * b00 + a13 * b01 + a23 * b02;
+
+ dest[4] = a00 * b10 + a10 * b11 + a20 * b12;
+ dest[5] = a01 * b10 + a11 * b11 + a21 * b12;
+ dest[6] = a02 * b10 + a12 * b11 + a22 * b12;
+ dest[7] = a03 * b10 + a13 * b11 + a23 * b12;
+
+ dest[8] = a00 * b20 + a10 * b21 + a20 * b22;
+ dest[9] = a01 * b20 + a11 * b21 + a21 * b22;
+ dest[10] = a02 * b20 + a12 * b21 + a22 * b22;
+ dest[11] = a03 * b20 + a13 * b21 + a23 * b22;
+ return dest;
+};
+
+/*
+* mat4.rotateX
+* Rotates a matrix by the given angle around the X axis
+*
+* Params:
+* mat - mat4 to rotate
+* angle - angle (in radians) to rotate
+* dest - Optional, mat4 receiving operation result. If not specified result is written to mat
+*
+* Returns:
+* dest if specified, mat otherwise
+*/
+mat4.rotateX = function (mat, angle, dest) {
+ var s = Math.sin(angle);
+ var c = Math.cos(angle);
+
+ // Cache the matrix values (makes for huge speed increases!)
+ var a10 = mat[4], a11 = mat[5], a12 = mat[6], a13 = mat[7];
+ var a20 = mat[8], a21 = mat[9], a22 = mat[10], a23 = mat[11];
+
+ if (!dest) {
+ dest = mat
+ } else if (mat != dest) { // If the source and destination differ, copy the unchanged rows
+ dest[0] = mat[0];
+ dest[1] = mat[1];
+ dest[2] = mat[2];
+ dest[3] = mat[3];
+
+ dest[12] = mat[12];
+ dest[13] = mat[13];
+ dest[14] = mat[14];
+ dest[15] = mat[15];
+ }
+
+ // Perform axis-specific matrix multiplication
+ dest[4] = a10 * c + a20 * s;
+ dest[5] = a11 * c + a21 * s;
+ dest[6] = a12 * c + a22 * s;
+ dest[7] = a13 * c + a23 * s;
+
+ dest[8] = a10 * -s + a20 * c;
+ dest[9] = a11 * -s + a21 * c;
+ dest[10] = a12 * -s + a22 * c;
+ dest[11] = a13 * -s + a23 * c;
+ return dest;
+};
+
+/*
+* mat4.rotateY
+* Rotates a matrix by the given angle around the Y axis
+*
+* Params:
+* mat - mat4 to rotate
+* angle - angle (in radians) to rotate
+* dest - Optional, mat4 receiving operation result. If not specified result is written to mat
+*
+* Returns:
+* dest if specified, mat otherwise
+*/
+mat4.rotateY = function (mat, angle, dest) {
+ var s = Math.sin(angle);
+ var c = Math.cos(angle);
+
+ // Cache the matrix values (makes for huge speed increases!)
+ var a00 = mat[0], a01 = mat[1], a02 = mat[2], a03 = mat[3];
+ var a20 = mat[8], a21 = mat[9], a22 = mat[10], a23 = mat[11];
+
+ if (!dest) {
+ dest = mat
+ } else if (mat != dest) { // If the source and destination differ, copy the unchanged rows
+ dest[4] = mat[4];
+ dest[5] = mat[5];
+ dest[6] = mat[6];
+ dest[7] = mat[7];
+
+ dest[12] = mat[12];
+ dest[13] = mat[13];
+ dest[14] = mat[14];
+ dest[15] = mat[15];
+ }
+
+ // Perform axis-specific matrix multiplication
+ dest[0] = a00 * c + a20 * -s;
+ dest[1] = a01 * c + a21 * -s;
+ dest[2] = a02 * c + a22 * -s;
+ dest[3] = a03 * c + a23 * -s;
+
+ dest[8] = a00 * s + a20 * c;
+ dest[9] = a01 * s + a21 * c;
+ dest[10] = a02 * s + a22 * c;
+ dest[11] = a03 * s + a23 * c;
+ return dest;
+};
+
+/*
+* mat4.rotateZ
+* Rotates a matrix by the given angle around the Z axis
+*
+* Params:
+* mat - mat4 to rotate
+* angle - angle (in radians) to rotate
+* dest - Optional, mat4 receiving operation result. If not specified result is written to mat
+*
+* Returns:
+* dest if specified, mat otherwise
+*/
+mat4.rotateZ = function (mat, angle, dest) {
+ var s = Math.sin(angle);
+ var c = Math.cos(angle);
+
+ // Cache the matrix values (makes for huge speed increases!)
+ var a00 = mat[0], a01 = mat[1], a02 = mat[2], a03 = mat[3];
+ var a10 = mat[4], a11 = mat[5], a12 = mat[6], a13 = mat[7];
+
+ if (!dest) {
+ dest = mat
+ } else if (mat != dest) { // If the source and destination differ, copy the unchanged last row
+ dest[8] = mat[8];
+ dest[9] = mat[9];
+ dest[10] = mat[10];
+ dest[11] = mat[11];
+
+ dest[12] = mat[12];
+ dest[13] = mat[13];
+ dest[14] = mat[14];
+ dest[15] = mat[15];
+ }
+
+ // Perform axis-specific matrix multiplication
+ dest[0] = a00 * c + a10 * s;
+ dest[1] = a01 * c + a11 * s;
+ dest[2] = a02 * c + a12 * s;
+ dest[3] = a03 * c + a13 * s;
+
+ dest[4] = a00 * -s + a10 * c;
+ dest[5] = a01 * -s + a11 * c;
+ dest[6] = a02 * -s + a12 * c;
+ dest[7] = a03 * -s + a13 * c;
+
+ return dest;
+};
+
+/*
+* mat4.frustum
+* Generates a frustum matrix with the given bounds
+*
+* Params:
+* left, right - scalar, left and right bounds of the frustum
+* bottom, top - scalar, bottom and top bounds of the frustum
+* near, far - scalar, near and far bounds of the frustum
+* dest - Optional, mat4 frustum matrix will be written into
+*
+* Returns:
+* dest if specified, a new mat4 otherwise
+*/
+mat4.frustum = function (left, right, bottom, top, near, far, dest) {
+ if (!dest) { dest = mat4.create(); }
+ var rl = (right - left);
+ var tb = (top - bottom);
+ var fn = (far - near);
+ dest[0] = (near * 2) / rl;
+ dest[1] = 0;
+ dest[2] = 0;
+ dest[3] = 0;
+ dest[4] = 0;
+ dest[5] = (near * 2) / tb;
+ dest[6] = 0;
+ dest[7] = 0;
+ dest[8] = (right + left) / rl;
+ dest[9] = (top + bottom) / tb;
+ dest[10] = -(far + near) / fn;
+ dest[11] = -1;
+ dest[12] = 0;
+ dest[13] = 0;
+ dest[14] = -(far * near * 2) / fn;
+ dest[15] = 0;
+ return dest;
+};
+
+/*
+* mat4.perspective
+* Generates a perspective projection matrix with the given bounds
+*
+* Params:
+* fovy - scalar, vertical field of view
+* aspect - scalar, aspect ratio. typically viewport width/height
+* near, far - scalar, near and far bounds of the frustum
+* dest - Optional, mat4 frustum matrix will be written into
+*
+* Returns:
+* dest if specified, a new mat4 otherwise
+*/
+mat4.perspective = function (fovy, aspect, near, far, dest) {
+ var top = near * Math.tan(fovy * Math.PI / 360.0);
+ var right = top * aspect;
+ return mat4.frustum(-right, right, -top, top, near, far, dest);
+};
+
+/*
+* mat4.ortho
+* Generates a orthogonal projection matrix with the given bounds
+*
+* Params:
+* left, right - scalar, left and right bounds of the frustum
+* bottom, top - scalar, bottom and top bounds of the frustum
+* near, far - scalar, near and far bounds of the frustum
+* dest - Optional, mat4 frustum matrix will be written into
+*
+* Returns:
+* dest if specified, a new mat4 otherwise
+*/
+mat4.ortho = function (left, right, bottom, top, near, far, dest) {
+ if (!dest) { dest = mat4.create(); }
+ var rl = (right - left);
+ var tb = (top - bottom);
+ var fn = (far - near);
+ dest[0] = 2 / rl;
+ dest[1] = 0;
+ dest[2] = 0;
+ dest[3] = 0;
+ dest[4] = 0;
+ dest[5] = 2 / tb;
+ dest[6] = 0;
+ dest[7] = 0;
+ dest[8] = 0;
+ dest[9] = 0;
+ dest[10] = -2 / fn;
+ dest[11] = 0;
+ dest[12] = -(left + right) / rl;
+ dest[13] = -(top + bottom) / tb;
+ dest[14] = -(far + near) / fn;
+ dest[15] = 1;
+ return dest;
+};
+
+/*
+* mat4.ortho
+* Generates a look-at matrix with the given eye position, focal point, and up axis
+*
+* Params:
+* eye - vec3, position of the viewer
+* center - vec3, point the viewer is looking at
+* up - vec3 pointing "up"
+* dest - Optional, mat4 frustum matrix will be written into
+*
+* Returns:
+* dest if specified, a new mat4 otherwise
+*/
+mat4.lookAt = function (eye, center, up, dest) {
+ if (!dest) { dest = mat4.create(); }
+
+ var eyex = eye[0],
+ eyey = eye[1],
+ eyez = eye[2],
+ upx = up[0],
+ upy = up[1],
+ upz = up[2],
+ centerx = center[0],
+ centery = center[1],
+ centerz = center[2];
+
+ if (eyex == centerx && eyey == centery && eyez == centerz) {
+ return mat4.identity(dest);
+ }
+
+ var z0, z1, z2, x0, x1, x2, y0, y1, y2, len;
+
+ //vec3.direction(eye, center, z);
+ z0 = eyex - center[0];
+ z1 = eyey - center[1];
+ z2 = eyez - center[2];
+
+ // normalize (no check needed for 0 because of early return)
+ len = 1 / Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2);
+ z0 *= len;
+ z1 *= len;
+ z2 *= len;
+
+ //vec3.normalize(vec3.cross(up, z, x));
+ x0 = upy * z2 - upz * z1;
+ x1 = upz * z0 - upx * z2;
+ x2 = upx * z1 - upy * z0;
+ len = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2);
+ if (!len) {
+ x0 = 0;
+ x1 = 0;
+ x2 = 0;
+ } else {
+ len = 1 / len;
+ x0 *= len;
+ x1 *= len;
+ x2 *= len;
+ };
+
+ //vec3.normalize(vec3.cross(z, x, y));
+ y0 = z1 * x2 - z2 * x1;
+ y1 = z2 * x0 - z0 * x2;
+ y2 = z0 * x1 - z1 * x0;
+
+ len = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2);
+ if (!len) {
+ y0 = 0;
+ y1 = 0;
+ y2 = 0;
+ } else {
+ len = 1 / len;
+ y0 *= len;
+ y1 *= len;
+ y2 *= len;
+ }
+
+ dest[0] = x0;
+ dest[1] = y0;
+ dest[2] = z0;
+ dest[3] = 0;
+ dest[4] = x1;
+ dest[5] = y1;
+ dest[6] = z1;
+ dest[7] = 0;
+ dest[8] = x2;
+ dest[9] = y2;
+ dest[10] = z2;
+ dest[11] = 0;
+ dest[12] = -(x0 * eyex + x1 * eyey + x2 * eyez);
+ dest[13] = -(y0 * eyex + y1 * eyey + y2 * eyez);
+ dest[14] = -(z0 * eyex + z1 * eyey + z2 * eyez);
+ dest[15] = 1;
+
+ return dest;
+};
+
+/*
+* mat4.str
+* Returns a string representation of a mat4
+*
+* Params:
+* mat - mat4 to represent as a string
+*
+* Returns:
+* string representation of mat
+*/
+mat4.str = function (mat) {
+ return '[' + mat[0] + ', ' + mat[1] + ', ' + mat[2] + ', ' + mat[3] +
+ ', ' + mat[4] + ', ' + mat[5] + ', ' + mat[6] + ', ' + mat[7] +
+ ', ' + mat[8] + ', ' + mat[9] + ', ' + mat[10] + ', ' + mat[11] +
+ ', ' + mat[12] + ', ' + mat[13] + ', ' + mat[14] + ', ' + mat[15] + ']';
+};
+
+/*
+* quat4 - Quaternions
+*/
+quat4 = {};
+
+/*
+* quat4.create
+* Creates a new instance of a quat4 using the default array type
+* Any javascript array containing at least 4 numeric elements can serve as a quat4
+*
+* Params:
+* quat - Optional, quat4 containing values to initialize with
+*
+* Returns:
+* New quat4
+*/
+quat4.create = function (quat) {
+ var dest = new glMatrixArrayType(4);
+
+ if (quat) {
+ dest[0] = quat[0];
+ dest[1] = quat[1];
+ dest[2] = quat[2];
+ dest[3] = quat[3];
+ }
+
+ return dest;
+};
+
+/*
+* quat4.set
+* Copies the values of one quat4 to another
+*
+* Params:
+* quat - quat4 containing values to copy
+* dest - quat4 receiving copied values
+*
+* Returns:
+* dest
+*/
+quat4.set = function (quat, dest) {
+ dest[0] = quat[0];
+ dest[1] = quat[1];
+ dest[2] = quat[2];
+ dest[3] = quat[3];
+
+ return dest;
+};
+
+/*
+* quat4.calculateW
+* Calculates the W component of a quat4 from the X, Y, and Z components.
+* Assumes that quaternion is 1 unit in length.
+* Any existing W component will be ignored.
+*
+* Params:
+* quat - quat4 to calculate W component of
+* dest - Optional, quat4 receiving calculated values. If not specified result is written to quat
+*
+* Returns:
+* dest if specified, quat otherwise
+*/
+quat4.calculateW = function (quat, dest) {
+ var x = quat[0], y = quat[1], z = quat[2];
+
+ if (!dest || quat == dest) {
+ quat[3] = -Math.sqrt(Math.abs(1.0 - x * x - y * y - z * z));
+ return quat;
+ }
+ dest[0] = x;
+ dest[1] = y;
+ dest[2] = z;
+ dest[3] = -Math.sqrt(Math.abs(1.0 - x * x - y * y - z * z));
+ return dest;
+}
+
+/*
+* quat4.inverse
+* Calculates the inverse of a quat4
+*
+* Params:
+* quat - quat4 to calculate inverse of
+* dest - Optional, quat4 receiving inverse values. If not specified result is written to quat
+*
+* Returns:
+* dest if specified, quat otherwise
+*/
+quat4.inverse = function (quat, dest) {
+ if (!dest || quat == dest) {
+ quat[0] *= 1;
+ quat[1] *= 1;
+ quat[2] *= 1;
+ return quat;
+ }
+ dest[0] = -quat[0];
+ dest[1] = -quat[1];
+ dest[2] = -quat[2];
+ dest[3] = quat[3];
+ return dest;
+}
+
+/*
+* quat4.length
+* Calculates the length of a quat4
+*
+* Params:
+* quat - quat4 to calculate length of
+*
+* Returns:
+* Length of quat
+*/
+quat4.length = function (quat) {
+ var x = quat[0], y = quat[1], z = quat[2], w = quat[3];
+ return Math.sqrt(x * x + y * y + z * z + w * w);
+}
+
+/*
+* quat4.normalize
+* Generates a unit quaternion of the same direction as the provided quat4
+* If quaternion length is 0, returns [0, 0, 0, 0]
+*
+* Params:
+* quat - quat4 to normalize
+* dest - Optional, quat4 receiving operation result. If not specified result is written to quat
+*
+* Returns:
+* dest if specified, quat otherwise
+*/
+quat4.normalize = function (quat, dest) {
+ if (!dest) { dest = quat; }
+
+ var x = quat[0], y = quat[1], z = quat[2], w = quat[3];
+ var len = Math.sqrt(x * x + y * y + z * z + w * w);
+ if (len == 0) {
+ dest[0] = 0;
+ dest[1] = 0;
+ dest[2] = 0;
+ dest[3] = 0;
+ return dest;
+ }
+ len = 1 / len;
+ dest[0] = x * len;
+ dest[1] = y * len;
+ dest[2] = z * len;
+ dest[3] = w * len;
+
+ return dest;
+}
+
+/*
+* quat4.multiply
+* Performs a quaternion multiplication
+*
+* Params:
+* quat - quat4, first operand
+* quat2 - quat4, second operand
+* dest - Optional, quat4 receiving operation result. If not specified result is written to quat
+*
+* Returns:
+* dest if specified, quat otherwise
+*/
+quat4.multiply = function (quat, quat2, dest) {
+ if (!dest) { dest = quat; }
+
+ var qax = quat[0], qay = quat[1], qaz = quat[2], qaw = quat[3];
+ var qbx = quat2[0], qby = quat2[1], qbz = quat2[2], qbw = quat2[3];
+
+ dest[0] = qax * qbw + qaw * qbx + qay * qbz - qaz * qby;
+ dest[1] = qay * qbw + qaw * qby + qaz * qbx - qax * qbz;
+ dest[2] = qaz * qbw + qaw * qbz + qax * qby - qay * qbx;
+ dest[3] = qaw * qbw - qax * qbx - qay * qby - qaz * qbz;
+
+ return dest;
+}
+
+/*
+* quat4.multiplyVec3
+* Transforms a vec3 with the given quaternion
+*
+* Params:
+* quat - quat4 to transform the vector with
+* vec - vec3 to transform
+* dest - Optional, vec3 receiving operation result. If not specified result is written to vec
+*
+* Returns:
+* dest if specified, vec otherwise
+*/
+quat4.multiplyVec3 = function (quat, vec, dest) {
+ if (!dest) { dest = vec; }
+
+ var x = vec[0], y = vec[1], z = vec[2];
+ var qx = quat[0], qy = quat[1], qz = quat[2], qw = quat[3];
+
+ // calculate quat * vec
+ var ix = qw * x + qy * z - qz * y;
+ var iy = qw * y + qz * x - qx * z;
+ var iz = qw * z + qx * y - qy * x;
+ var iw = -qx * x - qy * y - qz * z;
+
+ // calculate result * inverse quat
+ dest[0] = ix * qw + iw * -qx + iy * -qz - iz * -qy;
+ dest[1] = iy * qw + iw * -qy + iz * -qx - ix * -qz;
+ dest[2] = iz * qw + iw * -qz + ix * -qy - iy * -qx;
+
+ return dest;
+}
+
+/*
+* quat4.toMat3
+* Calculates a 3x3 matrix from the given quat4
+*
+* Params:
+* quat - quat4 to create matrix from
+* dest - Optional, mat3 receiving operation result
+*
+* Returns:
+* dest if specified, a new mat3 otherwise
+*/
+quat4.toMat3 = function (quat, dest) {
+ if (!dest) { dest = mat3.create(); }
+
+ var x = quat[0], y = quat[1], z = quat[2], w = quat[3];
+
+ var x2 = x + x;
+ var y2 = y + y;
+ var z2 = z + z;
+
+ var xx = x * x2;
+ var xy = x * y2;
+ var xz = x * z2;
+
+ var yy = y * y2;
+ var yz = y * z2;
+ var zz = z * z2;
+
+ var wx = w * x2;
+ var wy = w * y2;
+ var wz = w * z2;
+
+ dest[0] = 1 - (yy + zz);
+ dest[1] = xy - wz;
+ dest[2] = xz + wy;
+
+ dest[3] = xy + wz;
+ dest[4] = 1 - (xx + zz);
+ dest[5] = yz - wx;
+
+ dest[6] = xz - wy;
+ dest[7] = yz + wx;
+ dest[8] = 1 - (xx + yy);
+
+ return dest;
+}
+
+/*
+* quat4.toMat4
+* Calculates a 4x4 matrix from the given quat4
+*
+* Params:
+* quat - quat4 to create matrix from
+* dest - Optional, mat4 receiving operation result
+*
+* Returns:
+* dest if specified, a new mat4 otherwise
+*/
+quat4.toMat4 = function (quat, dest) {
+ if (!dest) { dest = mat4.create(); }
+
+ var x = quat[0], y = quat[1], z = quat[2], w = quat[3];
+
+ var x2 = x + x;
+ var y2 = y + y;
+ var z2 = z + z;
+
+ var xx = x * x2;
+ var xy = x * y2;
+ var xz = x * z2;
+
+ var yy = y * y2;
+ var yz = y * z2;
+ var zz = z * z2;
+
+ var wx = w * x2;
+ var wy = w * y2;
+ var wz = w * z2;
+
+ dest[0] = 1 - (yy + zz);
+ dest[1] = xy - wz;
+ dest[2] = xz + wy;
+ dest[3] = 0;
+
+ dest[4] = xy + wz;
+ dest[5] = 1 - (xx + zz);
+ dest[6] = yz - wx;
+ dest[7] = 0;
+
+ dest[8] = xz - wy;
+ dest[9] = yz + wx;
+ dest[10] = 1 - (xx + yy);
+ dest[11] = 0;
+
+ dest[12] = 0;
+ dest[13] = 0;
+ dest[14] = 0;
+ dest[15] = 1;
+
+ return dest;
+}
+
+/*
+* quat4.str
+* Returns a string representation of a quaternion
+*
+* Params:
+* quat - quat4 to represent as a string
+*
+* Returns:
+* string representation of quat
+*/
+quat4.str = function (quat) {
+ return '[' + quat[0] + ', ' + quat[1] + ', ' + quat[2] + ', ' + quat[3] + ']';
+};
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>HTML5 Test</title>
+<meta name="description" content="HTML5 canvas" />
+<meta name="keywords" content="HTML5,canvas" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+ <link rel="stylesheet" href="http://sfpg.seesaa.net/styles-index.css" type="text/css" />
+ <style type="text/css">
+ #disp01 {margin:10px;}
+ </style>
+<link type="text/css" rel="stylesheet" href="http://sfpg.up.seesaa.net/styles/shCore.css"/>
+<link type="text/css" rel="stylesheet" href="http://sfpg.up.seesaa.net/styles/shThemeDefault.css"/>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shCore.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shLegacy.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushCpp.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushJScript.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushXml.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushCSharp.js"></script>
+<script type="text/javascript" src="../scripts/jquery-1.4.4.min.js"></script>
+<script type="text/javascript">
+ SyntaxHighlighter.all();
+</script>
+</head>
+<body style="font-size:12px;text-align:left;">
+<h3>ユニバーサル・オーディオ・アーキテクチャ</h3>
+<p>ユニバーサル・オーディオ・アーキテクチャ（UAA）というのはサウンドデバイスにおけるWindows上の標準である。<br />
+ OSはUAAクラスドライバを用意しているので、UAA準拠のハードウェアであれば、ハードウェアベンダはドライバを提供する必要はない。利用者はUAA準拠ハードウェアを購入すればたとえハードウェアベンダがドライバ供給をストップしていてもOSのサポートにより音を鳴らすことができる。</p>
+ <p>
+ UAA準拠ハードウェアだからといって、ハードウェアに独自機能を実装できないというのではなく、このUAAはいわば音を鳴らすためのハードウェアにおける最低要件であるということだ。独自機能をハードウェア上に実装する場合は別途ベンダがドライバを提供する必要がある。</p>
+ <p>Windows Vistaからはサウンド・デバイスがWindows ロゴ プログラムを取得するためにはUAA準拠が義務付けられている。</p>
+<h3>WaveRTミニポートドライバ</h3>
+<p>WaveRTミニポートドライバはWASAPIに密接に関連するので調べてみた
+</p>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>HTML5 Test</title>
+<meta name="description" content="HTML5 canvas" />
+<meta name="keywords" content="HTML5,canvas" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+ <link rel="stylesheet" href="http://sfpg.seesaa.net/styles-index.css" type="text/css" />
+ <style type="text/css">
+ #disp01 {margin:10px;}
+ </style>
+<link type="text/css" rel="stylesheet" href="http://sfpg.up.seesaa.net/styles/shCore.css"/>
+<link type="text/css" rel="stylesheet" href="http://sfpg.up.seesaa.net/styles/shThemeDefault.css"/>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shCore.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shLegacy.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushCpp.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushJScript.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushXml.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushCSharp.js"></script>
+<script type="text/javascript" src="../scripts/jquery-1.4.4.min.js"></script>
+<script type="text/javascript">
+ SyntaxHighlighter.all();
+</script>
+</head>
+<body style="font-size:12px;text-align:left;">
+<p>canvasを使った3Dデモを集めてみた。WebGLとかを使ってない物を選んでいる。</p>
+<h3><a href="http://1ka2ka.com/archives/201006/16_092531.html" target="_blank">[HTML5 canvas] 簡単な 3D アニメーション</a></h3>
+
+ <a href="http://1ka2ka.com/uploadfile/100616/animeCanvas.html" target="_blank">
+<img src="http://1ka2ka.com/uploadfile/100616/preview.png" alt="簡単な 3D アニメーション">
+ </a>
+ <h3><a href="http://sebleedelisle.com/2009/09/simple-3d-in-html5-canvas/" target="_blank">Simple 3D in HTML5 canvas</a></h3>
+<img src="http://farm3.static.flickr.com/2675/3895371007_19b9b20994.jpg" />
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>HTML5 Test</title>
+<meta name="description" content="HTML5 canvas" />
+<meta name="keywords" content="HTML5,canvas" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+ <link rel="stylesheet" href="http://sfpg.seesaa.net/styles-index.css" type="text/css" />
+ <style type="text/css">
+ #disp01 {margin:10px;}
+ .style1
+ {
+ width: 600px;
+ height: 450px;
+ position:absolute;
+ z-index:100;
+ top: 179px;
+ left: 14px;
+ }
+ .style2
+ {
+ width: 600px;
+ height: 450px;
+ position:absolute;
+ z-index:10;
+ top: 191px;
+ left: -8px;
+ }
+ </style>
+<link type="text/css" rel="stylesheet" href="http://sfpg.up.seesaa.net/styles/shCore.css"/>
+<link type="text/css" rel="stylesheet" href="http://sfpg.up.seesaa.net/styles/shThemeDefault.css"/>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shCore.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shLegacy.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushCpp.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushJScript.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushXml.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushCSharp.js"></script>
+<script type="text/javascript" src="../scripts/jquery-1.4.4.min.js"></script>
+<script type="text/javascript">
+ SyntaxHighlighter.all();
+</script>
+</head>
+<body style="font-size:12px;text-align:left;">
+<h3>合成されたビットマップのα値</h3>
+<p>背景が黒の場合、例えばアンチエイリアスを効かせた赤いブラシで書くと、背景色の黒と赤が混合されて描画される。<br />
+ これにより描画した境界が滲んだような背景と</p>
+ <p>この本に続いて『実践日本語の作文技術』も買ったのだがこれもなかなか面白い読み物だ。
+ 分かりやすい日本語を書くためだけであれば『日本語の作文技術』だけで十分だけどね。
+ </p>
+ <span style="background:orange">
+ </span><span style="background:orange"><img alt="aa" class="style1"
+ src="file:///C:/Users/satoshi/Desktop/HNI_0010.png" /></span><img alt="1"
+ class="style2" src="file:///C:/Users/satoshi/Desktop/as_010%20(1).jpg" />
+
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>HTML5 Test</title>
+<meta name="description" content="HTML5 canvas" />
+<meta name="keywords" content="HTML5,canvas" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+ <link rel="stylesheet" href="http://sfpg.seesaa.net/styles-index.css" type="text/css" />
+ <style type="text/css">
+ #disp01 {margin:10px;}
+ </style>
+<link type="text/css" rel="stylesheet" href="http://sfpg.up.seesaa.net/styles/shCore.css"/>
+<link type="text/css" rel="stylesheet" href="http://sfpg.up.seesaa.net/styles/shThemeDefault.css"/>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shCore.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shLegacy.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushCpp.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushJScript.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushXml.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushCSharp.js"></script>
+<script type="text/javascript" src="../scripts/jquery-1.4.4.min.js"></script>
+<script type="text/javascript">
+ SyntaxHighlighter.all();
+</script>
+</head>
+<body style="font-size:12px;text-align:left;">
+<p>canvasを使った3Dデモを集めてみた。WebGLとかを使ってない物を選んでいる。</p>
+<h3><a href="http://1ka2ka.com/archives/201006/16_092531.html" target="_blank">[HTML5 canvas] 簡単な 3D アニメーション</a></h3>
+
+ <a href="http://1ka2ka.com/uploadfile/100616/animeCanvas.html" target="_blank">
+<img src="http://1ka2ka.com/uploadfile/100616/preview.png" alt="簡単な 3D アニメーション">
+ </a>
+ <h3><a href="http://sebleedelisle.com/2009/09/simple-3d-in-html5-canvas/" target="_blank">Simple 3D in HTML5 canvas</a></h3>
+<img src="http://farm3.static.flickr.com/2675/3895371007_19b9b20994.jpg" />
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>HTML5 Test</title>
+<meta name="description" content="HTML5 canvas" />
+<meta name="keywords" content="HTML5,canvas" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+ <link rel="stylesheet" href="http://sfpg.seesaa.net/styles-index.css" type="text/css" />
+ <style type="text/css">
+ #disp01 {margin:10px;}
+ </style>
+<link type="text/css" rel="stylesheet" href="http://sfpg.up.seesaa.net/styles/shCore.css"/>
+<link type="text/css" rel="stylesheet" href="http://sfpg.up.seesaa.net/styles/shThemeDefault.css"/>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shCore.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shLegacy.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushCpp.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushJScript.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushXml.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushCSharp.js"></script>
+<script type="text/javascript" src="../scripts/jquery-1.4.4.min.js"></script>
+<script type="text/javascript">
+ SyntaxHighlighter.all();
+</script>
+</head>
+<body style="font-size:12px;text-align:left;">
+<h3>Boost.GIL IO & Toolbox拡張が採択されました</h3>
+<p>
+画像処理のライブラリを少し追っているのだけれども、Boost.GILについて動きがあった模様である。
+</p>
+<cite>Boost.GIL IO & Toolbox拡張が採択されました<br/>
+http://d.hatena.ne.jp/faith_and_brave/20110128/1296184941</cite>
+<h3>Boost.GIL</h3>
+<p>Boost.GILはもともとアドビのオープンソース・プロジェクトで、いつだったか忘れたがBoostに取り込まれていた。</p>
+<p>Boost.GILについてはほとんど知識はなくまたどういうものなのかもさっぱり理解していないので、まずはGILの冒頭説明を読むことにした。</p>
+<cite>引用元: http://opensource.adobe.com/wiki/display/gil/Generic+Image+Library </cite>
+<blockquote>
+
+ Images are a fundamental construct in any project that involves graphics, image
+ processing, and video and yet the variability in pixel data representations
+ (color space, bit depth, channel ordering, planar/interleaved, alignment policy)
+ makes it hard to write imaging-related code that is both generic and efficient.
+ Generic Image Library (GIL) is a C++ generic library which allows for writing
+ generic imaging algorithms with performance comparable to hand-writing for a
+ particular image type. The library is designed with the following five goals in
+ mind: <ul>
+ <li>
+ Generality: Abstracts image representations from algorithms on images. It
+ allows for writing code once and having it work for any image type. </li>
+<li>Performance:
+ Speed has been instrumental to the design of the library. The generic algorithms
+ provided in the library are comparable in speed to hand-coding the algorithm for
+ a specific image type.</li>
+ <li>
+ Flexibility: Compile-type parameter resolution results in
+ faster code, but severely limits code flexibility. The library allows for any
+ image parameter to be specified at run time (for a minor performance cost
+ comparable to a virtual call overhead). </li>
+ <li>
+Extensibility: GIL is concept-based and
+ allows virtually every component - channels, color spaces, pixels, pixel
+ iterators, locators, views, images and algorithms - to be replaced. </li>
+ <li>
+ Compatibility: The library is designed as an STL and Boost complement. Generic
+ STL algorithms can be used for pixel manipulation, and they are especially
+ optimized. The library works natively on existing raw pixel data.
+ </li>
+ </ul>
+</blockquote>
+まずはBoost.GILでググって見ると、
+<p>
+</body>
+</html>
<html>
<head>
<title>HTML5 Test</title>
+<meta name="description" content="HTML5 canvas" />
+<meta name="keywords" content="HTML5,canvas" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="http://sfpg.seesaa.net/styles-index.css" type="text/css" />
<style type="text/css">
#disp01 {margin:10px;}
_gaq.push(['_trackPageview']);
(function () {
+ if(location.search.indexOf("frame=true") == -1){
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+
})();
</script>-->
<div>
<button type="button" id="start" disabled="true">開始</button>
<button type="button" id="stop" disabled="true" >停止</button>
+<a href="" id="ScreenShot" target="_blank">画面ショット</a>
</div>
<script type="text/javascript">
ctx.font = "12px 'ＭＳ ゴシック'";
ctx.fillText("なんちゃってボール反発です。", 0, 20, 240);
ctx.fillText("クリックするとボールが追加されます。", 0, 40, 240);
- ctx.fillText("背景画像を表示してみました。", 0, 60, 240);
+ ctx.fillText("小さい人を追加し、カーソルで左右に動くようにしました。", 0, 60, 240);
+ ctx.fillText("画面ショットを取れるようにしてみました。", 0, 80, 240);
render();
var color = ["#0030ff", "#0060ff", "#0090ff", "#00c0ff"];
tasks.pushTask(render, 65000);
tasks.pushTask(eraseBackBuffer, 65535);
balls.length = 0;
- for (var i = 0; i < 5; ++i) {
+ for (var i = 0; i < 100; ++i) {
var rad = 1 + Math.random() * 10;
balls.push(
new Ball(
}
});
- $(document.body).keydown(function (e) {
+ // スクリーンショット
+ $("#ScreenShot").mousedown(function () {
+ this.href = $('#disp01')[0].toDataURL();
+ });
+
+ // キー入力処理
+ $(document).keydown(function (e) {
if (keyBuffer.length > 16) {
keyBuffer.shift();
}
});
- $(document.body).keyup(function (e) {
+ $(document).keyup(function (e) {
switch (e.keyCode) {
case 37:
keyCheck.left = false;
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>HTML5 Test</title>
+<meta name="description" content="HTML5 canvas" />
+<meta name="keywords" content="HTML5,canvas" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+ <link rel="stylesheet" href="http://sfpg.seesaa.net/styles-index.css" type="text/css" />
+ <style type="text/css">
+ #disp01 {margin:10px;}
+ </style>
+<script type="text/javascript" src="../scripts/jquery-1.4.4.min.js"></script>
+<script type="text/javascript">
+if(location.search.indexOf("frame=true") == -1){
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-15457703-1']);
+ _gaq.push(['_setDomainName', '.seesaa.net']);
+ _gaq.push(['_trackPageview']);
+
+ (function () {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+}
+</script>
+</head>
+<body>
+<div id="div001">
+<canvas id="disp01" width="320" height="240" ></canvas>
+</div>
+<div>
+<button type="button" id="start" disabled="true">開始</button>
+<button type="button" id="stop" disabled="true" >停止</button>
+<a href="" id="ScreenShot" target="_blank">画面ショット</a>
+</div>
+<script type="text/javascript">
+
+ var sx = 80;
+ var sy = 60;
+ var width = 320;
+ var height = 240;
+
+
+ var ctx_main = $("#disp01")[0].getContext("2d");
+ var screenWidth = $("#disp01")[0].width;
+ var screenHeight = $("#disp01")[0].height;
+ var img;
+ var imageRoot = "../image/";
+ var imageCount = 0;
+ var imageLength = 0;
+ var imageLoaded = false;
+
+ var keyCheck = {up:false,down:false,left:false,right:false,z:false};
+
+ function ImageFile(src) {
+ this.src = src;
+ this.image = new Image();
+ this.image.parent = this;
+ this.image.onload = function () {
+// this.parent.canvas = $("<canvas>")[0];
+// this.parent.canvas.width = this.width;
+// this.parent.canvas.height = this.height;
+// this.parent.canvas.getContext("2d").drawImage(this, 0, 0);
+ ++imageLength;
+ };
+ this.image.onerror = function () { ExitError("Image Load Error"); };
+ return this;
+ }
+
+ ImageFile.prototype.load = function () { this.image.src = imageRoot + this.src; };
+
+ var imageFiles = {
+ font : new ImageFile("Font.png"),
+ font1 : new ImageFile("Font2.png"),
+ author : new ImageFile("author.png"),
+ sky : new ImageFile("sky.png"),
+ player: new ImageFile("player.png")
+ };
+
+ var backBuffer = $("<canvas>")[0];
+ backBuffer.width = width + 160;
+ backBuffer.height = height + 120;
+
+ var eraseColor = "black";
+ var ctx = backBuffer.getContext("2d");
+ var t = 0;
+ var renderTimerId = undefined;
+ var mainTimerId = undefined;
+ var keyBuffer = Array(0);
+ var player;
+
+
+ // プレイヤー
+ function Player() {
+ this.x = width / 2;
+ this.image = imageFiles.player.image;
+ this.y = height - this.image.height;
+ this.dir = 0;
+ this.count = 0;
+ return this;
+ }
+
+ Player.prototype.move = function () {
+
+ if(keyCheck.right){
+ this.dir = 1;
+ this.x += this.dir * 3;
+ if (this.x > (width - 16)) {
+ this.x = width - 16;
+ }
+
+ } else if(keyCheck.left){
+ this.dir = -1;
+ this.x += this.dir * 3;
+ if (this.x < 0) {
+ this.x = 0;
+ }
+ } else {
+ this.dir = 0;
+ }
+ this.count++;
+ }
+
+ Player.prototype.draw = function () {
+ var imagePos = 0;
+ switch (this.dir) {
+ case -1:
+ imagePos = 4 + ((this.count & 4) >> 2);
+ break;
+ case 1:
+ imagePos = 2 + ((this.count & 4) >> 2);
+ break;
+ }
+ ctx.drawImage(this.image, imagePos * 16, 0, 16, 16, this.x, this.y, 16, 16);
+ }
+
+
+ // ボールオブジェクト
+ function Ball(x, y, radius, xSpeed, ySpeed,index,color) {
+ this.x = x;
+ this.y = y;
+ this.xSpeed = xSpeed;
+ this.ySpeed = ySpeed;
+ this.radius = radius;
+ this.index = index;
+ this.color = color;
+ this.enable = false;
+ return this;
+ };
+
+// Ball.prototype.init = function (x, y, radius,xSpeed,ySpeed,index) {
+// this.x = x;
+// this.y = y;
+// this.xSpeed = xSpeed;
+// this.ySpeed = ySpeed;
+// this.radius = radius;
+// this.index = index;
+// this.enable = true;
+// }
+
+ Ball.prototype.move = function () {
+
+ this.ySpeed += 0.25;
+ this.x += this.xSpeed;
+
+ if ((this.x + this.radius) > width) {
+ this.x = width - this.radius;
+ this.xSpeed = -(this.xSpeed);
+ }
+
+ if (this.x < this.radius) {
+ this.x = this.radius; // -this.x;
+ this.xSpeed = -(this.xSpeed);
+ }
+
+ this.y += this.ySpeed;
+
+ if ((this.y + this.radius) > height) {
+ this.y = height - this.radius;
+ this.ySpeed = -this.ySpeed ;
+ }
+
+ if (this.y < this.radius) {
+ this.y = this.radius;
+ this.ySpeed = -this.ySpeed ;
+ }
+ };
+
+ Ball.prototype.draw = function (pctx) {
+ var fillStyle = pctx.fillStyle;
+ //pctx.globalAlpha = 0.7;
+ pctx.fillStyle = this.color;
+ pctx.beginPath();
+ pctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+ pctx.closePath();
+ pctx.fill();
+ pctx.fillStyle = fillStyle;
+ //pctx.globalAlpha = 1.0;
+ };
+
+ Ball.prototype.checkCollision = function (other) {
+ if (Math.pow(this.x - other.x, 2) + Math.pow(this.y - other.y, 2) < Math.pow(this.radius + other.radius, 2)) {
+ // 衝突しているので反発させる。
+ return true;
+ }
+ return false;
+ };
+
+ // ボール配列
+ var balls = new Array(0);
+
+ // コンストラクタ
+ function Tasks() {
+ this.array = new Array(0);
+ this.needSort = false;
+ return this;
+ }
+
+
+ Tasks.prototype = {
+ // indexの位置のタスクを置き換える
+ setNextTask: function (index, func, priority) {
+ if (priority == undefined) {
+ priority = 10000;
+ }
+ func.priority = priority;
+ this.array[index] = func;
+ this.needSort = true;
+ },
+
+ pushTask: function (func, priority) {
+ if (priority == undefined) {
+ priority = 10000;
+ }
+ func.priority = priority;
+ for (var i = 0; i < this.length; ++i) {
+ if (this.array[i] == null) {
+ this.array[i] = func;
+ return;
+ }
+ }
+ this.array.push(func);
+ this.needSort = true;
+ },
+ // 配列を取得する
+ getArray: function () {
+ return this.array;
+ },
+ // タスクをクリアする
+ clear: function () {
+ this.array.length = 0;
+ },
+ // ソートが必要かチェックし、ソートする
+ checkSort: function () {
+ if (this.needSort) {
+ this.array.sort(function (a, b) { return a.priority > b.priority; });
+ needSort = false;
+ }
+ }
+ };
+
+ var tasks = new Tasks();
+ var img = new Image();
+
+
+ $(window).ready(function () {
+ ctx.fillStyle = "blue";
+ ctx.fillRect(0, 0, backBuffer.width, backBuffer.height);
+ ctx.setTransform(1, 0, 0, 1, sx, sy);
+ ctx.fillStyle = "white";
+
+ ctx.font = "12px 'ＭＳ ゴシック'";
+ ctx.fillText("なんちゃってボール反発です。", 0, 20, 240);
+ ctx.fillText("クリックするとボールが追加されます。", 0, 40, 240);
+ ctx.fillText("小さい人を追加し、カーソルで左右に動くようにしました。", 0, 60, 240);
+ ctx.fillText("画面ショットを取れるようにしてみました。", 0, 80, 240);
+ render();
+ var color = ["#0030ff", "#0060ff", "#0090ff", "#00c0ff"];
+
+ // 開始ボタンをクリックした時の処理
+ $("#start").click(function () {
+ // renderTimerId = setInterval(render, 100);
+ tasks.pushTask(init);
+ tasks.pushTask(render, 65000);
+ tasks.pushTask(eraseBackBuffer, 65535);
+ balls.length = 0;
+ for (var i = 0; i < 100; ++i) {
+ var rad = 1 + Math.random() * 10;
+ balls.push(
+ new Ball(
+ Math.random() * (width - rad * 2) + rad,
+ Math.random() * (height - rad * 2) + rad,
+ rad,
+ (Math.random() * 5 + 5) * (Math.random() >= 0.5 ? -1 : 1),
+ Math.random() * 4 + 9,
+ i,
+ color[(Math.random() * 4) | 0]
+ )
+ );
+ }
+ mainTimerId = setTimeout(processMain, 50);
+ $("#stop")[0].disabled = false;
+ $("#start")[0].disabled = true;
+ });
+
+ // 停止ボタンをクリックしたときの処理
+ $("#stop").click(function () {
+ // if (renderTimerId != undefined) {
+ // clearInterval(renderTimerId);
+ // renderTimerId = undefined;
+ // }
+ if (mainTimerId != undefined) {
+ clearTimeout(mainTimerId);
+ mainTimerId = undefined;
+ }
+
+ tasks.clear();
+
+ $("#stop")[0].disabled = true;
+ $("#start")[0].disabled = false;
+ });
+
+ // マウスクリックした時の処理
+ $("#disp01").click(function (e) {
+ if ($("#start")[0].disabled && balls.length < 300) {
+ var color = ["#ff3000", "#ff6000", "#ff9000", "#ffc000"];
+ var x = e.pageX - this.offsetLeft;
+ var y = e.pageY - this.offsetTop;
+ var rad = 1 + Math.random() * 10;
+ balls.push(
+ new Ball(
+ x,
+ y,
+ rad,
+ (Math.random() * 9) * (Math.random() >= 0.5 ? -1 : 1),
+ Math.random() * -12,
+ balls.length,
+ color[(Math.random() * 4) | 0]
+ )
+ );
+ }
+ });
+
+ // スクリーンショット
+ $("#ScreenShot").mousedown(function () {
+ this.href = $('#disp01')[0].toDataURL();
+ });
+
+ // キー入力処理
+ $(document).keydown(function (e) {
+
+ if (keyBuffer.length > 16) {
+ keyBuffer.shift();
+ }
+ keyBuffer.push(e.keyCode);
+ switch (e.keyCode) {
+ case 37:
+ keyCheck.left = true;
+ break;
+ case 38:
+ keyCheck.up = true;
+ break;
+ case 39:
+ keyCheck.right = true;
+ break;
+ case 40:
+ keyCheck.down = true;
+ break;
+ case 90:
+ keyCheck.z = true;
+ break;
+ }
+ });
+
+ $(document).keyup(function (e) {
+ switch (e.keyCode) {
+ case 37:
+ keyCheck.left = false;
+ break;
+ case 38:
+ keyCheck.up = false;
+ break;
+ case 39:
+ keyCheck.right = false;
+ break;
+ case 40:
+ keyCheck.down = false;
+ break;
+ case 90:
+ keyCheck.z = false;
+ break;
+ }
+
+ });
+
+ // 準備ができたので開始ボタンを押せるようにする
+ $("#start")[0].disabled = false;
+ });
+
+ var r = 0;
+
+ // 描画処理
+ function render() {
+ ctx_main.drawImage(backBuffer, sx, sy, width, height, 0, 0, screenWidth, screenHeight);
+ }
+
+ // バックバッファの消去
+ function eraseBackBuffer() {
+ ctx.fillStyle = eraseColor;
+ ctx.fillRect(0, 0, width, height);
+ }
+
+
+ // 処理メイン
+ // バックバッファの描画
+ var period = 0;
+ var ellapsedTime = 0;
+ var processCount = 0;
+
+ function processMain() {
+ var startTime = new Date().getTime();
+ processCount++;
+ // メインに描画
+ try {
+ tasks.checkSort();
+ $.each(tasks.getArray(),function (taskIndex) {
+ if (this != null) {
+ this(taskIndex);
+ }
+ }
+ );
+ } catch(e) {
+ ExitError(e);
+ }
+ //render();
+ //ctx.fillStyle = "black";
+ var endTime = new Date().getTime();
+ ellapsedTime = endTime - startTime;
+ period = 33 - (ellapsedTime) % 33;
+ mainTimerId = setTimeout(processMain, period);
+ }
+
+ // 初期化タスク
+ function init(taskIndex) {
+ if (!imageLoaded) {
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, width, height);
+ ctx.fillStyle = "white";
+ ctx.fillText("Loadint Image Data", 0, 20, 240);
+ $.each(imageFiles, function (key, value) {
+ imageCount++;
+ this.load();
+ });
+ }
+ tasks.setNextTask(taskIndex, checkLoad);
+ }
+
+
+ // エラーで終了する。
+ function ExitError(e) {
+ clearTimeout(mainTimerId);
+ ctx.fillStyle = "red";
+ ctx.fillRect(0, 0, width, height);
+ ctx.fillStyle = "white";
+ ctx.fillText("Error : " + e, 0, 20, 240);
+ render();
+ throw e;
+ }
+
+ // イメージがとロードされたかチェックする
+ function checkLoad(taskIndex) {
+ if (this.message == undefined) {
+ this.message = "Loading Image Data";
+ this.counter = 0;
+ } else {
+ this.counter++;
+ if (counter >= 10) {
+ this.counter = 0;
+ this.message += ".";
+ }
+ }
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, width, height);
+
+ if (imageCount == imageLength || imageLoaded) {
+ this.message = "Loading Image Data";
+ this.counter = 0;
+ imageLoaded = true;
+ tasks.setNextTask(taskIndex, printAuthor());
+ ctx.fillStyle = "white";
+ ctx.fillText(this.message + "OK", 0, 20, width);
+ } else {
+ ctx.fillStyle = "white";
+ ctx.fillText(this.message, 0, 20, width);
+ }
+ }
+
+ // 作者表示
+ function printAuthor() {
+ var step = 0;
+ var count = 0;
+ var wait = 60;
+ keyBuffer.length = 0;
+ return function (taskIndex) {
+
+ // 何かキー入力があった場合は次のタスクへ
+ if (keyBuffer.length > 0) {
+ keyBuffer.length = 0;
+ step = 4;
+ }
+
+ switch (step) {
+ // フェード・イン
+ case 0:
+ count += 0.1;
+ if (count >= 1.0) step++;
+ break;
+ // 待ち
+ case 1:
+ if (! --wait) step++;
+ break;
+ //フェードアウト
+ case 2:
+ count -= 0.1;
+ if (count <= 0.0) {
+ count = 0.0;
+ wait = 30;
+ step++;
+ }
+ break;
+ // 少し待ち
+ case 3:
+ if (! --wait) {
+ step++;
+ }
+ // 次のタスクへ
+ case 4:
+ tasks.setNextTask(taskIndex, ballAction);
+ tasks.pushTask(function () { ctx.drawImage(imageFiles.sky.image, 0, 0); }, 5000);
+ player = new Player();
+ tasks.pushTask(function () { player.move(); player.draw(); });
+ tasks.pushTask(addCount);
+ break;
+ }
+ var backup = ctx.globalAlpha;
+ ctx.globalAlpha = count;
+ ctx.drawImage(imageFiles.author.image, (width - imageFiles.author.image.width) / 2, (height - imageFiles.author.image.height) / 2);
+ ctx.globalAlpha = backup;
+ };
+ }
+
+ // 処理時間を表示する。
+ function addCount() {
+// var txt = "処理時間:" + ellapsedTime + "ms";
+// ctx.textBaseline = "top";
+// var textWidth = ctx.measureText(txt);
+// ctx.fillStyle = "black";
+// ctx.fillRect(0, 0, textWidth.width, 12);
+// ctx.fillStyle = "white";
+ // ctx.fillText(txt, 0, 0, textWidth.width);
+ var txt = "Process Time: " + ellapsedTime + "ms\n\nTest Program.";
+ print(0, 0, txt);
+ }
+
+ // ボール初期化タスク
+ function ballAction() {
+ for (var i = 0, last = balls.length; i < last; ++i) {
+ var srcBall = balls[i];
+ srcBall.move();
+ srcBall.draw(ctx);
+ for (var j = i + 1; j < last; ++j) {
+ if (srcBall.checkCollision(balls[j])) {
+ bound(srcBall, balls[j]);
+ }
+ }
+ }
+ }
+
+ // 衝突時の処理
+ function bound(src, dest) {
+ // 半径を質量と見立てる。
+ var srcMass = src.radius ;
+ var destMass = dest.radius ;
+ var totalMass = srcMass + destMass;
+ var boundRate = 1.95;
+ var c = { x: dest.x - src.x, y: dest.y - src.y };
+
+ // 正規化
+ var vs = Math.sqrt(c.x * c.x + c.y * c.y);
+ c.x = c.x / vs;
+ c.y = c.y / vs;
+
+ // 内積
+ var dot = (src.xSpeed - dest.xSpeed) * c.x + (src.ySpeed - dest.ySpeed) * c.y;
+
+ // めり込みを補正する。
+ if ((src.radius + dest.radius) > vs) {
+ var a = src.radius + dest.radius - vs;
+
+// var m = (src.radius + dest.radius) / vs;
+ var ax = (c.x * a) / 2;
+ var ay = (c.y * a) / 2;
+ dest.x = dest.x + ax;
+ dest.y = dest.y + ay;
+ src.x = src.x - ax;
+ src.y = src.y - ay;
+// while ((Math.pow(dest.x - src.x, 2) + Math.pow(dest.y - src.y, 2)) <= Math.pow(src.radius + dest.radius, 2)) {
+// dest.x += c.x/2;
+// dest.y += c.y/2;
+// src.x -= c.x/2;
+// src.y -= c.y/2;
+// }
+//
+
+ }
+
+
+ // 定数ベクトル
+ var v = { x: boundRate * dot / totalMass * c.x, y: boundRate * dot / totalMass * c.y };
+ src.xSpeed = -destMass * v.x + src.xSpeed;
+ src.ySpeed = -destMass * v.y + src.ySpeed;
+
+ dest.xSpeed = srcMass * v.x + dest.xSpeed;
+ dest.ySpeed = srcMass * v.y + dest.ySpeed;
+
+// src.x += src.xSpeed;
+// src.y += src.ySpeed;
+
+// dest.x += dest.xSpeed;
+// dest.y += dest.ySpeed;
+
+ }
+
+ // ビットマップキャラクターで文字表示する
+ function print(x, y, str) {
+ var startx = x;
+ var font = imageFiles.font.image;
+ for (var i = 0; i < str.length; ++i) {
+ var c = str.charCodeAt(i);
+ if (c == 0xa) {
+ y += 8;
+ x = startx;
+ } else {
+ c -= 0x20;
+ var ypos = parseInt(c / 16) * 8;
+ var xpos = (c % 16) * 8;
+ ctx.drawImage(font, xpos, ypos, 8, 8, x, y, 8, 8);
+ x += 8;
+ }
+ }
+ }
+
+</script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>HTML5 Test</title>
+<meta name="description" content="HTML5 canvas" />
+<meta name="keywords" content="HTML5,canvas" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+ <link rel="stylesheet" href="http://sfpg.seesaa.net/styles-index.css" type="text/css" />
+ <style type="text/css">
+ #disp01 {margin:10px;}
+ </style>
+<script type="text/javascript" src="../scripts/jquery-1.4.4.min.js"></script>
+<script type="text/javascript">
+if(location.search.indexOf("frame=true") == -1){
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-15457703-1']);
+ _gaq.push(['_setDomainName', '.seesaa.net']);
+ _gaq.push(['_trackPageview']);
+
+ (function () {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+}
+</script>
+</head>
+<body>
+<div id="div001">
+<canvas id="disp01" width="320" height="240" ></canvas>
+</div>
+<div>
+<button type="button" id="start" disabled="true">開始</button>
+<button type="button" id="stop" disabled="true" >停止</button>
+<a href="" id="ScreenShot" target="_blank">画面ショット</a>
+</div>
+<script type="text/javascript">
+
+ var sx = 80;
+ var sy = 60;
+ var width = 320;
+ var height = 240;
+
+
+ var ctx_main = $("#disp01")[0].getContext("2d");
+ var screenWidth = $("#disp01")[0].width;
+ var screenHeight = $("#disp01")[0].height;
+ var img;
+ var imageRoot = "../image/";
+ var imageCount = 0;
+ var imageLength = 0;
+ var imageLoaded = false;
+
+ var keyCheck = {up:false,down:false,left:false,right:false,z:false};
+
+ function ImageFile(src) {
+ this.src = src;
+ this.image = new Image();
+ this.image.parent = this;
+ this.image.onload = function () {
+// this.parent.canvas = $("<canvas>")[0];
+// this.parent.canvas.width = this.width;
+// this.parent.canvas.height = this.height;
+// this.parent.canvas.getContext("2d").drawImage(this, 0, 0);
+ ++imageLength;
+ };
+ this.image.onerror = function () { ExitError("Image Load Error"); };
+ return this;
+ }
+
+ ImageFile.prototype.load = function () { this.image.src = imageRoot + this.src; };
+
+ var imageFiles = {
+ font : new ImageFile("Font.png"),
+ font1 : new ImageFile("Font2.png"),
+ author : new ImageFile("author.png"),
+ sky : new ImageFile("sky.png"),
+ player: new ImageFile("player.png")
+ };
+
+ var backBuffer = $("<canvas>")[0];
+ backBuffer.width = width + 160;
+ backBuffer.height = height + 120;
+
+ var eraseColor = "black";
+ var ctx = backBuffer.getContext("2d");
+ var t = 0;
+ var renderTimerId = undefined;
+ var mainTimerId = undefined;
+ var keyBuffer = Array(0);
+ var player;
+
+
+ // プレイヤー
+ function Player() {
+ this.x = width / 2;
+ this.image = imageFiles.player.image;
+ this.y = height - this.image.height;
+ this.dir = 0;
+ this.count = 0;
+ return this;
+ }
+
+ Player.prototype.move = function () {
+
+ if(keyCheck.right){
+ this.dir = 1;
+ this.x += this.dir * 3;
+ if (this.x > (width - 16)) {
+ this.x = width - 16;
+ }
+
+ } else if(keyCheck.left){
+ this.dir = -1;
+ this.x += this.dir * 3;
+ if (this.x < 0) {
+ this.x = 0;
+ }
+ } else {
+ this.dir = 0;
+ }
+ this.count++;
+ }
+
+ Player.prototype.draw = function () {
+ var imagePos = 0;
+ switch (this.dir) {
+ case -1:
+ imagePos = 4 + ((this.count & 4) >> 2);
+ break;
+ case 1:
+ imagePos = 2 + ((this.count & 4) >> 2);
+ break;
+ }
+ ctx.drawImage(this.image, imagePos * 16, 0, 16, 16, this.x, this.y, 16, 16);
+ }
+
+
+ // ボールオブジェクト
+ function Ball(x, y, radius, xSpeed, ySpeed,index,color) {
+ this.x = x;
+ this.y = y;
+ this.xSpeed = xSpeed;
+ this.ySpeed = ySpeed;
+ this.radius = radius;
+ this.index = index;
+ this.color = color;
+ this.enable = false;
+ return this;
+ };
+
+// Ball.prototype.init = function (x, y, radius,xSpeed,ySpeed,index) {
+// this.x = x;
+// this.y = y;
+// this.xSpeed = xSpeed;
+// this.ySpeed = ySpeed;
+// this.radius = radius;
+// this.index = index;
+// this.enable = true;
+// }
+
+ Ball.prototype.move = function () {
+
+ this.ySpeed += 0.25;
+ this.x += this.xSpeed;
+
+ if ((this.x + this.radius) > width) {
+ this.x = width - this.radius;
+ this.xSpeed = -(this.xSpeed);
+ }
+
+ if (this.x < this.radius) {
+ this.x = this.radius; // -this.x;
+ this.xSpeed = -(this.xSpeed);
+ }
+
+ this.y += this.ySpeed;
+
+ if ((this.y + this.radius) > height) {
+ this.y = height - this.radius;
+ this.ySpeed = -this.ySpeed ;
+ }
+
+ if (this.y < this.radius) {
+ this.y = this.radius;
+ this.ySpeed = -this.ySpeed ;
+ }
+ };
+
+ Ball.prototype.draw = function (pctx) {
+ var fillStyle = pctx.fillStyle;
+ //pctx.globalAlpha = 0.7;
+ pctx.fillStyle = this.color;
+ pctx.beginPath();
+ pctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+ pctx.closePath();
+ pctx.fill();
+ pctx.fillStyle = fillStyle;
+ //pctx.globalAlpha = 1.0;
+ };
+
+ Ball.prototype.checkCollision = function (other) {
+ if (Math.pow(this.x - other.x, 2) + Math.pow(this.y - other.y, 2) < Math.pow(this.radius + other.radius, 2)) {
+ // 衝突しているので反発させる。
+ return true;
+ }
+ return false;
+ };
+
+ // ボール配列
+ var balls = new Array(0);
+
+ // コンストラクタ
+ function Tasks() {
+ this.array = new Array(0);
+ this.needSort = false;
+ return this;
+ }
+
+
+ Tasks.prototype = {
+ // indexの位置のタスクを置き換える
+ setNextTask: function (index, func, priority) {
+ if (priority == undefined) {
+ priority = 10000;
+ }
+ func.priority = priority;
+ this.array[index] = func;
+ this.needSort = true;
+ },
+
+ pushTask: function (func, priority) {
+ if (priority == undefined) {
+ priority = 10000;
+ }
+ func.priority = priority;
+ for (var i = 0; i < this.length; ++i) {
+ if (this.array[i] == null) {
+ this.array[i] = func;
+ return;
+ }
+ }
+ this.array.push(func);
+ this.needSort = true;
+ },
+ // 配列を取得する
+ getArray: function () {
+ return this.array;
+ },
+ // タスクをクリアする
+ clear: function () {
+ this.array.length = 0;
+ },
+ // ソートが必要かチェックし、ソートする
+ checkSort: function () {
+ if (this.needSort) {
+ this.array.sort(function (a, b) { return a.priority > b.priority; });
+ needSort = false;
+ }
+ }
+ };
+
+ var tasks = new Tasks();
+ var img = new Image();
+
+
+ $(window).ready(function () {
+ ctx.fillStyle = "blue";
+ ctx.fillRect(0, 0, backBuffer.width, backBuffer.height);
+ ctx.setTransform(1, 0, 0, 1, sx, sy);
+ ctx.fillStyle = "white";
+
+ ctx.font = "12px 'ＭＳ ゴシック'";
+ ctx.fillText("なんちゃってボール反発です。", 0, 20, 240);
+ ctx.fillText("クリックするとボールが追加されます。", 0, 40, 240);
+ ctx.fillText("小さい人を追加し、カーソルで左右に動くようにしました。", 0, 60, 240);
+ ctx.fillText("画面ショットを取れるようにしてみました。", 0, 80, 240);
+ render();
+ var color = ["#0030ff", "#0060ff", "#0090ff", "#00c0ff"];
+
+ // 開始ボタンをクリックした時の処理
+ $("#start").click(function () {
+ // renderTimerId = setInterval(render, 100);
+ tasks.pushTask(init);
+ tasks.pushTask(render, 65000);
+ tasks.pushTask(eraseBackBuffer, 65535);
+ balls.length = 0;
+ for (var i = 0; i < 100; ++i) {
+ var rad = 1 + Math.random() * 10;
+ balls.push(
+ new Ball(
+ Math.random() * (width - rad * 2) + rad,
+ Math.random() * (height - rad * 2) + rad,
+ rad,
+ (Math.random() * 5 + 5) * (Math.random() >= 0.5 ? -1 : 1),
+ Math.random() * 4 + 9,
+ i,
+ color[(Math.random() * 4) | 0]
+ )
+ );
+ }
+ mainTimerId = setTimeout(processMain, 50);
+ $("#stop")[0].disabled = false;
+ $("#start")[0].disabled = true;
+ });
+
+ // 停止ボタンをクリックしたときの処理
+ $("#stop").click(function () {
+ // if (renderTimerId != undefined) {
+ // clearInterval(renderTimerId);
+ // renderTimerId = undefined;
+ // }
+ if (mainTimerId != undefined) {
+ clearTimeout(mainTimerId);
+ mainTimerId = undefined;
+ }
+
+ tasks.clear();
+
+ $("#stop")[0].disabled = true;
+ $("#start")[0].disabled = false;
+ });
+
+ // マウスクリックした時の処理
+ $("#disp01").click(function (e) {
+ if ($("#start")[0].disabled && balls.length < 300) {
+ var color = ["#ff3000", "#ff6000", "#ff9000", "#ffc000"];
+ var x = e.pageX - this.offsetLeft;
+ var y = e.pageY - this.offsetTop;
+ var rad = 1 + Math.random() * 10;
+ balls.push(
+ new Ball(
+ x,
+ y,
+ rad,
+ (Math.random() * 9) * (Math.random() >= 0.5 ? -1 : 1),
+ Math.random() * -12,
+ balls.length,
+ color[(Math.random() * 4) | 0]
+ )
+ );
+ }
+ });
+
+ // スクリーンショット
+ $("#ScreenShot").mousedown(function () {
+ this.href = $('#disp01')[0].toDataURL();
+ });
+
+ // キー入力処理
+ $(document).keydown(function (e) {
+
+ if (keyBuffer.length > 16) {
+ keyBuffer.shift();
+ }
+ keyBuffer.push(e.keyCode);
+ switch (e.keyCode) {
+ case 37:
+ keyCheck.left = true;
+ break;
+ case 38:
+ keyCheck.up = true;
+ break;
+ case 39:
+ keyCheck.right = true;
+ break;
+ case 40:
+ keyCheck.down = true;
+ break;
+ case 90:
+ keyCheck.z = true;
+ break;
+ }
+ });
+
+ $(document).keyup(function (e) {
+ switch (e.keyCode) {
+ case 37:
+ keyCheck.left = false;
+ break;
+ case 38:
+ keyCheck.up = false;
+ break;
+ case 39:
+ keyCheck.right = false;
+ break;
+ case 40:
+ keyCheck.down = false;
+ break;
+ case 90:
+ keyCheck.z = false;
+ break;
+ }
+
+ });
+
+ // 準備ができたので開始ボタンを押せるようにする
+ $("#start")[0].disabled = false;
+ });
+
+ var r = 0;
+
+ // 描画処理
+ function render() {
+ ctx_main.drawImage(backBuffer, sx, sy, width, height, 0, 0, screenWidth, screenHeight);
+ }
+
+ // バックバッファの消去
+ function eraseBackBuffer() {
+ ctx.fillStyle = eraseColor;
+ ctx.fillRect(0, 0, width, height);
+ }
+
+
+ // 処理メイン
+ // バックバッファの描画
+ var period = 0;
+ var ellapsedTime = 0;
+ var processCount = 0;
+
+ function processMain() {
+ var startTime = new Date().getTime();
+ processCount++;
+ // メインに描画
+ try {
+ tasks.checkSort();
+ $.each(tasks.getArray(),function (taskIndex) {
+ if (this != null) {
+ this(taskIndex);
+ }
+ }
+ );
+ } catch(e) {
+ ExitError(e);
+ }
+ //render();
+ //ctx.fillStyle = "black";
+ var endTime = new Date().getTime();
+ ellapsedTime = endTime - startTime;
+ period = 33 - (ellapsedTime) % 33;
+ mainTimerId = setTimeout(processMain, period);
+ }
+
+ // 初期化タスク
+ function init(taskIndex) {
+ if (!imageLoaded) {
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, width, height);
+ ctx.fillStyle = "white";
+ ctx.fillText("Loadint Image Data", 0, 20, 240);
+ $.each(imageFiles, function (key, value) {
+ imageCount++;
+ this.load();
+ });
+ }
+ tasks.setNextTask(taskIndex, checkLoad);
+ }
+
+
+ // エラーで終了する。
+ function ExitError(e) {
+ clearTimeout(mainTimerId);
+ ctx.fillStyle = "red";
+ ctx.fillRect(0, 0, width, height);
+ ctx.fillStyle = "white";
+ ctx.fillText("Error : " + e, 0, 20, 240);
+ render();
+ throw e;
+ }
+
+ // イメージがとロードされたかチェックする
+ function checkLoad(taskIndex) {
+ if (this.message == undefined) {
+ this.message = "Loading Image Data";
+ this.counter = 0;
+ } else {
+ this.counter++;
+ if (counter >= 10) {
+ this.counter = 0;
+ this.message += ".";
+ }
+ }
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, width, height);
+
+ if (imageCount == imageLength || imageLoaded) {
+ this.message = "Loading Image Data";
+ this.counter = 0;
+ imageLoaded = true;
+ tasks.setNextTask(taskIndex, printAuthor());
+ ctx.fillStyle = "white";
+ ctx.fillText(this.message + "OK", 0, 20, width);
+ } else {
+ ctx.fillStyle = "white";
+ ctx.fillText(this.message, 0, 20, width);
+ }
+ }
+
+ // 作者表示
+ function printAuthor() {
+ var step = 0;
+ var count = 0;
+ var wait = 60;
+ keyBuffer.length = 0;
+ return function (taskIndex) {
+
+ // 何かキー入力があった場合は次のタスクへ
+ if (keyBuffer.length > 0) {
+ keyBuffer.length = 0;
+ step = 4;
+ }
+
+ switch (step) {
+ // フェード・イン
+ case 0:
+ count += 0.1;
+ if (count >= 1.0) step++;
+ break;
+ // 待ち
+ case 1:
+ if (! --wait) step++;
+ break;
+ //フェードアウト
+ case 2:
+ count -= 0.1;
+ if (count <= 0.0) {
+ count = 0.0;
+ wait = 30;
+ step++;
+ }
+ break;
+ // 少し待ち
+ case 3:
+ if (! --wait) {
+ step++;
+ }
+ // 次のタスクへ
+ case 4:
+ tasks.setNextTask(taskIndex, ballAction);
+ tasks.pushTask(function () { ctx.drawImage(imageFiles.sky.image, 0, 0); }, 5000);
+ player = new Player();
+ tasks.pushTask(function () { player.move(); player.draw(); });
+ tasks.pushTask(addCount);
+ break;
+ }
+ var backup = ctx.globalAlpha;
+ ctx.globalAlpha = count;
+ ctx.drawImage(imageFiles.author.image, (width - imageFiles.author.image.width) / 2, (height - imageFiles.author.image.height) / 2);
+ ctx.globalAlpha = backup;
+ };
+ }
+
+ // 処理時間を表示する。
+ function addCount() {
+// var txt = "処理時間:" + ellapsedTime + "ms";
+// ctx.textBaseline = "top";
+// var textWidth = ctx.measureText(txt);
+// ctx.fillStyle = "black";
+// ctx.fillRect(0, 0, textWidth.width, 12);
+// ctx.fillStyle = "white";
+ // ctx.fillText(txt, 0, 0, textWidth.width);
+ var txt = "Process Time: " + ellapsedTime + "ms\n\nTest Program.";
+ print(0, 0, txt);
+ }
+
+ // ボール初期化タスク
+ function ballAction() {
+ for (var i = 0, last = balls.length; i < last; ++i) {
+ var srcBall = balls[i];
+ srcBall.move();
+ srcBall.draw(ctx);
+ for (var j = i + 1; j < last; ++j) {
+ if (srcBall.checkCollision(balls[j])) {
+ bound(srcBall, balls[j]);
+ }
+ }
+ }
+ }
+
+ // 衝突時の処理
+ function bound(src, dest) {
+ // 半径を質量と見立てる。
+ var srcMass = src.radius ;
+ var destMass = dest.radius ;
+ var totalMass = srcMass + destMass;
+ var boundRate = 1.95;
+ var c = { x: dest.x - src.x, y: dest.y - src.y };
+
+ // 正規化
+ var vs = Math.sqrt(c.x * c.x + c.y * c.y);
+ c.x = c.x / vs;
+ c.y = c.y / vs;
+
+ // 内積
+ var dot = (src.xSpeed - dest.xSpeed) * c.x + (src.ySpeed - dest.ySpeed) * c.y;
+
+ // めり込みを補正する。
+ if ((src.radius + dest.radius) > vs) {
+ var a = src.radius + dest.radius - vs;
+
+// var m = (src.radius + dest.radius) / vs;
+ var ax = (c.x * a) / 2;
+ var ay = (c.y * a) / 2;
+ dest.x = dest.x + ax;
+ dest.y = dest.y + ay;
+ src.x = src.x - ax;
+ src.y = src.y - ay;
+// while ((Math.pow(dest.x - src.x, 2) + Math.pow(dest.y - src.y, 2)) <= Math.pow(src.radius + dest.radius, 2)) {
+// dest.x += c.x/2;
+// dest.y += c.y/2;
+// src.x -= c.x/2;
+// src.y -= c.y/2;
+// }
+//
+
+ }
+
+
+ // 定数ベクトル
+ var v = { x: boundRate * dot / totalMass * c.x, y: boundRate * dot / totalMass * c.y };
+ src.xSpeed = -destMass * v.x + src.xSpeed;
+ src.ySpeed = -destMass * v.y + src.ySpeed;
+
+ dest.xSpeed = srcMass * v.x + dest.xSpeed;
+ dest.ySpeed = srcMass * v.y + dest.ySpeed;
+
+// src.x += src.xSpeed;
+// src.y += src.ySpeed;
+
+// dest.x += dest.xSpeed;
+// dest.y += dest.ySpeed;
+
+ }
+
+ // ビットマップキャラクターで文字表示する
+ function print(x, y, str) {
+ var startx = x;
+ var font = imageFiles.font.image;
+ for (var i = 0; i < str.length; ++i) {
+ var c = str.charCodeAt(i);
+ if (c == 0xa) {
+ y += 8;
+ x = startx;
+ } else {
+ c -= 0x20;
+ var ypos = parseInt(c / 16) * 8;
+ var xpos = (c % 16) * 8;
+ ctx.drawImage(font, xpos, ypos, 8, 8, x, y, 8, 8);
+ x += 8;
+ }
+ }
+ }
+
+</script>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>HTML5 Test 000 (超手抜き3D Cube）</title>
+<meta name="description" content="HTML5 canvas" />
+<meta name="keywords" content="HTML5,canvas" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+ <script src="../scripts/glMatrix-0.9.4.min.js" type="text/javascript"></script>
+ <link rel="stylesheet" href="http://sfpg.seesaa.net/styles-index.css" type="text/css" />
+<link type="text/css" rel="stylesheet" href="http://sfpg.up.seesaa.net/styles/shCore.css"/>
+<link type="text/css" rel="stylesheet" href="http://sfpg.up.seesaa.net/styles/shThemeDefault.css"/>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shCore.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shLegacy.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushCpp.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushJScript.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushXml.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushCSharp.js"></script>
+ <style type="text/css">
+ #disp01 {margin:10px;}
+ body {margin:auto;width:800px;font-size:10pt;};
+ </style>
+<script type="text/javascript" src="../scripts/jquery-1.4.4.min.js"></script>
+<script type="text/javascript">
+if(location.search.indexOf("frame=true") == -1){
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-15457703-1']);
+ _gaq.push(['_setDomainName', '.seesaa.net']);
+ _gaq.push(['_trackPageview']);
+
+ (function () {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+}
+</script>
+<script type="text/javascript">
+</script>
+</head>
+<body>
+<div id="div001">
+<canvas id="disp01" width="400" height="400" ></canvas>
+</div>
+<div>
+<button type="button" id="start" disabled="true">開始</button>
+<button type="button" id="stop" disabled="true" >停止</button>
+<a href="" id="ScreenShot" target="_blank">画面ショット</a>
+</div>
+<script id="script" type="text/javascript">
+
+ var ctx = $("#disp01")[0].getContext("2d");
+ var screenWidth = $("#disp01")[0].width;
+ var screenHeight = $("#disp01")[0].height;
+
+ /// アスペクト比
+ var aspectRatio = screenWidth / screenHeight;
+ var keyCheck = {up:false,down:false,left:false,right:false,z:false};
+ var mainTimerId = undefined;
+ var keyBuffer = Array(0);
+
+ // 立方体のローカル座標
+ var cubeVertex =
+ [ vec3.create([-1,-1,-1]), vec3.create([1, -1, -1]), vec3.create([1, 1, -1]),vec3.create([-1, 1, -1]),
+ vec3.create([-1, -1, 1]), vec3.create([1, -1, 1]), vec3.create([1, 1, 1]),vec3.create([-1, 1, 1]) ];
+
+ // 結ぶ線の情報
+ var cubeDrawOrder = [[0, 1], [1, 2], [2, 3], [3, 0], [4, 5], [5, 6], [6, 7], [7, 4], [0, 4], [1, 5], [2, 6], [3, 7]];
+
+ // コンストラクタ
+ function Tasks() {
+ this.array = new Array(0);
+ this.needSort = false;
+ return this;
+ }
+
+ Tasks.prototype = {
+ // indexの位置のタスクを置き換える
+ setNextTask: function (index, func, priority) {
+ if (priority == undefined) {
+ priority = 10000;
+ }
+ func.priority = priority;
+ this.array[index] = func;
+ this.needSort = true;
+ },
+
+ pushTask: function (func, priority) {
+ if (priority == undefined) {
+ priority = 10000;
+ }
+ func.priority = priority;
+ for (var i = 0; i < this.length; ++i) {
+ if (this.array[i] == null) {
+ this.array[i] = func;
+ return;
+ }
+ }
+ this.array.push(func);
+ this.needSort = true;
+ },
+ // 配列を取得する
+ getArray: function () {
+ return this.array;
+ },
+ // タスクをクリアする
+ clear: function () {
+ this.array.length = 0;
+ },
+ // ソートが必要かチェックし、ソートする
+ checkSort: function () {
+ if (this.needSort) {
+ this.array.sort(function (a, b) { return a.priority > b.priority; });
+ needSort = false;
+ }
+ }
+ };
+
+ var tasks = new Tasks();
+ var img = new Image();
+
+
+ // ロード時処理
+ $(window).ready(function () {
+ ctx.fillStyle = "blue";
+ ctx.fillRect(0, 0, screenWidth, screenHeight);
+ ctx.fillStyle = "white";
+ ctx.font = "12px 'ＭＳ ゴシック'";
+ ctx.fillText("ワイヤーフレーム表示です。", 0, 20, 240);
+
+ // 開始ボタンをクリックした時の処理
+ $("#start").click(function () {
+ // renderTimerId = setInterval(render, 100);
+ tasks.pushTask(init);
+ tasks.pushTask(render, 65000);
+ mainTimerId = setTimeout(processMain, 50);
+ $("#stop")[0].disabled = false;
+ $("#start")[0].disabled = true;
+ });
+
+ // 停止ボタンをクリックしたときの処理
+ $("#stop").click(function () {
+ if (mainTimerId != undefined) {
+ clearTimeout(mainTimerId);
+ mainTimerId = undefined;
+ }
+
+ tasks.clear();
+
+ $("#stop")[0].disabled = true;
+ $("#start")[0].disabled = false;
+ });
+
+ // スクリーンショット
+ $("#ScreenShot").mousedown(function () {
+ this.href = $('#disp01')[0].toDataURL();
+ });
+
+ // キー入力処理
+ $(document).keydown(function (e) {
+
+ if (keyBuffer.length > 16) {
+ keyBuffer.shift();
+ }
+ keyBuffer.push(e.keyCode);
+ switch (e.keyCode) {
+ case 37:
+ keyCheck.left = true;
+ break;
+ case 38:
+ keyCheck.up = true;
+ break;
+ case 39:
+ keyCheck.right = true;
+ break;
+ case 40:
+ keyCheck.down = true;
+ break;
+ case 90:
+ keyCheck.z = true;
+ break;
+ }
+ });
+
+ $(document).keyup(function (e) {
+ switch (e.keyCode) {
+ case 37:
+ keyCheck.left = false;
+ break;
+ case 38:
+ keyCheck.up = false;
+ break;
+ case 39:
+ keyCheck.right = false;
+ break;
+ case 40:
+ keyCheck.down = false;
+ break;
+ case 90:
+ keyCheck.z = false;
+ break;
+ }
+
+ });
+
+ // 準備ができたので開始ボタンを押せるようにする
+ $("#start")[0].disabled = false;
+
+ // ソースコードの表示
+ $('#sourceList').text($('#script').text());
+ // SyntaxHighliterの実行
+ SyntaxHighlighter.all();
+ });
+
+ var r = 0;
+ var angle = 0;
+
+ // 描画処理
+ function render() {
+ angle+=1;
+
+ if (angle > 360) angle = 0;
+ ctx.fillStyle= "black";
+ ctx.fillRect(0, 0, screenWidth, screenHeight);
+ ctx.strokeStyle = "white";
+
+ var wMat = mat4.scale(mat4.identity(mat4.create()),mat3.create([0.5,0.5,0.5]));
+ mat4.rotateX(wMat, Math.PI * 2 * angle / 360); // Math.pi * 2 * (r / 360));
+ mat4.rotateY(wMat, Math.PI * 2 * angle / 360);
+ mat4.rotateZ(wMat, Math.PI * 2 * angle / 360);
+ var p2d = new Array(0);
+ for (var i = 0, e = cubeVertex.length; i < e; ++i) {
+ var vec = vec3.create();
+ mat4.multiplyVec3(wMat, cubeVertex[i], vec);
+ var z = vec[2] + 4.0;
+ p2d.push([screenWidth * vec[0] / z + screenWidth / 2, screenHeight * vec[1] / z + screenHeight / 2]);
+ }
+
+ //alert(p2d.join(","));
+
+ ctx.beginPath();
+ for (var i = 0, e = cubeDrawOrder.length; i < e; ++i) {
+ ctx.moveTo(p2d[cubeDrawOrder[i][0]][0],p2d[cubeDrawOrder[i][0]][1]);
+ ctx.lineTo(p2d[cubeDrawOrder[i][1]][0],p2d[cubeDrawOrder[i][1]][1]);
+ }
+ ctx.stroke();
+ }
+
+ // 処理メイン
+ // バックバッファの描画
+ var period = 0;
+ var ellapsedTime = 0;
+ var processCount = 0;
+
+ function processMain() {
+ var startTime = new Date().getTime();
+ processCount++;
+ // メインに描画
+ try {
+ tasks.checkSort();
+ $.each(tasks.getArray(),function (taskIndex) {
+ if (this != null) {
+ this(taskIndex);
+ }
+ }
+ );
+ } catch(e) {
+ ExitError(e);
+ }
+ //render();
+ //ctx.fillStyle = "black";
+ var endTime = new Date().getTime();
+ ellapsedTime = endTime - startTime;
+ period = 33 - (ellapsedTime) % 33;
+ mainTimerId = setTimeout(processMain, period);
+ }
+
+ // 初期化タスク
+ function init(taskIndex) {
+ tasks.pushTask(erase, 0);
+ tasks.setNextTask(taskIndex, addCount,65000);
+ }
+
+ function erase() {
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, screenWidth, screenHeight);
+ }
+
+
+ // エラーで終了する。
+ function ExitError(e) {
+ clearTimeout(mainTimerId);
+ ctx.fillStyle = "red";
+ ctx.fillRect(0, 0, screenWidth, screenHeight);
+ ctx.fillStyle = "white";
+ ctx.fillText("Error : " + e, 0, 20);
+ render();
+ throw e;
+ }
+
+ // 処理時間を表示する。
+ function addCount() {
+ ctx.fillStyle = "white";
+ var txt = "Process Time: " + ellapsedTime + "ms";
+ ctx.fillText(txt,0,20);
+ }
+
+
+</script>
+<div style="margin-left:auto;margin-right:auto;width:800px;" >
+<h4>ソースコード</h4>
+<pre id="sourceList" class="brush:js;" >
+</pre>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title>HTML5 Test</title>
+<meta name="description" content="HTML5 canvas" />
+<meta name="keywords" content="HTML5,canvas" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+ <script src="../scripts/glMatrix.js" type="text/javascript"></script>
+ <link rel="stylesheet" href="http://sfpg.seesaa.net/styles-index.css" type="text/css" />
+<link type="text/css" rel="stylesheet" href="http://sfpg.up.seesaa.net/styles/shCore.css"/>
+<link type="text/css" rel="stylesheet" href="http://sfpg.up.seesaa.net/styles/shThemeDefault.css"/>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shCore.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shLegacy.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushCpp.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushJScript.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushXml.js"></script>
+<script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/shBrushCSharp.js"></script>
+ <style type="text/css">
+ #disp01 {margin:10px;}
+ body {margin:auto;width:800px;font-size:10pt;};
+ </style>
+<script type="text/javascript" src="../scripts/jquery-1.4.4.min.js"></script>
+<script type="text/javascript">
+//if(location.search.indexOf("frame=true") == -1){
+// var _gaq = _gaq || [];
+// _gaq.push(['_setAccount', 'UA-15457703-1']);
+// _gaq.push(['_setDomainName', '.seesaa.net']);
+// _gaq.push(['_trackPageview']);
+
+// (function () {
+// var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+// ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+// var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+// })();
+//}
+//</script>
+<script type="text/javascript">
+</script>
+</head>
+<body>
+<div id="div001">
+<canvas id="disp01" width="480" height="400" ></canvas>
+</div>
+<div>
+<button type="button" id="start" disabled="true">開始</button>
+<button type="button" id="stop" disabled="true" >停止</button>
+<a href="" id="ScreenShot" target="_blank">画面ショット</a>
+</div>
+<script id="script" type="text/javascript">
+
+ var ctx = $("#disp01")[0].getContext("2d");
+ var screenWidth = $("#disp01")[0].width;
+ var screenHeight = $("#disp01")[0].height;
+
+ /// アスペクト比
+ var aspectRatio = screenWidth / screenHeight;
+ var keyCheck = {up:false,down:false,left:false,right:false,z:false};
+ var mainTimerId = undefined;
+ var keyBuffer = Array(0);
+
+ //
+ //
+ //
+// function MatxMat(mat1,mat2)
+// {
+// return new Mat3D(
+// mat1.m11 * mat2.m11,
+// );
+// }
+
+// y z
+// | /
+// |/___x
+
+ // 立方体のローカル座標
+ var cubeVertex =
+ [ vec3.create([-1,-1,-1]), vec3.create([1, -1, -1]), vec3.create([1, 1, -1]),vec3.create([-1, 1, -1]),
+ vec3.create([-1, -1, 1]), vec3.create([1, -1, 1]), vec3.create([1, 1, 1]),vec3.create([-1, 1, 1]) ];
+
+ // 結ぶ線の情報
+ var cubeDrawOrder = [[0, 1], [1, 2], [2, 3], [3, 0], [4, 5], [5, 6], [6, 7], [7, 4], [0, 4], [1, 5], [2, 6], [3, 7]];
+
+ // コンストラクタ
+ function Tasks() {
+ this.array = new Array(0);
+ this.needSort = false;
+ return this;
+ }
+
+ Tasks.prototype = {
+ // indexの位置のタスクを置き換える
+ setNextTask: function (index, func, priority) {
+ if (priority == undefined) {
+ priority = 10000;
+ }
+ func.priority = priority;
+ this.array[index] = func;
+ this.needSort = true;
+ },
+
+ pushTask: function (func, priority) {
+ if (priority == undefined) {
+ priority = 10000;
+ }
+ func.priority = priority;
+ for (var i = 0; i < this.length; ++i) {
+ if (this.array[i] == null) {
+ this.array[i] = func;
+ return;
+ }
+ }
+ this.array.push(func);
+ this.needSort = true;
+ },
+ // 配列を取得する
+ getArray: function () {
+ return this.array;
+ },
+ // タスクをクリアする
+ clear: function () {
+ this.array.length = 0;
+ },
+ // ソートが必要かチェックし、ソートする
+ checkSort: function () {
+ if (this.needSort) {
+ this.array.sort(function (a, b) { return a.priority > b.priority; });
+ needSort = false;
+ }
+ }
+ };
+
+ var tasks = new Tasks();
+ var img = new Image();
+
+
+ // ロード時処理
+ $(window).ready(function () {
+ ctx.fillStyle = "blue";
+ ctx.fillRect(0, 0, screenWidth, screenHeight);
+ ctx.fillStyle = "white";
+ ctx.font = "12px 'ＭＳ ゴシック'";
+ ctx.fillText("ワイヤーフレーム表示です。", 0, 20, 240);
+
+ // 開始ボタンをクリックした時の処理
+ $("#start").click(function () {
+ // renderTimerId = setInterval(render, 100);
+ tasks.pushTask(init);
+ tasks.pushTask(render, 65000);
+ mainTimerId = setTimeout(processMain, 50);
+ $("#stop")[0].disabled = false;
+ $("#start")[0].disabled = true;
+ });
+
+ // 停止ボタンをクリックしたときの処理
+ $("#stop").click(function () {
+ if (mainTimerId != undefined) {
+ clearTimeout(mainTimerId);
+ mainTimerId = undefined;
+ }
+
+ tasks.clear();
+
+ $("#stop")[0].disabled = true;
+ $("#start")[0].disabled = false;
+ });
+
+ // スクリーンショット
+ $("#ScreenShot").mousedown(function () {
+ this.href = $('#disp01')[0].toDataURL();
+ });
+
+ // キー入力処理
+ $(document).keydown(function (e) {
+
+ if (keyBuffer.length > 16) {
+ keyBuffer.shift();
+ }
+ keyBuffer.push(e.keyCode);
+ switch (e.keyCode) {
+ case 37:
+ keyCheck.left = true;
+ break;
+ case 38:
+ keyCheck.up = true;
+ break;
+ case 39:
+ keyCheck.right = true;
+ break;
+ case 40:
+ keyCheck.down = true;
+ break;
+ case 90:
+ keyCheck.z = true;
+ break;
+ }
+ });
+
+ $(document).keyup(function (e) {
+ switch (e.keyCode) {
+ case 37:
+ keyCheck.left = false;
+ break;
+ case 38:
+ keyCheck.up = false;
+ break;
+ case 39:
+ keyCheck.right = false;
+ break;
+ case 40:
+ keyCheck.down = false;
+ break;
+ case 90:
+ keyCheck.z = false;
+ break;
+ }
+
+ });
+
+ // 準備ができたので開始ボタンを押せるようにする
+ $("#start")[0].disabled = false;
+
+ // ソースコードの表示
+ $('#sourceList').text($('#script').text());
+ // SyntaxHighliterの実行
+ SyntaxHighlighter.all();
+ });
+
+ var r = 0;
+
+ // 描画処理
+ function render() {
+ r++;
+
+ if(r > 360) r = 0;
+
+ // ローカル座標からワールド座標
+ var trans
+ var wMat =
+ mat4.multiply(mat4.rotate(mat4.scale(mat4.identity(mat4.create()),mat3.create([1,1,1])),Math.pi * 0.5,vec3.create([0,0,0])),);
+ // ビュー座標
+ // 透視変換
+ // スクリーン座標に変換
+ // 描画
+ }
+
+ // 処理メイン
+ // バックバッファの描画
+ var period = 0;
+ var ellapsedTime = 0;
+ var processCount = 0;
+
+ function processMain() {
+ var startTime = new Date().getTime();
+ processCount++;
+ // メインに描画
+ try {
+ tasks.checkSort();
+ $.each(tasks.getArray(),function (taskIndex) {
+ if (this != null) {
+ this(taskIndex);
+ }
+ }
+ );
+ } catch(e) {
+ ExitError(e);
+ }
+ //render();
+ //ctx.fillStyle = "black";
+ var endTime = new Date().getTime();
+ ellapsedTime = endTime - startTime;
+ period = 33 - (ellapsedTime) % 33;
+ mainTimerId = setTimeout(processMain, period);
+ }
+
+ // 初期化タスク
+ function init(taskIndex) {
+ tasks.pushTask(erase, 0);
+ tasks.setNextTask(taskIndex, addCount,65000);
+ }
+
+ function erase() {
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, screenWidth, screenHeight);
+ }
+
+
+ // エラーで終了する。
+ function ExitError(e) {
+ clearTimeout(mainTimerId);
+ ctx.fillStyle = "red";
+ ctx.fillRect(0, 0, screenWidth, screenHeight);
+ ctx.fillStyle = "white";
+ ctx.fillText("Error : " + e, 0, 20);
+ render();
+ throw e;
+ }
+
+ // 処理時間を表示する。
+ function addCount() {
+ ctx.fillStyle = "white";
+ var txt = "Process Time: " + ellapsedTime + "ms";
+ ctx.fillText(txt,0,20);
+ }
+
+
+</script>
+<div style="margin-left:auto;margin-right:auto;width:800px;" >
+<h4>ソースコード</h4>
+<pre id="sourceList" class="brush:js;" >
+</pre>
+</div>
+</body>
+</html>
OSDN Git Service
