Category: F2024 – Nimrah

 

Listening to the Artists talk about MUJO gave me another perspective on how to see their work. The artist talk was helpful in two ways 1) it got me thinking of the work process from a professional perspective, not just projects for classes. It gave me an insight into how the workflow goes and how exciting it can be. 2) The talk opened my eyes to the artwork itself, the meaning behind each part, and how it all comes together to support and push a concept, it is like each part harmonizes to drive the concept forward. Additionally, the installation got me thinking of how concepts such as assembling and disassembling can be symbolically expressed through dance, sound, the dessert, and the sand.

Further, the curation of the project to me was interesting because it was site specific and had different ideas that both work well towards the concept. I think, often artists have to make decisions to change some parts of how the artwork is presented to adapt to the atmosphere and environment surrounding it.

References:

https://www.aaron-sherwood.com/works/mujo/

Concept

The goal was to make a virtual version of that beloved city rug, where a digital car can drive across different sections of the map, seamlessly moving from one side to the other. The two-part background gives the feel of exploring a bigger city, with distinct areas to travel through, just like on those old playmats.

Code Structure

1. Main Components:
   • The project relies on three key files: sketch.js, space.js, and vehicle.js
   • sketch.js initializes the canvas, loads images, and manages the primary simulation loop.
   • space.js defines the space class responsible for displaying the background image and wrapping the car’s position when it exits the visible canvas.
   • vehicle.js includes the vehicle class, which controls the car’s movement and behaviors.

1. Images and Background:
   • I used two images for the playmat, playmate0.jpg, and playmate1.jpg, representing the right and left sides of the digital rug. These images are loaded in the preload() function of sketch.js and displayed conditionally based on the car’s position on the canvas.

1. Vehicle Movement:
   • The car has a random wandering behavior, simulating the playful movement of a child’s toy car on a mat.
   • The wrap() method in space.js ensures the car stays within the canvas bounds by wrapping it around horizontally and vertically if it moves out of view.

1. Dynamic Background Switching:
   • The show() method in space.js dynamically changes the displayed background image based on the car’s location on the canvas. This method ensures that only one background is visible at a time, creating a realistic effect as the car transitions from one side of the playmat to the other.

Code Highlights

Here’s a snippet of how the show() function in space.js was set up to handle dynamic background switching based on the car’s position:

class Space {
    constructor(sectorWidth, sectorHeight) {
        this.sectorWidth = sectorWidth / 2;
    }

    show(vehicle) {
        let sectorIndex = vehicle.pos.x < this.sectorWidth ? 0 : 1;

        if (map[sectorIndex]) {
            image(map[sectorIndex], 0, 0, width, height);
        }

        fill(255);
        textSize(20);
        textAlign(CENTER, CENTER);
        let sideName = sectorIndex === 0 ? "Left Side" : "Right Side";
        text(sideName, vehicle.pos.x, vehicle.pos.y - 20);
    }

    wrap(vehicle) {
        if (vehicle.pos.x < 0) vehicle.pos.x = width;
        else if (vehicle.pos.x > width) vehicle.pos.x = 0;

        if (vehicle.pos.y < 0) vehicle.pos.y = height;
        else if (vehicle.pos.y > height) vehicle.pos.y = 0;
    }
}

This structure allows the playmat simulation to function smoothly, with the car wrapping around the canvas edges and triggering the appropriate background based on its location.

Embedded Sketch

Challenges and Solutions

• Image Loading Issues: Initially, there were problems loading the images due to incorrect file paths. By ensuring the correct file names and paths, I resolved these loading errors.
• Ensuring Proper Wrapping: The most complex aspect was achieving seamless wrapping of the car’s position without creating visual artifacts or making both images appear simultaneously. I refined the wrap() and show() functions in space.js to ensure that only the relevant background image is displayed as the car moves.

Looking Back and Forward

This project captures a slice of childhood by turning a traditional playmat into an interactive digital experience. Seeing the car navigate from one side to the other, transitioning between different parts of the city, really brings back memories of those endless games with toy cars.

In the future, it would be fun to add more interactivity, like giving users control over the car’s direction or adding sound effects to simulate the familiar hum of toy car wheels on the carpet.

 

Source: The Coding Train – Nature of Code Series

Seeing MUJO was like seeing the desert transformed into a canvas for movement and light. The whole performance used the shifting sands and dunes to show how things are always changing, just like the wind reshapes the desert. Watching the visuals blend into the natural landscape made the idea of impermanence feel real.

What really struck me was how digital art brought out the idea without copying nature exactly. The projections and sounds created this amazing atmosphere, where it felt like the dancers were moving with and against the landscape. It made me realize that digital art can capture deep ideas in a way that feels both familiar and new.

Seeing digital art used in such a thoughtful way here makes me excited about the future of the arts in the UAE. It’s a reminder that our landscapes and stories can be shared with technology, not to replace nature, but to enhance our connection to it.

 

The guest lecture was really interesting and got me thinking about how everything changes—whether it’s sand dunes moving in the wind waves in the ocean or even our own thoughts and feelings. The way digital art was used to show things coming together staying for a while and then breaking apart was really creative. It made the idea of impermanence feel real even through technology. I realized that digital art can actually be a great way to explore big ideas in a new and modern way.

I liked that the visuals were not only beautiful but also had meaning. They weren’t trying to copy nature exactly but instead capture its essence in a unique way. I think that’s what makes digital art special—it can show things that are hard to put into words. At first I wasn’t sure if digital art could really make us feel the raw nature of change but this lecture made me more open to the idea. It left me excited to talk in class about whether digital art can help us understand abstract ideas or even make them feel more real.

Concept:
The core idea of this assignment is to create a realistic Fly Spray simulation where:

1. Flies are attracted to food when it appears on the canvas.
2. Flies flee from a spray can when it gets too close.
3. The spray can follows the mouse cursor and sprays a burst when flies get too close.
   To make this happen, I used steering behaviors, a concept popularized by Craig Reynolds, to model realistic movement. Steering behaviors are all about adjusting an object’s acceleration to achieve goals like fleeing, seeking, and arriving.

Embedded Sketch:

The code for this fly spray simulation focuses on three main parts: flies, food, and the fly spray. Each of these parts has its own behaviors and interactions, using a coding technique called steering behaviors.

The flies move randomly but change direction based on what’s nearby. If food appears within a certain range, the flies move toward it using an attraction behavior. However, if the fly spray gets too close, the flies switch to a fleeing behavior, quickly steering away to escape. This creates a realistic effect of flies avoiding the spray while seeking food.

The food appears randomly on the canvas for a limited time, attracting nearby flies. It disappears after a while and then reappears at a new spot. This makes the flies constantly adjust their paths, adding excitement to the simulation.

The fly spray follows the mouse using a smooth arrive behavior and sprays when flies are within a certain range. The spray creates a visual burst when close to flies, simulating a spraying action. The code uses a loop to constantly check distances between the flies, food, and spray, adjusting their movements to create a lively and interactive simulation.

Code Snippet: 

Here’s the part of the code where I handled the spray effect when flies come near the fly spray:

// Spray effect when close to a fly
sprayEffect(flyPos) {
  let distance = dist(this.pos.x, this.pos.y, flyPos.x, flyPos.y);
  if (distance < sprayRadius) {
    push();
    translate(this.pos.x, this.pos.y);
    rotate(this.vel.heading());
    noStroke();
    fill('rgba(0, 0, 0, 0.5)'); // Black spray effect with transparency
    triangle(10, -60, 60, -100, 60, -20); // Bigger spray burst
    pop();
  }
}

I’m particularly proud of this snippet because it brings the fly spray to life! The spray burst animates when flies come too close, making the simulation feel more realistic and interactive. It’s a simple but satisfying visual element that adds a lot of character to the spray can.

Challenges Faced:
Like any coding project, this one came with its fair share of challenges:

1. Ensuring Consistent Spray Behavior: Initially, the spray effect wasn’t triggering consistently, and it sometimes missed flies that were within range. I had to fine-tune the logic and adjust the proximity checks to make sure the spray worked every time.
2. Balancing Attraction and Repulsion: Making the flies switch seamlessly between attraction (to food) and repulsion (from the spray) required careful control of their acceleration and speed. It was tricky to get the right balance so that the flies didn’t act erratically.
3. Managing Timing: The food appears randomly and disappears after a set duration, which added an extra layer of complexity. I used a timer to handle the food’s lifecycle, but it took some tweaking to get it to behave consistently.

Future Improvements:
There’s always room for improvement! Here are some ideas I’d love to implement in the future:

1. More Realistic Fly Movements: Right now, the flies have basic behaviors. Adding more randomness and making them swarm together around food could add realism.
2. Better Spray Animation: The spray burst is a simple triangle, but I’d love to add particles or make it look more like a mist.
3. Multiple Food Sources: Currently, only one food source appears at a time. Adding multiple food sources that attract flies in different directions would make the simulation more dynamic.
4. Scoring System: Adding a scoring system could make the simulation more game-like, where users earn points for getting close to the flies.

Concept:

For my week 8 project, I drew inspiration from the iconic “Jaws” movie. The basic idea was to recreate a virtual ocean where sharks roam and fish (or particles) swim around, constantly trying to avoid becoming shark food! The shark wanders around the canvas, much like how predators move unpredictably in real life, while the particles represent smaller fish, using a simple fleeing mechanism to stay out of the shark’s way.

I wanted to build a simple but dynamic scene that felt alive, where the fish-like particles would gracefully move around but change their behavior when a shark approached. The scene gives a sense of interaction between predator and prey, bringing the ocean to life.

Embedded Sketch:

Key Features:

• Wandering Sharks: The shark doesn’t just move in straight lines. Instead, it “wanders” around the screen, changing direction smoothly using noise-based movement. This gives the shark a more natural and unpredictable feel, like a real predator hunting its prey.
• Fleeing Particles (Fish): The particles (representing fish) swim around randomly, but when the shark gets too close, they immediately “flee.” I programmed them to avoid the shark by detecting when it comes within a certain distance and steering away, adding a subtle but clear predator-prey relationship.
• Flowing Ocean Background: To immerse the viewer in an underwater world, I added a flowing ocean background that serves as the setting for this shark-fish interaction. The ocean gives a calming effect while the shark-fish chase adds the excitement.

Code Highlight:

One piece of code I’m especially proud of is the fleeing mechanism for the particles. It’s simple but effective, and it adds a lot of realism to the scene. Here’s a snippet of how it works:

// Ball class to define wandering shark behavior
class Ball {
  constructor() {
    this.position = createVector(random(width), random(height)); // Random starting position
    this.angle = random(TWO_PI); // Random initial angle for wandering
    this.speed = 2; // Speed of the shark's movement
    this.noiseOffset = random(1000); // Noise offset for smooth wandering
  }

  update() {
    // Use noise for smooth direction change
    this.angle += map(noise(this.noiseOffset), 0, 1, -0.1, 0.1); // Gradual direction change
    this.velocity = createVector(cos(this.angle), sin(this.angle)).mult(this.speed); // Velocity based on angle
    this.position.add(this.velocity); // Move the shark based on velocity

    // Keep the shark within the canvas, reverse direction if it hits edges
    if (this.position.x > width || this.position.x < 0) {
      this.position.x = constrain(this.position.x, 0, width);
      this.angle += PI; // Flip direction
    }
    if (this.position.y > height || this.position.y < 0) {
      this.position.y = constrain(this.position.y, 0, height);
      this.angle += PI; // Flip direction
    }
    
    this.noiseOffset += 0.01; // Increment noise for smooth wandering motion
  }

  display() {
    // Draw the shark image instead of a shape
    imageMode(CENTER); // Center the shark image on the position
    image(sharkImage, this.position.x, this.position.y, 100, 100); // Adjust size of the shark image
  }
}

// Point class for the particles (fish)
class Point {
  constructor(xTemp, yTemp) {
    this.position = createVector(xTemp, yTemp); // Random initial position for particles
    this.velocity = createVector(0, 0);  // Initial velocity
    this.color = color('blue');  // Color of the particles
  }

  // Display the particle
  display() {
    strokeWeight(2); // Set particle thickness
    stroke(this.color); // Set particle color
    point(this.position.x, this.position.y); // Draw particle at its current position
  }

  // Update particle's position based on noise
  update() {
    // Use Perlin noise for smooth, organic movement
    let n = noise(this.position.x * noiseScale, this.position.y * noiseScale, frameCount * noiseScale * noiseScale);
    let a = TAU * n; // Convert noise value to an angle
    this.velocity.x = cos(a); // Calculate new velocity based on angle
    this.velocity.y = sin(a); // Calculate new velocity based on angle
    this.position.add(this.velocity); // Update the particle's position

    // Reset particle to a random position if it goes off the screen
    if (!this.onScreen()) {
      this.position.x = random(width);
      this.position.y = random(height);
    }
  }

  // Check if the particle is still on the screen
  onScreen() {
    return (
      this.position.x >= 0 && this.position.x <= width &&
      this.position.y >= 0 && this.position.y <= height
    );
  }

  // Flee behavior: particles avoid the shark (ball)
  avoid(ball) {
    let distance = dist(this.position.x, this.position.y, ball.position.x, ball.position.y); // Calculate distance to the shark
    let radius = 50;  // Define the radius within which particles start fleeing

    if (distance < radius) {
      // Calculate direction to flee from the shark
      let flee = p5.Vector.sub(this.position, ball.position);
      flee.normalize();  // Normalize to ensure consistent speed
      flee.mult(2);  // Scale the fleeing force
      this.position.add(flee);  // Move the particle away from the shark
    }
  }
}

This code makes each particle detect how close the shark is and react accordingly. When the shark enters a certain range, the particles move away, giving the illusion that they are fleeing in fear. It’s simple but adds so much character to the overall interaction.

Future Improvements:

While I’m happy with how the project turned out, there are always ways to make it better. Here are some ideas for future improvements:

• More Realistic Shark Movements: While the wandering behavior works, I’d love to add more realism to the shark’s movements—perhaps making it faster when it spots fish or slowing down after a “hunt.”
• Fish Grouping Behavior: Right now, the particles move independently, but it would be cool to introduce a “schooling” behavior, where fish move in groups. This could make the escape from the shark even more dynamic.
• Improved Visual Effects: Adding more ocean elements like bubbles, light rays, or even underwater sounds would elevate the experience and make it feel more like a deep-sea dive.

 

MUJO – 無常 (Japanese for impermanence)

When Aaron and Kiori talked about MUJO, I found the whole concept really intriguing. The idea of using the desert as a stage, with visuals projected onto the dunes, felt so different from anything I’d ever seen. It’s based on the Japanese idea of “impermanence,” how everything in life is always changing, just like sand being shaped by the wind. The dancers move on these dunes, and the visuals mimic that constant building up and falling apart, like sand or even thoughts in our minds.

The way they described the performance made me think about how we try to build things in life, but nothing really stays the same. The sound, the movement, and the visuals all come together to show that struggle, which I think makes it even more powerful. The installation part of it, with videos and sound, takes that same feeling and turns it into something you can experience in a gallery.

Even though I haven’t seen it live, I really connected with the concept. It seems like MUJO would be more than just a performance—it would leave you reflecting on how temporary everything is, but in a beautiful way.

Concept

This weeks sketch is a fun, interactive scene where a police car chases a robber car, and the user controls the robber car’s movement. While the user moves the robber car around the screen, the police car automatically chases it, creating an exciting dynamic. Ordinary cars also drive randomly across the road, adding to the lively atmosphere of the chase.

Code Highlight
One part of the code that I’m really proud of is the chase function in the Car class. This function helps the police car determine how to move toward the robber car:

chase(target) {
  let force = p5.Vector.sub(target, this.pos); // Calculate direction to the target
  force.setMag(this.maxSpeed); // Set the force's magnitude to max speed
  force.sub(this.vel); // Adjust force based on current velocity
  force.limit(this.maxForce); // Limit the force to max steering
  return force; // Return the calculated force
}

This function uses math to calculate the direction the police car should go to catch the robber car. It ensures that the police car moves smoothly and quickly toward its target, making the chase feel realistic.

Embedded Sketch

Reflection and Future Ideas
I really liked how this project turned out! The chase between the police car and the robber car feels dynamic and engaging. However, there is always room for improvement. In the future, I could add more complicated steering behaviors, like making the ordinary cars avoid the police car or work together. I could also include obstacles on the road or change the weather to make it more challenging.

Another idea is to add a score system based on how long the police car can chase the robber or how many collisions happen, adding some competition to the game. I’d love to make the visuals more interesting too, with animated cars and a detailed background.

I really enjoyed the guest lecture by Aaron Sherwood and Kiori Kawai from Purring Tiger. They shared their project, MuJo, which mixes art and technology in an exciting way. One interesting part of their talk was how they began with interactive installations in cities before moving to the desert. They used projections on the sand dunes to create a unique experience, showing how nature can inspire art.

Aaron mentioned how he often discovers cool ideas by accident while coding. He talked about experimenting with different algorithms, which sometimes led to unexpected and beautiful results. This idea of “happy accidents” really resonated with me. It shows that creativity can come from trying new things, even when things don’t go as planned.

The theme of impermanence was also important in their work. They explained how both the art and the sand dunes change over time, which reflects the idea that nothing stays the same. I liked how they connected this concept to storytelling, showing how every performance is like a journey with its own beginning, middle, and end. Overall, the lecture opened my eyes to new ways of thinking about art and design. I left feeling excited to explore my creativity and connect my work to the world around me, just as they have done with MuJo.

 

This version of Simple Harmonic Motion will feature multiple particles moving in harmonic motion along different axes. Each particle’s motion is governed by sine and cosine functions, and we’ll experiment with adding layers of complexity by adjusting frequency, amplitude, and phase shift over time. The interaction of these particles will create a visually intriguing harmonic system.

Design Approach

1. Multiple Oscillators: Each oscillator (particle) will move along one or two axes following SHM principles.
2. Phase Shifting: The oscillators will have slight differences in their phase, creating beautiful and non-repetitive motion patterns.
3. Layering Frequencies: Multiple sine and cosine waves will be layered to simulate interacting harmonic systems.
4. Memo Akten’s Influence: Drawing from Memo Akten’s complex motion systems, we’ll make the motion more intricate by introducing randomness to parameters like amplitude and frequency over time.

Code design

• Particles: Each particle is modeled as a point oscillating based on sine and cosine functions, representing harmonic motion along both the X and Y axes.
• Amplitude and Frequency: The amplitude controls how far the particle moves, while the frequency controls how fast it oscillates.
• Phase Shift: Each particle starts with a random phase, ensuring their motion is out of sync, creating an intricate, layered pattern.

let particles = [];

function setup() {
  createCanvas(800, 800);
  for (let i = 0; i < 10; i++) {
    particles.push(new Particle(random(50, 100), random(50, 200), random(0.02, 0.05)));
  }
}

class Particle {
  constructor(amplitudeX, amplitudeY, frequency) {
    this.amplitudeX = amplitudeX; // Amplitude of motion in X
    this.amplitudeY = amplitudeY; // Amplitude of motion in Y
    this.frequency = frequency; // Frequency of oscillation
    this.angle = random(TWO_PI); // Starting phase angle
  }

  update() {
    // Increment angle over time to simulate oscillation
    this.angle += this.frequency;
  }

  display() {
    let x = this.amplitudeX * cos(this.angle); // Simple harmonic motion in X
    let y = this.amplitudeY * sin(this.angle); // Simple harmonic motion in Y
    
    noFill();
    stroke(255, 200);
    ellipse(x, y, 50, 50); // Draw particle at (x, y)
  }
}

View code