products/Sources/formale Sprachen/C/Firefox/build/pgo/js-input/3d-thingy.html
<html >
<head >
<title >3 d thingy</title >
<style type="text/css" >
div .z2 { position:absolute; z-index:2 ; }
div .z1 { position:absolute; z-index:1 ; }
</style >
<script type="text/javascript" >
/**************************************************************************
JavaScript Graphics Library 0 .0 .1 , Updated Source Code at Scriptersoft.com
Copyright (C) 2005 Kurt L. Whicher
November,13 ,2005
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2 .1 of the License, or (at your option ) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details .
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110 -1301 USA
**************************************************************************/
//________________________________________ global variables
var S_piDoubled=Math.PI*2 ;
var S_deg2Rad=Math.PI/180 ;
//_______________________________________________ functions
function S_matrix() {
return [1 ,0 ,0 ,0 ,
0 ,1 ,0 ,0 ,
0 ,0 ,1 ,0 ,
0 ,0 ,0 ,1 ];
}
function S_vec2D(x,y) { this.x=x; this.y=y; }
function S_vec3D(x,y,z) { this.x=x; this.y=y; this.z=z; }
function S_subVec2D(a,b) {
return new S_vec2D(a.x-b.x, a.y-b.y);
}
function S_subVec3D(a,b) {
return new S_vec3D(a.x-b.x, a.y-b.y, a.z-b.z);
}
function S_dotVec3D(a, b) { return a.x*b.x+a.y*b.y+a.z*b.z; }
function S_cross(a,b) {
return new S_vec3D( a.y*b.z-a.z*b.y, a.z*b.x-a.x*b.z, a.x*b.y-a.y*b.x);
}
function S_lengthSquaredVec3D(v) { return S_dotVec3D(v,v); }
function S_lengthVec3D(v) { return Math.sqrt(S_lengthSquaredVec3D(v)); }
function S_normalizeVec3D(v) {
var l=S_lengthVec3D(v), nv=new S_vec3D(0 ,0 ,0 );
if(l!=0 ) { nv.x=v.x/l; nv.y=v.y/l; nv.z=v.z/l; }
return nv;
}
function S_rotate(m,ax,a) { // transformation matrix, axis, angle
var i,j,ij=new Array(),v=new Array(),c=Math.cos(a),s=Math.sin(a);
if (ax=="x" ) ij=[1 ,2 ,5 ,6 ,9 ,10 ,13 ,14 ];
else if (ax=="y" ) ij=[2 ,0 ,6 ,4 ,10 ,8 ,14 ,12 ];
else if (ax=="z" ) ij=[0 ,1 ,4 ,5 ,8 ,9 ,12 ,13 ];
for (i=0 ;i<8 ;i++) v[i]=m[ij[i]];
for (i=0 ,j=1 ;i<8 ;i+=2 ,j+=2 ) {
m[ij[i]]=v[i]*c-v[j]*s;
m[ij[j]]=v[i]*s+v[j]*c
}
}
function S_checkBrowser() {
if (document.getElementById) return true; else return false;
}
function S_zIndex(e,z) { document.getElementById(e).style .zIndex=z; }
function S_rgbColor(r,g,b) {
var i, c=[r,g,b];
for(i=0 ; i<3 ; i++) {
c[i]=Math.floor(c[i]);
if(c[i]<0 ) c[i]=0 ; else if(c[i]>255 ) c[i]=255 ;
}
return c;
}
function S_rgbColorString(c) {
return "rgb(" +c[0 ]+"," +c[1 ]+"," +c[2 ]+")" ;
}
function S_vertice(x,y,z) {
this.x=x; this.y=y; this.z=z; this.w=1 ;
this.t=new S_vec3D(x,y,z); // transformed 3 d
this.p=new S_vec2D(0 ,0 ); // projected 2 d
}
function S_face(v0,v1,v2,c) { // 3 vertice faces
this.v=[v0,v1,v2]; this.c=c; this.b=0 ; // b:brightness
this.d=true; // display: true or false
}
// x coordinate, number of vertices, distance
function S_verticeRing(x,nv,d) {
var i,a,v=new Array();
for(i=0 ;i<nv;i++) {
a=S_piDoubled*i/nv;
v[i]=new S_vertice(x,d*Math.sin(a),d*Math.cos(a));
}
return v;
}
function S_triangleRing(r1,r2,c,clr) { // rows 1 & 2 , cols, color
var i,j,tr =new Array();
for(i=0 ,j=1 ;i<c;i++,j=++j%c) {
tr .push(new S_face(r1+i,r2+i,r2+j,clr));
tr .push(new S_face(r1+i,r2+j,r1+j,clr));
}
return tr ;
}
function S_model(v,f) {
// vertice & face arrays, transformation matrix, display boolean
this.v=v; this.f=f, this.tm=S_matrix(), this.d=true;
}
S_model.prototype.S_rotateX=function(a) {
S_rotate(this.tm,"x" ,a*=S_deg2Rad);
}
S_model.prototype.S_rotateY=function(a) {
S_rotate(this.tm,"y" ,a*=S_deg2Rad);
}
S_model.prototype.S_rotateZ=function(a) {
S_rotate(this.tm,"z" ,a*=S_deg2Rad);
}
S_model.prototype.S_show=function() { this.d=true; }
S_model.prototype.S_hide=function() { this.d=false; }
function S_cube(d,c) { //distance & color
return new S_cone(d,d,Math.cos(Math.PI/4 )*d*2 ,1 ,4 ,c);
}
function S_cylinder(w,h,r,c,clr,e) {
return new S_cone(w,w,h,r,c,clr,e);
}
// width, height, "rows" , "columns" , color, ends
function S_cone(w1,w2,h,r,c,clr,e) {
var i,r1=0 ,r2=c,v=new Array(),t=new Array(),rxc=r*c;
for(i=0 ;i<=r;i++)
v=v.concat(S_verticeRing(h*(0 .5 -i/r),c,w1*i/r+w2*(r-i)/r));
for(i=0 ;i<r;i++,r1+=c,r2+=c)
t=t.concat(S_triangleRing(r1,r2,c,clr));
if (e!="hideEnds" )
for(i=1 ;i<(c-1 );i++) {
t.push(new S_face(0 ,i,i+1 ,clr));
t.push(new S_face(rxc,rxc+i+1 ,rxc+i,clr));
}
return new S_model(v,t);
}
function S_sphere(d,r,c,clr) {
// distance, "rows" >=2 , "columns" >=3 , color paramaters
var v=new Array(),t=new Array(),r_1xc=(r-1 )*c,r_2xc=(r-2 )*c;
var i,j,tmp,r1=0 ,r2=c;
for(i=1 ;i<r;i++) {
tmp=Math.PI*i/r;
v=v.concat(S_verticeRing(d*Math.cos(tmp),c,Math.sin(tmp)*d));
}
v.push(new S_vertice( d,0 ,0 ));
v.push(new S_vertice(-d,0 ,0 ));
for(i=0 ;i<(r-2 );i++,r1+=c,r2+=c)
t=t.concat(S_triangleRing(r1,r2,c,clr));
for(i=0 ,j=1 ;i<c;i++,j=++j%c) {
t.push(new S_face(r_1xc,i,j,clr));
t.push(new S_face(r_1xc+1 ,r_2xc+j,r_2xc+i,clr));
}
return new S_model(v,t);
}
S_model.prototype.S_scale=function(x) {
this.tm[0 ]*=x; this.tm[5 ]*=x; this.tm[10 ]*=x;
}
S_model.prototype.S_faceColor=function(i,c) { this.f[i].c=c; }
S_model.prototype.S_scaleX=function(s) { this.tm[0 ]*=s; }
S_model.prototype.S_scaleY=function(s) { this.tm[5 ]*=s; }
S_model.prototype.S_scaleZ=function(s) { this.tm[10 ]*=s; }
function S_scene(dv,l,t,w,h,cmra) { // left, top, width, height
this.dv=dv;
this.ps=1 ; // pixel size
this.l=l; this.t=t; this.w=w; this.h=h;
this.cx=l+w/2 ; this.cy=t+h/2 ; // center x, center y
this.dt ="paint" ; // output type
this.m=new Array(); // model array
this.lght=new S_light();
this.lc=S_rgbColor(255 ,255 ,255 ); // light color
this.cmra=-cmra; // camera on z axis
this.bfr=S_buffer(h,w);
}
function S_buffer(h,w) {
var i, j, b=new Array();
for(i=0 ;i<h;i++) {
b[i]=new Array();
for(j=0 ;j<w;j++) b[i][j]=new S_pixel();
}
return b;
}
function S_pixel() { // display boolean, color
this.d=true; this.c=0 ;
}
S_pixel.prototype.S_setColor=function(c) {
this.d=true; this.c=c;
}
S_pixel.prototype.S_hide=function() { this.d=false; }
S_scene.prototype.S_pixelSize=function(ps){ this.ps=ps; }
S_scene.prototype.S_widthAndHeight=function(w,h){ this.w=w; this.h=h; }
S_scene.prototype.S_center=function(cx,cy){ this.cx=cx; this.cy=cy; }
S_scene.prototype.S_paint=function(){ this.dt ="paint" ; }
S_scene.prototype.S_models=function() {
var i; this.m=new Array();
for(i=0 ;i<arguments.length;i++) this.m.push(arguments[i]);
}
S_scene.prototype.S_lightColor=function(c){ this.lc=c; }
S_scene.prototype.S_project=function() {
var i, j, v, tm, d, m;
for(i=0 ;i<this.m.length;i++) {
m=this.m[i]; tm=this.m[i].tm;
for(j=0 ;j<m.v.length;j++) {
v=m.v[j];
v.t.x=v.x*tm[0 ]+v.y*tm[4 ]+v.z*tm[8 ]+v.w*tm[12 ];
v.t.y=v.x*tm[1 ]+v.y*tm[5 ]+v.z*tm[9 ]+v.w*tm[13 ];
v.t.z=v.x*tm[2 ]+v.y*tm[6 ]+v.z*tm[10 ]+v.w*tm[14 ];
d=(this.cmra-v.t.z/2 );
if (d<0 ) {
v.p.x=(this.cmra*v.t.x/d)+this.cx;
v.p.y=-(this.cmra*v.t.y/d)+this.cy;
}
}
}
}
S_scene.prototype.S_display=function(disp){
var i, j, k, s="" , ds, c, cnt=0 ; // ds:div start
this.tr =new Array(); // triangles ready to draw
this.S_project();
this.S_adjustLight();
this.S_clearBuffer();
for(i=0 ;i<this.m.length;i++) {
this.m[i].S_setupFaces(this.tr ,this.lght.t);
for(j=0 ;j<this.tr .length;j++) { // loop through triangles
c=S_divColor(this.tr [j].c,this.lc,this.tr [j].b);
S_setupBuffer(this,this.tr [j].p,c);
}
}
for(i=0 ;i<this.h;i++) {
ds=-1 ;
for(j=0 ,k=1 ;j<this.w;j++,k++) {
if((this.bfr[i][j].d==true)&&(ds==-1 )) ds=j;
if( (this.bfr[i][j].d==true)&&
( (k==this.w)||
(this.bfr[i][k].d==false)||
(!S_sameColor(this.bfr[i][j].c, this.bfr[i][k].c)) ) ) {
s+=S_divString(S_rgbColorString(this.bfr[i][j].c),this.t+i*this.ps,this.l+ds*this.ps,this.ps,(k-ds)*this.ps);
ds=-1 ;
cnt++;
}
}
}
S_writeInnerHTML(this.dv,s);
if(disp=="ShowCount" ) alert(cnt);
}
S_scene.prototype.S_displayAndShowCount=function(){
this.S_display("ShowCount" );
}
S_model.prototype.S_setupFaces=function(tr ,lght) {
var i, j, fn, v, p=new Array(); // vertice & projection arrays
var z=new Array();
for(i=0 ;i<this.f.length;i++) { // loop through faces
v=this.f[i].v;
for(j=0 ;j<3 ;j++) { p[j]=this.v[v[j]].p; }
for(j=0 ;j<3 ;j++) { z[j]=this.v[v[j]].t.z; }
if (((p[1 ].x-p[0 ].x)*(p[2 ].y-p[0 ].y))<((p[2 ].x-p[0 ].x)*(p[1 ].y-p[0 ].y))) {
this.f[i].d=true;
fn=S_faceNormal(this.v[v[0 ]].t, this.v[v[1 ]].t, this.v[v[2 ]].t);
this.f[i].b=S_faceIntensity(fn,lght);
tr .push(new S_triangle(fn,this.f[i].b,p.slice(),this.f[i].c,z));
} else { this.f[i].d=false; }
}
}
// normal, brightness, array of 2 D projection coordinates, and z depth
function S_triangle(fn,b,p,c,z) {
this.fn=fn; this.b=b; this.p=p; this.z=z; this.c=c;
}
function S_faceNormal(a,b,c){
var cr=S_cross(S_subVec3D(b,a), S_subVec3D(b,c));
return S_normalizeVec3D(cr);
}
function S_faceIntensity(fn,lght) {
var i=S_dotVec3D(fn,lght); return (i>0 )?i:0 ;
}
function S_divColor(c,lc,b) { // c:array of colors
var i, clr=new Array();
for(i=0 ;i<3 ;i++) clr[i]=Math.floor(c[i]+(lc[i]-c[i]+1 )*b);
for(i=0 ;i<3 ;i++) if (clr[i]>lc[i]) { clr[i]=lc[i]; }
return S_rgbColor(clr[0 ],clr[1 ],clr[2 ]);
}
function S_sameColor(a,b) {
for(var i=0 ;i<3 ;i++) { if(a[i]!=b[i]) return false; }
return true;
}
function S_setupBuffer(scn,p,c) {
// temp, counters, min, max, scanline, vertice & slope arrays
var t,i,j,xmin=new Array(),xmax=new Array(),sl;
var v=new Array(), m=new Array();
p.sort(function(a,b) { return a.y-b.y; } );
for(i=0 ;i<3 ;i++) p[i].y=Math.floor(p[i].y);
v[0 ]=S_subVec2D(p[1 ],p[0 ]);
v[1 ]=S_subVec2D(p[2 ],p[0 ]);
v[2 ]=S_subVec2D(p[2 ],p[1 ]);
for(i=0 ;i<3 ;i++) { m[i]=(v[i].y!=0 )?v[i].x/v[i].y:0 ; }
for(i=0 ,sl=scn.t;i<scn.h;i++,sl++) {
xmin[i]=1000 ;xmax[i]=0 ;
if((sl>=p[0 ].y)&&(sl<=p[2 ].y)) {
xmin[i]=xmax[i]=Math.floor(p[0 ].x+m[1 ]*(sl-p[0 ].y));
}
if((sl>=p[0 ].y)&&(sl<=p[1 ].y)) {
t=Math.floor(p[0 ].x+m[0 ]*(sl-p[0 ].y));
if(t<xmin[i]) xmin[i]=Math.floor(t);
else if(t>xmax[i]) xmax[i]=Math.floor(t);
}
if((sl>=p[1 ].y)&&(sl<=p[2 ].y)) {
t=Math.floor(p[1 ].x+m[2 ]*(sl-p[1 ].y));
if(t<xmin[i]) xmin[i]=Math.floor(t);
else if(t>xmax[i]) xmax[i]=Math.floor(t);
}
for(j=0 ;j<scn.w;j++)
if((j>=(xmin[i]-scn.l))&&(j<=(xmax[i]-scn.l))) {
scn.bfr[i][j].d=true; scn.bfr[i][j].c=c;
}
}
}
function S_light() {
this.x=0 ; this.y=1 ; this.z=0 ; this.w=1 ; // original coordinates
this.t=new S_vec3D(0 ,1 ,0 ); // transformed coordinates
this.tm=new S_matrix();
}
S_scene.prototype.S_adjustLight=function() {
var m=this.lght.tm, l=this.lght;
l.t.x=l.x*m[0 ]+l.y*m[4 ]+ l.z*m[8 ]+l.w*m[12 ];
l.t.y=l.x*m[1 ]+l.y*m[5 ]+ l.z*m[9 ]+l.w*m[13 ];
l.t.z=l.x*m[2 ]+l.y*m[6 ]+ l.z*m[10 ]+l.w*m[14 ];
l.t=S_normalizeVec3D(l.t);
}
S_scene.prototype.S_lightRotateX=function(a) {
S_rotate(this.lght.tm,"x" ,a*=S_deg2Rad);
}
S_scene.prototype.S_lightRotateY=function(a) {
S_rotate(this.lght.tm,"y" ,a*=S_deg2Rad);
}
S_scene.prototype.S_lightRotateZ=function(a) {
S_rotate(this.lght.tm,"z" ,a*=S_deg2Rad);
}
S_scene.prototype.S_clearBuffer=function() {
for(var i=0 ;i<this.h;i++)
for(var j=0 ;j<this.w;j++) this.bfr[i][j].d=false;
}
function S_divString(b,t,l,h,w) {
var s='<div style="background-color:' +b+';position:absolute;' ;
s+='top:' +t+'px;left:' +l+'px;height:' +h+'px;width:' +w;
return s+'px;font-size:0;visibility:visible"></div>' ;
}
function S_writeInnerHTML(id,text) {
document.getElementById(id).innerHTML = text;
}
</script >
</head >
<body >
<div class="z1" id="graphicsDiv" >Text to be replaced with graphics.</div >
<script type="text/javascript" >
if(S_checkBrowser()) {
var intrvl;
// Create a new scene with parameters for
// div id, left, top, width, height, and camera distance
var scn=new S_scene("graphicsDiv" ,75 ,25 ,100 ,100 ,300 );
scn.S_pixelSize(3 ); // set scene pixel size
var c=S_rgbColor(0 ,0 ,127 ); // color
var c2=S_rgbColor(0 ,127 ,127 ); // color
var m=new S_cube(18 ,c); // model
m.S_faceColor(4 ,c2);
m.S_faceColor(5 ,c2);
m.S_scaleX(2 .5 ); // scale model along x axis
scn.S_models(m); // add model(s) to scene
scn.S_lightRotateX(-25 ); // adjust light
function r(){ // rotation function
m.S_rotateX(11 ); // rotate model around y axis
m.S_rotateY(5 ); // rotate model around y axis
m.S_rotateZ(7 ); // rotate model around z axis
scn.S_display(); // display scene
} // end rotation function
intrvl=setInterval('r();' ,75 );
}
</script >
</body >
</html >
Messung V0.5 in Prozent C=98 H=90 G=94
¤ Dauer der Verarbeitung: 0.1 Sekunden
(vorverarbeitet am 2026-06-06)
¤
*© Formatika GbR, Deutschland