Month: September 2023

Assignment 3- “Bubbles” code

Concept:

This generative artwork will consist of colorful bubbles that move randomly on the canvas, changing color and size as they go. Ive used Object-Oriented Programming (OOP) principles to create a Bubble class, each representing an individual bubble.

Description:

  • I created a Bubble class to represent each bubble. The class has properties like x, y, diameter, col (color), speedX, and speedY for position, size, color, and movement.
  • In the setup() function, Ive created 10 initial bubble objects and added them to the bubbles array.
  • In the draw() function, Ive update and display each bubble in the canvas.
  • When the mouse is pressed (mousePressed() function), a new bubble is created at the mouse position and added to the array.

Problems I ran into:

Creating a class and working with arrays was quite challenging for me as a beginner while I was developing the “Bubbles” project 

At first, the concept of Object-Oriented Programming was a bit overwhelming. I had to wrap my head around the idea that a class is like a blueprint for creating objects. It felt like creating a set of rules for what each bubble should look like and how it should behave.

Implementing methods within the class, such as move() and display(), was another hurdle. I had to understand how these methods would change the bubble’s properties and behaviors. It felt like writing a set of instructions for each bubble to follow.

Working with arrays was entirely new to me. Understanding how to create and manipulate arrays, like let bubbles = [];, was a fundamental but challenging concept to grasp.

Putting instances of the Bubble class into the bubbles array was confusing initially. I had to get the hang of adding objects dynamically to an array and keeping track of them.

Despite the initial challenges, I found that practice, patience, and referring to documentation and tutorials helped me overcome these difficulties gradually.

One part of the “Bouncing Bubbles” code that I’m particularly proud of is the move() method within the Bubble class.

move() {
    
    this.x += random(-this.speedX, this.speedX);
    this.y += random(-this.speedY, this.speedY);

    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
  }

 

I’m proud of this code for several reasons:

  • Random Movement: The bubble’s movement is randomized. It adds an element of unpredictability and liveliness to the bubbles’ motion, making them feel more like bouncing objects rather than following a predictable path.
  • Constraining within Canvas: I ensure that the bubble stays within the canvas by using the constrain() function. This prevents the bubbles from disappearing off the screen, which is crucial for maintaining a visually pleasing animation.

Reading Reflection – Week 3

The concept of interactivity, as defined by Chris Crawford, resonates with me. In my view, interactivity involves an ongoing dialogue between the user and the medium, where both parties actively communicate, process information, and respond to each other. It’s a collaborative effort that draws inspiration from each other’s actions and words to create a compelling experience.

While caring for a plant can be considered an interactive experience in terms of attentively responding to its needs and enjoying the rewards of a thriving home, there is a counter-example to consider. Some argue that a plant only reacts to whatever substances are provided to it and does not necessarily interact with the caregiver beyond those basic responses. In this perspective, the plant is seen as a passive recipient rather than an active participant in the interaction.

This point highlights the challenges designers face when incorporating interactivity into their work. If the only meaningful interactions can be achieved with other intelligent life forms, it raises questions about whether designers should focus on interactivity or on creating deep connections and eliciting emotional reactions to their works. From this perspective, if a designer’s work is able to emotionally resonate with the audience and foster a deep connection, it may be more satisfactory than merely aiming for a certain level of interactivity that might ultimately detract from the intended purpose.

In summary, interactivity involves active dialogue and reciprocal engagement between the user and the medium. While caring for a plant may have limited interactivity, experiences such as having a pet exemplify the dynamic, engaging nature of true interactivity. However, when it comes to computer art, it raises intriguing questions about what it would truly mean to make such art interactive.

Should interactivity in computer art be limited to basic responses, or should it aim for a deeper connection that elicits emotional reactions from the audience? Can computer art truly engage users in a meaningful dialogue, or does it fall short in replicating the richness of interactions found in human-to-human or human-to-animal relationships? These questions challenge us to reconsider the essence of interactivity in the context of computer art and explore new possibilities for creating genuine interactive experiences through artistic mediums.

Ultimately, the definition and achievement of interactivity in computer art require thoughtful exploration and experimentation. It prompts us to question our assumptions about interactivity and consider how computer art can transcend its limitations to establish meaningful connections and engage users in profound dialogues that go beyond mere surface-level interactions.

Assignment 3 – Artwork Using Object-Oriented Programming

Concept

Assignment 3 aims to utilize object-oriented programming to generate artwork. Following my work in Assignment 2, which already employed object-oriented programming, I decided to address the bug present in the previous code, which caused tiles to glitch, and introduce interactivity by allowing for tile rotation.

I determined that tile glitching resulted from the repetitive displacement and resetting of tiles. My next step was to establish a condition in which no action would occur, leaving the tile at rest. After tinkering with the code, I found the best way to resolve the glitch was to check if one of the cursor’s coordinates matched those of a tile, and if so, refrain from performing any translation.

Subsequently, I worked on enabling tile rotation when they were within a certain range of the cursor. The idea was to use the translate() and rotate() functions to make the mouse cursor coordinates the reference for rendering and rotation. My initial attempts were unsuccessful due to a lack of consideration for the order of operations in the code.

 

Highlight of Code

The highlight of my code lies in the draw function. I utilize a flag called this.event to assess whether the tile is within the specified distance of the cursor and employ a decision structure to determine how to display the tile. If it falls within the range, mouseX and mouseY serve as the reference points instead of the origin (0, 0). The tile is then rotated by an angle assigned when creating an object of the Tile class.

// render function for the tiles
  draw() {
    this.update();
    noStroke();
    fill(this.r, this.g, this. b, ALPHA);
    
    // decision structure to determine how tiles are rendered
    if (this.effect) {
      push();
      
      // makes coordinates of the cursor reference for drawing to canvas
      translate(mouseX, mouseY);
      rotate(this.rotate_angle);
      rect(this.x, this.y, this.breadth, this.length);
      
      pop();
      
      // setting coordinates of Tile to initial values with an offset
      this.x = this.xBeforeDisplacement + random(-60, 60);
      this.y = this.yBeforeDisplacement + random(-60, 60);
    }
    else {
      rect(this.x, this.y, this.breadth, this.length);
    }
  }

Reflection and Ideas for Future Work:

While I accomplished some of the tasks I set out to do, the end result did not meet my creative expectations, which is more a reflection of my creative challenges than issues with implementation. In future work, I intend to dedicate more time to creating pieces that aesthetically please me rather than focusing primarily on technical implementation.

 

week3.assignment – fireworks!

When I first began brainstorming the possibilities of what I could create with object-oriented programming, my creativity was lacking. However, one evening, as I was looking through some old videos, an idea struck me. Since this assignment requires us to create objects within an array, I thought that creating fireworks would be a perfect opportunity for that.

Since I have no experience creating a class in p5, or in coding in general, I decided that it would be best for me to plan out each specific action I would need and draft a handwritten ‘plan’ which can be seen below:

Ultimately, this assignment has been the most challenging out of all the previous ones. This resulted in me spending a lot of time looking for resources to help guide me through the challenges of making everything work. What I found most confusing was creating the object, adding it to an array, and then removing it. I struggled a lot while trying to create a for loop which would add an object to the array when the mouse is clicked and then remove it from the array when the firework explodes.

Nevertheless, I was able to figure out an efficient method to implement my ideas into code functionally. Here is the most tricky code I have written so far:

function mouseClicked() {
  let newFirework = new Firework(mouseX, mouseY); //creates new object with cursors x and y parameters for the objects startX and startY variables.
  fireworks.push(newFirework); //add new firework object into array
}

function draw() {
  background(40,40,100);
  push();
  fill(177,177,224);
  stroke(202,179,0);
  textAlign(CENTER);
  textSize(50);
  text('click for fireworks!', 250, 100)
  pop();
  //for loop to add firework to array
  for (let i = fireworks.length - 1; i >= 0; i--) {
    firework = fireworks[i]; //creates object from array
    firework.moveUp();
      if (firework.exploded) {
        firework.showExplosion();
        if (firework.faded()) {
          fireworks.splice(i, 1); //remove rocket after exploded
        }
      } else {
        firework.show();
        if (firework.reachFinalY()) {
          firework.explode();
        }
      }
    }
  }

What was also really challenging was managing all the different names for the variables. I ran into multiple problems with my code, which were all caused because I misspelled the name of a variable, or used the wrong one.

Finally, I was happy with my result and could generate as many fireworks as I wanted to celebrate the completion of this assignment. Since this was my first experience trying to code something using Object Oriented Programming, it proved to be challenging. I would also occasionally forget to add the “this.” before a variable’s name within a class, which caused more crashes, however after polishing up my code, I am very proud of what I was able to achieve in this assignment.

Moving forward, one idea that I would like to implement is having more interactivity and user control over my programs. For instance, having a slider to increase the size of the explosions, their shapes, or their colors. Many variables that can be changed, and I hope in the near future I will be able to create projects with much more interactivity.

References:

The Coding Train: Videos on OOP and Arrays…

p5.js – Reference Page

Reading Reflection – Week #3

In this chapter, I like how the author made his argument very clear to the lay audience who just started to think about interactive programming. Crawford showed in a very general, yet critical way what he considers and doesn’t consider being interactive. Nevertheless, I believe this chapter was biased toward the author’s subjective opinion about the definition of interactivity. This may be seen in most of his examples. Specifically, I want to point out the example of the books and how our reading cannot be interactive. I would oppose this argument by giving another example: interactive books. Recently, a new genre of books has been introduced, which is a gamebook.  These books share similarities with conventional books, but they demand the active involvement of the reader by prompting decisions that influence the story’s progression. There are also digital versions that require the reader to shake or blow on the phone so that something would happen on the screen of a phone. I believe, this is a great example of an interactive book, which doesn’t support the argument of the author. You can check an app for this type of book here.

One thing I really liked about this chapter is Crawford’s association of interactive programming with human conversation. As we think about coding, specifically the interactive things we do in class, it fully qualifies for interactive artwork.  However, I believe that no matter what computers do interactively, it is a human who stands as the main actor in the whole process. So, in this chapter, Crawford is limited to the concept of interaction within the computer and programs, but he does not mention who takes the initial control of the whole interactive process.

 

 

Reading Reflection – Week 2

As a programmer, something ‘random’ happening in code is the worst nightmare. So, for me, the topic of randomness in computer science or coding itself was quite new. Usually, what programmers are obsessed about, is solving why ‘random’ and unexpected things are happening in their projects. So, at the beginning of the video, I was very confused in terms of how randomness can be used in coding.

After the talk, I came to the realization that even with randomness, we’re not just counting on pure luck- we are actively engaged in ‘designing’ with randomness, employing it as a tool to manipulate and shape outcomes according to our intentions. I appreciate how he nuances randomness/chance can be carefully calculated and determined, all while retaining the capacity to yield surprising results.

One question that comes to mind is whether our utilization of randomness can be regarded as an inherently random process as well. Although we don’t have access to the specific codes of the projects shown, it seems like we are trying to use randomness and make it behave in a way that we desired. I am uncertain whether, even in this context, randomness can be construed as entirely uncontrolled or arbitrary.

Reading reflection : week 2

Casey Reas’ work, particularly his piece “Maharam,” indeed offers an exploration of randomness and the interplay between simplicity and complexity in art. The concept of “tissue work” that he employs is a remarkable way to create interesting patterns and forms that emerge from seemingly basic elements.

What’s striking about “Maharam” is how it mirrors natural processes. By allowing simple wiring to interact and cross-connect in an uncontrolled manner, Reas simulates a sort of artificial evolution. This process mimics the way natural systems, like neural networks or ecosystems, evolve and adapt over time through countless interactions. It’s a testament to how computational art can capture the essence of complexity found in nature.

When he multiplied the connections, which might be a reflection of how complex systems can appear chaotic or overwhelming when viewed up close. Yet, as mentioned, Reas’ ability to eventually shape this chaos into a discernible figure demonstrates the power of coding and computational art.

Assignment 2: Generative art

I wanted to craft a celestial portrait in the cosmic expanse. I wanted to portray the animation of the galaxy in motions with every bit detail. Even though its a bit complex, I started coding. Initially, I experimented with mixing various colors and intertwining with for loop and strokes to create an appearance of radiating rays.This was the output.

And then I tried to make the beginning point to the center. Although I wanted to recreate it like a swirl. And then I added some animations to it. I wanted it to be like ellipse, but I appreciated the artistic form it took, so I opted to leave it unchanged. This was the output.

As I mentioned previously, I had a strong desire to enhance its realism. It occurred to me that with a deeper understanding of 3D animations, I might be able to achieve this goal in the future.

‘Week 3 – Reading Reflection’

 

I find Chris Crawford’s argument regarding the definition of interactivity to be somewhat rational. He argues that there are many things that people consider interactive, but they are not. I enjoyed the difference he made between interactivity and responding to something because it is a crucial difference. I do not fully agree that computers are not interactive. If we think of his definition of interactivity and its three aspects: listening, thinking, and speaking, individuals can engage in these aspects with computers, often simultaneously. Crawford’s distinction between the user interface and interactivity design was interesting, for interactivity design has a thinking aspect to it, and it considers form and function.

 

 

I tend to view interactivity in degrees of a spectrum. In that spectrum, some things are highly interactive, on the other they are not, and in between are different degrees. Not everything requires full interactivity some things like reading, and painting in a sense require a degree of interactivity. From Crawford’s argument, I got the sense that he was talking about things whose mere purpose is interactivity, which means they are at one end of the spectrum and cannot be between (i.e. interactive design). I honestly thought of PC  and VR games where people do the 3 components of his definition.

Then I realized that he was talking about interactivity in the digital world, especially when he made the distinction between user interface design and interactive design. If we think of interactive design, one must make it engage because that is the mere purpose of it. As a result, the three components of his definition must apply.

I agree that interactivity requires a back-and-forth interaction and that if one of the conditions is broken the experience won’t be as memorable; however, I think it still has some form of interactivity. This leads me to question whether interactivity means the experience should be positive. In the reading, I sensed this was the case, especially when he compared interactivity with conversations we won’t forget. In contrast, maybe the whole purpose of a project is for it to not be good.

I think the idea of interactivity is way more complex than what Crawford argues and encompasses a wider scope and purposes.

 

Week 2 HW) Loops

My project actually started from something very different from how it ended. I was trying many different things- things as simple as printing smiley faces where the mouse is clicked. Looking at the subject, I thought ‘what would happen if I use a loop for this project?’

The first step was increasing the x and y positions by 1. When I did this, everything looked the same (as expected). So I added random values to the x and y positions, which made things a bit more dynamic. At this stage, the random number was set once and the same value was added over time. (For instance, the variable tempX, which is a random value I’m referring to, would be initialized and set once, and never be changed. So, the circles were moving in a uniform way, with only the speed of movement different.) So, I added more lines to continuously  reset the random value that’s being added to x and y position, which gave the result we are seeing.

while(x + tempX < 401 && x + tempX >= 0 && y + tempY < 401 && y + tempY >= 0){
    tempX = random(-5, 5);
    tempY = random(-5, 5);
    x = x + tempX;
    y = y + tempY;
    drawSmile(x, y);
  }

The code I want to emphasize is the part where I reassign random numbers over and over, in order to create the dynamics here.

I think the project can be improved by maybe manipulating the frequency of redrawing, or drawing multiple types of random shapes, rather than just having circles every time. I also think it might be cool if I can limit the drawing to a certain area, and use the rest of the space with other types of media.