Hi, everyone !
I need to achieve this effect. But I don’t know how to achieve it. Can anyone give me some tips how to do it ?
Thank you ! I appreciate very help !
My first approach is find the vertices for the text you want to animate then copy those vertices into an array, for the amount you want / 2 as the effect is mirrored horizontally. Same for the mirrored vertices. And then apply transformations to the vertices using your preferred function.
One final set of vertices for the white text in the center.
Thank you for your reply ! I really did’nt understand what you said, but I don’t have any idea how to stretch letters like him.
-
first point, text() command doesn’t have fill- and stroke-colors like rect() or ellipse() command. Therefore it’s hard to get an outline. text() knows only fill() and has only one color.
-
second point: There is a lib with examples, see Codes - GENERATIVE GESTALTUNG
-
third point: What exactly do you want to achieve? The outline of the text? The sine movement? Would it be enough to have the single letters move up and down in a sine wave or do you need to have each letter have a sine in it like in the video?
1 Like
Thank you for your reply Chrisir !
I just want to achieve that each letter have a sine like in the video, like they are string…
Ah, so you don’t want to change each letters form individually!!!
And you don’t want the letters to have only an outline (which is hard)
Then you don’t need the lib geomerative!!!
You just want to move each letter up and down like sine wave!!!
(It is always difficult to just point to a video because it’s not always clear which part you are referring to)
for sine please see: Trigonometry Primer \ Processing.org
I think you didn’t understand what I want.
Look at video and watch how each letter stretches. I want to achieve that stretching effect not sine wave !
Then you need the lib. 
1 Like
Do you mean the lib is Geomerative ?
1 Like
Yeah, it’s good with letters
paulgoux gave a good description
import geomerative.*;
String message = "WAVE";
color textColor=0;
RFont f;
float fontSize=60;
int splitGlyph = 220; // How many points !!!!!!!!!!!!!
characterSpec characters;
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
void setup() {
size(1920, 1920);
RG.init(this);
f = new RFont("SFNSText.ttf", int( fontSize), LEFT);
characters = new characterSpec( message );
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
void draw() {
background(0);
smooth();
translate(500, 100);
int i=0;
translate(0, i+1*50);
if (i%4==0) {
translate(-80, 0);
}
if (i<3) {
translate(i*20, 0);
} else if (i==3) {
translate(130, 0);
} else if (i>3 && i<7) {
translate(-280, 0);
translate(i*45, 0);
} else if (i==7) {
translate(-150, 0);
} else if (i==8) {
translate(355, 0);
} else if (i==9) {
translate(-150, 0);
} else if (i==10) {
translate(200, 0);
} else if (i>10 && i <12) {
translate(-160, 0);
} else if (i==12) {
translate(160, 0);
} else if (i==13) {
translate(-190, 0);
}
if (i<=8 && i%4==0) {
translate(0, 40);
}
if ( i==11 ) {
translate(0, 40);
}
characters.display();
}//draw
// ==============================================================================
class characterSpec {
String m;
int tChildCount;
RShape bShape;
RPoint[][] pointsP;
// constr
characterSpec( String _m) {
m=_m;
for (int i=0; i<m.length(); i++) {
pointsP= new RPoint [m.length()][splitGlyph];
if (m.length()>0) {
bShape= new RShape();
bShape= f.toShape(m);
tChildCount = bShape.children.length;
int child=bShape.children.length;
child=max(0, bShape.children.length);
child=tChildCount;
}
}
}// constr
void display( ) {
for (int k=0; k<tChildCount; k++) {
for (int j=0; j<splitGlyph; j++) {
float frac =(1.0/splitGlyph);
pointsP[k][j]=bShape.children[k].getPoint(j*frac);
stroke(255);
point(pointsP[k][j].x, pointsP[k][j].y);
}
}
}
//
}//class
//
1 Like
Geomeritive would be the simplest solution. But I guess it depends if you want to be able to do animate any piece of text or just text which you have given vertices for.
import geomerative.*;
RPoint[][] pointPaths;
float rad = 300;
String txt = "O";
int txtSize = 700;
int savedTime, passedTime, totalTime = 4000;
void setup() {
size(900, 900, P2D);
RG.init(this); //initializing geomerative
RShape grp = RG.getText("B", "aktif.ttf", txtSize, CENTER);
RG.setPolygonizer(RG.UNIFORMLENGTH);
RG.setPolygonizerLength(1);
pointPaths = grp.getPointsInPaths();
}
void draw() {
background(0);
stroke(255);
for (int i = 0; i <= pointPaths.length-1; i++) {
for (int j = 0; j <= pointPaths[i].length-1; j ++) {
point(width*0.5+pointPaths[i][j].x, height * 0.8 + pointPaths[i][j].y);
}
}
}
Is it same code like yours ?
I didn’t understand what you wanted to achieve.
Yeah, I thought about it. But I don’t really know how to get access to the points of letter manually. I wanted to say, first sine affects to the left side and left + 1 till left <= right.
Your code looks good. I just wanted to give an example.
With your code you can access the points of a letter.
Well done!
1 Like
Yeah, I thought about it. But I don’t really know how to get access to the points of letter manually. I wanted to say, first sine affects to the left side and left + 1 till left <= right.
Yeah, what Paul said above.
You can copy all points in 2D array of PVector PVector[][] list in a way that
- all points with the lowest x are in column 0,
- all points with the 2nd lowest x are in column 1,
- etc.
then sine on each column separately.
then
1 Like
Does geomeritive not give you access to the points?
No, it gives. But I can’t control them easily. Like I want to say, how to get access only left part of letter, then left + 1 part till right side of letter.
Here is the data you have to analyze
You have to put work in it, we can’t make it for you
We also can’t answer every mini question
1 Like
If geo lib gives you all the points, it should be possible to sort them left to right or in any order for that matter. The question I suppose is does geo separate the letters or not.
Alternatively you could check @noel post on parametric equations where we discuss the way to turn photos into vertices. It uses open cv to get the contours, and providing that you can make a mask out of the text you could then extract the vertices using opencv. The question would still remain though as to how these are grouped.
Once that’s figured out and you are able to access the points in your preferred order the only thing remaining would be to find the bottom and top of the letters as that is what you are going to be stretching.
1 Like