Category: F2023 – Aya

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.

The assignment for this week was to use concepts of conditional statements and loops to produce a simple work of art. I initially decided to build upon the example of nested loops discussed in class to create an illusion using squares. This includes three nested ‘for’ loops for the pattern to repeat along the x and y coordinates and result in the decreasing size of the squares. To make it more visually appealing, the random function has been used within fill() creating a colorful effect.

https://editor.p5js.org/rujulm/sketches/K0Ubc62Yn

I decided to further explore the functions with something more challenging. This is when I thought of trying to replicate the design of the geometric panels of the Al Bahar Towers in Abu Dhabi. Built to combat the harsh weather in the UAE, these computerized panels are built with a technology that allows them to detect the position of the sun and open and close accordingly, thus reducing the amount of heat absorbed.

To create a similar geometric design, I began by sketching a pattern based on a 400×400 canvas size. This helped me estimate the coordinates to get the exact shape.

The entire design has been made using a combination of triangles of different sizes. I have used two separate nested loops to implement the inversion of the triangles.

for (let x=0 ; x<=width ; x+=100){
    fill(209,192,20,mouseX);
    
    for (let y=100 ; y<=height ; y+=100)
      //The if condition is used to alter the coordinates of the triangles depending on the row
      
      if (y==100 || y==300){ //executes for first and third row
        triangle(x-50,y,x,y-100,x,y-30);
        triangle(x+50,y,x,y-100,x,y-30);
        triangle(x-50,y,x,y-30,x+50,y);
      } else { //executes for second and fourth row
        triangle(x,y,x+50,y-100,x+50,y-30);
        triangle(x+100,y,x+50,y-100,x+50,y-30);
        triangle(x,y,x+50,y-30,x+100,y);
      }
  }
  
//The second for loop given below works exactly like the first one and has been used to create the inverted triangles
  
  for (let x=0 ; x<=width ; x+=100){
    fill(205,175,64,mouseX);
    
    for (let y=100 ; y<=height ; y+=100)
      if (y==100 || y==300){
        triangle(x+50,y,x,y-100,x+50,y-70);
        triangle(x+50,y,x+100,y-100,x+50,y-70);
        triangle(x,y-100,x+50,y-70,x+100,y-100);
      } else {
        triangle(x,y,x-50,y-100,x,y-70);
        triangle(x,y,x+50,y-100,x,y-70);
        triangle(x-50,y-100,x,y-70,x+50,y-100);
      }
  }

To make it more realistic, I wanted to include both the closed and open images of the panels. I have done this using the built-in Boolean variable mouseIsPressed, such that when the mouse is clicked a different view of the building is visible, as would be seen once the sun sets. I have also used the mouseX variable to change the opacity of the triangles, giving the panels a glistening effect.

I thoroughly enjoyed doing this assignment and feel that I have achieved what I had initially imagined. Reflecting on the possible improvements, I want to discover new ways to include more interactivity such that the user can choose the panels to be closed using the movement of the mouse.

Concept:

When I saw animation and art I thought of how a point from a pen-ball or a dot from the tip of a brush can be manipulated to create beautiful artworks so I decided to recreate this.

Highlight:

Deciding on the artwork was challenging until I thought of my name. I don’t know where I would end with this brush tip but I would love for my first work of art to be my name. I decided to create a kind of intro to my first assignment using this idea.

Every artwork is made of lines and curves so I had to discover how to use my brush tip to create these. The line creation was very simple but the curves was a challenge. Initially I was thinking of just drawing curves as a whole using the arc function but then that would mean I am going against my words to use the brush tip idea. 

After watching some videos (https://youtu.be/uRd5iKBpsUA?si=4025fr-zmeL18zha) I was able to find a way to make this possible. This part of the art is what took most of my time. After getting these, I started to draw. 

if(r4==true){
     a=220+sin(angle3)*55;
     b=290+cos(angle3)*80;
     circle(a,b,10);
     angle3+=speed;
     if(a<225){
       r4=false;
     }

 

The most challenging part of my work was joining a line and curve as I had to calculate the angle but this made me appreciate my work the more because, a slight change in the angle ruins the whole piece. 

Art:

At the end of the intro I just decided to add my portrait but spice it up a bit by adding some form of simple animation.

Reflection and Ideas for Future Work:

After completing my first artwork, I plan to draw something else using my brush tip . I hope to find better was of drawing curves such that slight change in angle will not affect my work and maybe add the element of randomness to see the unique arts that will be created by the computer.