Mini Game: Wayang Kulit

Wayang Kulit is a traditional puppet theatre art from Indonesia. It’s also well known in South-east Asia. It’s designated by UNESCO as a Masterpiece of Oral and Intangible Heritage of Humanity. Since last week we were learning more about repetition using for loop, and more about mouse interaction, we (yes, this time is a group project!) decided to create some kind of interactive Wayang Kulit.

If you have no idea what’s Wayang Kulit, watch this video.

Wayang Kulit from Patrick Barry on Vimeo.

(TL;DR – here is the final project)

So, we planned to sketch it first. Here’s what we had in mind.

Sketch Idea

Since there are three of us, we divided it into 3 parts:

  • The background, which has a pattern, the the color will change over time.
  • The fan (or in Indonesia we call it ‘gunungan’), which can be interacted by keyboard.
  • The puppet, which can be moved by mouse interaction.

We worked separately at first, then we combined it after those three parts were done. I got the fan part.

After I searched how it looked like, I decided to just use .png images. I didn’t want to create those fans using draw function! Too much work to do. Then I just used Adobe Illustrator to create a vector image. Here’s the vector image that I used for this fan.

A Fan (‘Gunungan’)

I wanted to make animation for this fan. So, I used sprite to animate this image. I found that there is a library called p5.play.js that can be used easily to create animation.

Here’s the code how I create the sprites. I put it in the setup function.


// create gunungan as a sprite
gunungan = createSprite(width/5, height/1.5, 50, 50);
gunungan.addAnimation("floating", "images/fansmall.png", "images/fansmall-2.png");
gunungan.rotateToDirection = false;

// create gunungan2 as a sprite
gunungan2 = createSprite(width/1.25, height/1.5, 50, 50);
gunungan2.addAnimation("floating", "images/fansmall.png", "images/fansmall-3.png");

For the interaction, at first I had an idea to rotate the fans on Y axis. But since I used p5.play.js library, I couldn’t find it anywhere how to rotate it on Y axis (I asked for help to the residents, but they also couldn’t figure it out how while using this library). So I just decided to make it move differently.

I wanted it to move in circular over time.


// spin gunungan
gunungan.setSpeed(3, direction); // left
gunungan2.setSpeed(3, direction2); // right

And I also wanted it to do something when I press a keyboard. Whenever I press ‘A’, the left fan will get bigger, ‘S’ the left fan will scale down, ‘K’ the right fan will scale up, and ‘L’ the right fan will scale down.


/* keyboard input to control the gunungan */
if(keyDown("a"))
gunungan.scale += 0.01;
if(keyDown("s"))
gunungan.scale -= 0.01;
if(keyDown("k"))
gunungan2.scale += 0.01;
if(keyDown("l"))
gunungan2.scale -= 0.01;

Even though I couldn’t figure out how to make it move on Y axis, but I was happy enough to make it animates over time and interacted using keyboard.

Finally, we combined our works and make this project! Here’s the code. And this is the fullscreen version.

After we combined the codes, we wanted to do more creative stuffs, so we inserted a sound to make it more real.

Working in teams are really great to be honest. Besides my workload isn’t that much, we can also help each other and share knowledge.

One Comment

Leave a Reply

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