Changing font text with mouse position in Processing

Processing Coding Questions
1

Hello guys,
I’m trying to create something relatively simple based on some studies that I made but now I’m facing an issue I don’t know enough about to solve.

My idea is to change the font from light to regular and then to bold based on MouseX position. I thought using If clause and adding all 3 fonts with PFont could be enough but don’t work, do you have any clue about how to do it?

Now my sketch is just using the last font added and the If clauses are not being used.

Here is my sketch:

void setup ()
{
  size (1000, 700);

  PFont light;
  light = createFont ("PPNeueMachina-Ultralight.ttf", 40);
  textFont (light);

  PFont regular;
  regular = createFont ("PPNeueMachina-Regular.ttf", 40);
  textFont (regular);

  PFont bold;
  bold = createFont ("PPNeueMachina-Ultrabold.ttf", 40);
  textFont (bold);
}

String theText = "A";

void draw () {
  background (255, 241, 209);

  int i = 0;
  textAlign(CENTER, CENTER);

  int stepSize = mouseX/20+5;
  for (int x=0; x<width+20; x=x+20+stepSize)
    for (int y=0; y<height+20; y=y+20+stepSize)
    {
      char t = theText.charAt(i);

      fill (196, 88, 108);
      text (t, x, y);

      if (y < 350) {
        PFont light;
      }

      if (350 > y && y < 650) {
        PFont regular;
      }

      if (y < 650) {
        PFont bold;
      }

      i=i+1;
      if (i>theText.length()-1)
      {
        i=0;
      }
    }
}

I really appreciate your help, will help me a lot!
Thanks!

2

Hello @juuhlbs,

Take a look here for examples:

:)

3

Remark 1
you don’t need this in setup():

  textFont (light);

It does nothing here.

Remark 2
The line

  PFont light;

won’t work in setup().

You need to declare the fonts globally, when you want to create them in the function setup() and use them in the function draw().

So before the functon setup() say PFont light, regular, bold; to declare the fonts globally.

Remark 3

        PFont light;

won’t work in draw() to set the font; instead use

  textFont (light);

and use it before using text() command.

This is setting the font to use.

Full Sketch

(this Sketch is stripped down, I just display the word letter by letter, but font changes with mouse position).

this works for me (when I use the Arial set that is now commented out)

final String theText = "A This is a text.";

PFont light, regular, bold;

void setup ()
{
  size (1000, 700);

  light = createFont ("PPNeueMachina-Ultralight.ttf", 40);
  regular = createFont ("PPNeueMachina-Regular.ttf", 40);
  bold = createFont ("PPNeueMachina-Ultrabold.ttf", 40);

  // this works on win 10
  //light = createFont ("Arial", 48);
  //regular = createFont ("Arial Bold", 48);
  //bold = createFont ("Arial Italic", 48);

  //int i=0;
  //String[] c11=PFont.list() ;
  //for (String s : c11) {
  //  println(s);
  //  i++;
  //  if (i>45)
  //    return;
  //}//for
}//func

void draw ()
{
  background (255, 241, 209);

  int i = 0;
  textAlign(CENTER, CENTER);

  // int stepSize = mouseX/20+5;
  for (int x=0; x<theText.length(); x=x+1)
  {
    char t = theText.charAt(i);

    fill (196, 88, 108);
    text (t, mouseX+x*17, mouseY);

    if (mouseX < 350) {
      textFont(light);
    } else if (mouseX < 650) {
      textFont(regular);
    } else if (mouseX <= 1000) {
      textFont(bold);
    }

    i=i+1;
    if (i>theText.length()-1)
    {
      i=0;
    }
  }//for
}//func
//
4

Hello @juuhlbs,

There is a working example in the tutorial I shared:

To use two fonts in one program, create two PFont variables and use the textFont() function to change the current font.

Once you understand that and compare it to what you did you will see your errors.

Adding code to control with the mouse is the next step.

:)

5

Hi, thank you so much for this explanation, you’re totally right about declaring globally or locally. It helped me to understand my lines.

1 Like
6

Hi @glv thank you so much for the documentation related to this topic! I definitely will read about and see the example to improve my work.

7

Hello @juuhlbs,

There is a tutorial about Interactivity:

Always peruse the Processing resources (tutorials, references, examples, etc.) related to your code and you will glean lots of insight. You will benefit in the long run.

In the end the end the best solutions are the ones you work through and find yourself.

:)

1 Like