献给Processing爱好者的教程【7】—基础图形【卡卡】

绘制基础的2d图形可以用一张表来表示

绘制一条线

size(480, 120);
line(20, 50, 420, 110);

绘制基本图形，画三角形，画四边形

size(480, 120);
quad(158, 55, 199, 14, 392, 66, 351, 107);
triangle(347, 54, 392, 9, 392, 66);
triangle(158, 55, 290, 91, 290, 112);

绘制矩形，这里需要注意rectMode();书上这里说错了

size(480, 120);
rect(180, 60, 220, 40);

绘制椭圆

size(480, 120);
ellipse(278, -100, 400, 400);
ellipse(120, 100, 110, 110);
ellipse(412, 60, 18, 18);

绘制扇形

size(480, 120);
arc(90, 60, 80, 80, 0, HALF_PI);
arc(190, 60, 80, 80, 0, PI+HALF_PI);
arc(290, 60, 80, 80, PI, TWO_PI+HALF_PI);
arc(390, 60, 80, 80, QUARTER_PI, PI+QUARTER_PI);

注意弧度制和角度制的区别

注意起始弧度和结束弧度的区别

size(480, 120);
arc(90, 60, 80, 80, 0, radians(90));
arc(190, 60, 80, 80, 0, radians(270));
arc(290, 60, 80, 80, radians(180), radians(450));
arc(390, 60, 80, 80, radians(45), radians(225));

绘制图形的顺序，覆盖问题，先绘制的会被后绘制的覆盖

size(480, 120);
ellipse(140, 0, 190, 190);
// The rectangle draws on top of the ellipse
// because it comes after in the code
rect(160, 30, 260, 20);

这里可以把顺序反过来试试看结果如何

平滑的线

smooth();关闭用nosmooth();

线宽

size(480, 120);
ellipse(75, 60, 90, 90);
strokeWeight(8); // Stroke weight to 8 pixels
ellipse(175, 60, 90, 90);
ellipse(279, 60, 90, 90);
strokeWeight(20); // Stroke weight to 20 pixels
ellipse(389, 60, 90, 90);

接下来讲讲线的几种结尾方式

size(480, 120);
strokeWeight(24);
line(60, 25, 130, 95);
strokeCap(SQUARE); // Square the line endings
line(160, 25, 230, 95);
strokeCap(PROJECT); // Project the line endings
line(260, 25, 330, 95);
strokeCap(ROUND); // Round the line endings
line(360, 25, 430, 95);

转角属性问题

size(480, 120);
strokeWeight(12);
rect(60, 25, 70, 70);
strokeJoin(ROUND); // Round the stroke corners
rect(160, 25, 70, 70);
strokeJoin(BEVEL); // Bevel the stroke corners
rect(260, 25, 70, 70);
strokeJoin(MITER); // Miter the stroke corners
rect(360, 25, 70, 70);

参考rectMode()和ellipseMode()

颜色

background(),fill(),stroke(),

0~255,0是黑，255是白

用灰度作画

size(480, 120);
background(0);               // Black
fill(204);                   // Light gray
ellipse(132, 82, 200, 200);  // Light gray circle
fill(153);                   // Medium gray
ellipse(228, -16, 200, 200); // Medium gray circle
fill(102);                   // Dark gray
ellipse(268, 118, 200, 200); // Dark gray circle

填充与描边

size(480, 120);
fill(153);                    // Medium gray
ellipse(132, 82, 200, 200);   // Gray circle
noFill();                     // Turn off fill
ellipse(228, -16, 200, 200);  // Outline circle
noStroke();                   // Turn off stroke
ellipse(268, 118, 200, 200);  // Doesn't draw!

彩色绘图

size(480, 120);
noStroke();
background(0, 26, 51);        // Dark blue color
fill(255, 0, 0);              // Red color
ellipse(132, 82, 200, 200);   // Red circle
fill(0, 255, 0);              // Green color
ellipse(228, -16, 200, 200);  // Green circle
fill(0, 0, 255);              // Blue color
ellipse(268, 118, 200, 200);  // Blue circle

颜色选择器（讲解）

透明度

size(480, 120);
noStroke();
background(204, 226, 225);    // Light blue color
fill(255, 0, 0, 160);         // Red color
ellipse(132, 82, 200, 200);   // Red circle
fill(0, 255, 0, 160);         // Green color
ellipse(228, -16, 200, 200);  // Green circle
fill(0, 0, 255, 160);         // Blue color
ellipse(268, 118, 200, 200);  // Blue circle

自定义图形

beginShape(),vertex(),endShape(),

size(480, 120);
beginShape();
fill(153, 176, 180);
vertex(180, 82);
vertex(207, 36);
vertex(214, 63);
vertex(407, 11);
vertex(412, 30);
vertex(219, 82);
vertex(226, 109);
endShape();

如果要关闭箭头，用endShape(CLOSE);

size(480, 120);

// Left creature
fill(153, 176, 180);
beginShape();
vertex(50, 120);
vertex(100, 90);
vertex(110, 60);
vertex(80, 20);
vertex(210, 60);
vertex(160, 80);
vertex(200, 90);
vertex(140, 100);
vertex(130, 120);
endShape();
fill(0);
ellipse(155, 60, 8, 8);

// Right creature
fill(176, 186, 163);
beginShape();
vertex(370, 120);
vertex(360, 90);
vertex(290, 80);
vertex(340, 70);
vertex(280, 50);
vertex(420, 10);
vertex(390, 50);
vertex(410, 90);
vertex(460, 120);
endShape();
fill(0);
ellipse(345, 50, 10, 10);

练习

1、用一根线和一个椭圆创作组合图形

2、绘制一个机器人

最后编辑：2017-10-25

作者：卡萨布兰卡

这个作者貌似有点懒，什么都没有留下。

站内专栏