P{three-sixty}5

-----------------------------------------
THIS IS NOT THE CURRENT POST


For the time being, to view the current entry you need to click on the June 2008 archives in the sidebar and then scroll to the bottom of the page. I apologize for the inconvenience.

My (soon to be former) ISP made an unannounced server migration and software “upgrades” that vaporized two weeks worth of email and are making Wordpress list all of the entries in reverse order. For those of you here for the files from my Processing session at Flashbelt, keep an eye on the Flashbelt 08 category in the sidebar. Again, I’m sorry for the inconvenience, and thank you for your patience while I get this sorted out.

-Tim
—————————————-

view the sketch—view the code

Introducing… the Snoop loop. It’s important that variable names are concise yet descriptive and easy to remember. Why do we always settle for things like “i” and “n” for counters? I hereby propose that “shizzle” be the new convention for naming a counter variable in for loops. It seems only natural. Let the revolution begin…

view the sketch—view the code

How do you use it?
Move the mouse around over the picture.

What is it?
To help better demonstrate the idea of the for loop, I wanted to make the numbers visible. Since I had found my muse in Snoop Dogg, and since the image is from his The Doggfather album figured I’d use a Godfather-style typeface. I promptly downloaded a free font from some website, and got back to coding. Except I can’t get the numbers to show up!

Why is it cool?
Well… right now it’s not cool ’cause it ain’t working. I’ve tried converting it to a char(), building it up in a string, putting the int right in the text command. Nothing! It echos to the debugging pane if I use a println, but I can’t get the number to render in the sketch window.
Oh, and I did comment-out the background(); call in the draw() loop so that the faces build up.

Loose ends:
Getting the value of shizzle to display.

view the sketch—view the code

How do you use it?
Move the mouse around over the picture.

What is it?
It is finally working, that’s what it is. A lesson in troubleshooting and debugging courtesy of a font.

Why is it cool?
I also teach typography; a discipline that is unappreciated if not unknown outside of the design community. Most of us know typography as simply choosing between Helvetica and Arial in the MS Word font menu (btw choose Helvetica). In reality there are thousands of fonts out there. Some are drawn from highly refined, classic, old-style serifed letterforms that have been used to set countless pages full of text since the days of Gutenberg. Some are thoroughly researched, carefully designed, modernist sans-serif fonts developed in the pursuit ultimate readability. Some are more decorative and ornate display fonts intended to be used in headlines and other large-scale situations. Before they develop more discerning tastes, many beginning graphic design and typography students (I’ll admit, I was once one of them) are strangely drawn to elaborate display and novelty typefaces. You know, the ones in which the letters are made out of splatters of blood, or graffiti, or that mimic the the lettering from the title of your favorite movie, say… The Godfather.

You can either copy (a.k.a. steal) fonts from a friend, buy fonts, or download them from websites that offer free fonts. As appealing as free fonts may sound, they are often not of the highest quality and may be missing characters such as punctuation, accents and numerals. This is a warning that I give all of my beginning students.

Ready for the punchline? After all of the hairpulling and juggling of variables the answer would not be found by poring over the code. I had written it right the first time. What I had also done was download a free font that only contained letters, no numbers!

You can file this under: “If the computer’s not working, make sure it’s plugged in.”

view the sketch—view the code

How do you use it?
Move your mouse up and down over the image.

What is it?
A quick test in detecting mouse position. Displays a different image depending on mouseY. This is development for an interactive time-lapse photo project.

Why is it cool?
I’m not sure yet.

view the sketch—view the code

How do you use it?
Move your mouse up and down over the image.

What is it?
Added a third image to yesterday’s sketch. In the end, my vision is that the image will change only in the local area of the mouse pointer. Essentially displaying the images on a pixel level (a la the kronos projector).

Why is it cool?
This time I also took the opportunity to try out the switch/case functions. This provides an alternative to using nested ifs for selecting between a larger quantity of options. In this case (was that a pun?) it doesn’t feel like the most efficient way to do things, but hey, at least I’ve learned something new.

view the sketch—view the code

How do you use it?
Still just move your mouse up and down over the image.

What is it?
In same as yesterday… on the surface. One of my goals for this blog is to develop examples to use for teaching programming in my classes. Today I have stumbled upon the first of these; optimization.

Why is it cool?
From yesterday’s version I changed the mouse position detection from nested if/else statements to sequential ifs. This makes the code easier to read and seems more efficient.

Current version:
if(mouseY<=height/3) {
pic=1;
}
if(mouseY > height/3 && mouseY < 2*(height/3)) {
pic=2;
}
if(mouseY>=2*(height/3)) {
pic=3;
}

Previous version:
if(mouseY<=height/3) {
pic=1;
}
else{
if(mouseY > height/3 && mouseY < 2*(height/3)) {
pic=2;
}
else{
pic=3;
}
}

view the sketch—view the code

How do you use it?
Click anywhere on the image to toggle display of the other half of the image.

What is it?
From yesterday I have a program that displays one image or another depending on mouse position. The new problem is how to display just part of a loaded image. Processing’s image() command displays a loaded image. But will only display the entire image. I want to display only specific areas of an image.

Why is it cool?
The answer was in accessing the pixel[] array. A raster-based image is really just a long string of color data—one entry for each pixel. This is the pixel[] array. Nested for loops (note the “shizzle” variable) read the colors of a specified range of pixels and then reconstruct the image by drawing 1-pixel by 1-pixel rectangles filled with the same colors.

Also note, in the setup() function the image is loaded before the size() is set. This allows you to use the .width and .height methods to set the size so the sketch can adjust itself to the dimensions of the image file.

Loose ends:
It runs much more slowly than I would like. This may all that my dear old G3 iBook can muster, or something with Java in OS X, but my hunch is that there is something more I could do in the code to speed it up. Now that it’s posted I can try it on some different systems.