【11】processing |
您所在的位置：网站首页 › 贝塞尔曲线教程 › 【11】processing |
【11】processing
|
Curves曲线
J David Eisenberg（人名）
这篇简短的教程将向您介绍正在处理的三种类型的曲线：圆弧、样条曲线和Bézier曲线 弧线圆弧是最简单的曲线。处理将圆弧定义为椭圆的一段。使用以下参数调用函数： arc(x, y, width, height, start, stop);The first four parameters are the same as the ones for ellipse(); they define the boundary box for your arc. The last two parameters are the starting and ending angle for the arc. These angles, as with all other angles in Processing, are given in radians. Remember that angles are measured clockwise, with zero degrees pointing east. Using the fact that PI radians equals 180°, here are some example arcs. 前四个参数与ellipse();的参数相同；它们定义了弧的边界框。最后两个参数是弧的开始和结束角度。这些角度，和处理中的所有其他角度一样，都是以弧度表示的。记住，角度是顺时针测量的，零度指向东方。利用PI（π）弧度等于180°的事实，这里有一些例子弧。 （补充说明：在后期学习过程中发现，TAU使用起来更方便，TAU=2*PI ，也就是圆周弧长，而PI是半个圆周弧长。基于TAU圆周弧长计算会变得更加清晰，易懂）
void setup() { size(300, 200); background(255); smooth(); rectMode(CENTER); // 显示边框 stroke(128); rect(35, 35, 50, 50); rect(105, 35, 50, 50); rect(175, 35, 50, 50); rect(105, 105, 100, 50); stroke(0); arc(35, 35, 50, 50, 0, PI / 2.0); // 下四分之一圆 arc(105, 35, 50, 50, -PI, 0); // 圆的上半部分 arc(175, 35, 50, 50, -PI / 6, PI / 6); // 60度 arc(105, 105, 100, 50, PI / 2, 3 * PI / 2); // 180度 } 样条曲线 弧线很好，但很简单。下一个函数curve（）允许您绘制不一定是圆弧一部分的曲线。该函数绘制技术上称为Rom-Catmull样条曲线。要绘制曲线，必须指定曲线开始和结束的点的（x，y）坐标。还必须指定两个控制点来确定曲率的方向和数量。对curve（）的调用使用以下参数： curve(cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2); cpx1, cpy1第一控制点坐标 x1, y1曲线起点坐标 x2, y2曲线终点坐标 cpx2, cpy2第二控制点坐标
下面是一个显示curve()的示例。控制点显示为红色，曲线点显示为蓝色。
控制点如何影响曲线的外观？深呼吸，因为这有点复杂。 •起点处与曲线的切线与控制点1和曲线终点之间的直线平行。这些是左边图表中用绿色显示的线。 •终点处曲线的切线与起点和控制点2之间的直线平行。这些是左边图表中紫色的线。 连续样条曲线 孤立地说，一条curve()）并不特别吸引人。要通过多个点绘制连续曲线，最好使用curveVertex()函数。只有在使用beginShape()和endShape() 函数创建形状时，才能使用此函数。 这是一条连接点（40，40），（80，60），（100，100），（60，120）和（50，150）的曲线。常用的方法是将曲线的第一个点作为第一个控制点，最后一个点作为最后一个控制点。 int[] coords = { 40, 40, 80, 60, 100, 100, 60, 120, 50, 150 }; void setup() { size(200, 200); background(255); smooth(); noFill(); stroke(0); beginShape(); curveVertex(40, 40); // 第一个控制点 curveVertex(40, 40); // 也是曲线的起点 curveVertex(80, 60); curveVertex(100, 100); curveVertex(60, 120); curveVertex(50, 150); // 曲线的最后一点 curveVertex(50, 150); // 也是最后一个控制点 endShape(); //使用数组使代码更短； //你已经知道怎么画椭圆了！ fill(255, 0, 0); noStroke(); for (int i = 0; i < coords.length; i += 2) { ellipse(coords[i], coords[i + 1], 3, 3); } } 贝塞尔曲线 虽然样条曲线比圆弧更好，但它似乎没有那些优美的、说“艺术”的俯冲曲线，为此，需要使用bezier（）函数绘制Bézier曲线。与样条曲线一样，bezier()函数有八个参数，但顺序不同： bezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2); x1, y1曲线起点坐标 cpx1, cpy1第一控制点坐标 cpx2, cpy2第二控制点坐标 x2, y2曲线终点坐标
这是一个显示贝塞尔曲线及其控制点的程序。 void setup() { size(150, 150); background(255); ellipse(50, 75, 5, 5); // 曲线端点 ellipse(100, 75, 5, 5); fill(255, 0, 0); ellipse(25, 25, 5, 5); // 控制点 ellipse(125, 25, 5, 5); noFill(); stroke(0); bezier(50, 75, 25, 25, 125, 25, 100, 75); }
虽然很难可视化控制点如何影响curve()，但更容易看到控制点如何影响Bézier曲线。想象一下两根杆子和几个橡皮筋。极点将控制点连接到曲线的端点。一条橡皮筋把电线杆的顶端连接起来。另外两个橡皮筋将磁极的中点连接到第一个橡皮筋的中点。另外一个橡皮筋连接他们的中点。最后一根橡皮筋的中心与曲线相连。这些图表有助于解释：
正如curveVertex()允许您生成连续的样条曲线一样，bezierVertex()允许您生成连续的Bézier曲线。同样，您必须在beginShape() / endShape() 序列中。必须使用vertex(startX, startY) 指定曲线的起点。通过调用指定后续点： bezierVertex(cpx1, cpy1, cpx2, cpy2, x, y); cpx1, cpy1第一控制点坐标 cpx2, cpy2第二控制点坐标 x, y曲线上的下一点
因此，要使用bezierVertex()绘制上一个示例，请执行以下操作： void setup() { size(150, 150); background(255); smooth(); // 不显示控制点的位置 noFill(); stroke(0); beginShape(); vertex(50, 75); // first point bezierVertex(25, 25, 125, 25, 100, 75); endShape(); }
这是一条连续的Bézier曲线，但它并不平滑地连接起来。图中显示了控制点，但这里只有绘制曲线的相关代码。 size(200, 200); background(255); noFill(); beginShape(); vertex(30, 70); // 第一个点 bezierVertex(25, 25, 100, 50, 50, 100); bezierVertex(50, 140, 75, 140, 120, 120); endShape(); 为了使两条曲线A和B平滑地连续，A的最后一个控制点、A的最后一个点和B的第一个控制点必须在一条直线上。下面是一个符合这些条件的例子。直线上的点以粗体显示。 size(200, 200); background(255); beginShape(); vertex(30, 70); // 第一个点 bezierVertex(25, 25, 100, 50, 50, 100); bezierVertex(20, 130, 75, 140, 120, 120); endShape();
摘要 •当您需要一段圆或椭圆时，请使用arc()。不能创建连续的圆弧或将它们用作形状的一部分。 •当两点之间需要一条小曲线时，请使用curve()。使用curveVertex()将连续的一系列曲线作为形状的一部分。 •需要长而平滑的曲线时，请使用bezier()。使用bezierVertex()将连续的Bézier曲线系列作为形状的一部分。 |
【本文地址】
今日新闻 |
推荐新闻 |