From OpenHatch wiki
Jump to: navigation, search
Colorwall matrix.png


[edit] Project

Program graphical effects for a ColorWall.

[edit] Goals

  • Have fun experimenting with and creating graphical effects.
  • Practice using functions and classes.
  • Get experience with graphics programming using the Tkinter GUI toolkit.
  • Practice reading other people's code.

[edit] Download source code

  • Install git if you have not already done so.
  • Clone source
  •  git clone 

[edit] Project steps

[edit] 1. Learn about HSV values

Run the ColorWall effects again with


The names of the effects are printed to the terminal as they are run. Pay particular attention to the first 4 effects:

  • SolidColorTest
  • HueTest
  • SaturationTest
  • ValueTest

In all of these effects, a tuple hsv containing the hue, saturation, and value describing a color are passed to self.wall.set_pixel to change the color of a single pixel on the wall.

What are the differences between these tests? Given these difference and how they are expressed visually, how does varying hue, saturation, or value change a color?

Check your understanding: what saturation and value would you guess firetruck red have?

Step 1 resources:

[edit] 2. Examine Effect and the interface its subclasses provide

All of the effects inherit from the Effect class. Examine this class and its __init__ and run methods.

What is the purpose of the __init__ method?

What is the purpose of the run method?

Open up and look at this chunk of code at the bottom of the file:

    for effect in effects_to_run:
	new_effect = effect(wall)
        print new_effect.__class__.__name__ exports an Effects list at the bottom of the file. goes through every effect in that list, creates a new instance of the effect, and invokes its run method.

Check your understanding: what would happen if you added an effect to the Effects list that didn't implement a run method? (Try it!)

Step 2 resources:

[edit] 3. Examine the nested for loop in SolidColorTest

for x in range(self.wall.width):
    for y in range(self.wall.height):
	self.wall.set_pixel(x, y, hsv)

This code loops over every pixel in the ColorWall, setting the pixel to a particular hsv value. After that for loop is over, self.wall.draw() updates the display.

Check your understanding: what would happen if you moved the self.wall.draw() to inside the inner for loop, just under self.wall.set_pixel(x, y, hsv) in SaturationTest? (Try it!)

Tip: you can run individual tests by passing their names as command line arguments (argument -e or --effects) to For example, if you only wanted to run SaturationTest, you could:

python -e SaturationTest

[edit] 4. Implement a new effect called RainbowTest

It should run for 5 seconds, cycling through the colors in the rainbow, pausing for a moment at each color.

Remember to add your effect to the Effect list at the bottom of!

Test your new effect with

python -e RainbowTest

[edit] 5. Play with the randomness in Twinkle

Walk through Twinkle. Find explanations of the random.randint and random.uniform functions in the online documentation at

Experiment with these functions at a Python prompt:

import random
random.randint(0, 1)
random.randint(0, 5)
random.uniform(-1, 1)

Then experiment with the numbers that make up the hue and re-run the effect:

python -e Twinkle

Challenge: make Twinkle twinkle with shades of blue.

[edit] 6. Implement a new effect that involves randomness!

Remember to add your effect to the Effect list at the bottom of

[edit] Bonus exercises

[edit] 1. Checkerboard

Find and change the colors used in the Checkerboards effect, and re-run the effect:

python -e Checkerboards

Then change the line

    if (x + y + i) % 2 == 0:


    if (x + y + i) % 3 == 0:

re-run the effect, and see what changed.

What other patterns can you create by tweaking the math for this effect?

[edit] 2. Matrix

Find and change the color of the columns in the Matrix effect, and re-run the effect:

python -e Matrix

Each column that we see on the wall corresponds to a Column object. Add some randomness to the color used by each column (the variable whose value you changed above) using the random.random function, re-run the effect, and see what happens.

[edit] 3. Write more of your own effects!

You have color, time, randomness, letters, and more at your disposal. Go nuts!

[edit] Congratulations!

You've read, modified, and added code to a software project that makes art out of pixels. Keep practicing!

Fireworks.png Balloons.png

Personal tools