# Animate bezier path logo

**URL:** <https://discourse.processing.org/t/animate-bezier-path-logo/43624>\
**Category:** Project Guidance\
**Tags:** homework\
**Created:** [January 5, 2024, 10:08pm UTC](https://discourse.processing.org/t/animate-bezier-path-logo/43624 "2024-01-05T22:08:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![omagash](https://avatars.discourse-cdn.com/v4/letter/o/50afbb/32.png) [@omagash](https://discourse.processing.org/u/omagash)\
**Post date:** [January 5, 2024, 10:08pm UTC](https://discourse.processing.org/t/animate-bezier-path-logo/43624/1 "2024-01-05T22:08:55Z")

</div>

Hey everyone!!  
I have the assignment to create a logo in processing. I already created a “logo” but I´m struggling with the animation and I need a little help:)

size (400, 400);  
noFill();  
stroke(0);  
strokeWeight(3);  
ellipse(150,325,30,30);  
bezier(150, 310, 150, -150, 225, 300, 130, 220);  
bezier(130, 220, 80, 150, 300, 10, 310, 160);  
bezier(310, 160, 330, 300, 195, 300, 200, 190);  
bezier(200, 190, 195, 110, 270, 110, 280, 170);  
bezier(280, 170, 290, 230, 240, 230,240, 190);  
bezier(240, 190, 245, 150, 295, 150, 290, 230);  
bezier(290, 230, 295, 310, 195, 310, 185, 230);  
bezier(185, 230, 160, 60, 370, 60, 330, 280);  
ellipse(330, 295, 30, 30);

I want to draw the line starting from one circle to the other following the bezier path.  
So its not just printed all at once but develops(?). Kind of like a Fuse! And should also be able to develop backwards(the same style).  
I dont really know how to approach this( I`ve tried a bit but didnt come far(I`m a beginner lol)). If you have any idea please let me know.  
Have a nice day:D

---

<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 5, 2024, 11:55pm UTC](https://discourse.processing.org/t/animate-bezier-path-logo/43624/3 "2024-01-05T23:55:35Z")

</div>

for an animation you need the functions setup and draw

check out `bezierPoint`, see reference [bezierPoint() / Reference / Processing.org](https://processing.org/reference/bezierPoint_.html)

here is an example

Warm regards,

Chrisir

```auto

int i=0;

// -------------------------------------------------------------------------------------------------------------------------

void setup() {
  // size(1900, 1000);
  size (400, 400);
}

void draw() {
  background(211);

  noFill();
  stroke(0);
  strokeWeight(3);
  ellipse(150, 325, 30, 30);
  bezier(150, 310, 150, -150, 225, 300, 130, 220);
  bezier(130, 220, 80, 150, 300, 10, 310, 160);
  bezier(310, 160, 330, 300, 195, 300, 200, 190);
  bezier(200, 190, 195, 110, 270, 110, 280, 170);
  bezier(280, 170, 290, 230, 240, 230, 240, 190);
  bezier(240, 190, 245, 150, 295, 150, 290, 230);
  bezier(290, 230, 295, 310, 195, 310, 185, 230);
  bezier(185, 230, 160, 60, 370, 60, 330, 280);
  ellipse(330, 295, 30, 30);

  noFill();
  bezier(340, 80, 40, 40, 360, 360, 60, 320);

  int steps = 100;
  // for (int i = 0; i <= steps; i++) {
  float t = i / float(steps);
  float x = bezierPoint(340, 40, 360, 60, t);
  float y = bezierPoint(80, 40, 360, 320, t);
  ellipse(x, y, 10, 10);
  // }
  i++;
}

```

---

<div class="post-metadata">

**Author:** ![omagash](https://avatars.discourse-cdn.com/v4/letter/o/50afbb/32.png) [@omagash](https://discourse.processing.org/u/omagash)\
**Post date:** [January 6, 2024, 12:32am UTC](https://discourse.processing.org/t/animate-bezier-path-logo/43624/4 "2024-01-06T00:32:43Z")

</div>

Thank you so much for your answer Chrisir!!  
Is there any way I could link the line to the moving ellipse, so that the ellipse would end up “drawing” the picture?  
Kind regards,  
Madita

---

<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 6, 2024, 1:12am UTC](https://discourse.processing.org/t/animate-bezier-path-logo/43624/5 "2024-01-06T01:12:44Z")

</div>

My example shows one bezier and the two bezierPoint code lines for it.

You need to reproduce this for your beziers of course.

Or work with them one after another which might be a bit tricky

bezierPoint() is one for x and one for y by the way - see reference

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 6, 2024, 4:29pm UTC](https://discourse.processing.org/t/animate-bezier-path-logo/43624/6 "2024-01-06T16:29:30Z")

</div>

Hello @omagash ,

> [@omagash](#):
>
> I have the assignment to create a logo in processing

Who is the assignment for?

This is an achievable task.

The resources you need are here:  
[https://processing.org/](https://processing.org/) \< Check out the documentation and learn section!

I scrutinized the two references:

- [bezier() / Reference / Processing.org](https://processing.org/reference/bezier_.html)
- [bezierPoint() / Reference / Processing.org](https://processing.org/reference/bezierPoint_.html)

A function _bz\_points()_ was written to replace this from the _bezierPoint ()_ reference:

```auto
int steps = 10;
for (int i = 0; i <= steps; i++) {
  float t = i / float(steps);
  float x = bezierPoint(340, 40, 360, 60, t);
  float y = bezierPoint(80, 40, 360, 320, t);
  ellipse(x, y, 10, 10);
}

```

I then used the _bz\_points()_ function after each _bezier()_:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/7/a76d74d316e9e9c0aeb03f85ddb42d478f6c0f9e.png)

You can use the _for() loop_ after each _bezier()_ but it is really much easier to write a function, pass the parameters (they are the same and can be cut and pasted) and this is less likely to have errors introduced.

The points that are generated can be stored in an array and later used to plot or animate the data:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/2/e298cf89eebf64159029484e20f3d87c2ec380d8.png)

The last one is animated in my code and I snipped an image part way!

I would do this in steps:

- Understand the functions in references and plot the points for each _bezier()_.
- Save the points in an array.
- Use the data in array to plot the points.
- Once the above is achieved animate the points in the _draw()_ cycle.
- Only after you can plot the above consider generating denser data points (more steps) and then sorting through them for equal spacing between each point.
- See _dist()_ function.

I enjoyed this challenge! I hope you enjoy it as well.

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 6, 2024, 5:40pm UTC](https://discourse.processing.org/t/animate-bezier-path-logo/43624/7 "2024-01-06T17:40:15Z")

</div>

> [@glv](#):
>
> - Only after you can plot the above consider generating denser data points (more steps) and then sorting through them for equal spacing between each point.
> - See _dist()_ function.

I followed my advise and took on the challenge of a dense array of data (500 steps) and managed to achieve this:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/3/531770940f5b4a8600e32f8b7e68d59d4e1cd0d5.png)

It is achievable if you take it in steps.

Be sure to save working versions of code before progressing and document code.

`:)`

---

<div class="post-metadata">

**Author:** ![omagash](https://avatars.discourse-cdn.com/v4/letter/o/50afbb/32.png) [@omagash](https://discourse.processing.org/u/omagash)\
**Post date:** [January 6, 2024, 11:02pm UTC](https://discourse.processing.org/t/animate-bezier-path-logo/43624/8 "2024-01-06T23:02:59Z")

</div>

Thank you so much for your reply! : )  
It helps a lot!! I`m looking forward to trying it 😆  
Have a great day!!

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 7, 2024, 2:51pm UTC](https://discourse.processing.org/t/animate-bezier-path-logo/43624/9 "2024-01-07T14:51:09Z")

</div>

There is always more than one way to do something, so here is an alternative approach that I used to animate your logo forwards and in reverse.

[![](https://img.youtube.com/vi/3MP6EqKhWks/hqdefault.jpg "Animating Bezier path") ](https://www.youtube.com/watch?v=3MP6EqKhWks)

This is an assignment so I am not providing the full code solution rather an explanation of the algorithms I used.

The first thing I did was to represent the logo data in a 2D array

```auto
float[][] logoF = {
  new float[] {150, 310, 150, -150, 225, 300, 130, 220},
  new float[] {130, 220, 80, 150, 300, 10, 310, 160},
  new float[] {310, 160, 330, 300, 195, 300, 200, 190},
  new float[] {200, 190, 195, 110, 270, 110, 280, 170},
  new float[] {280, 170, 290, 230, 240, 230, 240, 190},
  new float[] {240, 190, 245, 150, 295, 150, 290, 230},
  new float[] {290, 230, 295, 310, 195, 310, 185, 230},
  new float[] {185, 230, 160, 60, 370, 60, 330, 280}
};

```

Each row represents a single Bezier curve, so we have 8 curves -  
`logoF[0]`, `logoF[1]`, `logoF[2]`, `logoF[3]`, `logoF[4]`, `logoF[5]`, `logoF[6]` and `logoF[7]`

We can create a reference to any of the curves like this  
`float[] bc = logoF[n]; // where n is in the range 0-7 inclusive`

Once we have this reference we can access the control point data like this

```auto
bc = logoF[3]; // fourth curve
println(bc[0], bc[1]); // outputs 200, 190

```

Using arrays allows easy access all the Bezier control point coordinates. The next stage is to look at the algorithm to trace out the entire set of curves.

To represent a point on a Bezier curve we use a parametric variable which we will call `t`. If we vary `t` in the range 0.0 to 1.0 we can calculate any position on the curve.

In our logo we have 8 Bezier curves so we create a new parametric variable, `ct` which varies between 0.0 and 8.0 inclusive. Consider the point `ct = 3.14` the whole number part (can be zero) represents the individual Bezier curve and the decimal part the parametric position on that curve so we have

```auto
ct = 3.14;
cIdx = int(ct); // index = 3
bc = logoF[cIdx]; // reference to the coordinate array for the 4th Bezier curve
t = ct - cIdx; // parametric position = 0.14

```

So the algorithm for drawing the entire curve for a given `ct` value is

```
Calculate the curve number (cIdx)
Calculate the parametric variable (t)
for every curve in the range >=0 and < cIdx
   use the bezier function to draw the entire Bezier curve
Get a reference to the part traced curve (logoF[cIdx])
Draw this curve from 0.0 to `t`
```

You can use the same algorithm and code to draw the logo in reverse if you create a new 2D array (`logoR`) and reverse the Binary curve order and for each Bezier curve reverse the coordinate _ **pairs** _.