Include Processing JS sketches into your WordPress blog posts.
Download — Latest Version
- Version 1.0 (zip file)
- View code at the WP Plugin Repository
Installation
The easiest way to install the plugin is to install with plugin installer (enter your WordPress address).
If you want to do it manually:
- Upload the processingjs directory to the /wp-content/plugins/ directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
Once activated, you’ll notice a ‘processing’ button when you’re writing or editing a post in HTML mode. Clicking it will insert a very simple Processing sketch into your post. You can use it as a template or write your own from scratch. You’ll find examples (with code) of what can be done here: Processing JS Demos.
Changelog
- 1.0 (2011-02-03)
Updated to use Processing.js 1.0 – thanks to digitalawakening - 0.5 (2009-09-02)
Initial release
Questions?
- Leave a comment or email: keyvan (at) keyvan.net
Donate
If you find this piece of code useful, please consider donating. I work on these projects in my spare time. My site carries no advertising and I release most of the code I work on under a free software license so anyone can benefit from it. I don’t receive any payment for this work so I have to rely on donations if I want to put off becoming a wage slave. Your contribution (whatever the amount) would be greatly appreciated.
26 Comments
Hello thanks for this awesome plugin, it definetly beats the java/html manual solution. I have a question though, if my processing file uses external files (such as a font or a picture) where do I need to keep them in wordpress in order for them to be called up on correctly?
Hi Simon, glad you like the plugin. As for external files, I don’t think Processing JS looks into a specific folder by default. So you should be able to place external files anywhere you like but refer to them with an absolute path. E.g. /wp-content/uploads/
Simon, thanks for writing the program.
I am wondering if the Minim audio library can function within the plugin environment?
Because I am extremely new to Processing, I may be dreaming a bit. But I wanted to ask you. Please reply when you have a moment. Thanks.
Apologies, my last question is directed towards Keyvan.
Sped: I think you’ll find many of the libraries you’re used to in Processing missing from the JS version. I know audio is one area where there is some work being done at the moment. You might find some information in this thread: http://groups.google.com/group/processingjs/browse_thread/thread/b89ca0e7f14558a2
hello
scuse my bad english (i’m french)
First, congratulation for this plug. it’s verry interesting and easy tu put the native processing code in the html version of a wordpress post. and sketchs looks very clean.
But nevertheless, I Have one inexplicable problem about the cursor :
for exemple, in a classic configuration with basic void setup, and void draw (x,y,mouseX,mouseY); when the mouse cursor is upon the sketch area ,the line would come on the exact point where the user’s mouse is positioned in time ….what should be. because in my case, I have a big interval between my cursor and my effective drawing point (about 100px!! it’s to much), and I’m 200% sure about the problem doesn’t come from my processing code. I hope i’m clear, it’n not very easy to spell out. Imagine, it’s like if you are drawing with à paint, and the draw doesn’t exist under your paint, but 1 mile further…
So I’m sorry, but except of this, this program is very good! but THIS!!!
…theire is somethig to fix in my case : HELP will be more appreciated .
tanks a lot!
And Sorry for the English
(i would like to say “help will be MUCH appreciated”)
Quentin.
Hi Quentin, thanks for reporting this. I’m a little busy at the moment but I’ll look into this as soon as I get a little time. Perhaps a newer version of processing.js will fix it. No idea what else to suggest at this time, sorry.
Hey! Thanks for the great plugin. Everything is working out but I’m having trouble getting my fonts to show up. I using loadFont:
font = loadFont(“Georgia-Bold-20.vlw”);
But no matter where I put the .vlw file and no matter how I try to address it never seems to load. I’ve tried point to it as explicitly as I can. Any thoughts?
Thanks in advance?
Alan: Font are handled differently in Processing.js. You might want to have a look at this page: http://processingjs.org/reference/loadFont%28%29
Also, the version of Processing.js in this plugin hasn’t been updated in a while – I’ll hopefully have an update out soon.
Hi!
Thanks for the great plugin. I also seem to have same problem concerning fonts in the sketch. I’ve looked all the reference in processingjs site but became no wiser…
Also tried dfferent places to upload the fonts.
Would greatly appreciate if you could give some example on how to use fonts with the plugin!
Tomi: from what I’m reading on the Processing.JS site, it appears fonts are still not well supported – and it appears there’s only experimental support for using your own fonts. This page http://processingjs.org/reference/loadFont_ says “Font support for the Canvas element varies across browsers. FireFox currently has the best support, but still uses a pre-defined set of fonts.”
Processing.js v1.0 was released recently – I still haven’t had time to update this plugin so if you are going to experiment I would suggest downloading the latest version from their site and trying out the examples given there. Download page here: http://processingjs.org/download
THANK YOU SO MUCH FOR YOUR GREAT WORK! It’s a very basic plug-in, for what I can tell no arrays, bummer, but it’s FINE! I’ve been struggling for the last 3 hours how to post a Processing sketch to WP 5. This made my day. I can take a break now…
Thanks so much for the processing.js 1.0 plugin!
I’ve made an app for my website, that includes three images. It works perfectly, except for the fact that there is a large black rectangle right next to my app, and a box appears saying:
“There appears to be a problem with the processing code…
Syntax error
syntax error”
And idea as to why this might be? the code works perfectly in processing, and with your Processing.js plugin it works perfectly except for the black rectangle…
Mari: Glad you like it.
Jón: If you email me the code I can try it here and see if I can reproduce your results. It may be a problem with the plugin or with the way the JS port interprets your code.
Well, actually I figured it out somehow, there was an extra piece of string in there somewhere. But thanks anyway
I have a more pressing issue I need to get sorted out, though, which I believe would be helpful to others too. I’ve posted an application on my website, but the thing is it doesn’t work with internet explorer. I use firefox, and it works perfectly on my browser, but people using explorer simply don’t see anything appear at all.
Do you know the solution to this? I’ve found some answers on the web, but none of them is wordpress specific. It would be helpful with a step-by-step guide for getting the processing.js plugin working on internet explorer.
Yes, I agree with Jon.
you cannot see the sketch on IE. It’s a shame for PC users, which most corporate offices have. I wish I knew programming enough to figure it out how to make it work…
Thanks again for such great solution to adding an interactive sketch to wordpress.
I think the IE issue has to do with lack of support for HTML5′s canvas. My understanding is that it will be supported in IE9, see http://weblog.bocoup.com/canvas-in-ie9-too-good-to-be-true
There are workarounds for older IE browsers, but I don’t know how effective they are (so not sure if it would be helpful to use them in the plugin). If anyone has any suggestions, please let me know.
I haven’t tried this plugin yet, but thanks so much for putting it together. Looks amazing.
One question, though: are current IE versions (IE8 and below) supported at all? Or are only some functionalities not available in IE?
I personally don’t use IE except for compatibility testing, but it would be nice to have my audience using IE be able to see my work! Thanks much.
hi Keyvan,
i was wondering if there’s any chance to trigger processing in a live ajax load call, basically updating the dom three with an ajax call.
Thanks for the great plugin,
best regards!
first of all: thanks you for makin this plugin. its really great!
what’s bugging me, is the question: now that, according to the processing.js references, it is possible to import libraries (correct me if i’m wrong, its just not red anymore – havnt tried it yet), at what location do i put the library files/folder, when using the wp-plugin?
@Aaron (apologies for the late reply): As far as I know they are not because they lack HTML5′s canvas support.
@Tipografo: I haven’t tried it myself, but I’m pretty sure you can. The reference page says: “Regular Javascript commands will work in Processing.js script.” So you should be able to refer to a DOM element in the document to see if it’s been updated, and then act on that. Again, not something I’ve tried myself.
@steffen: if the import command is supported now, it’s most certainly for importing Javascript libraries made for Processing JS (the libraries most Processing users are familiar with are written in Java, and won’t work with Processing JS).
how could i oversee that! thanks for the answer!
There is something strange for me when trying to view blogs that use this plugin in Chrome on Win7 64. I have tried the newest Chrome (12.0.742.100) on two different Win7 64 computers with the same results. Often the pages do not load at all. They just show up as a blank white page.
It gets weirder. If I google “processingjs blog” and click the first link, it does not work (blank page). BUT, if I copy the link path and paste it into a new tab, it does work. That process is 100% repeatable on the machine I am using right now.
I do not have any problems when using Internet Explorer, but I generally avoid IE.
Is there any obvious reason for the problem?
skrasms: I just tried to access the Processing JS site via Google search results, using Chrome, and I had the same problem. Strange. I don’t think it’s a problem with this plugin – as far as I know the plugin is not even used on the Processing JS site. I had no issues in Firefox, and, like you, could access the if I pasted the URL directly into Chrome.
Do you have examples of other sites which use Processing JS and exhibit this problem?
Hi Keyvan,
I’m having trouble running this plugin in my website and i’m wondering if can give me some advice.
I’m running wordpress 3.0.4 and i’ve installed the plugin with no problems and, of course, I activated it.
Problem is that the sketches won’t show up when I try to “Preview” them! Even the example it appears when I press “processing” tab in the posts area doesn’t show up. It is like a blank post…
Any ideas? Do I have to install anything in my server directory?
Thanks for your help and time developing this plugin.
Filipe
11 Trackbacks
[...] be posting more projects as I complete them. Thanks to Keyvan Minoukadeh for creating a nifty WordPress plugin that allows a user to draw a Processing sketch in [...]
[...] WordPress tweetmeme_url = 'http://tande.jp/lab/2011/01/805';tweetmeme_source = '_tande_';Processing JS [...]
[...] processing.js kann man Processing Code in Webseiten einbinden. Für WordPress existiert sogar ein Plugin, mit dem das Javascript notwendige in der Version 1.0 automatisch eingebunden werden kann. Das [...]
[...] just installed this rad plugin from Keyvan Minoukadeh. It allows you to run Processing sketches right in your WP posts. Which is [...]
[...] Processing.js work with WordPress? You bet it can my friends! Download a nice plugin like this one (http://www.keyvan.net/code/processing-js) and you’re ready to [...]
[...] Processing.js本家も推してる、PostsやPagesの中でまんまProcessingのコードを書けるPlug-inもあります http://www.keyvan.net/code/processing-js/ [...]
[...] Processing JS WordPress Plugin by Keyvan Minoukadeh is a great tool for embedding sketches easily into blog posts. [...]
[...] website. It’s actually pretty strait forward. In fact someone was nice enough put together a wordpress implementation of processing.js, so all I had to do to include sketches in my posts was install a plugin. [...]
[...] get it working, I first installed the Processing JS pluginfrom Keyvan Minoukadeh (you can do it directly from your WordPress admin control panel, just go to [...]
[...] Processing JS WordPress Plugin http://www.keyvan.net/code/processing-js/ [...]
[...] processingで書いたコードをWordPressに埋め込むプラグインprocessing JSを利用する。 [...]