Creating Drawings
Tags: c, sdl, graphics, gamedev
Published: 2022-04-17 11:43:34

A few days ago I created these house and ant drawings using C, with help from my father. I made these drawings by using x and y coordinates in a 800 by 600 canvas. I added in colours using the primary colours in programming which are red, green and blue. This is slighly different from painting because you are mixing different shades of light together.

## house.c

```C
#include "basic.h"

void draw(void)
{
	// sky
	colour(0, 100, 250);
	rect(0, 0, 800, 500);

	// sun
	colour(200, 200, 50);
	circle(100 + frame, 100, 70);

	// grass
	colour(0, 250, 100);
	rect(0, 500, 800, 100);

	// house
	colour(200, 50, 30);
	rect(200, 300, 400, 300);

	// door
	colour(250, 120, 100);
	rect(340, 400, 120, 200);

	// windows
	colour(80, 150, 200);
	circle(270, 400, 50);
	circle(530, 400, 50);

	// roof
	colour(170, 30, 20);
	tri(400, 100, 650, 310, 150, 310);
}
```

{% embed https://www.youtube.com/watch?v=vYBQGrFtMf8 %}

This is my house program, a simple program to draw a house. I will explain how I did this step by step. 
 
On the first line we have written `#include "basic.h"`. This is a library we wrote which allows us to draw simple shapes such as rectangles, circles and triangles, and add colour into our program. The function names are abbreviated to `rect` and `tri` while `circle` stays the same.

`void draw (void)` is the main fuction in this program.

First I set the drawing colour using the `colour` function, for example `colour(0, 100, 250)`. These numbers represent red, green and blue in that order. The numbers go from 0 to 255, 255 being very bright and 0 being nothing. When you want another colour you can combine multiple colours to make something different.

The next thing to do after you have made your colour is to create the shape that will hold that colour. I had the options to chose from rectangle, circle and triangle. I chose a rectangle for the main part of the house. The `rect` function takes four numbers which have different meanings, while `circle` takes only three numbers, and `tri` takes six. For the rectangle these numbers represent the x and y coordinates of the top left corner and the width and height. For the circle they are the x and y coordinates of the center and the radius. For the triangle it has x and y coordinates for each corner of the triangle.

You may have noticed under the sun category next to the x coordinate of the circle it says `+ frame`. This makes it move to the right side frame by frame. If you did this to the y coordinate it would move down.

## ant.c

```C
#include "basic.h"

void draw(void)
{
	// ground
	colour(0, 110, 20);
	rect(0, 0, 800, 600);

	// front legs
	colour(200, 190, 0);
	line_width = 10;
	line(460, 300, 450, 400);
	line(460, 300, 450, 200);
	line(450, 200, 460, 60);
	line(450, 400, 460, 540);

	// middle legs
	colour(200, 100, 0);
	line(430, 300, 370, 420);
	line(430, 300, 370, 180);
	line(370, 180, 240, 120);
	line(370, 420, 240, 480);

	// back legs
	line(330, 380, 430, 300);
	line(330, 220, 430, 300);
	line(330, 220, 120, 200);
	line(330, 380, 120, 400);

	// thorax
	colour(110, 40, 10);
	circle(409, 300, 32);

	colour(130, 60, 10);
	circle(460, 300, 30);

	// neck
	colour(100, 30, 0);
	line_width = 30;
	line(470, 300, 550, 300);

	// head
	colour(0, 160, 20);
	circle(560, 300, 50);

	// abdomen
	colour(0, 200, 20);
	circle(330, 300, 50);
	tri(320, 350, 220, 300, 320, 250);

	// eyes
	colour(0, 0, 0);
	circle(560, 255, 17);
	circle(560, 345, 17);

	colour(255, 255, 255);
	circle(570, 255, 3);
	circle(570, 345, 3);

	// antennae
	line_width = 10;
	colour(100, 30, 0);
	line(580, 270, 595, 200);
	line(580, 330, 595, 400);
	line(593, 400, 750, 450);
	line(593, 200, 750, 150);
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oefya4q1zyzu1mj5ivj1.png)

This is my ant program which is quite similar to the last one I explained so I will only cover the new information, which is mostly about lines.

With lines you can change the width just like this: `line_width = 10`. If we change the `10` to some other number, making the number smaller makes the line thinner, making the number larger makes the line thicker.

We used lines 10 pixels wide to draw the ant's legs and antennae, and a 30 pixel wide line to draw the ant's neck.

Next post: [Making a Christmas Tree](https://dev.to/gamedev/making-a-christmas-tree-59l3), by Sean
Previous post: [kisskit: Simplifying Game Dev in C](https://dev.to/gamedev/kisskit-simplifying-game-dev-in-c-3hjd), by Sam
Contents: [Game Dev From Scratch](https://dev.to/gamedev/game-dev-from-scratch-2do1)