Processing编程学习指南1.4 RGB颜色

1.4 RGB颜色


前面几节的内容帮助你学习了像素坐标、图形尺寸等基础知识。现在是时候学习数位色彩的基础知识了。回想一下童年,还记得手指画吗?通过混合最基础的三种原色,我们可以得到任何颜色。如果将所有颜色混合在一起,会导致浑浊的棕色。而且你混合的颜料越多,就变得越暗。

数位色彩(digital color)同样是混合三种基础颜色来实现的,但其运行机制和绘画颜料有所不同。首先,数位色彩的色光三原色是不同的:红、绿和蓝(RGB三个字母所对应的red、green和blue)。其次,数位色彩以光来合成颜色,而不是用颜料来合成,因此其颜色叠加模式也不同。

红+绿=黄

红+蓝=紫

绿+蓝=青(蓝绿)

红+绿+蓝=白

没有颜色=黑

上述假定颜色尽可能鲜艳,当然,你也可以只混合一定量的颜色。比如,一部分的红色加上一部分的蓝色等于灰色,一点红色加上一点蓝色等于深紫色。

尽管对你来说可能需要一些时间来消化数位色彩的运行机制,但使用RGB颜色进行编程和试验的次数越多,你越会发现它就像用手指来调和颜色一样,是很容易理解的。当然,你并不能对计算机说“在红色里面混合少量蓝色”,你必须要提供精确的数值。就像在灰度中,每一种单独的颜色元素用0(一点颜色也没有)到255(尽可能多的颜色)的数字来表示,RGB颜色是按照红绿蓝的顺序列出的。通过颜色混合试验,你可以更快地掌握RGB颜色。接下来,我会讲解一些使用常见颜色的代码。

注意,本书的印刷版本只能够呈现给你Processing草图的黑白版本,但在本书的配套网站http://learningprocessing.com上,你可以看到每一个草图的彩色版本。同样,你也可以在Processing网站(https://processing.org/tutorials/color/)看到一个彩色版本的教程。

示例1-3:RGB颜色

 

Processing提供了一个颜色选择器(color selector)来辅助你选择颜色。你可以通过“工具”(在菜单栏)找到“颜色选择器”,如图1-19所示。

练习1-5:完成下面的程序。猜测应该填写的RGB数值(可以阅读完下一章之后在Processing中检查你的答案)。你同样可以使用图1-19所示的颜色选择器。

 

 

 

练习1-6:下面每一行代码会生成什么颜色?将答案填写在空白处。

 

时间: 2024-10-31 00:51:53

Processing编程学习指南1.4 RGB颜色的相关文章

Processing编程学习指南1.5 颜色透明度

1.5 颜色透明度 除了红.绿和蓝这三种构成颜色的最基础元素之外,还有一个可选的第四种元素,就是颜色的alpha值.alpha值指的是不透明度,当需要实现一个图形在另外一个图形之上半透明的叠加效果时,alpha非常有用.一张图像的alpha值在很多时候被统称为"alpha通道". 你要知道,屏幕显示的像素并没有真正变透明,这只是一个颜色混合的错觉.实际上,Processing通过一个颜色百分比与另外一个颜色的百分比的混合叠加计算,创造出视觉上混合的效果.(如果你对编写"玫瑰色

Processing编程学习指南导读

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

Processing编程学习指南1.1 坐标纸

摘要 像 素 千里之行,始于足下. -老子 本章主要内容: 明确像素和坐标的概念 绘制基本图形:点.线.矩形.椭圆 颜色:灰度.RGB 颜色:alpha透明度 请注意,你在本章并不会真正开始编程!你只是使用基于文本的指令在屏幕上创造图形,请尽情享受这个过程带给你的愉悦.事实上,这些文本指令就是"代码"! 1.1 坐标纸 本书会教授你如何通过计算媒介进行编程,我们以Processing开发环境(http://www. processing.org)为基础进行讨论和举例.在一切开始之前,你

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

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

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

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

Processing编程学习指南3.4 鼠标点击和键盘操作

3.4 鼠标点击和键盘操作 当前,你正使用setup()和draw()框架,以及mouseX和mouseY这样的关键词来构建动态的.可交互的Processing草图.但是,还有一个重要的交互形式没有讨论-点击鼠标! 点击鼠标时,如何让Processing发生相应的交互行为?为了了解这一点,你需要回到程序的运行流程中去.你已经了解setup()仅运行一次,而draw()会往复运行.那么鼠标点击应该在什么时候发生?鼠标点击(以及键盘操作)所触发的事件在Processing中被叫做响应事件(event

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

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

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

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

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

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