Processing编程学习指南1.1 坐标纸-阿里云开发者社区

开发者社区> 华章出版社> 正文
登录阅读全文

Processing编程学习指南1.1 坐标纸

简介:

摘要


像  素

千里之行,始于足下。

—老子

本章主要内容:

明确像素和坐标的概念

绘制基本图形:点、线、矩形、椭圆

颜色:灰度、RGB

颜色:alpha透明度

请注意,你在本章并不会真正开始编程!你只是使用基于文本的指令在屏幕上创造图形,请尽情享受这个过程带给你的愉悦。事实上,这些文本指令就是“代码”!


1.1 坐标纸


本书会教授你如何通过计算媒介进行编程,我们以Processing开发环境(http://www. processing.org)为基础进行讨论和举例。在一切开始之前,你要像八年级的学生一样,拿出坐标纸,在上面画一条线。两点之间距离最短的是经典的直线,我们的学习就从这两点一线开始。

图1-1展示了点A(1,0)和点B(4,5)之间的一条线段。如果你想指导一个朋友绘制同样的线段,你会跟他说:“请绘制一条始于点(1,0),止于点(4,5)的线段。”此刻,想象你的朋友是一台计算机,你想指导这个数码家伙在它的屏幕上绘制出同样的线。其实上述指令同样适用于计算机(只是此时你可以忽略掉朋友之间的客套寒暄,而需要留意的是精确的指令格式)。这条指令如下所示:

 

祝贺你,你已经写完了第一行计算机代码!稍后,我会告诉你关于这行代码的具体格式要求。现在,我们为电脑提供了一条指令(我称之为函数(function)),并且命名为直线(line)让它来执行。此外,我们还声明了绘制从点A(1,0)到点B(4,5)直线的实参(argument)。如果把这条线的代码比作句子,那么函数就是谓语动词,实参则是句子的宾语。只是代码以分号而不是句号结尾,如图1-2所示。

这里,关键是要注意计算机屏幕不过是一张精致的坐标纸。屏幕中的每个像素都具有一个坐标,即两个数值:x坐标(横坐标)和y坐标(纵坐标)。这样就决定了一个点在平面中的位置。你的任务就是在这些像素坐标上指定图形的形状和颜色。

坐标纸和电脑窗口的坐标系都采用笛卡儿坐标系统(Cartesian coordinate system),并且将原点(0,0)置于坐标系中央。不同的是:坐标纸的y轴正半轴朝上,x轴的正半轴朝右(y轴负半轴和x轴负半轴分别朝下和朝左);而在电脑窗口的坐标系统中,y轴方向是相反的。原点(0,0)在屏幕的左上方,原点右侧是x轴正半轴,原点下侧是y轴正半轴,如图1-3所示。

 

图 1-3

练习1-1:通过观察绘制一条直线的过程—line(1,0,4,5),猜想应该如何绘制矩形、圆和三角形?首先用文字写出如何绘制,然后尝试用代码写出。

汉语:                                  

代码:                                  

汉语:                                  

代码:                                  

汉语:                                  

代码:                                  

待会回来看一下你猜想的代码和Processing实际的代码是否一致。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: