Processing JS WordPress Plugin

Include Processing JS sketches into your WordPress blog posts.

Download — Latest Version

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:

  1. Upload the processingjs directory to the /wp-content/plugins/ directory
  2. 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

Processing JS button in HTML mode

Changelog

Questions?

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.










41 Comments

  1. Simon
    Posted 7 November 2009 at 3:54 pm | Permalink

    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?

  2. Posted 8 November 2009 at 12:47 pm | Permalink

    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/

  3. Sped
    Posted 25 January 2010 at 8:47 am | Permalink

    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.

  4. Sped
    Posted 25 January 2010 at 5:50 pm | Permalink

    Apologies, my last question is directed towards Keyvan.

  5. Posted 26 January 2010 at 2:46 pm | Permalink

    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

  6. Posted 11 March 2010 at 1:16 am | Permalink

    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!

  7. Posted 11 March 2010 at 1:19 am | Permalink

    And Sorry for the English
    (i would like to say “help will be MUCH appreciated”)

    Quentin.

  8. Posted 11 March 2010 at 2:35 am | Permalink

    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. :(

  9. Posted 25 October 2010 at 10:40 am | Permalink

    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?

  10. Posted 25 October 2010 at 11:49 am | Permalink

    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.

  11. Posted 6 December 2010 at 10:14 pm | Permalink

    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!

  12. Posted 8 December 2010 at 4:48 am | Permalink

    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

  13. Mari
    Posted 15 January 2011 at 10:13 pm | Permalink

    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…

  14. Posted 7 February 2011 at 11:46 pm | Permalink

    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…

  15. Posted 9 February 2011 at 5:17 am | Permalink

    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.

  16. Posted 16 February 2011 at 11:15 pm | Permalink

    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.

  17. Mari
    Posted 17 February 2011 at 9:26 am | Permalink

    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.

  18. Posted 17 February 2011 at 2:04 pm | Permalink

    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.

  19. Posted 17 March 2011 at 3:48 pm | Permalink

    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.

  20. Posted 18 May 2011 at 3:54 pm | Permalink

    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!

  21. steffen
    Posted 18 May 2011 at 7:12 pm | Permalink

    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?

  22. Posted 19 May 2011 at 7:49 pm | Permalink

    @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).

  23. steffen
    Posted 19 May 2011 at 10:11 pm | Permalink

    how could i oversee that! thanks for the answer!

  24. skrasms
    Posted 18 June 2011 at 7:25 pm | Permalink

    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?

  25. Posted 29 June 2011 at 12:47 am | Permalink

    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?

  26. Posted 31 December 2011 at 5:44 pm | Permalink

    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

  27. Posted 8 August 2012 at 4:59 am | Permalink

    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!!!

  28. Posted 20 November 2012 at 1:30 am | Permalink

    I activated the processing plugin but dont see it when switching to html when creating a new post.

  29. Posted 21 November 2012 at 5:10 pm | Permalink

    Going to look into this soon. I’m guessing something has changed in a recent WordPress update. Will update here when I know more.

  30. Posted 26 November 2012 at 9:18 pm | Permalink

    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!

  31. Posted 27 November 2012 at 6:54 pm | Permalink

    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).

  32. Ben Jarrett
    Posted 16 January 2013 at 3:35 pm | Permalink

    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

  33. LM
    Posted 28 January 2013 at 10:28 pm | Permalink

    Clearly the plugin is having trouble with WordPress 3.5.1.. is there any news on an updated plugin that fixes this?

    Thank you.

  34. Posted 28 January 2013 at 11:35 pm | Permalink

    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

  35. LM
    Posted 29 January 2013 at 11:30 am | Permalink

    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!

  36. LM
    Posted 29 January 2013 at 1:10 pm | Permalink

    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

  37. Posted 29 January 2013 at 2:29 pm | Permalink

    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.

  38. Posted 3 April 2013 at 2:27 am | Permalink

    Hi,

    Great small plugin, it will be useful for me as I am writing some image processing tutorials using Processing.js, on my WP blog.

    I currently have blog pages and processing.js sketches pages, now I can combine both.

    I had an issue when trying your plugin, because I was testing in “preview” mode. The fix was simply to reload the preview (FYI, I am using Chrome 26.0.1410.43 on MacOS 10.7.5).

  39. Posted 15 April 2013 at 1:12 pm | Permalink

    Hi Gael, glad you found it useful. And thanks for the report about preview mode not displaying your sketch. I’ve noticed this too. I think the reason is due to a security feature built into Chrome. See http://stackoverflow.com/questions/1547884/refused-to-execute-a-javascript-script-source-code-of-script-found-within-reque

    I’ll have to see what I can do to prevent this. As you say, reloading the page after hitting preview should work.

  40. David
    Posted 4 November 2013 at 1:48 am | Permalink

    I’m having trouble using images. I’ve written a little program with a one-line setup that calls size(), and a tiny draw that clears the background and draws a rectangle. That works fine. If I then put a @pjs directive at the top to pre-load an image (e.g., /* @pjs preload=”picture.jpg”; */), then suddenly there’s no canvas, no graphics, nothing except the HTML that was around my code. I’ve tried variations on the path ranging from absolute pathnames starting with http: all the way down to the purely local path as above. I’ve tried putting my pictures in wp-content/uploads and into a separate folder at the top of the WordPress installation. Nothing works. I’ve not been able to find a single example where this is done successfully in WordPress. Any advice would be greatly appreciated! I’m using Processing.js 1.4.1 and WordPress 3.7.1.

  41. Milena
    Posted 4 December 2013 at 12:53 am | Permalink

    Omg thank you so much for this programm! I wasn’t able to get the processing code via html into my web and it’s a college project.
    You’re a savior! Imma donnate when I can :)

15 Trackbacks

  1. By Processing project no. 1: Lines | Ian Hill on 13 March 2010 at 5:18 pm

    [...] 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 [...]

  2. By Webで簡単にprocessing! « tande lab. on 9 January 2011 at 9:44 am

    [...] WordPress tweetmeme_url = 'http://tande.jp/lab/2011/01/805';tweetmeme_source = '_tande_';Processing JS [...]

  3. By Processing.js | No more cubes. on 5 February 2011 at 9:35 pm

    [...] 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 [...]

  4. [...] just installed this rad plugin from Keyvan Minoukadeh. It allows you to run Processing sketches right in your WP posts. Which is [...]

  5. [...] 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 [...]

  6. [...] Processing.js本家も推してる、PostsやPagesの中でまんまProcessingのコードを書けるPlug-inもあります http://www.keyvan.net/code/processing-js/ [...]

  7. By Interactive 404 Error Page : f#kx on 24 September 2011 at 4:50 am

    [...] Processing JS WordPress Plugin by Keyvan Minoukadeh is a great tool for embedding sketches easily into blog posts. [...]

  8. By Processing.js | Jason Smith on 22 November 2011 at 9:03 pm

    [...] 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. [...]

  9. [...] 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 [...]

  10. [...] Processing JS WordPress Plugin http://www.keyvan.net/code/processing-js/ [...]

  11. [...] processingで書いたコードをWordPressに埋め込むプラグインprocessing JSを利用する。 [...]

  12. [...] 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 [...]

  13. [...] Tomé esta frase para hacer un pequeño sketch utilizando el plugin de Processing.js  para wordpress. [...]

  14. [...] I used the Processing JS plugin, written by Keyvan Minoukadeh. You can get it from this location : http://www.keyvan.net/code/processing-js/ [...]

  15. […] vous souhaitez afficher vos sketch un peu partout je vous recommande d’utiliser le plugin processing JS qui installe la librairie processing.js pour vous et vous donne acces a un shorcode dans vos page […]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting