# Project guidance

**URL:** <https://discourse.processing.org/t/project-guidance/27115>\
**Category:** Libraries\
**Created:** [January 16, 2021, 3:18pm UTC](https://discourse.processing.org/t/project-guidance/27115 "2021-01-16T15:18:30Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [January 16, 2021, 3:18pm UTC](https://discourse.processing.org/t/project-guidance/27115/1 "2021-01-16T15:18:30Z")

</div>

Hi, everyone !

I need to achieve this [effect](https://www.instagram.com/p/CFH18Sah8FJ/). 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 !

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [January 16, 2021, 4:15pm UTC](https://discourse.processing.org/t/project-guidance/27115/2 "2021-01-16T16:15:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [January 18, 2021, 11:16am UTC](https://discourse.processing.org/t/project-guidance/27115/3 "2021-01-18T11:16:22Z")

</div>

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.

---

<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:** [January 18, 2021, 11:30am UTC](https://discourse.processing.org/t/project-guidance/27115/4 "2021-01-18T11:30:31Z")

</div>

- 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](http://www.generative-gestaltung.de/1/code)

- 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?

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [January 18, 2021, 11:54am UTC](https://discourse.processing.org/t/project-guidance/27115/5 "2021-01-18T11:54:26Z")

</div>

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…

---

<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:** [January 18, 2021, 12:00pm UTC](https://discourse.processing.org/t/project-guidance/27115/6 "2021-01-18T12:00:56Z")

</div>

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](https://www.processing.org/tutorials/trig/)

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [January 18, 2021, 12:08pm UTC](https://discourse.processing.org/t/project-guidance/27115/7 "2021-01-18T12:08:11Z")

</div>

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 !

---

<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:** [January 18, 2021, 12:31pm UTC](https://discourse.processing.org/t/project-guidance/27115/8 "2021-01-18T12:31:19Z")

</div>

Then you need the lib. 😉

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [January 18, 2021, 12:35pm UTC](https://discourse.processing.org/t/project-guidance/27115/9 "2021-01-18T12:35:07Z")

</div>

Do you mean the lib is Geomerative ?

---

<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:** [January 18, 2021, 12:44pm UTC](https://discourse.processing.org/t/project-guidance/27115/10 "2021-01-18T12:44:46Z")

</div>

Yeah, it’s good with letters

paulgoux gave a good description

```auto

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
//

```

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [January 18, 2021, 1:22pm UTC](https://discourse.processing.org/t/project-guidance/27115/11 "2021-01-18T13:22:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [January 18, 2021, 1:50pm UTC](https://discourse.processing.org/t/project-guidance/27115/12 "2021-01-18T13:50:09Z")

</div>

```auto
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.

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [January 18, 2021, 1:51pm UTC](https://discourse.processing.org/t/project-guidance/27115/13 "2021-01-18T13:51:50Z")

</div>

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.

---

<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:** [January 18, 2021, 2:03pm UTC](https://discourse.processing.org/t/project-guidance/27115/14 "2021-01-18T14:03:16Z")

</div>

Your code looks good. I just wanted to give an example.

With your code you can access the points of a letter.

Well done!

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [January 18, 2021, 2:20pm UTC](https://discourse.processing.org/t/project-guidance/27115/15 "2021-01-18T14:20:16Z")

</div>

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.

---

<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:** [January 18, 2021, 2:27pm UTC](https://discourse.processing.org/t/project-guidance/27115/16 "2021-01-18T14:27:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [January 18, 2021, 2:28pm UTC](https://discourse.processing.org/t/project-guidance/27115/17 "2021-01-18T14:28:45Z")

</div>

Does geomeritive not give you access to the points?

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [January 18, 2021, 2:50pm UTC](https://discourse.processing.org/t/project-guidance/27115/18 "2021-01-18T14:50:38Z")

</div>

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.

---

<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:** [January 18, 2021, 3:28pm UTC](https://discourse.processing.org/t/project-guidance/27115/19 "2021-01-18T15:28:22Z")

</div>

> [@yhlaskerimov](#):
>
> 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

> [@yhlaskerimov](#):
>
> ` point(width*0.5+pointPaths[i][j].x, height * 0.8 + pointPaths[i][j].y);`

You have to put work in it, we can’t make it for you

We also can’t answer every mini question

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [January 18, 2021, 4:34pm UTC](https://discourse.processing.org/t/project-guidance/27115/20 "2021-01-18T16:34:55Z")

</div>

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.

[Next page](https://discourse.processing.org/t/project-guidance/27115.md?page=2)