Recitation 6: Animating an Interactive Poster

Working individually, you will integrate the coding elements from this week’s classes to create an animated poster for the IMA show in Processing. Requirements:

- The format of the poster should be the web format: 1024px x 768px.
- Your poster should contain graphics that change with the time.
- At least one shape should be of your own design, displayed by a function, and it need to be composed of at least three basic shapes.
- You should create with Processing all the graphic elements in your poster, this means that you are not allowed to use images or photos. Remember to take a video of your interactive poster demonstrating how it works, and upload it along with your code to the documentation blog.

Information you might need for your poster:

- Event: IMA Fall 22 End-Of-Semester Show
- Location: 8th floor
- Day: Friday December 16
- Time: 6pm to 8pm

GRAPHIC DESIGN PINTEREST REFERENCES:

https://www.pinterest.com/ameliechucky/graphic-design-poster/

ANIMATION REFERENCES:

Here are some animations you can get inspired by.

PROCESSING REFERENCE LINKS USEFUL for your animation:

Loops:

- setup()
- draw()
- while()
- for()

Variables:

- int
- float
- boolean

Transform functions:

- rotate()
- scale()
- translate()
- pushMatrix()
- popMatrix()

Other Functions:

text()
random
map
dist

Homework

Task #1: Add a Fixed Pattern

- Repeat the design you made in a grid so that it covers the entire screen. You can re-use the function you created in the recitation. The entire window of your sketch should be a repetition of your complex shape. Tip: You can watch this video explaining the way that nested loops work.
- Make sure you add some variations by adding parameters to your function. Check the patterns below for inspiration:

Task #2: Add a Random Pattern

- Start a new sketch and copy the function you created in Part 1. Display your design a hundred times in random positions on the screen.
- Use parameters to give them variation such as random sizes, random colors, random rotation, etc.

Task #3: Make it interactive

You should modify your poster in order to include some level of interaction. You can choose to use the keyboard or the mouse, either by reading the variables or by modifying the graphics when an event happens (e.g. click with the mouse, the user presses the spacebar).

You can, for example, create your own pattern by using the mouse. Draw your design every time you press the mouse in the position where you clicked, and use a press of the spacebar on your keyboard to delete everything on the screen.

INTERACTIVITY REFERENCES:

Here are some animated materials that might serve you as an inspiration for your homework:

anim_3 anim_

PROCESSING REFERENCE LINKS USEFUL for your Interaction:

Keyboard interaction:

- keyPressed
- keyPressed()
- key
- keyCode

Mouse interaction:

- mousePressed
- mousePressed()
- mouseX
- mouseY
- pmouseX
- pmouseY

Environmental variables:

- millis()
- frameCount
- width
- height

Documentation

Upload the screen recording (video) of your interactive animation along with your code (copy-as-HTML) to the documentation blog. Include both the recitation and homework in your post.

To record your screen on Mac press Shift + Command + 5
To record your screen on Windows press Windows key + G

/**
 To share your code appropriately in your blog post:
  - Select all your code -> Copy as HTML
  - In your blog post go to "Text" editor, top-right of the window.
  - Copy and switch back to "Visual"
 */

Another option is to put your code on Github Gist and paste the link in your post. If you don’t have one yet, a free Github account is totally worth getting! It’s a sometimes complicated but very useful developer tool, with a great open source community!

Write some comments about what you learned during this exercise, for example, list the most interesting functions you used or what you struggled with. Be thorough so that you can refer to these notes in the future.

You can work on the assignment on your own, or join one of the Study Sessions hosted by our amazing LAs to learn how to make this!

rainbow study session

Rainbow Group Study Sessions

Dates:

Monday Nov 7 | 5:30-6:30 pm

Wednesday Nov 9th | 5-6 pm

Location:

826 Studio