Skip to content

Instantly share code, notes, and snippets.

@ElemarJR

ElemarJR/wireframe.html

Created October 19, 2011 00:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ElemarJR/1297152 to your computer and use it in GitHub Desktop.
Save ElemarJR/1297152 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
wireframe.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rotating Wireframe cube</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
width: 100%;
}
canvas
{
display:block;
visibility:hidden;
}
#target
{
background: #001022;
}
</style>
</head>
<body>
<canvas id="target">
</canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var canvas = $("#target");
canvas.css("visibility", "visible");
var context = canvas.get(0).getContext("2d");
var canvasWidth = canvas.width();
var canvasHeight = canvas.height();
var entities = [];
$(window).resize(resizeCanvas);
function resizeCanvas() {
canvas.attr("width", $(window).get(0).innerWidth);
canvas.attr("height", $(window).get(0).innerHeight);
canvasWidth = canvas.width();
canvasHeight = canvas.height();
};
resizeCanvas();
// ---------------------------------------------------------------------
var MatrixUtils = {
identity: function () {
return new Matrix([
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, 0, 0, 1]
]);
},
rotationZ: function (q) {
return new Matrix([
[Math.cos(q), Math.sin(q), 0, 0],
[-Math.sin(q), Math.cos(q), 0, 0],
[0, 0, 1, 0],
[0, 0, 0, 1]
]);
},
rotationX: function (q) {
return new Matrix([
[1, 0, 0, 0],
[0, Math.cos(q), Math.sin(q), 0],
[0, -Math.sin(q), Math.cos(q), 0],
[0, 0, 0, 1]
]);
},
rotationY: function (q) {
return new Matrix([
[Math.cos(q), 0, -Math.sin(q), 0],
[0, 1, 0, 0],
[Math.sin(q), 0, Math.cos(q), 0],
[0, 0, 0, 1]
]);
},
translation: function (dx, dy, dz) {
return new Matrix([
[1, 0, 0, dx],
[0, 1, 0, dy],
[0, 0, 1, dz],
[0, 0, 0, 1]
]);
},
scale: function (sx, sy, sz) {
return new Matrix([
[sx, 0, 0, 0],
[0, sx, 0, 0],
[0, 0, sz, 0],
[0, 0, 0, 1]
]);
}
};
function Matrix(cells) {
this.cells = cells;
this.mult = function (m) {
var result = [];
for (var i = 0; i < 4; i++) {
result[i] = [];
for (var j = 0; j < 4; j++) {
result[i][j] = this.cells[i][0] * m.cells[0][j] +
this.cells[i][1] * m.cells[1][j] +
this.cells[i][2] * m.cells[2][j] +
this.cells[i][3] * m.cells[3][j];
}
}
return new Matrix(result)
}
}
// ---------------------------------------------------------------------
function Vector3D(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
this.perspective = function (viewWidth, viewHeight, fov, viewDistance) {
var factor, x, y
factor = fov / (viewDistance + this.z)
x = this.x * factor + viewWidth / 2
y = this.y * factor + viewHeight / 2
return new Vector3D(x, y, this.z)
};
this.mult = function (m) {
var nx, ny, nz;
nx = m.cells[0][0] * this.x +
m.cells[0][1] * this.y +
m.cells[0][2] * this.z +
m.cells[0][3];
ny = m.cells[1][0] * this.x +
m.cells[1][1] * this.y +
m.cells[1][2] * this.z +
m.cells[1][3];
nz = m.cells[2][0] * this.x +
m.cells[2][1] * this.y +
m.cells[2][2] * this.z +
m.cells[2][3];
return new Vector3D(nx, ny, nz);
};
this.normalize = function () {
var d = Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
return new Vector3D(this.x / d, this.y / d, this.z / d);
};
this.cross = function (another) {
x = this.y * another.z - this.z * another.y;
y = this.z * another.x - this.x * another.z;
z = this.x * another.y - this.y * another.x;
return new Vector3D(x, y, z);
}
this.dot = function (another) {
return this.X * another.X + this.Y * another.Y + this.Z * another.Z;
}
}
// ---------------------------------------------------------------------
function Cube(scaleMatrix, rotationMatrix, translationMatrix) {
var vertices = [
new Vector3D(-1, 1, -1),
new Vector3D(1, 1, -1),
new Vector3D(1, -1, -1),
new Vector3D(-1, -1, -1),
new Vector3D(-1, 1, 1),
new Vector3D(1, 1, 1),
new Vector3D(1, -1, 1),
new Vector3D(-1, -1, 1)
];
var faces = [
[0, 1, 2, 3],
[1, 5, 6, 2],
[5, 4, 7, 6],
[4, 0, 3, 7],
[0, 4, 5, 1],
[3, 2, 6, 7]
];
this.scaleMatrix = scaleMatrix;
this.rotationMatrix = rotationMatrix;
this.translationMatrix = translationMatrix;
this.draw = function (context, w, h) {
var t = new Array();
for (var i = 0; i < 8; i++) {
var v = vertices[i];
var r = v
.mult(this.scaleMatrix)
.mult(this.rotationMatrix)
.mult(this.translationMatrix)
.perspective(
canvasWidth,
canvasHeight,
Math.min(canvasWidth, canvasHeight) * 0.9,
3.5);
t.push(r);
}
context.strokeStyle = "rgb(255,255,255)"
for (var i = 0; i < faces.length; i++) {
var f = faces[i];
context.beginPath();
context.moveTo(t[f[0]].x, t[f[0]].y);
context.lineTo(t[f[1]].x, t[f[1]].y);
context.lineTo(t[f[2]].x, t[f[2]].y);
context.lineTo(t[f[3]].x, t[f[3]].y);
context.closePath();
context.stroke();
}
}
}
// ---------------------------------------------------------------------
function DTR(x) {
return x * Math.PI / 180;
}
function loadContent() {
entities.push(new Cube(
MatrixUtils.scale(0.75, 0.75, 0.75),
MatrixUtils.identity(),
MatrixUtils.translation(1, 0, 0)
));
entities.push(new Cube(
MatrixUtils.scale(0.5, 0.5, 0.5),
MatrixUtils.identity(),
MatrixUtils.translation(-1, 0, 0)
));
animate();
}
loadContent();
function animate() {
update();
draw();
setTimeout(animate, 33);
}
function update() {
entities[0].rotationMatrix = entities[0].rotationMatrix
.mult(MatrixUtils.rotationX(DTR(1)))
.mult(MatrixUtils.rotationY(DTR(1)))
.mult(MatrixUtils.rotationZ(DTR(1)));
entities[1].rotationMatrix = entities[1].rotationMatrix
.mult(MatrixUtils.rotationX(DTR(-1)));
}
function draw() {
context.clearRect(0, 0, canvasWidth, canvasHeight);
for (var i = 0; i < entities.length; i++) {
entities[i].draw(context, canvasWidth, canvasHeight);
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment