Hi

I did a small experiment strongly inspired by a Joshua Davis flash piece... who he informed was strongly influenced by a Jackson Pollock piece... so not exactly an original thing, but here goes:

It is small worms crawling around the screen, and as time progress they spell
out a word by changing their color when passing certain areas of the sketch.

The reason for doing it, besides from it's visual rewarding nature, was to take a flash piece and translate i to processing, I come from flash you see.

In flash I would use collision detection and then actually write the word I wanted to spell out, set it's alpha to 0 and have the worms change color when  a collision was detected. Processing has no collision detection, as far as I know, and all in this piece is done with bitmaps, so it's hard to reference it with a x and y coordinate.

What I have done here is to map out all letter coordinates in terms of squares, then test to see if a worm passes it... yes it takes forever, and should not be done, + looks a bit crummy, but hopefully others will learn from my waisted evening :)

The code is cut and paste and the question is "How would You do it smarter so that any word could be put in?"

/*
Author:        Ricki G.
Date:         24/3-08
Description:  Some worms crawl around and spells "HOME" , idea was to make a "Home Sweet Home" thingy anno 2008
              uses Perlin noise to draw little ellipses, if they cross the coordinates of the word "HOME" they
              get colored black else they get colored grey'ish. Update: the coordinates outside the circle xx + yy = 250, with center
              width/2 and height/2 get's colored red.
*/

import processing.opengl.*;
import javax.media.opengl.*;

Worm worm;
int maxWorms = 20;
Worm[] wormArray = new Worm[maxWorms];


void setup(){
//  frameRate(60);
 size(1000, 1000, OPENGL);
 smooth();
 background(255);
 
 for( int i = 0; i < maxWorms; i++ ){
   wormArray[i] = new Worm(random( 0, width ), random( 0, height ), random( 8, 20 ));
 }
}

void draw(){
 for( int i = 0; i < maxWorms; i++ ){
   wormArray[i].run();
 }

}



class Worm{
 float xoff, yoff, roff;
 float posX, posY;
 float radMax = 0;
 float radius = 0;

 Worm(float _x, float _y, float _rad){
   radMax = _rad;
   xoff = _x;
   yoff = _y;
   roff = 0;
 }

 void run(){
   update();
   render();

 }
 void update(){

   roff += random(0.0001, 0.0006);    
   xoff += random(0.0006, 0.0009);    
   yoff += random(0.0006, 0.0009);  

   radius = noise(roff) * radMax;
   posX = noise(xoff) * width;
   posY = noise(yoff) * height;
 }

 void render(){
     
   smooth();  
   if( pow(( posX -width/2 ), 2) + pow(( posY - height/2 ), 2) > 250*250  ) blank();
   //************* H ****************// painstakingly identify and map the squares that make up the word "HOME"
   else if(  posX > 280 && posX < 310 && posY > 450 && posY < 550 ) black();       // |
   else if( posX > 310 && posX < 350 && posY > 490 && posY < 505) black();    // -
   else if( posX > 350 && posX < 380 && posY > 450 && posY < 550) black();    // |
   //************* O ****************//    
   else if( posX > 400 && posX < 430 && posY > 450 && posY < 550 ) black();  // |
   else if( posX > 430 && posX < 470 && posY > 450 && posY < 465) black();    // -
   else if( posX > 470 && posX < 490 && posY > 450 && posY < 550) black();    // |
   else if( posX > 430 && posX < 470 && posY > 535 && posY < 550) black();    // _
   //************* M ****************//    
   else if( posX > 510 && posX < 540 && posY > 450 && posY < 550 ) black();  // |
   else if( posX > 540 && posX < 555 && posY > 465 && posY < 480) black();    // \
   else if( posX > 555 && posX < 575 && posY > 480 && posY < 505) black();    // -
   else if( posX > 575 && posX < 580 && posY > 465 && posY < 480) black();    // /
   else if( posX > 580 && posX < 610 && posY > 450 && posY < 550 ) black();  // |
   //************* E ****************//    
   else if( posX > 630 && posX < 660 && posY > 450 && posY < 550 ) black();  // |
   else if( posX > 660 && posX < 700 && posY > 450 && posY < 465) black();    // -
   else if( posX > 660 && posX < 695 && posY > 495 && posY < 510) black();    // -
   else if( posX > 660 && posX < 700 && posY > 535 && posY < 550) black();    // _
   else{
     white();
   }
   fill(255, 0.7);
   rect(0, 0, width, height);

 }
 void black(){
   
   fill(80, 255);
   stroke(0, 25);
   ellipse(posX, posY, radius, radius);
 }
 void white(){
   fill(255, 255);
   stroke(0, 25);
   ellipse(posX, posY, radius, radius);
 }
 void blank(){
   fill(255,0, 0,  255);
   stroke(0, 25);
   ellipse(posX, posY, radius, radius);
 }
}

Ahh thats great Matt, Cheers!

I played around with it, seems it had a epilepsy glitch (was blinking crazy )
So I made a width x height bitmap in photoshop and loaded it in.

here it is:

import processing.opengl.*;
 
int maxWorms = 20;
Worm[] wormArray = new Worm[maxWorms];

PImage testMe, pict;
 
void setup(){
 size(1000, 1000, OPENGL);
 
 smooth();

 //--------------------------------------------- Draw anything here.
 pict = loadImage ("image.png" );
 image(pict, 0, 0, width, height );
//   noLoop();  
  /* Create the PImage we'll get the color from
(has to be the same width and height as the sketch)*/
 testMe = createImage(width, height, RGB);
 
 //copy the sketch windows pixels to the PImage
 loadPixels();
 testMe.pixels = pixels;
 updatePixels();
 
 // and draw the background
 background(255);
 
 for( int i = 0; i < maxWorms; i++ ){
   wormArray[i] = new Worm(random( 0, width ), random( 0, height ), random( 8, 30 ));
 }
}
 
void draw(){
 for( int i = 0; i < maxWorms; i++ ){
   wormArray[i].run();
 }
}
 
 
class Worm{
 float xoff, yoff, roff;
 float posX, posY;  
 float radMax = 0;
 float radius = 0;
 // added the variable we'll store the color in
 color fillColor = color(255,255,255);
 
 Worm(float _x, float _y, float _rad){
   radMax = _rad;
   xoff = _x;
   yoff = _y;
   roff = 0;
 }
 
 void run(){
   update();
   render();
 
 }
 void update(){
 
   roff += random(0.0001, 0.0006);  
   xoff += random(0.0006, 0.0009);  
   yoff += random(0.0006, 0.0009);  
 
   radius = noise(roff) * radMax;
   posX = noise(xoff) * width;
   posY = noise(yoff) * height;
 }
 
 void render(){  
   
   smooth();  
   
   //get the fill color from the pixel color under the ellipse
   //posX and posY must be cast to an int to get the array location
   fillColor = pixels[int(posX) + (testMe.width*int(posY))];
   
   fill(fillColor);
   stroke(0, 25);
   ellipse(posX, posY, radius, radius);
   
   fill(255, 0.7);
   noStroke();
   rect(0, 0, width, height);
 
 }
}  

Yeah it seemed as if it repeated the setup over and over. The green circle you drew kept flashing on the screen. But the worms started crawling?
I couldn't spot the bug, but it went away when I put in the external image code instead.

There is another small thing, the external image gets flipped upside down when being drawn by the worms, I narrowed it down to the:

fillColor = pixels[ int(( posX ) +  testMe.width * int( posY )) ];

I think it reads the pixels from the last array index and back through the array instead of from the top left and down.
I played around with it but to get it to work I had to draw my external picture upside down

I actually did something very similar in Flash. Instead of a worm roaming around the screen, I had hundreds of "bugs" (little particles) that were attracted to the letters. Eventually all of the bugs would group up and the letters would become visible.

I also did one where particles traveled in straight lines, and when they hit the letters, they would drop a line behind them.

Anyway just thought I'd share. It's a cool concept.

polymonkey wrote on Mar 25^th, 2008, 10:30pm:


Forgot to tell You, the colors are also off in OPENGL, I took a normal photo with a persons face in it, and it turned out blue. I then removed the OPENGL in the setup function and the color were back to normal.

So a little extra for your investigation