For this portrait assignment, I decided to include the thing that I love the most, Basketball. My idea was to draw something that represents who I am as well as to add some cool animations which would further enhance the portrait.
It all started of as a simple sketch on a piece of paper where I drew up a rough portrait of me. Then I decided that I wanted to add some personal element to it, so I drew a basketball which I wanted to spin around my hand. This is where I faced my first challenge trying to transfer my idea onto the canvas. Even though it was the hardest thing to do this project, the rotation of the basketball was the most rewarding thing and for that reason I will include it as the piece of code I am most proud of. It can be seen below 🙂
...
push();
translate(90, 150);
rotate(angle);
drawBasketball();
angle += 0.04;
pop();
}
function drawBasketball() {
fill(255, 165, 0);
ellipse(0, 0, 100, 100);
stroke(255);
strokeWeight(3);
for (let i = 0; i < 8; i++) {
let angle = (TWO_PI / 8) * i;
let x1 = cos(angle) * 45;
let y1 = sin(angle) * 45;
let x2 = cos(angle) * 55;
let y2 = sin(angle) * 55;
line(x1, y1, x2, y2);
}
}
After solving the basketball “situation” the process was pretty straightforward and included me just carrying on with the drawing of the face and the facial features, hands and I added a jersey which represents the real jersey I use to play in basketball matches (I wear the number 17).
Before finishing up, I added a little bit of an “NYU Element” where I painted the canvas with the original NYU violet color and added a fun text animation representing the name of our Basketball team.
Overall I felt the process of creating my first project in p5.js was very rewarding and I learnt a lot of things along the way. There is certainly a long way to go and I am pretty excited of what the future holds.
My final portrait can be seen below 🙂