ICM: The Wayang Kulit

The task for this week was to work in a team and create a sketch that has the elements taught in class. I was particularly intrigued on how p5.js could make an element to perform the follow mouseX or mouseY function. At the same time, i was also curious if there is any possibility for the element the perform any other function like rotating while retaining the mouseX and mouseY function.
 
Our team brainstormed on certain ideas that we could play with. We had a few ideas in mind, one of them was to create a underwater fish scene, however, the movement of the fins would be a pain to create, given the situation where most of us, if not, me, is pretty new to coding and we would want to do something realistic and achievable. 
 
We thought long and hard, we wanted something that would move from time to time and had some interesting visual elements to it. That was when it struck us, to crate a sketch based on the famous indonesian cultural art, The Wayang Kulit. 
 
 The Wayang Kulit was a perfect reference for us for this project. It has the elements of movement, lights and interesting cultural background. We agreed to split the work into three parts and combine them eventually at the end. Since I was interested with movement, I volunteered to create the main character for the sketch. 
 
Building the character involved looking for the actual image of the wayang kulit online, and photoshop it three times to make it look like it is moving. 
 
I began to look through the library and found out that there is a way to create this. However it is done by using sprite, something that we have not been taught before. However, I was very determined to create this. 
 
The first task was to create the character and edit it in photoshop. After which, we have to  download the library and put it in the web editor.
 
<!DOCTYPE html>

<html>

  <head>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>

    <script src="lib/p5.js" type="text/javascript"></script> 

    <script src="lib/p5.play.js" type="text/javascript"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">

  </head>

  <body>

    <script src="sketch.js"></script>

  </body>

</html>
 
To create the character to move, we would need to addAnimation with the three specific images we have created in photoshop. 
 
  //label, first frame, last frame

  //the addAnimation method returns the added animation

  //that can be store in a temporary variable to change parameters
  var myAnimation = img.addAnimation("floating", "images/move2.png", "images/move3.png");
 
//offX and offY is the distance of animation from the center of the sprite

  //in this case since the animations have different heights i want to adjust

  //the vertical offset to make the transition between floating and moving look better

  myAnimation.offY = 18;
 
  img.addAnimation("moving", "images/move2.png", "images/move3.png");
 
  img.addAnimation("spinning", "images/move3.png", "images/move2.png");
 
The zooming in and zooming out of the image is an interesting feature for the sprite it self. To create this, the user must 
 
//up and down keys to change the scale //note that scaling the image quality deteriorates //and scaling to a negative value flips the image 
 
if(keyIsDown(UP_ARROW)) img.scale += 0.05; 
if(keyIsDown(DOWN_ARROW)) img.scale -= 0.05; 
 
The link to the sketch can be found here.
 
#ICM