Getting started with P5.js

I have been playing with Processing and it is a lot of fun! There are a lot of resources and inspiration available if you search for creative coding or generative art. Most of the examples are made with Processing or its alternative for the web, P5.js.

I skimmed through Casey Reas and Ben Fry's book, Processing: A Programming Handbook for Visual Designers, Second Edition. I thought I bought it, but by mistake I actually ended up renting it out. So, I just returned it. This book helped me to understand the basic and advanced features of the software. Once I get an idea of what the possibilities are, I find it easier to create.

After playing with Processing for a short period of time, I wanted to start posting some outputs. Even-though it is possible to export outputs as images, videos or the application itself for Windows and Linux, I wanted it to be more web friendly. P5.js is an open-sourced JavaScript library for creative coding that is based on Processing and backed by the same community. This sketching library allows to play on your the browser.

Finally, I hope that I can share below the code and output by using Ghost's OBO snippets to embed content. (That was the entire reason to switch from Processing to P5 and I am about to test it)

Performance Note: Processing beats P5.js at rendering and keeping up with the frame rate

var p = 0;

function setup() {
  createCanvas(400, 400);
  
}

function draw() {
  //background(220);
  //noFill();
  
  rect(0, 0, p * width, p * height);
  rect(p * width, p * height, (1 - 2 * p) * width, (1 - 2 * p) * height);
  rect(width - (p * width), height - (p * height), p * width, p * height);
  
  //p = p * 1.01;
  p = p + 0.01;
  if (p > 1){
    p = 0;
  }
}

Click the link below to try the code yourself

This post saved me from getting disappointed: https://ghost-o-matic.com/iframes-side-by-side/