Handing color changes

Processing is an excellent environment for prototyping and working. It’s a great way for me to start to see how things can work together, as well as thinking through how to structure things programmatically.

Initially, I started working with color and working with different ways to change color. While at Eyeo 2013, I attended Memo Akten’s workshop – The Black Art of Manipulating Numbers – and Moritz Stefaner’s workshop – Smart Insects. Attendance to Eyeo and the workshops was possible with the support of my department – Design, Art & Technology at UArts.

Both workshops gave me different ideas for handling color changes and developing clouds of color.

float px, py;
float numPoints = 3000;
void setup() {
size(400, 400);
colorMode(RGB, 1.0);
stroke(1, 1, 1);
void draw() {

float curTime = millis()/1000.0;
//float theta = sin(curTime * 0.23) * TWO_PI; // play with this to
float theta = 0;
px = width/2;
py = height/2;

for (int i=0; i<numPoints; i++) {
sin(curTime * 0.8f + i * 0.0011f) * 0.5f + 0.5f, //R
sin(curTime * 0.7f + i * 0.0013f) * 0.5f + 0.5f, //G
sin(curTime * 0.3f + i * 0.0017f) * 0.5f + 0.5f //B

theta += sin(curTime * 0.5f) * i * 0.00002; //everytime move, rotate a bit

float cos_t = cos(theta);
float sin_t = sin(theta);

px += cos_t * 0.3;
py += sin_t * 0.3;
vertex(px, py);


I wanted to get a feeling of how this would look, projected on the felt strips. Without getting into protection mapping, I started to think through how this might transpire. The goals being: to have the colors projected only on the felt, and only upon disturbance (from the viewer). I put together this sketch to help give me a rough idea of the final output. I tweaked some parameters to get this timing and colors right.

import java.util.*; //need this for random
Random generator;

PGraphics g;

float num, x, y;
float sd, mean;

float theta, incrementer, rand, op;
int stepY, stepX;
void setup() {
size(400, 400, P2D);
colorMode(HSB, 1.0, 100, 100, 100);
sd = width/2;
mean = width/5;

g = createGraphics(width, height, P2D);
generator = new Random();

colorMode(HSB, 1.0, 100, 100);
rand = random(0.5, 0.6);


for (int i = 0; i < 15; i++) {
y = random(height/2, height-50);
num = (float) generator.nextGaussian();
x = sd * num + mean; //give it a random location within a range and mean
if (x < 0) { //make sure it doesn't go off the screen
x = x*(-1);
op = int(random(65, 95));
g.fill(255, op); //it'd be cool to get the opacity working on depth
g.rect(x, 0, 20, y);

void draw() {
//change the shift of color so it isn't in such a hard line. randomize it. blur it
//randomize X and Y within a given location

//shift the colors across the screen from right to left
float curTime = millis()/10000.0;
curTime = rand * curTime;
stepX = 2;
stepY = 2;
for (int gridY = 0; gridY < height; gridY += stepY) {
for (int gridX = 0; gridX < width; gridX += stepX) {
fill(sin(curTime * 0.8f + gridX * 0.0011f) * 0.5f + 0.5f, 100, 100);
rect(gridX, gridY, stepX, stepY);

// mask the original rectangles over the color field
blend(g, 0, 0, width, height, 0, 0, width, height, MULTIPLY);

After watching this run for a bit and thinking about the scale of the installation, I thought it wise to consider CPU and proper usage. It’s best to probably split the program across the GPU and CPU. I’m going to take a look at shaders and openGL. I’ve heard about them, seen their magic, but never used them. Diving in.