Category: F2023 – Mang

concept:

Because the last generative artwork piece I made was very 2D, this time I wanted to focus on making something that would give the illusion of being in 3D. I was very inspired by the examples and exercises that we saw/did in our last class, specifically the exercise with the randomized balls and the flock that we saw that moved according to the cursor. My assignment idea is a combination of that, where I wanted to make a group of rotating cubes follow a cursor and also scale according to it.

However, I unintentionally increased the difficulty of this project for myself. I came across this when googling examples for how to make cubes in p5.js, and following the code, I set the mode to WEBGL not realizing it would change a lot of the way I needed to approach things in my code. In addition, the mathematics of making the cubes was also a bit difficult for me to grasp initially (the last time I had to think about velocity and vectors this deeply was back when I was doing A-Level Physics, so saying I was quite rusty is a bit of an understatement).

Though the outcome is a bit different than what I hoped to get initially, I still believe I captured the essence of what I wanted.

code highlights and improvements

while the most complicated part of my code is the movement, I’m actually prouder of the scaling of the cubes because I personally feel it is much more intuitive and noticeable.

//get the scaling factor based on the cursor and where the cube is currently
const scaleFactor = map(dist(mouseX, mouseY, this.position.x, this.position.y), 0, width, 0.5, 2.0);
const scaledSize = this.size * scaleFactor;

I also like the subtle disco ball touch I added, because I think it helps convey the energy/vibe of the piece.

function discoBall(cursorPosition){
  let flashing = frameCount % 60
  push();
  strokeWeight(0.2)
  stroke(255)
  if (flashing < 20) {
    fill("#d2d0d2");
  }else if (flashing < 40){
    fill(color(255, 250, 199))
  }else {
    fill(color(0, 57, 163));
  }
  translate(cursorPosition);
  sphere(15, 10, 10);
  pop();
}

For future improvements, I’d like to fix the movement so that it follow the cursor more precisely, or at least that the movement of the cubes according to the cursor is much more intuitive. The mathematics in it is a bit messy, and i was constantly adding new aspects to fix problems that were arising in the movement (for example, I added the separate method after all the cubes began to be in exactly one point, but then had to add cohere after I saw that they were super far apart) and the end result is something else entirely. While I am happy with how it looks, I want to approach movement in my piece in a more organized manner.

 

 

For this week’s assignment, I drew inspiration from the Impressionist art movement, specifically the post-impressionist Van Gogh and his famous Starry Night oil painting. I wanted to recreate the swirling pattern in the form of generative art.

Here is the sketch:

 This code generates its visual effect by simulating a dynamic movement of particles using object-oriented programming. Each particle’s position and movement are controlled by vectors that are affected by Perlin noise, creating smooth and organic trajectories. The particles transition in color as they move, smoothly blending between two predefined colors based on their angle of movement. The result is a gradual build-up of a visual pattern that also transitions harmoniously between colors.

There were two interesting things I learned with this code. The first was controlling the noise scale. By dividing the coordinates by a constant value (in this case, 100), I managed to influence the scale of the noise. Smaller divisors resulted in finer-grained noise, while larger divisors resulted in smoother noise. In other words, the divisor determines how quickly the noise changes as the particle moves across the canvas. By using a larger divisor I was able to create a more gradual variation.

update() {
  //Calculating the angle based on Perlin noise
  this.angle = noise(this.position.x/100 , this.position.y/100) * TWO_PI;
  // Move the particle's position based on its angle and speed
  this.position.x = this.position.x + cos(this.angle) * this.speed;
  this.position.y = this.position.y + sin(this.angle) * this.speed;

}

The second lesson regarded the transition of colors and the lerpColor() function. I began by defining two colors, ‘color1’ and ‘color2’. The ‘angleIndex’ is a result of mapping the particle’s angle to a value between 0 and 1. lerpColor() then assigns a color between the colors 1 and 2 based on the colorIndex, resulting in a gradient-like color change for each particle. Finally, it sets the stroke color to the blended color and draws a point at the particle’s position, creating a visually appealing color transition effect as the particles move. I wanted to focus more on the aesthetic appeal with this assignment, and the lerColor() assisted me a lot with that.

display() {
    strokeWeight(random(0.5, 1.5));

    // Define the two colors for the transition
    let color1 = color('#274df5'); 
    let color2 = color('#fafcfb');
    
    // map the color based on the angle for smooth transitions between colors
    let angleIndex = map(this.angle, 0, TWO_PI, 0, 1);

    // Interpolating between the two colors based on angleFactor
    let blend = lerpColor(color1, color2, angleIndex);
    
    stroke(blend);
    point(this.position.x, this.position.y);
}

As I was browsing on Pinterest for color and pattern inspiration, I came across Cameron Beccario’s near real-time visualization of global weather conditions. I found his project very interesting, interactive and somewhat connected to our last week’s reading (Casey Reas’ talk, especially the part about data visualization). Beccario’s choice of visuals and aesthetics also appeared similar to what I was going for with my sketch, thus I thought I would share:

https://earth.nullschool.net/#current/wind/surface/level/orthographic=-25.43,16.43,387

 

When I mention that I study Interactive Media, the response is often followed by a “What’s that?” To explain, I only give the example of the piano-ball piece in Professor Sherwood’s office, which produces different sounds when interacted with. After reading Crawford’s insights, I definitely have a better explanation to provide by talking about the dynamic two-way process, not one-sided reactions. This distinction makes me question my past experiences: did I truly interact, or did I merely react? What makes engagement meaningful, avoiding passivity and limitations?

Crawford’s views that speaking, thinking, and listening are fundamental to interaction makes perfect sense in human-human interactions. But what about human-computer interaction? Can an absence of one component, compensated by two others, make the interaction as unsatisfactory as he suggests?

Considering Crawford’s thoughts on user interface, interactive design and things that one should’t consider interactive, I recall a Netflix series I had seen, “You vs. Wild” with Bear Grylls. While it involves impressive design, filming, and conversations, its interactivity is scripted, lacking real-time interaction with Bear Grylls. This still provides users with an interactive experience, however, it might not be considered Interactive since it sways away from Crawford’s definition.

His final point, “Good interactivity design integrates form with function,” applies broadly, including to the Netflix series, where form (aesthetics and immersion) and function (user experience and purpose) merge quite well thus making it interactive.

In a nutshell, Crawford’s insights challenge conventional notions of interaction, prompting me to consider what truly constitutes interactivity. Whether in human-computer interaction or entertainment like “You vs. Wild,” the integration of form with function remains an important aspect of creating engaging and meaningful interactive experiences. It’s a reminder for me that in interactive design, aesthetics and functionality should move together to elevate the user’s overall experience.

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/