Concept:
In this p5.js sketch, I’ve created a simple character portrait with a friendly and approachable appearance. The character features a smiling face with brown hair, glasses, and a blue shirt. The goal was to craft a basic, yet visually appealing representation of a character.
Highlight of Code:
One of the noteworthy aspects of this code is the implementation of interactive eye motion. By tracking the mouse cursor’s position, the character’s eyes elegantly follow the cursor’s movement. This interactive feature adds a sense of engagement and liveliness to the character, creating a connection with the viewer. It transforms a static portrait into a dynamic representation, enhancing the overall user experience.
let eyeX1 = 175;
let eyeY1 = 200;
let eyeX2 = 225;
let eyeY2 = 200;
function setup() {
createCanvas(400, 400);
frameRate(30)
}
function draw() {
background(220);
// eye positions to follow the mouse
eyeX1 = mouseX – 25;
eyeY1 = mouseY – 20;
eyeX2 = mouseX + 25;
eyeY2 = mouseY – 20;
Reflection and Ideas for Future Work or Improvements:
This project served as an introductory exploration of character design in p5.js. However, there are opportunities for further enhancements and refinements:
- Variety: Experimenting with different hairstyles, clothing options, and facial expressions can lead to a broader range of characters with unique personalities.
- Customization: Providing user-customizable features, like changing hair color or glasses style, can enhance user engagement and personalization.
- Background: Incorporating a background or scene can provide context and depth to the character’s portrayal.