Category: F2023 – Aya

 

EMOJIFIED

Concept

In this project I wanted to portray myself not just through my physical appearance, but also by showcasing my personality, hobbies, and interests. To achieve this, I initially explored various methods of conveying this information, experimenting with different visual structures. However, I found that nothing captured it better than emojis. I carefully selected emojis that resonated with me and then experimented with their placement on a canvas.

I wanted to convey the idea that there’s a lot happening in my mind, even though it might not be apparent from the outside. To achieve this, I initially tried placing these emojis in a small container that resembled a portal to my thoughts, but it didn’t feel right. Then, I considered stationary placements around my image, but that didn’t quite capture what I was aiming for. Finally, I decided to position the emojis behind my portrait and give them random motion, which better represented my inner thoughts and emotions.

Creating the facial features was another journey of exploration. I stumbled upon the Bezier shape, which, although initially confusing and requiring precise coordination, presented a unique opportunity. To simplify its usage, I developed a function that assisted me in determining the mouse’s location on the screen, significantly saving me time in the process. As a final touch to enhance the project, I chose to replicate the effect of concert lights in the backdrop. Thus, when you click, dynamic lights can be observed moving behind my portrait which were also created using 3 different colored hearts.

Code that i’m proud of

Mouse coordinate function:

  //mouse coordinates
  textSize(18);
  fill(255, 50, 30);
  text("(" + mouseX + ", " + mouseY + ")", mouseX, mouseY);

The face

//shirt
  noStroke();
  fill(201, 73, 73);
  ellipse(189+9, 410+70, 460, 372)
  
  //collar
  fill(135, 43, 43);
  ellipse(189 +9, 260+70, 221, 138);
  
  //neck
  fill(215, 183, 150);
  ellipse(189+9, 250+70, 191, 115);
  
  //neck height
  fill(215, 183, 150);
  rect(94+9, 167+70, 190, 88);
  
  //ear R
  fill(215, 183, 150);
  ellipse(318, 170, 40, 69);

  //ear L
  fill(215, 183, 150);
  ellipse(72, 170, 40, 69);
  
  
   //Hair rear
  fill(0);
  rect(72.5, 10, 245, 170);
  
  //head
  noStroke();
  fill(215, 183, 150);
  rect(79, 10+35, 232, 186);
  
  //jaw
  noStroke();
  fill(215, 183, 150);
  ellipse(195, 200+30, 232, 179);
  
  //right eye
  noStroke();
  fill(255);
  ellipse(250, 135, 79, 41); // white eye

  noStroke();
  fill(66, 33, 11);
  ellipse(250, 135, 40, 40); //pupil brown
  
  noStroke();
  fill(0);
  ellipse(250, 135, 22, 22); //pupil black
  
  //left eye
   noStroke();
  fill(255);
  ellipse(132, 135, 79, 41); //white eye
  
  noStroke();
  fill(66, 33, 11);
  ellipse(132, 135, 40, 40);//pupil brown
  
  noStroke();
  fill(0);
  ellipse(132, 135, 22, 22); //pupil black
  
  //beard
   noStroke();
  
  let x = 12;
  let y = -120;
  fill(184, 156, 128);
  beginShape();
  vertex(79, 178);
  bezierVertex(79, 178, 178, 261, 311, 178);
  bezierVertex(311, 243, 323, 325, 195, 325);
  bezierVertex(78, 325, 75, 257, 79, 178);
  endShape();

  
  //Nose Arc
  noFill();
  stroke(171, 123, 76);
  strokeWeight(7)
  strokeCap(ROUND);
  bezier(159, 195, 181, 218, 208, 218, 230, 195);


  //Nose Tri
  noStroke();
  fill(171, 123, 76);
  triangle(194, 115, 194, 216, 230, 200);
  
  noStroke()
  fill(188, 75, 102);
  ellipse(196, 253, 94, 34);
  
  //Lip Line
  noFill()
  strokeCap(ROUND);
  stroke(133, 53, 72);
bezier(147, 246, 147, 246, 187, 266, 242, 246);
  
  //Eyebrow R
  noFill();
  stroke(0);
  strokeWeight(17);
bezier(90, 110, 105, 94, 142, 87, 166, 94);
  
  //Eyebrow L
  stroke(0);
  strokeWeight(17);
bezier(222, 93, 247, 86, 283, 95, 298, 112);

Sketch

Reflection and improvements:

In the future, I’d like to incorporate more interactive features. One idea is to make the eyes on the portrait move along with your mouse. I’m also thinking about adding different feelings or vibes that can change how everything looks – the background and the emojis – to make the project more interesting and more fun to interact with.

Reality is so insubstantial, sometimes, you don’t even know if it’s really there. Can’t quite trust your senses. Really, you can’t trust your senses at all, and yet, your senses are all you have. I’ve never been able to accept this. It’s a daily pressure on my mind.

Life comes, as Casey read, as a “rude and indigested mass.” And we order it. If you’re a painter, maybe you recognize the patterns of colors or the different hues and tones in the sky. You structure your life around these things. If you’re a writer, every picture inspires a barrage of words. You attempt to organize your surroundings into perfect sentences. You live your life on the line, through lines. However life comes, depending on who you are and what you love, you order it differently. Reality initially seems such a stable thing. But between the painter and the writer, between you and me, everything is different. Our very eyes, though they look the same and work the same, are in completely different worlds. It’s quite lonely sometimes.

I think Casey’s talk was an acknowledgment of the history and heritage that made him. I was only able to have these realizations about reality because of when I was born. Did people in the 1700s have thoughts like these? Or did they never question the stability of the reality around them? They were living in a completely different reality than I am now. One whose face was never questioned, no double glance in the mirror.

As a photographer, I was struck by how similar some of Casey’s geometrical designs were to photograms. Making photograms is the first exercise a film student does in the dark room. You throw random objects on some light sensitive paper and expose it. You end up with the outlines of simple, vague, white shapes on a black piece of paper. Casey said the simplicity of his geometrical designs encouraged you to look closer. If you changed one aspect of the code, the visuals looked completely different. In photograms, because you only see dark and white outlines, you have no idea what the objects that formed them really are. I couldn’t shake the newfound feeling that I was living in a world where all objects are in disguise. Even with the simplest of designs, you must look closer. Perhaps you could find the nature of the whole world there.

Casey visualized human experience in his art. We all begin by living in a world that is stable. And it determinedly morphs into a reality that we feel like strangers in because we realize our lack of control. The grid turns into a maze. Hence Casey’s transition into art where he was not in total control over his images. Much of the art he referenced evoked the “supremacy of pure feeling.” Our feelings mean nothing. They change on whims. They make us feel like Superman or like the world is falling apart from one moment to the next. And yet, our feelings are all we have.  Casey quoted Richter, who admitted “how much better chance is than I am.”

And maybe I can start to come to terms with my existence by acknowledging that it is the push and pull between the chaos of the universe and my attempts to order it that make it so interesting, so beautiful, so wonderful. Maybe I wouldn’t have changed a thing. Living in your own reality gets lonely. But watching Casey flick from one piece of art to the next, I got the sense that we make all these things to temper that. This is what Interactive Media is. Sharing this. Tempering that.

Concept:

Going over the reference digital art pieces, I was reminded by the black and whites of a sight we’re all very familiar with (I assume) – TV static.

I thought about recreating TV static, something I remember sitting perplexed in front of for (concerningly) long periods of time as a child. It would be fairly easy to make while still using loops, conditionals and animation. It would also be reminiscent of our reading material this week, for I, the artist, would have control over the degree of randomness and chaos of my art.

Highlight:

While making the black and white static, I experimented with random colors for each box instead of a grey. Had my childhood TV had color static, my eyes would probably never have left the screen.  At first I assigned a random color to each 10*10 box, but that seemed a bit dull.

I made the boxes bigger, 50*50 to be exact, although they show on the surface as 10*10 boxes, and the vibrancy increased much more softly than it would have had I just increased the value of the transparency in the fill() function.

I also retained a touch of the old black and white which appears when the mouse is pressed. This adds some interactivity to the art.

Here is the code:

if (!mouseIsPressed) {
for (let y=0; y<=500; y+=10) {
for(let x=0; x<=500; x+=10) {
  noStroke()
  fill(random(255),random(255),random(255),70)
  rect(x,y,50,50)
}
}
}
else {
for (let y=0; y<=500; y+=10) {
for(let x=0; x<=500; x+=10) {
  noStroke()
  fill(random(50,200))
  rect(x,y,10,10)
}
}    
}

Sketch:

Reflection and Ideas:

In the future, I would like to change the properties such as color of each box as the mouse approaches it once I learn how to do that with object-oriented programming.

In Casey Reas’s video, he discusses how destruction leads to a work of art. He showcases how he himself applied such concept into his work through computer programming. He sees that Form+Behaviour=Elements: it is that decision making will allow everything from randomness, but it will slowly come together.

His approach to this kind of art is quite impressive. He is able to form something from randomness or of chaos into something that one might think is an interesting set of shapes or patterns.

Through this it is clear that Casey Reas encourages not only artists but programmers to be as creative as they can with their work. To allow themselves to create a piece of art out of what they initially started with.

Concept:

In this assignment I tried to add the change of day and night as well as the weather. Using basic shapes and sort of complementary colours for each time, I managed to hint at small elements that might resemble what happens during the day or night. I also didn’t try to stick into one biome; you can imagine this being anywhere.

Highlight of Code: 

I’m proud with how I manged to successfully bound the day and night while changing several colours elements.

function draw() {
  background(145,164,176);
  
  fill(203,199,172);
  circle(x,150,100);
  fill(198,178,87);
  circle(x,150,50);
  ellipse(50,352,200,150);
  triangle(399,242,400,400,0,400);
  
  
  if(x>width){
     changeDirection = true
     }
  else if (x<=55){
    changeDirection = false
  }
//(day)
  
  if (x>=55 && changeDirection == false){
    x=x+1.5

  }
  // (night)
  else if (changeDirection == true){
    x=x-1.5
       fill(125,135,142);
        background(42,53,69);
      circle(x,150,100); 
    ellipse(50,352,200,150);
       triangle(399,242,400,400,0,400);
    fill(78,110,168);
  circle(x,150,70);
    fill(146,152,163);
    circle(x,150,50);

As for my clouds I thought it was better for them to go through the frame and appear from the other side.

 a = a + speed; //make the cloud 1 move 
  if (a > width) { 
    a= -400;
  }
  b = b + speed/2;//make the cloud 2 move
  if (b > width) { 
    b= -200;
  }
  
  noStroke();
  
//draw first cloud
  ellipse(a,100,200,80) 
  ellipse(a+200,80,100,80)
  ellipse(a+50,120,150,50)
  //draw second cloud
  ellipse(a+300,135,170,90)
  ellipse(a+50,130,90,70)
  ellipse(a+100,170,100,80)
  noStroke()
  fill(180)
  //draw third cloud
  ellipse(b+130,170,150,70)
  ellipse(b+120,160,150,30)
  ellipse(b+150,190,100,50)
  ellipse(b+150,130,80,50)
  

 

Reflection and Ideas for Future Work:

I really wish I would spend way less time trying to figure out how to do several things and make them all appear smoothly within one frame. I also want to work with more complex shapes which might get me into animation.

EDIT: https://editor.p5js.org/mariamalkhoori/sketches/7jcUCFfj6

 

Concept:

The concept is to create an animated work of art featuring multiple hearts. Each heart responds to the mouse’s proximity in two ways: it beats faster as the mouse gets closer, and its color transitions. This adds an interactive and dynamic element to the artwork.

 

Highlight Code:

I’m particularly proud of the updateHeartbeat function. This function calculates the distance between the mouse and a heart and adjusts the heart’s speed based on that distance. It’s a key part of the interactivity and dynamic behavior of the artwork. Here’s the code snippet:

function updateHeartbeat(heart) {
  let d = dist(mouseX, mouseY, heart.x, heart.y - heart.heartSize);
  let threshold = 100;
  if (d < threshold) {
    heart.heartSpeed = map(d, 0, threshold, 2, 4.5);
  } else {
    heart.heartSpeed = 1;
  }
  if (heart.heartbeat) {
    heart.heartSize += heart.heartSpeed; 
  } else {
    heart.heartSize -= heart.heartSpeed; 
  }

  if (heart.heartSize > 350 || heart.heartSize < 100) {
    heart.heartbeat = !heart.heartbeat;
  }
}

This function dynamically adjusts the heart’s size and speed based on the mouse’s proximity, creating a lifelike beating effect.

Reflection:

In reflecting on my code, I’m proud of how it’s well-structured and effectively brings the interactive artwork to life. However, I recognize that there’s always room for improvement and experimentation. First, I’d like to explore smoother transitions by experimenting with various easing functions for size and color changes. This can add a more organic feel to the animation. I also think it would be intriguing to introduce more complex color schemes or patterns for the hearts instead of a simple color transition. Custom heart shapes could bring diversity to the artwork, and randomly assigning them could make it even more engaging. To ensure optimal performance, especially with a larger number of hearts, I’ll consider implementing techniques like offscreen rendering. Adding user controls for adjusting parameters interactively, such as heart count, animation speed, or color schemes, would provide a more personalized experience for users. Additionally, enabling users to export their creations as images or animations would enhance sharing possibilities.

In the video, Casey Reas talks about the evolution of art based on changes witnessed in the surroundings. Disturbance in the surroundings through wars or natural calamities often results in a shift in the art with a clear depiction of chaos. I found this observation to be really interesting as I had never considered that external factors could affect the type of art a person creates.

He further elaborates on the elements seen in art such as chaos and order which greatly influence the way one perceives the art.
A parallel is drawn between art and code, with a focus on order and randomness and how a slight change in symmetry can entirely transform a creative piece from a state of order to absolute chaos.

The video sheds light on the evolution of art through the years and how the state of randomness can now be expressed in a more complex way.

I found the discussion on the space between order and chaos quite insightful, and hope to consciously implement and analyze these concepts while viewing art and code in the future.

After viewing the video, Casey Reas’ inventive coding innovations made me think of the many possibilities that coding can do towards the art world . He has transformed the complex language of code into a tool for creating interactive and visually appealing artworks. This method pushes the limits of what traditional conceptions of art may be, and I found it to be quite exciting.
I was also intrigued by Casey’s contribution to “Processing creation”. Designing a programming language and environment that is especially suited for artists and creators is a beautiful concept. It gives people the confidence to explore the realm of visual art and creative projects, regardless of their background in coding. I was moved by this democratization of digital art, which demonstrated the ability of technology to increase access to artistic expression.
Another fascinating topic was the investigation of generative art covered in the film. Unpredictability and dynamism are added to the creative process by employing algorithms and rules to produce art that changes over time or reacts to user interaction. I could not help but be impressed by the inventiveness of this strategy since it is like art that has a life of its own.
Casey’s work’s emphasis particularly struck me on interaction. The lines between the artist and the viewer are blurred when the public is allowed to interact with and affect the artwork. As a result, it becomes more interactive and engaging, which is a potent method to engage audiences.
Also demonstrating the depth of the creative coding community were Casey’s partnerships with other artists and creators. It is inspirational to consider how people may work together to create projects that are both inventive and beautiful to look at. It shows the potential for group innovation and the limitless opportunities that arise from working with others who share similar interests.

 

I found Casey Reas’s talk on randomness and its role in computer programming and generative art to be incredibly captivating and thought-provoking. At first, I was hesitant about the length of the video, but as I started watching, time flew by, and I became deeply reflective of his ideas.

Reas begins by discussing the idea that artists bring order to the chaos of nature. While this statement initially puzzled me, I realized that it highlights the artist’s role in organizing and interpreting the world around them, rather than implying that nature is purely chaotic. It led me to think about how art connects with nature.

One of the key takeaways for me was the concept of “noise” or controlled randomness. Reas’s demonstration of adding noise to a set of lines converging on a target was illuminating. Without noise, the lines would form a perfect circle, but with it, each line took a unique and unpredictable path to reach the target. This demonstrated how randomness can introduce individuality and complexity into art, making it more compelling and engaging.

The personal reflection on the presentation resonated with me, particularly the idea that randomness adds an element of surprise and intrigue to art. It reminded me that not everything needs to be meticulously planned and that embracing controlled randomness can lead to more dynamic and captivating creative outcomes.The reflection also raised thought-provoking questions about the line between order and chaos in art. Where should the boundary be drawn, and how do individual perceptions influence this distinction? 

Response:

One thing that caught my attention during the speech was the idea that embracing chance can lead to novel and unexpected outcomes in art and design. By introducing elements of randomness into the creative process, artists and designers can break away from the constraints of their own preconceived notions and habits, allowing for the emergence of truly unique and innovative works. This notion challenges the traditional idea of the artist as a deliberate and controlled creator, highlighting the beauty and potential of spontaneity.

However, even with this, I personally felt that the artwork as it may seem uncontrolled, actually is controlled on a large scale or a micro-scale. The use of algorithms to program art introduces randomness in a controlled manner, providing artists with structured ways to explore chance operations. This approach not only encourages experimentation but also raises questions about the relationship between human intention and the role of code in shaping creative outcomes.

The use of randomness in a controlled manner encourages artists and designers to embrace chance as a source of inspiration and innovation, and it challenges us to explore the boundaries between intention and serendipity in our work.