Introduction: How to Make a Straight-line Curve Vortex in Game Maker

The straight-line vortex illusion has fooled many. Basically, it is a diamond-shape, that, instead of having striaght lines on the end, has curved lines around the core. However, what is unknown, is that the curves are actually made up of all straight lines.

Now, this is quite easy to make on a sheet of paper, but what about in hard code?

Step 1: Setting It Up

We will begin by starting a new project in Game Maker. I am using version 8, but this will work with versions 6 or 7 too. Create a new object by clicking on the blue ball on the toolbar. In that object's properties, you will add a Draw Event.

Step 2: Execute That Code!

We will be doing this by using code, however, it is easy to convert to drag and drop icons. Begin by dragging over an 'Execute Code' icon in the control tab of the object's properties.

There are a few steps to executing this piece of code:
1) Setting up both axes (X and Y) to be visible. This is not only part of the finished product, but it also makes the origin, the important point that all of the lines will be built from
2) Drawing the diagonal lines to a point on the perpendicular axis. This is the basis of the illusion.
3) Repeating the last step on each quadrant of the graph.

Step 3: Type That Code!

Here is the complete code to make what you see in the introduction. Each line is commented thoroughly.

//Draw the planes, both x and y, keeping the origin in the center
draw_line(x,y,x,y-128)
draw_line(x,y,x,y+128)
draw_line(x,y,x-128,y)
draw_line(x,y,x+128,y)

/*DRAW THE FIRST SHAPE*/
//Draw diagonal line 1:
draw_line(x,y-16,x+128,y)
//Draw diagonal line 2:
draw_line(x,y-32,x+112,y)
//Draw diagonal line 3:
draw_line(x,y-48,x+96,y)
//Draw diagonal line 4:
draw_line(x,y-64,x+80,y)
//Draw diagonal line 5:
draw_line(x,y-80,x+64,y)
//Draw diagonal line 6:
draw_line(x,y-96,x+48,y)
//Draw diagonal line 7:
draw_line(x,y-112,x+32,y)
//Draw diagonal line 8:
draw_line(x,y-128,x+16,y)

/*DRAW THE SECOND SHAPE*/
//Draw diagonal line 1:
draw_line(x,y-16,x-128,y)
//Draw diagonal line 2:
draw_line(x,y-32,x-112,y)
//Draw diagonal line 3:
draw_line(x,y-48,x-96,y)
//Draw diagonal line 4:
draw_line(x,y-64,x-80,y)
//Draw diagonal line 5:
draw_line(x,y-80,x-64,y)
//Draw diagonal line 6:
draw_line(x,y-96,x-48,y)
//Draw diagonal line 7:
draw_line(x,y-112,x-32,y)
//Draw diagonal line 8:
draw_line(x,y-128,x-16,y)

/*DRAW THE THIRD SHAPE*/
//Draw diagonal line 1:
draw_line(x,y+16,x+128,y)
//Draw diagonal line 2:
draw_line(x,y+32,x+112,y)
//Draw diagonal line 3:
draw_line(x,y+48,x+96,y)
//Draw diagonal line 4:
draw_line(x,y+64,x+80,y)
//Draw diagonal line 5:
draw_line(x,y+80,x+64,y)
//Draw diagonal line 6:
draw_line(x,y+96,x+48,y)
//Draw diagonal line 7:
draw_line(x,y+112,x+32,y)
//Draw diagonal line 8:
draw_line(x,y+128,x+16,y)

/*DRAW THE FOURTH SHAPE*/
//Draw diagonal line 1:
draw_line(x,y+16,x-128,y)
//Draw diagonal line 2:
draw_line(x,y+32,x-112,y)
//Draw diagonal line 3:
draw_line(x,y+48,x-96,y)
//Draw diagonal line 4:
draw_line(x,y+64,x-80,y)
//Draw diagonal line 5:
draw_line(x,y+80,x-64,y)
//Draw diagonal line 6:
draw_line(x,y+96,x-48,y)
//Draw diagonal line 7:
draw_line(x,y+112,x-32,y)
//Draw diagonal line 8:
draw_line(x,y+128,x-16,y)


Click the green check mark in the top left of the code editor, and press OK to apply the changes on the object you created.

Step 4: Place the Object

Create a new room. Make sure the 'Objects' tab on the left is selected and place the object. A blue square with a question mark should show up, as this does not have any sprite assigned to it. Press the green check mark in the top left, and run the game normally (F5). Congratulations, you should see a nice illusion!

Step 5: Dissecting the Code

This little part draws the axes. You can change the coordinates to make different angles, but beware, as you will need to keep a number evenly divisible by 360 to keep the shape complete. Some interesting angles to try are 45 degrees (8 quadrants), 30 degrees (12 quadrants), and 120 degrees (3 quadrants).
//Draw the planes, both x and y, keeping the origin in the center
draw_line(x,y,x,y-128)
draw_line(x,y,x,y+128)
draw_line(x,y,x-128,y)
draw_line(x,y,x+128,y)

The rest of the code draws the diagonal lines for the first, second, third, and fourth quadrants, respectively.

/*DRAW THE FIRST SHAPE*/
//Draw diagonal line 1:
draw_line(x,y-16,x+128,y)
//Draw diagonal line 2:
draw_line(x,y-32,x+112,y)
//Draw diagonal line 3:
draw_line(x,y-48,x+96,y)
//Draw diagonal line 4:
draw_line(x,y-64,x+80,y)
//Draw diagonal line 5:
draw_line(x,y-80,x+64,y)
//Draw diagonal line 6:
draw_line(x,y-96,x+48,y)
//Draw diagonal line 7:
draw_line(x,y-112,x+32,y)
//Draw diagonal line 8:
draw_line(x,y-128,x+16,y)

/*DRAW THE SECOND SHAPE*/
//Draw diagonal line 1:
draw_line(x,y-16,x-128,y)
//Draw diagonal line 2:
draw_line(x,y-32,x-112,y)
//Draw diagonal line 3:
draw_line(x,y-48,x-96,y)
//Draw diagonal line 4:
draw_line(x,y-64,x-80,y)
//Draw diagonal line 5:
draw_line(x,y-80,x-64,y)
//Draw diagonal line 6:
draw_line(x,y-96,x-48,y)
//Draw diagonal line 7:
draw_line(x,y-112,x-32,y)
//Draw diagonal line 8:
draw_line(x,y-128,x-16,y)

/*DRAW THE THIRD SHAPE*/
//Draw diagonal line 1:
draw_line(x,y+16,x+128,y)
//Draw diagonal line 2:
draw_line(x,y+32,x+112,y)
//Draw diagonal line 3:
draw_line(x,y+48,x+96,y)
//Draw diagonal line 4:
draw_line(x,y+64,x+80,y)
//Draw diagonal line 5:
draw_line(x,y+80,x+64,y)
//Draw diagonal line 6:
draw_line(x,y+96,x+48,y)
//Draw diagonal line 7:
draw_line(x,y+112,x+32,y)
//Draw diagonal line 8:
draw_line(x,y+128,x+16,y)

/*DRAW THE FOURTH SHAPE*/
//Draw diagonal line 1:
draw_line(x,y+16,x-128,y)
//Draw diagonal line 2:
draw_line(x,y+32,x-112,y)
//Draw diagonal line 3:
draw_line(x,y+48,x-96,y)
//Draw diagonal line 4:
draw_line(x,y+64,x-80,y)
//Draw diagonal line 5:
draw_line(x,y+80,x-64,y)
//Draw diagonal line 6:
draw_line(x,y+96,x-48,y)
//Draw diagonal line 7:
draw_line(x,y+112,x-32,y)
//Draw diagonal line 8:
draw_line(x,y+128,x-16,y)




We use 'x' and 'y' several times in this code, and yet it does not give errors even though it has no defined value. It does, actually, have a value. In the room's properties, where you placed the object, it is automatically given an X and Y coordinate. These are the values we build on in this shape.

Step 6: Practices to Try

Here are some exercises for this project.

1) Making different shapes. You must make the origin at the center for this to work correctly.
2) Making the shape draw on the center of the screen. I suggest using variables 'room_width' and 'room_height'.
3) Make a scrolling, color-changing screensaver. This is actually possible and not very difficult.

Comments

author
wewexteriors made it! (author)2010-08-06

Thanks, this will add to my learning!!!

author
Shelby S made it! (author)Shelby S2010-08-08

I suggest you use a for-loop. I posted on later in this instructable, I think on the intro page.

author
goldenbacon made it! (author)2010-07-20

SHELBYYY

author
Shelby S made it! (author)Shelby S2010-07-24

Yes.

author
PKM made it! (author)2010-07-06

Here's an exercise for you- condense that code to make it shorter and more flexible using loops.  I think the code for each quadrant could be condensed to two lines (and some curly braces).  Can you do it?

Hint 1: I think it will look something like this (with the question marks replaced with actual code)
 

for (???; ???; ???)
{
  draw_line(??????);
}

Hint 2: that type of code is called a "for loop"- you can find out all you ever wanted to know about for loops with a quick Google search.
author
Shelby S made it! (author)Shelby S2010-07-06

I know all about for-loops, thank you very much. ;) I never thought of condensing this like that. I am working on it now, and I will post this reduced code later. Even if I did think of it, I will not edit the instructable, as this tutorial is geared towards people unfamiliar with drawing functions.

author
Shelby S made it! (author)Shelby S2010-07-06

var i, dist, num; /*Registers three variables- one for the loop, one for the distance between points, and one for the number of points.*/ dist = 16; //distance between points num = 8; //number of points drawn on each axis for (i = -num; i <= num; i += 1) //The loop. { draw_line(x, y + i*dist, x + (num - abs(i))*dist, y); draw_line(x, y + i*dist, x - (num - abs(i))*dist, y); } ___________ It's really simple, and you could actually make a script for this, using arg0 for dist, and arg1 for num.

About This Instructable

7,573views

2favorites

License:

More by Shelby S:How to Make a Straight-line Curve Vortex in Game Maker
Add instructable to: