Category: F2023 – Mang

Design Concept

This project portrays that in a box, there are various balls flying around and another rather distinctive ball floating inside. Every other ball experiences a force when approaching the yellow ball in the center. No matter how the yellow ball moves, other balls are driven away from it. My original intention is to remind people that there are bright spots in people, even if most reject or isolate them. However, it is also open to other interpretations since it only vaguely represents my intent.

Code I am Proud of

I am proud of the part where I implemented the particle effects of the balls traveling around. Originally, I wanted to implement an algorithm that makes the particles fly out in a certain cone range behind the ball. However, the effects are rather unsatisfactory. The particles fly out sequentially in an over-orderly manner. It was almost like the particles were in a line when the range of the cone was too narrow. Then I thought of the movements the balls are making. If the ball is moving, perhaps I could make the particles fly in all directions instead of only in a cone behind the ball. It will still form a coned trail as long as the particles have less velocity than the ball. The particles with the same direction as the ball will have less relative speed to the ball. Therefore, it will disappear close to the ball, and vice versa. This makes the trail look more chaotic and more like a trail instead of a projector.

class Particle{
  //xyz be the coordinates of the ball
  //dir is random plus direction of the ball
  constructor(x,y,z,dir){
    this.x=x;
    this.y=y;
    this.z=z;
    this.r=random(255);
    this.g=random(255);
    this.b=random(255);
    //Generate random cold color
    if(this.r>this.b){
      this.clr=color(this.b,this.g,this.r);
    }
    else{
      this.clr=color(this.r,this.g,this.b);
    }
    this.direction=p5.Vector.add(dir,p5.Vector.random3D());
    this.opacity=0.5;
  }
  
  //Displaying color
  display(){
    push();
    if(this.r>this.b){
      this.clr=color(this.b,this.g,this.r,this.opacity*255);
    }
    else{
      this.clr=color(this.r,this.g,this.b,this.opacity*255);
    }
    stroke(this.clr);
    translate(this.x,this.y,this.z);
    sphere(3);
    pop();
  }
  
  //Movement and change in opacity
  updateLocation(){
    this.x=this.x+0.5*this.direction.x;
    this.y=this.y+0.5*this.direction.y;
    this.z=this.z+0.5*this.direction.z;
    this.opacity-=0.015;
  }
}

Improvements

I wanted to do lighting on the balls, especially the central ball. However, I cannot understand the usage of shaders or other methods that can imitate lighting and light halos. Therefore, this project is not yet complete, and it should have lighting effects to indicate the size of the repulsion field of the central ball. Without the lighting, the theme that “even the most isolated people shine” becomes not obvious.

I find this reading very interesting because it was not until now I realized that interactivity is related to interaction. It never occurred to me that one-way interaction might not even count towards being interactive at all. When I actually think about it, I realize how reasonable the author’s claims are. If anything that moves when you interact with it is interactive, then anything could be interactive. You could potentially pick up a rock, throw it away, and say it is interactive. Then, there would be no meaning to the word “interactive.” The author’s definition of interactivity really gave me a lot of new insight into the term”interactive media.” This framework clearly separates and distinguishes interactive media from traditional media. Being interactive requires the media to somehow respond to the audience and improvise. Regarding media, it could only be done with algorithms and sensors, which traditional media doesn’t include.

Another thing I find interesting is the distinction between interactive design and traditional interface design. I always thought that interactive design is based on interface design and that there must be an interface basis to implement interactivity on top of it. It only occurred to me now that interactivity design could be much broader than interface design. There is much more to play with in interactive design, not just thinking about the aesthetics and alignment of elements on the page.

I found the reading to be quite intriguing as it prompted me to think what interactivity really is, a concept I had not given much thought to previously. Crawford’s definition of interactivity, drawing parallels with the dynamics of a meaningful conversation – involving listening, thinking and speaking – resonated with me. Throughout most of the reading, I found myself in agreement with his perspective on interactivity in various contexts.

However, I didn’t quite agree with Crawford when it came to his perspective on movies. He appeared to suggest that movies, inherently, lack interactivity. This reminded me of “Bandersnatch” a movie on Netflix that challenges this notion. In this movie, we as viewers have the opportunity to make choices for the characters, and the storyline changes depending on these choices.

Thinking about it a bit more, this difference in opinion really makes me wonder how media and storytelling are evolving. Traditional movies tend to stick to a linear plot, but “Bandersnatch” blurs the line between cinema and interactive storytelling, challenging our old-school idea of how movies work.

 It’s clear that interactivity is changing and adapting to new technology. We, as consumers, want more immersive and hands-on experiences in our media. While Crawford’s view has its merits, it might need a bit of an update to include these exciting, new forms of interactive storytelling that are turning our passive media consumption into an interactive adventure.

For this assignment, I initially knew I wanted to create something that captured the essence of the night sky and stars, as I’ve always found it incredibly captivating. However, I was unsure of the specific visual direction I wanted to take. It was during this contemplation that my friend coincidentally shared a comic strip featuring aliens, which instantly sparked my imagination. I thought, “Why not incorporate an alien spaceship into this assignment?”

Inspiration:

As I sketched the alien character, he naturally became a “Ben” in my mind, so I decided to call this “Ben’s Late Night Sky Chromatics”.

The part of the code that I’m most proud of is the spaceship class.

//spaceship 
class Spaceship {
  constructor(x, y, bodyWidth, bodyHeight, cockpitWidth, cockpitHeight) {
    this.x = x;
    this.y = y;
    this.bodyWidth = bodyWidth;
    this.bodyHeight = bodyHeight;
    this.cockpitWidth = cockpitWidth;
    this.cockpitHeight = cockpitHeight;
    this.speed = 6; //initial speed
  }

  update() {
    this.x += this.speed; //spaceship moving across the screen

    if (this.x > width + 50) {
      this.x = -50; //continuous and seamless movement of the spaceship across the screen 
    }

    laserX = this.x;//laser moving with the spaceship
  }

  display() {
    //spaceship's body
    fill(240, 55, 55); 
    stroke(0); 
    strokeWeight(2);
    ellipse(this.x, this.y, this.bodyWidth, this.bodyHeight);

    //lights on the spaceship's body
    fill(222, 209, 29);
    circle(this.x - 16, this.y + 5, 5);
    circle(this.x, this.y + 11, 5);
    circle(this.x + 16, this.y + 5, 5);

    //cockpit
    fill(255); 
    ellipse(this.x, this.y - 20, this.cockpitWidth, this.cockpitHeight);

    //alien
    fill(69, 163, 94); 
    circle(this.x, this.y - 14, 25); //alien head
    fill(255);
    circle(this.x - 6, this.y - 15, 1); //alien eyes
    circle(this.x + 6, this.y - 15, 1);// alien eyes
    noFill();
    arc(this.x, this.y - 7, 10, 5, 0, PI); //alien mouth

    //alien ears 
    fill(0);
    line(this.x - 14, this.y - 26, this.x - 10, this.y - 10); 
    circle(this.x - 14, this.y - 26, 2);//left ear
    line(this.x + 14, this.y - 26, this.x + 10, this.y - 10); 
    circle(this.x + 14, this.y - 26, 2);//right ear

    //spaceship legs
    fill(255); 
    triangle(this.x - 47, this.y + 41, this.x - 35, this.y + 18, this.x - 30, this.y + 20); //left leg
    triangle(this.x + 46, this.y + 41, this.x + 30, this.y + 21, this.x + 35, this.y + 19); //right leg
  }
}


//mouse click to randomly change laser beam color
function mousePressed() {
  const randomIndex = int(random(colors.length)); //picking random index within the array of the laser beam color
  laserColor = colors[randomIndex]; //randomly selected color for the laser beam
}

Designing the spaceship and getting all the values just right was a bit challenging. I started by sketching the spaceship and the night sky background separately, and then I had to merge them, which required a bit of trial and error. However, after a few hours of tweaking, I managed to create a spaceship that I was pleased with. I love the way the spaceship itself and Ben turned out, as well as a bit of interactivity in how the spaceship’s beam changes color upon clicking. Despite its simplicity, I also like the part of code that randomizes the positions of the stars each time the sketch starts. I like how this subtle feature adds an element of unpredictability and liveliness to the scene.

As for future improvements, I’d like to consider adding more spaceships and perhaps introducing some of Ben’s friends to make the scene even more engaging and cute. However, overall, I’m satisfied with how this assignment has turned out so far.

 

Concept

I was looking up examples of generative art to find something to be inspired by. However, I found that most generative artworks are too messy/noisy for my liking. Personally I like simpler, more calming structures than the ones seen in the picture below so I took another approach — to design something that’s relaxing to look at, instead of being chaotic.

I’ve been listening to a lot Umitaro Abe, a Japanese composer that mostly has instrumental pieces. They’re very relaxing to listen to, so I thought that I might try making a p5 work that can hold that atmosphere of peace while being entertaining enough to capture a viewer’s attention.

The sketch

The sketch is pretty much a koi pond, and the fishes will move around and leave behind temporary ripples in the water. The wave ripples remind us that most disturbances are temporary, and can sometimes even be pretty to look at. I think it’s very fun to look at while listening to some piano pieces, so the version on the p5 editor plays a song from Umitaro Abe to accompany this piece.

Proudest part

My proudest part for this project was not the code, but simply getting the sprites for the fishes to make the little animation. I couldn’t find sprites that I wanted online, but I managed to find static images of koi fishes that matches the style I wanted. I used Photoshop to edit the fishes tails to give each fish two frames of animation, but it surprisingly took more time than it should because I didn’t have much experience with creating animated sprites myself, only with using them.

Reflections

I’m proud of this one! Code could always be cleaner but I’m pretty satisfied with this piece. I might add more fish variations in the future, or maybe create a better motion path for the fishes like a curved zig-zag instead of a straight line as it is right now.

Reading “The Art of Interactivity” by Chris Crawford has definitely reshaped my understanding of interactivity. I would have initially defined interactivity as when you get to do things like click, tap, or choose, and your device responds to what you do. Crawford, however, defined this concept in a much simpler and easier way. I particularly liked how he differentiated the interactivity from the reaction and participation. Nonetheless, one particular aspect of the first chapter of the book left me wondering. Crawford briefly touched upon the misconception of dividing the design process into two distinct phases: graphic design and the interactivity step. Even though he have discussed this in the later chapter of the book, I have came up with my ideas of why the potential challenges this division can pose.

One immediate concern is the possibility of losing sight of the user experience. Design should always prioritize meeting the users’ needs and preferences. If we plunge headfirst into graphic design without considering how users will interact with our creations, we might end up with aesthetically pleasing but impractical designs, inevitably leading to user frustration. I believe that such an approach could yield inconsistencies and reduced usability, primarily due to the disconnect between graphic design and interactivity. As an aspiring designer or software developer, I understood the importance of integrating the design process with interactivity, ensuring that the two are both important for maximum effectiveness and efficiency. By doing so, the creation would not be just visually appealing interfaces but also include interactions that are intuitive and user-centric, resulting in a more harmonious and engaging user experience.

For this weeks assignment, I decided to try to recreate one of nature’s most awe-inspiring phenomena thats probably on everyone’s bucket list – the Aurora , or the Northern Lights!

Concept

I’ve been manifesting to go see this celestial marvel since forever and trying to work on this assignment has added to that. For the assignment, I used Object Oriented Programming and arrays at the very core of it, supported by a few functions. Since this wasn’t my first time using OOP and arrays, I was more curious to explore generative art and looked up for inspiration online. The most common ones I came across were using the Perlin noise. I found it a little tricky to follow this initially, using just the p5.js reference available but after looking at a lot of artworks, the essence was clear – this helps with creating harmonic and natural motion which was perfect for the northern lights.

This program has two classes – the aurora class and the star class. The Star class is a very basic one that just draws stars randomly on the canvas and a function to display. The aurora class has an update and a display function however, trying out the noise had a lot of experimentation involved. I made multiple tweaks, iterations and changes in constants till I was satisfied. While I’m not fully satisfied with how this looks (only because it doesn’t do justice to the real one), here’s my final sketch

Clicking on it adds more Auroras

The parts of the Code I like
I’ve used arrays in almost all places right from storing the northern lights color palette, to the positioning and Y – offset values for each point on the aurora. A particular part of code that I like includes both the update() and display() of the aurora class. It is the part of the artwork that makes it generative with the noise() and adds the required randomness and smoothness to each wave and creates it by calculating each x & y coordinate and joining it together using the beginShape(), endShape() function.

  update() {
    this.yOffsets = [];
    for (let x = 0; x < width; x++) {
      //noise value based on x position, frame count, and yOffset
      let noiseVal = noise(x * 0.002, frameCount * 0.005, this.yOffset * 0.01);
      //add the y offset position for the particular point in the offsets array
      let yoffset = map(noiseVal, 0, 1, -height * 0.124, height * 0.5);
      this.yOffsets.push(yoffset);
    }
  }

  display() {
    stroke(this.col.r, this.col.g, this.col.b);
    strokeWeight(3); 
    beginShape();
    for (let x = 0; x < width; x++) {
      //get x and y coordinates to join points and form the aurora
      let baseY = this.yOffset;
      let y = baseY + this.yOffsets[x];
      vertex(x, y);
    }
    endShape();
  }
}

More than all of this, the one line that I think is magical is this one.

function draw() {
  //trailing effect
  background(20, 24, 82,20);

The fourth parameter in the background function adds the fading and trailing effect in the art that makes the northern lights seem flow-y and smooth.

Reflections and future improvements

While I loved the assignment and didn’t find object oriented program as challenging, I did struggle with the concept of Perlin noise as well as how to start approaching the code once an idea is decided. Even small differences from 0.01 to 0.02 in parameters were making massive differences in the art which I could only figure out by trial and error. I want to try exploring this concept a little more to well understand how to approach these minute details and make this sketch more realistic.

References

https://p5js.org/reference/#/p5/noise, https://techty.hatenablog.com/entry/2019/05/27/151415, https://genekogan.com/code/p5js-perlin-noise/

The Art of Interactive Design offered me deep insights into the world of interactivity. Before reading this text, I had never stopped to think about the definition of interactivity or the steps necessary to consider something interactive, even though it is a core idea of computing. Nonetheless, I have found that the text managed to put into words almost all of my beliefs on the topic, and even the aspects that I do not agree with ended up intriguing me. For instance, the author argues that movies are not interactive because they fail to utilize two principles of interactivity: thinking and listening. He goes even further by saying that we should “appreciate them for what they are good at instead of press-ganging them into something they’re terrible at”. I found this passage to be interesting because nowadays we do have interactive movies, one example is “Black Mirror: Bandersnatch”, which gives the option for the viewer to change the story depending on their choices. To me, it is amusing to come across an example of an outdated perspective and compare it with the forms of media that we have nowadays. Moreover, even though interactive movies did not exist back when the book was written, I still found his previously mentioned statement to be quite harsh. For someone who argues so much in favor of innovation, I did not expect him to reject the possibility of interactive movies in the future so easily. Sure, interactive movies are not that popular, but they are still appreciated for how entertaining and creative they are.

On a different note, I completely agree with his definition of interactivity, and I found his idea of a degree to be extremely useful. As he argued, the definition of interactivity is quite subjective. The lights of a refrigerator that turn on and off when a door is opened and closed are not interactive with adults, but they could be with children. In that case, how would we define whether refrigerators are interactive or not? With the interactivity scale, we can argue that they are indeed interactive, although lowly, because they barely interact with the user. Following that notion and the three principles of interactivity given by him (listening, thinking, speaking), I would like to give my own damn definition of interactivity. To me, one definition of interactivity could be: “A form of medium that connects two or more agents through active listening, thinking, and speaking”. The same idea, but written more clearly to me. Still, I deeply admire and respect the author’s arguments on such a modern concept.

“The Art of Interactive Design” by Chris Crawford

Chris Crawford raises the issue of the ambiguity and overuse of the term “interactivity” in “The Art of Interactive Design”. Although I have never thought about the meaning of the word and intuitively identified the products as highly interactive, this article was the ‘wow’ moment for me, making the clear distinguishment between interaction and reaction. 

During the class, Professor Michael Ang told an interesting debate between the artists and the interactive media designers about whether the drawings are interactive or not. The artists’ argued, claiming that the artworks interact with the audience by making them think about the meaning and interpretation to which designers have their own opposing claim. Although before, I was closer to the artists’ perspective, after reading the text, I absolutely support Chris Crawford’s point of view. It is for sure the paintings make the people think, but nothing more. According to the author, in order to have the interaction, three components should be well delivered from BOTH sides such as listening, thinking, and speaking, or in professional terms, input, process, and output. In this case, the audience has the input as seeing the painting and process as thinking and interpretation of the painting. Of course, the viewer can comment orally but the painting is not going to either listen, think, or respond to you. Hence, there is no mutual interaction. Because of this, the response of the viewer is no more than a reaction, which cannot turn into interaction. These thoughts came to my mind, forming my perspective on the definition of interactivity. 

After distinguishing the interaction from the reaction, another question was raised in my head is there a quantitative way to distinguish the level of interaction? Although the author touched on this topic, he didn’t consider that in-depth. Consequently, I am interested in whether this level of interaction is subjective, whether it depends on the time and space as well as the age of the person interacting with. Additionally, should the interaction be connected with the person to be considered as the interaction or can the interaction between machines and AIs be considered an interaction too? 

For this assignment, I decided to create a simple demonstration of a mandala. I used only three shapes of small, big circles and rectangles; which rotate around the center, forming a visual pattern.

A mandala is a geometric pattern that holds deep symbolic and spiritual significance in various cultures around the world. It often represents unity, harmony, and the balance of elements. In my work, I tried to capture the essence of a mandala by creating a dynamic composition of shapes that radiate from the center, reminiscent of the sun.

Compared to my previous coding assignments, this time I had fewer issues. However, I found it challenging to implement the rotation drawing for the shapes. I used the “translation” function to establish the center of the screen as the point around which the shapes would rotate. This function moves the rotating point to the desired center position. Next, I computed the angles of rotation using the “map” function, based on each shape’s index within the array of shapes. These angles of rotation were then used in the “rotation” function, for shapes to spin around the central point.

let angle = map(this.index, 0, shapes.length / 3, 0, TWO_PI); // Calculate the angle for rotation
let x = cos(angle) * this.radius;
let y = sin(angle) * this.radius;

push(); 
translate(x, y); 
rotate(angle); // Rotate based on the angle

In the future, I would like to try to use more shapes like triangles and spirals to create visual variety. I think expanding the color choices with gradients and dynamic color changes will make the artwork more visually appealing.