极客工坊

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 21247|回复: 2

Processing官网学习部分原文翻译——颜色

[复制链接]
发表于 2012-11-7 15:00:06 | 显示全部楼层 |阅读模式
本帖最后由 弘毅 于 2012-11-19 18:23 编辑

颜色
本教程适用于Processing1.1及以上版本。如果您发现有任何错误或者有什么建议,请联系我们。本教程源自《学习Processing》艺术,Daniel Shiffman著,Morgan Kaufmann 出版社出版,2008Elsevier Inc公司版权所有。版权所有。
灰度色
在数字世界,如果你想谈论一下颜色的话,精度是必须的。说“嘿,你能把那个圆弄成蓝绿色吗?”是不行的!颜色,也是被定义为一定范围内的数字的。让我们从最简单的例子开始:黑色、白色或者灰色。0意味黑色,255意味着白色。在这两者之间的数—50,87,162,209或者是其他的数—都是介于黑色和白色之间的灰色。


你认为从0到255看起来很那个啥吗?
图形的颜色需要储存在电脑存储器中。则个存储器只是一个长序列的0和1(一大堆的打开或关闭开关)。每个开关就是一个比特,每八个比特就是一个字节。想象一下我们在序列里有八个比特(1字节)——我们有多少种开关配置方法?答案也许是255种(做一个小小的二进制数研究将会证明这一点),或者是在0到255之间的数。我们用8比特给灰度区间颜色,用24比特给所有颜色(红、绿、蓝色各部分8比特)。
通过在一些绘图动作前添加stroke()函数和fill()函数,我们可以给任何给定的形状设置颜色。同样还有background()函数,它给窗口设置背景颜色。一下是一个例子。

[pre lang="processing" line="1"]background(255);    // 设置背景为白色
stroke(0);          // 设置轮廓线为黑色
fill(150);          // 设置图形填充色为灰白色
rect(50,50,75,100); // 画矩形[/code]
轮廓或者填充可以用以下函数取消:noStroke()和noFill()。直觉会认为“stroke(0)”没有轮廓线,但是0并不表示什么都没有,二十指黑色,记住这点很重要。同样要记住不要将noStroke()和noFill()两个都取消了,这样就不会出现什么东西了!
此外,如果我们画两个形状,Processing总是使用最近指定的轮郭和填充,从上往下读取代码。


RGB颜色
记得手绘图吗?通过混合三种原始色,可以生成任何其他颜色。各种颜色搅在一起成为乱乱的棕色。你增加的颜料得越多,颜色越暗。数字颜色同样谁用三原色,但是工作原理不同于颜料。首先,原始色不同:红,绿,蓝(即“RGB”色)。你在屏幕上看到的是混合光,没有颜料,因此混合规则是不一样的。


  • Red + Green = Yellow
  • Red + Blue = Purple
  • Green + Blue = Cyan (blue-green)
  • Red + Green + Blue = White
  • no colors = Black

先假设颜色都是尽可能的明亮,当然,颜色范围是可行的。然后一些红色加上一些绿色加上一些蓝色就是灰色了,一点红色和一点蓝色就是深紫色。虽然这需要习惯一下,你编程实验RGB颜色越多,它就成为一种本能了,就像你手绘画调色一样。当然你不能说“混合一些红色和一点蓝色。”你必须提供一个确切的数据。与灰度一样,单个颜色的元素从0(一种颜色都没有)到255(尽可能多的颜色)范围表示,命令顺序是R,G,B。你会通过一些实验来鉴赏RGB颜色的混合,但是接下来我们讨论一下使用常用颜色的代码。

例子:RGB色
[pre lang="processing" line="1"]background(255);  
noStroke();

//鲜红
fill(255,0,0);
ellipse(20,20,16,16);

// 深红
fill(127,0,0);
ellipse(40,20,16,16);

// 粉红
fill(255,200,200);
ellipse(60,20,16,16);[/code]
Processing也有一个颜色选择器帮助选择颜色。使用途径:工具(主菜单)——颜色选择器。

颜色透明度
除了红、绿、蓝作为每个颜色组件,还有一个外的组件,称为颜色的“透明度”。透明度就是透明度啊,当你想绘制一个通过顶端透明部分显示另一些像素时,这个非常有用。图像的透明值通常被统称为图像的透明通道。
需要重点认识到的是,像素并不是字面意义上的透明,它仅仅是一个混合颜色弄成的比较方便的幻觉。在幕后,Processing将颜色值从一种百分比添加到另一种百分比,创造光学视觉的混合。(如果你感兴趣编程“玫瑰色”眼睛,这将是你的开始。)
透明纸同样在0到255之间,0表示完全不透明(即0%透明),255表示完全透明(即100透明)。


例子:透明通道
[pre lang="processing" line="1"]size(200,200);
background(0);
noStroke();

//没有第四个参数意味着100%不透明.
fill(0,0,255);
rect(0,0,100,200);

// 255 意味着100透明
fill(255,0,0,255);
rect(0,0,200,40);

// 75% 透明.
fill(255,0,0,191);
rect(0,50,200,40);

// 55% 透明.
fill(255,0,0,127);
rect(0,100,200,40);

// 25% 透明.
fill(255,0,0,63);
rect(0,150,200,40);
[/code]
自定义颜色范围
0到255范围内的RGB颜色并不是Processing中唯一你能用的。在计算机存储器中的后台处理,颜色总是遗传24比特(有透明度的是32比特)。然而,Processing总是能够实现我们希望的颜色,并将我们的值转为计算机可以理解的数。例如,你可能倾向于认为颜色范围是从0到100(像一个百分比)。你只需要用一个自定义说明colorMode()。
colorMode(RGB,100);
上述函数表示:“考虑一下红、绿、蓝这队颜色。RGB值得范围从0到100。”
尽管难得去做这个,你也可以为每个颜色组件定义不同的范围:colorMode(RGB,100,500,10,255);
现在我们说:“红色从0到100,绿色从0到500,蓝色从0到10,透明度从0到255。”
最后,虽然可能在你编程过程中只需要RGB颜色,你好可以指定颜色的模式为HSB(色相,饱和度和亮度)。不用考虑过多细节,HSB颜色工作方式如下:


色相——颜色类型,默认情况下范围从0到360(想象一个360度的彩色轮子)。
饱和度——颜色的活力,定义在0到100。
透明度——就是颜色的透明度了,定义在0到100。
你可以用colorMode()函数设置自己的颜色范围。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
回复

使用道具 举报

发表于 2013-3-1 17:22:16 | 显示全部楼层
这么好的帖子怎么没人顶呢。
回复 支持 反对

使用道具 举报

发表于 2014-11-28 18:18:23 | 显示全部楼层
必须顶。。。。。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则 需要先绑定手机号

Archiver|联系我们|极客工坊

GMT+8, 2024-3-29 17:04 , Processed in 0.042943 second(s), 20 queries .

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表