Category: F2023 – Mang

The concept:
For this assignment, I tried to implement some dynamic functionality while keeping the design visually appealing. So, I implemented two backgrounds that basically reflects my two main areas of interest, coding and design. The design background is a display of randomly-oriented “Fady” texts of different colors. The other background follows the same idea but displaying binary number instead. Also, another indicator of my identity is the text written on the hoodie that also changes by switching between both roles. A viewer can switch between the two backgrounds by clicking the two buttons on both sides of my character.

A highlight I am proud of:
The most important part of my portrait is the possibility to switch between both backgrounds. So, I am proud of this part of code that where I used functions to implement my idea.

The Sketch:

Future improvements:
While I am proud of doing this kind of art, I find the face doesn’t look like mine. So, some future improvements or recommendations include re-creating a character that looks more like me.

 

For the self portrait assignment I had the idea of recreating the painting “The Son of Man” by René Magritte. What I appreciate about the painting is its simplicity and the way it could be worked in the project. The general idea of the painting can be easily recreated in the library, even with simple shapes. In other words, it might not look aesthetically pleasing, but anyone that knows the painting would be able to recognize it here. Moreover, the fact that there is an apple in front of the face opens many fun possibilities that could be drawn. I wanted something silly so I just went with a stick face that appears when the screen is clicked.

In terms of code there is nothing exceptional that could be highlighted. I guess I am proud that I managed to make something that looks decent, although I know I will do way more once we progress in class. However, here is the simple onclick toggle to switch between apple and face that can also be seen in the documentation.

if (mouseIsPressed == true) {
  if (mouseButton == LEFT) {
    strokeWeight(0)
    fill(0);
    circle(-40, -20, 20) // left eye
    circle(40, -20, 20) // right eye
    rect(-30, 40, 60, 20); // mouth
  }
}
else {
  fill(140, 174, 152);  // apple
  ellipse(1, 10, 150, 140);
}

In the future I will make sure to add more interactivity and utilize vertexes for better drawings.

For this assignment, the task was to create a self-portrait, and I’ll admit I’m someone who can’t draw at all. So, I approached this assignment with a mixture of excitement and nervousness and I decided to keep my self-portrait simple yet cute, which I hope would come across effectively.

I began by sketching the outline for the head and hair. It started off decently, but I faced significant challenges when it came to layering various shapes to achieve the correct hair texture. After a few tries, I eventually managed to get it  right.

So initially this is how my portrait looked like

And this is what my final portrait looks like

As I mentioned before, I take pride in the part of the code that allowed me to create the hair, even though it might not be particularly intricate. The layering aspect was a challenging but rewarding aspect of this assignment.

Working on this project was a delightful experience because it made me realize that while I might struggle with drawing on paper, I can create something visually appealing using Processing. I particularly enjoyed adding interactivity to my portrait, as I believe it adds an interesting dimension to the work. While I am satisfied with my final submission, there are a few areas I would like to improve upon. One of them is creating a more detailed body for my self-portrait since I kept it relatively simple this time.

Concept:

For this assignment, my goal was to create an abstract and visually pleasing composition by utilizing various shapes and colors. I incorporated my favorite hues, such as baby pink and blue, into the portrait. The choice of having the portrait not look directly at the viewer but rather upside down symbolizes my personality, which tends to be optimistic and focused on finding the positives in life.

Highlight of Some Code I’m Proud Of:

// Text in Rotation

 let radius = 150; // Radius at which text rotates
 let textRotate = "Buka  Buka  Buka  Buka  Buka  ";
 let textArray = textRotate.split("");

 let angleStep = (2 * PI) / textArray.length;

 for (let i = 0; i < textArray.length; i++) {
   let x = w / 2 + radius * cos(-angle3 + i * angleStep);
   let y = h / 2 + radius * sin(-angle3 + i * angleStep);

   textSize(50);
   fill(232, 112, 133);
   noStroke();
   text(textArray[i], x, y);
 }

 angle3 += radians(1);

One aspect of the code that I take pride in is the rotation of text at the bottom right of the screen. This part turned out to be more challenging than I initially anticipated. While I had already created a rotating arch in the background, arranging individual letters to rotate around a circular path was a more complex task. Although I’m not entirely satisfied with the final result, I’m proud of how I managed to implement it.

Embedded sketch: 

Reflection and Ideas for Future Work or Improvements:

Despite my overall satisfaction with the portrait, I feel that it doesn’t fully capture my essence. In future projects, I would like to explore ways to infuse more personal elements into my works, creating a stronger connection between the piece and my identity. This could involve experimenting with different styles, techniques, or thematic elements to achieve a more accurate representation of myself.

The Concept:

For this project I wanted to try to code something that reflects in any form or sense who I am as a person. I kept racking my brain for ideas but I didn’t have any that I particularly liked so I just started drawing random things. I started with ellipses, a big one, a smaller one, an even smaller one. I created them non concentric because I don’t like everything to be perfectly aligned. Then I decided why not make it the background and just draw a simple face that resembles me on top. Then I started thinking about colors; I was too indecisive to choose one color so I settled on three!

The three colors I used for the background represent the sun, sea and grass because one thing about me is that I enjoy being by the beach and going to parks since nature has a very calming effect on me. 

By clicking the mouse, not only does the background change but also my facial expressions do too. I go from happy to surprised to pissed off. I wish I could say that the expressions relate to the background color or something cool like that, but it was really just an attempt at challenging myself to experiment further with p5.js. 

I added AirPods to the portrait because I am almost always listening to music. Music has been such a big part of my life for so long, I couldn’t draw a self-portrait without including any element of music into it. However, the AirPods are missing in the “pissed off” version of myself, because I can never get pissed off while listening to music.

As you move the mouse around the screen, the eyes follow the movement of the mouse because I wanted to add an element of interactivity in the portrait, but you could also say it reflects my curious nature.

A highlight I’m proud of:

Although it may seem very trivial, I had such a hard time getting the eyebrows to look the way I wanted them to. So I am proud of the final result I reached.

//eyebrows
fill(hair);

if(option == 1){ //straight brows
    bezier((width/2)-15, (height/2)-30, (width/2)-35, (height/2)-35, (width/2)-45, (height/2)-30, (width/2)-50, (height/2)-25);
    bezier((width/2)+15, (height/2)-30, (width/2)+35, (height/2)-35, (width/2)+45, (height/2)-30, (width/2)+50, (height/2)-25);    
}
else{if(option == 2){ //surprised brows
          bezier((width/2)-15, (height/2)-40, (width/2)-35, (height/2)-45, (width/2)-45, (height/2)-40, (width/2)-50, (height/2)-35);
          bezier((width/2)+15, (height/2)-40, (width/2)+35, (height/2)-45, (width/2)+45, (height/2)-40, (width/2)+50, (height/2)-35); 
      } 
     else{if(option == 3){ //pissed off brows
          bezier((width/2)-15, (height/2)-25, (width/2)-35, (height/2)-35, (width/2)-45, (height/2)-30, (width/2)-50, (height/2)-30);
       
          bezier((width/2)+15, (height/2)-25, (width/2)+35, (height/2)-35, (width/2)+45, (height/2)-30, (width/2)+50, (height/2)-30);
          }
     }
}

Another part I am particularly proud of is the way I had the background colors change with every mouse click.

if(option == 1){ 
    
    let blue0 = color(59, 197, 255);
    let blue1 = color(135, 219, 255);
    let blue2 = color(110, 212, 255);
    let blue3 = color(161, 227, 255);
    
    //non concentric circles in the background
    background(blue0);
    noStroke();
    fill(blue1);
    ellipse(150,150,500);
    fill(blue2);
    ellipse(200,150,350);
    fill(blue3);
    ellipse(150,150,200);
  
    // changes option to 2 so that the frame changes with next mouse click
    option = 2;
    // drawMe() function is called todraw the face over the desired background
    drawMe(); 
}

// second mouse click, changes background from blue to green (along with other changes further described in drawMe() function)
else{if(option == 2){
      
      let green0 = color(67, 166, 60);
      let green1 = color(0, 139, 0);
      let green2 = color(76, 187, 23);
      let green3 = color(97, 194, 86);

      background(green0);
      noStroke();
      fill(green1);
      ellipse(150,150,500);
      fill(green2);
      ellipse(200,150,350);
      fill(green3);
      ellipse(150,150,200);
  
      option = 3;
      drawMe();
    }
    else{if(option == 3){
      
          let yellow0 = color(255, 191, 79);
          let yellow1 = color(255, 172, 28);
          let yellow2 = color(255, 209, 130);
          let yellow3 = color(255, 228, 181);

          background(yellow0)
          fill(yellow1);
          ellipse(150,150,500);
          fill(yellow2);
          ellipse(200,150,350);
          fill(yellow3);
          ellipse(150,150,200);
      
          drawMe();
      
          //resets option to 1 so that backgrounds can loop
          option = 1;
          }  
      } 
  }

 

Reflection and ideas for future work or improvements:

Working on this assignment was very fun, I kept pushing myself to try new things and I stuck into this loop of constantly wanting to add more features without complicating it too much. It was hard for me to decide where to draw the finish line. For future work, I would like to work on having more interactivity and creativity within my code. I would also like to work on making my code more efficient by removing redundant repetition of code. 

Concept

My main focus for this assignment was the aesthetics of it. Because I wanted to focus more on making something visually pleasing, I started off ambitious – I had made a cartoonish sketch of myself and was hoping to recreate it in Processing. It seemed possible if I broke down the drawing into small curves.

While it most certainly was possible, I underestimated the difficulty of doing so. However, as we discussed in class, even the way things fail can be inspirational in itself. As I was trying (and failing) to construct the initial sketch, I noticed that what I had looked very similar to minimalist line art. I realized a line art representation of myself was not only much more feasible but also more indicative of the features I see most representative of myself, like my glasses, my mole, and my often-worn heart-shaped earrings.

I also really love pastel color palettes, so I wanted to incorporate them into my portrait. I decided to make the background(s) of the portrait some of my favorite palettes. Every time the canvas is clicked, it changes the color palette. There are five in total.

Implementation

Like I said, because I focused mostly on the aesthetics of it the technical implementation isn’t the most out-of-this-world. I, however, like the idea of having different sized blobs in the background (which I believe makes the whole portrait visually appealing). The mathematics of implementing the blob I learnt from this article, which I then modified a bit to have animated.

  for (let k = 0; k < blobs.length; k++) { 
    let blobPoints = []
    push();
    noStroke();
    fill(blobs[k].colors[currentPalette])
    beginShape();
    translate(blobs[k].x, blobs[k].y); 
    for(let i = 0; i < res; i++) {
      //make sure circle isn'getting too big or too small
      rad += random(-20,20);
      rad = constrain(rad, blobs[k].minRad, blobs[k].maxRad); 
      let x = rad * cos(angle * i);
      let y = rad * sin(angle * i);
      blobPoints.push([x, y])
      curveVertex(x,y);
   }
    for (let j = 0; j < 3; j++) {
      curveVertex(blobPoints[j][0], blobPoints[j][1])
    }
    endShape();
    pop();
}

Reflections and Improvements

While I’m happy with the way my self-portrait turned out, I don’t like the way the curves were made. It was a lot drawing of lines with hard-coded coordinates, so it is not adjustable in anyway, so making the line art itself interactive in any capacity feels very difficult. For my next project, I want to focus more on using symmetry and geometry in the location of elements.

 

My concept: The movie “Barbie” was one of the most discussed films this summer, which raised many issues in society such as discrimination, existential crisis, the negative effect of patriarchy for all etc. I wanted to create my self-portrait in the Barbie style, keeping the pink vibe of the childhood Barbie cartoons and dolls in addition to the main message of girlhood. Girlhood is all about growing, finding yourself and the concept of ‘girl supporting girls’, giving a raise to feminism. Because of this, my self-portrait uses pastel colours with a focus on pink specifically and contains the popular phrase “GRL PWR” on the eyeglasses which is essentially a “Girl Power” and the phrase from “Barbie” movie as “kENOUGH”. Overall, my self-portrait was inspired by the childhood cartoon and the recent movie “Barbie”, promoting the idea of girlhood and feminism. 

From the technical aspect, the portrait has dynamic things such as bouncing hearts up and down, an increasing blue circle with the movement of the mouse and moving the word ‘kENOUGH’ from left to right. Moreover the word ‘click’ is moved with the mouse to show that the user has to click on the screen to see the change of the colour of eyeglasses and the phrase “GRL PWR” appears.  

A highlight of the code I am proud of is the code of the moving hearts because each heart was created with simple shapes such as circles and triangles. Secondly, each of these shapes was made to move up and down by bouncing. Initially, the bouncing part was hard for me because the hearts were moving indefinitely downwards and then I recalled the class about the importance of giving the limits to the movements of objects to make them bounce back from that limit. 

let y = 40;
let goDown = false;
function setup() {
  createCanvas(320, 400);
}

function draw() {
  background(226,201,221);

//moving hearts
  fill(227, 102, 152);
  circle(40, y, 10);
  circle(50, y, 10);
  triangle(35, y+1, 55, y+1, 45, y+15);
  
  if(goDown == false) {
  y=y+2
  }
  if(y<0) {
    goDown=false;
  }
  if(goDown == true) {
  y=y-2
  }
  if(y>400) {
    goDown = true;
  }

Moreover, I am proud of the overall process from the initial sketch on the iPad to the final project. As this was my very first coding experience, I had fun. To realize my idea, I drew the project’s coordinate system and raw sketch. Because of this, it was easier for me to find the coordinate points and draw the shapes. 

Pic 1. Initial Sketch on the coordinate system

Embedded sketch: CLICK on the screen; MOVE the mouse right and left.

Reflection and ideas for future work or improvements: I would make the movement of ‘kENOUGH’ continuously, not just going back and forth because I think that the space left at the beginning of the word train is not aesthetically pleasing. Additionally, I would try to make the castle more realistic and add some interactivity to it, such as making it flush, changing the color, etc. 

As I started working on this assignment, I wanted to explore colors and see how far I can go with basic shapes. Having a background in coding but little experience in creative pursuits, this was both exciting and challenging.

I began with a sketch on paper, a humble attempt to visualize the shapes I needed before trying it on p5.js. However, the transition from paper to screen was not as easy. The positioning of shapes was difficult so I displayed the X & Y coordinates using MouseX, MouseY and text. 

So here’s me! And a dog! Anyone who knows me, knows how much I love dogs and hence I decided to add a fur friend that can move and jump alongside me for the assignment. I thought I was content with what I had until I noticed the fairy lights in my dorm room and was curious to try adding a similar lively and vibrant vibe to the canvas. A nested list with RGB color codes, reduced frame count and ellipses filled with these colors resulted in the twinkling fairy lights – like effect. It took me quite a few tries until I was completely satisfied with the shapes and details of the girl I was trying to create.

This was the one I almost settled on, using basic rectangles, lines and ellipses but then I discovered the life saving functions! The bezier(), curve() and the beginShape() endShape() functions that I think were so much more efficient to create the self portrait. The final outcome:

There’s not much about the code or the idea that I’m particularly proud of but the things that I like about what I tried to make are,

1. The motion of the dog – the dog moves with the mouse (as the X coordinates change) & jumps when mouse is pressed!
2. My (the girl’s) smile slightly widens when the dog moves closer to her symbolizing how I feel every time I spot a puppy and run to play with it
3. The fairy lights for the color pop and liveliness.

Here’s a snippet of the code that makes the dog jump! 

//dog jumping
if (isJumping) 
{dogY-=5;
  if (dogY <= height-100){isJumping=false;}
} 
else if(dogY < height/2+180)
{dogY+=5;} //anywhere above the ground, gravity when not jumping

// Prevent the dog from going below the ground
// if (dogY < 0){dogY = 0;} 
// else if(dogY > height/2 + 180){dogY = height/2 + 180;}
dogY = constrain(dogY, 0, height/2+180);

function mousePressed()
{
  if (!isJumping) {isJumping = true;} //if mouseclicked and dog not jumping already
}

I saw a few reference links and tried to understand the basic concept of a jump but then simplified it as much as I could since I felt I needed a very basic application of it to make the dog jump for this assignment. Initially I used if-else statements but then found the constrain() function to do the same.

References : Simple jump, Jump 

Reflections & Possible improvements

 I really enjoyed this assignment and actually found it addictive as I wanted to keep making changes and try new things. For scopes of improvement, I think I could try to make the girl look more realistic with shadows and movements and lesser hardcoding of coordinates. I also tried various colors for the background but then found out there are functions that I can use to create gradients – a feature I’d love to explore next time. Overall, I’m very grateful for the assignment, help and looking forward to more in the upcoming classes.

Your concept

My concept was this meme/image of a crying Hello Kitty with the caption “*sniff* I’m sorry for being stupid”. I love how cute this image is and I’ve been using it in my messages to friends a lot, so I’ve been associated with it in the past few days. I thought it would be fun to make an interactive version of this for my self-portrait.

As it needed to somewhat look like me, and I don’t look like Hello Kitty, I added a pair of round sunglasses that I’ve been wearing in class because of my eye infection.

A highlight of some code that you’re particularly proud of

There isn’t anything functionality-wise that I was too proud of, but the most difficult part about this sketch was drawing Hello Kitty’s face. Using boxes/lines would lose the cuteness appeal of it, so I learned how to draw using bezier curves. It reminded me of Photoshop’s Pen tool, except with written coordinates instead of being able to smoothly adjust the control points.

I’m really proud of how clean and polished the final product looks, as bezier curves look much better over simple geometric shapes. Though it took way more time to draw each curve to my liking.

// face
fill(255)
// bezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2);
beginShape()
vertex(118, 75)
bezierVertex(65, 45, 55, 55, 65, 114); // left ear
bezierVertex(13, 262, 136, 262, 200, 263); // left face
bezierVertex(264, 262, 387, 262, 335, 114); // right face
bezierVertex(345, 55, 335, 45, 282, 75); // right ear
bezierVertex(225, 63, 175, 63, 118, 75); // top head

Curves needed to draw Hello Kitty’s face

Embedded sketch

Click to make her cry! 🙁

Reflection and ideas for future work or improvements

I could’ve possibly added more animations, such as waving hands during the crying animation state, but I wrote my draw() functions in a bad way so to add animations to certain elements would take a lot of rewriting. My lesson learnt is to plan out the details of what I want to make ( final outcome ), so I don’t have to rewrite code when I later think of new features later on.

Concept

 

 

Code snippet

// Declare in the global scope
// All functions will have access to this variable
let myRandomNumber;


function setup() {
  createCanvas(300, 400);
  
  myRandomNumber = random(255); // How can we find out what a variable's value is? print()

  let myRoundedNumber = round(myRandomNumber); 
  
  print('myRandomNumber = ' + myRandomNumber);
  print('myRoundedNumber = ' + myRoundedNumber);

  
}