Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

MorphingDragon

macrumors 603
Original poster
Mar 27, 2009
5,159
6
The World Inbetween
For most of the year, because of my previous Objective-C/C experience I've been flying through my CS labs but I'm stuck on this particular exercise.

We have to make a program which draws a 5 sided star and eventually change it into a program that draws spiralgraphs. Now the following point of a star is defined as (Where i is the point of a star)

xi + 1 = xi + LineLength * cos(theta)
yi + 1 = yi + LineLength * sin(theta)

I get this little tiny blob in the corner of my window. I have no clue whats wrong with my code.

This is actually C#, but whatever, its similar to Java.

Code:
//Declare Variables
double starLength = numericLength.Value;
double x = 0, y = 0, xi = 0, yi = 0;
const double angle = 4 * Math.PI / 5;
Graphics paper = picStar.CreateGraphics();
Pen pen1 = new Pen(Color.Black, 5);

//Draw the star
for (int i = 1; i <= 5; ++i)
{
     //Calculate xi +1, yi + 1
     xi = x + (starLength * Math.Cos(angle));
     yi = y + (starLength * Math.Sin(angle));

    //Draw the line
    paper.DrawLine(pen1, (int)x, (int)y, (int)xi, (int)yi);

    //Make x, y -> xi, yi
    x = xi;
    y = yi;
}
 
Any value makes a blob appear, just thicker.

Hmm. How's picStar created?

I'd get rid of the for loop and focus on making a single line appear the way you want it.

EDIT: http://msdn.microsoft.com/en-us/library/aa327556(v=VS.71).aspx

DrawLine is supposed to take Point structures, why are you calling it with separate coordinates?

Code:
[C#] 
public void DrawLinePoint(PaintEventArgs e)
{
// Create pen.
Pen blackPen = new Pen(Color.Black, 3);
// Create points that define line.
Point point1 = new Point(100, 100);
Point point2 = new Point(500, 100);
// Draw line to screen.
e.Graphics.DrawLine(blackPen, point1, point2);
}

EDIT: NVM I didn't see the overload a bit further down the page.
B
 
Hmm. How's picStar created?

picStar is a picture box on the form.

I'd get rid of the for loop and focus on making a single line appear the way you want it.

EDIT: http://msdn.microsoft.com/en-us/library/aa327556(v=VS.71).aspx

DrawLine is supposed to take Point structures, why are you calling it with separate coordinates?

Because you just can, I'm not sure why but C# lets you and its perfectly valid.

If I manually put in coordanates it works fine.
 
picStar is a picture box on the form.

Because you just can, I'm not sure why but C# lets you and its perfectly valid.

If I manually put in coordanates it works fine.

EDIT: Wait... a 5 sided star has 10 points.

5 line segments, 10 points shared between the line segments.

Is something wrong with the values you calculate?

B
 
Put some debugging outputs in there so you can see what the actual X, Y values are.

I ran this program through QBASIC
Code:
X = 0
Y = 0
Xi = 0
Yi = 0
CONST PI = 3.14159
CONST STARLENGTH = 50

angle = (4 * PI) / 5

FOR i = 1 TO 5
        Xi = X + (STARLENGTH * COS(angle))
        Yi = Y + (STARLENGTH * SIN(angle))

        'LINE (320 + X, 240 + Y)-(320 + Xi, 240 + Yi), 14
        PRINT "X,Y = "; X; Y; ", Xi, Yi = "; Xi; Yi
        PRINT "ANGLE ="; angle

        X = Xi
        Y = Yi
NEXT i

I ended up with:
Code:
X,Y =  0  0 , Xi, Yi = -40.45079  29.38935
ANGLE = 2.513272
X,Y = -40.45079  29.38935 , Xi, Yi = -80.90158  58.77869
ANGLE = 2.513272
X,Y = -80.90158  58.77869 , Xi, Yi = -121.3524  88.16804
ANGLE = 2.513272
X,Y = -121.3524  88.16804 , Xi, Yi = -161.8032  117.5574
ANGLE = 2.513272
X,Y = -161.8032  117.5574 , Xi, Yi = -202.254  146.9467
ANGLE = 2.513272

Get some graph paper out, all those points are on the same line! It draws one big line, in 5 segments
 
Some gotchas:

1. You're calculating the angle the same every time.
2. Your coordinate system is goofy. Where on the screen is -180? +180?
3. C uses radians, not degrees. To convert you have to do radians = degrees * (PI * 180)
 
Also, one more thing. When you do get some points up on the screen, and you've converted to radians, you're going see a pentagon on the screen instead of a star!

Which is close, but not what you want ;)
 
Some gotchas:

1. You're calculating the angle the same every time.
2. Your coordinate system is goofy. Where on the screen is -180? +180?
3. C uses radians, not degrees. To convert you have to do radians = degrees * (PI * 180)

Agree fully on 1 and 2, but 3 is already correct.

From his code.

Code:
angle = 4 * Math.PI / 5;

is in radians and is equivalent to 144 degrees (720/5);

Also, one more thing. When you do get some points up on the screen, and you've converted to radians, you're going see a pentagon on the screen instead of a star!

Which is close, but not what you want ;)

I got a star with some very simple modifications to his code.

1) Make sure your formulas are correct.
2) Understand the coordinate system and make sure all your points are within it (change the starting point and scale (length) if you need to).

See? ;)

EDIT: BTW drawing n C# was on my todo list, so thanks for making me look into it.

B
 

Attachments

  • star.png
    star.png
    32 KB · Views: 113
Try changing the amount of times the loop runs, the angle, etc and you will get all kinds of spirograph type effects.

Also try incrementing/de-incrementing the line length variable.
 
I got it although not by fiddling with code.

Jeez, I cant believe I've forgotten so much or High School geometry.

;) Always good to step back and check what the code is supposed to be doing.

For the record here's the changes I made to your original code besides drawing straight on the form.

Code:
double x = 100, y = 100, xi = 100, yi = 100;

...

xi = x - (starLength * Math.Cos(i*angle));
yi = y + (starLength * Math.Sin(i*angle));

B
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.