Creating Drawings

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

#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);
}

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

#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);
}

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, by Sean
Previous post: kisskit: Simplifying Game Dev in C, by Sam
Contents: Game Dev From Scratch