topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

#js-heart.cfg / cfg


  <!--

author(s)


  /*
   * 3dhtml Example :: Heart3D
   * http://3dhtml.netzministerium.de
   * Version 1.0, 20/11/2001
   * 
   * Copyright (c) 2001 by Netzministerium.de
   * Written by Till Nagel and Ren� Sander.
   * Distributed under the terms of the GNU Lesser General Public.
   * (See http://3dhtml.netzministerium.de/licence.txt for details)
   */
  -->

lib(s)


  <!-- helper libs -->
  <script language="JavaScript" src="local/3dhtml/js/LyrObj.js"></script>
  <script language="JavaScript" src="local/3dhtml/js/ClipButton.js"></script>
  <!-- core 3dhtml lib -->
  <script language="JavaScript" src="local/3dhtml/js/3dhtml.js"></script>
  <!-- mouse scale modulator -->
  <script language="JavaScript" type="text/javascript" src="local/3dhtml/js/MouseModulator.js"></script>
  <script language="JavaScript" src="local/3dhtml/js/HeartBeatModulator.js"></script>
  <!-- Color Utils for the points -->
  <script language="JavaScript" src="local/3dhtml/js/ColorUtil.js"></script>
  <!-- ColorRectMaterial -->
  <script language="JavaScript" src="local/3dhtml/js/materials.js"></script>
  <script language="javascript">
  <!-- // (c) 2001 Till Nagel, till@netzministerium.de & Rene Sander, rene@netzministerium.de

material(s)


  
  var redBallCBMAterial = createClipButtonMaterial("local/3dhtml/examples/images/balls.gif", 20, 180, 20, 20, 9);
  var blueBallCBMAterial = createClipButtonMaterial("local/3dhtml/examples/images/balls_blue.gif", 20, 180, 20, 20, 9);

model(s)


  
  // creates heart model with red balls
  var heartModel = new Model("heart", redBallCBMAterial);
  
  // defines model points.
  // The model's points have to be defined before the respective code is written into the document.
  heartModel.setPoints(createHeartModelPoints());

shadow(s)


  
  // creates heart shadow model with gray balls
  var heartShadowModel = new Model("heartShadow", blueBallCBMAterial);
  
  // defines model points.
  heartShadowModel.setPoints(createHeartModelPoints());

modulator(s)


  
  // modulator to rotate the model dependent on mouse interactions
  var myMouseModulator = new MouseModulator("myMouseModulator");
  // modulator to change the size of the model dependent on sin()
  var myHeartBeatModulator = new HeartBeatModulator(15);

onload(s)


  
  // the matrix to transform the heart into its shadow 
  var reflectionMatrix = new Matrix();
  
  function initOnLoad() {
   fixNetscape();
   // >> begin to work with the model etc.
  
   heartModel.assignLayers();
   heartShadowModel.assignLayers();
   
   
   //OFFSET_Y_3DHTML = 180;
   // inits reflectionMatrix 
   // reflectionMatrix.translate(0, -300, 0);
   reflectionMatrix.translate(0, -200, 0);
   reflectionMatrix.scale(0.7, 0.7, -1);
   reflectionMatrix.rotateX(Math.PI);
   
   // creates and inits matrix to initialize the model
   var initMatrix = new Matrix();
   initMatrix.scale(20, 20, 20);
   initMatrix.rotateX(Math.PI);
   
   // transforms heart (and shadow) model
   heartModel.transform(initMatrix);
  
   
   // copies the current positions of the points from the heart model
   heartShadowModel.copyPointsFrom(heartModel);
   // transforms the heart as it is its own shadow
   heartShadowModel.transform(reflectionMatrix);
    
   // >> first draw call to the model
   heartModel.draw();
   heartShadowModel.draw();
   
   // starts animation
   animate();
  }
  
  // try: used to store all heartBeat scale transformations
  // to undo them. (OpenGL technique)
  var heartBeatStackMatrix = new Matrix();

animate(s)


  
  /*
   * The main animate method. Calls itself repeatedly.
   */
  function animate() {
   var delay = 10;
   
   // animates the modulator to spin the heart
   myMouseModulator.animate();
   
   // animates the modulator to beat the heart
   myHeartBeatModulator.animate();
  
   
   // animates HeartModel ----------------------------------------
  
   // transforms the heart depending on mouse movements
   //  and on heart beat function
   var myMatrix = myMouseModulator.getMatrix();
   myMatrix.compose(myHeartBeatModulator.getMatrix());
   heartModel.transform(myMatrix);
  
   // updates display
   heartModel.draw();
   
   
   // animates HeartShadowModel ----------------------------------------
   
   // copies the current positions of the points from the heart model
   heartShadowModel.copyPointsFrom(heartModel);
   // transforms the heart as it is its own shadow
   heartShadowModel.transform(reflectionMatrix);
  
   // updates display
   heartShadowModel.draw();
  
   
   // 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);
  }

event(s)


  
  // event handling
  document.onmousemove = mouseMoveHandler;
  document.onmousedown = mouseDownHandler;
  document.onmouseup = mouseUpHandler;
  if (ns) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);
  
  /*
   * The mouse handlers in this document must call the modulator's handlers.
   * To be able to use a mouse modulator and to do your own stuff.
   */
  function mouseMoveHandler(e) {
  
   // calls move handler of the mouse modulator
   myMouseModulator.move(e);
  
   /*
   // other stuff, e.g.
   if (ns || ie) {
     mouseX = (ns) ? e.pageX : event.x;
     mouseY = (ns) ? e.pageY : event.y;
   }
   */
  
   return !ie;
  }
    
  function mouseDownHandler(e) {
   // calls down handler of the mouse modulator
   myMouseModulator.down(e);
  }
  
  function mouseUpHandler(e) {
   // calls up handler of the mouse modulator
   myMouseModulator.up(e);
  }

create(s)


  
  function createHeartModelPoints() {
   // the heart model
   return new Array(
    new Point3D(0.0, 3.0, 1.0, 0),
    new Point3D(1.0, 4.0, 1.0, 0),
    new Point3D(2.4, 4.2, 1.5, 0),
    new Point3D(3.75, 3.5, 2.0, 0),
    new Point3D(3.7, 1.5, 2.0, 0),
    new Point3D(2.0, -2.0, 1.5, 0),
    new Point3D(0.0, -4.0, 0.5, 0),
    
    new Point3D(-0.0, 3.0, 1.0, 0),
    new Point3D(-1.0, 4.0, 1.0, 0),
    new Point3D(-2.4, 4.2, 1.5, 0),
    new Point3D(-3.75, 3.5, 2.0, 0),
    new Point3D(-3.7, 1.5, 2.0, 0),
    new Point3D(-2.0, -2.0, 1.5, 0),
    new Point3D(-0.0, -4.0, 0.5, 0),
    
    new Point3D(0.0, 3.0, -1.0, 0),
    new Point3D(1.0, 4.0, -1.0, 0),
    new Point3D(2.4, 4.2, -1.5, 0),
    new Point3D(3.75, 3.5, -2.0, 0),
    new Point3D(3.7, 1.5, -2.0, 0),
    new Point3D(2.0, -2.0, -1.5, 0),
    new Point3D(0.0, -4.0, -0.5, 0),
    
    new Point3D(-0.0, 3.0, -1.0, 0),
    new Point3D(-1.0, 4.0, -1.0, 0),
    new Point3D(-2.4, 4.2, -1.5, 0),
    new Point3D(-3.75, 3.5, -2.0, 0),
    new Point3D(-3.7, 1.5, -2.0, 0),
    new Point3D(-2.0, -2.0, -1.5, 0),
    new Point3D(-0.0, -4.0, -0.5, 1)
   );
  }
  
  // -->
  </script>

init(s)


  
  <script language="JavaScript" type="text/javascript">
  <!-- // (c) 2001 Till Nagel, till@netzministerium.de & Rene Sander, rene@netzministerium.de

insert


  
  // MANDATORY: INSERTION OF HTML PART INTO PAGE
  // creates the HTML code representing the model's points
  // NB: This is written directly into the page from within the method 
  
  heartModel.createPointCode();
  
  heartShadowModel.createPointCode();
  initOnload();
  // -->
  </script>

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.