# Curve - control points settings for gauss curve behavior

I am just trying to understand the control points from a curve. The curve should behave like a Gaussian curve.

Unfortunately, I don’t really understand how to handle the control points.

My current sketch for testing:

``````int []points  = new int[12];

void setup() {
size(800, 800);
strokeWeight(2);
for (int i =0; i<12; i++)
points[i] = int(random(400));
}

void draw() {
background(220);
translate(width/4, height/4);
float xDist = 30;
for (int i =0; i<11; i++) {
// xy position
float x  = i*xDist;
float x2 = (i+1)*xDist;
float y  = points[i];
float y2 = points[i+1];

//control points
float cp1, cp2, cp3, cp4;
cp1 = x;
cp2 = y;
cp3 = x2;
cp4 = y2;

noFill();
curve(cp1, cp2, x, y, x2, y2, cp3, cp4);
fill(255);
circle(x, y, 10);
}
}
``````

I think you can just draw simple curve.

For complex curve you can connect several curves: curve() \ Language (API) \ Processing 3+

or you look at curveVertex, see Language Reference (API) \ Processing 3+

``````
int []points  = new int[12];

void setup() {
size(1800, 800);
strokeWeight(2);
for (int i =0; i<12; i++)
points[i] = int(random(400));
}

void draw() {
background(220);
translate(width/4, height/4);
float xDist = 30;
// for (int i =0; i<11; i++) {
// xy position
int i=10;

float x  = 300;
float y  = 100;

float x2 = 500;
float y2 = 100;

//control points
float cp1, cp2, cp3, cp4;
cp1 = x-200;
cp2 = y+400;

cp3 = x2+200;
cp4 = y2+400;

noFill();
curve(cp1, cp2, x, y, x2, y2, cp3, cp4);
fill(255, 2, 2);
ellipse(x, y, 10, 10);
ellipse(x2, y2, 10, 10);

fill(255, 2, 222);
ellipse(cp1, cp2, 10, 10);
ellipse(cp3, cp4, 10, 10);
//  }
noLoop();
}

``````

Thank you very much.

But I want to connect several curves and always map the exponential gaus curve between the curves.

My question could also be expressed differently:

how can I calculate the control points to get an up and down movement between the points, what would be the right math?

You mean Gauss or Gaussian function, with two s

You would have to connect approx. 4 curves with different control points.

Seems complicate. As I said consider curveVertex.

What is your goal with the curve or is that the entire project?

Because when you want to work with the points you can just make a graph of points.

I mean a Gaussian function.

I have looked at curvevertex, but have not really understood how to calculate the guide points correctly either.

My goal is to make my data chart more visually pleasing by representing exponential movements in the curves rather than linear connections.

I don’t know if this helps you.

here you can drag the points.

• Drag with mouse, pos is shown. Println with key s
``````
PVector[] points  = new PVector[4];
boolean hold=false;
int pvCurrent=-1;

void setup() {
size(1800, 800);
strokeWeight(2);
for (int i =0; i<points.length; i++) {
points[i] = new PVector(0, 0);
}

float xDist = 30;
// for (int i =0; i<11; i++) {
// xy position
int i=10;

float x  = 300;
float y  = 100;

float x2 = 500;
float y2 = 100;

//control points
float cp1, cp2, cp3, cp4;
cp1 = x-200;
cp2 = y+400;

cp3 = x2+200;
cp4 = y2+400;

points[0].set(x, y);
points[1].set(x2, y2);
points[2].set(cp1, cp2);
points[3].set(cp3, cp4);
}//func

void draw() {
background(220);
//translate(width/4, height/4);

fill(0);
text("Drag with mouse, pos is shown. Println with key s", 15, 15);

noFill();
curve(
points[2].x, points[2].y,
points[0].x, points[0].y,
points[1].x, points[1].y,
points[3].x, points[3].y);

fill(255, 2, 2);
ellipse(points[0].x, points[0].y, 10, 10);
ellipse(points[1].x, points[1].y, 10, 10);

fill(255, 2, 222);
ellipse(points[2].x, points[2].y, 10, 10);
ellipse(points[3].x, points[3].y, 10, 10);
//  }

if (hold) {
if (pvCurrent>-1)
points[pvCurrent].set(mouseX, mouseY);

fill(0);
text(mouseX+","+mouseY, 400, 400);
}//if
}//func

void mousePressed() {
hold=true;
for (int i = 0; i<points.length; i++) {
if (dist(points[i].x, points[i].y, mouseX, mouseY ) < 63) {
pvCurrent = i;
return;//leave
}
}//for
}

void mouseReleased() {
hold=false;
}

void keyPressed() {
if (key=='s') {
println("---------------------------");
for (int i = 0; i<points.length; i++) {
println( "points["+i+"].set("+ points[i].x+", "+ points[i].y + ");");
}
}
}
//

``````
1 Like

Thanks Chrisir,
this could be quite helpful to improve the math.

1 Like