Category: Spring 2023 – Shiloh

Week 1 – Self Portrait

As a Computer Science major, I am entirely used to working in the console. The black an white screen with limited color has been my best friend since Freshman year. For that reason, seeing the shapes and colors on screen was magical. I have worked with Processing before, but on a very limited scale, with a few shapes and images in hopes of finishing a final project and going home. It took time to maneuver the page again, understand what to put in setup and what in the draw function, but in the end I created this dynamic portrait.

Challenge

Creating this portrait was anything but easy since humans eyes, or at least mine, are not made for estimating pixel position. It was trial and error until the very end, but I think it came out okay. I encountered another obstacle while working out the angle in which the sun can move. Since I did not know p5js uses clockwise rotation for angles, i.e., opposite of Math class, it was incredibly tedious to estimate the movement of the ellipse. Undoubtedly, the hardest part was the brazier curves that I used for my hair. Estimating the pixels coupled up with estimating angles is probably nobody’s cup of tea, but thankfully, once I figured out one side, it was just a matter of subtracting from width on the other.

It took some time to understand how map() and constrain() work, but once I did, the eye and sun movement was pretty easy to achieve. Symmetry was somewhat of a hassle, but since p5js contains the global variables of width and height, it was okay.

Night Phase (Cursor out of screen)

The night phase represents my home country, Bosnia. It is currently snowing heavily there and the day is extremely short. I used the code underneath to create the snowflakes and a few if statements to control the visuals of the page.

for (let i = 0; i < 50; i++) {
      ellipse(random(0, 400), random(0, 400), random(1, 4));
    }

Day Phase (Cursor on the screen)

The day phase is Abu Dhabi, hence the palms. The sun moves with the x coordinate of the cursor and the angle is mapped from PI to 2PI.

function sun() {
  fill("#FFE87C");
  // angle is mapped from PI to 2PI in accordance to mouseX
  var angle = map(mouseX, -400, 800, PI, 2 * PI);

  var sunX = width / 2 + cos(angle) * 550;
  var sunY = height + sin(angle) * 350;

  ellipse(sunX, sunY, 70);
}

Reflection

This assignment helped me understand the basic principles of shapes and colors in p5js. Although the angle and coordinate axis principles work differently than I was previously taught, working extensively with shapes helped me understand it a lot better. In the future, I would like to focus more on the animated part of coding and make my portrait more lifelike.

Self-Portrait – Hana

The concept behind this self-portrait was to create a simplistic image which looks similar to me.

The most fun part of the design was creating the eyes, since there were so many components – eyebrows, eye line, eyelashes, iris and eye shine. I like the way I created depth in the irises by making a darker and thicker stroke, then putting pupils and eye shine which was white with lower opacity. Here is the code below:

//eyebrows
 stroke(105, 73, 31);
 strokeWeight(5);
 noFill();
 arc(200, 235, 45, 15, 180, 360, OPEN);
 arc(300, 235, 45, 15, 180, 360, OPEN);
 
 //eyes
 stroke(214, 164, 99, 130);
 strokeWeight(6);
 arc(200, 255, 45, 15, 180, 360, OPEN);
 arc(300, 255, 45, 15, 180, 360, OPEN);
 arc(200, 257, 40, 30, 90, 180);
 arc(300, 257, 40, 30, 0, 90);
 
 strokeWeight(3);
 stroke(64, 41, 11);
 fill(82, 54, 18);
 circle(200, 260, 22);
 circle(300, 260, 22);
 noStroke();
 fill(0);
 circle(200, 260, 10);
 circle(300, 260, 10);
 
 //eye shine
 noStroke();
 fill(255,255,255, 200);
 circle(205, 255, 7);
 circle(305, 255, 7);
 
 //eyelashes
 stroke(105, 73, 31, 130);
 strokeWeight(5);
 noFill();
 arc(180, 230, 15, 45, 90, 120, OPEN);
 arc(190, 225, 15, 45, 90, 120, OPEN);
 arc(320, 230, 15, 45, 60, 90, OPEN);
 arc(310, 225, 15, 45, 60, 90, OPEN);

In the future I would like to do something more special than just a simple portrait, maybe even include dynamic components. But since this was the first assignment and animation was not required, I decided to keep things simple 🙂

Assignment 1: Self Portrait

I learned the basic concepts of p5.js, such as circles, ellipses, and colors, through online tutorials, practice coding, and experimentation. I started out by learning how to create basic shapes using the ellipse and circle functions and then moved on to manipulating more complex shapes such as hair and eyes. I then experimented with different colors to create a more life–like image. After mastering the basics, I began to understand how to use conditionals to create an animation. I then began to experiment with different speeds and directions to create a more dynamic animation. With each new concept I learned, I was able to create a more realistic self–portrait that accurately captures my personality.

This p5.js code is a moving self–portrait of me. It is a creative piece of code that uses mathematical concepts such as conditionals, variables, and geometry to create an animation. The code is comprised of a setup and draw function and uses variables for the coordinates, directions, and speed of the animation. The setup function creates a canvas of 400x400 pixels and sets the starting positions and speeds of the animation. The draw function uses the variables to draw the self-portrait, which consists of a head with eyes, hair, a nose, and a tongue. The head will move from side to side and bounce up and down when it hits the boundaries. This code captures my playful and creative spirit, as it animates me in a unique and amusing way.

The part of the code that I am most proud of is the part of moving and boundary detection. I was able to connect all pieces of the face into one variable so that all of them move simultaneously. Also, the ternary operator is my way of showing my CS skills(jk).

Reflecting on this project, I am proud of my progress and the creative outcome of the code. I am now confident in my ability to use the fundamental concepts of p5.js to create engaging visuals. However, I am also aware that there is still room for improvement and further exploration. I plan to add user interaction to the animation, for example, allowing users to move the portrait with their mouse. Additionally, I would like to incorporate video sensors to create a more life–like animation. This could be achieved by tracking a user’s facial movements and incorporating them into the animation. As I continue to explore the limitless possibilities of p5.js, I look forward to creating increasingly complex animations and engaging interactive experiences.