“LIFE” (Assignment 2)

CONCEPT

After my first Thursday lecture, I had a concept of the work I wanted to create. I thought it would be the most straightforward piece of art I would make. But it wasn’t until Saturday that I realized how wrong I was.

On Saturday, I had the pleasure of visiting the Arts Center performance called “NOWISWHENWEARE”. It made me think a lot about life and our purpose as humans in general. To make you more familiar with the concept of the installation, there were more than 3 thousand lights all forming different shapes in complete darkness, where you can’t even see a hand near your face. It feels like you are entering another dimension where you can explore a new fabric. Hundreds of lights surround you while you’re listening to the mysterious voice talk about the lives of human beings.

All of these things made me think about telling the story of a human being through a piece of art.

THE SKETCH & DESCRIPTION

The sphere in the middle symbolizes the mind, and the circles symbolize the events and things happening to us. The more experiences we have, the more the sphere grows. But as we experience more and more new things, our sphere has less and less room to grow as most of the concepts seen in everyday life become very familiar to us.

Furthermore, in my work, I wanted to combine either randomly created shapes or those that followed the order. Just like in our lives, there are things we have control over, but at the same time, there are things that are out of our control. Nevertheless, they are essential parts of our experience.

HIGHLIGHT OF THE CODE

function net () {
  
  translate(350, 350);
  noFill();
  stroke('white');   
  
  rotate(angle_n)
  angle_n = angle_n + 1;
  arc(random(420,500),random(-500,700),600,600,0,360); 
  arc(500,0,600,600,0,360); 

}

It may not look complicated, but it took me a while to understand how the rotate function works. And funnily enough, it was one of my failures when I created a net of randomly created arcs, which later helped me create this project.

Reflection

This project helped me create a piece of art I would never have thought of in the first place. Moreover, I noticed how much influence things we experience (in my case, the Arts Center installation) can have on the way we produce art. Maybe it gives us a lens to look through, or maybe it just becomes a source of inspiration.

This is my first assignment after joining the class, and I feel that there are lots of things for me to learn and explore, which will help create more and more sophisticated projects.

 

 

 

Reading Reflection _ Week#2

Casey Reas’s lecture brought many new perspectives to my thought process when it comes to creating art through technology. It made me wonder in what ways would it be helpful to humanity to create such art forms. What particularly drew my attention was the artwork inspired by Valentino Braitenberg’s book, as shared by Reas. While the core concept of this work isn’t within my primary focus, it serves as a significant part of my ongoing quest to uncover the potential intersections of science and interactive technology. This presentation left a lasting impression on me, fueling my enthusiasm to experiment further with the tools at my disposal. It offered valuable insights into the functioning of the nervous system, highlighting the intricate interplay between order and chance.

Reas’s discourse significantly reshaped my perspective on digital art. I used to believe that art required a profound underlying message or purpose, that artists should embark on their creative journey armed with a well-defined plan and a clear destination in mind. Now, I am inclined to see art as an entity that need not be burdened with the obligation of conveying a deeper meaning. This newfound perspective grants artists the freedom to explore novel artifacts and unconventional methods, allowing art to emerge organically and inviting diverse interpretations. I would be contradicting myself by saying art becomes a canvas for personal experiences and individual thoughts that reflect how each of us is uniquely wired to perceive things differently, because how authentic and personal are digital art works? And how much can we interpret if the art piece is too abstract and lacks symmetry?

This brings me to the discussion of Fractal invaders in Reas’s lecture. While the demonstration initially unfolds as a display of pure randomness, it gradually reveals elements of symmetry and duplication. These emerging images prompted our imaginations, compelling us to find meaning in what was unfolding before us. This particular instance is just one among many that reinforced my belief that certain art projects don’t necessarily rely on strict rationality. Even if a piece of art doesn’t lead us directly to a specific thought or idea, it challenges us to construct our own interpretations and derive meaning from it but that’s not always the case.

Furthermore, Reas’s presentation challenged me to delve deeper into the artist’s unique vision. However, to what extent does randomness with no vision can be considered art ? Some art works that are considered abstract or some works that accidentally became a piece of “art”, make me contemplate on whether or not generative art is considered as an art project created with intention and authenticity.

Casey Reas Chance Operations Reflection.

Casey Reas’ speech on chance operations highlights randomness, chance and order in art and explores the interplay of chaos and control in the creative process. He discusses how incorporating randomness and chance elements into art can lead to unexpected and exciting outcomes, challenging traditional notions of artistic control. He introduces chance in art as a form of chaos and destruction of an order society and this resonated with me because it expresses the escape I feel when I do interactive coding through IM as opposed to standard coding in Computer Science. I get to “replace logical nonsense of men with logical nonsense”. This chance in art opens pathways that allow for you to take full creative control in your coding, and it is heavily emphasized in his speech through his countless mentions of randomness which is a function that allows for imprecision and parametrized change to create art.

Reas also highlights the importance of setting up systems and rules within which randomness can operate. This controlled chaos allows artists to introduce an element of surprise and unpredictability into their work. It’s about relinquishing some level of control and letting the process itself become a collaborator in the creation of art.

On the other hand, he also touches on the idea that order can emerge from chaos. Through precision and exploration of the grid, even when randomness is a part of the creative process, patterns and structure can arise, creating a balance between chaos and order.  Referred to as order in art, though not the exact opposite of chance in art, this dynamic tension between randomness and order can result in art that is both visually striking and conceptually rich.

In short Casey Reas’ speech highlights the value of embracing randomness and chance as tools for artistic exploration and encourages artists to break free from rigid constraints and discover the beauty that can emerge from the unexpected.

Week 2: Chaotic Spirals of Randomness

Concept and Approach:

I have always been fascinated by spirals. I remember books on ‘mental illusions’ that would often consist of spirals that looked procedurally generated, but could seemingly trick you into believing anything. My work for this week is inspired by such spirals – but I wanted to go beyond the procedurally generated symmetries and explore combining movement, elements of randomness, and interactivity with such spirals.

A mental illusion eliciting spiral.
My initial static spiral made of circles and squares

The code design and the movement itself were pretty simple. Early on, I decided to have my spirals be made of circles and squares that would move. Later, I would randomly vary whether the next generated shape was a circle or square, and the size/color of each circle/square. I used Perlin Noise for colors so they would change relatively smoothly. Later, I also added spirals to the four corners of my canvas and made their colors change based on mouse clicks.

Still, after all this, perhaps one of the best decisions I took was making sure I kept my editable parameters as global variables which could be changed easily. Once I had my spiral effect in place, I started tweaking the ‘distance’ and ‘increment’ variables that tweaked the shape of my spiral – and chanced upon an artwork which I found even more satisfying than my initial vision!

Before tweaking the parameters.

Highlights:

My favorite part of the code has to be the actual calculation for having the shapes move in a spiral. It’s actually based on simple math. To be precise, when covering an angle from 0 to  theta across a circle. The new coordinates will be center_x+radius*cos(theta), center_y-radius*sin(theta). Moreover, since it’s a spiral we also increase the radius constantly.

for (let i = 0; i < shapes.length; i++) {
    let shape = shapes[i];
    offset+=0.1
    let x = shape.r * cos(shape.theta);
    let y = shape.r * sin(shape.theta);
    fill(shape.redval,shape.greenval,shape.blueval)
    if (shape.isCircle) {
      ellipse(x, y, shape.size);
    } else {
      rect(x, y, shape.size, shape.size);
    }

    // Update position
    shape.theta += increment;
    shape.r += distance;
    shape.r+=noise(offset)*0.1;
  }

Reflections and Future Work:

I think this project has a lot of scope for improvement. Firstly, the actual code is just the same loops duplicated multiple times. The code thus lacks any sort of modularization. This can be improved relatively simply and will enhance the readability and editability of the code by several times.

Second, there are several other interactive elements that can be added to the project. For example, the loop may get tough to look at for a longer period of time – so, a mouse click may be used to stop all the motion.

Lastly, even though my theme for this week’s assignment was ‘chaos’ I believe I can still improve this project’s aesthetics significantly, if I spend more time with it!

Assignment 2 – “Abstract art”

My concept

My concept was to create my version of abstract art of shades of blue, with one shade of maroon to counter the other colors. As I became more accustomed to coding and following what I’ve learned during class, I tried to implement the bouncing ball element, also added the concepts of conditional statements such as loops and if statements.

I tried to find a way that I could make the dark turquoise ball leave traces of its position on the canvas, but i was not successful in that, therefore I eventually just left it as it is.

A highlight of some code that you’re particularly proud of

I am proud of this part of my code which I am proud of because I was having trouble with how to make the ball bounce back, I eventually understood the if statement and how it works, as it was initially challenging for me.

   //to make the ball bounce back the opposite side
    
 if(circleA < 0 || circleA > width) 
    speedA = speedA * -1;
     
  }

  //  to make the ball bounce back the top to bottom
  
{
    if(circleY < 0 || circleY > height) {
    speedY = speedY * -1; 
      fill(25,23,22);

 

Embedded code

// state
let circleX = 100;
let circleY = 0;
let speedX = 10;
let speedY = 8;
let circleA= 100;
let circleB=400;
let speedA= 4;
let speedB= 8;
let a = 50;



function setup() {
  createCanvas(450, 450);
}

function draw() {
  
  background(204,255,229);
  fill(90,153,153)
  rect(250,202,300);
  noFill();
  fill(210,255,255);
  rect(0,202,300);
  noStroke();
  
  {//for loop
    for (let x = 0; x < 8; x += 2) { // same as x = x + 2
     fill(229,255,204)
    circle(a * x + 25, height / 2, a, a);
    circle(width / 2, a * x + 25, a, a);
  noStroke()
    }
  }

  // Frame based on state
  fill(0,102,102) //color of circle X,Y
  circle(circleX, circleY, 50);
  fill(102,0,0); //color of circle B,A
    circle(circleB, circleA, 50);
    fill(255,202,204)

 

  
  circleX = circleX + speedX;
  circleY = circleY + speedY;
  circleA=circleA+speedA;
 


  
  //make the ball bounce from left to right
  {
    if(circleX < 0 || circleX > width) 
    speedX = speedX * -1; 
  }
    {
      //to make the ball bounce back the opposite side
     if(circleA < 0 || circleA > width) 
    speedA = speedA * -1;
     
  }

  //  to make the ball bounce back the top to bottom
  {
    if(circleY < 0 || circleY > height) {
    speedY = speedY * -1; 
      fill(25,23,22); 
    }
    {
      
     
    }
}
}
  • Reflection and ideas for future work or improvements

What I think is most important at this moment is that I have to have more knowledge on how i can transform the ideas in my head into reality through coding. This assignment took more time than it should have because at first, i was partially confused about how things work and how they are going to be executed. Practicing and understanding fully how to write more precise and cohesive coding would be my goal to reach, nonetheless, i enjoyed creating this assignment.


Editable link:

https://editor.p5js.org/mka413/sketches/r-RMAvSOJ

Viruses are everywhere

Concept

As I was looking through the ProgrammInformation21_PI21, I came across this piece by Felder mit Strichkonzentrationen, which instantly reminded me of the bacteria that surround us.

I decided that I want my piece to represent the issue of the abundance of viruses that has been relevant for us since 2019. I wanted to show the random movement of viruses in the air that we breathe and the water that we drink and use every day. I believe that it is very important to be aware of this and never forget about our safety and the safety of others.

Approach and Code Highlight

I wanted to make a relatively minimalist artwork using simple shapes. I decided on one particular shape which is a circle and used it to represent viruses, air, and water molecules. As air and water are molecular structures I decided to show them in a grid form, by using nested for loops that we learned in class. For water molecules, I used the same method but changed the color, opacity, and the arrangement of circles next to each other, so they would overlap, creating a grid pattern with no negative space. For the background to change as I pressed the mouse, I used if statement with a variable mouseIsPressed and an else statement, so that the grid of white circles would show anytime I did not press the mouse.

To create viruses, and specifically to show their movement, I decided to try a new method of creating random circles on the canvas. To know more about it, I watched this video by The Coding Train. As it was hard for me to understand how to create for loops, I think this part of the code is great. I used random function and manipulated variables of the circle to place them randomly on the canvas. I also decided to write the code fully in function draw(), so it was possible to show the movement of the virus circles.

// randomly arranged overlapping green circles

  frameRate(8);

  for (let circles = 0; circles < 75; circles++) {
    let xPosition = random(width);
    let yPosition = random(height);
    let radius = random(1, 50);

    fill(133, 182, 27, 200);
    noStroke();
    circle(xPosition, yPosition, radius);
  }

Reflection and Future Thoughts

I am proud that I was able to understand how conditionals work, specifically the else statement, which in combination with both would help me change the background of the piece. This was one of the problems I encountered in my work. It took me some time to figure out the order of where to put a conditional and a loop. I need to look at more examples of codes to understand better how to combine them.

Nevertheless, for this homework, I achieved the goal I had set for myself with success. I was able to effectively represent my idea using the combination of both simple shapes and loops/conditionals. As I was trying to represent particles of air, water, and viruses on the 2D surface, I now think it would be very interesting to see how to create the same artwork in 3D space.

 

Reading Reflection – Week 2

Casey Reas’ Eyeo talk on chance operations

This talk challenged my belief that code is one of the opposites of nature. I used to think that people could employ code in an attempt to replicate nature: humans (“natural” organisms) ordering a computer (an “unnatural” object) to create art. However, Reas’ talk made me realize that perhaps code and nature could operate on the same level. They both operate on certain core principles to create patterns that are then interpreted by humans as art. There is not so strict of a distinction between the natural and the artificial. This concept reminded me of Donna Haraway’s Cyborg Manifesto, in which she blurs line between humans and non-human organisms, and between humans and the technologies/systems we use.

(the top line is my previous belief, and the bottom line is the new concept introduced by the talk)

I think that’s Reas, as a digital artist, is biased towards portraying his own profession in a positive light, in the sense that he is in a position to make meaning out of abstract art. Some of the examples he showed, like the picture created by an artist dropping pieces of paper on the floor and leaving them there, made me wonder if such pieces are only considered art because of who created it and who is interpreting it. Both the artist and the commentators are likely already established within the rather gate-kept art world. If a child in kindergarten dropped some pieces of paper on another piece of colored paper and then painted the result, I doubt that people would pay the same respect in their analysis — they’d probably tell the child to clean up the floor. This points to power dynamics in the creative world, in which people with certain identities are more likely to be taken seriously. I am not trying to discount the importance of artist’s intention and concept, only posing the question: are certain artworks only considered art because the people creating them are already seen as artists?

I also want to comment on Reas’ latest project trying to reveal the algorithmic structures behind artworks. I feel that there is an ideological undertone throughout the whole talk that we should aspire to gain an algorithmic understanding of the world and of art, which I don’t know if I agree with. Especially with the rise of AI and the way it is impacting artists’ rights and pay, it is worthwhile to think about how computers’ ability to emulate randomness may come with both benefits and consequences.

Reading Reflection – Week 2

Randomness as an art concept

“Chaos is what existed before creation” says Casey Reas. But it wasn’t until the late 19th and early 20th centuries that chaos became a tool of art creation once again.

For me, the most important step on the way to transitioning into a new era of art was the creation of suprematism, one of the main developments in abstract art.

Kazimir Malevich: Study for Décor for Victory Over the Sun (1913)

"Study for Decor for Victory over the Sun" Kazimir Malevich, 1913

Kazimir Malevich: Suprematist Composition: Airplane Flying (1915)

"Airplane Flying" Kazimir Malevich, 1915

The most easily noticeable signs of suprematism are simplicity and reduction, and while trying to create some art in p5, I noticed that the most unexpectedly fabulous things are created when using the most primitive shapes. Therefore, I believe it’s not about the shapes; it’s about their order that creates a canvas.

Randomness in music

As a pianist, I want to shed light on the application of randomness in music. It’s called aleatoric music. It uses the principles of randomness and variance in creating music pieces.

But unlike digital art, which can be fully created by the principles of randomness, in music, the musician has control over the performance. Human nature still makes us more predictable; therefore, I believe it’s nearly impossible to achieve absolute randomness in action for humans.

If you want to read more, click the following link.

Loop Portrait Assignment 2

This project was inspired by the grid-like patterns formed by concrete tiles around campus, which sometimes appeared curved when seen from a particular angle.

This resemblance to gentle ocean waves led me to delve into generative art. A search for “moving loop art” introduced me to Perlin noise flow fields, which were a significant source of inspiration for this creative endeavor. Combining these elements resulted in the generative art piece I created.

To start, I created a grid of squares using a simple for-loop. My aim was to make this static grid interactive, giving it the appearance of waves when the mouse cursor passed over it. Achieving this effect was both captivating and challenging. To mimic the motion of waves, I used trigonometric functions like sine and cosine. This part of the code was particularly interesting because it required me to use insights from sine and cosine graphs to estimate how each square should move.

The starting position of the circular motion of the squares would change direction depending on the mouse’s position, either clockwise or counterclockwise. The combination of Perlin noise-inspired flow fields and trigonometric functions brought the concept to life. It created the illusion of waves moving through the grid of squares as the mouse moved. The interaction between sine and cosine functions, along with Perlin noise-inspired angles, resulted in a visually captivating effect, making it seem as if the squares were moving together in a harmonious wave-like dance.

An essential part of achieving this, was a piece of code I referred to here. It provided helpful guidance for developing this project. The highlight of my code then follows below:

 
//starting position based on mouse position
const xAngle = map(mouseX, 0, width, -4 * PI, 4 * PI, true);
const yAngle = map(mouseY, 0, height, -4 * PI, 4 * PI, true);

//varying square positions
const angle = xAngle * (x / width) + yAngle * (y / height);

//circular motion for each particle
const X = x + 10 * cos(2 * PI * t + angle);
const Y = y + 60 * sin(2 * PI * t + angle);

square(X,Y,50);

Here’s an embedded sketch of my work:

The color of the squares was another dynamic aspect of the artwork. It changed in real-time based on the mouse cursor’s position, creating a colorful and interactive visual experience. This dynamic color variation added depth and engagement to the piece.

Reflecting on this artwork, it’s a variation of what I initially had in mind. Although I didn’t have precise expectations, I had a general concept. In future iterations, I plan to explore individual squares with different colors, creating a generative storytelling narrative. Perhaps the art could start with a single square and gradually build into a full canvas, conveying a visual story. Regardless of the directions I may explore in the future, I take pride in what I’ve accomplished with this piece. It fuels my excitement to continue learning and applying my newfound skills to real-life works of art.

Assignment 2 _Beauty in Randomness

Concept:

Creating interactive and artistic pieces of digital art seemed interesting to me. I cannot even imagine the endless possibilities when art and technology are mixed. In this assignment, I wanted to explore the P5JS tools and functions. I did not have a specific idea of what I wanted the outcome to be, instead, I sought to embrace the concept of randomness and let it guide my exploration. It was a challenge for me to start coding without having a specific idea, but when I started the code, I began to visualize and unwind the concept of this assignment.


I found inspiration in the work of the artist Piet Mondrian, who is a pioneer in modern art. However, I wanted to create an interactive element to it. I wanted to recreate the feel I get when I look at his art, in the sense that it can be interpreted and connected within a more individualized sense.

Highlight:

Before settling on one final idea, I tried many others one of which is to create random shapes using the startShape and endShape functions. They were fun and all but I did not know how I could embed for loops and conditionals into the code. As a result, I tried another approach, instead of focusing on the shapes I focused on the loops and conditionals and then added the shapes that fit best.

I began with colors. I declared some variables and gave them some random values. Then I decided to set a size for the rectangles. I also created my function for the line on the left. For it, I had to declare some variables too for its speed, direction, and position. What was challenging was drawing the colorful rectangles because I had to experiment a lot and use the push and poll, rotate, keyTyoed, and translate functions. Of course, I learned about those by watching a lot of videos and reading the reference page. I used nested loops to create the rectangles with random colors. I wanted the rectangles to appear when the mouse is pressed so I also created a conditional.

for (x = width; x > -size * 4; x = -x - size) {
    for (
      y = height;
      y > -size * 4;
      y = y - size
    ) //   when I add the + the code was cracking so I decided to add the - sign instead and it worked! Here y starts at the height of the canvas and with each iter,ation it decreases the size. the same happens to tvaluevlaue (width)
    {
      fill(random(R, R + 190), random(G, G + 190), random(B, B + 190));
      // the lines sets the colors for the rectangles in random values up to 190
      push();
      //       the push and pull temporarily changing the effecting the rest of the piece.

      if (mouseIsPressed) {
        translate(x, y);
        rotate(random(0, 45));
        rect(0, 0, size * random(1, 4), size * random(1, 4));
      }
      //       here the x and y values are randomly original their origional position
      pop();

 

The stars were a last touch to the image, and I liked the texture they gave. I also used this part of the code in my previous assignment because it is so pretty. This time I made it move.

Reflection and ideas for future work or improvements:

Getting the idea was a little challenging. It took me some time to figure out the logic for the x and y values in the loops. As a beginner in coding, I think I was able to learn a lot of things with this assignment, especially with the previous failed attempts. I hope that for future assignments I will have improved my coding abilities to do something better than this.

Resources:

https://www.youtube.com/watch?v=ig0q6vfpD38