Playing with P5.js has been a bit hard for since most of P5.js sketches draw geometrical shapes. With that tou can create beautiful and interesting forms or animations, still, is hard for me to have fun with this type of graphic representation. That’s why I got super excited when we started adding images to our work. Physically, I enjoy making collages, so why not bring it in a coded, optimized version to my P5.js drawings in the browser?

What I like most about collages is getting this ready made, mainstream images of things in society I would like to change, and playing with it. Such as the ideal of female body image, consumerism, politics…or in this case the international agenda. Collage is this little vodoo of mine. And I love the opportunity that collages with p5.js invite the user to play with it too with mouseover, clicks, reloading the page and so on. I loved making this funny sketches, taking simple .png files of Trump’s and Kim Jong’s available in a simple google search, and enabling the users to also interact with their faces.

Check the code here.

To create this sketch I played with loops, objects and arrays. You can notice that every time you reload the browser the way the faces are displayed change, creating different drawings.

I also developed other 2 simpler sketches with this approach.

  1. Create little worms from trump and kimjong’s faces by clicking in the canvas. Check the code here.
  2. Just see trump and kimjong faces appear randomly in the canvas. Check the code here.

These p5.js collage sketches were developed based on watching this Objects and Images video from my teacher’s  – Daniel Shiffman – youtube channel.

Hope you have fun,




Share this Post

Leave a Reply

Your email address will not be published. Required fields are marked *