User Tools

Site Tools


notes:c4eng:fall2023:projects:gtf0

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
notes:c4eng:fall2023:projects:gtf0 [2023/09/04 00:45] – [MIXING A COLOR] mwinter4notes: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 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>. You should see 2 files, <wrap hi>Makefile</wrap> and <wrap hi>gtf0.c</wrap>.
 +
 +
 +
 +
 =====REPOSITORY STEPS===== =====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===== =====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===== =====VIEW THE IMAGE=====
Line 64: Line 94:
 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.  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, 0xFF, 0xFF</wrap>. White's hex code looks <wrap hi>very similar: #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). But why the <wrap hi>0x</wrap>Well, in C, that tells the computer that the number its receiving will be in hexadecimal, rather than our natural base 10. +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'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==== ====DRAWING A LINE====
  
notes/c4eng/fall2023/projects/gtf0.1693788308.txt.gz · Last modified: 2023/09/04 00:45 by mwinter4