Enter your c4eng directory by using the cd command like so:

cd src/fall2023/c4eng/

Now make a directory for the project gtf0 using the mkdir command:

mkdir gtf0

And use cd to enter it.

You can now use the grabit command to get the project files for gtf0:

grabit c4eng gtf0

You can use ls to check that the correct files are there. You should see 2 files, Makefile and gtf0.c.

The first step in adding files to the repository is being in the folder where the files you want to add are in. Once you've “cd”-ed into the desired folder write the command below.

hg add

After you've added the files, then you want to commit them. This can be done using the command below. Once the command has been entered it will take you to a nano window.

hg commit

In the nano window you will want to “officially” commit your files with the command below, which also has a message associated with the commit for future reference. Example of message could be “version 3 of gtf0”.

hg commit m-"message"

After exiting and saving the nano window write the following command in the terminal to push your files to the repository server. In the terminal it will show you that the files have been added.

hg push

To verify you can preform the following commands that will provide info on your “commits/pushes” in the terminal.

hg status

and/or

hg log

To edit the gtf0 file, you can use the following command:

nano gtf0.c

You can scroll down and edit the sizes and colors of various shapes. Keep in mind that a color has to be defined, and every color has to be used, for the make command to work.

After you are finished editing the code, and you want to check what it looks like, yo have to compile it with the following command:

make

Then, you can create the gtf0.png with the command:

./gtf0

Doing this allows you to copy the image to your public html, which is shown in the next step. If the image already exists, you may have to replace it by typing y when it asks you to overwrite the existing image.

Depending on your development environment, there are different ways you can view the image. If you're developing on your own system (Raspberry Pi 4, your PC, or some other device), you can simply open the PNG from the folder, or in the terminal use the open command to open gtf0.png.

If you're developing in the lab46 shell, then one of the easiest ways to view the PNG is through the browser after copying it to your ~/public_html folder and making it world-readable.

You can do this with the following set of commands:

cp gtf0.png ~/public_html
chmod 0644 ~/public_html/gtf0.png

Once you've copied it to your ~/public_html directory, and made it readable, you can go to the URL lab46.g7n.org/~USERNAME/gtf0.png, where USERNAME is your username, in your browser to view the image.

We can add our own colors to be used in our PNG as well. The first step in doing so is to declare our color as a variable.

At the top of our file, right below int main(), we can see a section with some commented out text that reads “Declare variables”. In the actual code, we can already see some declared colors! For example, there's int white = 0;

So now we know how to declare a color for ourselves. Add another line, and try to maintain the same spacing for readability. You can name your color whatever you'd like, however there are some restrictions for naming variables in C. We should also maintain the same naming conventions that have already been used for readability.

For example, you can add int orange = 0;

Right now, the number you're assigning should just be 0. We will change this later using a number format that's more apt for color assignments.

If we scroll down in our code a bit, we'll find the names of all of the colors that were already there across from this peculiar gdImageColorAllocate function. This is actually how we'll be assigning our desired RGB (Red, Green, Blue) values to our colors.

Let's add our example color, orange, to this list. We can write something like this:

orange = gdImageColorAllocate (image, 0x00, 0x00, 0x00); 

But we haven't actually assigned any RGB values yet. This is, however, a nice way to set it up before we pick our exact color and replace the 0x00 values to match.

If you've ever worked with colors digitally, whether in photoshop or in HTML/CSS, you may be familiar with the concept of color hex codes. They tend to look something like this: #FF0000

This can actually be separated into 3 color values (2 digits each) that mix together. Red, green, and blue. They are written in hexadecimal, which uses letters A-F for certain number values (F being the highest value digit). With this in mind, you might have noticed that our example #FF0000 makes a color that is all red, with no green or blue mixed in.

We don't have to spend time mixing values of red, green, and blue until we get our desired colors. We can actually just use Google's color picker in our browser, which will then supply us a hex code value. Simply search “color picker” on Google, and you'll be met with one!

Now I've gone ahead and picked a nice shade of orange, but remember that you can use any color you want (and name it accordingly). Underneath that rainbow gradient bar you'll find a box titled “HEX”. This is where we'll find the numbers and letters we need. In my case, #ff9114.

But how do we assign this to our orange variable? Well, you might notice that white has values 0xFF, 0xFF, 0xFF. White's hex code looks very similar: #FFFFFF. In the case of the gdImageColorAllocate function, we are to input the red, green, and blue values separately (FF, FF, FF). You may be wondering what the 0x is for. Well, in C, that tells the computer that the number it's receiving will be in hexadecimal, rather than our natural base 10. We put 0x00 as placeholders, but we can change that now. In the case of the shade of orange I picked, #ff9114, I would replace the 0x00 values with 0xFF, 0x91, 0x14, respectively.

Altogether, the line of code should look something like this:

orange = gdImageColorAllocate (image, 0xFF, 0x91, 0x14); 

Remember to match your spacing to the rest of the code for readability!

Now that we've added our color, we can use it in our code when we start to draw shapes, simply passing it to any function we use as “orange”.