Color - GeorgeGkas/isometricObelisk.js GitHub Wiki

Last method that allows to define the style of your primitive is the color(). In this section we will talk about the isometricObelisk color system. As this one can turn out to be quite advance, we will divide it into two subsections that refer to basic and advance usage.

Basic

To “paint” your object you should call the color() method. In it's simple form, the color method takes as parameter a string with RGB hex values - like #ffffff. Consider the bellow pyramid:

To paint it with a nice pink color, we use hexadecimal values started with # (sharp) letter. Let's create a pyramid primitive positioned in the start point with pink color. We execute the method like this:

_isometric.pyramid().position().color('#FF5F6D').render();

And now our shape is PINK!

Note: You just show the use of the last available method called render(). Please hang by until the next chapter to learn how to FINALLY render your object to canvas.

Advance

Let's consider the situation where you want each side of a primitive to have a different color value. In obelisk.js this feature is somewhat hidden, as there is nowhere in the official documentation.

To get started you have to provide two parameters in color() method. The first one is sting with value seated to 'custom', where the second is an object where the keys represent the side you want to color. The available key in object are shown bellow.

top: String('hexadecimal_color_value'),
side: String('hexadecimal_color_value'),
font: String('hexadecimal_color_value')

The bellow code is used as an example of the above image.

_isometric.slopeEast().position().color('custom', {
    side: '#854365'
}).render();

Important: The above keys are not used in all of the primitives. Each one use some or all of them and each shape it defines them different. So the side of a slopeNorth primitive is not the same as the side of a slopeEast one. To get a full illustrated reference on color-side matching on each primitive see Appendix B.

Default Value

The default value of color value for the method is EEEEEE.