Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
  <meta charset="utf-8">
  <title>TWGL 101</title>
  <!-- you need to load TWGL from somewhere -
    -- this grabs it from the CS server, which
    -- might take a while
    -->
  <canvas id="myCanvas" 
       width="500" height="500"
       style="border:1px solid #000;">
  </canvas><br/>
  <input id="slider1" type="range" min="-100" max="100" />
  <input id="slider2" type="range" min="0" max="100" />
  <script src="http://graphics.cs.wisc.edu/JS/twgl-full.min.js"></script>
</head>
<body>
</body>
</html>
 
function setup() { "use strict";
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var m4 = twgl.m4;
  
  var slider1 = document.getElementById('slider1');
  slider1.value = 0;
  var slider2 = document.getElementById('slider2');
  slider2.value = 0;
                
  function moveToTx(x,y,z,Tx) {
    var loc = [x,y,z];
    var locTx = m4.transformPoint(Tx,loc);
    context.moveTo(locTx[0],locTx[1]);
  }
  function lineToTx(x,y,z,Tx) {
    var loc = [x,y,z];
    var locTx = m4.transformPoint(Tx,loc);
    context.lineTo(locTx[0],locTx[1]);
  }
                
  function drawAxes(Tx) {
    // A little cross on the front face, for identification
    moveToTx(0,0,0,Tx);lineToTx(100,0,0,Tx);context.stroke();
    moveToTx(0,0,0,Tx);lineToTx(0,150,0,Tx);context.stroke();
    moveToTx(0,0,0,Tx);lineToTx(0,0,200,Tx);context.stroke();
  }
  function drawPlane(Tx) {
    // Draw a plane model. Note that we have the nose pointing towards the negative z-axis,
    // so we can use the lookAt transform to place it into the workd
    context.beginPath();
    moveToTx(-10,  0, 50,Tx);lineToTx(-10,  0, 10,Tx);lineToTx(-50,  0, 20,Tx);
    lineToTx(-10,  0,-10,Tx);lineToTx(-10,  0,-50,Tx);lineToTx(  0,  0,-60,Tx);
    lineToTx( 10,  0,-50,Tx);lineToTx( 10,  0,-10,Tx);lineToTx( 50,  0, 20,Tx);
    lineToTx( 10,  0, 10,Tx);lineToTx( 10,  0, 50,Tx);lineToTx(  0, 20, 50,Tx);
    context.closePath();
  }
  // This is the function C(t)
  function curveValue(t){
    var p0=[0,0,0];
    var p1=[100,0,0];
    var p2=[100,0,200];
    var p3=[0,0,200];
    var b0=(1-t)*(1-t)*(1-t);
    var b1=3*t*(1-t)*(1-t);
    var b2=3*t*t*(1-t);
    var b3=t*t*t;
    
    
    var result = [p0[0]*b0+p1[0]*b1+p2[0]*b2+p3[0]*b3,
                  p0[1]*b0+p1[1]*b1+p2[1]*b2+p3[1]*b3,
                  p0[2]*b0+p1[2]*b1+p2[2]*b2+p3[2]*b3];
    return result;
  }
                  
  // And this is the derivative C'(t) -- which is the tangent vector
  function curveTangent(t){
    var p0=[0,0,0];
    var p1=[100,0,0];
    var p2=[100,0,200];
    var p3=[0,0,200];
    var b0=-3*(1-t)*(1-t);
    var b1=3*(1-3*t)*(1-t);
    var b2=3*t*(2-3*t);
    var b3=3*t*t;
    
    var result = [p0[0]*b0+p1[0]*b1+p2[0]*b2+p3[0]*b3,
                  p0[1]*b0+p1[1]*b1+p2[1]*b2+p3[1]*b3,
                  p0[2]*b0+p1[2]*b1+p2[2]*b2+p3[2]*b3];
    
    return result;
  }
                  
  function draw() {
    // hack to clear the canvas fast
    canvas.width = canvas.width;
    
    var angle = slider1.value*0.01*Math.PI;
    var t = slider2.value*0.01;
    var axis = [1,1,1];
  
    var eye=[500*Math.cos(angle),250,500*Math.sin(angle)];
    var target=[0,100,0];
    var up=[0,1,0];
    
    var Tmodel_trans=m4.translation(curveValue(t));
    var Tmodel_rot=m4.lookAt([0,0,0],curveTangent(t),up);
    var Tmodel=m4.multiply(Tmodel_rot,Tmodel_trans);
    
    var Tcamera=m4.inverse(m4.lookAt(eye,target,up));
    var Tprojection=m4.perspective(Math.PI/4,1.0,1,20);
    var Tviewport=m4.multiply(m4.scaling([250,-250,200]),m4.translation([250,250,0]));
    
    var Tcpv=m4.multiply(m4.multiply(Tcamera,Tprojection),Tviewport);
    var Tmcpv=m4.multiply(Tmodel,Tcpv);
    drawPlane(Tmcpv);
    drawAxes(Tcpv);
  }
  slider1.addEventListener("input",draw);
  slider2.addEventListener("input",draw);
  draw();
}
window.onload = setup;
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers