posts tagged with the keyword ‘graphics’

2012.02.07

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

2011.05.13

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);
}

2011.05.11

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;
    
}

2011.05.09

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.)

2011.05.07

Roto Petey

Today’s Processing sketch isn’t really mine… It’s from the extrusion example on processing.org. It’s a cool demo showing how brightness of an image can map to height in 3D.

I took the code and put my own image into it. The image is from my profile pic, cropped a bit and posterized to 5 levels of grey.

See it in action here!

This demo uses straight-up Java, not Javascript, because Processing.js doesn’t yet support all of what Processing does. (I was hoping to make a video of this but I’m having issues with the Processing MovieMaker code.)

Regular Petey

I find it useful to take code that someone else wrote, and start tweaking things, changing the values, etc. to see the outcome. I still find this code just a little confusing, but I’ll keep hacking at it to see what I can learn from it, and hope I can come up with something original myself.

/*
 * 20110507.pde
 */

PImage extrude;
int[][] values;
float angle = 0;

void setup() {
  size(800, 600, P3D);
  extrude = loadImage("pete.jpg");
  extrude.loadPixels();
  values = new int[extrude.width][extrude.height];
  for (int y = 0; y < extrude.height; y++) {
    for (int x = 0; x < extrude.width; x++) {
      color pixel = extrude.get(x, y);
      values[x][y] = int(brightness(pixel));
    }
  }
}

void draw() {
  background(0);
  angle += 0.01;

  translate(width/2, 0, -128);
  rotateY(angle);  
  translate(-extrude.width/2, 200, -180);
  
  for (int y = 0; y < extrude.height; y++) {
    for (int x = 0; x < extrude.width; x++) {
      stroke(values[x][y]);
      point(x, y, -values[x][y]);
    }
  }

}

« Older Entries |


buy the button:

Buy The Button