Code Toolkit: Python, Spring 2025

Week 3 — Homework assignment

due: Thursday, February 13, 8pm

Review this week's lecture notes.

An abstract interaction. Using Processing's interactive mode, fill the window with a dynamic, interactive, kinetic composition that is responsive to the user's mouse. Try to create something that is expresive, so that the user's movements and gestures are represented in the visual output.

Start with the two code blocks that form the basis of a new interactive sketch. You can use this as a starting point:
```
# Variable declarations here

def setup():
    # Put size() here and other one-time code

def draw():

    # Assign values to your variables here, using
    # mouseX and mouseY, as well as possibly
    # pmouseX and pmouseY, and even map()


    # Draw code here
```
Use any of the "2D Primitives" and the "Vertex" commands, as well as color, image(), and anything else with which you'd like to experiment.

Use mouseX, mouseY and map() so that your draw commands change as you move the mouse. Adjust the x and y positions, but also widths and heights, colors, etc. Can you experiment also with pmouseX and pmouseY? So maybe for example the faster the user moves the mouse, the bolder your composition becomes.

Try to do at least three of these tasks:
- Create 3 or more shapes that move together.
- Create two shapes that move in opposite directions.
- Create one shape with a size that ranges from filling the entire screen to disappearing completely.
- Create shapes that overlap and have colors that vary with some transparency to watch the interplay of colors.
- Use line() with a trig function like sin() to create patterns that resemble overlapping dials or analog clock hands
These are just suggestions — use them as a starting point for experimentation.

Experiment with putting background() inside setup() and then moving it to inside draw() or not. What happens?

Try adding the following chunk of code at the end of your sketch:
```
def keyPressed():
    saveFrame("week3-###.png")
```
and run your sketch again. Now pressing any key will create a .png image of whatever is in your window at that moment. Next week we will learn how to create more advanced user keyboard commands.
Parallax effect. Using the parallax effect map() example from class as a reference, experiment with the parallax effect. The example has three layers, maybe add more? Or use this as a basis but completely change the imagery and the look and feel of the code. The example also changes the sky color as you move the mouse. Can you create other different dynamic elements that respond to the mouse? Maybe make a sun or moon rise or fall. Or something completely different. Maybe experiment to try and find some new tricks to make the effect of distance and motion seem more or less realistic ...