Code Haiku #2
int i=9; system.out.println(+i); i = i - 1;
int i=9; system.out.println(+i); i = i - 1;
So, I took a quick break from learning processing, and downloaded this app called DMesh. It’s super cool. It takes images and generates triangles from points.
Here’s one I did from a Giotto painting…

And here’s the DMesh image…

I didn’t have a chance to post this last night.
And, well, I’m not done with it.
I’m trying to figure out working with images. I’d like to be able to dynamically manipulate them (as in, taking an image, and having these “bugs” walk around them changing the picture).
My first step, however, is just to figure out some simple pixel manipulation.
So, I’m taking one of my drawings, and making some changes. What I’d like to do, is to take a group of five (maybe more) pixels square - average the color, and replace them. I think that’d look cool.
But, right now, I’m just getting grey. I should be able to figure it out by tonight…

As you can see, my code is a mess right now…
// Blending int rAvg = 0; int bAvg = 0; int gAvg = 0; float colorAvg = 0; int numSq = 5; int count = 0; float[] numArray = new float[numSq*numSq]; color[] colorArray = new color[numSq*numSq]; float v = 1.0/9.0; //int iWidth = 0; //int iHeight = 0; float [][] kernel = {{ v,v,v}, {v,v,v}, {v,v,v}}; PImage img = loadImage("C:/Users/Samuel Harper/Documents/Processing/ImageMicrob/castiglione_painting.jpg"); PImage edgeImg = null; int iWidth = img.width/2; int iHeight = img.height/2; //void setup(){ img.resize(iWidth, iHeight); edgeImg = createImage(img.width, img.height, RGB); edgeImg.loadPixels(); size (img.width, img.height); //image(img,0,0); //img.loadPixels(); // Create an opaque image of the same size as the original //image(edgeImg, img.width/2, 0); // Draw the new image //} //void draw(){ //loadPixels(); img.loadPixels(); // Loop through every pixel for (int y = 0; y < height; y++) { for (int x = 0; x < width; x++) { int loc = x + y*width; //println("x: " + x); // The functions red(), green(), and blue() pull out the 3 color components from a pixel. float r = red(img.pixels[loc]); float g = green(img.pixels[loc]); float b = blue(img.pixels[loc]); // get an array of numSq long // for each attribute - put in a location // for the 5 locations - get the r,g,b and average them // add them to the pixel numArray[count] = loc; colorArray[count] = img.pixels[loc]; // for(int i=0; i<count-num; i++){ // colorAvg =+ ( colorArray[i]); // } count ++; if ( count == (numSq * numSq) ) { // I've got a 5x5 matrix // update the pixels for(int i=count; i>(count-numSq); i--){ edgeImg.pixels[i] = colorArray[count-i]; // this needs to be the average } count = 0; } //avg colorAvg = (r+g+b)/3; r = colorAvg; g = colorAvg; b = colorAvg; // Image Processing would go here // If we were to change the RGB values, we would do it here, before setting the pixel in the display window. // Set the display pixel to the image pixel edgeImg.pixels[loc] = color(r,g,b); } } // When we are finished dealing with pixels edgeImg.updatePixels(); image(edgeImg, 0,0); //}
So, I started my sketch today from an existing example. I really liked the way the lines flowed down the screen nicely.
I added some background colors - and one bit of orange. I love the play between the blue and the orange.
I started playing around with music as well, using the SoundCipher library. It has a very nice mellow sound to it.
One thing that I really wanted to do, but couldn’t figure it out just yet, is to slowly show the lines drawing back and forth. I thought that would show some nice movement, especially with the music. But, it seems to be drawn in one big chunk.
I’ll figure it out soon.
Again, unfortunately, the video doesn’t capture the sound (but you should be able to use the code below to reproduce it).

Learning Processing - Day 3 from sampyxis on Vimeo.
import arb.soundcipher.*; import processing.video.*; MovieMaker mm; SoundCipher sc = new SoundCipher(this); SoundCipher sc2 = new SoundCipher(this); SoundCipher sc3 = new SoundCipher(this); float[] pitchSet = {57, 60, 60, 60, 62, 64, 67, 67, 69, 72, 72, 72, 74, 76, 79}; float setSize = pitchSet.length; float keyRoot = 0; float density = 0.8; float randomOrange = 0; int fade = 50; int waitTime = 600; int stopStartTime = 0; void setup() { size(600, 600); sc3.instrument(49); smooth(); frameRate(4); background(#2DB2FF); strokeWeight(10); reDraw(); String title = "Feb012012" + millis() + ".mov"; mm = new MovieMaker(this, width, height, title, 4, MovieMaker.VIDEO, MovieMaker.MEDIUM); mm.addFrame(); } void draw(){ if (random(1) < density) { sc.playNote(pitchSet[(int)random(setSize)]+keyRoot, random(90)+30, random(20)/10 + 0.2); reDraw(); } if (frameCount%32 == 0) { // was 32 keyRoot = (random(4)-2)*2; density = random(7) / 10 + 0.3; sc2.playNote(36+keyRoot, random(40) + 70, 8.0); } if (frameCount%16 == 0) {// was 16 float[] pitches = {pitchSet[(int)random(setSize)]+keyRoot-12, pitchSet[(int)random(setSize)]+keyRoot-12}; sc3.playChord(pitches, random(50)+30, 4.0); } mm.addFrame(); } void reDraw() { background(#2DB2FF); for(int i = 0; i < width; i++) { float r = random(255); float x = random(20, width-20); float y = random(0,255); randomOrange = random(20); stroke(r, y); strokeWeight(random(10)); if (randomOrange <= 2) { stroke(#FFAA00, y); } line(i, 0, x, height); } } void keyPressed(){ saveFrame("Feb012012.jpg"); mm.finish(); noLoop(); }
So, second day of learning processing.
It’s actually really nice to start to think of coding this like drawing or painting. It’s feels like the same process in terms of designing and thinking about how you want this to end up.
So, I’m really looking forward to being 15 days into it.
For the second day, I started with some flocking code, added some nice circle designs behind it and added something for the birds to chase.
I also did some nice work with music, but I haven’t figured out how to get that to come through on the video.
I was really happy with how it worked out, until at the end, I thought I had put too many things in.

Learning Processing - Day Two from sampyxis on Vimeo.
Most of the code:
import arb.soundcipher.*; import processing.video.*; SoundCipher sc = new SoundCipher(this); SoundCipher part1 = new SoundCipher(this); SoundCipher part2 = new SoundCipher(this); SoundCipher sc2 = new SoundCipher(this); SoundCipher sc3 = new SoundCipher(this); MovieMaker mm; // MOVIEMAKER float[] pitchSet = {57, 60, 60, 60, 62, 64, 67, 67, 69, 72, 72, 72, 74, 76, 79}; float setSize = pitchSet.length; float keyRoot = 0; float density = 0.8; float[] pitches = {64, 66, 71, 73, 74, 66, 64, 73, 71, 66, 74, 73}; float[] dynamics = new float[pitches.length]; float[] durations = new float[pitches.length]; FlockingPart[] myFlock; int num = 60; int musNum = 0; float mx[] = new float[num]; float my[] = new float[num]; int numBoids = 30; int enemeyWidth = 10; int enemeyHeight = 10; float enemeyX = 0; float enemeyY = 0; float oldX = 0; float oldY = 0; float newX = 0; float newY = 0; float pitch = 60; int waitTime = 20; public PImage backImage = null; int redoBack = 100; boolean bStop = false; int stopStartTime = 0; void setup(){ size(500,500); smooth(); frameRate(32); background(#2DB2FF); drawBackground(width/2, height/2, 200, 8); createBackground(); // Movie set up String title = "Jan312012" + millis() + ".mov"; mm = new MovieMaker(this, width, height, title, 30, MovieMaker.VIDEO, MovieMaker.MEDIUM); mm.addFrame(); // Music set up sc3.instrument(49); part1.tempo(40); part2.tempo(42); part1.repeat(8); part2.repeat(8); for(int i=0; i<pitches.length; i++) { dynamics[i] = random(40) + 70; durations[i] = .25; } myFlock=new FlockingPart[0]; for(int i=0; i<numBoids; i++){ FlockingPart part=new FlockingPart(width/2,height/2,random(TWO_PI),random(0.5,1),random(0.3,4),myFlock); myFlock=(FlockingPart[])append(myFlock,part); } } void draw(){ float cohKX=0; float cohKY=0; float vecX=0; float vecY=0; background(backImage); beginShape(TRIANGLE_STRIP); for(int i=0;i<myFlock.length;i++){ myFlock[i].update(myFlock,enemeyX,enemeyY); myFlock[i].display(); // println(myFlock[i].posX); noFill(); stroke(0,25); vertex(myFlock[i].getPosX(),myFlock[i].getPosY()); } endShape(); int which = frameCount % num; mx[which] = enemeyX; my[which] = enemeyY; drawEnemey(); // Music if( musNum == 20) { if (random(1) < density) { sc.playNote(pitchSet[(int)random(setSize)]+keyRoot, random(90)+30, random(20)/10 + 0.2); } if (frameCount%16 == 0) { keyRoot = (random(4)-2)*2; density = random(7) / 10 + 0.3; sc2.playNote(36+keyRoot, random(40) + 70, 8.0); } if (frameCount%8 == 0) { float[] pitches = {pitchSet[(int)random(setSize)]+keyRoot-12, pitchSet[(int)random(setSize)]+keyRoot-12}; sc3.playChord(pitches, random(50)+30, 4.0); } musNum = 0; } else { musNum ++; } if( millis() - stopStartTime < 2000) { mm.addFrame(); stopStartTime = millis(); } } void keyPressed(){ saveFrame("Jan312012.jpg"); mm.finish(); noLoop(); } void drawEnemey() { // if the enemey hasn't reached the new nums, then continue moving there. if ((enemeyX == newX) && (enemeyY == newY)){ // otherwise - get a new one newX = random(width); newY = random(height); oldX = enemeyX; oldY = enemeyY; secondNote(); } else { float difX = (enemeyX - newX); float difY = (enemeyY - newY); enemeyX -= difX * .51; enemeyY -= difY * .51; } fill(102); ellipse(enemeyX, enemeyY, enemeyWidth, enemeyHeight); stroke(#EF66FF); // This seems to be setting the stroke for the birds too - but that's ok - I think I like it. strokeWeight(4); line(oldX, oldY, newX, newY); translate(newX, newY); } void playNote() { if (waitTime == 0) { sc.playNote(pitch, 100, 1); pitch = sc.pcRandomWalk(pitch, 7, sc.MINOR); waitTime = 20; } else { waitTime --; } } void secondNote(){ sc.playNote(pitch, newX, newY); pitch = sc.pcRandomWalk(pitch, 7, sc.MINOR); } void drawBackground(float x, float y, int radius, int level) { float tt = 126 * level/6.0; fill(tt, 153); ellipse(x, y, radius*2, radius*2); if(level > 1) { level = level - 1; int num = int(random(2, 6)); for(int i=0; i<num; i++) { float a = random(0, TWO_PI); float nx = x + cos(a) * 6.0 * level; float ny = y + sin(a) * 6.0 * level; drawBackground(nx, ny, radius/2, level); } } } void createBackground() { backImage = createImage(width, height, RGB); backImage = getScreen(); } PImage getScreen() { saveFrame("backgroud.jpg"); save("background.jpg"); PImage load = loadImage("C:/Users/Samuel Harper/Documents/Processing/Flocking/background.jpg"); return load; }
I’ve known about Processing for a long time. It’s always intrigued me. The fact that you can use code to create art.
I’ve wanted to learn it and use it for a while now. But, as with anything, it’s hard to start.
So, I’ve given myself a goal. I’m going to try to create one sketch a day. Since, I’m doing this to learn, I’ll mostly be taking the example code and then tweaking it to get what I want.
This is day one.

The video
Learning Processing - Day One from sampyxis on Vimeo.
/* Processing Day 1 Jan 30 - 2010 */ boolean bStop = false; int stopStartTime = 0; void setup() { size(500, 500, P3D); //#5E9EFF background(#3869FF, 120); // stroke(0, 50); stroke(#2D11FF, 120); strokeWeight(2); fill(255, 120); reDraw(); } void draw() { if (bStop) { if (millis() - stopStartTime < 2000) { return; // Don't draw anything } else { bStop = false; // Restart drawing background(#3869FF); reDraw(); stopStartTime = millis(); } } } void drawPoint(float x, float y, float noiseFactor) { pushMatrix(); translate(x * noiseFactor * 4, y * noiseFactor * 4, -y + random(1)); float edgeSize = noiseFactor * 26; ellipse(0, 0, edgeSize, edgeSize); popMatrix(); } void reDraw() { bStop = true; float xstart = random(10); float ynoise = random(10); translate(width/2, height/2, random(5)); for (float y = -(height/4); y <= (height/4); y+=3) { ynoise += 0.05; float xnoise = xstart; for (float x = -(width/4); x <= (width/4); x+=3) { xnoise += 0.05; drawPoint(x, y, noise(xnoise, ynoise)); } } }
My favorite modern artist is Anselem Kiefer.
I’ve loved his work since the early 90’s. I’ve totally lost touch with his work for the last 10 years. I’ve just found a few pictures - still love him.

I’ve always disliked painting on a white canvas. Especially one with gesso on it. I much prefer a canvas that already has either a blue or brown tint or even another painting on it that I could overpaint.
I just realized that I feel the same way about coding. I really don’t like having a blank project in my IDE (even though I love to do new projects). Sometimes I prefer to have some code base that’s already there and I want to change/update.

Grunge City by Annis Naeem
Win!
Wine-braised shortribs, salad, roasted beets with goat cheese, mashed roasted potatoes. It’s what Karol & Dave are having for dinner.