Print-to-Digital Poster Translation in Processing
Posted
Jake Hicks - Herb Garden poster translation
Sean Maykrantz - Hypermedia class poster translation
Kyle Haas - Vivo in Typo poster translation
| Educator/s: | Jacob DeGeal |
|---|---|
| Institution: | University of Baltimore |
| Level: | Graduate, Undergraduate |
| Duration: | 1 week |
| Category: | Advertising, Animation, Graphic Design, Interaction Design, Motion, Visual Communication |
| Filed Under: | BA Program, Business, Color Theory, Community College, Design Futures (Designer of 2025), Digital, Distance Learning, Experimental, Form-making, Four-year Program, Grids, Human-Computer Interaction, Iconography, Interdisciplinary, Multidisciplinary, Online Learning, Poster, Process, Semiotics, Technology, Two-year Program, Visualization, Workshop |
| Bookmark Project | |
Project Brief
Re-imagine a print poster in Processing.
Find a poster in real life (don’t Google it). Rip it off the wall or take a photo of it. Reimagine the content of the poster as an interactive or time-based medium. Think of this poster taking the form of a digital kiosk, or a web banner ad.
Browse the examples page on the processing site. You may sample anything from this page as long you document it with your final deliverable.
Your final poster must include:
- One draw()function that demonstrates constant interaction or motion that doesn’t stop.
- A variable
- A conditional if() statement
- A for() loop.
- Most or all of the important text. Don’t worry about any fine print, but try to convey the same information as the print poster.
- Recreating imagery is not required.
Learning Objectives
- Understand and apply the basic syntax of Processing code
- Combine and troubleshoot existing code snippets
- Interpret information and design elements into a digital interactive medium
Deliverables
- One native Processing file, saved as a .pde
- A scan or pic of the original print poster
- Link to sampled code
Readings/Resources
- Processing Examples (Processing)
- Getting Started Tutorial (Processing)
- Typography (Processing)
- To the brain, reading computer code is not the same as reading language (MIT)
Reflections
I was really pleased with how the students interpreted a print medium into an interactive space. This project is preceded by two weeks of in-class workshops and small assignments using Processing, so they had a little bit of practice but certainly weren't experts yet. The expectation for this project is not for them to write completely raw code from scratch, but to understand the syntax enough to correctly combine existing code and find interesting interactive results. The print poster is just a content and design prompt to provide direction for creative thinking. One week proved to be a bit of a tight squeeze, so if you can afford another week for check-ins and troubleshooting, that would help.
