Curve Graphs?

edited March 2018 in How To...

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

Tagged:

Answers

  • Did you do the tutorial on Curves?

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

  • 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;
    }
    //---------------------------------------------------------------
    
  • edited March 2018

    Direct link to the tutorial Chrisr mentioned:

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

  • edited March 2018

    thanks

Sign In or Register to comment.