Process

Before I started on the coding aspect, I decided that I was not going to code all the body parts in p5.js because I wanted to have details and coding it would've took a lot of time. So, the best option was to just draw all of the body parts and then upload it into p5.js. That is exactly what I did.

In the initial sketch version, I had intended to add hair by code instead of drawing it out because it would have been better that way instead of drawing hair in parts and then uploading. However, due to the complexity of the code that I had not foreseen at this point, the hair got excluded. As for the clothes, I already deemed hair to be a lot of work at this point so I didn't bother doing clothing as that would also be a hassle to code in my opinion.

After I finished the body parts and uploading it onto p5.js, I started to move the parts around and adjusting the size so that it shows up like the drawing to the left. Following that, I duplicated the sketches a few more times with each edit and I added the feature where the body parts are apart at first and comes together when I click my mouse and breaks apart again when I click mouse again. I also made another sketch for the spotlight that I intended to have and made it follow my mouse. Following mouse position was actually pretty simple since its just a usage of mouseX and mouseY. However, I wasn't sure on how make the spotlight be angled towards my mouse so I ended up turning to chatGPT for that, and the following code is what it gave me.

  update() {

    this.pos.add(this.vel);

    this.lifespan -= 0.5;

    let angle = p5.Vector.sub(createVector(mouseX, mouseY), spotlightPos).heading();

    if (this.lifespan <= 0 || !isInBeam(this.pos, spotlightPos, angle, beamLength, beamSpread)) {

      this.reset();

    }

  }

Looking at this code, it was pretty straight forward as how the angle worked to point towards the mouse. 

It is at this point where I had a office hour with professor Moon and we decided that the body parts should be uploaded in a different angle so that when gravity acts upon the body parts, it falls into how I want it to be. This would also allow the different parts to be able to sway around and have angle movements. I will come back to this later since it cause a lot of issues and also very time consuming. 

Essentially after I uploaded all the parts again in the other angle, I started to add the anchors and string to the different parts. This allowed for me to pull on the different parts and they would still be able to go back to where they are positioned. However, this actually didn't have any angle movements and it just continued to stay sideways. Either way, the sketch stayed like this for a while because I wasn't sure how to do the next steps. It is also at this time that I started to work on the other portion, the background. The original background was a stage since it is a puppet and I felt that it would be suitable if it was on stage, as if it was performing. I also changed the spotlight from following the mouse to following my hand position. This also sets as a reference for later when the puppet is incorporated and for it to following my hand with the spotlight be shining on it. Key information, the spotlight only required one finger but my puppet is intended to be controlled with three fingers, so when it ultimately came to that point, I struggled once again. 

Following the finished revision for the body, I contacted the professor on what my next steps should be and it was decided that professor Moon would help with that. It was also really shocking to hear how difficult of a process it would be to code for the body to be able to move in the way that I wanted. I deeply apologize for that and I cannot appreciate professor Moon enough for his help with this process. 

After getting the body fixed, I started to merge the stage, spotlight, and the puppet together. As mentioned before, I wanted three fingers to be tracked and two of which would be connected to the elbows. I once again turned to the profess for help. 

  // update the main achors

  let mainVec = createVector(width / 2, 100);

  let mainVecL = createVector(width / 2 - 100 + offsetX, 250 + offsetY);

  let mainVecR = createVector(width / 2 + 100 + offsetX, 250 + offsetY);

  let mainVecRleg = createVector(width / 2 - 100 + offsetX, 500 + offsetY);

  let mainVecLleg = createVector(width / 2 + 100 + offsetX, 500 + offsetY);

  if (hands.length > 0) {

    mainVec = createVector(finger.x, finger.y);

    mainVecL = createVector(thumb.x, thumb.y);

    mainVecR = createVector(pinkie.x, pinkie.y);

  }

 if (hands.length > 0) {

  // When hand is detected, pin these parts to tracked points

  bodyParts[10].anchors[0].pos = createVector(mainVec.x, mainVec.y);     // head

  bodyParts[8].anchors[1].pos = createVector(mainVecL.x, mainVecL.y);    // larm (second anchor)

  bodyParts[7].anchors[1].pos = createVector(mainVecR.x, mainVecR.y);    // rarm (second anchor)

}

With these lines of code it was finally completed. When testing around, we both realize that it looked more like the puppet is underwater and also the spotlight was much faster than the puppet in getting to where my finger positioned. Professor Moon suggests that I should change the background to underwater so that it makes more sense as to why the puppet is floating. I agreed with that suggestion and changed the background to an underwater one.

I presented the code in this version, underwater, and was given the suggestion of having the puppet falling apart and back together when hand detected. I kept the suggestion in mind since it was also part of my original idea and with that, I continued to edit the code to bring the final version with the fall apart and back together feature.