Post Capitalist Industrial Icons

Industrial Icons

Influences:

lines on parking structures
Markings on dumpsters
Stripes on emergency vehicls
Caution Markings on industrial machines
Rick and Morty
Buckaroo Banzai Across the 8th Dimension
Invader Zim
Akira
The architecture of mundane objects in the DC metro area
Neotokyo OST

Goals:

Create a framework easily used in all html
Set a apocalyptic mood
Set an industrial mood
Create practical icons for communicating in/on/around industrial machines
Demonstrate the power of Geometron
Build demo code to use on Geometron Trash Printer

Colors

0320:"black"
0321:"yellow"
0322:"orange"
0323:"white"
0324:"red"
0325:"green"
0326:"purple"
0327:"blue"

Diamond Stripes

This is the core of this aesthetic. There are several variables, but I'll start with 45 degrees, and either equal or close to equal sides. Black and yellow are the primary pair, on various backgrounds. For now I'll work with that and tweak geometry.

Begin by making a single unit cell to be repeated, with no color information, and put this in the shape table.

0206:0304,0313,0350,0335,0362,0201,0335,0201,0335,0335,0335,0201,0335,0201,0363,0335,0335,0304,0333,

This figure is chiral so for completeness we also need to add the mirror image of it, which can go in shape address 0207.

0207:0304,0313,0350,0334,0362,0201,0334,0201,0334,0334,0334,0201,0334,0201,0363,0334,0334,0304,0332,

And now we double these with yellow and black to make it very fast to make stripes:

Or in bytecode:

0210:0320,0206,0321,0206,
0211:0320,0207,0321,0207,

Stacking

How does one stack these and make it look nice? We must now deploy the square root of two to deal with the 45 degree angle. First let's take a look at what happens when we naively move the position without any use of root two:

Canvas Generators

Rather than move on to other geometries, other conceptual patterns, and other colors, I want to deal with the practical matter of how to use this in construction of html files. Right now everything has been a combination of some custom html, some custom javascript, and some custom Geometron code for each of the "div" elements in this document.

If this is going to actually be fast and easy to use, however, it probably makes sense to build the whole thing with one command. The situation I'm imagining is where I know I want to put the black and yellow stripe pattern in some region on a html document, I know where I want it and what size, and I just want it to happen. This is a good starting point for the more general use cases of Geometron, where a user will want to very quickly make a symbol, diagram, graphic, or decoration which comes from a standard library they've built up themselves. This library has to be a hybrid of html, javascript, css, and pure Geometron code, although when all data goes fully physical, it should be expressable in pure Geometron.

The following code is used to generate the following stripe bar:

	currentNode = document.getElementById("testDiv");
	var newCanvas = document.createElement("canvas");
	canvasWidth = 1000;
	canvasHeight = 50;
	newCanvas.width = canvasWidth;
	newCanvas.height = canvasHeight;	
	unit = 80;
	x0 = -50;
	y0 = 50; 
	ctx = newCanvas.getContext("2d");
	doTheThing(0300);
	ctx.clearRect(0,0,canvasWidth,canvasHeight);
	currentGlyph = "0210,0210,0210,0210,0210,0210,0210";
	drawGlyph(currentGlyph);
	currentNode.appendChild(newCanvas);

Now we put the same pattern on the right side of the div.

We note that this looks like crap. Clearly the responsible way to use this is to put everything in tables or something like it instead of desperately hoping that using "float" in css will work out ok because it never does..

Generator Functions

Now I build a function to generate these canvases in a intuitive way to save time.

function buildCanvas(localWidth,localHeight,localX0,localY0,localUnit,localGlyph){
	var newCanvas = document.createElement("canvas");
	newCanvas.width = localWidth;
	newCanvas.height = localHeight;	
	unit = localUnit;
	x0 = localX0;
	y0 = localY0; 
	ctx = newCanvas.getContext("2d");
	doTheThing(0300);
	drawGlyph(localGlyph);
	currentNode.appendChild(newCanvas);
}

With that function built, the preceding two stripes are made with two instances of the following code:

	currentNode = document.getElementById("canvasGen3");
	currentGlyph = "0210,0210,0210,0210,0210,0210,0210,0210,0210,0210,0210";
	buildCanvas(600,30,-30,30,30,currentGlyph);

I can't stop adding stripes Can't. Stop.

Alien Blobs 1

At long last it is time to start adding Alien Blobs as inspired by Invader Zim. This is another part of the look I'm going for with all my html documents. Another milestone has been reached here, time to go for a very long walk. The code that built this figure is simply:

currentNode = document.getElementById("alien1");
currentGlyph = "0300,0320,0337,0337,0205,0336,0336,0333,0333,0330,0362,0320,0326,0306,0334,0350,0335,0351,0351,0201,0335,0201,0335,0201,0363,0306,0333,0331,0335,0335,0335,0336,0336,0330,0337,0337,0335,0304,0336,0336,0336,0331,0337,0337,0337,0305,0334,0311,0337,0305,0362,0201,0335,0335,0201,0335,0350,0335,0336,0201,0363,0335,0335,0335,0350,0334,0304,"
buildCanvas(200,200,70,140,30,currentGlyph);