# How to draw a curve using its equation?

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.

Best,
Anelim

2 Likes

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;

2 Likes

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

``````point(x,y);
``````

with a line,
as that already requires the handling of â€ślast pointâ€ťâ€¦

2 Likes

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);
}
``````

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

2 Likes

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);

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.

2 Likes

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

2 Likes

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.

1 Like