How to draw a curve using its equation?

[Anelim]

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:

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

[Chrisir]

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

[kll]

@Anelim

curveVertex

curveVertex() / Reference

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

why not start with connecting your points

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

[kfrajer]

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. For example:

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:

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 and find the function that is more convenient for your sketch.

Kf

[glv]

Hello,

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

//Added:
float xfLast;
float yf1Last;


void setup()
  {
  // ...
  } 

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

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

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.

[Anelim]

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

Here is the code.

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

[jeremydouglass]

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

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.