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-fire.cfg / cfg

global(s)


  <script language="javascript">
    var shadow = false;
    var func = 'window.frames["bufferFrame"].doMove();';
    function callLoader(){
      if(parent.loadSourceFinish)
        setTimeout("parent.loadSourceFinish(" + shadow + ",'" + func + "')",500);
    }
  </script>

init(s)

3D(s)


  
  <script>
  
   //Makes a 3D coordinate
   //===================================================================
   function Point(x,y,z) {
    this.x = x;
    this.y = y;
    this.z = z;   //if omit z value, just make point 2D
    return this;
   }
   
   //Makes a 3D vector A(x,y,z) -> B(x,y,z)
   //===================================================================
   function Vector(a,b,c) {
    this.a = a;    //Point
    this.b = b;
    this.c = c;
    return this;
   }
   
  
   //The points are projected onto the plane defined by the viewport vector
   var viewport = new Vector(new Point(-100,-100,-100),new Point(100,10,-100), new Point(50,50));
   //var viewport = new Vector(new Point(-200,-200,-200),new Point(200,20,-200), new Point(100,100));
  
   //The camera's position is used for calculating focal length and where
   //the points should be plotted on the viewport
   var camera = new Point(0,-90,-200);
   //var camera = new Point(0,-190,-200);
  
   
   //Set new camera position and redraw scene
   //===================================================================
   function setCamera(x,y,z) {
    camera.x = x;
    camera.y = y;
    camera.z = z;
    init(); 
   }
  
   function setViewport(x,y) {
    viewport.a.x = x;
    viewport.a.y = x;
    viewport.b.x = y;
    viewport.b.y = y;
    //document.getElementById("back").style.width = y-x;
    //document.getElementById("back").style.height = y-x;
   }

plot(s)


   //Plots a DIV at the correct position and resizes it
   //===================================================================
   function plotPoint(name, pos,age) {
    //Create objects for DIV
    obj = document.getElementById(name);
    css = document.getElementById(name).style;
    
    f = viewport.a.z - camera.z;  //Focal length
  
    //From ratios of a triangle get position of point relative to camera
    cy = (pos.y-camera.y) * f / (pos.z-viewport.a.z);  
    cx = (pos.x-camera.x) * f / (pos.z-viewport.a.z);
  
    //Position of point relative to viewport
    py = parseInt(camera.y + cy - viewport.a.y); 
    px = parseInt(camera.x + cx - viewport.a.x);
  
    if(pos.z > viewport.a.z && px > 0 && py > 0 && py < viewport.b.y - viewport.a.y && px < viewport.b.x - viewport.a.x) { 
     //Move object to correct position
     //alert("Moving " + name + " to (" + px + "," + py + ")");
     css.visibility = "";
     d = (150 - pos.z);
     css.backgroundColor = "rgb(" + (250-age) + "," + (200-age*2) + "," + (100-age) + ")";
     d /= 10000 / (viewport.b.x - viewport.a.x); //scale pixel to \%age of viepwort
     if(d<1) d=1;
     css.width = 3*d;
     css.height = 4*d;
     css.left = 200 + 2 * ( px - d/2 + viewport.c.x);
     css.top = -100 + 2 * ( 2 * py - d/2 + viewport.c.y);
     css.zIndex = (100 - pos.z) + 1000;
    } else {
     css.visibility = "hidden";  //on this side of the viewport so hide it
    }
   }

create(s)


  
   //Create a few objects to represent each point on the corner of the cube (messy!)
   var points = new Array(8);
   for(i=1; i<=40;i++) {
    points[i] = { name: "divPoint" + i,
         x: 0,
        y: 0,
        z: 0,
        r: 0,
        age: 200,
        a: Math.round(Math.random()*360),
        av: 5*(Math.round(Math.random()*2)-1),
        xStart: 0
            }
     //document.write("<div id=" + "divPoint" + i + " style=\"visibility: hidden; position: absolute;\" />");
   }
  
   v = 1;
   count = 1;
   var xOffset = 0;
   var xWind = 0;
   function doMove() {
    if(count <=30 && !paused) count+= 0.5;
    for(i=1;i<=count;i++) {
     a = degToRad(points[i].a);
     rotY = [[Math.cos(a),0,Math.sin(a),0],[0,1,0,0],[-Math.sin(a),0,Math.cos(a),0],[0,0,0,1]];
     rotX = [[1,0,0,0],[0,Math.cos(a),-Math.sin(a),0],[0,Math.sin(a),Math.cos(a),0],[0,0,0,1]];
     rotZ = [[Math.cos(a),-Math.sin(a),0,0],[Math.sin(a),Math.cos(a),0,0],[0,0,1,0],[0,0,0,1]];
      
     if(!paused) {
      points[i].a+=0.5*points[i].av;
      points[i].r+=0.015;
      if(points[i].a>360) points[i].a-=360; 
      points[i].age+=3;
      points[i].x += points[i].r;
      points[i].y -= v;
      points[i].xStart += xWind;
     }
     
     mat = [points[i].x,points[i].y,points[i].z,1];
     mat = matrixMultiply(mat,rotY);
     plotPoint(points[i].name, new Point(mat[0] + points[i].xStart,mat[1],mat[2]),points[i].age);
     if(points[i].age > 200) {
      points[i] = new Point(0,0,0);
      points[i].name = "divPoint" + i;
      points[i].a = Math.round(Math.random()*360);
      points[i].r = 0;
      points[i].age = 0
      points[i].av = 2*(Math.round(Math.random()*2)-1);
      points[i].xStart = xOffset;
     }
    }
    window.status = "Wind = " + Math.round(xWind*100)/100;
    setTimeout("doMove()",10);
   }

turn(s)


  
   var doTurn = false;
   function turn(amount) {
    xOffset += amount;
    if(xOffset>75) xOffset = 75;
    if(xOffset<-75) xOffset = -75;
    if(doTurn) setTimeout("turn(" + amount + ")",10);
   }

wind(s)


  
   var doWind = false;
   function wind(amount) {
    xWind += amount/2;
    if(xWind >5.5) xWind = 5.5;
    if(xWind <-5.5) xWind = -5.5;
    if(doWind) setTimeout("wind(" + amount + ")",10);
   }
  
   var paused = false;
   function pause() { paused = !paused }
  
   var pi = 3.14159265358979;  //pi to 15sf
   function degToRad(x) { return ( x/(360/(2*pi)) ); }
   function radToDeg(x) { return ( x*(360/(2*pi)) ); }

matrix


  
   function matrixMultiply(A,B) {
    var retVal = [0,0,0];
    for(var m=0;m<4;m++) {
     for(var n=0;n<4;n++)
      retVal[m] += A[n] * B[m][n]
    }
    return retVal;
   }
   
  </script>

point(s)


  
  <div id="divPoint1" style="visibility: hidden; position: absolute; top: 135.487px; left: 148.487px; width: 3.02671px; height: 3.02671px; background-color: rgb(208, 116, 58); font-size: 1px;"></div>
  <div id="divPoint2" style="visibility: hidden; position: absolute; top: 133.513px; left: 148.513px; width: 2.97304px; height: 2.97304px; background-color: rgb(211, 122, 61); font-size: 1px; z-index: 1100;"></div>
  <div id="divPoint3" style="visibility: hidden; position: absolute; top: 136.51px; left: 148.51px; width: 2.98023px; height: 2.98023px; background-color: rgb(217, 134, 67); font-size: 1px; z-index: 1100;"></div>
  <div id="divPoint4" style="visibility: hidden; position: absolute; top: 139.499px; left: 147.499px; width: 3.00281px; height: 3.00281px; background-color: rgb(223, 146, 73); font-size: 1px;"></div>
  <div id="divPoint5" style="visibility: hidden; position: absolute; top: 140.503px; left: 147.503px; width: 2.99396px; height: 2.99396px; background-color: rgb(229, 158, 79); font-size: 1px; z-index: 1100;"></div>
  <div id="divPoint6" style="visibility: hidden; position: absolute; top: 142.501px; left: 148.501px; width: 2.9981px; height: 2.9981px; background-color: rgb(235, 170, 85); font-size: 1px;"></div>
  <div id="divPoint7" style="visibility: hidden; position: absolute; top: 145.5px; left: 148.5px; width: 3.00098px; height: 3.00098px; background-color: rgb(241, 182, 91); font-size: 1px; z-index: 1100;"></div>
  <div id="divPoint8" style="visibility: hidden; position: absolute; top: 147.5px; left: 147.5px; width: 3.00017px; height: 3.00017px; background-color: rgb(247, 194, 97); font-size: 1px;"></div>
  <div id="divPoint9" style="visibility: hidden; position: absolute; top: 83.4596px; left: 113.46px; width: 3.08084px; height: 3.08084px; background-color: rgb(52, 0, 0); font-size: 1px; z-index: 1100;"></div>
  <div id="divPoint10" style="visibility: hidden; position: absolute; top: 77.809px; left: 144.809px; width: 2.38207px; height: 2.38207px; background-color: rgb(58, 0, 0); font-size: 1px; z-index: 1100;"></div>
  <div id="divPoint11" style="visibility: hidden; position: absolute; top: 93.2823px; left: 122.282px; width: 3.43541px; height: 3.43541px; background-color: rgb(64, 0, 0); font-size: 1px; z-index: 1100;"></div>
  <div id="divPoint12" style="visibility: hidden; position: absolute; top: 99.2282px; left: 142.228px; width: 3.54366px; height: 3.54366px; background-color: rgb(70, 0, 0); font-size: 1px;"></div>
  <div id="divPoint13" style="visibility: hidden; position: absolute; top: 100.247px; left: 153.247px; width: 3.5055px; height: 3.5055px; background-color: rgb(76, 0, 0); font-size: 1px;"></div>
  <div id="divPoint14" style="visibility: hidden; position: absolute; top: 102.269px; left: 139.269px; width: 3.46249px; height: 3.46249px; background-color: rgb(82, 0, 0); font-size: 1px; z-index: 1100;"></div>
  <div id="divPoint15" style="visibility: hidden; position: absolute; top: 103.293px; left: 137.293px; width: 3.41306px; height: 3.41306px; background-color: rgb(88, 0, 0); font-size: 1px;"></div>
  <div id="divPoint16" style="visibility: hidden; position: absolute; top: 96.4784px; left: 126.478px; width: 3.04321px; height: 3.04321px; background-color: rgb(94, 0, 0); font-size: 1px;"></div>
  <div id="divPoint17" style="visibility: hidden; position: absolute; top: 95.5559px; left: 130.556px; width: 2.88817px; height: 2.88817px; background-color: rgb(100, 0, 0); font-size: 1px; z-index: 1100;"></div>
  <div id="divPoint18" style="visibility: hidden; position: absolute; top: 94.6558px; left: 140.656px; width: 2.6885px; height: 2.6885px; background-color: rgb(106, 0, 0); font-size: 1px;"></div>
  <div id="divPoint19" style="visibility: hidden; position: absolute; top: 107.385px; left: 135.385px; width: 3.22931px; height: 3.22931px; background-color: rgb(112, 0, 0); font-size: 1px;"></div>
  <div id="divPoint20" style="visibility: hidden; position: absolute; top: 100.583px; left: 136.583px; width: 2.83392px; height: 2.83392px; background-color: rgb(118, 0, 0); font-size: 1px;"></div>
  <div id="divPoint21" style="visibility: hidden; position: absolute; top: 113.37px; left: 143.37px; width: 3.26041px; height: 3.26041px; background-color: rgb(124, 0, 0); font-size: 1px; z-index: 1100;"></div>
  <div id="divPoint22" style="visibility: hidden; position: absolute; top: 102.622px; left: 146.622px; width: 2.75583px; height: 2.75583px; background-color: rgb(130, 0, 0); font-size: 1px;"></div>
  <div id="divPoint23" style="visibility: hidden; position: absolute; top: 110.5px; left: 136.5px; width: 3px; height: 3px; background-color: rgb(136, 0, 0); font-size: 1px; z-index: 1100;"></div>
  <div id="divPoint24" style="visibility: hidden; position: absolute; top: 107.598px; left: 146.598px; width: 2.80324px; height: 2.80324px; background-color: rgb(142, 0, 0); font-size: 1px;"></div>
  <div id="divPoint25" style="visibility: hidden; position: absolute; top: 109.587px; left: 146.587px; width: 2.8254px; height: 2.8254px; background-color: rgb(148, 0, 0); font-size: 1px;"></div>
  <div id="divPoint26" style="visibility: hidden; position: absolute; top: 111.578px; left: 146.578px; width: 2.84401px; height: 2.84401px; background-color: rgb(154, 8, 4); font-size: 1px;"></div>
  <div id="divPoint27" style="visibility: hidden; position: absolute; top: 118.493px; left: 141.493px; width: 3.01458px; height: 3.01458px; background-color: rgb(160, 20, 10); font-size: 1px;"></div>
  <div id="divPoint28" style="visibility: hidden; position: absolute; top: 120.486px; left: 141.486px; width: 3.0274px; height: 3.0274px; background-color: rgb(166, 32, 16); font-size: 1px; z-index: 1100;"></div>
  <div id="divPoint29" style="visibility: hidden; position: absolute; top: 120.531px; left: 143.531px; width: 2.93811px; height: 2.93811px; background-color: rgb(172, 44, 22); font-size: 1px;"></div>
  <div id="divPoint30" style="visibility: hidden; position: absolute; top: 123.51px; left: 143.51px; width: 2.97975px; height: 2.97975px; background-color: rgb(178, 56, 28); font-size: 1px;"></div>

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.