Month: September 2023

Concept:

I’m basically using this self portrait to experiment with what I’ve learned so far (which is obviously not a lot) because let’s be honest – I’m not very artistic. I did however try to compensate for the lack of artistic accuracy by making some other aspects of the portrait interactive.

A highlight of code that I’m particularly proud of:

I thought about what it was that I could make interactive, and I settled on making my (or my sketch’s) eyes follow the mouse pointer. In the process, I  stumbled upon some other people’s sketches, and also found inspiration in Maryam’s sketch, particularly how her expression changes as you hover the mouse pointer over her face (apologies if there are multiple Maryams in our class). Without looking at the code behind it, I tried, with much initial disappointment, to do something similar, and thus finished with two interactive features: the eyes, and the facial expressions.

//interactive eyeballs
  if (mouseX<=350 && mouseY<=250) {
  fill(255)
  ellipse((320-(255-mouseX)/120),(200+mouseY/120),6,6)
  ellipse((380-(255-mouseX)/120),(200+mouseY/120),6,6)
}
  if (mouseX>350 && mouseY<=250) {
  fill(255)
  ellipse((320-(255-mouseX)/120),(200+mouseY/120),6,6)
  ellipse((380-(255-mouseX)/120),(200+mouseY/120),6,6)
}
  if (mouseX>350 && mouseY>250) {
  fill(255)
  ellipse((320-(255-mouseX)/120),(200+mouseY/120),6,6)
  ellipse((380-(255-mouseX)/120),(200+mouseY/120),6,6)
}  
  if (mouseX<=350 && mouseY>250) {
  fill(255)
  ellipse((320-(255-mouseX)/120),(200+mouseY/120),6,6)
  ellipse((380-(255-mouseX)/120),(200+mouseY/120),6,6)
}
  
  //interactive mouth + eyebrows
  if(mouseX<310 || mouseX>390) {
  fill('rgb(253,91,91)')
  stroke('#B0764A')
  strokeWeight(2)
  curve(300, 0, 310, 290, 390, 280, 300, 0);
  fill('#C7A184')
  strokeWeight(4)
  curve(310,220,305,181,330,178,328,220)
  curve(370,220,365,181,390,178,388,220)
  }
  if (mouseY<285 || mouseY>320) {
  fill('rgb(253,91,91)')
  stroke('#B0764A')
  strokeWeight(2)
  curve(300, 0, 310, 290, 390, 280, 300, 0);
  fill('#C7A184')
  strokeWeight(4)
  curve(310,220,305,181,330,178,328,220)
  curve(370,220,365,181,390,178,388,220)
  }
  if(mouseX>=310 && mouseX<=390 && mouseY>=285 && mouseY<=320) {
  stroke('#B0764A')
  strokeWeight(4)
  line(320,300,390,280)
  line(310,175,330,180)
  line(365,180,385,175)
  }

The sketch:

Reflection and ideas for future work or improvements:

I was limited by my familiarity with JavaScript and could use only some of the various functions it is capable of executing, so I would like to revisit this assignment – just to see how far I’ve come – at the end of this course and do more stuff (or just improve on this existing stuff).

Concept:

As this is the beginning of our course my Art is simple and cool. I made a portrait of how I might look in two weeks. I love stars so I decided to add it to my art.

Highlight:

Creating the dynamic stars was hard for me as this was my first time using JavaScript. I wish I could do better though so I hope to be able to use my future knowledge to improve my work.

for(let i=0;i<50;i++){
  noStroke();
  circle(random(400),random(400),2);
}

Drawing the body was fun.

Reflection/Improvement:

I hope to be more creative next time. Hope you love my work. Cheers!

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.