Line function and rotate.

The Partridge Family were neither partridges nor a family. Discuss.
Post Reply
freqit
Posts: 15
Joined: February 18th, 2017, 4:47 pm

Line function and rotate.

Post by freqit » March 8th, 2017, 12:52 pm

Hi guys! I'm working on some basic stuff to learn coding. Here is what I currently got, using a nested
for loop to draw a line from the a center point(x-, x+). I want to be able to rotate the line from the center point axle. Drawing new lines as a animation from the center point and outwards.

// I need this to draw a line out from the center point, left and right. I'm not 100% that I did this correctly. putpixel(x,y); px1=50,px2=100,py1=50,py2=not used atm. Later I will tackle all angles.
This should draw a line from x 50 to x 1 and x 50 to x 100 at the y location of 50.

cpx = px2-px1; // centerpoint/distance

for (int i=0; i<cpx; i++) {
putpixel();
px1--;
for (int y=0; y<cpx; y++) {
putpixel();
px2=px1;
px2++;
}
}

Here is my normal draw a line code:

for (int i=0; i<px2-px1; i++) {
putpixel();
px1++;
}

Am I on the right track here or just dumb? :)

Thanks!

albinopapa
Posts: 4373
Joined: February 28th, 2013, 3:23 am
Location: Oklahoma, United States

Re: Line function and rotate.

Post by albinopapa » March 8th, 2017, 2:05 pm

Could you perhaps format the code to be more like what you are actually using?

For instance, your PutPixel calls don't include the X, Y coordinates, so I'm not sure how to follow the code. Also, in the editor when creating the post, surround your code with the

Code: Select all

[code]
[/code] tags by highlighting your code in the Full Editor and clicking on Code. This way it's not all scrunched up against the left side of the post.


BUT, when drawing a line use the " slope intercept " formula. Chili actually goes over this in his old beginner series I think around episode 9 or 10, can't remember which exactly. Let's say your line goes from {0, 0} to { 50, 10 }. This means that for every 5 pixels drawn in the X direction, you need to drop down 1 pixel in the Y direction, but if you do { 0, 0 } to { 10, 50 } for every 1 pixel in the X direction you need to drop down 5 in the Y direction. So you need to have the line drawing function determine how to handle this as you don't want to actually drop down 5 pixels without drawing the pixels in between, and same for the X distance being greater than the Y distance.

As for rotation, you would use the sin and cos functions by passing in an angle in radians and multiplying the result by the distance to the end points in either direction. Normally, rotations are counter clockwise in math, but because the screen coordinates in the Y axis go from top to bottom, rotations are clockwise.
If you think paging some data from disk into RAM is slow, try paging it into a simian cerebrum over a pair of optical nerves. - gameprogrammingpatterns.com

freqit
Posts: 15
Joined: February 18th, 2017, 4:47 pm

Re: Line function and rotate.

Post by freqit » March 8th, 2017, 3:49 pm

Ah, sorry pasted it totally wrong and missed to say I have a problem with this code as it does not work as I intended. It draws a line from a Center Point to the left (-x). Check!
The second line does not draw as intended.

Code: Select all

  
float px1=50;
float py1=25;
float px2=100;
float py2=50;
float cpx=px2-px1; // Center Point / Distance between point A-B.

    for (int i=0; i<cpx; i++) {
    putPixel(px1,py1); 
    px1--;
  }
    for (int i=0; i<cpx; i++) {
    putPixel(px2-cpx,py1); 
    px2++;
  }
  
}
The problem I have is that it continues to draw the line off the screen. I will try to reverse the code, drawing the second line first.
Last edited by freqit on March 8th, 2017, 4:20 pm, edited 3 times in total.

freqit
Posts: 15
Joined: February 18th, 2017, 4:47 pm

Re: Line function and rotate.

Post by freqit » March 8th, 2017, 4:08 pm

albinopapa wrote: As for rotation, you would use the sin and cos functions by passing in an angle in radians and multiplying the result by the distance to the end points in either direction. Normally, rotations are counter clockwise in math, but because the screen coordinates in the Y axis go from top to bottom, rotations are clockwise.
Thanks, I will have to look up and refresh my math on this subject before attempting it.

First tho, I need to add the "slope intercept " formula. Really gonna try myself with what you described to me, don't wanna peak just yet on the videos :)

y drop = x/y (0,0 - 10,70 = 0,1428)
x draw = y/x (0,0 - 70,10 = 7)

Something like that? Gah I need to take math lessons :)

albinopapa
Posts: 4373
Joined: February 28th, 2013, 3:23 am
Location: Oklahoma, United States

Re: Line function and rotate.

Post by albinopapa » March 8th, 2017, 8:39 pm

Spoiler:

Code: Select all

float px1=50;
float py1=25;
float px2=100;
float py2=50;

// Start by subtracting the two points
const float deltaX = px2 - px1;
const float deltaY = py2 - py1;

// If absolute of deltaX > absolute of deltaY, 
if( fabsf( deltaX ) > fabsf( deltaY ) )
{
	// then there is a shallow slope and we can iterate over X
	
	// If p2x < p1x, swap the points so that we iterate from left to right
	if( p2x < p1x )
	{
		std::swap( p1x, p2x );
		std::swap( p1y, p2y );
	}
	
	// Calculate the slope
	const float m = deltaY / deltaX
	
	// Iterate over X one pixel at a time, iterate over Y adding slope to Y each iteration
	for( float x = p1x, y = p1y; x < p2x; x += 1.f, y += m )
	{
		PutPixel( int(x), int(y), color );
	}
}
else
{
	// Otherwise, there is a steep slope and we should iterate over the Y	
	
	// If p2y < p1y, swap them so that we iterate from top to bottom
	if( p2y < p1y )
	{
		std::swap( p1x, p2x );
		std::swap( p1y, p2y );
	}

	// Calculate slope
	const float m = deltaX / deltaY;

	// Iterate over the Y one pixel at a time, iterate over X adding slope to X each iteration
	for( float x = p1x, y = p1y; y < p2y; y += 1.f, x += m )
	{
		PutPixel( int(x), int(y), color );
	}
}
Looking back over chili's version, he dropped the y-intercept, I like this version better...you don't have to solve for it.
Was going to go over rotation, but it's a little more involved than I first thought since you are wanting to rotate a line and not just drawing lines at some angle.

To rotate a line, you must first start with an angle, it's initial orientation. You must decide if the line going from midpoint to end point is it's orientation or if the normal coming from the midpoint, which is perpendicular to the line, is the orientation.

Code: Select all

                            Normal
                                   |
                                   |
                                   |
                                   |
                                   |
  ----------------------------------------------------   // line


Once you decide on how the orientation is going to be, you can use this to rotate the point

Code: Select all

Vec2 Vec2::Rotation(const float angle) const
{
	Vec2 result;
	
	float cosine = cosf(angle);
	float sine = sinf(angle);
	
	result.x = x * cosine - y * sine;
	result.y = x * sine + y * cosine;

	return result;
}
If you think paging some data from disk into RAM is slow, try paging it into a simian cerebrum over a pair of optical nerves. - gameprogrammingpatterns.com

User avatar
chili
Site Admin
Posts: 3948
Joined: December 31st, 2011, 4:53 pm
Location: Japan
Contact:

Re: Line function and rotate.

Post by chili » March 12th, 2017, 6:41 am

If you're interested, Old Beg T10 is where I go over line drawing, and Old Series Advanced 2 is where I go over rotating points.
Chili

Post Reply