2.0 – Creative Coding – Color and Coordinates

2.0 – Creative Coding – Color and Coordinates


Hey coders. In this lecture we’re going
to talk about coordinates and digital color and this lecture applies to all
Creative Coding courses in the series. Think back to eighth grade when you were
taking geometry you might remember a coordinate system… coordinate plane
where zero was in the center. In computing things are a little bit different. [The center of…]
our coordinate system is in the upper left-hand corner and we still use an x
and y coordinate system. X is for the horizontal and Y is for the vertical
position. We describe a point by using this format: it’s open parenthesis, X,
comma, Y, close parenthesis. (0,0) is in the upper left-hand corner of the screen and
that’s also called the origin. For example (1, 4) would be one pixel right and four
pixels down. So on this diagram it’s 1 pixels right… 1, 2, 3, 4 pixels down. On computers color is additive. Now what
does additive mean? Additive means that all of the colors
combined add up to white. In computing color is mostly described in terms of
red green and blue values in that order. i.e. RGB and you’ll
hear that term RGB thrown around quite a bit. The range of
possible colors is described using numbers from 0 to 255.
For example, in Processing and p5.js you would fill a shape with the command:
fill(255, 0, 0); That is a red fill and I want you to
notice these each of these spaces refers to R, red, G, B. In Swift it’s a little bit
different. You would take your object where our or shape and you would modify
its fill color by adding an equal sign and you would pump in the color red
green blue with an alpha of 1.0 and we’ll talk about alpha in a little bit,
but you can notice the Swift is a little bit more clear as to what it actually
does. Another common alternative to the RGB
color mode is called HSB which stands for hue, saturation, and brightness.
On the right over here I want you to notice this animated gif this is an
artwork by the artist Adam Ferriss. He uses code. This particular
artwork was used in The New York Times as an illustration for a story.
So I want to show you an example of a color selector and I’m
gonna choose the Processing color selector. All of you can download this
this program. It is freely available on the internet. Any color
selector will probably also have the relevant fields I’m going to talk about
so you could use Photoshop or GIMP or any photo manipulation tool to look at a
color selector. So the color selector translates colors into numbers and
you’ll see this… all of the numbers over here are the kinds of numbers that
computers like to use to describe colors. So first we’re going to talk about hue.
Hue goes in a circle and zero degrees is red and circles end at 360 degrees so
360 is also red and you can kind of see… imagine if this were bent into a circle.
You see zero all the way through 360. Saturation is the intensity of the color
from greyscale to pure. So this line here demonstrates zero saturation all the way
to 99% saturation. Brightness is how bright the color is
from black to white and you can see here in this strip you see black being zero
and then white being 99%. Now the RGB values range from zero to
255 and there are hex codes too. Hex color codes are used on the web in HTML and
CSS code and you might find it useful at times in Creative Coding. This color
selector and the Processing program is available for free at processing.org so
if you need to use a color selector on your computer and you want one that’s
free, go ahead to that website and you will find it. So I want to talk a little
bit about transparency. Sometimes you’ll see color described in the four terms as
an RGB and A. The fourth term stands for alpha. Alpha is the level of transparency
and allows objects to be see-through. So in this image on the right, this is
actually two images and one of them incorporates alpha. So you can see the
dots below are visible through the gradient because of the alpha that it
has and it’s going to be super useful for your projects. In Processing and
p5.js, you can use alpha by just adding a fourth term to your fill color. So
anywhere that you would use a color, you would ordinarily see three colors…
three terms… if you add a fourth that’s automatically alpha and
so this particular color right here is actually a 50% transparent red. Now the
same fill in Swift would look a little bit different. You would modify the fill
of an object and you would pump in the color like this and you would see it’s
red 255 green 0 blue 0 and alpha of 0.5 and so you can see the Swift version
is a little bit wordier… a little bit longer but a little bit
clearer and that’s it for this video and I will
see you in the next one.

Leave a Reply

Your email address will not be published. Required fields are marked *