Differences

This shows you the differences between two versions of the page.

--- notes:c4eng:fall2023:projects:gtf0 [2023/09/04 00:15] – [MIXING A COLOR] mwinter4
+++ notes:c4eng:fall2023:projects:gtf0 [2023/09/07 17:56] (current) – [REPOSITORY STEPS] nbutler5
@@ Line 15: / Line 15: @@
 You can use <wrap hi>ls</wrap> to check that the correct files are there.
 You should see 2 files, <wrap hi>Makefile</wrap> and <wrap hi>gtf0.c</wrap>.
 =====REPOSITORY STEPS=====
-=====BUILD THE CODE=====
+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.
+<code/>hg add</code>
+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.
+<code/>hg commit</code>
+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".
+<code/>hg commit m-"message"</code>
+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.
+<code/>hg push</code>
+To verify you can preform the following commands that will provide info on your "commits/pushes" in the terminal.
+<code/>hg status
+and/or
+hg log</code>
+=====BUILD THE CODE=====
+To edit the gtf0 file, you can use the following command:
+<code/>nano gtf0.c</code>
+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.
 =====RUN THE PROGRAM=====
+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:
+<code/>make</code>
+Then, you can create the gtf0.png with the command:
+<code/>./gtf0</code>
+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.
 =====VIEW THE 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 <wrap hi>open</wrap> command to <wrap hi>open gtf0.png</wrap>.
+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 <wrap hi>~/public_html</wrap> folder and making it world-readable.
+You can do this with the following set of commands:
+<code>
+cp gtf0.png ~/public_html
+chmod 0644 ~/public_html/gtf0.png
+</code>
+Once you've copied it to your <wrap hi>~/public_html</wrap> directory, and made it readable, you can go to the URL <wrap hi>lab46.g7n.org/~**USERNAME**/gtf0.png</wrap>, where **USERNAME** is your username, in your browser to view the image.
 =====LIBGD FUNCTIONALITY=====
@@ Line 38: / Line 79: @@
 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 <wrap hi>gdImageColorAllocate</wrap> 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:
+<code>orange = gdImageColorAllocate (image, 0x00, 0x00, 0x00); </code>
+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 <wrap hi>0x00</wrap> 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: <wrap hi>#FF0000</wrap>
+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 <wrap hi>#FF0000</wrap> 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 <wrap hi>0xFF</wrap>, <wrap hi>0xFF</wrap>, <wrap hi>0xFF</wrap>. White's hex code looks very similar: <wrap hi>#FFFFFF</wrap>. In the case of the <wrap hi>gdImageColorAllocate</wrap> function, we are to input the red, green, and blue values separately (FF, FF, FF). You may be wondering what the <wrap hi>0x</wrap> 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 <wrap hi>0x00</wrap> as placeholders, but we can change that now. In the case of the shade of orange I picked, #ff9114, I would replace the <wrap hi>0x00</wrap> values with <wrap hi>0xFF</wrap>, <wrap hi>0x91</wrap>, <wrap hi>0x14</wrap>, respectively.
+Altogether, the line of code should look something like this:
+<code>
+orange = gdImageColorAllocate (image, 0xFF, 0x91, 0x14);
+</code>
+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".
 ====DRAWING A LINE====

Lab46 Wiki

User Tools

Site Tools

Differences

Page Tools