Processing: How to Make Transparent Textures


After a long vacation, a wedding, a bad flu, and a whole mess of planes, trains, and automobiles, I’m back to talk about textures. I love playing with transparency in scenes, but scripting transclucency is a bit unusual in Processing. The normal Processing canvas doesn’t support an alpha channel, so it requires something called PGraphics().

The Processing Part

First step in getting yourself set up is declaring a PGraphics variable:

PGraphics pg

Standard dot notation will apply with that variable now. Within the setup{} lines, you can specify a size and tell Processing to start drawing. When you set the background, the fourth number will be the alpha—0 is completely transparent.

pg = createGraphics(1000, 200);

Once you’re done adding text or shapes or whatever, you can tell Processing to stop drawing and save to a .png to preserve the translucency.

pg.endDraw();“C:\\Users\\Desktop\\Test” + “.png“);

Now, you’re probably wondering, how do you get that to actually display in Blender?

The Blender Part

Unwrap your mesh and assign it a new material. The node set-up I used is below. It includes a Mix node to plug in a Transparent node for the clear parts and a Diffuse for the rest. The “Fac” will need to be plugged into a an image texture set to the .png that Processing churned out.

Node Setup

An Example: Alice in Wonderland

This is the script I used to get the texture for the gif above. It could be done easily in software like Photoshop or Gimp, but eventually, I’m hoping to add loops to randomize the apha values and create multiple image textures automatically.

That’s for a different day though.

String message = "Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do:";
String message2 = "once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations";
String message3 = "in it, `and what is the use of a book,' thought Alice `without pictures or conversation?' ";
String message4 = "So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and";
String message5 = "stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking";
String message6 = "the daisies, when suddenly a White Rabbit with pink eyes ran close by her.";
PGraphics pg;
PFont myFont;
int fontsize = 20;
int xval = 0;
int yval = 50;

void setup(){
pg = createGraphics(1000, 200);
pg.text(message, xval, yval);
pg.text(message2, xval, yval+fontsize);
pg.text(message3, xval, yval+(2*fontsize));
pg.text(message4, xval, yval+(3*fontsize));
pg.text(message5, xval, yval+(4*fontsize));
pg.text(message6, xval, yval+(5*fontsize));
pg.endDraw();"C:\\Users\\Desktop\\Test" + ".png");




Leave a Reply

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

You are commenting using your 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 )

Connecting to %s

%d bloggers like this: