Month: January 2024

I have always been a happy and smiley person. Perhaps more now that I’m doing something I thoroughly enjoy: coding. How do I put this simply? It makes me happy to be happy.  And funnily enough, I get the most compliments when I radiate joy and have a toothy smile on. And my top priority? Make sure my happiness is contagious.

Hence, I chose to make this funny, interactive self-portrait in which I am seen to be miserable but seen to be smiling when my body is clicked on. The idea is that the person is tickling me by clicking on my body, which makes me laugh.

My sketch is fairly simple, but I profusely enjoyed making it! The concept behind had me excited because I can incorporate my personality into my work, which isn’t relatively easy while coding. A particular code I’m proud to share is where I was able to limit the click of the mouse to only a certain place on the sketch. One can’t just click anywhere and make me smile, you have to tickle me at the right spot to make me laugh.

let currentView; //defining a variable, which is going to decide what is going to be displayed

function setup() {
  createCanvas(570, 400); //making a landscape scene
  currentView = noLaugh(); //the initial view is set to my resting face, variable is defined to a value
}

function mousePressed() //when the mouse is clicked
{
  if (mouseX > 212 && mouseX < 350 && mouseY > 285 && mouseY < 400) //setting limits to where you can click to make the view change
  {
    currentView = meLaugh(); //initial view changes because the variable is defined to another value
  }
}

function mouseReleased() //when the mouse is released
{
  currentView = noLaugh(); //view changes to initial setting
}

Above is the work that went into defining variables, setting limits on mouse-clicking-places, and lastly the changes that occur. As much as I tried to be as efficient as possible in my codes, I still missed out on important details. There are places on the body which when clicked, don’t cause a change. That is because I couldn’t accurately put in the coordinates of the body. I hope to improve this aspect of my work and make my sketch more interactive in the future. Moreover, I believe I can work more on the rotation and angling of my shapes, and get more familiar with the calculations with radians and degrees.

 

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.

(Click on screen- Audio on)

For this assignment, I initially wanted to create a self-portrait. However, I didn’t like the idea of recreating myself using basic shapes because they could never encompass some of my features. I was then thinking of a character that I would like to create a portrait of. I decided on the character Satoru Gojo from the anime Jujutsu Kaisen for two reasons: one being that I’m currently obsessed with the show, and second being that he covers his eyes usually with a blindfold which meant that I didn’t need to spend time on creating eyes.

I chose mostly simplistic features so that my code doesn’t become too complex. The portrait was inspired by this particular scene below.

I decided to animate the background as a moving gradient. The direction of the gradient switches after a while. I was inspired by this code: https://editor.p5js.org/stalgiag/sketches/webaJ2Dpe and I modified the algorithm to move the gradient downwards and change the colors (pink was to refer to the scene, blue was to refer to his bright blue eyes under the blindfold). This is the part of my code that I wanted to highlight since it added a different dynamic to my portrait.

if (startColor > height + 255 || startColor < 255) {
    speedAnimate *= -1; } //reversing direction if goes beyond screen
  startColor += speedAnimate;
  let numRectangles = 21;
  let rectHeight = height / numRectangles;
  for (let y = 0; y < height; y += rectHeight) {
    let pinkShade = startColor - y; //calculates  pink shade based on the distance from the top of the canvas.
    let red = 255-pinkShade; // Adjust red color to create gradient
    fill(red, 191, 210); 
    rect(0, y, width*2, rectHeight);
  }

I also wanted to add an interactive feature. When one clicks on the portrait, it plays the character’s signature laugh. I used this tutorial to add the audio: https://www.youtube.com/watch?v=MDX5VaMOzZg

Overall, I am happy with the result and how some features such as the hair turned out. If I had to improve on this particular portrait, I would try to add shading and more details. I would also add an alternate version of him without the blindfold. Furthermore, I want to experiment more with animation and audio in future assignments.

While I had some experience with Processing through Intro to CS, I was new to JavaScript and especially p5, so this assignment took longer than I expected. My goal was to make the portrait as detailed and true to life as possible with just basic shapes on p5.js, while at the same time not drowning in code. My final result is a compromise between these two parameters.

For my portrait, I first took a few pictures of myself as a reference. I began by basing the basic proportions of the shapes based on the proportions of different parts of my face.

I knew that a simple ellipse would not be enough to represent my face, so I decided to combine a rectangle with multiple arcs to get the “rounded square” shape of my face. A few more arcs (yes, this is a recurring theme throughout this assignment) were used to round out the jaw and the chin and then I was done with the first part.

I then decided to work on the neck and the shirt, as that would be easy to get out of the way. They just required a rectangle and a quadrilateral respectively, and I used more arcs to round out the shoulders and collar to avoid a blocky look.

Next, I worked on the eyes which, which was probably the most time-consuming step. Inspired by examples on the Intro to IM website, I decided to challenge myself by making some Bezier curves. This tutorial was very helpful in understanding how they work. Yet, it was time-consuming to make a decent shape out of them, especially as they are not as intuitive as they would be on graphics editing software such as Adobe Illustrator (and according to me, they’re not very intuitive even there). I settled for combining an arc for the upper portion of the eye, and a Bezier curve for the lower portion, which I feel gives the desired result. While learning to use Bezier curves took more time than I would have wanted, it was valuable for other steps in this assignment and in future ones.

function drawDayEyes(){
  //cornea
  strokeWeight(2);
  stroke(hairColor);
  fill(corneaColor);
  //right
  arc(4.13*width/10, 4.28*height/10, 0.8*width/10,
0.55*height/10, PI+0.1, -0.1, OPEN);
  bezier(3.73*width/10,4.23*height/10,4*width/10,
4.5*height/10, 4.25*width/10, 4.45*height/10,
4.5*width/10, 4.23*height/10);
  //left
  arc(5.87*width/10, 4.28*height/10, 0.8*width/10,
0.55*height/10, PI+0.1, -0.1, OPEN);
  bezier(5.47*width/10, 4.23*height/10, 5.77*width/10,
4.45*height/10, 6.07*width/10, 4.5*height/10, 
6.27*width/10, 4.23*height/10);
  //irises
  noStroke();
  fill(irisColor);
  ellipse(4.13*width/10, 4.2*height/10, 0.34*width/10);
  ellipse(5.87*width/10, 4.2*height/10, 0.34*width/10);
  //pupils
  fill("black");
  ellipse(4.13*width/10, 4.2*height/10, 0.18*width/10);
  ellipse(5.87*width/10, 4.2*height/10, 0.18*width/10);
}

After the eyes came the obvious next step, my glasses. The basic frame was not too hard to make, but required a bit of trial and error to get a decent-looking shape. Within the glasses, I decided to include the optical lensing that occurs due to the high negative power of my lens, which makes it appear as if my face is shrunken inward when viewed face-to-face. This also helped me correct for making my eyes inadvertently small as I had forgotten that the reference also had the optical lensing effect.

Next were the lips and the nose. I was afraid of using Bezier curves for a shape as complex as lips but decided that I didn’t need them anyway. I simulated the shape of the lips using arcs and triangles, which seemed suitable enough. The nose too was similarly done, with the nostrils being made of simple ellipses, the apex being made of a moderately thick arc, and the dorsum (the front part of the nose) being made of thinner arcs. I still used Bezier curves to get the iconic shifted curved look of the nasal alae (the “wings” of the nose around each nostril).

This is when I decided to add hair to my portrait. The head hair was just a bunch of triangles, ellipses, and arcs overlapping to get the hair’s fringes. The eyebrows were also arcs drawn using a thick stroke weight. I wanted to include eyelashes, but they were annoying to implement, so I skipped them.

Next were the ears, which were also daunting. I knew that this required a complex Bezier curve shape. I experimented with the beginShape() and bezierVertex() functions to get the complex shape needed for the ears. This too required a lot of trial and error to get the shapes and sizes right.

  //right ear
  beginShape();
  vertex(2.85*width/10, 3.8*height/10);
  bezierVertex(2.5*width/10, 3.6*height/10, 2.4*width/10, 4.025*height/10, 2.55*width/10, 4.55*height/10);
  bezierVertex(2.625*width/10, 4.65*height/10, 2.4*width/10, 5.05*height/10, 2.8*width/10, 5*height/10)
  endShape();
  //left ear
  beginShape();
  vertex(7.15*width/10, 3.8*height/10);
  bezierVertex(7.5*width/10, 3.6*height/10, 7.6*width/10, 4.025*height/10, 7.45*width/10, 4.55*height/10);
  bezierVertex(7.375*width/10, 4.65*height/10, 7.6*width/10, 5.05*height/10, 7.2*width/10, 5*height/10)
  endShape();

At the very end, I decided to include some rudimentary interactivity by making a lamp that could be clicked on to cycle between “wake” and “sleep”. If-else statements dictate which elements to draw or not, and I quickly made a pair of “closed eyes” which are essentially just a pair of arcs.

Here is what my final self-portrait looked like:

Overall, I am really happy with the result. It did take a long while and quite a bit of effort, but I feel it was worth it to help set a strong foundation in p5.js while also making a decent self-portrait.

 

For this assignment, I decided to create a simple 2D portrait using primitive shapes and a few of my favorite colors. The concept and objective was to represent key characteristics of my appearance, which became quite challenging as I don’t have much experience with p5. So, I drew my current black hair (Emphasizing this because I used to change my hair color really often :D) and a Brazilian t-shirt. Additionally, I used green for the background, since it’s my favorite color and the tone also gave a good contrast with my drawing.

In portrait itself, I used basic geometric shapes. Ellipse to create the face and eyes; Arc for the hair, mouth, eyebrows, and the t-shirt; and triangle for the nose.

When it comes to the reflection, I believe there are some areas where I could improve to enhance the representation of my identity in the portrait. One key aspect would be to add more details, such as incorporating more complex shapes or finer lines to capture the nuances of my appearance. For example, my curly hair could be depicted with a more diverse range of shapes and textures.

Looking ahead, I’m excited to learn more advanced skills and techniques using p5. Exploring new methods for digital art and honing my abilities with the software will enable me to create more dynamic and expressive projects in the future. So, I’m really looking forward to experimenting with different styles and approaches to further develop my artistic side.

Here’s my code:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background('#59A65C');
  
  // Face
  fill(255, 204, 153);
  ellipse(200, 200, 200, 250);
  
  // Hair 
  fill(0);
  arc(200, 140, 180, 130, PI, TWO_PI);
  
  // Eyes
  fill(0);
  ellipse(160, 180, 30, 30);
  ellipse(240, 180, 30, 30);
  
  // Eyebrows
  noFill();
  strokeWeight(3);
  arc(160, 170, 40, 10, PI, TWO_PI);
  arc(240, 170, 40, 10, PI, TWO_PI);
  
  // Mouth
  fill(255);
  strokeWeight(1);
  arc(200, 220, 50, 50, 0, PI);
  
  // Nose
  fill(255, 204, 153);
  triangle(200, 200, 190, 230, 210, 230);
  
  // Brazilian T-shirt
  fill('yellow');
  arc(200, 380, 200, 160, 0, PI);
  fill('green');
  arc(200, 380, 200, 160, PI, TWO_PI);
}