MOUSE CLICK! MOVE THE MOUSE AROUND!
I had so much fun creating this piece and I was inspired by the “smiley face” or the concept of “emojis” for this production. What makes this a self portrait is that it has a little of touches that I added to it like the cap, the hair and the lipstick that makes it seem more like myself. I made the portrait interactive by having the skin tone change into different colors just like the emojis with different skin tones. I also made it a bit more fun by adding little circles that appear when the mouse is clicked. This was a bit challenging to me because, even with my coding experience, using P5 was not something that I usually do since I only have beginner experience with processing.
Creating a class and new functions to make the production more interactive was the most challenging part. This function:
function mousePressed() {
let r = random(30, 70); // Make bubbles bigger
let newColor = color(random(255), random(255), random(255)); // Generate a random color
let b = new Circle(mouseX, mouseY, r, newColor); // Pass the random color to the Circle
bubbles.push(b);
}
class Circle {
// Constructor is called when a new Circle object is created
constructor(x, y, r, color) {
this.x = x; // x position of the bubble
this.y = y; // y position of the bubble
this.r = r; // radius of the bubble
this.color = color;
}
// Method to add a random motion to the bubble's current position
move() {
this.x = this.x + random(-2, 2); // Randomly move the x position
this.y = this.y + random(-2, 2); // Randomly move the y position
}
// Method to display the bubble on the canvas
show() {
stroke(255); // Set the color of the bubble's stroke (outline)
fill(this.color); // Set the fill color of the bubble
ellipse(this.x, this.y, this.r * 2); // Draw the bubble as an ellipse at (x, y) with diameter of r*2
}
}
Was created for the mouse pressed function that generates randomly colored bubbles (circles) all around the screen. The Circle class was created to easily manage and organize the properties and behaviors of the bubbles that appear when the mouse is pressed. By using a class, we can create many Circle objects (bubbles), each with its own position, size, and color, and easily call their move and show methods to update and display them on the canvas. It’s a neat way to encapsulate (wrap up) properties and behaviors related to the bubbles.
I think this was a really interesting way to start with P5 and adapt to it.