lerpColor triggered by event

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

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

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);
  }
}

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

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…

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.

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

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

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);
  }
}