Weaving Portraits

<ICM Final project – Weaving Portraits >

My original plan for final project was making weaving image with viewer’s portrait and photograph of nature. I made it work by using webcam and prepared landscape photos, but it’s not that looking good as I expected. So I used two similar portraits taken by photographer David Bailey, who has his own specific style, to make this result looking nice.

For this work, I used P5.js webGL


  • Make grid of rotating 3D objects(box) by using double for loop. In this work, canvas size is 600 x 600 and size of each boxes is 50. So 12 x 12 boxes on the webGL canvas.
  • Load prepared two images which size is the same as canvas, and divide these 12×12 sectors by using “get()”. And make each sector images to array so that I can texture each sectors to grid of boxes.
  • Texture boxes with divided images. Choose the boxes of odd numbers in the grid to texture first image, and use second image for even number boxes.


<Source Images>


Portrait of Michael Caine by David Bailey



Portrait of Jude Law by David Bailey


<In Progress – Video and Image>

I cannot add preview of this work because it’s not working in P5 web editor due to bug. And it’s too heavy ┬áto texture image and video at the same time.


<Feedbacks in Class>

  • Medium: Just on screen? What about projecting it to other object? – Tiri
  • Showing it on really really huge screen would be great. with ticking sound – Nouf
  • Images: before and after, Aging, similarities between same person… etc – Mimi

Leave a Reply

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