siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT Two-Toned Square

Your browser does not support HTML5 Canvas
Notes:

TNT Two-Toned Squares feature a square divided into four quarters; each quarter can have one of 2 different colors.

It's been used to produce some cool optical illusions.

Features and Usage:

Primary Attributes:

7 Parameters:
center(TNTPoint), side(double), type(int: 1-4), fillColor1(TNTColor), fillColor2(TNTColor), borderStroke, rotationDeg(double)

Note: type: 1 = 2 rectangles; 2 = 2 rightTriangles; 3 = 4 squares, 4 = 4 triangles
To Create: (The 4 examples above)

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.