Curve Graphs?

TirthP

Hi,

I was wondering what the best way to design a curve graph is.

I ultimately want to make a long graph, and make a line smoothly and swiftly going through the points similar to the red one in the image here. Not an animation btw, just wondering how to design the line itself - do I use Bezier Curves? If so, how should I go about doing it?

Thanks

Chrisir

Did you do the tutorial on Curves?

https://www.processing.org/tutorials/

Chrisir

maybe you can make use of my small bezierVertex Editor

// see https://www.processing.org/tutorials/curves/
// see https://forum.processing.org/two/discussion/26216/can-someone-help-me-to-draw-this#latest

final String helpText = 
  "BezierVertex-Editor: \nYou can click mouse to add new points, drag and drop existing points to move them.\n"
  +"Backspace to remove last entry, delete to remove highlighted point (green),\n"
  +"space to export with println (click x to hide/show this text)."; 

ArrayList<PVector> listPV = new ArrayList();

// drag and drop 
boolean hold=false; 
int holding_i=-1;

// help text on off 
boolean textHelpIsOn = true; 

void setup() {
  size(640, 480);
  background(255);
  makeArrayList();
}

void draw() {
  background(255);

  // drag and drop management
  if (hold) {
    PVector pv = listPV.get(holding_i);
    pv.x=mouseX;
    pv.y=mouseY;
  }

  // show ArrayList
  showArrayList(); 

  // text help 
  if (textHelpIsOn) {
    fill(255, 0, 0) ;
    text(helpText, 17, 17);
  }
}// func draw() 

// -----------------------------------------------------

void showArrayList() {

  // show the curve 
  noFill();
  stroke(0);
  beginShape();
  int i=0;
  if (listPV.size()>0) {
    curveVertexPVector(listPV.get(i));
    for ( i = 0; i < listPV.size(); i++) {
      curveVertexPVector(listPV.get(i));
    }
    i=listPV.size()-1;
    curveVertexPVector(listPV.get(i));
  }
  endShape();

  //show the points (additionally)
  noStroke();
  float rad=3;
  for ( i = 0; i < listPV.size(); i++) {
    PVector pv=listPV.get(i);
    // if we are close to the mouse, color green, else red
    if (dist(mouseX, mouseY, pv.x, pv.y)<11) {
      // near to mouse 
      fill( 0, 255, 0); // green
      rad=7;
    } else {
      // normal 
      fill(255, 0, 0);  // red
      rad=3;
    }
    ellipse(pv.x, pv.y, 
      rad, rad);
  }//for
}//func

// ----------------------------------------------------------
// Tools 

void makeArrayList() {

  // init

  int[] coords = {
    // alternating x and y value (which belong together: 0 and 1 is a pair, 2 and 3 is a pair....)
    40, 90, 110, 90, 140, 130, 60, 150, 50, 180
  };

  // read coords 
  for (int i = 0; i < coords.length; i += 2) {
    listPV.add ( new PVector(coords[i], coords[i + 1]));
  }
}

void curveVertexPVector(PVector pv) {
  // like curveVertex but gets a PVector as input  
  // (just an easy way to use vectors for curveVertex)
  curveVertex(pv.x, pv.y);
}

// ----------------------------------------------------------

void keyPressed() {

  if (key==BACKSPACE) {
    if (listPV.size()>0)
      listPV.remove(listPV.size()-1);
  }
  // ----------------
  else if (key==' ') {
    // SPACE BAR
    String xval="float[] xValues = { ", 
      yval="float[] yValues = { ";
    for (int i = 0; i < listPV.size(); i++) {
      PVector pv=listPV.get(i);
      xval += str(pv.x)+",";
      yval += str(pv.y)+",";
    }//for
    println (xval+" };"); 
    println (yval+" };");
    println ("remove last comma");
  }// else if SPACE BAR
  //------------------------
  else if (key=='x') {
    textHelpIsOn = !textHelpIsOn;
  }//else if
  //----------------------------
  else if (key==DELETE) {
    for (int i = 0; i < listPV.size(); i++) {
      PVector pv=listPV.get(i);
      if (dist(mouseX, mouseY, pv.x, pv.y)<11) {
        listPV.remove(i);
        return;
      }//if
    }//for
  }//else if
  //----------------------------
  else if (key==ESC) {
    key=0;
  }
  //----------------------------
}//func 

void mousePressed() {

  // apply drag and drop
  for (int i = 0; i < listPV.size(); i++) {
    PVector pv=listPV.get(i);
    if (dist(mouseX, mouseY, pv.x, pv.y)<11) {
      hold=true; 
      holding_i=i;
      return;
    }
  }

  // no drag and drop, add point   
  listPV.add(new PVector(mouseX, mouseY));
}

void mouseReleased() {
  // end drag and drop
  hold=false;
}
//---------------------------------------------------------------

jeremydouglass

Direct link to the tutorial Chrisr mentioned:

• https://www.processing.org/tutorials/curves/

Looks like you want bezierVertex(), given the way your illustration indicates control points.

• https://processing.org/reference/curveVertex_.html
• https://processing.org/reference/bezierVertex_.html

TirthP

thanks