Changing font color when mouse pressed

abigailvjacinto

Hi! 1. I've been trying to add a code such that the font color changes when the mouse clicks on the text. However, nothing's happening. 2. I want to change the font style from Arial, but nothing happens also when I substitute another font name.

This is the link I got the code from (http://learningprocessing.com/examples/chp17/example-17-06-textbreakingup) Here's the code:

// Example 17-6: Text breaking up 

PFont f;
String message = "click mouse to shake it up";

// An array of Letter objects
Letter[] letters;

void setup() {
  size(480, 270);

  // Load the font
  f = createFont("Arial", 20);
  textFont(f);

  // Create the array the same size as the String
  letters = new Letter[message.length()];

  // Initialize Letters at the correct x location
  int x = 125;
  for (int i = 0; i < message.length (); i ++ ) {
    // Letter objects are initialized with their location within the String as well as what character they should display.
    letters[i] = new Letter(x, 140, message.charAt(i)); 
    x += textWidth(message.charAt(i));
  }
}

void draw() {
  background(255);
  for (int i = 0; i < letters.length; i ++ ) {

    // Display all letters
    letters[i].display();

    // If the mouse is pressed the letters shake
    // If not, they return to their original location
    if (mousePressed) {
      letters[i].shake();
    } else {
      letters[i].home();
    }
  }
}

// A class to describe a single Letter
class Letter {
  char letter;

  // The object knows its original " home " location
  float homex,homey;

  // As well as its current location
  float x,y;

  Letter(float x_, float y_, char letter_) {
    homex = x = x_;
    homey = y = y_;
    letter = letter_;
  }

  // Display the letter
  void display() {
    fill(0);
    textAlign(LEFT);
    text(letter,x,y);
  }

  // Move the letter randomly
  void shake() {
    x += random(-2,2);
    y += random(-2,2);
  }

  // At any point, the current location can be set back to the home location by calling the home() function.
  void home() { 
    x = homex;
    y = homey;
  }
}

Chrisir

You need a function mousePressed outside the class

Here you can set a new color (which is a global variable of type color) that you then use in line 63

Also set a font in mousePressed () like in line 14

abigailvjacinto

@Chrisir Thanks! I was able to change the font color, however, I'm still stuck on creating the function mousePressed outside the class and setting a font in line 14 :(

Chrisir

this changes the font once from Arial to Times New Roman and changes the color every time (and shakes the letters):

// Example 17-6: Text breaking up 

PFont f, f2;
String message = "click mouse to shake it up";

// An array of Letter objects
Letter[] letters;

color colLetters=0;

void setup() {
  size(480, 270);

  // Load the fonts
  f = createFont("Arial", 20);
  f2 = createFont("Times New Roman", 20);

  textFont(f);

  // Create the array the same size as the String
  letters = new Letter[message.length()];

  // Initialize Letters at the correct x location
  int x = 125;
  for (int i = 0; i < message.length (); i ++ ) {
    // Letter objects are initialized with their location within the String as well as what character they should display.
    letters[i] = new Letter(x, 140, message.charAt(i)); 
    x += textWidth(message.charAt(i));
  }
}

void draw() {
  background(255);
  for (int i = 0; i < letters.length; i ++ ) {

    // Display all letters
    letters[i].display();

    // If the mouse is pressed the letters shake
    // If not, they return to their original location
    if (mousePressed) {
      letters[i].shake();
    } else {
      letters[i].home();
    }
  }
}

void mousePressed() {
  textFont(f2);
  colLetters=color(random(256), random(256), random(256));
}

// A class to describe a single Letter
class Letter {
  char letter;

  // The object knows its original " home " location
  float homex, homey;

  // As well as its current location
  float x, y;

  Letter(float x_, float y_, char letter_) {
    homex = x = x_;
    homey = y = y_;
    letter = letter_;
  }

  // Display the letter
  void display() {
    fill(colLetters);
    textAlign(LEFT);
    text(letter, x, y);
  }

  // Move the letter randomly
  void shake() {
    x += random(-2, 2);
    y += random(-2, 2);
  }

  // At any point, the current location can be set back to the home location by calling the home() function.
  void home() { 
    x = homex;
    y = homey;
  }
}

Chrisir

well, mouse already has a function, to shake the letters.

Now additionally the font changes and color too.

That's a little confusing.

You could distinguish between left (shake letters) and right (change font/color) mouse button or make a (or 2) mouse button in the corner of the screen OR use keyboard

More fonts

You could also use all fonts

then in mousePressed you would have the current font index and use it with a font array

see

https://www.processing.org/reference/PFont_list_.html

abigailvjacinto

Thank you so much for this!! You've been an amazing help ^:)^

Chrisir

;-)