ColorWall

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

Contents

[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 git@github.com:jesstess/ColorWall.git 

[edit] Project steps

[edit] 1. Learn about HSV values

Run the ColorWall effects again with

python run.py

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 run.py 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__
        new_effect.run()

effects.py exports an Effects list at the bottom of the file. run.py 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 run.py. For example, if you only wanted to run SaturationTest, you could:

python run.py -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 effects.py!

Test your new effect with

python run.py -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 http://docs.python.org/library/random.html.

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 run.py -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 effects.py.

[edit] Bonus exercises

[edit] 1. Checkerboard

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

python run.py -e Checkerboards

Then change the line

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

to

    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 run.py -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