Nenjine

Preamble

Hey all. After scouring the internet for code on how to find the distance between the center of an elipse and the edge given a specific angle and comming up empty handed, i've decided to make this tutorial so you don't have to nut it out like I did. This project was made in GameMaker Studio:2.3, but will work with anything after GameMaker 1.4. In this tutorial you'll learn:

How GMS:2 draws elipses.
How to draw an elipse from scratch.
How drawing your own elipse can be useful.

How they do elipses.

draw_elipse()

draw_elipse_colour()

Before we dive into writing our own elipse drawer we should probably look at the native functions for drawing elipses so that you don't reinvent the wheel when you don't have to. GMS:2 has two basic elipse drawing functions: draw_elipse and draw_elipse_colour.

Both of these work perfectly well as long as you know where and how big you want to draw your elipse, but other than that, they are useless because you can't use the math for anything. This is where knowing how to make your own elipses comes in.

Setting things up.

The way were going to draw our elipse is by first drawing a circle, finding where the edge of it is when given an angle, and then steping through a bunch of them to draw points on the circle.

To start, we need to define some variables in the draw event:

var radius = 20
var points = 2 * pi / 20

The radius variable is the distance between the center of the circle and the edge. The points variable is the angle to incriment every pixel we draw on the circle. To find this we double pi and then divide it by the amount of points we want to draw.

Drawing our circle.

sin()

cos()

We want to next setup a for loop, starting at 0 and going to two times pi, and incrimenting by our points variable every time.

for (var i = 0; i < 2 * pi; i += points) {

}

Now we just need the math to figure out how far away the edge of the circle is, based on the direction.

for (var i = 0; i < 2 * pi; i += points) {
	
	var xx = radius * cos(i);
	var yy = radius * sin(i);
	
	draw_point(x + xx, y + yy)
	
}

We can figure out the distance by using the sin and cos functions on the direction and timesing by the radius.

This code will start drawing relative to the center point of the circle, so we we'll just put it centered on the object for demonstration purposes.

Making it an elipse.

Although this may seem like the most complicated step, it is actually the easiest. To squash our circle we need to times our math by a negative number, and to sretch it we just times it by a positive number. To do it on the vertical axis we do it to the y line of math and for the horizontal axis we do it to the x line of math.

We can add this easily by setting up two new variables, x_scale and y_scale

var radius  = 20;
var points  = 2 * pi / 20;
var x_scale = 1;
var y_scale = 0.5;

for (var i = 0; i < 2 * pi; i += points) {
	
	var xx = x_scale * radius * cos(i);
	var yy = y_scale * radius * sin(i);
	
	draw_point(x + xx, y + yy)
	
}

That's it. That's all you need to draw your own elipses.

Postamble.

What I needed this for, was to track what position arms needed to be on an isometric circle in a colaborative project i've been working on.

var p_d = point_direction(x, y, mouse_x, mouse_y);

attached_x = xprevious +        cos((2 * pi / 360) * p_d);
attached_y = yprevious + -0.5 * sin((2 * pi / 360) * p_d);

In this code you can see how we split up the elipse into 360 diffrent points, and then figured out what one we needed just by timesing it by the direction of our arms.

I haven't quite figured out how to do angled elipses as of yet, so if you do know how to add angles to elipses feel free to contant me here.