Development Pages
Dave
COLLIER
 

Experiments with Colour Filters
Select picture
or specify image url apply
will be converted to 500px × 375px
 
 
This page require HTML5 – your browser version is too old for this page to work for you.
The experiment is inspired by Experiments in Colour Vision by Edwin Land from 1959 (Land’s paper here).
Land was not the first to demonstrate the effect of creating coloured images from black-and-white film taken through filters, In the late 19th and early 20th century there were the Biocolour process, Kinecolour and early Technicolor, all used red and green filters onto black-and-white film, re-projected through red and green filters to create something approaching full colour on screen.
And colour films made by Claude Friese-Greene in the 1920s, on YouTube. Friese-Greene used the Biocolour process
Can we simulate that on the computer monitor? This page starts with a colour photo and runs it through two filters of different colours, the results of which it converts to greyscale. Then it re-projects’ that greyscale image through the two colour filters to obtain a full colour additive mix.
It kind of works – notice that on the final additive mix the blues do come out blue, despite being made up solely of red and green – and it will work much better as I hone the colour brightness formulas and filters, I hope.
Scroll down the page to see the progress of the experiment, or collape the sections to see parts at a time.
 
Adjust filter colour and opacity (%) of the FIRST filter. Adjust filter colour and opacity (%) of the SECOND filter.
%
%
%
%
 
 
Brightness value of first filter =
Brightness value of second filter =
Automatic complementary colour Automatic brightness equivalence
The colour-filtered pictures converted to greyscale.
There are different formulas for converting colour to greyscale (which we do in order to simulate black-and-white film). These have different effects:
like PS
W3C YIQ
YIQ squared
CIE XYZ
XYZ squared
Lgt’ness
Average
brightness weighted
 
inverse gamma
gamma
: exponent
 
(Explanation of each formula at foot of page.)
Positive Negative Positive Negative
 
 
+
%
%
 
 
+
%
%
Brighten Darken
by value
by percent
by inverse %
 Brighten Darken
by value
by percent
by inverse %
average brightness 0 average brightness 0
inverse % = darker shades affected more than lighter
Greyscale image projected through the [ opposing ] [ same ] filter.
 
 
%
%
Additive mix of projected filters.
Light Source Colour and Intensity Brightness Saturation
True Additive
Alternate pixels
Random pixels
%
%
%
%
%
%
 
There are many different ways of calculating greyscale, by multiplying the red, green and blue colour values by different fractions. These give different results.
The results can be applied linearly or with a brightness weighting. (For brightness weighting in graphic form, see Colour Brightness Experiment.) Brightness-weighted results will inevitably be darker by the nature of the curve, as shown graphically on Colour Brightness Experiment.
Brightness weightedThis applies a brightness weighting according to the following formula, where ic = the calculated brightness value and exp the exponent, the function returns a percentage that is then multiplied by 255:
var c = ic/255.0;
if ( c <= 0.04045 ){
return c/12.92;
} else {
return Math.pow(((c+0.055)/(1.055)),exp);
}
The formulas for calculating greyscale are as follows:
like PSApproximates to the greyscale calculation formula used by Photoshop. red_value × 0.2235, green_value × 0.7154, blue_value × 0.0611, each in turn passed through the inverse gamma formula:
var c = ic/255.0;
if ( c <= 0.04045 ){
return c/12.92;
} else {
return Math.pow(((c+0.055)/(1.055)),2.4);
}
then the result vi passed through a gamma formula as follows, which returns a percentage that is then multiplied by 255:
return vi<=0.0031308 ? vi * 12.92 : 1.055*Math.pow(vi,1.0/2.4)-0.055;
W3C YIQYIQ coefficients also known as Digital CCIR601 and suggested in the Web Accessibility Guidelines from the W3C and challenged by me (see Holes in the W3C Colour Readability Guidelines. ) red_value × 0.2125 + green_value × 0.7154 + blue_value × 0.0721
YIQ Sqd sqrt((0.0.2125 * red_value^2) + (0.7154 * green_value^2) + (0.0721 * blue_value^2))
CIE XYZred_value × 0.299 + green_value × 0.587 + blue_value × 0.114
XYZ Sqd sqrt((0.0.299 * red_value^2) + (0.587 * green_value^2) + (0.587* blue_value^2))
Lightness½ × (max(R,G,B) + min(R,G,B)), see Puzzling Greys.
Average(R + G + B) ÷ 3, see Puzzling Greys.
 

 
powered by 66sys