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.
Screenshot
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. Your contribution (whatever the amount) would be greatly appreciated.
37 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. 🙁
[…] 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 […]
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
[…] WordPress tweetmeme_url = 'http://tande.jp/lab/2011/01/805';tweetmeme_source = '_tande_';Processing JS […]
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…
[…] 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 […]
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.
[…] just installed this rad plugin from Keyvan Minoukadeh. It allows you to run Processing sketches right in your WP posts. Which is […]
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!
[…] Processing.js work with WordPress? You bet it can my friends! Download a nice plugin like this one (http://keyvan.net/code/processing-js) and you’re ready to […]
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?
[…] Processing.js????????Posts?Pages??????Processing????????Plug-in????? http://www.keyvan.net/code/processing-js/ […]
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?
[…] 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 […]
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
[…] Processing JS WordPress Plugin http://keyvan.net/code/processing-js/ […]
[…] processing????????WordPress??????????processing JS?????? […]
[…] was another! I googled the issue and came across an amazingly helpful WordPress plugin called Processing JS, which makes it nice and easy to implement processing sketches within the WordPress environment […]
Hey Keyvan.
First of all, thank you so much. I just tried the plug in and it worked flawlessly.
Since Processing.js can not import libraries such as controlP5 for the GUI, some people have been using Dat.Gui from Chromeexperiments: http://workshop.chromeexperiments.com/examples/gui/#1–Basic-Usage
An examples: http://haptic-data.com/sketches/simplex_trails.html
I was wondering how to implement Dat.Gui in the processing.js wordpress posts. Is that possible? How to do it?
Thanks!!!
I activated the processing plugin but dont see it when switching to html when creating a new post.
Going to look into this soon. I’m guessing something has changed in a recent WordPress update. Will update here when I know more.
Hi, I’ve been using the plugin happily for some time, and I noticed today that it no longer seems to render the sketch in an article. I tried with the placeholder sketch as well, so I’m assuming it’s an issue between a wordpress update and the plugin.
I made a little donation in the hopes that you’ll be able to find time to update. Thanks again!
I’ve just tested with a new install of WordPress 3.4.2 and my Processing JS plugin. I can see the processing button in HTML mode when writing a new post (see screenshot in this post). The sketch also displays correctly after I publish the post.
Those of you experiencing problems, can you tell me which version of WordPress you’re using and give me a list of plugins which you’ve installed (I think there might be a conflict with another plugin).
Hi,
This looks perfect – but! I assume there is some issue with the new WordPress 3.5? HTML is now called TEXT…? I am very keen to get this working, as it looks to be the best solution as everyone has mentioned.
Other plugins installed and activated are:
Akismet
All in One SEO Pack
Super Simple Google Analytics
Clearly the plugin is having trouble with WordPress 3.5.1.. is there any news on an updated plugin that fixes this?
Thank you.
I’ve just tested on WordPress 3.5.1 and it works as before. One difference is that the HTML tab has been renamed to TEXT, but this doesn’t affect the plugin. You should still see the Processing button when you switch to the TEXT tab.
Ben: I tried installing those plugins (didn’t configure them, just activated them) and found no issue with the plugin.
Ben and LM, and anyone else reporting issues. I’ve posted a screenshot on this page highlighting what to look for when editing or writing new posts in TEXT mode (the HTML tab shown in the screenshot, as mentioned above, has now been renamed to TEXT in WordPress 3.5). The ‘Processing’ button in this tab is inserted by this plugin. It would help me if you could provide the following info when reporting issues:
* Are you on Windows/Mac/Linux/…?
* Which browser are you using?
* Do you have this plugin installed and activated? (This plugin is called ‘Processing JS’ and the version is currently 1.1. Note: There is another WordPress plugin called ‘Processing.js’ by Ramoonus, I can’t offer any support for that, but if you have issues with this, you may want to give that a try.)
* Do you see the TEXT tab when writing or editing posts?
* If so, when you switch to the TEXT tab, do you see the Processing button (as shown in the screenshot on this page)?
* If you do, what happens when you click it? (It should post a sample Processing sketch into your post.)
* Are you testing only in ‘preview’ mode? (In some browsers preview mode will not render your sketch – you will have to either reload the preview screen, or publish the post to see it.)
* After you publish, do you see the sketch running?
Thanks, Keyvan
Ah.. I was using the ‘Processing.js’ by Ramoonus plugin and not yours. I just installed yours and can see the button. I’m going to try to upload my first sketch now. Thank you, Keyvan!
Hello again,
I thought since you were the processing go to guy I’d just ask you this question, feel free to tell me its not something you do.
I’m using a Fast Secure Contact Form plugin to acquire a certain amount of data from users, this data is being saved to a database using their sister plugin Contact Form DB.
I was wondering if you could direct me to a quick and easy way to use the data on that data base in processing sketches that would be posted to my site..
Thanks in advance!
Lina
Hi Lina, thanks for the update. I hope you managed to get a sketch up and running.
I should point out that I’m not a Processing expert. This plugin is simply intended to offer an easy way to get Processing sketches up and running in WordPress using the hard work of the Processing.JS team. I’m not a member of that team, and have had no involvement in creating Processing.JS itself.
About your question, I’m not familiar with either of those plugins so I can’t offer much help. I had a quick look at the Contact Form DB page and noticed there was mention of accessing the saved data as JSON. If I were doing this, I’d try to load this data as JSON and then access it inside your Processing sketch.
There’s an example you might find useful: http://processingjs.org/articles/PomaxGuide.html#json – In this example the data is not loaded in the Processing code itself. Instead a method is provided in the Processing code (addPoint) to allow the data to be inserted into the sketch. Regular JavaScript is then used to grab an instance of the Processing sketch, load the JSON data, loop through it and call the Processing method to add the data into the sketch. I haven’t tried doing this using this plugin.
[…] Tomé esta frase para hacer un pequeño sketch utilizando el plugin de Processing.js para wordpress. […]
13 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://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://keyvan.net/code/processing-js/ […]
[…] processing????????WordPress??????????processing JS?????? […]
[…] was another! I googled the issue and came across an amazingly helpful WordPress plugin called Processing JS, which makes it nice and easy to implement processing sketches within the WordPress environment […]
[…] Tomé esta frase para hacer un pequeño sketch utilizando el plugin de Processing.js para wordpress. […]