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

时间: 2025-01-20 12:54:54

Processing编程学习指南1.1 坐标纸的相关文章

Processing编程学习指南导读

前 言 Learning Processing:A Beginner抯 Guide to Programming Images, Animation, and Interaction, Second Edition 本书讲的是什么 本书讲了一个故事.一个关于解放与自由的故事,一个关于逐步了解计算机基础知识的故事.通过编写代码,可以创造属于你自己的多媒体设计,而不必拘泥于已有的软件工具.这个故事不仅仅是为科学家和工程师准备的,同时也是为你准备的. 本书是为谁准备的 本书是为初学者准备的.如果你到目

Processing编程学习指南1.6 自定义颜色取值范围

1.6 自定义颜色取值范围 RGB颜色取值为0-255,但这并不是Processing处理颜色的唯一方法.在后台的计算机内存中,颜色通常是以一系列24位(在有alpha值的情况下是32位)的方式进行计算的.不过,Processing允许你以任何喜欢的方式来自定义颜色的取值范围,它允许你使用计算机可以理解的任何数字.例如,你可能倾向于将颜色以0到100的方式(就像百分比)来定义颜色.你可以在Processing中使用colorMode()函数来实现.   上述代码的意思是:"好的,我想以红.绿和蓝

Processing编程学习指南1.2 绘制基本图形

1.2 绘制基本图形 本书绝大部分的编程示例都是自然可视的.不论你最终希望利用Processing学习制作交互游戏,还是艺术算法,还是动态logo设计(在这里,思考一下你学习Processing的目的),最核心的是,每一种视觉编程都包含像素的设定.了解Processing运行方式的最简单方法是首先学习绘制基本图形.这和在小学里学习绘画并没有太大区别,只是这里的工具由蜡笔变成了代码. 首先,从图1-4中的四个基本图形开始. 针对每个图形,先问下自己需要什么数据信息才能确定图形的坐标和大小(后面还会

Processing编程学习指南1.4 RGB颜色

1.4 RGB颜色 前面几节的内容帮助你学习了像素坐标.图形尺寸等基础知识.现在是时候学习数位色彩的基础知识了.回想一下童年,还记得手指画吗?通过混合最基础的三种原色,我们可以得到任何颜色.如果将所有颜色混合在一起,会导致浑浊的棕色.而且你混合的颜料越多,就变得越暗. 数位色彩(digital color)同样是混合三种基础颜色来实现的,但其运行机制和绘画颜料有所不同.首先,数位色彩的色光三原色是不同的:红.绿和蓝(RGB三个字母所对应的red.green和blue).其次,数位色彩以光来合成颜

Processing编程学习指南2.1 让Processing来拯救你

摘要 Processing 未来计算机的重量也许不超过1.5吨. -美国<大众机械学>(Popular Mechanics)杂志,1949 带我去见你的首领. -Zoog,2008 本章主要内容: 下载和安装Processing Processing界面 Processing速写本 编写代码 错误 Processing 参考文档 运行按钮 你的第一个草图 2.1 让Processing来拯救你 既然你已经掌握了图形以及RGB颜色的基本知识,现在是时候将学到的知识运用到编程中了.幸运的是,你将使

Processing编程学习指南2.7 Processing参考文档

2.7 Processing参考文档 前面我示范的函数(ellipse().line().stroke()等)都是Processing库中的内容."ellipse"不能拼写为"elipse",rect()需要使用4个实参(x坐标值.y坐标值.宽度值.高度值)等这些细节内容是非常直观的,也容易理解,这也证明Processing确实非常适合初学者作为学习计算机编程的首选语言.然而,学习这些知识最严谨的方法是阅读Processing提供的在线参考文档.虽然本书会涉及参考文

Processing编程学习指南2.9 你的第一个草图

2.9 你的第一个草图 现在,你应该下载并完成了Processing的安装,理解了基本菜单和界面窗口,并且了解了在线参考文档,是时候编写代码了.正如我在第1章中所提及的,本书的第一部分内容将会沿用一个案例来阐述编程的基本组成元素:变量.条件语句.循环.函数.对象,以及数组.当然书中也会穿插别的示例,但是一直沿用一个示例的好处在于:它能够更好地让你看到电脑编程各个基本元素之间是如何循序渐进.互相依存的. 这个示例将会根据Zoog的故事来展开,Zoog是我们的新朋友,它一开始仅仅是一个静态的简单图形

Processing编程学习指南3.2 我们的好朋友:setup()和draw()

3.2 我们的好朋友:setup()和draw() 刚从马拉松赛跑中归来的你肯定满是疲倦.为了更好地学习Processing,你要将刚刚学习的知识迅速应用到你的第一个动态Processing草图当中去.和第2章中的静态示例不同,这个程序会持续不断地运行(也就是说直到用户退出为止).这将通过使用两个"代码块"(block of code)来完成:setup()和draw().严格意义上讲,setup()和draw()都是函数.后面章节会深入探讨如何定义你自己的函数.现在,你就把他们暂且理

Processing编程学习指南2.8 “运行”按钮

2.8 "运行"按钮 Processing的一个优势在于:想要运行一个程序,所需的全部工作就是点击"运行"按钮.这非常类似点击一个媒体文件的"播放"按钮:播放一个动画.电影.音乐和其他格式的媒体文件时,都会用到播放按钮.既然Processing程序输出的媒体文件是计算机图形的实时运算结果,那么为什么不能直接播放它们呢? 这里,请花点时间考虑这样一个事实:在这里做的事情和播放音频或者视频文件并不完全相同.输入到Processing的初始内容是文本内