spiralIcon

JSGS Shapes

TNTTwoTonedSquare

Your browser does not support HTML5 Canvas
Notes:

This little fella features a square created with either 2 adjacent rectangles, 2 right triangles, 4 smaller squares or 4 isoceles triangles. Its design was motivated by the desire to create certain optical illusions.

This shape was nicely-utilized in a TNT design: Scattered Peppermints.

TNTTwoTonedSquare Features and Usage:
Primary Attributes:

7 Parameters:

  • center: TNTPoints
  • side: a decimal (known as a 'double' in code)
  • type: an integer, 1<=n<=4
    1. two rectangles
    2. two right triangles
    3. four squares
    4. four triangles
  • fillColor1: TNTColor
  • fillColor2: TNTColor
  • borderStroke: a TNTStroke: to set the border color as well as the thickness of the sides
  • rotationDeg: a 'double' that rotates the square about its center. rotn > 0 ==> counter-clockwise; rotn < 0 ==> clockwise
To Create:

The example above was created by:

var theCenter = new TNTPoint(-5, 5);
var s = 4;
var type = 1;
var fcolr1 = black;
var fcolr2 = blue;
var borderStroke = null;
//upper left
var sqr1 = new TNTTwoTonedSquare(theCenter, s, type, fcolr1, fcolr2, borderStroke, 0);
//version 1: 2 vert rectangles

//upper right
theCenter = theCenter.translate(10, 0);
type = 2;
var sqr2 = new TNTTwoTonedSquare(theCenter, s, type, fcolr1, fcolr2, borderStroke, 0);

//lower right
theCenter = theCenter.translate(0, -10);
type = 3;
var sqr3 = new TNTTwoTonedSquare(theCenter, s, type, fcolr1, fcolr2, borderStroke, 0);

//lower left
theCenter = theCenter.translate(-10, 0); 
type = 4; 
var sqr4 = new TNTTwoTonedSquare(theCenter, s, type, fcolr1, fcolr2, borderStroke, 0);
To Draw: 
    sqr1.drawTNTTwoTonedSquare(context);
    sqr2.drawTNTTwoTonedSquare(context);
    sqr3.drawTNTTwoTonedSquare(context);
    sqr4.drawTNTTwoTonedSquare(context);
Comments:

A work of art, Boli of Bugs by Akiyoshi Kitoka inspired this library entry. We saw the work in a book, Optical Illusions by Inga Menkhoff on p. 23 under the heading, Distortion Illusions.
Even More:

Notice in the 'Create' section above, that TNTPoints have a 'translate' method (aka function) affiliated with them that allow us to translate them to a different location.