I started the work with directly showing my visible form with basic shapes. I did have to look up a new function “curve” to draw my bangs because the shape the “arc” function formed was not good enough. I drew the edge with the “curve” function and then filled in with the arc.
When it comes to portraying myself I thought of including my identity of being a science student apart from my looks, because I love what I do and it is a big part of me and I love to play with the sterotypes. At first I tried to do that by showing myself in a lab coat, but it was sort of difficult because I honestly didn’t know how to draw a lab coat, and I gave up to make a T-shirt looking thing. Then I included the “blowing things up” interation (which might be a bit inappropriate) because of how we used to joke about such things in lab courses.
I got the idea of eye tracing from the “Embarrassed Koala” example and Self-portrait by Pauline Wee that we were shown in class. But because I had the idea of making the explotion animation already, I thout it would be funnier if I made the eyes go in different dirrections and looked stupid, so I flipped through the p5js tutorials and founs the “variables and change” page which I then based my code on (I tried to look at the codes for the embarrased koala example but something was wrong with by browser and the code couldn’t show up). However what I intended to do was somehow different from the original code so I tried a few things and switched things around until the animation worked.
I like the eye tracking and the mouse click interaction codes so I put them below.
//eye movement lefteyeX=170+mouseX%width/26 lefteyeY=150+mouseY%width/24 righteyeX=230+(-mouseX)%width/26 righteyeY=166+(-mouseY)%width/23 //these codes are for normal (non-stupid) eye tracing // righteyeX=213+mouseX%width/26 // righteyeY=150+mouseY%width/23
These are the codes for the eye tracking. I used -mouseX and -mouseY for the right eye so the direction of movement was oppodite from the left (I just instinctively tried this and found that it works so this likely isn’t the most concise code). It looked fun. I also kept the normal eye-tracking codes just in case I wanted to change into a normal look.
if(mouseIsPressed===true) {
fill('orange')
stroke('rgb(254,254,0)')
strokeWeight(3)
} else {
noFill()
noStroke()
}
triangle(170,300,160,276,180,292);
triangle(179,291,185,271,197,290)
triangle(197,290,232,278,226,298)
triangle(179,300,157,317,187,312)
triangle(179,307,182,338,198,312)
triangle(197,290,206,263,211,293)
triangle(198,312,207,328,214,304)
triangle(214,311,232,324,225,300)
triangle(225,292,241,295,224,306)
noStroke()
ellipse(200,300,57,32)
if(mouseIsPressed===true) {
textSize(25)
fill('rgb(197,0,0)')
stroke('rgb(0,0,0)')
strokeWeight(4)
} else {
noFill()
noStroke()
}
text('BOOM!',164,308);
This is the code for the explosion animation on click. The explosion cloud was sort of bad because I couldn’t really figure out how to draw the fancy anime explosions, so it was just composed of an oval and a bunch of triangles. I learned the “if” “else” code from the Conditionals and Interactivity page of the p5js tutorial.
The final results look like this. My friends and I had a good laugh at it.
The space for future improvement that remains is that a lot of my codes are lengthy and verbose. I think this will be improved as I learn mode codes that will be able to show the same effects in a more consice and controlable way. I should also have researched more on the p5js page to perfect the codes I alread know but I was sort of exhausted by figuring out the curves and animations. And I think I lack some creativity in the thinking process as it took me quite some time to think of doing something other than regular portraying. Maybe spending some time brainstorming before I start assignments would help.
Overall I am relatively satisfied with the outcomes and really did enjoy playing around with codes and animations. And I am looking forward to more interesting activities 🙂
Citations:
- https://p5js.org/tutorials/conditionals-and-interactivity/
- https://p5js.org/tutorials/variables-and-change/
- Pauline Wee Assignment 1: Self Portrait https://intro.nyuadim.com/2022/09/01/assignment-1-self-portrait-6/
- https://p5js.org/reference/