Processing in WordPress
[pjs4wp] //Info: https://processingjs.org/reference void setup(){ size(110, 110); background(#444444); stroke(#00ff00); font = loadFont(“Akkurat-Bold-32.vlw”); textFont(font, 20); text(“draw”, 10, 30); } void draw() { if(mousePressed==true){ line(0, 0, mouseX, mouseY); } } void mousePressed(){ cursor(CROSS); background(#444444); } [/pjs4wp] [pjs4wp] //Info: https://processingjs.org/reference int xPos=0; PFont font; void setup() { size(112,112); xPos=0-width/2; strokeWeight(2); fill(255, 100, 0); background(#444444); } void draw() { background(#444444); createBlob(); ellipse(xPos, height/2, random(100), random(100)); xPos++; if(xPos>width*1.5){ xPos=0-width/2; fill(255, 100, 0); stroke(0); } } void createBlob(){ font = loadFont(“Akkurat-Bold-32.vlw”); textFont(font, 20); text(“click”, 10, 30); } void mousePressed(){ fill(random(255), random(255), random(255)); } [/pjs4wp]
It’s quite a simple plugin, all it does is add a “Processing” button to the WordPress text editor. It injects sample JavaScript snippet into your page or post, allowing you to paste in your own Processing code. It took me a while to work out the best way to use the button. The default formatting is pretty basic so I tried editing the PHP in order to wrap canvas elements in a styled div but nothing seemed to work properly. In the end I just wrapped the injected javascript code in divs with inline styles. I guess this is ultimately the more flexible approach, allowing me to format canvases individually to fit the layout of specific posts.
These are the first, rather rubbish, Processing Sketches I ever wrote; saved here for posterity and encouraging me to pull my finger out and post the recent stuff, when it’s finished.
