Curve - control points settings for gauss curve behavior

Processing Coding Questions
1

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

gaussian

Unfortunately, I don’t really understand how to handle the control points.
Can someone please help me?

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

Thanks in advance!

2

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();
}
3

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?

4

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.

5

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.

Thanks again for your time!

6

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
7

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

1 Like