Full version: jsB@nk » 3D » 3D Beziér Curve
URL: https://www.javascriptbank.com/examples-beziercube3d.html
This JavaScript code create a molecube can spin and move by bounding.
Full version: jsB@nk » 3D » 3D Beziér Curve
URL: https://www.javascriptbank.com/examples-beziercube3d.html
<SCRIPT language=javascript>/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/<!-- //====================================\\// 13thParallel.org Beziér Curve Code \\// by Dan Pupius (www.pupius.net) \\//====================================\\coord = function (x,y) { if(!x) var x=0; if(!y) var y=0; return {x: x, y: y}; }B1 = function(t) { return (t*t*t); }B2 = function(t) { return (3*t*t*(1-t)); } B3 = function(t) { return (3*t*(1-t)*(1-t)); }B4 = function(t) { return ((1-t)*(1-t)*(1-t)); }function getBezier(percent,C1,C2,C3,C4) {var pos = new coord();pos.x = C1.x * B1(percent) + C2.x * B2(percent) +C3.x * B3(percent) + C4.x * B4(percent);pos.y = C1.y * B1(percent) + C2.y * B2(percent) + C3.y * B3(percent) + C4.y * B4(percent);return pos; }// --></SCRIPT><SCRIPT language=javascript><!-- //====================================\\// 13thParallel.org Beziér Curve Code \\// by Dan Pupius (www.pupius.net) \\// \\// modified 2002 by Till Nagel \\// (www.netzministerium.de) \\//====================================\\// Control Points/*P1 = coord(50,300);P2 = coord(50,50);P3 = coord(300,50);P4 = coord(300,300);*/P1 = coord(-150,50);P2 = coord(-150,-200);P3 = coord(100,-200);P4 = coord(100,50);// Control points to find non-linear point on other curveQ1 = coord(0,0);Q2 = coord(0.2,0.8);Q3 = coord(0.8,0.2);Q4 = coord(1,1);var stage=0.5;var dir=0;function doCurve() {//change direction of motion at each end of the curveif(stage>1) dir=1;if(stage<0) dir=0;//increment to next stepif(dir==0) stage+=0.01;else stage-=0.01;//Use a bezier curve to find out where we should be on the other//one - makes it non-linear and appear like a bouncing ballvar speed = getBezier(stage,Q1,Q2,Q3,Q4);//find position on bezier curvevar curpos = getBezier(speed.y,P1,P2,P3,P4);// sets matrix to move the helper model withvar moveMatrix = new Matrix();moveMatrix.translate(Math.round(curpos.x), Math.round(curpos.y), 0);//status = "x=" + Math.floor(curpos.x) + ", y=" + Math.floor(curpos.y);// returns the matrix for transformationreturn moveMatrix;}// --></SCRIPT><SCRIPT language=javascript><!-- // (c) 2002 Till Nagel, [email protected] & Rene Sander, [email protected]// ---------------------------------------------------------------------------// creates the helper point to move along the bezier curve// this model is invisible and will be never drawnvar hModel = new Model("helper", new Material(''));hModel.setPoints( new Array(new Point3D(0, 0, 0, 0)) );// creates cube model with name and (a simple) materialvar cubeModel = new Model("cube", createColorRectMaterial(new Color("000000"), new Color("ffffff"), "images/space.gif"));// defines model points.cubeModel.setPoints(createCubeModelPoints());cubeModel.linkTo(hModel);// ---------------------------------------------------------------------------// the matrix to transform the model withvar staticRotationMatrix = new Matrix();staticRotationMatrix.rotateX(0.05);staticRotationMatrix.rotateY(0.1);// ---------------------------------------------------------------------------function initOnLoad() {fixNetscape();// assign layer (only for Netscape 4.x, for all other browsers// this is done automatically when writing the point code)cubeModel.assignLayers();// creates and inits matrix to initialize the modelvar initMatrix = new Matrix();initMatrix.scale(50, 50, 50);// >> begin to work with the model etc.// initializes modelcubeModel.transform(initMatrix);// >> first draw of the model (recommended)cubeModel.draw();// starts animationanimate();}/* * The main animate method. Calls itself repeatedly. */function animate() {var delay = 10;// animates cube model ----------------------------------------// saves current model positionhModel.storePointValues();// moves the helper modelvar m = doCurve();hModel.transform(m);// rotates the cubecubeModel.transform(staticRotationMatrix);// updates displaycubeModel.draw();// reloads the model position hModel.restorePointValues();// calls itself with an delay to decouple client computer speed from the animation speed.// result: the animation is as fast as possible.setTimeout("animate()", delay);}// ---------------------------------------------------------------------------function createCubeModelPoints() {// the cube modelreturn new Array(// Point3D( x, y, z, m)new Point3D( 1, 1, 1, 0),new Point3D( 1, 1, -1, 0),new Point3D( 1, -1, 1, 0),new Point3D( 1, -1, -1, 0),new Point3D(-1, 1, 1, 0),new Point3D(-1, 1, -1, 0),new Point3D(-1, -1, 1, 0),new Point3D(-1, -1, -1, 0));}// --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=initOnLoad()><!-- layer to bugfix netscape --><DIV id=fixnetscape style="VISIBILITY: hidden; POSITION: absolute"></DIV><SCRIPT language=JavaScript type=text/javascript><!-- cubeModel.createPointCode();// --></SCRIPT></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/3d/js/LyrObj.jshttp://javascriptbank.com/javascript/3d/js/3dhtml.jshttp://javascriptbank.com/javascript/3d/js/ColorUtil.jshttp://javascriptbank.com/javascript/3d/js/materials.js