Another Processing sketch, fairly simple. This one does introduce a function (or subroutine) named ‘makeBox’ that we pass some values into.
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.)
After repeated attempts to register, I concluded that Time Warner really doesn’t like my mail server, so I ended up using a Gmail address (which I didn’t want to do) and found the registration in the spam folder…
After a few failed login attempts, their system let me in, and I get this awesome “Try again later” message.
Keep up the good work Time Warner!
P.S. The Moxi kicks the Mystro’s ass.
Processing: 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.
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.)
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]);
}
}
}
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!
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.
Processing: Flying Triangles
Today’s Processing sketch features triangles of various shades flying upwards.
Pretty simple, eh? The original sketch this came from actually had just one triangle (which I’ll call a ‘spaceship’) which had the x-axis controlled by an Arduino with a potentiometer. This one doesn’t have that.
/*
* 20110505.pde
*/
void setup() {
size(800, 200);
frameRate(30);
}
int yPos = 0;
void draw() {
background(0);
stroke(255);
fill(0);
yPos = yPos - 3;
if(yPos < 0) {
yPos = height;
}
for (int i = 20; i < 790; i = i+20) {
int yColor = i/3;
if (yColor > 255) {
yColor = 255;
}
stroke(yColor);
triangle(i, yPos, (i-5), (yPos+10), (i+5), (yPos+10));
}
}
I’d like to go back to the single ship again, and work on adding a starfield which moves past the ship as it maintains it’s vertical position on the screen.