Cass-E Design

Design, Experiments, Games, Resources

p5.js WordPress Legacy Update

Someone contacted me recently about the p5.js WordPress Plugin I created for this site, and I've started looking into a rework that's both Gutenberg friendly & supports more features. In the meantime, I've decided to update and publish the current version of my plugin under the title 'p5js-wp-legacy'.

To recap, this plugin creates a Shortcode, [p5jswp]. This shortcode allows users to embed a p5.js script safely alongside other content, using an iframe like the p5.js web editor. Included with the plugin is a copy of p5.js. Other libraries can be included per p5.js sketch via the shortcode.

The plugin is currently available on GitHub, under GPL v2 or later. Once I've tested it and I'm fully comfortable it's in a release state I'll upload it to the Plugin Directory.

Updates

Somehow last time I did this, I missed out on the srcdoc attribute, which explicitly exists to let you specify the content of an iframe on the server/parent side. Just about every browser supports it besides Internet Explorer, which means all the browsers - and maybe more - that p5.js supports.

Data on support for the iframe-srcdoc feature across the major browsers from caniuse.com

So I've dropped the complicated iframe-isolation-url-passing-stuff I was doing before in favour of the srcdoc attribute, and been able to add a few more features. This is far from everything I could want, but it's significantly better than it was before.

New Features

For an in-depth description of features & usage guide, check the GitHub. I'm updating the documentation and changelog there as the plugin evolves. This is a description of how I've made certain features work rather than a usage guide.

Inline JavaScript

Inline JavaScript has been tricky, but it's feature I consider largely necessary for using something as convenient as p5.js with WordPress. There were two barriers in the way, but they solved eachother.

  • The content of the attributes of a shortcode is stored as HTML instead of plaintext. Any multiline attribute contains <br> and <p> tags.
    • The only way to strip this out, short of parsing the JavaScript, is to strip all <br> and <p> tags, even any that might be there intentionally.
  • WordPress (WP) doesn't like special characters, so all the special characters have to be encoded.
    • WP will encode any unencoded content on save. But if WP has to do so, it will unencode "s, which will break Shortcode parsing.
    • Browsers don't support HTML Entities as valid JavaScript characters.

Helpfully, the iframe will decode HTML entities naturally when it interprets the srcdoc attribute. And because everything is encoded in the editor, the only raw HTML present on the server side is created by WordPress and can safely be stripped out.

I'd still like not to require the user encoding their scripts manually / in the editor, but ironically it might make things harder.

Other New Features

  • Inline CSS Inline CSS for the interior of the iframe, much like Inline Javascript.
  • Libraries Include multiple JavaScript libraries via URL in the head.
  • Manual Width/Height Specify the HTML width/height attributes.

Other Classic Features

  • Not Inline JavaScript: JavaScript file(s) can be included in the body via URL via the script attribute.
  • Caption: The p5.js script is placed inside a figure, so this attribute specifies a caption. Supports HTML.

You can find more usage information on the GitHub page. You can find my original post about the plugin here.

Go forth and make p5.js wordpress content!

Other fun stuff!

Autoptimize Compatibility: When first released, I found a "bug" that Autoptimize stole CSS/JS out of iframe srcdocs. See issue #356 on the Autoptimize GitHub. I've updated the plugin with the recommended workaround, so it should be compatible with Autoptimize.

css-tricks by Chris Coyier

css-tricks (css-tricks.com) is, quoting their own about page, "a cheezy name." It's a site that provides 'tricks', analysis, detailed descriptions, and more of web design and the industry at large. It's been a source of very valuable education for novice web developers since 2007.

I've utilized their articles more times than I can count. It's been a constant resource in designing this site and other projects. The tutorials are beautifully in-depth, and the design itself is inspiring, especially in its use of space. It was a large inspiration for the current cass-e.net theme! The article I first found it via was its flexbox reference, which I still pull up for new products to this day.

I highly recommend checking it out for its beautiful design, and its incredible library of articles and reference.

Design

When I first started interacting with css-tricks, its design was v16 (the current theme is v17). I found it notable for featuring a vertical nav bar, very readable type, and very efficient use of space. Many responsive designs result in giant unused gulfs of space to the left and right of page content - something I wanted to avoid. It became a valuable source of inspiration. css-tricks has an archive of previous themes here, which inspired me to host my own.

Delayed Inclusion

I held off posting about it for a long time - in equal parts because I was a little bit mad about the quality of it, and because I suspected everyone already knew about it. I referred a friend having trouble to the site recently, and when I saw how much it helped them, I reconsidered.

Uplaod

Uplaod is in their words a "creative studio and publishing platform founded in 2013 by Georges Chaulet, Jean Gabriel Franchini, Esteban Gonzalez, Leo Malherbe and Bastien Sozoo" (uplaod.fr). They're located in Paris, France and Brussels, Belgium.

I recommend checking out their site for its innovative design, their javascript libraries, and their OFL fonts. The latter are available on their website and their github.

Moving Parts

One of their specialties appears to be in javascript and kinetic interaction on the web. Two of their javascript libraries include uphover.js for creating a 'hover' effect on links with a dropshadow, upreveal.js, for revealing images via mouseover (although it unfortunately doesn't seem to work on my browser).

These projects are interesting to me because one of my biggest interests/goals with web designs is to make designs feel alive, and a bit different. Both of these seem to be designed with similar intention.

The carousel on uplaod.fr (go play with it!)
(I've replaced the image to avoid uploading their image on my site)
My cursor is in the top left of the display here.

Another is the carousel, the main feature of their site. When you enabled the subtle '3d' button in the bottom right, the content rotates to face your cursor. When the content rotates close enough to the edge of the screen, the nearest corner breaks into blocks, and it's awesome.

Typography

I stumbled across uplaod while looking for a font. One of the fonts I clicked on was listed as being created by Bastien Sozoo (click to check out his site), and from there I found uplaod, and their GitHub repository of treasures. Both Sozoo's site and the uplaod site feature large type, a surefire way to my heart. Sozoo's site features the gorgeous Futura Renner.

Uplaod has a number of original fonts on their GitHub which I recommend checking out! Two of my other favourites are LS and Nemoy.

p5.js

I use p5.js to create procedural, interactive artwork that's accessible and readable by the user.

p5.js is a javascript library designed to make using the html <canvas> element easy and accessible. It's used in a lot of intro coding classes, especially where art is involved. It makes rendering (even 3d perspective rendering) easier to develop and more accessible on the web. Find out more at p5js.org, which has examples, resources on getting started, and more information.

Loops

Static gifs and videos 'loop' by definition. There's always a skip, repeating element, or something that proves that that the experience is entirely predefined. I've always been compelled to find those places. I find 'evidence' that something isn't really interactive. I feel like I have to find the boundaries of the algorithm, to prove that I've 'completed it' or experienced all it has to offer. For this reason, I prefer live wallpapers on my phone. They feel more alive.

In some of my procedural/interactive pieces like this one, every raindrop or snowflake or odd geometric artifact may be unique for the viewer who experiences it, on their device. That matters a lot to me. It makes art feel more 'present'.

Source Code

Everyone who views this site can view the source behind my p5.js creations. Viewers can see how I put something together. I feel that it gives more back than a gif, especially if I've done something special (or incredibly stupid) in a particular post.

Plugin

I use a custom WordPress plugin to display p5.js sketches on this site! You can find out more here.

Click here to see all posts tagged p5js