Assignment 2: Digital Art

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.

Pixel Noise Vector. VHS Glitch Texture TV Screen. (683656)

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.

Week 2 – Reflection

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.

Assignments 2: Day and Night

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

 

Response post – Casey Reas

Prior to watching Casey Reas’ eyeo2012 presentation, the interplay between structure and randomness in art hadn’t been a central focus for me when working on a new piece. However, his ideas really intrigued me and have reshaped my perspective on design. As someone with a knack for creative design, I’ve often contemplated the idea of subtly infusing randomness into my work, though it had largely remained an unexplored concept until now. Upon reflection, I’ve come to realize that I’ve instinctively incorporated elements of randomness into my creative process on numerous occasions, often without conscious intent.

Reas’ ideas really illuminated the potential power of putting together structure and randomness as tools for artistic expression. They have pushed me to think about how “controlled chaos” could enhance the richness of artistic pieces. One of my favorite visual examples is this untitled piece by Jean Arp:

This juxtaposition of ordered geometric shapes against what seems to be a more chaotic composition is what really captured my interest. I think the piece does a very good job at illustrating the idea of controlled chaos and finding the right balance between chaos and structure.

My main takeaway from Reas’ presentation revolves around the idea of incorporating subtleties of randomness within my work and finding the right balance between this randomness and intentionality within each piece which I believe, ultimately leads to more dynamic outcomes.

 

Reading Reflection – Week 2

After watching Casey Reas’ talk at the 2012 Eyeo festival, I was left questioning certain beliefs I held. In my mind, the distinction between digital and organic systems was like night and day. For example, Casey Reas’ earlier work is what I would have associated with computer graphics. Before watching this video, we had to make some computer graphics ourselves, and all of the ideas that came to my mind had one thing in common: order.

Casey Reas’ Early Work

While trying to work on the second assignment, all I kept thinking about was how to recreate using code the vision I had in my mind. Not thinking of generating something I had no control over makes me realize that I was limiting myself to the idea that computer graphics had to have order.

Casey Reas’ Early Organic Work

Secondly, after watching Reas’ talk, I’m questioning what exactly it means to be alive. When he shows the grid of randomly generated pixels and adds symmetry to the randomness, suddenly faces and things I associate with living beings start to emerge. I do feel an urge to resist this association. Maybe it’s because my definition of life is tied with organic matter. I don’t have the answer to that yet.

Symmetry – Casey Reas

However, when he shows the paths of vehicles and mentions that these would be perfectly similar to one another if not for the error, it made me think: is that not what life is? Living things fail and some win. Sometimes through sheer luck. Without random mutations changing us, we could have been single-celled organisms floating across the oceans. However, all the complexity that we see today was given rise to through that little bit of randomness causing some helpful instability.

With this in mind, I think I’ll let some randomness into my upcoming work. I’ve been trying to mold it to fit my vision so far, so it will be a fun change to incorporate an element of uncertainty into it.

Sources

Casey Reas – Eyeo 2012

Connecting the Dots in my Memory

Concept: My artwork depicts dots that may be interpreted as brain cells or fragments of a scattered memory. The lines that link these dots essentially show how I feel our brains attempt to connect the dots or connect the storyline of a memory. It’s an interactive simple project where the user can use the mouse to click to pause and see how much memory was recalled. One could also say that these dots are parts of different memories and they are causing internal chaos trying to link a specific experience, where some parts are distancing and some are getting mixed up. 

 

 

 

 

 

 

Code: The code I’m proud of is the nested loop that allowed me to connect the lines from the dots. I was struggling at first because I had to consider that “cells” is an array and I had to adjust the code accordingly to make it work.

function connectCells(cells) {
  let maxConnections = 10; // Maximum number of connections per cell

  // Loop through each cell as the source cell
  for (let i = 0; i < cells.length; i++) {
    let connectedCount = 0; // Counter for the number of connections made by the source cell

    // Loop through all cells again to consider them as potential target cells
    for (let j = 0; j < cells.length; j++) {
      // Ensure that the source cell is not the same as the target cell
      if (i !== j) {
        // Calculate the distance between the centers of the source and target cells
        let d = dist(cells[i].x, cells[i].y, cells[j].x, cells[j].y);

        // Check if the cells are close enough to be connected, and if the source cell
        // has not reached its maximum allowed connections
        if (d < 50 && connectedCount < maxConnections) {
          stroke(255, 150, 150); // Set the line color
          line(cells[i].x, cells[i].y, cells[j].x, cells[j].y); // Draw a line between the cells
          connectedCount++; // Increment the connection count for the source cell
        }
      }
    }
  }
}

Reflection: For this task, my initial brainstorming revolved around the concept of producing a blurred image to symbolize a hazy memory. However, I felt that executing this idea might be somewhat challenging at this stage. Nevertheless, I am content with my final piece, although I believe it could benefit from additional refinements to achieve a greater level of abstraction and realism in my eyes.

Reference:

https://stackoverflow.com/questions/41719843/connected-balls-not-working-p5-js

 

 

Week-2.Assignment – lines;

When I first began brainstorming an idea for this assignment, I was overwhelmed looking through all the other elaborate projects my classmates and other students were able to come up with. I felt as though I was lost and didn’t know enough to create something that I actually liked. I started my exploration by playing around with generating lines using a for() loop and allowing the background and stroke to change color according to the cursor position. This was my first attempt at this assignment:

I found the project to be very simplistic, yet the patterns created by the overlapping lines create a beautiful sense of symmetry, and the gently changing colors create stark contrast and desaturation at times.

Nevertheless, as I kept browsing through other projects, I felt as though I hadn’t done enough.

I spent a while playing around with variables and the loops, randomly. I think it’s only fair to say that trying things randomly leads to unexpected and random results, however, those results can be just what you want.

I began by using a similar loop structure, but now generating lines to create a pyramid in the center of the canvas. The main concept I wanted to convey was my feelings of being lost and confused. I felt as though those who knew more than I did found it much simpler and knew how to keep everything fair and organized. I transformed this concept into my assignment. As the cursor moves, representing ‘knowning less’ – the lines represent chaos and fear that many of us experience. Similarly, if the mouse is pressed, an organized array of circles turns to chaos.

Ultimately, the part I struggled with most was adjusting the loops so they don’t cause P5 to crash once I add them to the draw function. Here is a part of my code I am proud of:

function chaos(s) {
  if (status === 0) {
    for (let y = 0; y < height; y = y + 40) {
      for (let x = 0; x < width; x = x + 40) {
        offset = offset + 0.1;
        line(0 + mouseX, x + noise(offset) * (s/2), y + noise(offset) * (s/2), height);
      }
    }
  } else {
    for (y = 0; y < height; y = y + 20) {
      for (x = 0; x < width; x = x + 20) {
        offset = offset + 0.1;
        noFill()
        circle(y + noise(offset) * (s/20), x + noise(offset) * (s/20), mouseY/5);
      }
    }
  }
}

I created a separate function called chaos, which also had an argument input (s), which I determined to be mouseY representing the height of the cursor.

Here is my final project:

Looking forward, I am planning to learn how to better optimize my code, especially loops, and I am excited to see what I will be able to do with the functions now that I have a basic understanding of how useful they can be.

Sources:

Coding Train Videos – 5.1, 5.2, …

P5JS – Reference Page

Assignment 2- Hearts

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.

Week 2 – Reflection

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.

Assignment 2 – Reflection

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.