#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0

    Java script in html5 canvas help


    I found this HTML5 canvas script that makes stars orbit, I want to change the stars to be text but I cant seem to figure out where the javascript renders the stars.

    http://seb.ly/demos/canvas3d/canvas3d3.html
    (link Wswig doesnt wanna work)

    that is a link to the script I want to use in action.

    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>
    
    </body></html>
    Last edited by Kravvitz; March 20th, 2013 at 08:42 PM. Reason: removed the Google Analytics code
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    50
    Rep Power
    35
    It looks like they're being rendered in draw3Din2D, so to render text in place of the stars you could change draw3Din2D to:

    Code:
    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.font = 15 * scale + "px Arial";
    	c.fillStyle = "#ffffff";
    	c.fillText("Hello World",x2d,y2d);
    }
    Full code:
    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 = 50; 
    
    
    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,0,255)"; 	
    	c.beginPath();
    	c.moveTo(x2d,y2d); 
    	c.lineTo(x2d+scale,y2d); 
    	c.stroke();*/
    	
    	c.font = 15 * scale + "px Arial";
    	c.fillStyle = "#ffffff";
    	c.fillText("Hello World",x2d,y2d);
    }
    
    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>
    
    </body></html>

    Comments on this post

    • atsuisofu agrees : Thanks
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0
    Thank you soooo much. That makes alot of sense. Sorry for the newb question I am new to object based programming I usually do function based.

    I was wondering if it was possible to change the script so it renders different words? I want to have an array of different words orbiting. I will for sure give you credit for your help with me achieving a better understanding of javascript and its interactions with HTML5.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    50
    Rep Power
    35
    No worries

    To have different words orbiting I've added a global array of words like so:
    Code:
    var words = new Array( "Cats", "Dogs", "Bunnies", "Mice", "Parsnips");
    And changed initPoints to this:

    Code:
    function initPoints()
    {
    	var wordIndex = 0;
    	
    	for (i=0; i<numPoints; i++)
    	{
    		point = [(Math.random()*400)-200, (Math.random()*400)-200 , (Math.random()*400)-200, words[wordIndex++] ];
    		points.push(point);
    		
    		if (wordIndex == words.length)
    		{
    			wordIndex = 0;
    		}
    	}
    }
    Now when each point object is created it is assigned a word from the 'words' array, this can then be accessed in draw3Din2D as index 3 of point3d:

    Code:
    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.font = 15 * scale + "px Arial";
    	c.fillStyle = "#ffffff";
    	c.fillText(point3d[3], x2d, y2d);
    }
    So where in the previous version fillText was rendering "Hello World" with every call, now the word that was assigned to that particular point will be rendered instead.

    Full code:
    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 = 50; 
    
    var words = new Array( "Cats", "Dogs", "Bunnies", "Mice", "Parsnips");
    
    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,0,255)"; 	
    	c.beginPath();
    	c.moveTo(x2d,y2d); 
    	c.lineTo(x2d+scale,y2d); 
    	c.stroke();*/
    	
    	c.font = 15 * scale + "px Arial";
    	c.fillStyle = "#ffffff";
    	c.fillText(point3d[3], x2d, y2d);
    }
    
    var canvas = document.getElementById('Canvas2D');
    var c = canvas.getContext('2d');
    
    var points = [];
    
    function initPoints()
    {
    	var wordIndex = 0;
    	
    	for (i=0; i<numPoints; i++)
    	{
    		point = [(Math.random()*400)-200, (Math.random()*400)-200 , (Math.random()*400)-200, words[wordIndex++] ];
    		points.push(point);
    		
    		if (wordIndex == words.length)
    		{
    			wordIndex = 0;
    		}
    	}
    }
    
    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>
    
    </body></html>

IMN logo majestic logo threadwatch logo seochat tools logo