DEV Community: Thalia Watkins

Creating Drawings

Thalia Watkins — Sun, 17 Apr 2022 11:43:34 +0000

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

My Simple Programs

Thalia Watkins — Wed, 06 Apr 2022 10:16:04 +0000

Recently I've been learning how to create some basic programs in the C programming language with my father and brother.

hello.c

#include <stdio.h>

int main(void)
{
        printf("Hello, world\n");
        return 0;
}

This is the first program we wrote, which says "Hello, world". On the first line we included stdio which is a library of functions. "stdio" stands for standard input / output.

The next part of our program is the main function. Every C program must have a main function to work.

int stands for integer, which is a whole number. The line int main(void) means that our main function returns a whole number to say if the function worked or failed. It returns 0 if it worked, or any other number if it failed.

The void means that we ignore any extra words on the command-line.

The printf stands for print formatted. This is a function that we use to output words. The \n at the end of the string stands for newline, it moves onto the next line.

The last of the function return 0; means that our program succeeded.

hello_name.c

#include <stdio.h>

int main(void)
{
        char *name = "Bongo2";

        printf("Hello %s\n", name);
}

In our second program, we changed it so that we print someone's name instead of "world", for example, "Bongo2". We created a string variable called name, and set it to "Bongo2".

In the printf %s stands for a string. In this case, the string is the name variable, which we set to "Bongo2".

maths.c

#include <stdio.h>

int main(void)
{
        int a = 18;
        int b = 6;

        printf("The answer is %d\n", a * b);
}

The last program we wrote was to do with maths. We used two int variables called a and b, and gave them the values 18 and 6.

The %d in the printf format string is going to print a whole number. The "d" stands for decimal or base 10. The number it prints is a calculation, a times b, which equals 108.

Next post: Loops and Math in C, by Sean
Previous post: Deciding on a Programming Language for Game Dev, by Sam
Contents: Game Dev From Scratch