Category: F2023 – Aya

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.

The first class of the semester kicked off with an interesting challenge: creating a self-portrait using basic shapes. This task was not only a great way to start our Introduction to Interactive Media (IM) course but also showed us how this field can be applied in practical work.

For this assignment, I decided to explore how simple shapes could represent different aspects of myself. Since we could only use primitive shapes, I had to get creative to turn a square or a circle into something like an eyebrow. Before diving into coding with P5.js, I spent some time brainstorming and sketching out a rough idea of how I wanted to convey my self-portrait through these basic shapes.

The first challenge was figuring out how to represent myself wearing a hijab using 2D shapes. After some trial and error, I settled on using an arc connected to a quadrangle, which, after removing the outline, looked like a hijab to me. Once that was in place, the rest of the project flowed smoothly as I added details and brought my sketch to life.

The most challenging part for me was trying to recreate my eyebrows using quadrangles. It seemed straightforward in theory, but when I tried it, the brows looked off, and I had to experiment a lot to get the right dimensions that resembled real eyebrows. To help with this, I used the “Print mouseX and mouseY” function throughout the process. It made it easier to understand how to scale things properly because I was struggling to figure out which parameter corresponded to what size.

Even though the assignment didn’t require interactivity, I decided to give it a try. After watching a YouTube video about mouseClicked on p5.js here, I managed to create two global variables that responded to user clicks. This is the part of the code that I’m particularly proud of:

let brow = '#694133';
let smile='#694133';

function mouseClicked(){
  if (brow == '#694133'){
    brow='rgb(236,99,123)';
  }else{
   brow='#694133';
  }
  if (smile == '#694133'){
    smile='white';
  }else{
    smile='#694133';
  }
  
}

It added an extra layer of engagement to my self-portrait, and I found it quite satisfying to implement. It was a pleasant surprise to find out that this function was already built into the program. By using some simple if statements, I managed to change the color of my eyebrows and make my sketch smile whenever the mouse was clicked.

After putting in the effort, I’m proud of my first sketch. Here’s an embedded sketch of my work.

However, for future improvements, I want to add more interactive elements, like maybe a sticking-out tongue or something fun and quirky. I also want to experiment with dimensions and shadows to make the sketch look more realistic.

In any case, this project made me realize the potential of using interactive media to express ideas and identities in creative ways, setting the tone for what we would explore throughout the semester.