I know about HTML5 and javascript I am just having an issue. I want to take an HTML5 script that exists and change where it has stars orbiting a z axis to have text objects orbiting.
The website that I have found that has the orbiting stars canvas is here
http://seb.ly/demos/canvas3d/canvas3d3.html
I can find where to change the color of the stars and the amount that appear, but I cannot find where the star is actually rendered.
The website that I have found that has the orbiting stars canvas is here
http://seb.ly/demos/canvas3d/canvas3d3.html
I can find where to change the color of the stars and the amount that appear, but I cannot find where the star is actually rendered.
Code:
<html><head>
<title>Simple 3D on HTML5 canvas</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript">
function setup()
{
var fov = 250;
var SCREEN_WIDTH = 600;
var SCREEN_HEIGHT = 300;
var HALF_WIDTH = SCREEN_WIDTH/2;
var HALF_HEIGHT = SCREEN_HEIGHT/2;
var numPoints = 200;
function draw3Din2D(point3d)
{
x3d = point3d[0];
y3d = point3d[1];
z3d = point3d[2];
var scale = fov/(fov+z3d);
var x2d = (x3d * scale) + HALF_WIDTH;
var y2d = (y3d * scale) + HALF_HEIGHT;
c.lineWidth= scale;
c.strokeStyle = "rgb(255,255,255)";
c.beginPath();
c.moveTo(x2d,y2d);
c.lineTo(x2d+scale,y2d);
c.stroke();
}
var canvas = document.getElementById('Canvas2D');
var c = canvas.getContext('2d');
var points = [];
function initPoints()
{
for (i=0; i<numPoints; i++)
{
point = [(Math.random()*400)-200, (Math.random()*400)-200 , (Math.random()*400)-200 ];
points.push(point);
}
}
function render()
{
c.fillStyle="rgb(0,0,0)";
c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
for (i=0; i<numPoints; i++)
{
point3d = points[i];
rotatePointAroundY(point3d, 0.04);
draw3Din2D(point3d);
}
}
function rotatePointAroundY(point3d, angle)
{
x = point3d[0];
z = point3d[2];
cosRY = Math.cos(angle);
sinRY = Math.sin(angle);
tempz = z;
tempx = x;
x= (tempx*cosRY)+(tempz*sinRY);
z= (tempx*-sinRY)+(tempz*cosRY);
point3d[0] = x;
point3d[2] = z;
}
initPoints();
var loop = setInterval(function(){render();}, 50);
}
</script>
<style type="text/css">
body{background:#000;color:#fff;font-family:arial;font-size:90%;}
.wrap{width:640px; margin:0 auto;}
canvas{border: 1px solid #0f0;}
a{color:#0f0;}
</style>
</head><body onload="setup();">
<div class="wrap">
<canvas id="Canvas2D" width="600" height="300">Internet Explorer Not Supported :(</canvas>
<h1>Simple 3D HTML5 Canvas</h1>
<p>By <a href="http://sebleedelisle.com">Seb Lee-Delisle</a></p>
<p>Simple 3D on HTML5 Canvas, as demoed at BarCampBrighton4. More info at <a href="http://www.sebleedelisle.com/2009/09/simple-3d-in-html5-canvas">sebleedelisle.com</a>. </p>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-809606-2";
urchinTracker();
</script>
</body></html>
Facebook
Twitter