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实际的代码是否一致。

相关文章
|
2月前
|
Java 开发者 UED
Processing快乐编程
Processing快乐编程
25 0
|
22天前
|
Java 数据处理 数据库
【软件设计师备考 专题 】C、C++、Java、Visual Basic、Visual C++等语言的基础知识和应用(二)
【软件设计师备考 专题 】C、C++、Java、Visual Basic、Visual C++等语言的基础知识和应用
33 0
|
22天前
|
存储 算法 Java
【软件设计师备考 专题 】C、C++、Java、Visual Basic、Visual C++等语言的基础知识和应用(一)
【软件设计师备考 专题 】C、C++、Java、Visual Basic、Visual C++等语言的基础知识和应用
33 0
|
22天前
|
Java API 开发工具
【软件设计师备考 专题 】C、C++、Java、Visual Basic、Visual C++等语言的基础知识和应用(三)
【软件设计师备考 专题 】C、C++、Java、Visual Basic、Visual C++等语言的基础知识和应用
30 0
|
存储 算法
lecture 1 计算机科学简介和编程基础
一,计算机科学简介 1  算法是一个概念,程序是算法的具体实现   计算思维模式意味着一切都可以看做是一个涉及到数字和公式的数学问题。
1031 0