# Start with Processing or p5.js

**URL:** <https://discourse.processing.org/t/start-with-processing-or-p5-js/42446>\
**Category:** Project Guidance\
**Created:** [July 18, 2023, 6:59pm UTC](https://discourse.processing.org/t/start-with-processing-or-p5-js/42446 "2023-07-18T18:59:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![creacomp](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/creacomp/32/18580_2.png) [@creacomp](https://discourse.processing.org/u/creacomp)\
**Post date:** [July 18, 2023, 6:59pm UTC](https://discourse.processing.org/t/start-with-processing-or-p5-js/42446/1 "2023-07-18T18:59:44Z")

</div>

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

 ![Dynamics-variations](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/9/29dc897967602c0df762ee68a88dd27f48f84f70.jpeg)  
, I think you get the idea.  
I made this with InDesign (copy, paste, change).

Question:

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

thanks  
Christof

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 19, 2023, 10:46am UTC](https://discourse.processing.org/t/start-with-processing-or-p5-js/42446/2 "2023-07-19T10:46:49Z")

</div>

Hello @creacomp,

> [@creacomp](#):
>
> 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 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:

> **[Which Processing should I use?](https://happycoding.io/tutorials/p5js/which-processing)**
>
> Should I use p5.js or Processing? What's the difference between Processing, Processing.js, and p5.js?

Start simple and build on that.

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

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

Related to your topic:

- [Render Techniques / Processing.org](https://processing.org/tutorials/rendering)
- [PGraphics / Reference / Processing.org](https://processing.org/reference/PGraphics.html)

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:

- [Images and Pixels / Processing.org](https://processing.org/tutorials/pixels)
- [PImage / Reference / Processing.org](https://processing.org/reference/PImage.html)

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

- [PShape / Processing.org](https://processing.org/tutorials/pshape)

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.

`:)`

---

<div class="post-metadata">

**Author:** ![creacomp](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/creacomp/32/18580_2.png) [@creacomp](https://discourse.processing.org/u/creacomp)\
**Post date:** [July 19, 2023, 7:34pm UTC](https://discourse.processing.org/t/start-with-processing-or-p5-js/42446/3 "2023-07-19T19:34:16Z")

</div>

Thank you that hepls a lot!