# Plotting Lissajous Figures

**URL:** <https://discourse.processing.org/t/plotting-lissajous-figures/15567>\
**Category:** Coding Questions\
**Created:** [November 17, 2019, 7:08am UTC](https://discourse.processing.org/t/plotting-lissajous-figures/15567 "2019-11-17T07:08:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![pandl](https://avatars.discourse-cdn.com/v4/letter/p/35a633/32.png) [@pandl](https://discourse.processing.org/u/pandl)\
**Post date:** [November 17, 2019, 7:08am UTC](https://discourse.processing.org/t/plotting-lissajous-figures/15567/1 "2019-11-17T07:08:34Z")

</div>

Thank you for reading this.

I’ve spent most of the day on this and although the code basically works the result is pretty rough. Can anyone suggest how I might smooth out the resulting curve?

```auto
float a = 0.0;
float inc = TWO_PI/25.0; // I don't understand why the inc value is 2*Pi / 25.  
float prev_x = 0, prev_y = 50, x, y;

void setup()
{
  size(400, 200);
  stroke(255, 0, 0);
  noLoop();
}

void draw()
{
  for (int i=0; i<160; i=i+5)
  {
    //x = i;
    y = 50 + cos(a *3) * 40.0; // 3 times the frequency of the x axis
    x = 50 + sin(a) * 40.0;

    line(prev_x, prev_y, x, y);
    prev_x = x;
    prev_y = y;
    a = a + inc;
  }
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 17, 2019, 7:13am UTC](https://discourse.processing.org/t/plotting-lissajous-figures/15567/2 "2019-11-17T07:13:38Z")

</div>

> [@pandl](#):
>
> i=i+5

can change to

```auto
i++;

```

but still get lines, just more of them  
( sorry in your case with a smaller `inc` )

* * *

but processing can do curves

> **[curveVertex() / Reference](https://processing.org/reference/curveVertex_.html)**
>
> Specifies vertex coordinates for curves. This function may only be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape(). The…

!!! need a start and end control point !!!

* * *

but as a first start a other design

```auto
int nx = 3,ny = 1;
float zoom=100;

void setup() {
  size(400, 400);
  stroke(0,120,0);
  strokeWeight(3);
}

float a = TAU/360;

void draw() {
  background(0,0,80);
  translate(width/2,height/2);
  nx = (int)map(mouseX,0,width,1,10);
  ny = (int)map(mouseY,0,height,1,10);
  for (int i=0; i < 360; i++)
    point(cos(a*i*nx) * zoom,sin(a*i*ny) * zoom);
}

```

now with curve

```auto
int nx = 3,ny = 1;
float zoom=100;
float a = TAU/360;

void setup() {
  size(400, 400);
  stroke(0,120,0);
  strokeWeight(3);
  noFill();
}

void draw() {
  background(0,0,80);
  translate(width/2,height/2);
  nx = (int)map(mouseX,0,width,1,10);
  ny = (int)map(mouseY,0,height,1,10);
  beginShape();
  curveVertex(cos(0) * zoom,sin(0) * zoom);
  for (int i=0; i < 360; i++)
    curveVertex(cos(a*i*nx) * zoom,sin(a*i*ny) * zoom);
  curveVertex(cos(a*360*nx) * zoom,sin(a*360*ny) * zoom);
  endShape(CLOSE);
}

```

---

<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:** [November 17, 2019, 8:18am UTC](https://discourse.processing.org/t/plotting-lissajous-figures/15567/3 "2019-11-17T08:18:59Z")

</div>

not sure if these resources can help

[![](https://img.youtube.com/vi/SoYnZHBP-6M/maxresdefault.jpg "Coding Math: Episode 4 - Circles, Ellipses and Lissajous Curves") ](https://www.youtube.com/watch?v=SoYnZHBP-6M)

[![](https://img.youtube.com/vi/--6eyLO78CY/maxresdefault.jpg "Coding Challenge #116: Lissajous Curve Table") ](https://www.youtube.com/watch?v=--6eyLO78CY&t=325s)

---

<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:** [November 17, 2019, 2:24pm UTC](https://discourse.processing.org/t/plotting-lissajous-figures/15567/4 "2019-11-17T14:24:04Z")

</div>

Hello,

[https://processing.org/examples/sinewave.html](https://processing.org/examples/sinewave.html)  
[https://processing.org/tutorials/trig/](https://processing.org/tutorials/trig/)  
[https://processing.org/reference/TAU.html](https://processing.org/reference/TAU.html) I prefer to use TAU; TAU = TWO\_PI

I always start with points and work from there when plotting.

I did not join lines in this example:

```auto
float a = 0.0;
float x, y;

void setup()
  {
  size(400, 300);
  stroke(255, 255, 0);
  strokeWeight(4);
  }

void draw()
  {
  background(0);
  translate(width/2, height/2);
  int step = 200;
  for (int i=0; i<step; i++)
    {
    a =i*TAU/step;
    y = 100*cos(a*3); // 3 times the frequency of the x axis
    x = 100*sin(a);
    point(x, y); 
    }
  }

```

🙂

---

<div class="post-metadata">

**Author:** ![pandl](https://avatars.discourse-cdn.com/v4/letter/p/35a633/32.png) [@pandl](https://discourse.processing.org/u/pandl)\
**Post date:** [November 17, 2019, 10:01pm UTC](https://discourse.processing.org/t/plotting-lissajous-figures/15567/5 "2019-11-17T22:01:25Z")

</div>

Thank you all for taking the time to reply.

kll, I wasn’t aware of processing curves function. Thank you for your examples.

paulgoux, I’m a subscriber to the Coding Challenge channel. Lots of useful stuff there.

glv, thank you for your example. My first effort did use the point function but the displayed points were so tiny. I think I can now see why. A combination of strokeWeight(4) and the number of points.

---

<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:** [November 18, 2019, 11:41am UTC](https://discourse.processing.org/t/plotting-lissajous-figures/15567/6 "2019-11-18T11:41:51Z")

</div>

Hello,

Thank you so very much for your kind and thoughtful response to all of those that helped you.

🙂