Applying Class to each character in a string

Processing Coding Questions
1

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.

Mover m;

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

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

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

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/

Thank you in advance for any help you can provide!

1 Like
2

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

1 Like
3

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
Screen Shot 2019-09-08 at 12.20.12 AM.png2006×1650 136 KB
15%20AM
Screen Shot 2019-09-08 at 12.22.15 AM.png1402×1050 29.3 KB

4

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

1 Like
5

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 ?

6

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)

1 Like
7

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:


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++) {
    ....
    ....
1 Like
8

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 ?

1 Like