I’ve taken quite an interest around Generative Art over the last few years. From its early roots in the early 1960’s, with pioneering artists such as Michael A. Noll, Georg Nees, Manfred Mohr, and Vera Molnar just to name a few, took control of early computers with an artistic vision in mind. They were asking themselves the question of “what new realms can computers allow us to explore ?”.
I’ve reproduced some of the artworks of Georg Nees. One of the simplest is his Schotter (gravel) from 1968:
For which the p5.js code is pretty light. The artwork consists of a grid of squares which progressively get rotated and displaced randomly, and embodies one of the major themes of computer generated pictures: complexity. The thin line between order and chaos. This theme is present in another of his artworks, Werkstatt Edition Kroll from 1970:
I’ve recently started making some generative art of my own using p5.js. Also using ChatGPT to generate p5.js code, isn’t that generative huh ? And I though it could be cool to showcase them on a WordPress website. So I started looking for plugins, and found Mark Uraine’s p5.js Block. Which, while it does kind of work, hasn’t been updated in 3 years and now suffers from numerous bugs on different web browsers. While I was trying to fix some of the display errors by injecting some of my own Javascript in the page, I wrote this comment:
// I could fork the plugin and fix it myself but why
// do that when I can monkeypatch it ? Right ?Of course, I quickly ended up going through the source code of the plugin, trying to see if I could understand and fix it, but it used an old bootstrapping package that isn’t the way blocks are created now. I then thought that it would be fun trying my hand at making my own block, following the WordPress guidelines, tutorials and documentation.
Using WordPress’ create-blocks to bootstrap a block plugin project, I got to work trying to get some p5.js sketches to be displayed in WordPress. Mark Uraine’s source code and blog post helped in understanding the principles at work behind the plugin. It did take me a few days figuring out how to render iframes in both the WordPress editor and client-side, and injecting the p5.js library and user’s sketch in it, but it was overall a rewarding challenge. I can now share an easy and flexible p5.js block that can be customized and adapted to fit a range of use cases.
It allows people to showcase their generative art directly on their website, and even to add interactive and innovative design elements directly in pages and articles. So, if you want to integrate your p5.js sketches in your WordPress website, go ahead and add the Easy p5.js Block to your plugins !
Reply