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