As computing becomes more ubiquitous in our objects, designers need to be more aware of how to design meaningful interactions into electronically enhanced objects. At the University of Washington, a class of junior Interaction Design majors is exploring this question. These pages chronicle their efforts.

Friday, October 5, 2018

Particles Processing Fountain Remix


I started off with an effect that looked like a sparkler being twirled around on the 4th of July and I wanted to try and make it look more like a fountain firework or almost like a water fountain. I changed the gravity and control and the particles along with some color changes and frame rate. 

Original Effect

Remixed Effect



Particles Tab


// Particles, by Daniel Shiffman.

ParticleSystem ps;
PImage sprite;  

void setup() {
  size(1024, 468, P2D);    
// I changed the height to give it more of a dynamic canvas. 
  orientation(LANDSCAPE);
  sprite = loadImage("sprite.png");
  ps = new ParticleSystem(5000);
// I cut the ParticleSystem half, to make the speed of the particles movement quicker to add more excitement to it. 

  // Writing to the depth buffer is disabled to avoid rendering
  // artifacts due to the fact that the particles are semi-transparent
  // but not z-sorted.
  hint(DISABLE_DEPTH_MASK);

void draw () {
  background(200);
// I changed the color of the background to add contrast to the changed color of particles. 
  ps.update();
  ps.display();
  
  ps.setEmitter(mouseX,mouseY);
  
  fill(255);
  textSize(16);
  text("Frame rate: " + int(frameRate), 10, 20);
  
}

Particle Tab

class Particle {

  PVector velocity;
  float lifespan = 255;
  
  PShape part;
  float partSize;
 
 PVector gravity = new PVector(0,0.3);
// I changed the gravity to 0.3 instead 0.1 so it would be pulled down faster and create more of a fountain look. 

  Particle() {
    partSize = random(10,60);
    part = createShape();
    part.beginShape(QUAD);
    part.noStroke();
    part.texture(sprite);
    part.normal(0, 0, 1);
    part.vertex(-partSize/2, -partSize/2, 0, 0);
    part.vertex(+partSize/2, -partSize/2, sprite.width, 0);
    part.vertex(+partSize/2, +partSize/2, sprite.width, sprite.height);
    part.vertex(-partSize/2, +partSize/2, 0, sprite.height);
    part.endShape();
    
    rebirth(width/2,height/2);
    lifespan = random(255);
  }

  PShape getShape() {
    return part;
  }
  
  void rebirth(float x, float y) {
    float a = random(TWO_PI);
    float speed = random(0.5,4);
    velocity = new PVector(cos(a), sin(a));
    velocity.mult(speed);
    lifespan = 255;   
    part.resetMatrix();
    part.translate(x, y); 
  }
  
  boolean isDead() {
    if (lifespan < 0) {
     return true;
    } else {
     return false;
    } 
  }
  

  public void update() {
    lifespan = lifespan - 1;
    velocity.add(gravity);
    
  part.setTint(color(0,128,148, lifespan));
// I changed the color of the particles to be a blue.
    part.translate(velocity.x, velocity.y);
  }
}

ParticleSystem Tab

class ParticleSystem {
  ArrayList<Particle> particles;

  PShape particleShape;

  ParticleSystem(int n) {
    particles = new ArrayList<Particle>();
    particleShape = createShape(PShape.GROUP);

    for (int i = 0; i < n; i++) {
      Particle p = new Particle();
      particles.add(p);
      particleShape.addChild(p.getShape());
    }
  }

  void update() {
    for (Particle p : particles) {
      p.update();
    }
  }

  void setEmitter(float x, float y) {
    for (Particle p : particles) {
      if (p.isDead()) {
        p.rebirth(x, y);
      }
    }
  }

  void display() {

    shape(particleShape);
  }
}

No comments:

Post a Comment