PaA - Colours and Computers

Background

Usually, working with computer graphics means that you have access to about 16 millions different colors. What makes this amazing is that you can select any of these colors by mixing three basic colours:

• How much Red? From 0 to 255
• How much Green? From 0 to 255
• How much Blue? From 0 to 255

This is called RGB encoding. Here is an online tool to find out what RGB code matches any given color.

The RGB palette

Why 16 millions?

Here are some fun facts about colors. There are three colour channel: Red, Green and Blue. Each channel uses 1 byte of memory (which contains 8 bits). This is just enough to store a number between 0 and 255 (or \(2^8\) ). We'll denote colours as follow: $$color = (Red, Green, Blue)$$

For example, pure red is defined as such: $$red = (255, 0 , 0)$$ Pure white is a combination of all colours at the same time: $$white = (255, 255 , 255)$$ And Black is when there are no colours in any of the colour channel: $$black = (0, 0, 0)$$

To create colours in Python using the graphics library, use the following function:

my_red = color_rgb(255, 0, 0)

So, for each possible of value of Red (256 different values), there are 256 possible values for Green. That is a big enough number, 65,536 colors in fact. And for each of these 65,536 colors, there is 256 possible values of Blue. In other terms: $$n_{colours} = 256 \times 256 \times 256 = 256^3 = 16,777,216$$

Your eyes and brain can't even distinguish 16 million colours. You eye actually can distinguish only about 7 millions.

Learn by doing

The best way to get a grasp of RGB, which can be tricky, is to play with a colour picker. Click on colours that you like and look at the corresponding RGB triples of values. What is the RGB value for yellow?

Interesting artwork often selects colours that harmonize well. Here is a tool to generate RGB code of harmonious colours from a single RGB code.

Python trick: A random color

Random colours can be fun to use because you never know what you'll get each time that you run your script. Here is a code snippet to generate a random color.

from random import randint

from graphics import *

my_color = color_rgb(randint(0,255), randint(0,255), randint(0,255))

PaA: Hacking a circle

This hackable file is the most simple file using the graphics library. It creates a window, then adds a circle on it. It looks like this:

Understanding the onecircle.py script

First, let's ake a look a the file:

# Import everything from Graphics
from graphics import *

# Build a window
win = GraphWin('Test 1', 600, 600)
win.setBackground('white')

# Draw one circle
poly = Circle( Point( 300, 300 ), 200 )
poly.setFill( 'red' )
poly.draw(win)

# Add some text
mytext = Text( Point(450, 520), 'by Random Bytes' )
mytext.setFill('red')
mytext.setSize( 30 )
mytext.draw(win)

# Wait to stop
win.getMouse()
win.close()

Step 1 - Import useful code from other files

Python is such a useful language because it is possible to borrow code from other file,to do pretty much anything that you can think about. In this file, we need to tell our script to import all objects and function from the file graphics.py . Without this import statement, it wouldn't not be possible to create a window object (GraphWin), a point (Point), a circle (Circle) and some on-screen text (Text). The import code is made here of a single line:

from graphics import *

Coordinate system for 2D computer graphics

Computers have a peculiar way to orient the axis of their coordinate system. It looks like this:

Basics

This means that the Upper-Left corner of an image or a window is (0,0).  In this type of programming, the unit along the axes is the pixel. When you create images, try using common image formats such as 800X480, or go for a square image of size 600X600.

With the graphics.py library, you can create a 800 pixels wide by 480 pixels high image using:

 mywindow = GraphWin( "Window Name", 800, 600 )

June 13th - Invitation

Computer programming as art

Overview

In this workshop, you will learn to use the Python language and a simple graphic library to create artwork. Whether you want to draw something in particular, or explore the use of randomness, is up to you!

When, where?

June 13th 2015, 13:00 to 15:00. Teaching Lab 2, Goldberg Building, 6050 University Avenue. The workshop is now full, but you may let me know if you want to be contacted later with information for the next session.

Who will benefit from this workshop?

This is mainly intended for youth who want to try something else with mathematics. I don't want to set an age range, but to get the most out of the workshop, you should be capable of doing the following:

• Create folders and operate the basics of software interface (Open, save, use menus).
• Reading skills good enough for short, technical instructions.
• Type on a keyboard well enough that it won't slow you down.
• Understand how cartesian coordinates work (video)
• Understand the concept of variable as values. For example: if a=15, then a-20=-5
• Can focus on work for 90 minutes.

We will do a short activity on cartesian coordinates before we hit the computers to make sure that everyone is comfortable.

Parents: This is meant to be fun. However, it is important to respect these guidelines to ensure that your kid/teen gets something valuable out of the workshop. I strongly encourage parent participation so you are part of the learning process.