# Changing font text with mouse position in Processing

**URL:** https://discourse.processing.org/t/changing-font-text-with-mouse-position-in-processing/42499
**Category:** Coding Questions
**Tags:** homework
**Created:** [July 25, 2023, 7:14pm UTC](https://discourse.processing.org/t/changing-font-text-with-mouse-position-in-processing/42499 "2023-07-25T19:14:15Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![juuhlbs](https://avatars.discourse-cdn.com/v4/letter/j/f08c70/32.png) [@juuhlbs](https://discourse.processing.org/u/juuhlbs)
#### Post date: [July 25, 2023, 7:14pm UTC](https://discourse.processing.org/t/changing-font-text-with-mouse-position-in-processing/42499/1 "2023-07-25T19:14:15Z")

</div>

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:

```auto
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!

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [July 25, 2023, 8:10pm UTC](https://discourse.processing.org/t/changing-font-text-with-mouse-position-in-processing/42499/2 "2023-07-25T20:10:47Z")

</div>

Hello @juuhlbs,

Take a look here for examples:

> **[Typography](https://processing.org/tutorials/typography/)**
>
> Working with typefaces and text.

`:)`

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [July 27, 2023, 2:10pm UTC](https://discourse.processing.org/t/changing-font-text-with-mouse-position-in-processing/42499/3 "2023-07-27T14:10:06Z")

</div>

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

```auto
  textFont (light);

```

It does nothing here.

**Remark 2**  
The line

```auto
  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**

```auto
        PFont light;

```

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

```auto
  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)

```auto
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
//

```

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [July 27, 2023, 9:34pm UTC](https://discourse.processing.org/t/changing-font-text-with-mouse-position-in-processing/42499/4 "2023-07-27T21:34:03Z")

</div>

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.

`:)`

---

<div class="post-metadata">

### Author: ![juuhlbs](https://avatars.discourse-cdn.com/v4/letter/j/f08c70/32.png) [@juuhlbs](https://discourse.processing.org/u/juuhlbs)
#### Post date: [July 28, 2023, 8:53pm UTC](https://discourse.processing.org/t/changing-font-text-with-mouse-position-in-processing/42499/5 "2023-07-28T20:53:15Z")

</div>

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

---

<div class="post-metadata">

### Author: ![juuhlbs](https://avatars.discourse-cdn.com/v4/letter/j/f08c70/32.png) [@juuhlbs](https://discourse.processing.org/u/juuhlbs)
#### Post date: [July 28, 2023, 8:54pm UTC](https://discourse.processing.org/t/changing-font-text-with-mouse-position-in-processing/42499/6 "2023-07-28T20:54:33Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [July 30, 2023, 12:19pm UTC](https://discourse.processing.org/t/changing-font-text-with-mouse-position-in-processing/42499/7 "2023-07-30T12:19:25Z")

</div>

Hello @juuhlbs,

> [@glv](#):
>
> Adding code to control with the mouse is the next step.

There is a tutorial about Interactivity:

> **[Interactivity](https://processing.org/tutorials/interactivity/)**
>
> Introduction to interactivity with the mouse and keyboard.

Always peruse the [Processing resources](https://processing.org/) (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.

`:)`
