Background
As I was learning how to draw using P5.js, I initially experimented by arranging shapes and figures randomly. I found myself drawing a robotic face because it was easy to arrange boxes and shapes, even if they didn’t resemble a familiar human face. As I became more comfortable with using various shapes and gained an understanding the coordinate system, thanks to the detailed references on the P5.js website, I wanted to create something more human-like. I started by sketching a simple drawing (below) of a man wearing a tie in my notebook.
I managed to complete the drawing in P5.js and it appeared better than I expected. I also added some features including dynamic objects and mouse inputs. However, I was not fully pleased with ‘my almost portrait’ as I did not like how the lower part turned out. I faced challenges in filling the colours on the lower body and arms because my drawing had a lot of independently connected lines as seen below. So I wanted to make the lower part look better.
My Final Portrait
Despite the fact that I was very impressed with how my portrait had turned, I did not like the fact that everything below the head had to remain with the background colour.
So I decided to come up with a simpler design by changing the lower body and adding a neck and a small chain and I could now colour it different from my background.
I had added some a Moon and Sun emoji which simultaneously passed indicating day and night. I set some offsets for the smoke from the man’s cigarette so it appears to ascend upwards.
Lastly but not least, I was curious to explore mouse input functions, so I added blinking on pressing the mouse.
My final Portrait can be seen below:
Achievements I am most proud of
I have managed to learn so much in such a simple assignment. One achievement I am most proud of is how I managed to add some dynamic objects and features in my portrait. One of them being the moving smoke, where I added some offset to move the smoke upwards and some ‘Shake’ variable to make the smoke shaking as it ascends. Below is the code for that:
// Drawing Ciagerette tip circle(220, 375, 10); // Drawing Cigarette smoke fill(12, 12, 12); // Used this shape/Curve from (https://p5js.org/examples/repetition-bezier/) bezier(220, 375, 200, 350, 250, 320, 230, 300); bezier(222, 380, 210, 355, 260, 330, 240, 310); noFill(); // Adding Movable smoke to make it dynamic fill(fade, fade, fade) bezier(220+shake, 375+Smokeoffset, 200-shake, 350+Smokeoffset, 250+shake, 320+Smokeoffset, 230-shake, 300+Smokeoffset); bezier(222+shake, 380+Smokeoffset, 210-shake, 355+Smokeoffset, 260+shake, 330+Smokeoffset, 240-shake, 310+Smokeoffset); noFill();
Reflections and ideas for future works
Creating a portrait has been a very nice assignment. I have gained understanding on working with P5.js. I have also experiences the importance of properly commenting my code as it was easier to navigate the code and see what to improve, which could have been very difficult without proper comments.
For future, I would love to add more functionality and make use of many other features that I was not able to use in this assignment such as the 3D objects, loading images, rotation and many other.