Processing: How to Code a Grayscale Cipher

A grey alphabet

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.

Anabelle Lee

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;
}
}

 

 

Advertisements
Tagged , , , , , , ,

5 thoughts on “Processing: How to Code a Grayscale Cipher

  1. ARJ says:

    I think processing a better name rather than java.

    1 Many languages base themselves on asm for compiling, but they keep their identities

    2 If a language use another language, by token, it keeps it’s identity

    3 to make it clearer, if you use original python you don’t say you are using c, though original python is based on c

    4 processing is becoming more and more distinct.

    you have
    processing.js
    processing.py

    not only java, processing transcends the java label

    5 give processing it’s due as an awesome,cool, new and more than emergent language

    p.s. you are now in Processing land !

    Liked by 1 person

    • Good points ARJ! Planning a nice long stay in Processing land. Can’t believe I was trying to use Scheme before. 🙂

      Liked by 1 person

      • ARJ says:

        Good to hear, we can even develop processing ‘frameworks’

        Processing programs that produce other programs giving the code in println to copy and that sort of things or even an animation maker.

        if you are interested in collective processing projects for fun tell me 👍

        Liked by 1 person

  2. benmorgan says:

    Heyyyy glad you like it!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: