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: WordCram

WordCram

Today in Processing we won’t even show you a sketch, but we will talk about Processing, and sharing, and code.

So part of the fun of doing this “Processing Month” thing has been in sharing my exploration. Make no mistakes, I’m not an expert at Processing, not even close… I’m pretty much a newbie. That’s OK though, because I like to learn as I go.

It seems strange that it’s only been a week since I posted my Overlapping Ovals sketch, because I’ve already learned things since then, and would do it differently today. Lucky for me, a guy named Dan Bernier left a comment. And it was encouraging. And he left a link that pointed me to WordCram.org, which is described as: open-source word clouds for Processing.

So I grabbed WordCram and tested it out. (The results are in the image above.)

After installing the WordCram library, I took a look at the examples, and took the first one (firstnamesUsingWordPresets) and tweaked it just a bit, and fed it my own word list. My list consisted of the tags from this blog, and the number of times they appear. (See the file here.) I did remove any words that were only used once.

If you’re intimidated by Processing, you shouldn’t be… it’s fairly easy to get started, and there are lots of great example sketches out there. If that’s not enough, I hear that some guys in Milwaukee are planning a Processing class to help get other folks up to speed. :)

Stay Tuned!

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

Categories
Uncategorized

Processing: Roto Petey

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

}
Categories
Uncategorized

Processing: Mouse Droppings

OK, we’ve finally got a bit of interaction going on… This sketch presents a blank canvas, until you click the mouse button, and then you get a circle filled with some random color. As you moved the mouse (with the button held down) it’ll make more circles and before you know it, you’re drawing!

See it in action here!

You can start over by pressing the ‘Q’ key, which will blank out the canvas. You can also adjust the size of the circle by using the up and down arrow keys.

/*
 * 20110506.pde
 */

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

color myColor = color(0,0,0);
int mySize = 50;

void draw() {
  fill(myColor);
  stroke(myColor);
  strokeWeight(1);
  
  if(keyPressed) {
    if (key == 'q' || key == 'Q') {
      background(0);
      myColor = color(0,0,0);
      mySize = 50;
    }
    if (key == CODED) {
      if (keyCode == UP) {
        mySize = mySize + 1;
      }
      else if (keyCode == DOWN) {
        mySize = mySize - 1;
      }
    }
    if (mySize < 1) {
      mySize = 1;
    }
    if (mySize > 800) {
      mySize = 800; 
    }
  }
  
}

void mouseClicked() {
  myColor = color(random(50,255), random(50,255), random(50,255));
}

void mouseDragged() {
  myColor = color(random(50,255), random(50,255), random(50,255));
  ellipse(mouseX, mouseY, mySize, mySize);
}

This is still a pretty minimal sketch. I did have to add in the upper and lower value limits on the size of the circle or things started to go in reverse if you held the key down too long.