JavaScript Grafix Sandbox

With HTML5, CSS3 and JavaScript, complex graphics may be done with ease! In this project, you will be creating original designs using basic images from the TNT Graphix Library

1. Examine the basic shapes in the TNT Library
2. Using Firefox and an 'add-on,' Firebug, you can modify any basic shape in the library by manipulating the JavaScript in the web page! If you need to design some colors, you can use the RGB to Hex JavaScript App to find colors to your liking.
3. Try manipulating the existing library shapes using Firebug. You can even add additional shapes and even functions!
   1. Launch Firefox
   2. If necessary, add the Firebug 'add on'
   3. Launch Firebug. (It's easiest if you position the control panel on the right of your screen).
   4. Select the "HTML" tab in Firebug
   5. In Firebug, navigate to body>div id content>script
   6. Click on the word 'script' and then click 'Edit' in the Firebug control panel
   7. It's in that region that you can modify the existing code using standard coding principles in JavaScript.
   8. If you mess up, close Firebug (Small red 'power' button on console) and start over!
   9. To see the graphics library 'engine' functions, select the "Script" tab in Firebug and you will see the underlying graphics code for the entire graphics library!
   10. HTML ENTITIES ALERT!: When using Firebox, some symbols such as '<' or '>' in the Firebug code panel will be converted to their associated 'HTML Entity' code. (For example: '<' becomes: &lt; ) There are technical reasons this happens. If it does, you must manually go in and change them back to their actual symbols for the scripts to work. It's a hassle but worth it. These events happen most often in loops and if-else blocks where decisions are made based on the concepts of 'less than' or 'greater than'. Be careful out there!
4. Once you are feeling confident manipulating library shapes, you can create your own! Open the Grafix Sandbox app and create your design using Firebug in Firefox. It's much easier to make a formal design if you have sketched it out on a piece of graph paper first. Remember, if YOU can't make something yourself, how can you get a computer to do it? (Just say'n.)
5. Remember, once you leave Firebug, your changes will not be remembered. If you want to keep any of your designs, open a separate document and store your script there.
6. When you are happy with your design, you can either print it out or take a screenshot of it. To make a screenshot with a Mac, use 'Shift-Command-4" and draw a 'frame' around your design. On a PC, use the 'Snipping Tool" app.
7. Have Fun!