P5js Wordpress

[Sebasten Lizarraga]

Firstof all, what is p5js? Simply put, it is a JavaScript library for creative coding. Creative coding can sometimes go by other names, like code art, generative art, generative design, or algorithmic art. p5js is based on the original Java library Processing, created by Ben Fry and Casey Reas back in 2001. In 2013, Lauren McCarthy ported it to the web, and since then its community and contributors have grown considerably.

From the get-go, both Processing and p5js (both part of the umbrella Processing Foundation) were designed to be approachable to artists, designers, educators and anyone else at the start of their coding journey.

What if you find yourself in an uncertain middle ground, where p5js seems too bulky and slow for your purposes, but diving into pure JavaScript seems a little intimidating? Well, there are some alternatives.

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.

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.

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.

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

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.

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.

We would like to introduce our project website where we integrated our research archives and resources for learning p5.js and more.Through this website, we hope to better connect with p5 for 50+ web app users, workshop participants, and those who are interested in p5 for 50+ education. [We owe much of this website to our mentor Qianqian Ye, who had constantly emphasized the importance of archiving the project online so that we can share and open to future discussion. In her 2019 Processing Foundation Fellowship project, she published and archived in various social media platforms her online learning materials for non-English-speaking womxn. And one of her very first learners was her mother (who is assumably a 50+ person). Apparently, we had lot to learn from, relate and share with Qianqian.]

The quantitative and qualitative evaluation on this web app is to be conducted in our upcoming p5 for 50+ workshop at Asia Culture Center in Gwangju (expected in week 1-2 of August, but the schedule is subject to change due to the COVID-19). Based on this workshop, we hope developing coding education curriculum and interfaces for middle-aged and elderly people in the future.

All of our works above would have been impossible without the Korean translation of p5js.org ( was the foundation of our project.) The issue of enhancing the accessibility of the Korean 50+ people to p5.js could only start from this translation. It is important to note that English comes as a double-bind for non-Anglophones when learning coding, since codes are written in English and most of the learning materials and online forum circulate in English.

The translation is dedicated to the entire Korean-speaking population around the world. We hope to have more language groups engage with p5 in further accessible and legible manners. For more information on the translation process, please refer to this Medium post and the program glossary

Visita la pagina editor.p5js.org per iniziare a creare un progetto. Puoi iniziare con uno dei tanti esempi o iniziare da zero. gratuito e open source, nessuna registrazione, installazione o download richiesti. Usando p5.js puoi usare JavaScript, HTML e CSS per creare grafica in 2D e 3D, aggiungere testo, immagini, video e audio e rendere interattivo il tuo sketch con mouse, touch, input della webcam e rilevamento del movimento.

In order to set up p5.js in your project, you can download the library to your computer, or use the version hosted online as noted in the p5js set up instructions. For simplicity, we will use the version hosted online. Go to your html file and above your script tag that includes your .js file, add the following line of code:

There are two major functions we will use and they are setup() and draw(). setup() will initialize what is on your page when it first loads. We will use the setup function in the script.js file to initialize the p5 canvas!

Here we are setting both the canvas width and height to 500 pixels and setting the background color of the canvas to be black using the integer 0. You can change the size and color to whatever you like.

I encourage you to explore the p5.js website to learn more about what types of drawings you can make! Your drawing can have many different shapes and abilities! If you need more examples and inspiration on what types of things you can do with the canvas, check out my projects.

I hope by the end of this, you have successfully created a webpage that you can see in your browser and that contains a working p5.js canvas! This setup will help you start making many creative coding projects of your own. Continue playing with the setup() and draw() functions to create more complex drawings!

3a8082e126