Processing: How to Code a Grayscale Cipher

Well, I’ve clearly been doing graphics wrong ALL MY LIFE because I never knew Processing was a thing. Now that I’m aware, I’m attempting to rewire my brain for it.

What is Processing?

It makes coding artwork ridiculously easy. Download here.

A Sample Script

Yup, it’s back to substitution ciphers. I enjoy slipping messages into unexpected places—like fireflies in a 3D scene—and I’ve always wanted to have a way to write messages in colors.

This script assigns each letter a number that corresponds with a certain grayscale value, ranging from 0 (black) as “a” to 255(white) as “z.”

The Bones of Processing

The syntax for assigning variables* is fairly straightforward:

DataType VariableName = Value;

*If you’ve never dealt with data types before, there’s a helpful wiki. In the script below, I don’t use decimal points, so these variables are all int.
*Some variables are already programed. key = the last pressed key on keyboard.

.The formula for conditionals is also nice and familiar.

if( this expression is true ) {
do this;
} else if (this expression is true) {
do this;
}

Processing code looks pretty damn intimidating at first with all the voids and curly brackets, but once you get how each piece fits into the whole, it’s actually really easy to plug your own script’s guts into the right part. Here it is in four steps:

Step 4 is where this particular code becomes a giant flaming wall of inefficiency. I know there’s an easier way of assigning letters to specific grayscale values without assigning each one an “else if”, but I wanted to preserve this one as is since it’s my first.

The Guts of Processing

It’s important to keep in mind order of operations. If you want a shape to have a fill, the fill color needs to be designated beforehand. Which is why all the “else if”s in the script go in that order:

fill(color);
rect(xposition, yposition, pixelwidth,pixelheight);

If all has gone well, you should see the gray boxes fill in as you type.

The Copy Paste Version

A few disclaimers: As written, this only works with lower case letters. No punctuation. No spaces. Just letters. And if you use an AutoHotkey script to type the message in for you (like I did with the Gif above), it may send the keystrokes too fast for Processing to register. Try SetKeyDelay to slow it down.

A shorter version with arrays will follow soon.

int varx = 15;
int vary = 0;
int varyt = 0;
int pixelsize = 10;

void setup(){
size(500,500);
background(0);
}

void draw(){
if(varx>470){
varx = 15;
vary = vary + pixelsize;
varyt = varyt + 15;
}
}

void keyPressed(){
fill(255);
textSize(15);
text(key, varx, varyt+210);
if(key == 'a') {
fill(0);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key == 'b') {
fill(10);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='c'){
fill(20);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='d'){
fill(30);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + 5;
} else if (key =='e'){
fill(40);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='f'){
fill(50);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='g'){
fill(60);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='h'){
fill(70);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='i'){
fill(80);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='j'){
fill(90);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='k'){
fill(100);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='l'){
fill(110);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='m'){
fill(120);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='n'){
fill(130);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='o'){
fill(140);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='p'){
fill(150);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='q'){
fill(160);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='r'){
fill(170);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='s'){
fill(180);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='t'){
fill(190);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='u'){
fill(200);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='v'){
fill(210);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='w'){
fill(220);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='x'){
fill(230);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='y'){
fill(240);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
} else if (key =='z'){
fill(250);
rect(varx, vary, pixelsize, pixelsize);
varx = varx + pixelsize;
}
}