There are a lot of 'moving parts' to our JS Grafix Sandbox, and it's easy to get overwhelmed. We'll try to provide some answers here so you can start making some awesome designs.
Note: While we are in a state of renovation at TNT and JSGS, certain links or functionalities may be non-operational. Some shape property tables may be incomplete. Give it time, and 'all power will be restored'. We promise!
Remember, you can always visit our legacy site to see earlier versions of this ecosystem.
About TNTColors:
All shapes require either a fill color, a border color (called a stroke) or both. Either way, they are color properties.
Although there are several ways to describe color to a web element, we use the RGB color model in the sandbox. This model specifies that all colors can be created with just 3 tints: red, green and blue, in an integer interval of [0, 255].
Many standard colors are pre-fabricated at the beginning of the TNT Graphics Library. We try to add a few more each year.
You can easily create your own using information found in the table below.
If you need to design a color 'from scratch,' and then create a TNTColor from there, check out our Color Sliders App, inspired by novice Heath B. in 2020. It will let you design a color based on the RGB color model and from there, you can construct a TNTColor.
TNTColor Features and Usage:
| Primary Attributes: |
red tint (rt), green tint(gt), blue tint(bt) (all integers in [0,255]) along with a descriptive color name |
|---|---|
| To Create: |
Note: The 3 numbers must be whole numbers for red, green, and blue tint respectively; the description is just the color's name, usually just the variable's identifier. |
| Comments: | TNTColors and TNTStrokes are often confused. A TNTStroke is an object that has a TNTColor and a thickness. See the help section for TNTStoke. |
| Even More: |
If an element calls for a TNTColor and you do not wish to provide one, you can use the word 'null' as a place holder instead. |
About TNTStrokes:
In computer graphics a border on a shape or element is often referred to as a 'stroke.' That word choice was not, unfortunately, a stroke of genius!
Loosely speaking, a TNTStroke is an object that contains a TNTColor (scolr for 'strokeColor') and a thickness (known as lineWidth).
In the TNT Graphics Library, we were careful to create matching strokes for each of the TNTColors. So, for example, when we created the TNTColor 'maroon' we also created the TNTStroke 'maroonStroke.' Check the library to see a list of the current strokes available. We add new strokes as we add new colors.
You can easily create your own strokes (after you make a given color) using information found in the table below. Once a stroke is created, it's color and thickness can be modified.
If you need to design a color 'from scratch,' and then create a TNTColor from there, check out our Color Sliders App, inspired by novice Heath B. in 2020. It will let you design a color based on the RGB color model and from there, you can construct a TNTColor and TNTStroke.
TNTStroke Features and Usage:
| Primary Attributes: |
TNTColor known as 'scolr' and lineThickness (decimal number > 0) |
|---|---|
| To Create: |
Note: The first word must be a color in the TNT library (or one you correctly created yourself); numbers must larger than zero, but decimals are permitted. |
| Changing lineThickness or color |
Functions ' A fast way to change a TNTStroke thickness: Assume you have a pre-existing TNTStroke called 'whiteStroke.' Use:
|
| Comments: | Newbie's often provide a TNTColor (like 'maroon') for a stroke, instead of a TNTStroke (like TNTStroke). Get in the habit of naming your stroke variables descriptively, like 'navyStroke' - use a color followed by a 'Stoke' designation. See the use of camel case? |
| Even More: |
If an element calls for a TNTStroke and you do not wish to provide one, you can use the word 'null' as a place holder instead, and a border will not be provided. |
Modifying Shapes/Designs Online with Chrome:
On a desktop device, in Google Chrome (possibly other browsers if you are clever), it's possible to modify some aspects of the library shapes and/or designs within the browser! No IDE required!
Take these steps:
- Open a page for a library graphics element you wish to investigate, like TNTDisk
-
Open the Developer Tools Panel:
- Shift-Control-J or Right-Mouse-Click Canvas >'Inspect'
- Click on the 'Sources' tab
- In the left 'fly-out' window/panel while viewing 'Sources', you will see the HTML page you selected highlighted, such as 'tntDisk.html'
- Above that selected file, there is a
scriptsfolder that houses the JavaScript code that made the image - Click on that folder and you will see a
.jsfile that matches the name of the HTML file you're viewing - Select (click on) that file and in the right panel you will see the source code for the image
- Find the function drawMyDesign Most of the modifications you might like to make are there, but there could be others in initialize or makePicture
- Valid modifications you make there, (once saved using 'Control-S') can be activated by hitting the 'Reload' button on the library page, next to the image. (The file tab shows a (*) for unsaved changes)
- Your changes are not permanent; once you refresh the page with Chrome's 'Refresh' button (the circular arrow icon), or navigate away from it, those temporary changes are lost
If you are a movie fan, hike on over to a screencast we made to illustrate the process of modifying a TNTSquare within Chrome using Chrome Developer Tools.
Make your own designs?!:
Why don't you have your own design fun?! Navigate to our Novice Design Template and in the 'Notes' area, there is a link to download a 'zip' file of a complete file system with everything you need to create your own pixel-perfect masterpiece!