# How to draw a curve using its equation?

**URL:** <https://discourse.processing.org/t/how-to-draw-a-curve-using-its-equation/16870>\
**Category:** Coding Questions\
**Created:** [January 4, 2020, 9:50pm UTC](https://discourse.processing.org/t/how-to-draw-a-curve-using-its-equation/16870 "2020-01-04T21:50:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anelim](https://avatars.discourse-cdn.com/v4/letter/a/85e7bf/32.png) [@Anelim](https://discourse.processing.org/u/Anelim)\
**Post date:** [January 4, 2020, 9:50pm UTC](https://discourse.processing.org/t/how-to-draw-a-curve-using-its-equation/16870/1 "2020-01-04T21:50:54Z")

</div>

Hi.

I am new in using Processing and, also, new asking something here 🙂

I hope that will get some help here and solve my problem.

There is an equation of elliptic curve that I would like to draw using Processing.

I wrote a code that calculates some points that belong to the curve, but I didn’t have any success in connecting them.

Here is my code:

```auto
void setup()
{

size(500,500);

} // end of setup() function

void draw()
{
  
   background(0);

  // drawing elliptic curve y^2=x^3+7
  
  
  //drawing Cartesian coordinate system
  //vertical line
  line(width/2,0,width/2,height);
  
  //horizontal line
  line(0,height/2,width, height/2);
  
  // the starting point; zero point of elliptic curve
  float Xpom=-pow(7,1/3);
  float x0=Xpom+width/2;
  float y0=height/2;
 

  ellipse(20*Xpom+width/2,height/2,20,20);
  point(20*Xpom+width/2, height/2);
  
  for(int i=1;i<width/2;i++) // translation of points
  {   
    //x coordinate
    float x1=Xpom+i;
    float y1=sqrt(pow(x1,3)+7);
    
    // coordinates of the center of ellipse
    float xf=20*x1+width/2;
    float yf1=20*y1+height/2;
    
    // drawing ellipse
    stroke(255);
    strokeWeight(2);
    fill(127);
    ellipse(xf,yf1,20,20);
    
    point(xf,yf1);
    
   
    
    float yf2=height-yf1;
    
    
    stroke(255);
    strokeWeight(2);
    fill(127);
    ellipse(xf,yf2,20,20);
   
    point(xf,yf2);
  
    
    
   }// end of for loop 
  
    
}// end of draw() function

```

I draw a Cartesian coordinate system and points and ellipses that follow the shape of the given curve. I wanted, as I said, to connect them. The first idea was to save values that I’ve got in array of PVector and then to use those values to connect them using curveVertex. I couldn’t do that.

Is there any advice?

Thank you in advance.

Best,  
Anelim

---

<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 4, 2020, 11:25pm UTC](https://discourse.processing.org/t/how-to-draw-a-curve-using-its-equation/16870/2 "2020-01-04T23:25:32Z")

</div>

Just store the last value x,y and use line to connect new and old x,y

An increment of 1 is too much maybe

use the for loop then generate a new variable by saying newVar = i/10;

use newVar in your formula

---

<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:** [January 5, 2020, 1:37am UTC](https://discourse.processing.org/t/how-to-draw-a-curve-using-its-equation/16870/3 "2020-01-05T01:37:14Z")

</div>

> [@Anelim](#):
>
> curveVertex

> **[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…

is tricky as it requires control points…  
play with that in a extra little project.

why not start with connecting your points

```auto
point(x,y);

```

with a line,  
as that already requires the handling of “last point”…

* * *

more: [http://kll.engineering-news.org/kllfusion01/articles.php?article\_id=154#here18](http://kll.engineering-news.org/kllfusion01/articles.php?article_id=154#here18)

---

<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:** [January 5, 2020, 4:16am UTC](https://discourse.processing.org/t/how-to-draw-a-curve-using-its-equation/16870/4 "2020-01-05T04:16:48Z")

</div>

Please edit your post and add tripple back thicks before and after your code block: ````` as this will format your code properly here in the forum. Not doing this affects your original code format and some characters are removed from your original code.

You can use arrays to store the x and y coordinates. You can also use an array of vectors or you can use a dynamic size array of vectors by using an [ArrayList](https://processing.org/reference/ArrayList.html). For example:

```auto
ArrayList<PVector> points = new ArrayList<PVector>();
float x=0;
float y=0;
float deltaX=0.1;
while(x<width/2){
  x+=deltaX;
  y=sqrt(pow(x,3)+7);
  PVector vec = new PVector(x,y);
  points.add(vec);
}

```

To plot them:

```auto
stroke(255,0,0); //Red 
for(int i=1;i<points.size();i++){ //Notice starting from 1
  PVector v1 = points.get(i-1);
  PVector v2 = points.get(i);
  line(v1.x,v1.y,v2.x,v2.y);
}

```

Change the value of deltaX if you want finer distances between the points. You can also use curve, Bezier, etc. Explore the [reference](https://processing.org/reference/) and find the function that is more convenient for your sketch.

Kf

---

<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 5, 2020, 12:17pm UTC](https://discourse.processing.org/t/how-to-draw-a-curve-using-its-equation/16870/5 "2020-01-05T12:17:08Z")

</div>

Hello,

A couple of lines of code added to your code to get you started:

```auto
//Added:
float xfLast;
float yf1Last;

void setup()
  {
  // ...
  } 

void draw()
  { 
  //... 
  point(xf, yf1);

  //Added:
  line (xf, yf1, xfLast, yf1Last);
  xfLast = xf;
  yf1Last = yf1;
  //...
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/12349de50292506b647e4f8096405c07bc956694.png)

Keep it simple and then move on to more advanced approaches.

There is no “last” point on the first pass so that will have to be considered and coded later; I leave that to you.

🙂

---

<div class="post-metadata">

**Author:** ![Anelim](https://avatars.discourse-cdn.com/v4/letter/a/85e7bf/32.png) [@Anelim](https://discourse.processing.org/u/Anelim)\
**Post date:** [January 5, 2020, 7:17pm UTC](https://discourse.processing.org/t/how-to-draw-a-curve-using-its-equation/16870/6 "2020-01-05T19:17:53Z")

</div>

Thank you very much for the advice.  
I’ve managed to draw approximation of elliptic curve 🙂

Here is the code.

```auto

float xfLast;
float yf1Last;
float yf2Last;

void setup()
{

size(500,500);

} // end of setup() function

void draw()
{
  
   background(0);

  // drawing elliptic curve y^2=x^3+7
  
  
  //drawing Cartesian coordinate system
  //vertical line
  line(width/2,0,width/2,height);
  
  //horizontal line
  line(0,height/2,width, height/2);
  
  // the starting point; zero point of elliptic curve
  float Xpom=-pow(7,1/3);
  float x0=Xpom+width/2;
  float y0=height/2;
 
  xfLast = 20*Xpom+width/2;
  yf1Last =y0; 
  yf2Last = y0;
  float xf1Last= 20*Xpom+width/2;
  ellipse(20*Xpom+width/2,height/2,10,10);
  point(20*Xpom+width/2, height/2);
  
  for(int i=1;i<width/2;i++) // translation of points
  {   
    //x coordinate
    float x1=Xpom+i;
    float y1=sqrt(pow(x1,3)+7);
    
    // coordinates of the center of ellipse
    float xf=20*x1+width/2;
    float yf1=20*y1+height/2;
    
    // drawing ellipse
    stroke(255);
    strokeWeight(2);
    fill(127);
    ellipse(xf,yf1,10,10);
    
    point(xf,yf1);
    
    //using line()
     line (xf, yf1, xfLast, yf1Last);
     xfLast = xf;
     yf1Last = yf1;
    
    
   
    
    float yf2=height-yf1;
    
    
    stroke(255);
    strokeWeight(2);
    fill(127);
    ellipse(xf,yf2,10,10);
   
    point(xf,yf2);
  
    //using line()
    line (xf, yf2, xf1Last, yf2Last);
    xf1Last = xf;
    yf2Last = yf2;
    
   }// end of for loop 
  
    
}// end of draw() function

```

It has to be improved, but it is good enough for a start.

Thank you, again.

Anelim

---

<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:** [January 6, 2020, 8:18pm UTC](https://discourse.processing.org/t/how-to-draw-a-curve-using-its-equation/16870/7 "2020-01-06T20:18:22Z")

</div>

If you are doing future graphing projects, you may also be interested in Processing libraries for graphing cartesian points – for example, grafica:

[https://jagracar.com/sketches/defaultPlot.php](https://jagracar.com/sketches/defaultPlot.php)

 ![grafica-default-plot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b250f8480d0c2876933711722874de45dbd1572e.png)

These can be interesting either as tools to use off-the-shelf, or the library interface / code itself can be interesting for how others have approached designing solutions to similar problems.