首页 > 教程 > 献给Processing爱好者的教程【4】—第一个processing程序【卡卡】
2017
08-14

献给Processing爱好者的教程【4】—第一个processing程序【卡卡】

献给Processing爱好者的教程【4】—第一个processing程序【卡卡】 - 第1张  | Processing编程艺术

第一个processing程序

这一节,我们开始玩转 processing。

在第一节教程前言中,我们已经讲了“HelloWorld” 。

但是processing更注重画图,我们从画图开始。

草图与函数

在开始前,首先聊聊 Processing 中的草图—— Sketch 。Sketch 的字面含义就是素描,草图。程序设计者把工程文件的名字叫速写,草图,就是想告诉我们processing就像画画一样。

献给Processing爱好者的教程【4】—第一个processing程序【卡卡】 - 第2张  | Processing编程艺术

打开Processing,它会自动新建一个叫名叫 sketch_xxxx 的文件。我们可以直接开始写代码。完成后点 File-save 就可以保存自己的作品。

第一步,我们先写下这行命令:

size(400,500);

献给Processing爱好者的教程【4】—第一个processing程序【卡卡】 - 第3张  | Processing编程艺术

接着点击左上方的三角按钮运行程序。它会弹出一个灰色的窗口,这就是运行后的样子。献给Processing爱好者的教程【4】—第一个processing程序【卡卡】 - 第4张  | Processing编程艺术

size()就是用来设置画布大小的函数。以后如果看到这样的格式:一串英文字符,后面再跟一对括号,那在程序中就被称为函数。

格式:

函数名()

与数学函数的定义不一样。程序中的函数,其实是一些代码块的封装。

现在再回到size函数。它后面的括号里还有两个参数,中间用逗号作了区分。前一个代表窗口的宽度,后一个代表窗口的高度,完整的调用形式如下。

size(x,y)   // x设置运行窗口宽度,y设置高度

表达式写完后,请千万要记得在指令后面加一个;号,代表结束。请记得保持这个习惯,否则程序会出BUG。

 

坐标系统

献给Processing爱好者的教程【4】—第一个processing程序【卡卡】 - 第5张  | Processing编程艺术

界面里面我简单画了个坐标示意图,这里我仔细讲一讲坐标

在使用绘图函数之前,需要了解 Procssing 的坐标系统。这与我们中学阶段接触到的笛卡尔坐标系很不一样,它的 Y 轴方向是反的。假如我们定义了一个 150 X 100 的画布,那左上角的第一个像素坐标就为(0,0),右下角的最后一个像素坐标则为(149,99)。

觉得难记可以这么去理解,坐标数其实代表了偏移量。起始坐标点序号为 0,与它相邻的坐标就距离初始坐标一个单位,因此序号为 1 。第 150 个坐标距离与第 1 个坐标相比,偏移了 149 个单位,所以序号就为 149。

但为什么要从0计算到149而不是从1计算到150呢?看上去多麻烦。这是程序中约定俗成的,很多概念都是从0开始计数。

现在应该对这种计数方式印象更深了吧,其实如果你是ps老手,就会发现在ps的信息面板上早就是按这样的方式来标记图片像素的位置。

献给Processing爱好者的教程【4】—第一个processing程序【卡卡】 - 第6张  | Processing编程艺术

 

改变坐标系

这个坐标系可不是一成不变的,有一个函数 translate 可以改变它。

调用形式:

translate(x,y);

它可以将整个坐标系进行平移,xy 可以取正数或者负数,数值的正负决定移动的方向,数值的大小决定移动距离。以 x 值为例,如果取正数,则会朝 x 轴的正方向平移 x 个单位。负数则往负方向平移 x 个单位。

例如:

translate(50, 50)

献给Processing爱好者的教程【4】—第一个processing程序【卡卡】 - 第7张  | Processing编程艺术

绘图函数

坐标系统就像地图一样。通过它,所有绘制的图形都有了立足之地。下面开始介绍各种绘图函数。

画点

在 size 后面写下这段代码。

point(250,350);

点三角符号运行。

献给Processing爱好者的教程【4】—第一个processing程序【卡卡】 - 第8张  | Processing编程艺术

嗯?什么也没看到?再凑近看看。你会发现中央出现了一个小黑点。

这就是用于画点的函数。在 processing 里,这个点刚好就是一个像素的大小。第一个参数代表横坐标,第二个参数代表纵坐标。

若想在画布中心画点,可以用这种便捷的方式去表示。

point(width/2, height/2);

其中 width 会获取屏幕的宽,height 会获取屏幕的高,“/”在程序中代表除号。这样写程序可以自动计算结果,而无需给出具体的坐标。

你甚至可以在里面写一个超复杂的表达式进去

point(1 + 2 + 3 + 4 + 5, 100 - 50 - 20 - 10)

当然,没事可不要这么去写,除非是想研究什么古怪的数列规律~~

画圆

接着来看画圆函数,ellipse。

调用形式:

ellipse(x, y, a, b)

括号中的前两个参数与point函数类似,后两个参数分别代表圆的宽和高。如果宽高值不一样,就能画出椭圆。

可以直接加在原代码后面试试:

整体代码:

size(400,500);
point(250,350);
ellipse(250, 250, 20, 20);

献给Processing爱好者的教程【4】—第一个processing程序【卡卡】 - 第9张  | Processing编程艺术

终于出现了一个大大的圆点。但有没有发现,之前绘制的点消失不见了!

其实,它只是被ellipse绘制的圆形覆盖了。在程序中,代码是由上到下,逐行执行的。先执行的先绘制,后执行的会覆盖前面的。有没有觉得和ps的图层很像?

画线,画三角,画方形

这几个函数的用法也很简单。

画线:

line(x1, y1, x2, y2)

x1, y1代表线条的一个端点坐标,x2,y2则代表另一个。函数会将两个坐标连起来。

画三角:

triangle(x1, y1, x2, y2, x3, y3)

这里会用到三对坐标参数,分别代表3个顶点坐标。

画方形:

rect(x,y,a,b)

前两个参数代表方形左上方的顶点坐标,a,b 分别代表方形的长和宽。

 

 

上色

只有形状,不免无趣。我们还要学会上色。和我们预想的上色方式不一样,不是每个形状都会有一个对应的色彩属性,来让你去定义它的颜色。比如ellipse(200,200,20,20,?)后面再加一个参数之类的。

程序中上色要使用 fill 函数,这是一种通用的上色方法,并且要写在绘图函数前面,

fill 的输入参数很特别,允许几种输入方式。

可以这样

fill(x)

x代表灰度值,最小为0(代表黑色),最大为255(代表白色)

可以这样

fill(x,a)

x代表灰度值,a代表透明度(最小值0,最大值255)

也可以这样

fill(r,g,b)

r代表red(红),g代表green(绿),b代表blue(蓝)。

还能这样

fill(r,g,b,a)

rgb就代表三原色,a代表alpha(透明度)

实例效果:

size(500, 500);
fill(125);
ellipse(100, 250, 100, 100);
fill(125, 100);
ellipse(200, 250, 100, 100);
fill(255, 0, 0);
ellipse(300, 250, 100, 100);
fill(255, 0, 0, 50);
ellipse(400, 250, 100, 100);

献给Processing爱好者的教程【4】—第一个processing程序【卡卡】 - 第10张  | Processing编程艺术

但如果前面只写一个fill呢?

size(500, 500);
fill(125);
ellipse(100, 250, 100, 100);
ellipse(200, 250, 100, 100);
ellipse(300, 250, 100, 100);
ellipse(400, 250, 100, 100);

献给Processing爱好者的教程【4】—第一个processing程序【卡卡】 - 第11张  | Processing编程艺术

那之后绘制的图像,都会填充同一个颜色。如果将 fill 放在中间,前面的依然会是默认的白色,只有后面的代码会产生影响。(代码由上至下执行的)

size(500,500);
ellipse(100, 250, 100, 100);
fill(125);
ellipse(200, 250, 100, 100);
ellipse(300, 250, 100, 100);
ellipse(400, 250, 100, 100);

献给Processing爱好者的教程【4】—第一个processing程序【卡卡】 - 第12张  | Processing编程艺术

  • 如果希望绘制的每个形状都是不同的颜色,就得在每个绘图函数的前面加上fill。

与fill相关的还有noFill函数。

noFill()

它不需要输入任何参数,写在绘图函数前面,之后绘制的图形都不会填充颜色,而只显示边线。

size(500,500);
noFill();
ellipse(100,250,100,100);
ellipse(200,250,100,100);
ellipse(300,250,100,100);
ellipse(400,250,100,100);

献给Processing爱好者的教程【4】—第一个processing程序【卡卡】 - 第13张  | Processing编程艺术

除非你后面又写上fill(),那才会开启填充功能。

边线

除了能处理形状的填充色,还可以单独对边线的颜色和宽度进行处理。

边线颜色

stroke(x)

stroke 函数可以改变边线的颜色。括号内参数与 fill 函数的用法完全一样。代表边线的颜色。可以选择四种不同的参数输入方法。

stroke(x)

x代表灰度值,最小为0(代表黑色),最大为255(代表白色)

stroke(x,a)

x代表灰度值,a代表透明度alpha

stroke(r,g,b)

rgb代表三原色RGB

stroke(r,g,b,a)

rgb代表三原色RGB,a代表透明度alpha

边线宽度

strokeWeight(x)

控制边线的粗细(还可以控制点的大小)

noStroke()

无需输入参数,代表不显示边线

stroke的用法就留待大家去探索了。如果把下面这行代码写在之前表情图案的前面,就会出现这个效果。

strokeWeight(8);

 

 

 

End

学程序不要单纯去背知识点,而是要将它们灵活运用起来。除了一些特别常用的函数要记住以外,其余的在用的时候再去查也是没有问题的。

在 Processing 官网中可以查到各种函数的用法。(https://processing.org/reference/)

或者在本站中文文档中查到各种函数的翻译过的文档

文档

•    说个小秘诀,如果在写程序的时候忘记怎么用某个函数。只要你的函数名书写正确的,就可以查询该函数的详细用法。先双击函数名,等变成黄色背景时再点右键,选择Find in reference。

 

 

 



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

留下一个回复

你的email不会被公开。