Start with Processing or p5.js

Hi everyone,

I would like to generate multiple pictures (for now RGB, maybe later CMYK), to use them in an animation and later in a printed book (every shape should be a page of its own).

The basic idea is:
four graphic layers that overlap each other in multiple ways and variations.
If you have a short look at the attached image

, I think you get the idea.
I made this with InDesign (copy, paste, change).


  • shall I start in processing or in p5.js?
  • what tutorial would help me to realise this?
  • what should be the steps if I want ca 600 shape variations?


Hello @creacomp,

The choice of Processing or p5.js I leave with you; each can accomplish what you are trying to achieve.

One of many sites that discuss choices:

Start simple and build on that.

There are lots of resources (tutorials, references, examples, etc.) here:

Related to your topic:

You can generate/create pictures in a PGraphic and then use these as desired (tile, overlay, animate, etc.).

You could also import images and use these:

There is also the option of creating your own custom shapes:

Take a look through the tutorials and related references and examples and decide what best suits your project and start writing code in steps.

First decide on what you plan to use as your images:

  • imported images
  • generated images
  • shapes

The next steps will follow…

You may find examples searching in the forum.
I leave that part and the joy of searching and discovery with you.



Thank you that hepls a lot!