PDA

Click to See Complete Forum and Search --> : Drawing a line from point to point.

Clipster
April 13th, 2009, 09:08 PM
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.


<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.
PeejAvery
April 13th, 2009, 11:43 PM
Why not just work with libraries that already exist? It's much of a time saver!

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
Clipster
April 14th, 2009, 02:52 AM
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:

<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:

Javascript says: -0.5328330203333975
Calculator says: 0.9205048534524403
My Function says: 0.92050483675908


As you can see Javascript is way off.
PeejAvery
April 14th, 2009, 07:33 AM
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.
Clipster
April 14th, 2009, 02:31 PM
Ahh. My mistake.. Thanks!