# Have a text follow a Bezier curve

**URL:** <https://discourse.processing.org/t/have-a-text-follow-a-bezier-curve/9399>\
**Category:** Coding Questions\
**Created:** [March 18, 2019, 12:45am UTC](https://discourse.processing.org/t/have-a-text-follow-a-bezier-curve/9399 "2019-03-18T00:45:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sevaus](https://avatars.discourse-cdn.com/v4/letter/s/e56c9b/32.png) [@sevaus](https://discourse.processing.org/u/sevaus)\
**Post date:** [March 18, 2019, 12:45am UTC](https://discourse.processing.org/t/have-a-text-follow-a-bezier-curve/9399/1 "2019-03-18T00:45:07Z")

</div>

Hello,

I have some Bezier curves that represent the transitions of automata: [https://imgur.com/a/aOsZvtZ](https://imgur.com/a/aOsZvtZ)  
These Bezier curves are draggable: [https://imgur.com/DycuyKP](https://imgur.com/DycuyKP)

I want to have the text follow the Bezier curve when it’s being dragged, how can I do that?

Thanks,  
sevaus.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [March 18, 2019, 1:16am UTC](https://discourse.processing.org/t/have-a-text-follow-a-bezier-curve/9399/2 "2019-03-18T01:16:47Z")

</div>

If you are using the [bezier](https://processing.org/reference/bezier_.html) function to draw your curves, then you could use [bezierPoint](https://processing.org/reference/bezierPoint_.html) to get the moving position and assign this position to your text.

Kf

---

<div class="post-metadata">

**Author:** ![sevaus](https://avatars.discourse-cdn.com/v4/letter/s/e56c9b/32.png) [@sevaus](https://discourse.processing.org/u/sevaus)\
**Post date:** [March 18, 2019, 2:05am UTC](https://discourse.processing.org/t/have-a-text-follow-a-bezier-curve/9399/3 "2019-03-18T02:05:12Z")

</div>

Thanks, I will try it.

Do you know how can I do to have the text displayed only when I’m clicking on the Bézier curve? I want it to be gone if I click elsewhere.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [March 18, 2019, 3:00am UTC](https://discourse.processing.org/t/have-a-text-follow-a-bezier-curve/9399/4 "2019-03-18T03:00:38Z")

</div>

That depends in your code. Provide an [MCVE](https://stackoverflow.com/help/mcve) and you could get some suggestions. But yes, it is doable.

Kf

---

<div class="post-metadata">

**Author:** ![sevaus](https://avatars.discourse-cdn.com/v4/letter/s/e56c9b/32.png) [@sevaus](https://discourse.processing.org/u/sevaus)\
**Post date:** [March 18, 2019, 1:15pm UTC](https://discourse.processing.org/t/have-a-text-follow-a-bezier-curve/9399/5 "2019-03-18T13:15:16Z")

</div>

The relevant portion of code that creates the arcs using Bezier curves is

```auto
//function drawArc draw arrows with parameters :
//e1 : the outgoing state ; e2 : the incoming state ; a : the number of the automata
//k : the number of the arrow of this automata ; num_arc : the number of the arrow in total (to allow the displacement)
//coordonnees : array containing the coordinates of each arrow ; first : boolean that indicates if it's the first time arrows are
//drawn (to create divs if it the case)
function drawArc(e1,e2,a,k,num_arc, coordonnees, first){

  var x = 155+(a-1)*230,
      y= 140+(4-e1)*50-(e2-e1)*25,
      h = 2+(e2-e1)*50, x1, x2, x3, x4,y1, y2, y3, y4;

  if (first){
    first = false;

    if (k%2==0){

      if (e2<e1){
        coordonnees[num_arc][0] = x-30+50*((k+1)/2)+(e1-e2-1)*15;
        coordonnees[num_arc][1] = y;
        }
      else {
        coordonnees[num_arc][0] = x-30-50*((k+1)/2)-(e1-e2-1)*15;
        coordonnees[num_arc][1] = y;
        }
    }

    else {

      if (e2>=e1){
        coordonnees[num_arc][0] = x+50*((k+1)/2)+(e2-e1-1)*15;
        coordonnees[num_arc][1] = y ;
        }

      else {
        coordonnees[num_arc][0] = x-55-50*(k+1)/2-(e2-e1-1)*15+30;
        coordonnees[num_arc][1] = y ;
      }
    }
    var arc_div = document.createElement('div');
    arc_div.className = "arc";
    arc_div.id = num_arc;
    document.body.appendChild(arc_div);
    arc_div.onmousedown = function(evt) {
        dragged = true;
        xi = num_arc; xj = 0;
        yi = num_arc; yj = 1;
    }

  }

  if (k%2==0){

    if (e2<e1){
      x1 = x4 = x;
      y1 = y+26+(e1-e2-1)*25;
      y4 = y-26-(e1-e2-1)*25;
      line(x,y-h/2, x+8,y-h/2-8);
      line(x,y-h/2, x+8,y-h/2+8);
      noFill();
      bezier(x1, y1, coordonnees[num_arc][0], coordonnees[num_arc][1]+(e1-e2-1)*25+20, coordonnees[num_arc][0], coordonnees[num_arc][1]-(e1-e2-1)*25-20, x4, y4);
      xx = bezierPoint(x1, coordonnees[num_arc][0], coordonnees[num_arc][0], x4, 1/2);
      yy = bezierPoint(y1, coordonnees[num_arc][1]+(e1-e2-1)*25+20, coordonnees[num_arc][1]-(e1-e2-1)*25-20, y4, 1/2);
      }
    else {
      x1 = x4 = x-30;
      y1 = y+24+(e2-e1-1)*25;
      y4 = y-26-(e2-e1-1)*25;
      line(x-38,y-h/2-9, x-30,y-h/2-1);
      line(x-38,y-h/2+7, x-30,y-h/2-1);
      noFill();
      bezier(x1, y1, coordonnees[num_arc][0]-30, coordonnees[num_arc][1]+(e2-e1-1)*25+20, coordonnees[num_arc][0]-30,coordonnees[num_arc][1]-(e2-e1-1)*25-20, x4, y4);
      xx = bezierPoint(x1, coordonnees[num_arc][0]-30, coordonnees[num_arc][0]-30, x4, 1/2);
      yy = bezierPoint(y1, coordonnees[num_arc][1]+(e2-e1-1)*25+20, coordonnees[num_arc][1]-(e2-e1-1)*25-20, y4, 1/2);
     }
  }

  else {

    if (e2>=e1){
      x1 = x4 = x;
      y1 = y+26+(e2-e1-1)*25;
      y4 = y-26-(e2-e1-1)*25;
      line(x,y-h/2, x+8,y-h/2-8);
      line(x,y-h/2, x+8,y-h/2+8);
      noFill();
      bezier(x1, y1, coordonnees[num_arc][0], coordonnees[num_arc][1]+(e2-e1-1)*25+20, coordonnees[num_arc][0], coordonnees[num_arc][1]-(e2-e1-1)*25-20, x4, y4);
      xx = bezierPoint(x1, coordonnees[num_arc][0], coordonnees[num_arc][0], x4, 1/2);
      yy = bezierPoint(y1, coordonnees[num_arc][1]+(e2-e1-1)*25+20, coordonnees[num_arc][1]-(e2-e1-1)*25-20, y4, 1/2);
      }
    else {
      x1 = x4 = x-30;
      x2 = x3 = x-55-50*(k+1)/2-(e2-e1-1)*15;
      y1 = y+24+(e1-e2-1)*25;
      y4 = y-26-(e1-e2-1)*25;
      line(x-38,y-h/2-9, x-30,y-h/2-1);
      line(x-38,y-h/2+7, x-30,y-h/2-1);
      noFill();
      bezier(x1, y1, coordonnees[num_arc][0]-30, coordonnees[num_arc][1]+(e1-e2-1)*25+20, coordonnees[num_arc][0]-30,coordonnees[num_arc][1]-(e1-e2-1)*25-20, x4, y4);
      xx = bezierPoint(x1, coordonnees[num_arc][0]-30, coordonnees[num_arc][0]-30, x4, 1/2);
      yy = bezierPoint(y1, coordonnees[num_arc][1]+(e1-e2-1)*25+20, coordonnees[num_arc][1]-(e1-e2-1)*25-20, y4, 1/2);
      }
  }
  divs[num_arc].style.top = yy + "px";
  divs[num_arc].style.left = xx + "px";
  fill(255);
  ellipse(xx, yy, 5,5);

}

```

The function that displays the text is

```auto
function afficheTrans(texte, e1, e2, a, k){

  var x = 155+(a-1)*230;
  var y= 140+(4-e1)*50-(e2-e1)*25;
  var h = 2+(e2-e1)*50;

  if (dist(mouseX, mouseY, x+8,y-h/2-8) < 50) {
    fill(255, 0, 0); //rouge
    //noStroke();
     text(texte,x+(e2-e1)*50, y);
}

}

```

Thanks a lot!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 21, 2019, 11:59pm UTC](https://discourse.processing.org/t/have-a-text-follow-a-bezier-curve/9399/6 "2019-03-21T23:59:54Z")

</div>

You may be interested in the tutorial “Placing text along a path using Geomerative and Processing”:

> **[Placing text along a path using Geomerative and Processing](http://louisc.co.uk/?p=2686)**
>
> Introduction
> In the last post here we explored placing points along an a wave path we had created all using the built in functionality of the Geomerative library. This was ultimately to allow text to be placed along the path, which is what...

Previous related discussion:

> [@Text reveal along a path](https://discourse.processing.org/t/text-reveal-along-a-path/1705/16):
>
> Hi Dan, Wish I could be more help, but mobile development isn’t my specialty. (I don’t have a touch screen device either.) The first question I would ask were I in your place would be: do the mouse [pressed](https://processing.org/reference/mousePressed_.html), [released](https://processing.org/reference/mouseReleased_.html) and [dragged](https://processing.org/reference/mouseDragged_.html) functions accurately represent touch events on the mobile device? I’m not sure because different flavors of Processing, like [Android](https://android.processing.org/reference/multitouch/touches.html) and [p5.js](https://p5js.org/reference/#/p5/touches) also include a touches array and touch event listeners. Searching the forum may also provide more information. Two threads whi…

Some generic approaches to circle-curve text:

- [Better text on path - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/9425/better-text-on-path)
- [textalongcurve | Learning Processing 2nd Edition](http://learningprocessing.com/examples/chp17/example-17-08-textalongcurve)