# Applying Class to each character in a string

**URL:** https://discourse.processing.org/t/applying-class-to-each-character-in-a-string/13870
**Category:** Coding Questions
**Created:** [September 8, 2019, 3:29am UTC](https://discourse.processing.org/t/applying-class-to-each-character-in-a-string/13870 "2019-09-08T03:29:48Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![tylerowens](https://avatars.discourse-cdn.com/v4/letter/t/ac8455/32.png) [@tylerowens](https://discourse.processing.org/u/tylerowens)
#### Post date: [September 8, 2019, 3:29am UTC](https://discourse.processing.org/t/applying-class-to-each-character-in-a-string/13870/1 "2019-09-08T03:29:48Z")

</div>

Hello all,

I am going to try my best to describe what I am trying to make so I can hopefully receive some help. I am trying to make each character in a string accelerate towards the mouse. With the code I have currently written the entire string accelerates towards my mouse rather than each individual character moving independently towards the mouse.

```auto
Mover m;

void setup() {
  size(1000,800);
  m = new Mover();
}

void draw() {
  background(0);
  m.display();
}

void mouseMoved() {
  m.move();
}

```

```auto
class Mover {
  PVector location;
  PVector velocity;
  PVector acceleration;
  
  Mover() {
    location = new PVector(random(100,400),random(100,300));
    velocity = new PVector(0,0);
  
}

   void display() {
    PFont f = createFont("Helvetica", 50);
    String s = "to be or\nnot to be.";
    textFont(f);
    textSize(50);
    float x = 10;

    for(int i = 0; i < s.length(); i++) {
    char c = s.charAt(i);
    text(c, x + location.x, location.y );
    x = x + textWidth(c);
    }
  }
  
  void move() {
    
    //acceleration = PVector.random2D();
    //acceleration.mult(random(5));
    PVector mouse = new PVector(mouseX,mouseY);
    PVector direction = PVector.sub(mouse,location);
    acceleration = direction;
    direction.normalize();
    direction.mult(.01);
    velocity.limit(2);
    velocity.add(acceleration);
    location.add(velocity);
    
  }
}

```

What I am trying to do is apply typography to example 1.11 [https://natureofcode.com/book/chapter-1-vectors/](https://natureofcode.com/book/chapter-1-vectors/)

Thank you in advance for any help you can provide!

---

<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: [September 8, 2019, 7:10am UTC](https://discourse.processing.org/t/applying-class-to-each-character-in-a-string/13870/2 "2019-09-08T07:10:55Z")

</div>

Since you want to make each letter move separately you could make a class Letter with a char and a pos and a velocity and how many millis pass until it starts flying

Before setup have an array of that class

In setup fill the array in a for loop with your word (use charAt)

In draw for loop over the array and move them

---

<div class="post-metadata">

### Author: ![tylerowens](https://avatars.discourse-cdn.com/v4/letter/t/ac8455/32.png) [@tylerowens](https://discourse.processing.org/u/tylerowens)
#### Post date: [September 8, 2019, 7:24am UTC](https://discourse.processing.org/t/applying-class-to-each-character-in-a-string/13870/3 "2019-09-08T07:24:34Z")

</div>

Any more explanation on how to set a timer for how much time to pass until it starts moving? or some psudo code for how you would approach it, not going to lie im still very new to processing.

like you said, i want the string to start as a word and then break off into each character (like this but i just added an array of a’s to demonstrate.

 ![12%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/ae0c8a95322a6012bc3dade09e1a68b333ca26a4.png) ![15%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1d51cb7ab70f23f7b27c309ae9e09b01f44b8afb.png)

---

<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: [September 8, 2019, 7:50am UTC](https://discourse.processing.org/t/applying-class-to-each-character-in-a-string/13870/4 "2019-09-08T07:50:50Z")

</div>

No timer needed for the beginning

Your class Mover is the class Letter I was referring to. You are almost there.

Just apply the changes I mentioned above

---

<div class="post-metadata">

### Author: ![tylerowens](https://avatars.discourse-cdn.com/v4/letter/t/ac8455/32.png) [@tylerowens](https://discourse.processing.org/u/tylerowens)
#### Post date: [September 8, 2019, 8:09am UTC](https://discourse.processing.org/t/applying-class-to-each-character-in-a-string/13870/5 "2019-09-08T08:09:51Z")

</div>

Ok ill try that now thank you! Also, would this method be sustainable for making a paragraph do this effect rather than just one word ?

---

<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: [September 8, 2019, 9:39am UTC](https://discourse.processing.org/t/applying-class-to-each-character-in-a-string/13870/6 "2019-09-08T09:39:29Z")

</div>

paragraph: possible

I looked deeper into this now.

Since Mover represents only one letter in the new approach, you must remove the String from the class to setup and the for loop also (as I mentioned)

---

<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: [September 8, 2019, 9:47am UTC](https://discourse.processing.org/t/applying-class-to-each-character-in-a-string/13870/7 "2019-09-08T09:47:56Z")

</div>

Also, to use a for loop in setup to make the array, you want to pass a char to the constructor.

Hence, you need to change your constructor in the class

Maybe you want to read the tutorial on objects

To reduce the class to be responsible not for the entire sentence, but for one letter only, I removed things from it and put it to setup.

Chrisir

**This is the beginning of my full running sketch:**

```auto

String s = "to be or \nnot to be.";

Mover[] m = new Mover[s.length()];

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

  PFont f = createFont("Helvetica", 50);
  textFont(f);
  textSize(50);

  float x = 40;

  for (int i = 0; i < s.length(); i++) {
    char c = s.charAt(i);
    m[i] = new Mover(c, x, 200);
    x = x + textWidth(c);
  }
}

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

```

---

<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: [September 8, 2019, 10:13am UTC](https://discourse.processing.org/t/applying-class-to-each-character-in-a-string/13870/8 "2019-09-08T10:13:32Z")

</div>

> [@tylerowens](#):
>
> acceleration = direction;  
> direction.normalize();  
> direction.mult(.01);  
> velocity.limit(2);  
> velocity.add(acceleration);

Also I am not sure about your move() method

you say `acceleration = direction;` BEFORE changing the variable `direction`.

shouldn’t you first change the variable `direction` completely before copying its value to the variable `acceleration` ?
