I've come across some really impressive examples of kinetic typography multiple times. These examples treat every letter as a particle, creating a system where text can be influenced by forces like gravity or centrifugal force. Usually, these systems are built using Processing and p5.js.
Inspired by these dynamic typographic examples, I'm working on an interactive web screen filled with text using p5.js. When the user hovers their cursor over the text, it starts bouncing around the screen.
While translating my sketch from Processing to p5.js, I encountered an issue with the spacing of the text in the setup() function. The original code in Processing functions correctly, but in p5.js, the spacing is not as smooth.
Here's the section of code in Processing that focuses on spacing the letters:
void setup() {
size(640, 360);
f = createFont("Arial", fontS, true);
textFont(f);
springs = new Spring[message.length()];
int locx = 40;
int locy = 100;
for (int i = 0; i < message.length(); i++) {
springs[i] = new Spring(locx, locy, 40, springs, i, message.charAt(i));
locx += textWidth(message.charAt(i));
if (locx >= 360) {
locy += 60;
locx = 40;
}
}
}
You can view the result https://i.sstatic.net/Itnvx.png
In the translated p5.js code, I attempted to fix the spacing issue by adjusting the value of locx:
springs[i] = new Spring(locx*5, locy, 40, springs, i, message.charAt(i));
The updated result can be seen here: https://i.sstatic.net/FvuUJ.png. While it may seem correct visually, I am confident there is still an underlying problem.
I have tried various solutions, including modifying the Spring class and its related functions. Unfortunately, I haven't been able to resolve the spacing issue entirely. Any assistance would be greatly appreciated.
//Edit As suggested in the comments, here is the revised Spring class written in p5.js:
// Spring class
class Spring {
constructor (_x, _y, _s, _others, _id, letter_) {
// Initialization code...
}
update() {
// Update logic...
}
overEvent() {
// Mouse-over detection...
}
otherOver() {
// Check other springs...
}
box_collision() {
// Handling edge collisions...
}
collide() {
// Collision handling...
}
display() {
// Display method...
}
pressed() {
// Handling click/touch events...
}
released() {
// Handling release events...
}
}
To access the full code and experiment with it further, visit the Spring text p5js code editor.
Please note that I made modifications to the Spring class structure, moving functions outside the constructor. However, I'm still struggling with fixing the spacing issue in my kinetic typography project.