Concept

The concept behind “Collecting Falling Bricks” was to recreate a nostalgic gaming experience from my youth where players control a vibrant block using the right and left arrow keys. The game revolves around the simple yet addictive task of collecting falling grey bricks. As you collect these bricks, your score gradually increases, prominently displayed on the canvas’s top left corner. The game is designed to be endless, allowing players to collect as many bricks as they desire without facing a game-over scenario.

Highlight of the Code

One of the code highlights that I’m particularly proud of is the implementation of the continuous gameplay loop. This loop ensures that new falling bricks are introduced at regular intervals, maintaining an engaging pace and preventing the game from becoming too static. Below is a snippet of the code responsible for this:

// Continuous gameplay loop
setInterval(() => {
  objects.push(new FallingObject());
}, 1000);

Reflection/Improvements

Creating this interactive game art was an exciting journey for me as I combined my creativity and coding skills. For future work, I envision adding a new layer of challenge to the game. Instead of an endless loop, I plan to implement a game-over mechanism that will test players’ skills and add excitement to the gameplay. When a player misses collecting a brick, they would start the game anew, providing a sense of accomplishment and motivation to improve their score.

Edit Link

This week’s assignment delved into the world of object-oriented programming and arrays. My inspiration for this project stemmed from my previous encounter with Perlin noise and flow fields. Initially, I found the code for implementing these concepts somewhat complex. However, this week’s lessons on noise, arrays, and classes made things clearer. This video by “The Coding Train”, about Perlin noise really put things into perspective for me, and this is how I stumbled upon my artwork.

The artwork I created is essentially a flow field, which consists of an array of points moving in response to their positions relative to where the mouse was clicked. Firstly, I wanted to create a Perlin noise piece, but I also wanted to have a high level of interactivity in my piece. Searching “moving Perlin noise” led me to achieve this.

I utilized a class called “point” and developed functions to display and update these particles. When the mouse was clicked, the “push” function was invoked to relocate the particle randomly, resulting in an interactive field when the user interacted with the mouse.

The most challenging aspect of this project was the “update” function. It was responsible for moving the particles to random positions on the screen and recalculating noise values based on their positions. The difficulty arose from the new concept of noise scale, which I struggled to grasp accurately. Additionally, handling particles that went out of bounds and ensuring they returned to random positions proved to be a complex task. However, by drawing on the bouncing ball problem we studied in class, I eventually overcame this challenge. Below is the snippet of code I take most pride in:

//update particles position based on the noise
update() {
  //calculate noise value based on position
  let n = noise(
    this.position.x * noiseScale,
    this.position.y * noiseScale,
    frameCount * noiseScale * noiseScale
  );
  
  //Map noise to an angle
  let a = TAU * n;
  
  //Update particles position based on the angle
  this.position.x += cos(a);
  this.position.y += sin(a);

  //if particle is off-screen, reset to random location
  if (!this.onScreen()) {
    this.position.x = random(width);
    this.position.y = random(height);
  }
}

For future improvements, I aspire to introduce a gradient shift in the flow fields, dynamically changing colors as they traverse the canvas. As I reflect on this assignment, I take pride in the progress I made in understanding these intricate concepts. Looking ahead, I am eager to continue refining my work, with plans to enhance the visual impact of the flow field. This assignment has undoubtedly been a steppingstone in my journey to mastering interactive media coding.

In the first chapter of the book “The Art of Interactive Design” by Chris Crawford, titled “What Exactly is Interactivity?”, Chris talks about what interactivity means and sets the tone for the rest of the chapter. He starts by admitting that we don’t really know what interactivity is. However, he goes on to explain the basic idea of interaction and how it helps in creating interesting and meaningful interactive experiences using simple metaphors.

One of the metaphors he makes is thinking of interactivity as a conversation. He says that just like in a conversation, where people listen, speak, and think, interactivity also involves these three things. A high level of interactivity means that all three aspects are happening, and none is more important than the others.

One interesting point he makes is the difference between interaction and reaction. Interaction is when something responds to what you do or say, while reaction is when you respond to something. For example, books and movies are not interactive because they don’t respond to you; you just react to what you see or read. On the other hand, interactive media requires you to actively participate and engage with it. This is an important difference for designers because it affects how they create interactive content.

This distinction is important because it helps me think about my own work. It reminds me that for interactivity to be meaningful, it should not only involve users but also encourage them to interact actively. In doing so, my work becomes the conversation that Chris mentioned, my user essentially gets to think about, speak and listen to my work creating not only a greater sense of interactivity, but also an experience.

Concept:

I wanted to apply my classroom knowledge, encompassing classes, functions, and arrays, to develop an engaging interactive game. Through this process, I successfully created an addictive game. The game incorporates two classes: one for displaying the person and another for handling the moving balls. Initially, I conducted trials with balls originating from the same point, following similar paths. After receiving feedback from friends, I recognized the need for a more dynamic experience. Subsequently, I modified the code to generate balls from random points across the canvas, each with its unique trajectory. For controls, I implemented basic key functions using left, right, up, and down arrows to navigate the human across the canvas. Additionally, I incorporated arrays to introduce a new ball each time the person reaches the designated area. To enhance clarity and transform the game into a point-based system, I added a visual display of the current ball count in the top left corner. This addition encourages players to strive for higher scores, further enhancing engagement.

Highlighted Code:

//for loop which creates more balls if the human hits ball and decrements ball count
 for (let j = 0; j < ballArr.length; j++) {
   ballArr[j].display();
   ballArr[j].bounce();
   
   //if distace betwee human and ball is less than 30, move to orignal position
   let d = dist(Human.getX(), Human.getY(), ballArr[j].getX(), ballArr[j].getY());
   
   if (d < 30) {
     Human.origin();
     ballArr.splice(j, 1);
     j--;
     ballCount--; 
   }
 }

Creating this code proved to be a substantial time investment. I focused on implementing the splice and push functions within arrays to dynamically generate more balls each time the person reached the “continue” area. Through numerous iterations and referencing online examples, I was able to achieve the desired outcome, resulting in the final product I had envisioned.

Code Link: https://editor.p5js.org/Nasar/sketches/JieIBPrML

Reflections:

I take pride in the progress I’ve made, in integrating classes and arrays into my game. This endeavor significantly enhanced my understanding of these fundamental concepts. Looking ahead, I envision improving the game’s visuals and crafting a more refined character design beyond the current tree-like representation. Additionally, I aim to streamline code logic for more efficient and concise outcomes. With continued learning, I anticipate greater proficiency in envisioning diverse scenarios and seamlessly implementing them into my games. This iterative process continues to sharpen my coding acumen and creativity.

THE ILLUSION

CONCEPT

I have a deep fascination for optical illusions, which I began exploring from a young age. Among my favorite illusions is the one depicted below, consisting of multiple squares of diminishing size stacked at various angles. I decided to recreate this illusion infusing it with a rotation effect to make It more appealing.

Initially, the squares rotated in fixed positions, but I visualized a more satisfying illusion with a deliberate pattern. After researching techniques, I stumbled upon a video tutorial explaining the application of sine and cosine functions to create intricate patterns. After hours of trial and error its look never failed to create a smile on my face.

Yet, my creation remained monochromatic. To enhance its visual allure, I refined the project by applying color adjustments using the frame count in combination with sine and cosine functions. This introduced a pleasing and seamless color transition, which I extended to the background to enhance its overall appeal.

Code Highlight

translate(width/2, height/2);
  
  for(var i = 0; i < 200; i++)
    {
      push()
      
      rotate(sin(frameCount + i ) * 100)
      
      var r = map(sin(frameCount), -1, 1, 50, 255)
      var g = map(cos(frameCount /6), -1, 1, 50, 255)
      var b = map(sin(frameCount /2), -1, 1, 50, 255)
      
      stroke(r,g,b)
      
      rect(0, 0, 600 - i * 3, 600 -i * 3, 200 - i)
        
      
      pop()
    }

The Illusion

reflection and improvement

I am looking forward to  incorporating user agency into this illusion project, enabling individuals to have control over aspects such as the spiral patterns and color schemes.

I really enjoyed this talk a lot! Casey Reas’ Eyeo talk on chance operations .

One of the main ideas I found very interesting was this idea of randomness. We discussed a bit about this already in class, but I thought I’d share my perspective on the topic. I do believe that in the grand scheme of things  randomness may not actually exist. This can be especially true when discussing anything technology oriented, but from what I interpreted from the talk was something a bit more personal to the individual. To elaborate, I think randomness comes down to the individual’s perception of an event. Sure, if you give a computer a bunch of random coordinates and tell it to draw something, the computer will intake that information in a very logical and structured format and execute said command. What happens to the individual when perceiving this outcome is something quite different. Because our brains aren’t designed to function like computers, this creation by a random combination of digits appears random or out of character. You may even argue that randomness is simply something outside of our expectations or ideas, which once again goes back to what our individual perspectives are.

 

A helpful tip that I received from this video was the importance of structure with an element of surprise or randomness (excuse the redundancy). When creating art through a mechanism such as coding, one must not only understand the structure of building said creation (the logical part of the creation), but also open themselves to experimentation using our favorite word for today, randomness.

 

 

 

 

 

 

This simple p5.js sketch represents a grid of circles on a canvas. The circles are evenly spaced in rows and columns. The purpose of this artwork is to explore the fundamental principles of drawing shapes using p5.js, such as ellipses, and to create a pattern. While this version lacks interactivity, I believe that this grid of circles can be a starting point for more complex projects, where additional features and interactions can be incorporated to enhance the user experience.

one aspect of the code that I’m particularly proud of is the nested loop structure used to create the grid of circles. This nested loop efficiently iterates through rows and columns, positioning each circle at the correct coordinates on the canvas. This code snippet demonstrates the power of loops in creating repetitive patterns and organizing elements in a systematic way:

for (let x = 0; x < width; x += spacing) {
for (let y = 0; y < height; y += spacing) {
fill(0); // Set the fill color to black
ellipse(x + circleSize / 2, y + circleSize / 2, circleSize, circleSize);
}
}

Embedded Sketch:

Casey Reas’s Eyeo2012 talk provides valuable insights into the field of generative art and creative coding. Several thought-provoking concerns arise as we delve into the debate surrounding this video. To begin, how does Reas’ work, as an example of generative art and creative coding, effect our larger society? This video demonstrates the revolutionary potential of art and technology convergence and invites us to think how such developments might impact our cultural and creative landscape. Is a new era of artistic expression challenging old paradigms on the horizon? Furthermore, the video invites us to consider the evolution of human-technology connection.
Reas’ investigation of algorithms and code as artistic media raises questions about how our cognitive and sensory experiences may evolve as a result of this merger. Is there a substantial shift occurring in the way humans connect with art, as our minds and perceptions adjust to a digitally infused world? In terms of bias, it’s critical to consider if the video paints Casey Reas and the area of generative art in a favorable light. Is it objective in its presentation of the subject matter, or does it lean toward advocacy? Understanding the viewpoint from which the video is delivered can help us evaluate the material and its consequences critically. Moreover, while the Eyeo2012  featuring Casey Reas does not fundamentally alter our beliefs, it does prompt us to consider the possibilities and problems given by the union of art and technology. It ushers us into a world where creativity and algorithms coexist, inviting us to investigate the thrilling possibilities and ethical considerations that await us in this ever-changing sector.

As a kid, my first drawings were of stick figures in magical places. One stick figure would be jumping rope. Another would be reading. Two others would be playing tag. All in a giant flower field, or in space, or in a park. You get the picture. I’m still drawing stick figures now. Make sure to press your mouse down:

I don’t know how much to admit, but who really reads these besides the Professor. I’m already frustrated. I’m keenly aware of how behind my peers I am. I have big ideas but have no idea how to translate them. Between my brother and me, he’s the logical thinker. They say the devil is in the details. And as a lifelong airhead, I’m constantly worried about all the details I’m missing. I feel the consequences of my natural inattention in daily life. I feel the consequences of it when coding.

The best part of my code is the bit I saw on the Internet, linked here: https://happycoding.io/tutorials/p5js/for-loops. And embedded down below:

let lineWidth = random(minLineWidth, maxLineWidth);
  for(let lineY = 0; lineY < height; lineY+=3){
    lineWidth += random(-lineWidthChange, lineWidthChange);
    lineWidth = constrain(lineWidth, minLineWidth, maxLineWidth);
    line(width / 2 - lineWidth, lineY, width / 2 + lineWidth, lineY);

It looks straight out of a Joy Division or Arctic Monkeys poster. I took the time to thoroughly understand what was happening and make my own adjustments, but it’s something I never could’ve written myself as of now. Coding is like writing proofs. When you read a proof, you can go back through the trail of logic and understand how the mathematician arrived at their conclusion. But could you have written the proof yourself? That’s the real test of knowledge.

Never be so arrogant that you think you deserve to have been born an expert. Everyone started at one point, and what they made was bad. It was bad for a long time before it got good. You study the greats. You copy and copy and copy until you’re able to make something that’s truly your own. From here on out, I don’t want to be borrowing bits of code off the Internet. I want to write everything myself. I’ve discovered this whole new world. You have to decide whether some worlds are worth exploring. I want it to be worth it.

In his speech at the Walker Art Center, Casey Reas talks about navigating the balance between order and chaos in generative art. We had to do something somewhat similar in our assignment this week, where a lot of us started with a structure, writing code that defined the rules and parameters governing the creation of our artwork, as sort of a form of order imposed on the creative process. We then manipulated these rules to introduce variability and chaotic randomness into the system, allowing for serendipitous and visually striking outcomes.

He also explored how some generative art is dynamic and responsive to user interaction, which leads to the evolution of chaos as the art interacts with its environment. Some of us had this element of controlled chaos in our art as well, seemingly chaotic in response to changing inputs but again, governed by underlying rules.

Ultimately, what I took away from his insight is a welcoming attitude toward the idea that order and chaos are not opposing forces but can coexist with each other in meaningful ways. If you look at my assignment for long enough, the blinding randomness of colorful boxes soon blends into intricate patterns, the artist of which is chaos itself.