I get excited about the little things people build on top of WordPress. All those things like websites, blogs, and ecommerce stores are really cool, but those pieces of software that extend WordPress into realms few of us think about… those are stinking amazing. I especially get excited about data visualization experiments that can reside on top of WordPress and inform us on another level.
One of those integrations that I’ve been tooling around with lately has been Processing in conjunction with the WP API. Processing is an open source software that’s built for visual artists. It’s an easier way for artists to enter into the world of development and build beautiful things like generative art.
With an encouraging push by John Maeda, I began exploring some ways in which Processing could be integrated with WordPress. Because WordPress is open source software for the web, I thought I’d use Processing’s Javascript sister, p5.js. For that to make sense, let me explain that Processing uses Java as it’s programming language of choice. So in an effort to make this more accessible on the web, Lauren McCarthy and a community of contributors ported it over to Javascript. While I’ve been learning some basics in the Java arena, I’ve mainly been exploring ideas through the Javascript version.
P5.js makes it pretty simple to get Processing running on a website. Just include the Javascript library in your site, and voila! Well, actually you gotta code some stuff too. 😐
I tend to experiment on Codepen.io. It’s a great place to try things out and throw them away… or in my case, leave them there for others to laugh at when viewing my code. Nonetheless, starting simple is the way to go.
These were fun, and educational, but I wanted to start incorporating this with WordPress. Of course, I had to start simple once again. I’m no API expert, so I read up on how to connect with an API from P5.js. Turns out it’s pretty simple. P5.js has awesome documentation and examples.
The WordPress API, introduced in WordPress 4.7, uses the URL format:
[your domain name]/wp-json/wp/v2/
With this, we get a lot of API endpoints with which to connect. I figured let’s try something with posts. Maybe I can visually display the number of posts that contain specific words? Seems like a good place to start. Looping through the JSON Object, I finally built a search tool using HTML5 local storage, which allowed a user to search a specific keyword among the latest posts of a WordPress site. I used this code for a talk during Design Week for AIGA West Michigan.
After this project, I set out to try something in realtime with an audience. I created a post and opened up comments publicly without moderation. Then I asked the audience a simple question, “What’s the most important part of a website?” They were to leave a one word comment on the post, and one of my pens on Codepen.io would display their answers visually in real time… sort of. Here’s what that looked like.
Each circle above represented a different word that was input in the comments (we were having wifi problems, so not everyone submitted an answer). The size and color of the circle reflected the amount of people that commented the same thing. It was fun… and it kinda worked. We laughed at the brake down of the process, but then were pretty amazed when something actually happened.
And the process of Processing continued. Cate Huston (mobile team lead at Automattic) and I began to collaborate around an Android app that could Create, Read, Update, and Delete content on a WordPress site (with Processing of course). Luckily her team has some experience with this using FluxC. Oh, and they’ve already created some apps that connect to your WordPress site. Efforts here are to create components that others might use to build upon. So we’re working toward this… as are others in the community.
So many great things are happening with WordPress right now. Editors are being built, mobile apps are being created, data visualization is being explored. Much of this is happening thanks to the WP API and the contributions there. People are building themes on the API, or building entire admins. It just keeps getting better.
For me, Processing has been the gateway drug that sucked me in. I’ve already been working with WordPress and the Foundation side, but there’s a whole new door that’s been opened now. I know we’re all used to building things with WordPress, but try building something on WordPress. I can’t wait to see it.
Automattic Design 