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/
