首页 > 教程 > 献给Processing爱好者的教程【7】—基础图形【卡卡】
2017
10-22

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

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第1张  | Processing编程艺术

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

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第2张  | Processing编程艺术

绘制一条线

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第3张  | Processing编程艺术

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

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

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第4张  | Processing编程艺术

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);

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第5张  | Processing编程艺术

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

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

绘制椭圆

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第6张  | Processing编程艺术

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

绘制扇形

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第7张  | Processing编程艺术

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));

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

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第8张  | Processing编程艺术

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();

线宽

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第9张  | Processing编程艺术

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);

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

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第10张  | Processing编程艺术

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);

转角属性问题

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第11张  | Processing编程艺术

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是白

用灰度作画

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第12张  | Processing编程艺术

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

填充与描边

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第13张  | Processing编程艺术

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!

彩色绘图

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第14张  | Processing编程艺术

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

颜色选择器(讲解)

透明度

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第15张  | Processing编程艺术

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

自定义图形

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第16张  | Processing编程艺术

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);

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第17张  | Processing编程艺术

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、绘制一个机器人

献给Processing爱好者的教程【7】—基础图形【卡卡】 - 第18张  | Processing编程艺术



最后编辑:
作者:卡萨布兰卡
卡萨布兰卡
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。