<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<script>
function sayHello() {
//x,y,z
var points = [0,0,0,
0,0,1,
1,0,0,
1,0,1,
0,1,0,
0,1,1,
1,1,1,
1,1,0];
var indices = [1,2,
2,3,
3,4,
1,4,
1,5,
2,6,
3,7,
4,8,
5,6,
6,7,
7,8,
5,8];
var campos = [-1,1,-1];
var camrot = [0,-45,0];
var x_fov = 60;
var y_fov = 60;
var pts = [];
var scrn = [];
var temp;
var canvas = document.getElementById("window");
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var pts = points.length / 3;
for (n = 0; n < pts; n++) {
var c_x = points[n*3];
var c_y = points[(n*3)+1];
var c_z = points[(n*3)+2];
var x_diff = Math.abs(campos[0]-c_x);
var y_diff = Math.abs(campos[1]-c_y);
var z_diff = Math.abs(campos[2]-c_z);
var depth = Math.sqrt(power(x_diff,2)-power(y_diff,2)-
power(z_diff,2));
var x_rot = toDegrees(Math.atan(y_diff/z_diff));
var y_rot = toDegrees(Math.atan(x_diff/z_diff));
if (x_rot < (x_fov/2)+camrot[0]){
if (x_rot > (x_fov/2)-camrot[0]){
if (y_rot < (y_fov/2)+camrot[1]){
if (y_rot > (y_fov/2)-camrot[1]) {
//draw code
pts.push(((x_fov/2)-x_rot)/x_fov);
pts.push(((y_fov/2)-y_rot)/y_fov);
}
}
}
}
}
var count = 0;
for (pt in pts) {
if ((count % 2) == 0) {
//if even (x)
scrn.push(Math.ceil(canvas.width/pt));
}
else {
//if odd (y)
scrn.push(Math.ceil(canvas.height/pt));
}
count++;
}
var icount = 0;
for (ind in indices) {
if ((icount % 2) == 0) {
//even
temp = ind;
}
else {
//odd
//take temp and ind and draw lines with pts
_x = scrn[temp*2];
_y = scrn[(temp*2)+1];
ctx.beginPath();
ctx.moveTo(_x*10, _y*10);
n_x = scrn[ind*2];
n_y = scrn[(ind*2)+1];
ctx.lineTo(n_x*10, n_y*10);
ctx.closePath();
ctx.stroke();
}
}
}
else {
document.write("No work");
}
}
function toDegrees(rads) {
return rads * (180 / Math.PI);
}
sayHello();
</script>
<style>#window{border:1px solid red;}</style>
</head>
<body>
<canvas id="window" width="100" height="100"></canvas>
</body>
</html>
I am trying to draw a wireframe cube using javascript and html 5 canvas. For some reason, it does not work. I use arrays to turn 3D geometry into 2D points on the screen and connect them via an indices array. I am sort of trying to replacate the OpenGL library for the web (I understand WebGL already exists) but I want to be able to change the code for performance and ease of use. This is just a basic bit of code, however the canvas does not even work, as the red border that I applied using a style tag does not work. I made sure my browser supported html 5 canvas, but nothing works. I'm assuming its just bad coding and if anyone can figure out what's wrong that would be great, thanks.
