Category: F2023 – Aya

The first week of the Introduction to Interactive Media course has been a beautiful beginning to this exciting journey. We were introduced to p5.js, a platform for creative coding, and delved right into it by learning to form two-dimensional primitive shapes with the help of available functions. The assignment to create a self-portrait using these concepts allowed me to explore my creativity and translate my imagination into a coded sketch.

My main goal with this assignment was to incorporate and master all the functions introduced in class. I approached the task without any image in mind and began with a simple ellipse to form the face. The rest of the sketch evolved based on spontaneous decisions. I wanted to achieve a realistic look for the hair, and after a few adjustments, I managed to create it using a combination of ellipses and arcs.

Throughout the process, I was extremely particular with details such as the facial features and the headband and worked to find the exact coordinates to position the shape using the print(mouseX+ ‘ , ‘ +mouseY) command.

To depict a bright sunny day in the background, I have used an arc and lines to create the sun, a simple image of birds using arcs, and a green rectangle to give an impression of the ground.

I wanted to experiment with this new form of creativity by making the sketch interactive. I tried this by incorporating the built-in variables of mouseX and mouseY to make the girl raise her hand, waving with a broadened smile as the mouseX variable crosses 300. This was achieved using the if condition and is a part of the code that I am particularly proud of.

//Waving hand
  if (mouseX>300) {
    quad(315,350,337,350,345,391,325,388);
    quad(337,373,377,315,396,318,348,392);
    circle(337,389,24);
    ellipse(385,312,25,28);
    ellipse(372,307,8,15);
    ellipse(375,295,7,20);
    ellipse(382,295,7,20);
    ellipse(389,295,7,20);
    ellipse(396,301,7,20);
  }
  else {
    rect(318,349,18,52);
  }

In addition, the geometric design on the t-shirt has a fill function with mouseX and mouseY as arguments, making the color change with the movement of the mouse. I have also used these variables to depict the movement of birds. Finally, I have used an if condition to make the girl blink when the mouse is pressed.

//Birds
  if (mouseX) {
    noFill();
    arc(153+(mouseX/5),56-(mouseY/5),47,40,0-HALF_PI,0);
    arc(200+(mouseX/5),56-(mouseY/5),47,40,PI,PI+HALF_PI);
    arc(125+(mouseX/10),85-(mouseY/10),47,40,0-HALF_PI,0);
    arc(172+(mouseX/10),85-(mouseY/10),47,40,PI,PI+HALF_PI);
  }

//Blinking eyes
  if (mouseIsPressed){
    fill('#EDD29C');
    ellipse(227,210,14,15);
    ellipse(275,210,14,15);
  }
  else {
    fill(255);
    ellipse(227,210,14,15);
    ellipse(275,210,14,15);
  
    fill(0);
    circle(227,212,9);
    circle(275,212,9);
    
    noFill();
    arc(278,203,10,10,0,QUARTER_PI);
    arc(279,207,11,10,0,QUARTER_PI);
    arc(224,203,10,10,PI-QUARTER_PI,PI);
    arc(223,207,11,10,PI-QUARTER_PI,PI);
    
    fill(255);
    circle(228,212,4);
    circle(276,212,4); 
  }

 

The assignment turned out to be a wonderful learning experience. I now find myself more confident with the topic. Reflecting on the process, I feel I would have to work on creating variables, which is something I did not include in this sketch. I would also like to explore the concept of loops as I felt the need to have repeated movement in a few places to enhance my sketch.

Concept:

My p5.js project is a playful and interactive portrait of a cat that combines art and code to engage the viewer. The core concept was to create a charming digital feline character that responds dynamically to user interactions. The cat’s eyes are the focal point, where the pupils expand as you move closer to them, creating a lifelike and engaging effect. To enhance the overall aesthetic, the cat’s whiskers sway gently against a serene blue background, with white clouds drifting by, adding a touch of whimsy and serenity to the scene.

<

Highlight of Code:

One of the key highlights of my code is the way I achieved the dynamic expansion of the cat’s pupils. By utilizing the following code snippet, I was able to create a natural and responsive behavior for the pupils:

// Change pupil size based on mouse distance
 // Adjust the mapping so that the pupils start increasing from a smaller initial distance
 let maxPupilSize = 50; // Maximum pupil size
 let minDistanceForMaxSize = 450; // Adjust this distance for when the pupil reaches its maximum size
 let pupilSize = map(min(min(distanceToLeftEye, distanceToRightEye), minDistanceForMaxSize), 0, minDistanceForMaxSize, maxPupilSize, 20);
 pupilSize = constrain(pupilSize, 20, maxPupilSize); // Ensure pupilSize stays within a range

This code calculates the pupil size based on the mouse’s distance from the cat’s eyes, ensuring that the pupils expand realistically as the viewer approaches.

 

Reflection:

Creating this interactive cat portrait was a delightful experience that allowed me to blend creativity with coding. It’s fascinating how technology can be used to imbue digital art with lifelike qualities. I’m pleased with the outcome, as it achieved the intended engagement and charm I aimed for. However, I recognize that there’s always room for improvement and expansion in such projects.

Ideas for Future Work or Improvements:

In future iterations of this project, I plan to explore several avenues for improvement. One potential enhancement is to introduce more interactivity, such as allowing users to change the cat’s expression or even interact with other elements in the scene, like the cat’s tail or ears. Additionally, I could refine the animation of the whiskers and clouds to make them more fluid and realistic. Another exciting prospect is experimenting with different backgrounds and atmospheric effects to create diverse moods within the artwork, adding depth and variety to the overall experience. Overall, I aim to continue refining my coding skills and artistic creativity to create even more captivating and immersive digital art pieces.

Concept:

I wanted to draw myself in NYUAD. My friends usually call me Olaf, the Disney character. My characteristic seems similar to Olaf’s, cheerful and trying to think positively about everything. Also, since I get easily cold, I always wear heavy clothes even in Abu Dhabi to feel warm. In this portrait, I am holding a purple torch, the symbol of NYU. The red flake from the torch is made with several circles.

 

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

The background color is sky blue, which shows the nice weather in Abu Dhabi. The snowflakes are not actually snowballs. They are sunflakes (?). I expressed how hot Abu Dhabi is by drawing falling orange sunflakes.

let snowflakes = [];

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

function draw() {
    
  background(135, 206, 255);

  // Create a new snowflake at random x position
  let snowflake = {
    x: random(width),
    y: 0,
    size: random(5, 18),
    speed: random(1, 3)
  };
  
  snowflakes.push(snowflake);

  // Iterate through the snowflakes and update their positions
  for (let i = snowflakes.length - 1; i >= 0; i--) {
    let flake = snowflakes[i];
    flake.y += flake.speed;
    
    // Draw the snowflake
    fill(255, 235, 0);
    noStroke()
    ellipse(flake.x, flake.y, flake.size);
    
    // Remove snowflake if it goes off-screen
    if (flake.y > height) {
      snowflakes.splice(i, 1);
    }
  }

This video taught me how to make snowflakes (sunflakes) in motion.  www.youtube.com/shorts/kQU2FW6FqcY. At first, I made many errors because it was my first time using random and let function. However, after I got used to the function, I tried different colors of the flakes.

Reflection and Ideas for the Future of Improvement:

It would be beneficial to know how to draw snowballs and snowmen in 3D shapes. Also, in the future, I want to learn how to draw fire from the torch. Since I only learned how to draw 2D shapes, it was pretty difficult for me to draw fire shapes. In the near future, I will make much more creative artwork using diverse functions.

 

Concept

My concept was inspired by ASCII art, as I loved the idea of integrating the digital with the concept of a portrait. Although it is not as detailed as some ASCII art found on the internet, it was a fun exercise to think of letters on the keyboard not just as a means of writing sentences, but also as a way to create a face. I found that the letters “O” and “X” were great for distinguishing between the hair and face, in addition to differentiating via color (e.g. brown and black). I also used the line function extensively to create an outline of the face, and added the “print(mouseX,mouseY)” code line to help me with attaching coordinates.

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

One aspect of the code I’m proud of is the droopy eye effect. I achieved it simply by duplicating the code for the eye line and adding an extra space to the second line. This created a dissonance for the eyes (and only the eyes) since I separated the face fill from the eye fill for that row in my ASCII portrait.

text("    (0)     (0)   ", width / 2, height / 3 + 2 * x);
text("     (0)     (0)     ", width / 2, height / 3 + 2 * x);

Reflection

Although I am happy with this portrait as a base, I would have loved to add animation, such as mandala art in the background, to create a dreamy landscape effect. Additionally, I would like to add more detail by incorporating multiple rows of ASCII codes to enhance the definition of my face.

Concept:

Since I am very new to coding, I wanted to challenge myself a bit and make a self portrait that was somewhat accurate. I tried to create my portrait with very basic shapes and silhouettes so I could somewhat replicate my face. That’s why there are so many circles, ellipses and squares. I felt that they were easier shapes to use when recreating my face. For my hair, I used one large black circle to create the illusion of long hair and a bunch of smaller circles that framed my face to create the illusion of texture, since I have curly hair. I gave myself red lipstick to match my red shirt and pink cheeks!

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

square(30,80,9, mouseX);
    fill('#C5D42C')
  square(100,30,9, mouseX);
   square(150,80,15, mouseX);
  fill('rgb(134,0,0)')
  square(150,80,9, mouseX);
  square(270,70,9, mouseX);
     fill('#C5D42C')
    square(350,60,9, mouseX);
   fill('rgb(134,0,0)')
     square(295,30,9, mouseX);
     fill('rgb(134,0,0)')
    square(295,30,15, mouseX);
     fill('#C5D42C')
    square(295,30,9, mouseX);

 

I was very excited to add the red and green circles/squares. They are simple, but effective. I felt like they gave the same energy as stars, plus I made them a little interactive, so they have this sort of flickering affect to them.

 

Reflection/Improvements:

I definitely want to in the future use more shapes than I did in this assignment. Using more shapes and other techniques would allow my design to have more definition and complexity. Right now, it feels very simple, which I think is okay for a first sketch. I also would love to learn how to play around with more interactive features to make my design a bit more eye catching!

We are what we consume. If you love something enough, it can’t help but spill out of you. One of my favorite movies growing up was Hayao Miyazaki’s Totoro. If you’ve seen it, you’ll recognize this image of Satsuki standing in the rain:
I always wanted to be her in this scene. There’s nothing like waiting for a bus in the rain.

There is an interactive media wiz I follow on Instagram under the handle @hotemogf on Instagram. She posted a little code she made of an umbrella repelling rain. I decided to take a wack at it.

What I came up with was:

You can make the stick figure move by pressing down on your mouse.

I learned how to code the rain by watching a Youtube tutorial, linked here: https://www.youtube.com/watch?v=eFaVK3_mWkM.

Making the stick figure and umbrella was simple enough. But figuring out how to make the stick figure’s arm move and umbrella appear by pressing my mouse down was more difficult. It took asking for my friend’s help (thanks Naz) and constantly checking the reference page. The code I used to make this work is below:

if(mouseIsPressed) {
  stroke(0);
  strokeWeight(0);
  fill(0);
  rect(410,342,147,260);
  }
  
  stroke(255);
  strokeWeight(2);
  fill(0);
  circle(445,400,50);  
  line(445,428,445,523);
  //line(446,442,470,468);
  line(446,441,413,477);
  line(446,522,485,584);
  line(445,522,411,584);
  
  if(mouseIsPressed) {
  arc(490,353,150,120,PI,0,CLOSE);
  line(416,354,462,344);
  line(462,344,489,356);
  line(489,356,517,341);
  line(517,341,565,353);
  line(490,357,490,412);
  line(490,412,501,412);
  line(501,412,502,405);
  }
  
  if(mouseIsPressed){line(446,442,490,420);}
  else{line(446,442,478,477);}

I discovered that it would be too complicated to make the umbrella repel rain like @hotemogf did. But I created the illusion of it happening by coding a black box that appeared behind the stick figure when I pressed my mouse down.

I’m content with how my self-portrait came out. But I want to develop an idiosyncratic style that shines through in all of my interactive media projects. In short, I want what I create to be unequivocally, irrefutably ME. I discovered how difficult that would be given my technical limitations. But someone once told me true love knows no limits. In fact, technical limitations often serve art (think Kurt Cobain or Bob Dylan, or modern day musicians with purposefully harsh production styles). I’ll keep trying to carpe the diem. You learn.

Concept

The task was to make a self-portrait using the p5.js library in an online code editor. No manual drawing or interaction was allowed. To tackle this, I decided to add a touch of my personality to the sketch. I drew inspiration from the Matrix and a bit of my fondness for quirky stuff.

[Initial sketch]

The final sketch turned out quite different from my initial drawing. Getting there involved diving deep into the p5.js library’s online documentation, watching YouTube tutorials, and debugging. I used bezier curves, adjusted stroke weights, dabbled with two-dimensional arrays, made random choices, and drew lines to create the final piece. To me, the final sketch represents a computer’s reaction to my coding blunders, even when I clearly stare at my mistakes in the code I write.

Highlight of Code

One of the many aspects of my code that I am proud of out of the many is creating the Matrix-like background. I had to figure out how to deal with two-dimensional arrays in javascript, how to perfectly align the 0s and 1s in the cells, and how to adjust the frame rate to give the desired effect that I was looking for.

[Before debugging]

// declaration of variables to be used to be 
// used to create the background
const CELL_SIZE_H = 20; 
const CELL_SIZE_V = 20; 
let col_dim;
let row_dim;
let rows;
let cols;
const twoDArray = [];
let nums = ['0', '1'];

function setup() {
  frameRate(20);        // reducing the frame rate to make the animation more appealing
  createCanvas(800, 800);
  
  // calculating the number of rows and columns from the canvas width and height
  col_dim = width;
  row_dim = height;
  rows = row_dim / CELL_SIZE_V;
  cols = col_dim / CELL_SIZE_H;  
  
  
  // creating a two dimensional array to hold either 0s or 1s
  for (let i = 0; i < rows; i++) {
    twoDArray[i] = []; 
    for (let j = 0; j < cols; j++) {
      twoDArray[i][j] = random(nums); 
    }
  }
 
  
  // centering the value in its cell and setting color to green
  textAlign(CENTER, CENTER);
  fill(0,255,0);
  
  // printing text to screen
  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      text(twoDArray[i][j], (CELL_SIZE_H / 2) + (j*CELL_SIZE_H), (CELL_SIZE_H / 2) + (i*CELL_SIZE_H));
    }
  }
}

function draw() {
  // setting the background to black
  background(0);
  
  // reassigning the values of each cell to create illusion and printing value to screen
  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      twoDArray[i][j] = random(nums); 
      text(twoDArray[i][j], (CELL_SIZE_H / 2) + (j*CELL_SIZE_H), (CELL_SIZE_H / 2) + (i*CELL_SIZE_H));
    }
  }
}

[After debugging]

Reflection and Ideas for Future of Improvement

As the first program created with the p5.js editor, I am proud of the outcome, especially of the background. I wasn’t able to fully recreate the image I had in mind which is disappointing for me. I believe that with constant engagement with the p5.js library, I’d be able to more captivating pieces than what I’ve done for this assignment. I’m also proud of the advancement I’ve made towards understanding how bezier curves work. I was clueless about bezier curves before this assignment but it has served as an avenue to explore what they are and how they can be used to create small curves. In future engagements I hope to be able to create more interactive and captivating pieces.

 

Concept:

In the program, I crafted a self-portrait that reflects my desired features, such as long hair. To achieve a whimsical look, I employed a combination of basic shapes, including ellipses, rectangles, and circles. Additionally, I paid attention to detail by adjusting the stroke thickness to give specific elements, like my eyebrows, a darker and more realistic appearance that matched my actual features. I also implemented a dynamic feature- as the mouse cursor hovers to the mouth, it creates another arc on top of the mouth, giving it more of an open mouth or a shocked look overall.

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

One aspect of the code I’m well content with is the dynamic feature of the mouth and how it adds an arc to it as the mouse gets within the specified region around the mouth. The simple placement of an arc to the mouth ultimately changes the entire expression on the face and the impression it overall gives.

//mouth
arc(width / 2, height / 2 + 70, 80, 40, 0, PI);
 if(mouseX>width/2-50 && mouseX< width/2+30){
   if(mouseY>height/2+30 && mouseY<height/2+80){
   arc(width / 2, height / 2 + 70, 80, 40, PI, 0);
 }}

Reflection/Improvements:

I am confident that I can further refine my creative skills and explore ways to not only enhance engagement but also elevate the visual appeal of my work. Moreover, I aspire to expand my proficiency in the extensive realm of coding and functions available to me, enabling me to create an even more compelling self-portrait than the current one.

Throughout the process of creating my self-portrait, I encountered challenges related to pinpointing the precise coordinates within the canvas. Despite implementing code to display the mouse cursor’s position, I spent a significant amount of time fine-tuning the positioning of elements to achieve the desired balance. I look forward to acquiring more efficient techniques to address this issue, ultimately leading to more streamlined and aesthetically pleasing artwork in the future. On top of that, I could have also worked on the colors to make it pop out more and more visually appealing, but overall, I believe that this is a good start.

Concept

After learning more about coding shapes in class using p5.js, I was eager to push the boundaries and explore the artistic and creative possibilities it offered, which I aimed to demonstrate in this assignment. My goal was to create a cartoon-like representation of a self-portrait, allowing for the smooth application of various shapes. This portrait is a reflection of my moments of solitude when I enjoy listening to music and savoring my day. To represent my personality, I chose my favorite color as the background. In an effort to infuse interactivity, I experimented with adding movement to the portrait, where elements respond dynamically as the mouse interacts with the canvas. This exploration allowed me to combine code, art, and personal expression into a single creative assignment.

Highlight of my Code

The addition of interactivity in my codes is one feature that makes me proud. I have two personal favorites, and I find it difficult to choose between them. The first is the way the eyes respond when you interact with them using the mouse – they close, adding an engaging and lifelike dimension to the portrait. The second highlight is the implementation of headphones; when you move your mouse over the ears, a set of headphones magically appears. Below, you can find the relevant sections of code for both interactions:

Eyes Interaction:

// Eyes open
noStroke();
fill(255);
ellipse(240, 260, 60, 60);
ellipse(360, 260, 60, 60);

// Left eye closed
if(mouseX > 210 && mouseX < 270) {
  if(mouseY > 230 && mouseY < 290) {
    noStroke();
    fill(255, 225, 190);
    ellipse(240, 260, 61, 61);
    strokeWeight(10);
    stroke(0);
    noFill();
    bezier(210, 260, 210, 305, 270, 305, 270, 260);
  }
}

Headphones Interaction:

// Headphones
if(mouseX > 120 && mouseX < 160) {
  if(mouseY > 270 && mouseY < 330) {
    noStroke();
    fill(0);
    ellipse(150, 300, 120, 120);
    ellipse(450, 300, 120, 120);
    strokeWeight(17);
    stroke(0);
    noFill();
    ellipse(300, 210, 350, 268);
  }
}

Reflection/Improvements 

Although I’m proud of how my self-portrait turned out, I know that I can always do better and improve my knowledge of coding. One avenue for exploration is the realm of interactive elements. Instead of focusing on specific features like eyes and headphones, I could create more interactive elements that enrich the overall experience. For instance, I could have experimented with the background’s interactivity. Rather than having a static color, I could have implemented dynamic changes in response to user interactions. This could involve background color shifts or even more captivating visual effects to make the portrait engaging and visually stimulating.

Edit Link

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.