I saw this assignment as an opportunity to get creative with p5.js and make something visually appealing using basic shapes, while also adding some elements of interactivity. I have had some experience with coding and I’m also really passionate about design, so overall, I really loved how this project made me think of new ideas and navigate the challenges that came up.
Main Idea
For this portrait, I wanted to create something that truly represents a part of me. As someone who absolutely loves books, I decided that a simple library setting (with a bookshelf) would perfectly capture this passion. Instead of going for a generic self-portrait, I focused on the details that define my personality, aiming to reflect my love for reading in both the visuals and interactivity of the piece.
Implementation
Creating the library scene involved several key steps, from drawing the bookshelves to the self-portrait itself. The books in the library are not just static; they come alive through interactivity, making the scene more engaging and fun. Every time you hover your mouse over a book, it bounces up and down, creating a playful effect. I’m particularly proud of the way the books bounce—implementing this took some effort, as it involved calculating the physics for a smooth jumping motion and resetting them back to their original positions. A fun surprise was discovering how, when you swipe the mouse across a row of books, it creates a wave effect, adding another layer of interaction.
Here’s a snippet of code that controls the bouncing of the books :))
// Drawing books with jumping effect
for (let i = 0; i < books.length; i++) {
let book = books[i];
// Checking if the mouse is hovering over book
if (
mouseX > book.x &&
mouseX < book.x + book.width &&
mouseY > book.y &&
mouseY < book.y + book.height &&
!book.isJumping
) {
book.isJumping = true; // book starts jumping when hovered
book.velocity = -5; // initial jump velocity
}
// Handling jumping animation
if (book.isJumping) {
book.y += book.velocity; // updating y position based on velocity
book.velocity += 0.4; // applying gravity effect
// checking if the book has fallen back to its original position on the shelf
if (book.y >= book.originalY) {
book.y = book.originalY; // resetting position to the shelf
book.isJumping = false; // stop jumping
book.velocity = 0; // resetting velocity
}
}
Another feature I implemented is the colour change of the book held by the girl in the portrait. When you click on any book in the library, the book’s colour changes to match the one clicked, and I think this really adds to the interactivity of the scene and somehow just makes it seem more of a representation of my personality.
This is the code that controls the book changing colour:
function mousePressed() {
// Checking if a book is clicked
for (let i = 0; i < books.length; i++) {
let book = books[i];
if (
mouseX > book.x &&
mouseX < book.x + book.width &&
mouseY > book.y &&
mouseY < book.y + book.height
) {
// Changing the girl's book color to the clicked book's color
girlBookColor = book.color;
}
}
}
One of the most challenging parts of the drawing was the hair, which required understanding how the bezierVertex() function works. I spent time experimenting with the curves to get the right look, and I’m happy with how the hair flows in the final version. I also focused on the randomization of book sizes, spacing and colours to create a more realistic and dynamic library scene. The varied spacing between the books was particularly important because it prevented the scene from looking too uniform and added to the realistic clutter you’d expect in a real library.
Reflections and Possible Improvements
I’m proud of how the self-portrait captures a unique part of me through both the visuals and interactions. The bouncing books, the randomization of elements and the changing book colours all work together to create a portrait that isn’t just about how I look, but about what I love. The process was a great learning experience, especially in terms of coding the animations and achieving a realistic look using basic p5.js knowledge.
Possible improvements include adding more interactive features, such as having the girl’s expression change when clicking on different books or adding a subtle glow effect around the hovered book to enhance the visual feedback. Also, optimizing the code for smoother animations, especially when multiple books are interacting simultaneously, would enhance user-experience. Overall, I really enjoyed this project and look forward to exploring more of my creative potential throughout the course.
