<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 xKeyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |