首页 › Processing › Processing之旅-----【13课，2D绘图之曲线】

yangfanconan 发表于 2013-5-14 19:22:15

Processing之旅-----【13课，2D绘图之曲线】

好了同学们我们上课，如果讲到了2D绘图就不得不讲一讲曲线这个高深的问题。我记得我上图形学的时候老师讲了很久关于曲线的算法。但是现在一想基本忘光了。哈哈哈。献丑了。闲话少叙，我们看例子。
//好了，同学们，我们今天这节课主要讲述，Processing中的2D绘制函数的
//高级部分什么算高级部分呢？
//当然是曲线了
//
//
//
//
//
//
void setup(){
        size(512, 512);
        noFill();
        stroke(255, 102, 0);
        line(85, 20, 10, 10);
        line(90, 90, 15, 80);
        stroke(0, 0, 0);
        bezier(85, 20, 10, 10, 90, 90, 15, 80);

        // bezier(x1, y1, x2, y2, x3, y3, x4, y4)
        // bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)
               
        // x1         float: coordinates for the first anchor point 第一个支撑点x坐标
        // y1         float: coordinates for the first anchor point 第一个支撑点y坐标
        // z1         float: coordinates for the first anchor point 第一个支撑点z坐标
        // x2         float: coordinates for the first control point 第一个控制点x坐标
        // y2         float: coordinates for the first control point 第一个控制点y坐标
        // z2         float: coordinates for the first control point 第一个控制点z坐标
        // x3         float: coordinates for the second control point 第二个控制点x坐标
        // y3         float: coordinates for the second control point 第二个控制点y坐标
        // z3         float: coordinates for the second control point 第二个控制点z坐标
        // x4         float: coordinates for the second anchor point 第二个支撑点x坐标
        // y4         float: coordinates for the second anchor point 第二个支撑点y坐标
        // z4         float: coordinates for the second anchor point 第二个支撑点z坐标
        bezierDetail(100);
    bezier(85, 20, 10, 10, 90, 90, 15, 80);
        // bezierDetail(detail)
               
        // detail         int: resolution of the curves
        bezier(85, 20, 10, 10, 90, 90, 15, 80);
        fill(255);
        int steps = 10;
        for (int i = 0; i <= steps; i++)
        {
                float t = i / float(steps);
                float x = bezierPoint(85, 10, 90, 15, t);
                float y = bezierPoint(20, 10, 90, 80, t);
                ellipse(x, y, 5, 5);
        }

        // bezierPoint(a, b, c, d, t)
        // a         float: coordinate of first point on the curve
        // b         float: coordinate of first control point
        // c         float: coordinate of second control point
        // d         float: coordinate of second point on the curve
        // t         float: value between 0 and 1
       
}

void draw(){
               
}

效果如图，就是简单的对曲线入一个门，对于曲线，如果用得好，那就是一门艺术了。
好吧，同学们我们这节课下课。{:soso__13766225770624999893_6:}

382619728 发表于 2013-6-3 00:14:14

t的含义是什么？

yangfanconan 发表于 2013-6-3 18:36:13

382619728 发表于 2013-6-3 00:14 static/image/common/back.gif
t的含义是什么？

// bezierPoint(a, b, c, d, t)
      // a         float: coordinate of first point on the curve
      // b         float: coordinate of first control point
      // c         float: coordinate of second control point
      // d         float: coordinate of second point on the curve
      // t         float: value between 0 and 1

有详细的说明哦。

LINK~ 发表于 2014-10-31 10:51:08

//好了，同学们，我们今天这节课主要讲述，Processing中的2D绘制函数的
//高级部分什么算高级部分呢？
//当然是曲线了
//
//
//
//
//
//
void setup(){
      size(512, 512);
      noFill();
      stroke(255, 102, 0);
      line(85, 20, 10, 10);
      line(90, 90, 15, 80);
      stroke(0, 0, 0);
      bezier(85, 20, 10, 10, 90, 90, 15, 80);

      // bezier(x1, y1, x2, y2, x3, y3, x4, y4)
      // bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

      // x1         float: coordinates for the first anchor point 第一个支撑点x坐标
      // y1         float: coordinates for the first anchor point 第一个支撑点y坐标
      // z1         float: coordinates for the first anchor point 第一个支撑点z坐标
      // x2         float: coordinates for the first control point 第一个控制点x坐标
      // y2         float: coordinates for the first control point 第一个控制点y坐标
      // z2         float: coordinates for the first control point 第一个控制点z坐标
      // x3         float: coordinates for the second control point 第二个控制点x坐标
      // y3         float: coordinates for the second control point 第二个控制点y坐标
      // z3         float: coordinates for the second control point 第二个控制点z坐标
      // x4         float: coordinates for the second anchor point 第二个支撑点x坐标
      // y4         float: coordinates for the second anchor point 第二个支撑点y坐标
      // z4         float: coordinates for the second anchor point 第二个支撑点z坐标
      bezierDetail(100);
    bezier(85, 20, 10, 10, 90, 90, 15, 80);
      // bezierDetail(detail)

      // detail         int: resolution of the curves
      bezier(85, 20, 10, 10, 90, 90, 15, 80);
      fill(255);
      /*
      int steps = 10;
      for (int i = 0; i <= steps; i++)
      {
                float t = i / float(steps);
                float x = bezierPoint(85, 10, 90, 15, t);
                float y = bezierPoint(20, 10, 90, 80, t);
                ellipse(x, y, 5, 5);
      }
      */

      // bezierPoint(a, b, c, d, t)
      // a         float: coordinate of first point on the curve
      // b         float: coordinate of first control point
      // c         float: coordinate of second control point
      // d         float: coordinate of second point on the curve
      // t         float: value between 0 and 1

}

void draw(){

}
交作业了

查看完整版本: Processing之旅-----【13课，2D绘图之曲线】