Intro

最开始用软件画图就像在纸上画图一样,有着严格的步骤。但当新的概念引入之后,这些简单的图形将会扩展动画和交互元素。这一章介绍简单的图形绘制方法。

计算机屏幕由很多个发光单元组成,这个单元称为“像素”。每个像素都有自己的坐标值。在Processing中,画布的最左上角的坐标值为(0, 0)。如果一张长宽各200px的画布,那么最右下角的坐标值是多少呢,是(199, 199),而不是(200, 200)。因为在计算机领域,我们通常从0开始计数而不是1。

The Display Window 画布

Function函数是Processing程序的基本构成单元之一,虽然是基于java语言的,这里却并没有被叫做method,但称作方法我认为也没问题。

Example 3-1: Draw a Window 画布

例如几乎每个Processing程序都会有size()函数,控制画布大小,它有两个参数分别为宽和高。size(宽,高)。默认画布大小为100 * 100px。

屏幕快照 2017-03-18 15.43.02

Example 3-2: Draw a Point 点

屏幕快照 2017-03-18 15.46.05

语法:point(x坐标,y坐标);

画布中央有个小点。

Basic Shapes 基本图形

直线

屏幕快照 2017-03-18 20.54.14

语法:line(x1, ,y1, x2, y2);

起始点坐标(x1, y1)

结束点坐标(x2, y2)

三角形

屏幕快照 2017-03-18 20.58.20

语法:triangle(x1, ,y1, x2, y2, x3, y3);

分别为三个顶点坐标。

四边形

屏幕快照 2017-03-18 21.06.52

语法:quad(x1, ,y1, x2, y2, x3, y3, x4, y4);

四个顶点坐标。

矩形(对边相等)

语法:rect(x, y, width, height);

左上角顶点坐标(x, y),和宽高。

圆形(不一定是正圆)

语法:ellipse(x, y, width, height);

圆心坐标(x, y),和宽高(不是半径)。

扇形/弧形

屏幕快照 2017-03-18 21.42.47.png语法:arc(x, y, width, height, start, stop);

这里要注意,start和stop的单位有两种,表示弧度的PI,或者表示角度的radians(180),PI = 180度。0度位置在3点钟方向。radians()函数将参数角度转换成了弧度。

再注意:start < stop,否则画不出来。

例如:arc(90, 60, 80, 80, radians(90), radians(60)); //这段代码就画不出来

Drawing Order 绘制顺序

屏幕快照 2017-03-18 21.13.17.png

程序从上到下编译,所以最后绘制的图形永远在最上面图层。

Shape Properties 图形属性

Set Stroke Weight 线粗细

屏幕快照 2017-03-18 21.16.46.png

语法:strokeWeight(像素);

Set Stroke Cap 线端点样式

屏幕快照 2017-03-18 21.25.21.png

语法:strokeCap(类型);

类型:SQUARE/ROUND/PROJECT

Set Stroke Joins 线段连接处样式

语法:strokeJoin(类型);

类型:MITER (默认 45度角拼接) BEVEL (边角磨成斜边) ROUND(圆滑边角)

Drawing Modes

改变图形函数传参的方式 后面章节大概会详细讲吧 看看就行了

On the Corner

语法:ellipseMode(类型);

类型:RADIUS(半径) CENTER(中心点) CORNER(矩形左上角顶点) CORNERS(矩形左上角顶点和右下角顶点)

除此之外还有rectMode(),imagemode(), shapeMode()。

Color

控制背景(默认灰色而不是白色),图形填充,线的颜色。

background(颜色值);

fill(颜色值);

stroke(颜色值);

单一值:0是黑色,128是中度灰,255是白色。

RGB

(红, 绿, 蓝),(0, 0, 0) 是黑色,(255, 255, 255)是白色。

(255, 0, 0) 红 (0, 255, 0) 绿 (0, 0, 255) 蓝

noFill(); 不填充颜色

noStroke(); 不描边

在 工具-颜色器 选择颜色更方便

Set Transparency 透明度

透明度也叫alpha值 取值范围0 – 255,0全透明 ,不显示,255实心不透明。

Custom Shapes 自定义形状

语法:

beginShape();  //开始自定义图形

vertex(x, y);  //每个顶点的坐标 注意连线顺序

endShape(CLOSE);  //结束图形绘制 封闭图形

总结

本章介绍了设置画布大小,基本形状绘制,绘制顺序,还讲解了3个形状属性,分别是线条粗细,端点样式,连接样式。还介绍了绘画mode,比如用矩形的传参方式画圆。颜色值可以是单一的0-255的灰度,也可以是RGB的彩色值。还介绍了透明度,不填充,不描边等函数。最后介绍了自定义图形的绘制方法。本章最后还有一个画机器人的练习,但是我觉得纯靠脑子计算绘图的坐标然后用代码输入有点智障。。。希望后面会介绍一些黑科技吧。

Advertisements