BezierCurveExample

BezierCurveExample.pde

OtherMonster monster;

void setup() {
  size(640, 360);
  monster = new OtherMonster();
}

void draw() {
  background(#FFFFFF);
    
  // change monster location
  monster.setPosition(mouseX, mouseY);
  
  // draw the monster
  monster.draw();
  
  // draw box around monster
  monster.drawBox();
}


class OtherMonster {
  int x;
  int y;
  
  OtherMonster() {}
    
  // set x, y mouse position
  void setPosition(int x, int y) {
    this.x = x;
    this.y = y;
  }
  
  void draw() {
    // https://processing.org/reference/bezier_.html
    // -------
    // x1  float: coordinates for the first anchor point
    // y1  float: coordinates for the first anchor point
    // x2  float: coordinates for the first control point
    // y2  float: coordinates for the first control point
    // x3  float: coordinates for the second control point
    // y3  float: coordinates for the second control point
    // x4  float: coordinates for the second anchor point
    // y4  float: coordinates for the second anchor point
    // -------
    // bezier(x1, y1, x2, y2, x3, y3, x4, y4)
    
    // the mouse position is our first anchor
    int x1 = this.x;
    int y1 = this.y;
    
    // this the is first control point
    // mess around with these values to get an idea of what the curve will look like
    int x2 = this.x + 10;
    int y2 = this.y - 20;
    
    // this is our second anchor 
    int x3 = this.x + 40;
    int y3 = this.y + 20;
    
    // finally our second control point 
    int x4 = this.x + 30;
    int y4 = this.y - 40;
    
    noFill();
    stroke(0, 0, 0);
    bezier(x1, y1, x2, y2, x3, y3, x4, y4);
  }
  
  // draw box around your curve based on your curve values
  void drawBox() {
    noFill();
    stroke(100, 200, 10);
    rect(this.x, this.y, 35, -40);
  }
}