CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 5 of 5
  1. #1
    Join Date
    Oct 2008
    Posts
    29

    Drawing a line from point to point.

    I'm trying to draw a line from one point to another. This seems to work ok on 45 degree angles other than the distance is still wrong. But if the angle is not 45 degrees it goes wack.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var paint = {
    	draw : function(point_oneX, point_oneY, point_twoX, point_twoY)
    	{
    		if(point_twoX > point_oneX)
    			point_lengthX = point_twoX - point_oneX
    		else
    		{
    			point_lengthX = point_oneX - point_twoX;
    			point_oneX = point_twoX;
    		}
    		
    		if(point_twoY > point_oneY)
    			point_lengthY = point_twoY - point_oneY
    		else
    		{
    			point_lengthY = point_oneY - point_twoY;
    			point_oneY = point_twoY;
    		}
    		
    		var angle_b = Math.atan(point_lengthX / point_lengthY) * 180 / 3.1415926535897932384626433832795;
    		var angle_a = 90 - angle_b;
    		var point_dist = Math.sqrt((point_lengthX * point_lengthX) + (point_lengthY * point_lengthY));
    		var current_dist = 0;
    		
    		for(var i=0;i<point_dist;i++)
    		{
    			this.make_pixel((Math.sin(angle_b) * current_dist) + point_oneX, (Math.sin(angle_a) * current_dist) + point_oneY);
    			
    			current_dist += 1;
    		}
    	},
    	
    	make_pixel : function(x, y)
    	{
    		var ele = document.createElement('<div>');
    		
    		ele.setAttribute('id', 'p_'+this.pix_count);
    		ele.setAttribute('style', 'background: #FF0000;position:absolute;left:'+x+'px;top:'+y+'px;width:3px;height:3px;');
    		
    		document.body.appendChild(ele);
    	}
    };
    
    var x1 = 0;
    var x2 = 0;
    var y1 = 0;
    var y2 = 0;
    
    function addpoint(evt)
    {
    	if(x1 == 0)
    		x1 = evt.clientX;
    	else
    		x2 = evt.clientX;
    	
    	if(y1 == 0)
    		y1 = evt.clientY;
    	else
    	{
    		y2 = evt.clientY;
    		paint.draw(x1,y1, x2,y2);
    	}
    }
    
    //window.onload = function(){paint.draw(50,50, 100,100)};
    </script>
    <style type="text/css">
    .image {
    	border: 1px solid #000000;
    	width: 200px;
    	height: 200px;
    }
    </style>
    </head>
    <body>
    <div class="image" onclick="addpoint(event)">
    </div>
    </body>
    </html>
    You click somewhere in the box as first point then somewhere else as second point.

    I'm guessing the math isn't quite right. Any help please?

    Thanks.

  2. #2
    Join Date
    May 2002
    Posts
    10,943

    Re: Drawing a line from point to point.

    Why not just work with libraries that already exist? It's much of a time saver!

    http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    Oct 2008
    Posts
    29

    Re: Drawing a line from point to point.

    Thanks, But I'm not starting a project with it, I just wanted to see if I could make it. xD
    Brushing up on my math lol.

    I solved the problem now.
    Turns out the Math.sin and Math.cos was giving me invalid numbers. I had to make my own cosine function:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var paint = {
    	cosine : function(x)
    	{
    		x = x * (3.1415926535897932384626433832795) / 180;
    		var x2 = x * x;
    		var x4 = x * x * x * x;
    		var x6 = x * x * x * x * x * x;
    		var p2 = 2 * 1;
    		var p4 = 4 * 3 * 2 * 1;
    		var p6 = 6 * 5 * 4 * 3 * 2 * 1;	
    		x = 1 - (x2 / p2) + (x4 / p4) - (x6 / p6);
    	
    		return x;
    	},
    	
    	draw : function(point_oneX, point_oneY, point_twoX, point_twoY)
    	{
    		point_lengthX = point_twoX - point_oneX;
    		point_lengthY = point_twoY - point_oneY;
    		
    		if(point_lengthY < 0) doInverse = true; else doInverse = false;
    		
    		var angle_b = Math.atan(point_lengthX / point_lengthY) * 180 / 3.1415926535897932384626433832795;
    		var angle_a = 90 - angle_b;
    		var point_dist = Math.sqrt((point_lengthX * point_lengthX) + (point_lengthY * point_lengthY));
    		var current_dist = 0;
    		
    		if(doInverse == true)
    		{
    			point_oneX = point_twoX;
    			point_oneY = point_twoY;
    		}
    		
    		for(var i=0;i<point_dist;i++)
    		{
    			this.make_pixel((this.cosine(angle_a) * current_dist) + point_oneX, (this.cosine(angle_b) * current_dist) + point_oneY);
    			
    			current_dist += 1;
    		}
    	},
    	
    	make_pixel : function(x, y)
    	{
    		var ele = document.createElement('<div>');
    		
    		ele.setAttribute('id', 'p_'+this.pix_count);
    		ele.setAttribute('style', 'background: #FF0000;position:absolute;left:'+x+'px;top:'+y+'px;width:1px;height:1px;');
    		
    		document.body.appendChild(ele);
    	}
    };
    
    var x1 = 0;
    var x2 = 0;
    var y1 = 0;
    var y2 = 0;
    
    function addpoint(evt)
    {
    	if(x1 == 0)
    		x1 = evt.clientX;
    	else
    		x2 = evt.clientX;
    	
    	if(y1 == 0)
    		y1 = evt.clientY;
    	else
    	{
    		y2 = evt.clientY;
    		paint.draw(x1,y1, x2,y2);
    		x1 = 0; x2 = 0; y1 = 0; y2 = 0;
    	}
    }
    
    //window.onload = function(){paint.draw(50,50, 100,100)};
    </script>
    <style type="text/css">
    .image {
    	border: 1px solid #000000;
    	width: 200px;
    	height: 200px;
    }
    </style>
    </head>
    <body>
    <div class="image" onclick="addpoint(event)">
    </div>
    </body>
    </html>
    Not as accurate as a calculator, but much better than the javascript built in function.

    cos 23:
    Code:
    Javascript says: -0.5328330203333975 
    Calculator says:  0.9205048534524403
    My Function says: 0.92050483675908
    As you can see Javascript is way off.

  4. #4
    Join Date
    May 2002
    Posts
    10,943

    Re: Drawing a line from point to point.

    That is because JavaScript works with radians, not degrees. So, convert first to radians, then find the SIN or COS. So, you don't have to use your own custom function.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  5. #5
    Join Date
    Oct 2008
    Posts
    29

    Re: Drawing a line from point to point.

    Ahh. My mistake.. Thanks!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  





Click Here to Expand Forum to Full Width

Featured