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

yangfanconan

好了同学们我们上课，如果讲到了2D绘图就不得不讲一讲曲线这个高深的问题。我记得我上图形学的时候老师讲了很久关于曲线的算法。但是现在一想基本忘光了。哈哈哈。献丑了。闲话少叙，我们看例子。

1. //好了，同学们，我们今天这节课主要讲述，Processing中的2D绘制函数的
   
2. //高级部分什么算高级部分呢？
   
3. //当然是曲线了
   
4. //
   
5. //
   
6. //
   
7. //
   
8. //
   
9. //
   
10. void setup(){
    
11.         size(512, 512);
    
12.         noFill();
    
13.         stroke(255, 102, 0);
    
14.         line(85, 20, 10, 10);
    
15.         line(90, 90, 15, 80);
    
16.         stroke(0, 0, 0);
    
17.         bezier(85, 20, 10, 10, 90, 90, 15, 80);
    
18. 
    
19.         // bezier(x1, y1, x2, y2, x3, y3, x4, y4)
    
20.         // bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)
    
21.                
    
22.         // x1         float: coordinates for the first anchor point 第一个支撑点x坐标
    
23.         // y1         float: coordinates for the first anchor point 第一个支撑点y坐标
    
24.         // z1         float: coordinates for the first anchor point 第一个支撑点z坐标
    
25.         // x2         float: coordinates for the first control point 第一个控制点x坐标
    
26.         // y2         float: coordinates for the first control point 第一个控制点y坐标
    
27.         // z2         float: coordinates for the first control point 第一个控制点z坐标
    
28.         // x3         float: coordinates for the second control point 第二个控制点x坐标
    
29.         // y3         float: coordinates for the second control point 第二个控制点y坐标
    
30.         // z3         float: coordinates for the second control point 第二个控制点z坐标
    
31.         // x4         float: coordinates for the second anchor point 第二个支撑点x坐标
    
32.         // y4         float: coordinates for the second anchor point 第二个支撑点y坐标
    
33.         // z4         float: coordinates for the second anchor point 第二个支撑点z坐标
    
34.         bezierDetail(100);
    
35.     bezier(85, 20, 10, 10, 90, 90, 15, 80);
    
36.         // bezierDetail(detail)
    
37.                
    
38.         // detail         int: resolution of the curves
    
39.         bezier(85, 20, 10, 10, 90, 90, 15, 80);
    
40.         fill(255);
    
41.         int steps = 10;
    
42.         for (int i = 0; i <= steps; i++)
    
43.         {
    
44.                 float t = i / float(steps);
    
45.                 float x = bezierPoint(85, 10, 90, 15, t);
    
46.                 float y = bezierPoint(20, 10, 90, 80, t);
    
47.                 ellipse(x, y, 5, 5);
    
48.         }
    
49. 
    
50.         // bezierPoint(a, b, c, d, t)
    
51.         // a         float: coordinate of first point on the curve
    
52.         // b         float: coordinate of first control point
    
53.         // c         float: coordinate of second control point
    
54.         // d         float: coordinate of second point on the curve
    
55.         // t         float: value between 0 and 1
    
56.        
    
57. }
    
58. 
    
59. void draw(){
    
60.                
    
61. }

复制代码

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

382619728

t的含义是什么？

yangfanconan

382619728 发表于 2013-6-3 00:14
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~

//好了，同学们，我们今天这节课主要讲述，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(){

}
交作业了