Changing font color when mouse pressed

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

Answers

  • edited March 2018

    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

  • edited March 2018

    @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 :(

  • edited March 2018 Answer ✓

    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;
      }
    }
    
  • edited March 2018 Answer ✓

    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

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

Sign In or Register to comment.