Category: F2023 – Shiloh

Concept

Initially, I had an idea to create rainfall and falling shaky leaves to show the windy and rainy weather, which I greatly enjoy and which we cannot encounter in Abu Dhabi. In an attempt to create the initial idea, I discovered some new, surprising outcomes, which changed my concept but made it even better than was planned. I was able to create an animated painting, which reminds me of famous Chinese ink paintings. Now my work is very pleasing and attractive!

Approach and Code Highlight

With this work, I had to experiment a lot. Using the trial-error method, I came to the outcome I enjoy. I created two classes and two arrays, set up a beautiful subtle color palette, and made some features, e.g. rainfall and drawing of the leaves.

I am happy with how leaves are drawn in this program. I used this video to understand how classes and arrays work and saw a nice method of how to create a shaky movement. I believe this is what makes my code interesting.

shake() {
  // movement of leaves
  this.leafX = this.leafX + random(-5, 5);
  this.leafY = this.leafY + random(-5, 5);
  this.leafX1 = this.leafX1 + random(-5, 5);
  this.leafY1 = this.leafY1 + random(-5, 5);
  this.leafX2 = this.leafX2 + random(-5, 5);
  this.leafY2 = this.leafY1 + random(-5, 5);
}

Another interesting action was experimentation with transparency alpha value in the background. I noticed that setting the value closer to zero would produce semi-transparent traces, which brings some charm to my work. Specifically, the movement of the leaves leaves traces in the form of a crown of a tree, and falling drops leaves traces that look like the trunk of a tree.

Reflection and Future Thoughts

I have an issue with this code, which doesn’t crash my program and it works fine, however, I would like to understand what I did wrong and to learn how to code variables accordingly.

Nevertheless, I am proud of the outcome because it was my first time doing object-oriented programming. I now understand all the benefits of coding in classes rather than hardcoding every single point and object in my program.

When I first joined the Introduction to Interactive Media course, I did not know what to expect. My perception of interactive media at the time was highly connected to that of a visual artist. Coming from an artistic background and having taken many art courses throughout my life, I have come to accept interactivity to be highly based of the audiences reaction.

Nevertheless, I was pleasantly surprised when the course that I am in turned out to be something that I had dreamed of trying by myself, but never having the time. Chris Crawford puts it perfectly when he says, “interaction: a cyclic process in which two actors alteratley listen, think, speak.” My understanding of the interactivity had been highly subjective, and I found myself in the position of naming various items ‘iteractive,’ even if they were not ideally so. I liked Crawford’s example of the degrees of interactivity, specifically how he talked about the fridge possessing a low degree of interactivity. This led me to think back about some commercial or idea I saw/had, where a smart fridge would scan all the food inside if, and provide you with various information, e.g. constructed a grocery list for you, or proposed recepies that can be made with the ingredients available. I believe that type of fridge can pass for being interactive.

Ultimately, I believe that this chapter highly changed my views on interactivity, specifically what it means for something to be interactive. The three main steps, listen, think, speak, can most likely be applied universally, and thus I see huge potential in this field of study.

Concept:

As I was looking for inspiration for my third assignment, I came across a YouTube page named Barney Codes in particular his video on Parlin Noise. He did a simple function where particles move across the canvas to create shapes. However, for this assignment, I wanted to use arrays and classes to do a similar version of what he was doing. It was so hard to decode the logic behind his project and turn it into a class format. A lot of trial and error took form, and I ended up doing multiple p5js codes to get what I wanted. Also, his project reminded me of Starry Nights by Vincent Van Gogh, one of my favorite paintings. As a result, for this assignment, I wanted to play with Barney’s code but also add a sense of darkness and beauty to it.

Highlight on Code:

 I started with some videos about functions, arrays, classes, and Perlin noise. As I was searching and looking I came across a simple function on the Parlin noise graph that I found online. I manipulated the code a little so that I see the different results. I also played with the colors and aesthetics of the image. It was interesting and I realized that every number you add, and every sign makes the image different. However, I did not use this for the final project I wanted. You can see below the code.

let x = 0;
let rectWidth = 1;

function setup() {
    createCanvas(500, 400);
    background(0);
}

function draw() {
    noise1D();
}

function noise1D() {
    while (x < width/rectWidth) {
        // Add randomness to x and freq for shaky movement
        let xOffset = random(-1, 2);
        let freqOffset = random(0.1, 0.09);

        let n = noise((x + xOffset) * (0.001 + freqOffset));
        n = map(n*4, 0, random(10), width/3, 0);
      
        stroke(random(150,220),random(150,220),random(150,220));
      
        rect((x - xOffset) * rectWidth, height = n, rectWidth/6,n);
        x++;
      
    }
}

Then I decided to look at the exercise of the bouncing ball in class. I knew it had a different logic from what I had in mind, but I wanted to start slow. First, instead of a circle, I drew a particle. I gave x and y random values from 0 to 500, my canvas dimensions. Then I started changing the numbers within the code to see what each represents. Then I added color to the project and used the sin and cos because I was hoping they would give some curve to the image, but they did not. I also did not want to use this as my final project for the assignment because I wanted to use Perlin noise.  However, doing this gave me a sense of what can be done to get the image I want. I know that a point is like a pixel so it’s technically zero-dimensional, so I wondered what the variables represent in this code and what are they doing to the point. I added the explanation within the code below, I hope it’s correct.

I stopped for a little to see what colors I wanted my generative art to have. The numbers I chose were a range of what I wanted the most dominant colors to be and whatnot. I found RGB color code tables helpful in this because I picked the colors from there. Then I tried to figure the logic out and write the code.

Reflection:

It was an assignment of exploration. I realized that I love using randoms in my codes because they add to the piece something unexpected. It was a challenge for me to figure out how to create the class, but I did it. One thing that I did not figure out is how to keep the particles within the boundaries of the canvas while the mouse is pressed because they tend to leave. However, I can say it was a choice. There are a lot of possibilities in p5js that I still want to discover in the upcoming assignments. One important thing that I always tell myself is that when you read hard codes or watch hard examples it is okay that you do not understand them because with time you will, so be patient.

A link of me exploring the concept: https://youtu.be/BQlmNmS3-Os

Resources:

https://editor.p5js.org/shn202/sketches/w04RNd0li

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

https://www.rapidtables.com/web/color/RGB_Color.html

https://happycoding.io/tutorials/p5js/creating-classes

 

Approach and Concept:

Starting off this project, I realized I could potentially look to screensavers of different kinds for motivating my generative art piece. Upon googling, I was instantly reminded of the iconic Mac screensaver – ‘Drift’.

Attempting to recreate the piece proved incredibly hard as it seems to use some sort of fluid-based physics simulation rather than simple noise. Additionally, the particles itself were 3D and detailed with shadows, depth etc. I gave up on the idea for a bit and decided to create a cool ‘background’ first. I did this with an idea I got during my previous project -using Perlin noise on each pixel to evolve the color based on the x,y, and time axes to make an evolving gradient.

However, this gave me a new idea – what if every pixel was a particle that moved on a trail decided by noise? That could certainly simulate the effect I wanted to an extent! With some code changes, and a lot more tinkering with variables – I finally came up with my final design:

Bonus: Click to see the animation speed change, and hover to see how the particles interact with the mouse!!

Highlights:

My highlight for this project is modeling the interplay between the noise evolution of every particle’s size,angle, and color. Moreover, I added some user interaction elements by adding an effect when we hover a mouse over the animation: the particles get repelled!

I had to bake in some considerations here so I only made this effect available away from the edges of the screen – so that the user can see the art without the mouse effect easily. I was also worried about the effect strength since the result wasn’t smooth and didn’t go with the aesthetics of my vision originally, but the normalize function came into the rescue here!

 

update() {
        let r = noise(this.pos.x * noiseScale, this.pos.y * noiseScale, timeC) * 255;
        let g = noise(this.pos.x * noiseScale + 100, this.pos.y * noiseScale + 100, timeC) * 255;
        let b = noise(this.pos.x * noiseScale + 200, this.pos.y * noiseScale + 200, timeC) * 255;
        let alpha = noise(this.pos.x * noiseScale + 300, this.pos.y * noiseScale + 300, timeC) * 150 + 105;
        this.color = color(r, g, b, alpha);

        this.angle = noise(this.pos.x * 0.01, this.pos.y * 0.01, timeMove) * TWO_PI;

        let move = p5.Vector.fromAngle(this.angle);
        move.mult(currSpeed);   //changes the speed based on mouse click
        this.pos.add(move);
        let sizeNoise = noise(this.pos.x * noiseScale, this.pos.y * noiseScale, timeMove*2);
        this.size = sizeNoise*20;  // Change these values to adjust the range of size based on noise
    }

    show() {
        push();
        translate(this.pos.x, this.pos.y);
        rotate(this.angle);
        fill(this.color);
        rect(0, 0, this.size, this.size * 0.3); // making the rectangle elongated like a bristle
        pop();
    }
  
   repulse(point) {
        let dir = p5.Vector.sub(this.pos, point);
        let dist = dir.mag();
        
        if (dist < 100) {  // Only push away if within 100 pixels
            dir.normalize();
            dir.mult(3);  // Adjust for stronger or weaker repulsion
            this.pos.add(dir);
        }
    }

 

 

Reflections and Future Work:

My initial goal was to make the particles 3-dimensional. When I actually attempted to do so, and mess with movement in the Z dimension, I ran into several issues both on the aesthetical and technical front. For example, using 3D graphics benefits immensely from the use of shaders – which are very different from the 2D objects we use to both learn and implement. Moreover, it required more geometrical calculations that seemed beyond the scope of the project.

If I had more time I would also try to see what variations I can get with using differently shaped particles, different types of noises etc.

Resources:

I realized at a later stage that this video does what I attempt to do, and took reference towards the last part of my coding:
https://youtu.be/BjoM9oKOAKY?si=tIbnzH-ndMvgCB2R

Another resource I used to understand the concept of vectors in p5.js:

https://www.youtube.com/watch?v=bKEaK7WNLzM&pp=ygUUY29kaW5nIHRyYWluIHZlY3RvcnM%3D

(Also, some other videos in the playlist)

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

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.

 

 

 

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.

 

Concept:

A movie that I watched this summer and which stuck with me was “Oppenheimer”. Specifically this parallel:

Oppenheimer – 2023
In this assignment, I wanted to recreate (or actually just mimic as much as possible) the intense dynamic of the explosion scene from the movie. The idea of this generative art piece is simple: orangish shade particles that stem from the center of the canvas, creating a visually striking spiral pattern with a depth of view. The soundtrack in the background (press key enter to hear it), sets tense dynamics as well. You can loop the artwork by pressing the mouse.

SKETCH:

Instructions:

-Click on key Enter for sound.

-Click on mouse for loop.

Highlight of the code:

class Particle {
  constructor(x, y, col) {
    this.position = createVector(x, y);
    this.velocity = createVector(0, 0);
    this.acceleration = p5.Vector.random2D().mult(random(0.1, 0.5));
    this.color = col;
    this.alpha = 255;
  }

  //This method updates the particle's position based on its velocity and decreases the alpha value over time resulting in a fading effect.
  update() {
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);
    this.alpha -= 1;
  }

  //This method draws the particle as an ellipse with the specified color and position.
  display() {
    fill(this.color);
    ellipse(this.position.x, this.position.y, 8, 8);
  }

  //This method checks if the particle is finished which occurs when its alpha value becomes less than 0, indicating it has faded out.
  isFinished() {
    return this.alpha < 0;
  }
}

This part of the code was definitely the most challenging to figure out, thanks to OOP. This ‘Particle’ class, is basically the heart of the piece. Here I figured out the movement, appearance, fading effect and the behavior of each particle. First starting with the constructor, ‘this.position’ makes the position of the particle a 2D vector, ‘this.acceleration’ is a random 2d vector that makes the movement random. Then we have the method ‘update’ where I controlled the simulation of the motion through adding ‘this acceleration’ to ‘this velocity’, changed the particles’ positions by adding ‘this velocity’ to ‘this position’ and then reduced 1 in each frame in order for the particles to fade out gradually. The struggle in this part came from the fact that I didn’t know how to do good calculations in order for everything to work. I relied on trial and error until I figured out which number where and the properties. Again, I watched a lot of The Coding Train to figure out this part.

Reflections:

Casey Reas’ talk influenced a lot my perception of art. I started to find meanings and links to images, in abstract patterns with random elements. If someone told me two weeks ago that I’ll create a random spiral pattern and perceive it as a movie scene, I wouldn’t have believed it. While I still think symmetry beautiful, I also find chaos and noise aesthetic now.

The Art of Interactive Design, Ch. 1

As an Interactive Media and Business major, I certainly agree with the author that “interactivity” is a word thrown around so much that it might as well be “dead” – as evidenced by how hard it is to come up with a succinct explanation of the IM major.

I think Crawford’s definition of interactivity as involving two actors, and more specifically two purposeful creatures, and as existing on a continuum, is what makes this definition stand out. This reading changed my belief that interactivity was a boolean value, and I will now be more mindful of viewing interactions with objects (or even humans) on a scale of low to high, as he suggests. I do wish that he gave more examples of what would count as high interactivity, especially in the digital space.

Now to raise a question, are acoustic instruments interactive? They do not “think,” but they appear like they do because they react (speak), and their reaction causes a change in the (listening) player, thus fulfilling all 3 requirements of interaction laid out by the author. For example, if I am playing my guitar, I will first “speak” by plucking the strings and applying a certain level of pressure. The guitar strings “listen” and then “speak” in (sometimes unexpected) ways, which causes me to adjust the pressure I apply or change the position of my fingers on the fret board. Even more interesting is the question of digital instruments and “smart” instruments, which can make autonomous (?) decisions – where do these sit on the scale of interactivity?