ruby-****@sourc*****
ruby-****@sourc*****
2013年 4月 23日 (火) 16:47:04 JST
-------------------------
REMOTE_ADDR = 70.49.50.179
REMOTE_HOST =
URL = http://ruby-gnome2.sourceforge.jp/hiki.cgi?tut-gtk2-appdx-clrtheory
-------------------------
@@ -13,14 +13,32 @@
{{br}}
== Digital Colour Theory For Computer Professionals
+(A12.3){{br}}
+
+If you need to manipulate colours programmatically and have trouble understanding how colours mutate, transfer and flow from one into another, this chapter is for you. For all others, a warning is in order. Namely, what I describe here is limited only to those colours that map to the basic eight colours (black, red, green, blue, turquoise, yellow, white and brown), we humans understand as the most basic colour set.
+
+=== Introduction
(A12.3.1){{br}}
-If you need to manipulate colours programmatically and have trouble understanding how colours mutate, transfer and flow from one into another, this chapter is for you. For all others, a warning is in order. Namely, what I describe here is limited only to those colours that map to the basic eight colours (black, red, green, blue, turquoise, yellow, white and brown), we humans understand as the most basic colour set.
{{image_left("my-color-grid-3s-s1.png")}}
-Therefore, in this chapter we deal just with a small subset of the entire digital colour theory, however, this treatment of the subject is complete enough to satisfy most any computer professional, except perhaps those that need to design applications for use in visual arts and alike. The image here on the left is a good example to show you how you should be able to manipulate colours programmatically (it was made by a program, we develop in this chapter.)
+Therefore, in this chapter we deal just with a small subset of the entire digital colour theory, however, this treatment of the subject is complete enough to satisfy most any computer professional, except perhaps those that need to design applications for use in visual arts and alike. The image here on the left is a good example to show you how you should be able to manipulate colours programmatically (it was made by a program and a module containing colour management methods, both of which we ourselves develop here, later on in this chapter.)
+{{br}}
+:You may not need to know more about colour theory
+ (A12.3.1.1){{br}}
+ In fact opening this appendix chapter with the introduction to the use of the just mentioned module with colour management utility methods may prove beneficial not only to those who would like to avoid studying the colour theories but also to those with higher expectations, which undoubtedly, can be better appreciated after seeing the resulting program examples before embarking on yet another study of 'some useless theory'.
+
+ As you can see this program, called 'display-color-shades.rb', displays a colour greed for all basic colours with an arbitrary depth (a number of desired colour shades), the image of which is shown at the beginning of this chapter. Actually, this program is just a platform in which we use and test our colour management methods, designed to shield a developer from the intricacies and complexities of raw colour code manipulation, mainly relieving him or her from the need to even know how the colour codes look like, let alone memorizing them, their darker and brighter colour shades, and their associated colour code patterns.
+
+ Most often a developer just needs to set or use a certain basic colour, or perhaps its lighter or darker shade. Les frequently, but still often enough colour transparency is desired. We could pack all this functionality into a simple easy to use utility method, that would allow us to use colours in programs just like we use them in human languages, where a small number of basic colours is used to form all needed shades by using adjectives like, 'bright', 'brighter', 'darker' ..., and adverbs like 'more' or 'less', etc. Similarly, the methods should make colour transparency, a.k.a alpha channel - transparent, namely, one should not constantly think about it. Transparency should always be there in the form of reducible opacity. The use of colour management methods should be self-explanatory, and the main colour management method should implement sufficient error reporting, to greatly reduce, if not eliminate, the need for a programmer to check API documentation for colour
management methods, whenever an incorrect argument was used in a method invocation during the early program development phases.
+
+ If such a utility were available, I believe the majority of programmers would never be bothered with the details of "Digital Colour Theory". The good news is we have such a utility, and if you belong to the above mentioned majority, that could not be bothered with some digital colour theory, you can skip all the theoretic mumbo-jumbo, and jump ahead directly to the section A12.3.3 ((<Putting the theory to work|tut-gtk2-appdx-clrtheory#Putting the theory to work>)), where this program, and even more importantly, the colour management methods we developed, are explained.
+
+
+=== Digital Colour Codes
+(A12.3.2){{br}}
Throughout our existence we learned that all existing colours in nature can be created from three (red, green, and blue) basic natural (or better, elementary) colours. This sets the ground to define eight (actually eleven) basic colours (000=black, 001=blue, 010=green, 100=red, 011=turquoise,101=magenta, 110=yellow and 111=white) /note, orange, brown and grey colours are missing because there are only seven combinations in this 'binary' code with three bits only/. However, depending on the amount/intensity of any of the three (rgb) colours, we can create different shades of these basic colours, some of which, we humans, named as different colours. For instance by changing the intensity of the two components that naturally give us either orange or yellow, we can make a colour we named "brown". Note, that we are not even mentioning colour names with exotic prefixes, postfixes and odd colour compositions such as light-olive-green, yellowish-brown, bluish-magenta, etc.
@@ -51,7 +69,25 @@
=== The Defining RGB Colours.
-(A12.3.1.1){{br}}
+(A12.3.3){{br}}
The three colour values FF (255), 80 (128) and (0), we just learned computer graphic engineers reserved for "full, half and empty" markers, are used to define all easy recognizable colours, a.k.a. defining colours.
@@ -149,7 +167,25 @@
=== The rules that define relationships between the RGB colour components
# ---------------------------------------------------------------------
-(A12.3.2){{br}}
+(A12.3.4){{br}}
# THE RULES ABOUT RELATIONSHIPS BETWEEN THE RGB COLOUR COMPONENTS :
# =======================================================
@@ -190,6 +208,25 @@
* ((*00*)) we call ((*empty*)) (figure it out /hint - no colour/)
Using the above convention, the defining colour code can be defined as follows:
+
black ......... empty empty empty 00 00 00
red ........... full empty empty ff 00 00
@@ -373,17 +392,39 @@
=== Putting the theory to work
-(A12.3.3){{br}}
+(A12.3.5){{br}}
+
+As already mentioned in the introduction, the motivation behind the development of the colour management programming aid was to simplify the use of colours in Gtk and cairo graphics programs. However, no matter how simple the tool, which replaces a more complicated raw colour code manipulation, you still need to learn to use that tool. The best way to learn it is by looking at it in a real life example, and then start using it yourselves. This approach is greatly improved, if the tool contains sufficient error reporting, when used incorrectly. Our colour management utility includes such an error reporting feature, that almost completely eliminates the need for external API documentation. We use the example program introduced in the opening paragraphs into this chapter to make you sufficiently familiar with the utility, to start using it on your own in your own programs.
+
-Let's start with the program, that displays a colour greed for all basic colours with an arbitrary depth (a number of desired colour shades), shown in the first image at the beginning of this appendix. This program is just an example using the colour generating methods, which really, we are interested in from the outset. Nevertheless, we factored out the colour altering methods from the example program, and created a generic reusable module, that can be used in many Gtk and cairo programming projects. The motivation behind the development of this colour management programming aid was to shield the developers from ever looking at the colour code tables, and colour schemes, allowing them to treat colours just like in all human languages, by using adjectives like, bright, brighter, darker ... and adverbs like more or less, etc. Similarly, one should not constantly think about colour transparency, a.k.a alpha channel, it should always be there as a reducible opacity. The use of
colour management methods should be self-explanatory, and the methods should implement sufficient error reporting, to eliminate a need for a programmer to constantly checking the API documentation, when an incorrect argument was used during a method invocation.
+Indeed, the definitions our colour management methods are not part of the example program. They are part of a generic reusable module called 'hiki2-color-brightness-mgmt.rb', that can be used in many Gtk and cairo graphics programming projects. Though, you do not need to ever look at the code in this module, you do need to copy this and some other files onto your system, into a particular directory or folder. All this is extensively explained in the "Programmer's Note" section preceding any program example that needs these modules, as well as at the end of each chapter in the section called "The required files". Though, this represents some additional overhead, it is a generic Ruby overhead any competent Ruby programer should have no trouble coping with, and understanding it will not help you use these methods in your programs. For that you do need to learn the minimum required API for the methods in the module you wish to use. Usually, reading example programs using these m
ethods is sufficient. The example program here is designed to do just that and get you going.
-# (A12.3.3.1)
+# (A12.3.5.1)
=== Complete 'display-color-shades.rb' Program Listing
(A12.3.3.1){{br}}
:Programmer's Note:
- (A12.3.3.1.1){{br}}
+ (A12.3.5.1.1){{br}}
To run this program example you need to upgrade the 'hiki2-gtk-w-cairo.rb' module file to at least the ((*release 1.3*)). This file contains the required HikiGtk module. HikiGtk modules can be viewed and copied from section: 10.2.1.1 [((<Time To Start Using Object-Oriented Programming Paradigm|tut-gtk2-dnd-intro#Time To Start Using Object-Oriented Programming Paradigm>))]. For all required files see section A12.3.5 (The required files) below.
@@ -398,106 +420,119 @@
# 10-8000-03-display-color-shades-dpl01.rb
-
-
- #!/usr/bin/env ruby
- # Testing ColorBrightnessMgmt module from file 'color-brightness-mgmt.rb'
-
- $: << '~/work/HikiLib'
- require 'hiki2-gtk-w-cairo.rb'
- include HikiGtk
-
- class DrwAreaToImg < CairoWindow
- include CairoHelper
-
- def initialize(title=nil, n=4)
- super(title)
- @number_of_shades_on_one_side=n
- @unit = 1.0
- @step = @unit/n
- @color_box_w = @unit * 0.65
- @color_box_h = @unit / 3
- @hgap = (@unit - @color_box_w) / 7
- @vgap = 3*@hgap
- # @cr ... instance variable is initialized only after {{ draw }} method is called.
+ #!/usr/bin/env ruby
+ # Testing ColorBrightnessMgmt module from file 'color-brightness-mgmt.rb'
+ $: << '~/work/HikiLib'
+ require 'hiki2-gtk-w-cairo.rb'
+ include HikiGtk
+ class DrwAreaToImg < CairoWindow
+ include CairoHelper
+ def initialize(title=nil, n=4)
+ super(title)
+ @number_of_shades_on_one_side=n
+ @unit = 1.0
+ @step = @unit/n
+ @color_box_w = @unit * 0.65
+ @color_box_h = @unit / 3
+ @hgap = (@unit - @color_box_w) / 7
+ @vgap = 3*@hgap
+ # @cr ... instance variable is initialized only after {{ draw }} method is called.
+ end
+ def draw(cr, drawing_area)
+ # NOTE the peculiarity here, cairo context instance variable can be
+ # initialized, only after 'draw' method is called with the context
+ # parameter (cr).
+ @cr = cr
+ cr.scale(100, 100) # Examples are in 1x1 coordinate space
+ cr.line_width = 0.01
+ # Display the color grid.
+ base_color_names.each_with_index do |color, line|
+ display_line_of_shades_for_color(color, line)
+ end
+ end
+ def display_line_of_shades_for_color(color, line)
+ n = @number_of_shades_on_one_side
+ cr = @cr # @cr ... is initialized only after {{ draw }} method is called.
+ w = @color_box_w
+ h = @color_box_h
+ nx = x = y = @hgap
+ ny = line * (@vgap + h) + @hgap
+
+ 0.step(2*@unit, @step).each do |v|
+ brightness = v - @unit
+ cr.save # Save original cairo context environment.
+ cr.translate(nx, ny) # Change all coordinates in cr for the following step pass.
+
+ cr.set_source_rgba(mk_cairo_acolor(color, brightness))
+ draw_closed_paths(cr, [x, y], [w, y], [w, h], [x, h], :c)
+ cr.fill
+ cr.set_source_rgba(mk_cairo_acolor(:black)) # Change font colour for defining colour code.
+ draw_closed_paths(cr, [x, y], [w, y], [w, h], [x, h], :c)
+ cr.stroke
+ if v == 0 # Write color name only into the brightest colour-xox.
+ cr.set_font_size(0.1)
+ cr.set_source_rgba(mk_cairo_acolor(:black))
+ cr.move_to(x+ ＠ hgap, y+4*@hgap)
+ cr.show_text(color.to_s)
end
-
- def draw(cr, drawing_area)
- # NOTE the peculiarity here, cairo context instance variable can be
- # initialized, only after 'draw' method is called with the context
- # parameter (cr).
- @cr = cr
- cr.scale(100, 100) # Examples are in 1x1 coordinate space
- cr.line_width = 0.01
- # Display the color grid.
- base_color_names.each_with_index do |color, line|
- display_line_of_shades_for_color(color, line)
- end
- end
-
- def display_line_of_shades_for_color(color, line)
- n = @number_of_shades_on_one_side
- cr = @cr # @cr ... is initialized only after {{ draw }} method is called.
- w = @color_box_w
- h = @color_box_h
- nx = x = y = @hgap
- ny = line * (@vgap + h) + @hgap
-
- 0.step(2*@unit, @step).each do |v|
- brightness = v - @unit
- cr.save # Save original cairo context environment.
- cr.translate(nx, ny) # Change all coordinates in cr for the following step pass.
-
- cr.set_source_rgba(mk_cairo_acolor(color, brightness))
- draw_closed_paths(cr, [x, y], [w, y], [w, h], [x, h], :c)
- cr.fill
- cr.set_source_rgba(mk_cairo_acolor(:black)) # Change font colour for defining colour code.
- draw_closed_paths(cr, [x, y], [w, y], [w, h], [x, h], :c)
- cr.stroke
- if v == 0 # Write color name only into the brightest colour-xox.
- cr.set_font_size(0.1)
- cr.set_source_rgba(mk_cairo_acolor(:black))
- cr.move_to(x+ ＠ hgap, y+4*@hgap)
- cr.show_text(color.to_s)
- end
- # Display colour code underneath each colour box.
- color_code = mk_rgb_color(color, brightness).upcase
- cr.set_font_size(0.15)
- cr.set_source_rgba(mk_cairo_acolor(brightness==0 ? :red : :black))
- cr.move_to(@hgap, @vgap + h)
- cr.show_text(color_code)
- cr.restore # Restore the original cairo context envirionment, preventing
- # accumulative effect, when setting coordinates for next
- # color-box {{ see: cr.save & cr.translate(nx, ny) }} above.
- nx += w + 2*@hgap
- end # end-step-loop
- end
-
- # Convenience method to dynamicaly size the main Gtk window. Returns window
- # 'width' and 'height' parameters after window object is created and after users
- # request for number of colours is taken into account during instatiation process.
- def get_dimensions
- [
- ((@number_of_shades_on_one_side * 2.0 + 1) * (@color_box_w + @vgap) - @vgap) * 100,
- ((@color_box_h + @hgap + @vgap) * base_color_names.size - @hgap) * 100
- ]
- end
- end
-
- # Allow setting the number of colour shades from the command line.
- num_of_shades = ARGV.size == 1 ? ARGV[0].to_f : 4
-
- title = "Display a colour grid"
- w=DrwAreaToImg.new(title, num_of_shades)
- w.set_size_request(*w.get_dimensions)
- w.show_all
- Gtk.main
+ # Display colour code underneath each colour box.
+ color_code = mk_rgb_color(color, brightness).upcase
+ cr.set_font_size(0.15)
+ cr.set_source_rgba(mk_cairo_acolor(brightness==0 ? :red : :black))
+ cr.move_to(@hgap, @vgap + h)
+ cr.show_text(color_code)
+ cr.restore # Restore the original cairo context envirionment, preventing
+ # accumulative effect, when setting coordinates for next
+ # color-box {{ see: cr.save & cr.translate(nx, ny) }} above.
+ nx += w + 2*@hgap
+ end # end-step-loop
+ end
+ # Convenience method to dynamicaly size the main Gtk window. Returns window
+ # 'width' and 'height' parameters after window object is created and after users
+ # request for number of colours is taken into account during instatiation process.
+ def get_dimensions
+ [
+ ((@number_of_shades_on_one_side * 2.0 + 1) * (@color_box_w + @vgap) - @vgap) * 100,
+ ((@color_box_h + @hgap + @vgap) * base_color_names.size - @hgap) * 100
+ ]
+ end
+ end
+
+ # Allow setting the number of colour shades from the command line.
+ num_of_shades = ARGV.size == 1 ? ARGV[0].to_f : 4
+ title = "Display a colour grid"
+ w=DrwAreaToImg.new(title, num_of_shades)
+ w.set_size_request(*w.get_dimensions)
+ w.show_all
+ Gtk.main
:Hiki Colour Management Module Explained
- (A12.3.3.2){{br}}
+ (A12.3.5.2){{br}}
@@ -507,7 +520,20 @@
{{br}}
{{br}}
=== Some convenient colour code schemes and tables.
-(A12.3.4){{br}}
+(A12.3.6){{br}}
You have seen colour codes can be expressed in many different notations. I find the most interesting those that can be are directly mapped to your programs.
@@ -581,20 +594,33 @@
{{br}}
=== The required files
-(A12.3.5){{br}}
+(A12.3.7){{br}}
To run the examples in this article download the following files into your program directory:
:You need:
- * (A12.3.5.1) 'hiki2-gtk-w-cairo.rb' .......... module file (((*release 1.3*)) or greater ); see section 12.3.0.3 ((<Hiki Gtk With Cairo Module Download File|tut-gtk2-dancr-rbcatut-intro#Hiki Gtk With Cairo Module Download File>)).
+ * (A12.3.7.1) 'hiki2-gtk-w-cairo.rb' .......... module file (((*release 1.3*)) or greater ); see section 12.3.0.3 ((<Hiki Gtk With Cairo Module Download File|tut-gtk2-dancr-rbcatut-intro#Hiki Gtk With Cairo Module Download File>)).
NOTE: Should you experience any problems running programs utilizing cairo library, make sure you have the latest release of 'hiki2-gtk-w-cairo.rb' module. Programs here require 'hiki2-gtk-w-cairo.rb'((*release 1.3*)) or greater.
- * (A12.3.5.2) 'hiki2-cairo-helper.rb' .......... module file; see section 12.3.7 ((<Hiki Cairo Helper Module Download File|tut-gtk2-dancr-rbcatut-intro#Hiki Cairo Helper Module Download File>)).
+ * (A12.3.7.2) 'hiki2-cairo-helper.rb' .......... module file; see section 12.3.7 ((<Hiki Cairo Helper Module Download File|tut-gtk2-dancr-rbcatut-intro#Hiki Cairo Helper Module Download File>)).
- * (A12.3.5.3) 'hiki2-color-brightness-mgmt.rb' .......... module file; see section 12.3.7 ((<Hiki Colour Management Module Download File|tut-gtk2-dancr-rbcatut-intro#Hiki Colour Management Module Download File>)). Incidentally this file is extensively covered and explained above under section A12.3.3.
+ * (A12.3.7.3) 'hiki2-color-brightness-mgmt.rb' .......... module file; see section 12.3.7 ((<Hiki Colour Management Module Download File|tut-gtk2-dancr-rbcatut-intro#Hiki Colour Management Module Download File>)). Incidentally this file is extensively covered and explained above under section A12.3.3.