Problem with mouseClicked Function

Processing Coding Questions
1

Hi there,

I’m trying to get the ellipses that make up the “interactive eyes” change to a random color when mouse is pressed. I tried

fill(random(255), random(255), random(255));

but it doesn’t seem to be working. When I press my mouse, you can see the black circles change to a random color for a split second, but it doesn’t hold.

Here’s the entirety of the code:
Thanks for the help

String message = "I'm Lena. I am also a: human, learner, tinkerer, survivor, creator, adventurer, and truth-seeker. I enjoy random science facts, solace time, photography, case studies, and running. My dream is to work at a level 1 trauma hospital as an emergency psychologist.";

PFont f;
//radius of ellipse
float r = 250;

String sentence;

void setup() {
  size(800, 800);
  background(255);
  f = createFont("Times New Roman",15,true);
  textFont(f);
  textAlign(CENTER);
}


void mousePressed(){
  fill(random(255), random(255), random (255));
}

void draw(){
  
  background(255);  

  //interactive eye
  ellipse(323,340,15,15);
  ellipse(483,340,15,15);
  
  //outer eye outline
  noFill();
  stroke(0,0,0,255);
  strokeWeight(1);
  arc(320,350,55,55,PI, TWO_PI);
  arc(480,350,55,55,PI, TWO_PI);
  ellipse(323,340,31,31);
  ellipse(483,340,31,31);
  
  //mouth
  arc(400,500,100,50,0,PI);
  
  //nose
  bezier(400,450,420,430,420,440,395,400);
  
  //freckle
  fill(140,98,50);
  ellipse(510,375,4,4);
  
  //hair left
  fill(209,190,161,100);
  bezier(400,130,350,10,175,250,100,220);
  fill(140,98,50,100);
  bezier(393,140,340,-50,170,325,90,200);
  fill(209,190,161,100);
  bezier(395,135,345,20,170,330,120,210);
  
  //hair right
  fill(140,98,50,100);
  bezier(400,140,450,10,675,350,750,220);
  bezier(415,130,475,-14,675,350,735,235);
  fill(209,190,161,100);
  bezier(408,135,460,-30,650,370,700,245);
  
  //main ellipse 
  translate(400,400);
  noFill();
  stroke(255);
  ellipse(0, 0, r*2, r*2);

  //position on curve
  float arclength = 0;

  //every box
  for (int i = 0; i < message.length(); i++)
  {
    //width of each character
    char currentChar = message.charAt(i);
    float w = textWidth(currentChar);

    //Each box is centered so we move half the width
    arclength += w/2;
    //Angle in radians is the arclength divided by the radius
    //Starting on the left side of the circle by adding PI
    float theta = PI + arclength / r;    

    pushMatrix();
    //Polar to cartesian coordinate conversion
    translate(r*cos(theta), r*sin(theta));
    //Rotate the box
    rotate(theta+PI/2); //rotation is offset by 90 degrees
    //Display the character
    fill(0);
    text(currentChar,0,0);
    popMatrix();
    //Move halfway again
    arclength += w/2;
    
    //original string frame via: https://processing.org/tutorials/text/ and Ariel Malka
  }
}

void keyPressed (){
 if(key == 'x') saveFrame("self_portrait_Lena_####.png"); 
}
2

Here is an easy fix using a color variable:

String message = "I'm Lena. I am also a: human, learner, tinkerer, survivor, creator, adventurer, and truth-seeker. I enjoy random science facts, solace time, photography, case studies, and running. My dream is to work at a level 1 trauma hospital as an emergency psychologist.";

PFont f;
//radius of ellipse
float r = 250;

String sentence;

color c = color(0);

void setup() {
  size(800, 800);
  background(255);
  f = createFont("Times New Roman",15,true);
  textFont(f);
  textAlign(CENTER);
}


void mousePressed(){
  c = color(random(255), random(255), random (255));
}

void draw(){
  
  background(255);  

  //interactive eye
  fill(c);
  ellipse(323,340,15,15);
  ellipse(483,340,15,15);
  
  //outer eye outline
  noFill();
  stroke(0,0,0,255);
  strokeWeight(1);
  arc(320,350,55,55,PI, TWO_PI);
  arc(480,350,55,55,PI, TWO_PI);
  ellipse(323,340,31,31);
  ellipse(483,340,31,31);
  
  //mouth
  arc(400,500,100,50,0,PI);
  
  //nose
  bezier(400,450,420,430,420,440,395,400);
  
  //freckle
  fill(140,98,50);
  ellipse(510,375,4,4);
  
  //hair left
  fill(209,190,161,100);
  bezier(400,130,350,10,175,250,100,220);
  fill(140,98,50,100);
  bezier(393,140,340,-50,170,325,90,200);
  fill(209,190,161,100);
  bezier(395,135,345,20,170,330,120,210);
  
  //hair right
  fill(140,98,50,100);
  bezier(400,140,450,10,675,350,750,220);
  bezier(415,130,475,-14,675,350,735,235);
  fill(209,190,161,100);
  bezier(408,135,460,-30,650,370,700,245);
  
  //main ellipse 
  translate(400,400);
  noFill();
  stroke(255);
  ellipse(0, 0, r*2, r*2);

  //position on curve
  float arclength = 0;

  //every box
  for (int i = 0; i < message.length(); i++)
  {
    //width of each character
    char currentChar = message.charAt(i);
    float w = textWidth(currentChar);

    //Each box is centered so we move half the width
    arclength += w/2;
    //Angle in radians is the arclength divided by the radius
    //Starting on the left side of the circle by adding PI
    float theta = PI + arclength / r;    

    pushMatrix();
    //Polar to cartesian coordinate conversion
    translate(r*cos(theta), r*sin(theta));
    //Rotate the box
    rotate(theta+PI/2); //rotation is offset by 90 degrees
    //Display the character
    fill(0);
    text(currentChar,0,0);
    popMatrix();
    //Move halfway again
    arclength += w/2;
    
    //original string frame via: https://processing.org/tutorials/text/ and Ariel Malka
  }
}

void keyPressed (){
 if(key == 'x') saveFrame("self_portrait_Lena_####.png"); 
}
3

As far as I can see your program only changes the color when the mousebutton is actually pressed. Easy fix:

if(mousePressed){
boolean changeColor = true;
}
if(changeColor == true){
fill(random(255), random(255), random(255));
}