Week 12 _ Final Draft 2 Progress _ Shadowing Presence

Concept:

This project is a journey of exploring the concept of digital presence. The idea of the project is being physically part of the work. To do this, I explore particle system interaction with the human body through a web camera where both the element of interaction and the body are made of particles. This project is inspired by Zach Lieberman’s work, which focuses on making digital interactive environments that invite participants to become performers. 

Progress: 

I initially began designing the interface of the project and the basic interaction elements, which are the buttons. I had some bugs regarding when a button should appear and when it should disappear, so I had to reorganize the code to make it work better. As a result, I decided to make the size buttons () and the color buttons () an array, which made it easier for me to apply them to the particle system as the project progressed. I added more functions to handle the buttons for each page: startbutton() and resetbutton(). For the main page buttons, I added a function to create them and another to remove them, and then some buttons needed their functions, such as the save button.  After that, I added the particle system, which is inspired by the ASCII text Image by The Coding Train.  The particle systems are initially randomly placed and then move toward the positions. The particle’s color is based on brightness, and the size is between 2 and 7, mapped based on brightness so that the darker ones are smaller and the brighter ones are bigger. Now, in terms of how the particles are drawn. I initially load the video image pixels, then map the brightness of each pixel ( which takes four places in the index) from the RGB values, and then render it. 

// particle system
function drawParticleSystem() {
  video.loadPixels();
for (let i = 0; i < particles.length; i++) {
    const x = i % video.width;
    const y = floor(i / video.width);
    const pixelIndex = (x + y * video.width) * 4;

    const r = video.pixels[pixelIndex + 0];
    const g = video.pixels[pixelIndex + 1];
    const b = video.pixels[pixelIndex + 2];
    const brightness = (r + g + b) / 3;

    particles[i].update(brightness);
    particles[i].show();
  }
}

// particle class
class Particle {
  constructor(x, y) {
    this.pos = createVector(random(width), random(height));
    this.target = createVector(x, y);
    this.vel = p5.Vector.random2D().mult(3);

    //size and color of particles
    this.size = 2;
    this.color = color(255);
  }

  update(brightness) {
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator
    //       conditional (ternary) operator
    // the brightness value is less than 130 = darker region, the particle's color is set to black. vise versa
    this.color = brightness < 130 ? color(0) : color(255);

    // Smooth return to target position
    let dir = p5.Vector.sub(this.target, this.pos);
    this.vel.add(dir.mult(0.09));
    this.vel.limit(2);
    this.pos.add(this.vel);

    // Adjust particle size dynamically
    this.size = map(brightness, 0, 255, 2, 7);
  }

  show() {
    noStroke();
    fill(this.color);
    circle(this.pos.x, this.pos.y, this.size / 2);
  }
}

 

Sketch:

 

Future Work:

There is still a lot of work to be done for the final project. I want (1) to work more on the interface of the project in terms of design. Additionally, I want (2) to add another particle system, which will be the second body that interacts with the body in the digital world. These particles will take the color and the size the user picks before starting the experience. These particles will be able to detect motion in the video and follow it. 

Resources: