| Sketch |
My Code |
|
This example shows how to load and display an image.
basic_display.pde
|
|
In this version, we grayscale an image by taking a pure
average of the red, green, and blue components for each pixel.
grayscale_naive.pde
|
|
A more commonly used formula for grayscaling a color image is
based on a weighted formula whereby
luminosity = 0.21 * R + 0.72 * G + 0.09 * B
grayscale_luminosity.pde
|
|
In this version, we use the luminosity formula for grayscale,
but then we adjust the original image to create a gradient
that transitions between original color on the left and
complete grayscale on the right.
grayscale_gradient.pde
|
|
To get a sepia tone, we use the following formulas relative to
the original pixel colors:
red = 0.393*R + 0.769 * G + 0.189 * B
green = 0.349*R + 0.686 * G + 0.168 * B
blue = 0.272*R + 0.534 * G + 0.131 * B
(noting that Processing will cap each of these at a maximum of 255).
sepia.pde
|
|
In this example, we invert each component of each pixel.
invert.pde
|
|
In this example, we play with color channels, replacing red
with green, green with blue, and blue with red.
color_swap.pde
|
|
In this sketch, we have flipped the image
left-to-right. (I hadn't noticed until now how well the
pedestrians were doing in walking on the right side of the
path).
Although we could accomplish this by carefully editing the
original image, we choose to take the easier approach of
making the flipped version as a second image (while retaining
the original).
flip.pde
|
|
|
In this interactive sketch, the user may use keyboard commands
to switch between individual color panels, pressing 'r' for
red, 'g' for green, 'b' for blue, and anything else for the original photo.
To avoid losing any information, we keep the original PImage
unchanged, and then precompute the other three panels during setup.
color_panels.pde
|
|
|
In this interactive sketch, we allow the user to adjust the
color saturation level, using the up and down
arrows. (Pressing 'r' resets to original.)
The methodology used is to take a linear interpolation between
the original version of the image and a grayscaled version of
the image, computing t*original + (1-t)*grayscale for
each component and a parameter t. When t=1,
it is exactly the original, and when t=0 it is
exactly the grayscale. For amusement, we allow them to adjust
t to be bigger than 1 for over-saturated color, or less
than 0 for negative color space.
saturation.pde
|
|
|
In this example, we create a mosaic by covering the canvas
with squares, yet with the color of each square chosen to
equal that pixel of the reference image which corresponds to
the top-left corner of the square.
We allow the user to control the size of the mosaic squares
using the up and down arrows.
mosaic.pde
|
|
|
This is a more advanced variant of previous mosaic. Rather
than determine the color of each square to match a single
pixel in the original image, we compute the average of all
pixels of the original image within the given size square.
I suppose the question is whether the more advanced result is
more appealing (you should notice less extremes).
mosaic_average.pde
|
