Categories
Uncategorized

Learn Processing!

Processing

I had a lot of fun with Processing last year when I joined in with a few other folks and declared May as “Processing Month” and my final project was the Make A Sketch, which was an Arduino + Processing piece.

There’s two other guys at Milwaukee Makerspace with an interest in Processing, and we figured it was worth sharing what we know, and we’ve decided that a 3-hour workshop on the subject would be a good idea, so…

Join us Thursday, February 23rd, 2012 at 6pm to learn about Processing! [Sign up here]

We’ll expect you to have Processing installed on a laptop, basic knowledge of writing code, and a few simple sketches running. If you can do all that, and want to dive a bit deeper into Processing, we’d love to have you there. (If you’re a Milwaukee Makerspace member the cost is $20, otherwise it’s $25 for the general public.)

Besides some basics of Processing we’ll be creating a collaborative team project, so it should be all-around awesome. If you’re a coder who wants to make some interactive art, or an interactive artist who wants to write some code, well… you’ll fit right in. :)

sketch

Categories
Uncategorized

Processing: RGBoxer

RGBoxer

With our latest Processing sketch it’s time to play with the mouse, and the keyboard as well. I mean, we can’t just leave out the keyboard!

See it in action here!

This one is simple, just drawing a box, and using the ‘r’, ‘g’, and ‘b’ keys, you can change the color. You can also hit ‘q’ to blank the canvas and start over.

RGBoxer

We use width/2, height/2 for proper centering of our box. Also, you’ll see that all the real action happens when you click and drag the mouse. Once you start doing that, you can press the r, g, or b key to change the color.

/*
 * 20110513.pde
 */

void setup() {
  size(800, 600);
  noFill();
  strokeWeight(1);
  stroke(255,0,0);
  background(0);
}  
  
void draw() {

  if(keyPressed) {
    if (key == 'r' || key == 'R') {
      stroke(255,0,0);
    }
    if (key == 'g' || key == 'G') {
      stroke(0,255,0);
    }
    if (key == 'b' || key == 'B') {
      stroke(0,0,255);
    }
    if (key == 'q' || key == 'Q') {
      background(0);
    }
  }
  
}

void mouseDragged() {
  rectMode(CENTER);
  rect(width/2, height/2, mouseX, mouseY);
}
Categories
Uncategorized

Processing: Circle Square

Circle Square

I decided to draw a circle, but wanted to use a square to do it. Or at least that’s the explanation I’ll give…

See it in action here!

I really just wanted to play with rotating an object a bit more. Obviously this is 2D rotation… The 3D stuff I still find a bit more complex, but should be able to show something in that arena soon.

/*
 * 20110511.pde
 */

float a = 0;
int s = 255;

void setup() {
  size(800, 600);
  frameRate(30);
  background(0);
  strokeWeight(1);
  noFill();
}

void draw() {

  float c = cos(a);
  translate(width/2, height/2);
  rotate(c);
  rectMode(CENTER);
  stroke(0,s,0);
  rect(0, 0, 350, 350);
  
  a = a + 0.1;
  
  if (s < 1) {
   s = 255; 
  }
  
  s = s - 1;
    
}
Categories
Uncategorized

Processing: Fader Boxes

Another Processing sketch, fairly simple. This one does introduce a function (or subroutine) named ‘makeBox’ that we pass some values into.

See it in action here!

You can also see where we used height/2 which is the proper way to center something on the screen, rather than taking the 600 we specified and just using 300 as the halfway point.

/*
 * 20110509.pde
 */

void setup() {
  size(800, 600);
  background(0);
  stroke(255);
  noFill();
}

void draw() {
  
  for (int xVal = 5; xVal < (width - 20); xVal = xVal + 20) {
    int myWidth = 10;
    int myHeight = xVal/2;
    int yVal = (height/2) - (myHeight/2);
    int myColor = xVal/4;
    
    makeBox(xVal, yVal, myWidth, myHeight, myColor);
    
    }

}

void makeBox(int x, int y, int w, int h, int c) {
  stroke(c);
  rect(x, y, w, h);
}

(These sketches may not be all that impressive, but it’s giving me a chance to flex my programming muscles in Processing.)