Go with the flow 9 November, 2008 at 8:09 am
A lone voice in the emptiness of web-space called out to me, asking about how I posted a Processing sketch to my blog. Gabriel’s comment:
Hi
first off, love the sketch. I am looking for a dead simple way to post my sketches on a blog. For the image above, are you doing a screengrab and then cleaning it up? Is there a ‘tool’ out there for grabbing one without the tedium of either adding code to the sketch itself or having to go into photoshop and crop out all the unwanted stuff?
what’s your workflow?
I can’t take the credit for the coolness of the sketch – it was written by David Pena and came as part of the processing-0144.zip download from Processing.org – I only tinkered with it a bit.
In any case, I don’t know exactly what I did, and I know that I rearranged the files on my webserver some time after the original post, but here’s the general idea (with a note that I’m running under Windows XP):
Export from Processing
Get the sketch up and running in the Processing Development Environment. Cool (thanks Davin Pena and the people who built Processing, the Open GL engine, et al). I think the sketch needs to be saved before doing an export, so do that if you haven’t already, and do an export [File > Export (Ctrl+E)]. This creates a folder called “applet” in the same location as the saved sketch (where the .pde file is). In this folder are all the files that are needed to run (or might be needed, such as the system-dependent JOGL files for various operating systems), and which you somehow need to get on to your webserver later.
Grab a screenshot
In my case, I used IrfanView to take a screenshot whilst the sketch was running. IrfanView, if you don’t already know it, is a small, fast and free (to use, for non-commercial purposes; not open source) image viewing application for Windows. it has a bunch of basic editing features built in, like screen/window capture, which I use quite often, so am familiar with the shortcuts and how it is set up.
Not necessary to understand, but since the question asked about things being easy… Note that once you’ve done the following a couple of times, it becomes easy enough and fast enough for most purposes.
- Open IrfanView. For me, this means three keystrokes (Windows Key, i, i) because I have an “Image” program folder in my main “Start menu” and “Irfanview” is the only entry starting with “i” in that folder. It might take 5-10 seconds on my machine the first time, but note that this is a 4-years old install of Windows XP on a laptop running (still “working”, amazingly enough, despite several chances to die horribly installing service packs and possibly hundreds of applications going in and out besides!). Still, better than waiting for Photoshop for a small job.
- Start screen capture [Options > Capture/Screenshot... (C)]. I use the “Foreground window – Client area” option with hotkey (Alt+Z), showing the captured image in the main window… these options will be obvious when you’re running IrfanView.
- Give focus to the running sketch, hit the hotkey (Alt+Z in my case)… easy.
- Cleanup (optional): I wanted to give more prominence to the ball, so a crop was in order. Create a selection – you can left-click-drag a rectangle, or, as I wanted a certain size, I used [Edit > Create a custom crop selection... (Shift+C)]. There are plenty of options; I wanted 4:3 aspect, and entered 450 for the width, which automatically set 337 for the height. You can also specify the top-left corner of the selection, however I usually leave this as (0,0) and after the selection is made use right-click-drag to position the crop selection. Once you’re happy with the selection, [Edit > Crop selection (Ctrl+Y)] performs the crop.
- Save the image: [Edit > Save as... (S)] (note that, unusually, (Ctrl+S) is for Save and (S) on it’s own is Save as, however since this image is from the clipboard and not a file it doesn’t make any difference). There are many image formats you can save out to (I think you need to install the IrfanView plugins to get some of them; I recommend the plugins for the JPEG lossless rotate if nothing else). I’ve decided to use the same base filename as the sketch and put it in the “applet” directory with all the other files needed to run the sketch. (This probably isn’t what I did in the first instance, but could be in future!)
Get it online
For me, this meant using FTP to upload all the files in the “applet” directory to my web host. My original plan involved creating a “processing” subdirectory from my web root, with a separate “applet” directory for each sketch, renamed from “applet” to the name of the applet.
eg. web_root/processing/Esfera_mod_by_spxl
I created a new blog entry (I’m using self-hosted WordPress) and inserted an image (specifying the full URL http://subpixels.com/processing/Esfera_mod_by_spxl/Esfera_mod_by_spxl.png for the image src), hyperlinked to the “applet” directory (using the full URL).
This worked just fine.
It bothered me that the library files were so big – not because of the space required, since I have some 500 gigabytes available…), but because of how long it takes me to upload even a few megabytes. Yes, I am impatient; around 20k/sec is not a speed I am happy with, but I digress. I also had the intention of, at some time in the near future, to upload a bunch of sketches, and realised the burden of downloading the libraries every time isn’t something anyone needs. It might be possible, but I couldn’t figure out how to get a sketch running that referenced libraries in another folder.
What’s the answer? Put everything in the same folder, of course!
(2009-01-06 edit: the everything-in-one-folder solution wasn’t working out so well, so I have rearranged my Processing content into separate folders for each sketch. The following notes are therefore no longer accurate, nor recommended!)
So the file structure was as follows:
- http://subpixels.com/
-
- processing/
- Esfera_mod_by_spxl.html – sketch’s web page
- Esfera_mod_by_spxl.jar – applet archive
- Esfera_mod_by_spxl.java – Java source
- Esfera_mod_by_spxl.pde – Processing source
- Esfera_mod_by_spxl.png – screenshot image
- ..and all the other required files…
The hyperlinked screenshot HTML looked (almost) like this:
<a title="subpixels.com: processing applet | Esfera_mod_by_spxl"
href="http://subpixels.com/processing/Esfera_mod_by_spxl.html">
<img src="http://subpixels.com/processing/Esfera_mod_by_spxl.png"
alt="Processing sample: Esfera mod by spxl" /></a>
Of course, a linked image caption costs extra. ;o) Something else I did was create a symbolic link named “index.html” which I’ve pointed to “Esfera_mod_by_spxl.html” so that anyone navigating to http://subpixels.com/processing for a poke around didn’t get a directory listing. I could have just renamed (or copied) the Esfera_mod_by_spxl.html file, but that would be too easy…
And for your edification, the result, with the updated Processing code, executible, Java file and screenshot. I’m uploading the new files now. Okay, maybe not now, but soon. (This reminds me of a scene from Spaceballs…).
Esfera_mod_by_spxl
based on Esfera.pde by David PenaSource code: Esfera_mod_by_spxl.pde
Something I didn’t note earlier, is that I put in a mousePressed() callback to start/pause the animation when the mouse is clicked. I’ve put in some new comments about that, modified the code slightly to be clearer for people new to programming, and added/updated various other comments.
I probably wouldn’t recommend embedding the applet itself into your blog posts, since several posts on one page means several applets, and if anyone else’s system is like mine and takes aaaages for the Java runtime to load for the first time, people are going to leave your blog possibly before even seeing any of your content… probably not what you’re hoping for!
I’m sure putting everything in the same directory will come to bite me on the arse when I want to start using a data directory, but that could be solved by the sketches having their own named subdirectories I suppose.
(2009-01-06 note: my arse was bitten when Processing 1.0 was released as the OpenGL libraries changed!)
Perhaps I should stop concerning myself with such things until I actually publish another sketch… That’s right, I put one sketch online and stopped right there!
I have half a mind to create a WordPress plugin to handle some of the details nicely. The other half of my mind is saying, “What do you know about creating WordPress plugins?!” :o)
And now to test the multiple-sketches-in-one-directory theory… Stay tuned!
-spxl
