Despite all the work I’ve been doing with Processing I don’t have many of the functional applets on the web. This is partly due to issues with embedding applets into WordPress posts. WordPress, the content management system I use for this site, is a great tool, but it has an unfortunate habit of screwing up code posted within the page content.
There are, of course, plugins to get around such issues, but I have a better plan. I’m building a WordPress plugin expressly for embedding Processing sketches. I’ve built a very basic version without any admin options. Inserting a simple shortcode into a post adds the applet. The shortcode is contained in brackets and simply reads ‘processing file=”path/to/file.jar” width=”450″ height=”250″‘. The .jar file can be uploaded with the media uploader within the “edit post” page in the WordPress admin or through the media library. The plugin includes the core.jar, so only the specific (and fairly small) .jar file for the applet needs to be uplaoded.
My basic script suits my own needs, but I’m working on an expanded version with an admin panel to set default options, alt text, and styles. I’m also not sure how this will render in RSS readers (probably not well but it should work in the site).
If you have any questions or suggestions on how I should move forward with this or features I should include leave a comment. The plugin should be available within the next few weeks.
For now, here’s a little test. I created this clock a while ago and thought it was a nice simple thing to try. Any comments on how this is rendering are appreciated. I will certainly, after a lot more testing, put up more of my sketches, especially my various ribbon and particle system projects.
And just for fun, here’s the source for the script above. It’s not done super efficiently, but it is an older script.
processing code
code formatterDial Clock
String s, m; void setup() { background(20); size(450,200); noFill(); noStroke(); smooth(); PFont font; font = loadFont("Palatino-Roman-43.vlw"); textFont(font, 20); textAlign(CENTER); } void draw() { translate(width/2,height*1.5); scale(.57); frameRate(1); background(255); float sec1=float(second()); float sec2=(sec1/60)*TWO_PI; float min1=float(minute()); float min2=(min1/60)*TWO_PI+sec2/60; float hr1=float(hour()); float hr2=(hr1/12)*TWO_PI+min2/12; fill(255,60,50); triangle(0,-490,10,-505,-10,-505); fill(30,30,40); pushMatrix(); rotate(-hr2); for (float i=0; i<=120; i++) { if (i/10!=int(i/10)) { float angle=(TWO_PI/120)*i; pushMatrix(); rotate(angle); if ((i-5)/10==int(i/10)) { triangle(0,-457,-5,-450,5,-450); } else { ellipse(0,-450,3,3); } popMatrix(); } } popMatrix(); noStroke(); textSize(43); pushMatrix(); rotate(-hr2); for (int i=1; i<=12; i++) { float angle=(TWO_PI/12)*i; pushMatrix(); rotate(angle); text(i, 0, -450); popMatrix(); } popMatrix(); pushMatrix(); textSize(28); rotate(-min2); for (int i=1; i<=60; i++) { float angle=(TWO_PI/60)*i; if (i<10) { m="0"+i; } else { m=str(i); } pushMatrix(); rotate(angle); text(m, 0, -420); popMatrix(); } popMatrix(); pushMatrix(); textSize(16); rotate(-sec2); for (int i=1; i<=60; i++) { float angle=(TWO_PI/60)*i; if (i<10) { s="0"+i; } else { s=str(i); } pushMatrix(); rotate(angle); text(s, 0, -398); popMatrix(); } popMatrix(); }
Andy Mangold
Looks pretty good for me on this machine, though it is a LITTLE bit aliased and it disappears whenever I am actively scrolling.
Firefox 3.0.13, OS X Version 10.5.7, Dual 2 Ghz PowerPC G5
D. Marec
looks great for me. Hope the final work is coming soon.
Safari 4.0.3
tony
I noticed the aliasing as well. I think that and the scrolling issue are just problems with rendering in a browser which are out of my control. I’ll look into it though.
It didn’t render in my RSS reader, I just got the alt-text. I’ll add in a conditional to put a helpful message in readers if other people have the same result. Also I think an attribute for a still shot to add to the alt text.
jim
Firefox 3.5.2 and Safari 4.0.2 show no problems, other than the scrolling issue – which frankly isn’t a bother.
Google Reader does not render it.
Good job altogether. Really looking forward to your other live sketches.
jim
I found something interesting just now.
The applet fails after commenting, because it redirects to the comment page:
“http://www.anthonymattox.com/embedding-processing-applets-in-wordpress/comment-page-1#comment-XXXX”, it results in this error: “Applet num_rot_clock_2 notloaded”.
tasar?m blogu
really great for me. thank you.
Bill
That’s a pretty cool little clock now back to reading all these books so I can actually understand the codeing
Amy
eagerly awaiting for this plug-in. Runs fine in Firefox 3 on Mac OS X
Charles Griffin
Looks good in Safari 4.0.3 on a Mac. I’d love the plug-in too, for the same reasons.
Sergio Majluf
Hi, I’m sure this’d be an awsome plugin. Need any (design, interface, code)help with it?
Kara Bee
Awesome Idea for a Plugin!
Can’t wait it function