Need some help?
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.
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 Saga, inspired by H. Booker (2020). It will let you design a color based on the RGB color model and from there, you can construct a 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: |
var maroon = new TNTColor(180, 0, 50, "maroon"); 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. |
Last update: 02/10/20
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.
Features and Usage:
| Primary Attributes: | TNTColor known as 'scolr' and lineThickness (decimal number > 0) |
|---|---|
| To Create: |
var maroonStroke = new TNTStroke(maroon, .2); 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 'setStrokeColor(c)' and 'setStrokeLineWidth(t)' can be used to change a TNTStroke's, color or thickness respectively. |
| 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. |
Last update: 02/10/20
Modifying Library Shapes Online:
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 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
- Click on the 'Sources' Tab
- In the left fly-out panel (it has to be open) open the jsgs>libraryPages area
- You will see a PHP source-code file of the library element, like TNTDisk.php
- In the scripts subfolder above it, you will find a JavaScript file with that same name, like TNTDisk.js
- Click on that JavaScript and find the function drawMyDesign
- Valid modifications you make there, (once saved) can be activated by hitting the 'Reload' button on the library page, next to the image.
- Those changes are not permanent; once you refresh the page, 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.
Last update: 02/10/20
