Loops & Interactivity: ‘Wayang Kulit’ Shadow Play

Our team collaborated to adapt a p5 version of Wayang Kulit, a traditional Indonesian art of puppet-shadow play. Our goal is to create an interactive journey for the audience to experience this mastery of Indonesian Art.

We started looking at themes where we can incorporate both design requirements: repetitive patterns and interactivity. We split up the efforts into 2 major elements –

Foreground. The puppet will follow the mouseX and mouseY. Upon mouseisPressed(), the puppet will change to another image. The fans will appear throughout the frame. It will rotate or turn left or right by using the keyboard.

Background. To stay within the theme, I explored the for loop technique to create a batik-inspired pattern. It was a bit confusing at first but I think I’m warming up to the logic a bit.

According to MDN, a For loop syntax is made of:

for ([initialization]; [condition]; [final-expression])
   statement

I thoroughly enjoyed the ups and downs of arriving at the pattern that would blend well with the foreground, and consulted with at least 3 people to understand the rationale behind the syntax of nested loops.

I’m very proud of Vidia and Madon’s additional touches and the nuanced interactivity they added to the fans and the puppet to bring Wayang Kulit to life!

You can view our final work and the code is posted here: http://alpha.editor.p5js.org/embed/H1inUw_j-