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) _
student-canvas-CD01.txt / txt

  <html>
  <head>
  
  <script type="text/javascript" src="student-canvas-article.js"></script>
  
  <script type="text/javascript">
  
  var env;
  var ctx;
  var shapeA, shapeB;
  var skeletonA, skeletonB;
  var dt = 0.05;
  var width, height;
  var tempVector;
  var selectPointmass;
  var zeroForce = new Vector(0.0, 0.0);
  var keyboardForce = new Vector(0.0, 0.0);
  var gravity = new Vector(0.0, 1.0);
  var savedMouseCoords = null;
  
  function timeout() {
          var x;
          
          if(selectPointmass != null && savedMouseCoords != null)
                  selectPointmass.setPos(savedMouseCoords.x, savedMouseCoords.y);
  
          for(x in shapeA) {
                  shapeA[x].addForce(gravity);
                  shapeA[x].move(dt);
                  shapeA[x].setForce(zeroForce);
                  
                  if(env.collision(shapeA[x].getPos(), shapeA[x].getPrevPos()) == true) {
                          shapeA[x].setFriction(0.8);
                  }
                  else {
                          shapeA[x].setFriction(0.01);
                  }
          }
          
          for(x in shapeB) {
                  shapeB[x].addForce(gravity);
                  shapeB[x].move(dt);
                  shapeB[x].setForce(zeroForce);
                  
                  if(env.collision(shapeB[x].getPos(), shapeB[x].getPrevPos()) == true) {
                          shapeB[x].setFriction(0.8);
                  }
                  else {
                          shapeB[x].setFriction(0.01);
                  }
          }
  
          
          for(x in skeletonA) {
                  skeletonA[x].sc();
          }
          
          for(x in skeletonB) {
                  skeletonB[x].sc();
          }
    
  
          ctx.clearRect(0, 0, width, height);
          env.draw(ctx, width);
    
            for(x in skeletonA) {
                  skeletonA[x].draw(ctx, width);
          }
          
          for(x in skeletonB) {
                  skeletonB[x].draw(ctx, width);
          }
          
          for(x in shapeA) {
                  shapeA[x].draw(ctx, width);
          }
          
          for(x in shapeB) {
                  shapeB[x].draw(ctx, width);
          }
          
    setTimeout('timeout()', 30);
  }
  
  function initCD01(aWidth, aHeight)
  {
      var canvas = document.getElementById('CD01');
      var x;
      ctx = canvas.getContext('2d');
  
      width = aWidth;
      height = aHeight;
      tempVector = new Vector(0.0, 0.0);
      selectPointmass = null;
  
      env = new Environment(0.15, 0.15, 0.70, 0.70);
      
          shapeA = new Array();
          shapeB = new Array();
          skeletonA = new Array();
          skeletonB = new Array();
          
      shapeA[0] = new PointMass(0.3, 0.1, 1.0);
      shapeA[1] = new PointMass(0.3, 0.3, 1.0);
      shapeA[2] = new PointMass(0.4, 0.2, 1.0);
          
      shapeB[0] = new PointMass(0.5, 0.4, 1.0);
      shapeB[1] = new PointMass(0.3, 0.5, 1.0);
      shapeB[2] = new PointMass(0.7, 0.6, 1.0);
  
      skeletonA[0] = new Joint(shapeA[0], shapeA[1], 1.0, 1.0);
      skeletonA[1] = new Joint(shapeA[1], shapeA[2], 1.0, 1.0);
      skeletonA[2] = new Joint(shapeA[2], shapeA[0], 1.0, 1.0);
  
      skeletonB[0] = new Joint(shapeB[0], shapeB[1], 1.0, 1.0);
      skeletonB[1] = new Joint(shapeB[1], shapeB[2], 1.0, 1.0);
      skeletonB[2] = new Joint(shapeB[2], shapeB[0], 1.0, 1.0);
  
      function getMouseCoords(event)
      {
        if(event == null)
          event = window.event;
        if(event == null)
          return null;
        if(event.pageX || event.pageY)
          return {x:event.pageX / width, y:event.pageY / width};
        return null;
      }
      document.onmousedown = function(event)
      {
        var mouseCoords;
  
        mouseCoords = getMouseCoords(event);
        savedMouseCoords = mouseCoords;
        if(mouseCoords == null)
          return;
  
        tempVector.setX(mouseCoords.x);
        tempVector.setY(mouseCoords.y);
  
        for(x in shapeA) {
           if(tempVector.dist(shapeA[x].getPos()) < 0.1) {
              selectPointmass = shapeA[x];
           }
        }
        
        for(x in shapeB) {
           if(tempVector.dist(shapeB[x].getPos()) < 0.1) {
              selectPointmass = shapeB[x];
           }
        }   
      }
      document.onmouseup = function(event)
      {
        selectPointmass = null;
      }
      document.onmousemove = function(event)
      {
        var mouseCoords;
  
        mouseCoords = getMouseCoords(event);
        savedMouseCoords = mouseCoords;
      }
  
      timeout();
  }
  
  </script>
  
  </head>
  
  <body onLoad="initCD01(500, 500)">
  
  <canvas id="CD01" width="500" height="500"></canvas>
  <br>
  <br>
  Use mouse to move individual pointmasses.<br>
  </body>
  </html>
[] 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) _
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.