# Change color with keyPressed and update color

**URL:** <https://discourse.processing.org/t/change-color-with-keypressed-and-update-color/7645>\
**Category:** Coding Questions\
**Created:** [January 19, 2019, 2:20pm UTC](https://discourse.processing.org/t/change-color-with-keypressed-and-update-color/7645 "2019-01-19T14:20:48Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![zinni](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zinni/32/3303_2.png) [@zinni](https://discourse.processing.org/u/zinni)\
**Post date:** [January 19, 2019, 2:20pm UTC](https://discourse.processing.org/t/change-color-with-keypressed-and-update-color/7645/1 "2019-01-19T14:20:48Z")

</div>

I just take this example of a particle system:  
[[https://processing.org/examples/simpleparticlesystem.html](https://processing.org/examples/simpleparticlesystem.html)]  
and made some changes.  
My goal is to change the colors with keyPressed. With my code the variables of r1,b1,g1 are changing when the program runs, but there is no effect on the color of the ellipses.  
I don’t really have an idea where to place the code.  
Does anybody have a suggestion?  
Thank you

```auto
ParticleSystem ps;

int r1 = 255;
int g1 = 0;
int b1 = 155;

int r2 = 0;
int g2 = 155;
int b2 = 255;

color color1 = color(r1, g1, b1);
color color2 = color(r2, g2, b2);

void setup() {
  size(800, 400);
  ps = new ParticleSystem(new PVector(width/2, height/2));
}

void draw() {
  background(0);
  ps.addParticle();
  ps.run();
}

// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles 

class ParticleSystem {
  ArrayList<Particle> particles;
  PVector origin;

  ParticleSystem(PVector position) {
    origin = position.copy();
    particles = new ArrayList<Particle>();
  }

  void addParticle() {
    particles.add(new Particle(origin));
  }

  void run() {
    for (int i = particles.size()-1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.run();
      if (p.isDead()) {
        particles.remove(i);
      }
    }
  }
}

// A simple Particle class---------------------------------------------

class Particle {
  PVector position;
  PVector velocity;
  PVector acceleration;
  float lifespan;

  Particle(PVector l) {
    acceleration = new PVector(random(-0.05, 0.05), random(-0.05, 0.05));
    velocity = new PVector(random(-1, 1), random(-2, 0));
    position = l.copy();
    lifespan = 255.0;
  }

  void run() {

    // Change the color -------------------------------------------
    if (keyPressed) {
      if (key == 'b' || key == 'B') {
        r1= 0;
        g1= 0;
        b1= 0;
      }
    }

    update();
    display();
    println(r1, g1, b1);
  }

  // Method to update position-------------------------------------------
  void update() {
    velocity.add(acceleration);
    position.add(velocity);
    lifespan -= 1.0;
  }

  // Method to display----------------------------------------------------
  void display() {
    stroke(255, lifespan);
    fill(lerpColor(color1, color2, (((millis()/5000)%2==0)?millis()%5000:5000-millis()%5000)/5000.0), lifespan);
    ellipse(position.x, position.y, 200-lifespan, 200-lifespan);
  }

  // Is the particle still useful?
  boolean isDead() {
    if (lifespan < 0.0) {
      return true;
    } else {
      return false;
    }
  }
} 

```

---

<div class="post-metadata">

**Author:** ![Architector\_4](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/architector_4/32/813_2.png) [@Architector\_4](https://discourse.processing.org/u/Architector_4)\
**Post date:** [January 19, 2019, 2:31pm UTC](https://discourse.processing.org/t/change-color-with-keypressed-and-update-color/7645/2 "2019-01-19T14:31:58Z")

</div>

Well, the problem is that right after the `r1 g1 b1 etc...` values are made, there are 2 other values - `color1` and `color2`.  
Another thing to note is that the `if (keyPressed)...` part of your code is run inside of every single particle, essentially doing the same thing as many times as there are particles. Considering all particles use the same `color1` and `color2` variables, it makes sense to change them only once.

I suggest making a function definition `keyPressed()` and putting code to change your colors in there. So, _outside of any classes_ add something like this:

```auto
void keyPressed(){
  if(key == 'b' | key == 'B'){
    color1 = color(random(255),random(255),random(255));
  } else if(key == 'n' | key == 'N'){
    color2 = color(random(255),random(255),random(255));
  }
}

```

This changes `color1` to a random color when you press `B`, or `color2` when you press `N`.

This function is run only once when you press a key, so if you want to use it further for more advanced keyboard controls, you can also write `void keyReleased(){...` to define what happens when a key is released.

---

<div class="post-metadata">

**Author:** ![zinni](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zinni/32/3303_2.png) [@zinni](https://discourse.processing.org/u/zinni)\
**Post date:** [January 19, 2019, 2:50pm UTC](https://discourse.processing.org/t/change-color-with-keypressed-and-update-color/7645/3 "2019-01-19T14:50:07Z")

</div>

Thank you. This works 🙂  
I also deleted the r1,g1,b1 variables.

```auto
ParticleSystem ps;

int color1 = color(255, 0, 155);
int color2 = color(0, 155, 255);

void setup() {
  size(800, 400);
  ps = new ParticleSystem(new PVector(width/2, height/2));
}

void draw() {
  background(0);
  ps.addParticle();
  ps.run();
}

// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles 

class ParticleSystem {
  ArrayList<Particle> particles;
  PVector origin;

  ParticleSystem(PVector position) {
    origin = position.copy();
    particles = new ArrayList<Particle>();
  }

  void addParticle() {
    particles.add(new Particle(origin));
  }

  void run() {
    for (int i = particles.size()-1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.run();
      if (p.isDead()) {
        particles.remove(i);
      }
    }
  }
}

// A simple Particle class---------------------------------------------

class Particle {
  PVector position;
  PVector velocity;
  PVector acceleration;
  float lifespan;

  Particle(PVector l) {
    acceleration = new PVector(random(-0.05, 0.05), random(-0.05, 0.05));
    velocity = new PVector(random(-1, 1), random(-2, 0));
    position = l.copy();
    lifespan = 255.0;
  }

  void run() {
    update();
    display();
    println(color1, color2);
  }

  // Method to update position-------------------------------------------
  void update() {
    velocity.add(acceleration);
    position.add(velocity);
    lifespan -= 1.0;
  }

  // Method to display----------------------------------------------------
  void display() {
    stroke(255, lifespan);
    fill(lerpColor(color1, color2, (((millis()/5000)%2==0)?millis()%5000:5000-millis()%5000)/5000.0), lifespan);
    ellipse(position.x, position.y, 200-lifespan, 200-lifespan);
  }

  // Is the particle still useful?
  boolean isDead() {
    if (lifespan < 0.0) {
      return true;
    } else {
      return false;
    }
  }
}

void keyPressed() {
  if (key == 'b' | key == 'B') {
    color1 = color(random(255), random(255), random(255));
  } else if (key == 'n' | key == 'N') {
    color2 = color(random(255), random(255), random(255));
  }
}

```

---

<div class="post-metadata">

**Author:** ![zinni](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zinni/32/3303_2.png) [@zinni](https://discourse.processing.org/u/zinni)\
**Post date:** [January 19, 2019, 9:18pm UTC](https://discourse.processing.org/t/change-color-with-keypressed-and-update-color/7645/4 "2019-01-19T21:18:19Z")

</div>

Ok. Here is my code for that issue.

```auto
ParticleSystem ps;

int color1 = color(255, 0, 155);
int color2 = color(0, 155, 255);

void setup() {
  fullScreen();
  ps = new ParticleSystem(new PVector(width/2, height/2));
}

void draw() {
  background(0);
  ps.addParticle();
  ps.run();
}

// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles 

class ParticleSystem {
  ArrayList<Particle> particles;
  PVector origin;

  ParticleSystem(PVector position) {
    origin = position.copy();
    particles = new ArrayList<Particle>();
  }

  void addParticle() {
    particles.add(new Particle(origin));
  }

  void run() {
    for (int i = particles.size()-1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.run();
      if (p.isDead()) {
        particles.remove(i);
      }
    }
  }
}

// A simple Particle class---------------------------------------------

class Particle {
  PVector position;
  PVector velocity;
  PVector acceleration;
  int lifespan;
  int grow;

  Particle(PVector l) {
    acceleration = new PVector(random(-0.05, 0.05), random(-0.05, 0.05));
    velocity = new PVector(random(-5, 5), random(-2, 2));
    position = l.copy();
    lifespan = 150;
  }

  void run() {
    update();
    display();
    println(color1, color2, lifespan);
  }

  // Method to update position-------------------------------------------
  void update() {
    velocity.add(acceleration);
    position.add(velocity);
    lifespan -= 1;
    grow += 1;

  }

  // Method to display----------------------------------------------------
  void display() {
    //stroke(255, lifespan);
    strokeWeight(3);
    //noStroke();
    
    noFill();
    stroke(lerpColor(color1, color2, (((millis()/2500)%2==0)?millis()%2500:2500-millis()%2500)/2500.0));
    ellipse(position.x, position.y, grow, grow);
  }

  // Is the particle still useful?
  boolean isDead() {
    if (lifespan < 0) {
      return true;
    } else {
      return false;
    }
  }
}

void keyPressed() {
  if (key == 'v' | key == 'V') {
    color1 = color(255, 0, 155);
    color2 = color(0, 155, 255);
  } else if (key == 'b' | key == 'B') {
    color1 = color(0, 0, 255);
    color2 = color(0, 255, 0);
  } else if (key == 'n' | key == 'N') {
    color1 = color(255, 0, 0);
    color2 = color(155, 255, 0);
  }else if (key == 'm' | key == 'M') {
    color1 = color(255, 255, 255);
    color2 = color(255, 0, 0);
  }
}

```

---

<div class="post-metadata">

**Author:** ![zinni](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zinni/32/3303_2.png) [@zinni](https://discourse.processing.org/u/zinni)\
**Post date:** [January 19, 2019, 9:25pm UTC](https://discourse.processing.org/t/change-color-with-keypressed-and-update-color/7645/5 "2019-01-19T21:25:19Z")

</div>

Sometimes (about a minute) there is a little stop when running the code.  
I don’t know why…

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 19, 2019, 9:39pm UTC](https://discourse.processing.org/t/change-color-with-keypressed-and-update-color/7645/6 "2019-01-19T21:39:48Z")

</div>

sorry i not test your code, but play about the color select:  
just a other writing style // not better…

```auto
int cset = 0;
color[][] csets = {                
  { color(255, 0, 155), //v // fill
    color(0, 155, 255)}, // stroke
  { color(0, 0, 255), //b
    color(0, 255, 0)},
  { color(255, 0, 0), //n
    color(155, 255, 0)}, 
  { color(255, 255, 255), //m
    color(255, 0, 0)} };

void setup() {
  size(200,200);
  strokeWeight(3);
  println("operation: key [v][b][n][m] color select");
}

void draw() {
  fill(csets[cset][0]);
  stroke(csets[cset][1]);
  rect( width/2, height/2, width/8, height/8);
}

void keyPressed() {
  //println("key "+key+" keyCode "+keyCode);
  if ( key == 'v' ) cset = 0;
  if ( key == 'b' ) cset = 1;
  if ( key == 'n' ) cset = 2;
  if ( key == 'm' ) cset = 3;
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 19, 2019, 9:48pm UTC](https://discourse.processing.org/t/change-color-with-keypressed-and-update-color/7645/7 "2019-01-19T21:48:15Z")

</div>

you could test it with

- a disabled print command
- a reasonable canvas size  
size(500,500);
- running some task manager / memory tool / to check if load on cpu and memory changes

* * *

in keyPressed() i did a check array size

println("array size "+ps.particles.size());

looks constant

also memory usage does not increase here,  
in setup can use

```auto
  surface.setTitle("title "+frameRate+" FPS");

```

---

<div class="post-metadata">

**Author:** ![zinni](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zinni/32/3303_2.png) [@zinni](https://discourse.processing.org/u/zinni)\
**Post date:** [January 19, 2019, 9:49pm UTC](https://discourse.processing.org/t/change-color-with-keypressed-and-update-color/7645/8 "2019-01-19T21:49:47Z")

</div>

Ok thanks. I will try.

---

<div class="post-metadata">

**Author:** ![zinni](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zinni/32/3303_2.png) [@zinni](https://discourse.processing.org/u/zinni)\
**Post date:** [January 19, 2019, 10:14pm UTC](https://discourse.processing.org/t/change-color-with-keypressed-and-update-color/7645/9 "2019-01-19T22:14:28Z")

</div>

Is it too much recording for the console?  
First I have this (new lines)  
 ![53](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a91207c1c473c4cb0d35eef51f36f8e48492d4e3.png)  
After sometimes it changes to this

 ![20](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/90006d484e2cd7334d1d0f87f7bfa6ee16ef33b5.png)

---

<div class="post-metadata">

**Author:** ![zinni](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zinni/32/3303_2.png) [@zinni](https://discourse.processing.org/u/zinni)\
**Post date:** [January 19, 2019, 10:27pm UTC](https://discourse.processing.org/t/change-color-with-keypressed-and-update-color/7645/10 "2019-01-19T22:27:19Z")

</div>

Ok. Thank you very much.  
I think this works fine now 😋

```auto
ParticleSystem ps;

int color1 = color(255, 0, 155);
int color2 = color(0, 155, 255);

void setup() {
size(800, 400);
ps = new ParticleSystem(new PVector(width/2, height/2));
surface.setTitle("title "+frameRate+" FPS");
}

void draw() {
  background(0);
  ps.addParticle();
  ps.run();
}

// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles 

class ParticleSystem {
  ArrayList<Particle> particles;
  PVector origin;

  ParticleSystem(PVector position) {
    origin = position.copy();
    particles = new ArrayList<Particle>();
  }

  void addParticle() {
    particles.add(new Particle(origin));
  }

  void run() {
    for (int i = particles.size()-1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.run();
      if (p.isDead()) {
        particles.remove(i);
      }
    }
  }
}

// A simple Particle class---------------------------------------------

class Particle {
  PVector position;
  PVector velocity;
  PVector acceleration;
  int lifespan;
  int grow;

  Particle(PVector l) {
    acceleration = new PVector(random(-0.05, 0.05), random(-0.05, 0.05));
    velocity = new PVector(random(-5, 5), random(-2, 2));
    position = l.copy();
    lifespan = 150;
  }

  void run() {
    update();
    display();
    //println(color1, color2, lifespan);
  }

  // Method to update position-------------------------------------------
  void update() {
    velocity.add(acceleration);
    position.add(velocity);
    lifespan -= 1;
    grow += 1;

  }

  // Method to display----------------------------------------------------
  void display() {
    //stroke(255, lifespan);
    strokeWeight(3);
    //noStroke();
    
    noFill();
    stroke(lerpColor(color1, color2, (((millis()/2500)%2==0)?millis()%2500:2500-millis()%2500)/2500.0));
    ellipse(position.x, position.y, grow, grow);
  }

  // Is the particle still useful?
  boolean isDead() {
    if (lifespan < 0) {
      return true;
    } else {
      return false;
    }
  }
}

void keyPressed() {
  if (key == 'v' | key == 'V') {
    color1 = color(255, 0, 155);
    color2 = color(0, 155, 255);
  } else if (key == 'b' | key == 'B') {
    color1 = color(0, 0, 255);
    color2 = color(0, 255, 0);
  } else if (key == 'n' | key == 'N') {
    color1 = color(255, 0, 0);
    color2 = color(155, 255, 0);
  }else if (key == 'm' | key == 'M') {
    color1 = color(255, 255, 255);
    color2 = color(255, 0, 0);
  }
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 20, 2019, 3:25am UTC](https://discourse.processing.org/t/change-color-with-keypressed-and-update-color/7645/11 "2019-01-20T03:25:39Z")

</div>

i understand need of diagnostic prints,  
but inside draw() ( 60 lines/sec ) is just too much,  
so better make it switchable:

```auto
// better diagnostic print

int i =0;
boolean dprint = false;

void setup(){
println("key [p] print diag");
}

void draw() {
  i++;
  if ( dprint) println("i: "+i);  
}

void keyPressed() {
 if ( key == 'p' ) dprint = ! dprint; 
}

```