topical media & game development
student-canvas-CD02.htm / htm
<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;
var firefox = 0;
function dotproduct(a,b) {
var n = a[0] * b[0] + a[1] * b[1];
return n;
}
function timeout() {
var x;
var axis = new Array();
var point = new Array();
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);
}
axis[1] = shapeA[1].getXPos() - shapeA[0].getXPos();
axis[0] = -1 * (shapeA[1].getYPos() - shapeA[0].getYPos());
point[0] = shapeB[0].getXPos() - shapeA[0].getXPos();
point[1] = shapeB[0].getYPos() - shapeA[0].getYPos();
ctx.fillStyle = "Black";
if(firefox == 1) {
ctx.translate(10, 10);
ctx.fillStyle = "Black";
ctx.mozTextStyle = "14px Courier New";
ctx.mozDrawText(dotproduct(axis,point));
ctx.translate(-10, -10);
} else {
ctx.font = "14px Courier New";
ctx.fillText(dotproduct(axis,point), 5, 30);
}
setTimeout('timeout()', 30);
}
function initCD02(aWidth, aHeight) {
var canvas = document.getElementById('CD02');
var x;
ctx = canvas.getContext('2d');
var browserName = "";
var ua = navigator.userAgent.toLowerCase();
if ( ua.indexOf( "opera" ) != -1 ) {
browserName = "opera";
} else if ( ua.indexOf( "msie" ) != -1 ) {
browserName = "msie";
} else if ( ua.indexOf( "safari" ) != -1 ) {
browserName = "safari";
} else if ( ua.indexOf( "mozilla" ) != -1 ) {
if ( ua.indexOf( "firefox" ) != -1 ) {
browserName = "firefox";
} else {
browserName = "mozilla";
}
}
if(browserName == "mozilla" || browserName == "firefox") {
firefox = 1;
} else {
firefox = 0;
}
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="initCD02(500, 500)">
<canvas id="CD02" width="500" height="500"></canvas>
<br>
<br>
Use mouse to move individual pointmasses.<br>
This example gives a demonstration of how you can check whether a point is on one side of an axes, or another.<br>
The value on the top is positive if the top point of the larger triangle is positioned outside the long edge of the smaller triangle.
</body>
</html>
(C) Æliens
04/09/2009
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.
