Text to follow mouse

Programming Questions

moochachip

in Programming Questions • 10 months ago

I am currently working on a project where I would like for the text that is generated in Processing to follow the mouse. The closest example I can think of would be this here: http://bestiario.org/web/media/19/preview/index.php?id_proyecto=19

Here is my current code:

int[] xpos = new int[1];

int[] ypos = new int[1];

PImage girl;

PFont myFont;

PFont myFont2;

ArrayList myPhrases;

//String[] allFonts = {

// myFont = loadFont("Serif-48.vlw"),

// myFont2 = loadFont("PTSans-Regular-48.vlw")

// };

String[] allPhrases = {

"Hola",

"Konichiwa",

"Hi"

};

void setup() {

size(600, 600);

myPhrases = new ArrayList() ;

for (int i=0; i < 30; i++) {

myPhrases.add(new Phrase());

}

girl = loadImage ("girl.png");

smooth();

for (int i = 0; i < xpos.length; i ++ ) {

xpos[i] = 0;

ypos[i] = 0;

}

void draw() {

background(255);

//For the mouse

for (int i = 0; i < xpos.length-1; i ++ ) {

xpos[i] = xpos[i+1];

ypos[i] = ypos[i+1];

}

xpos[xpos.length-1] = mouseX;

ypos[ypos.length-1] = mouseY;

for (int i = 0; i < xpos.length; i ++ ) {

noStroke();

fill(0);

image(girl, xpos[i], ypos[i]);

}

for ( int i =0; i < myPhrases.size(); i++) {

Phrase temp = (Phrase) myPhrases.get(i);

temp.display();

temp.drive();

}

------- Words Tab -------

class Phrase {

// Attributes

PVector myLocation;

String myPhrase = "" ;

String[] myFonts = {"PTSans-Regular-48.vlw","Serif-48.vlw","JUICERegular-48.vlw"};

PFont myFont ;

PFont myFont2 ;

int mySize ;

int CallFont;

// Constructor

Phrase() {

myLocation = new PVector(random(width), random(height)) ;

myPhrase = allPhrases[int(random(allPhrases.length))] ;

//myFonts = allFonts[int(random(allFonts.length))] ;

//myFont2 = loadFont("PTSans-Regular-48.vlw");

CallFont = int(random(3));

myFont = loadFont(myFonts[CallFont]) ;

mySize = int(random(24, 64)) ;

}

// Methods

void display () {

textFont(myFont, mySize) ;

text(myPhrase, myLocation.x, myLocation.y) ;

}

void drive() {

myLocation.x = myLocation.x+1;

if (myLocation.x > width) {

myLocation.x = 0;

}

------

Any help would be appreciated. Thank you.

Replies(4)

Chrisir

Re: Text to follow mouse

10 months ago

hello,

that's an adhoc solution...
click mouse to reset.

Problem
Problem is: words come to close.
Install a distance around the girl that the words can't enter
and / or install a distance among the words.

Also bring in an element of randomness after line 98 for xSpeed & ySpeed.
Also the speed could vary with dist between each word and girrrrrl.

Greetings, Chrisir

int[] xpos = new int[1];
int[] ypos = new int[1];
PImage girl;
PFont myFont;
PFont myFont2;
ArrayList myPhrases;
//String[] allFonts = {
// myFont = loadFont("Serif-48.vlw"),
// myFont2 = loadFont("PTSans-Regular-48.vlw")
// };
String[] allPhrases = {
"Hola",
"Konichiwa",
"Hi"
};
void setup() {
size(600, 600);
myPhrases = new ArrayList() ;
for (int i=0; i < 30; i++) {
myPhrases.add(new Phrase());
}
girl = loadImage ("girl.png");
smooth();
for (int i = 0; i < xpos.length; i ++ ) {
xpos[i] = 0;
ypos[i] = 0;
}
}
void draw() {
background(255);
//For the mouse
for (int i = 0; i < xpos.length-1; i ++ ) {
xpos[i] = xpos[i+1];
ypos[i] = ypos[i+1];
}
xpos[xpos.length-1] = mouseX;
ypos[ypos.length-1] = mouseY;
for (int i = 0; i < xpos.length; i ++ ) {
noStroke();
fill(0);
if (girl!=null)
image(girl, xpos[i], ypos[i]);
else
text("girl", xpos[i], ypos[i]);
}
for ( int i =0; i < myPhrases.size(); i++) {
Phrase temp = (Phrase) myPhrases.get(i);
temp.display();
temp.drive();
}
}
void mousePressed () {
myPhrases.clear();
for (int i=0; i < 30; i++) {
myPhrases.add(new Phrase());
}
}
// ------- Words Tab -------
class Phrase {
// Attributes
PVector myLocation;
String myPhrase = "" ;
String[] myFonts = {
"PTSans-Regular-48.vlw", "Serif-48.vlw", "JUICERegular-48.vlw"
};
PFont myFont ;
PFont myFont2 ;
int mySize ;
int CallFont;
color phraseCol;
// Constructor
Phrase() {
myLocation = new PVector(random(width), random(height)) ;
myPhrase = allPhrases[int(random(allPhrases.length))] ;
//myFonts = allFonts[int(random(allFonts.length))] ;
//myFont2 = loadFont("PTSans-Regular-48.vlw");
CallFont = int(random(3));
myFont = createFont(myFonts[CallFont], 12) ;
mySize = int(random(24, 64)) ;
phraseCol = color ( random (255), random (255), random (255) );
}
// Methods
void display () {
fill ( phraseCol );
textFont(myFont, mySize) ;
text(myPhrase, myLocation.x, myLocation.y) ;
}
void drive() {
//
final float bulletFlySpeed = 1.2; // how fast bullet flies
//
float xSpeed ;
float ySpeed ;
float angle = update(mouseX, mouseY);
xSpeed = cos(angle);
ySpeed = sin(angle);
xSpeed*= bulletFlySpeed;
ySpeed*= bulletFlySpeed;
// change location accordingly
// myLocation.x = myLocation.x+1;
myLocation.x = myLocation.x + xSpeed;
myLocation.y = myLocation.y + ySpeed;
if (myLocation.x > width) {
myLocation.x = 0;
}
} // method
//
float update(int mx, int my) {
//determines angle to mouse
float angle = atan2(float(my)-(myLocation.y-14), float(mx)-(myLocation.x+12));
return angle;
}
//
} // classs
// -----------------------------------------------

Chrisir

Re: Text to follow mouse

10 months ago

I like the program. It has the critical implication that a woman can't go on a vacation in some countries alone, right?

why not have Hello in it? Could be the most common. And Hallo.

Chrisir

Re: Text to follow mouse

10 months ago

Further idea could be to have 10 or so virtual invisible girls circling the visible girl slowly.

The words would then each follow one of the virtual invisible girls instead of the real one.

That could give the impression of circling her and avoid that all words are on top of each other.

experiment
you can also experiment with speed:

void drive() {
//
float bulletFlySpeed = 1.2; // how fast word flies
bulletFlySpeed = .000003
* dist ( mouseX, mouseY, myLocation.x, myLocation.y )
* dist ( mouseX, mouseY, myLocation.x, myLocation.y );
//

and then go on as above....

noCursor
noCursor(); in setup() hides the mouse cursor. Looks better.