# lerpColor triggered by event

**URL:** <https://discourse.processing.org/t/lerpcolor-triggered-by-event/5541>\
**Category:** Coding Questions\
**Created:** [November 14, 2018, 7:22pm UTC](https://discourse.processing.org/t/lerpcolor-triggered-by-event/5541 "2018-11-14T19:22:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [November 14, 2018, 7:22pm UTC](https://discourse.processing.org/t/lerpcolor-triggered-by-event/5541/1 "2018-11-14T19:22:15Z")

</div>

hello

i’m having some trouble to smoothly change a color from a triggered event, initially mousePressed, then i will move to a timer.  
I’m loading a .svg file, adding each child in a separate custom object stored in an ArrayList, assigning different colors for each shape when instantiating the objects. that’s going allright. i’m also ok with changing the color on a mousePressed event;  
now i want to smoothly change the color, through event triggered lerpcolor() . i have found some examples in the old forums but they weren’t object oriented, so i’m kinda stuck to make it run as an object method.

any help appreciated.

base code

```auto
ArrayList<Mascara> masks=new ArrayList<Mascara>();
PShape s;

void settings() {
  size(935, 1038);
}

void setup() {
 s=loadShape("WARHOL.svg"); 
  int count=s.getChildCount();
  for (int i=0; i<count; i++) {
    PShape temp=s.getChild(i);
    masks.add(new Mascara(temp, i));
  }
}

void draw() {
  for (Mascara m : masks) {
    m.display();
    if (frameCount%300==0) {
      m.changeColor();
      println("change color");
    }
  }
}

void mousePressed() {
  for (Mascara m : masks) {
    m.sortColor();
  }
}

```

the Mascara class

```auto
class Mascara {
  PShape s;
  int id;
  color[] palette={#ff0000, #ff7f00, #ffff00, #00ff00, #00cfff, #005cff, #7c00ff, #ff00b1, #ffffff, #000000};
  color from;
  color target;
  color current;
  float lerpValue=0;
  float lerpStep=.01;

  Mascara(PShape _s, int _id) {
    s=_s;
    id=_id;
    //current=sortColor();
    sortColor();
    //changeColor();
  }

void sortColor() {
    if (id<5) {
      current=palette[floor(random(palette.length))];
    } else {
      current=palette[8];
    }
  }
/*
  color sortColor() {
    if (id<5) {
      //current=palette[floor(random(palette.length))];
      return palette[floor(random(palette.length))];
    } else {
      //current=palette[8];
      return palette[8];
    }
  }

  color changeColor() {
    if (lerpValue<1) {
      from=current;
      target=sortColor();
      lerpValue+=lerpStep;
      return lerpColor(from, target, lerpValue);      
    } else {
      lerpValue=0.0;
      return lerpColor(from, target, lerpValue);
    }
  }
*/

  void display() {
    s.setFill(current);
    shape(s, 0, 0);
  }
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 14, 2018, 7:53pm UTC](https://discourse.processing.org/t/lerpcolor-triggered-by-event/5541/2 "2018-11-14T19:53:05Z")

</div>

Your mousePressed() function isn’t doing anything useful.

```auto
void mousePressed() {
  for (Mascara m : masks) {
    m.sortColor();
  }
}

```

`.sortColor()` just returns a color - and that value isn;t used. It doesn’t change the color!  
Maybe you meant to try calling `.changeColor()`?

Also, it looks like you already have it changing color based on a timer…

---

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [November 14, 2018, 8:32pm UTC](https://discourse.processing.org/t/lerpcolor-triggered-by-event/5541/3 "2018-11-14T20:32:19Z")

</div>

my bad, i’ve published the broken code.  
sortColor works when is a void, but not when color.

i’ll edit the original code/code edited

i’m making a mess with these trials. even when triggered, change color will not happen.

---

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [November 14, 2018, 10:49pm UTC](https://discourse.processing.org/t/lerpcolor-triggered-by-event/5541/4 "2018-11-14T22:49:59Z")

</div>

i’ve got it solved, with a boolean flag…  
did it with simpler shapes first.

```auto
ArrayList<Cell> grid;
int cols=4, rows=2;
int dim;

PShape shape;

void setup() {
  size(400, 200); 

  dim=width/cols;

  shape=loadShape("rect.svg");
  shape.disableStyle();

  grid=new ArrayList<Cell>();

  for (int j=0; j<rows; j++) {
    for (int i=0; i<cols; i++) {
      grid.add(new Cell(shape, i, j));
    }
  }

  for (Cell c : grid) {
    //c.sortColor();
  }
}

void draw() {
  background(0);
  for (Cell c : grid) {
    c.update();
    c.display();
  }
}

void mousePressed() {
  for (Cell c : grid) {
    c.isLerp=true;
  }
}

```

cell object

```auto
class Cell {
  PShape s;
  int i, j;
  int x, y;
  color[] palette={#ff0000, #ff7f00, #ffff00, #00ff00, #00cfff, #005cff, #7c00ff, #ff00b1, #ffffff, #000000};
  color current;
  color target;
  color temp;
  boolean isLerp=false;

  float currentLerp=0.0;
  float lerpStep=.01;

  Cell(PShape _s, int _i, int _j) {
    s=_s;
    i=_i;
    j=_j;
    x=i*dim;
    y=j*dim;
    current=sortColor();
    temp=current;
    target=sortColor();
  }

  color sortColor() {
    return palette[floor(random(palette.length))];
  }

  color changeColor() {
    return lerpColor(temp, target, currentLerp);
  }

  void update() {
    if (isLerp) {
      current=changeColor();
      currentLerp+=lerpStep;
      println(currentLerp);
      
      if (currentLerp >= 1) {
        temp=current;
        target=sortColor();
        currentLerp=0.0;
        isLerp=false;
      }
    }
  }

  void display() {   
    noStroke();
    fill(current);
    rect(x, y, dim, dim);
  }
}

```