Programming Media Art Using Processing

Margaret Noble was born in Texas, raised in San Diego, and received her key artistic training in Chicago. She holds a B.A. in Philosophy from the University of California, San Diego and an MFA in Studio and Sound Art from the School of the Art Institute of Chicago. Margaret Noble is an accomplished media producer with a background in public education, artistic production, and large-scale exhibition development. Her artworks have been exhibited nationally and internationally. Margaret Noble came to education from industry as a professional artist. Throughout her 13+ years of teaching in secondary and higher education, she has consistently supported diverse learners in producing meaningful, community driven, multimedia projects. Margaret and her students have also received several awards and recognitions for their classroom projects including features in Edutopia and Wired magazine. To learn more about Margaret Noble’s work, please visit: https://www.margaretnoble.com/

Acknowledgements and Contributor List

Author Bio

Introduction and Best Practices

Chapter 1: Designing Graphically with the Language of Code

Getting Started & Basic Overview

Lesson 1.1: Pixel Grid System

Lesson 1.2: Code and Canvas Windows

Lesson 1.3: More Shapes

Lesson 1.4: Grayscale

Lesson 1.5: Syntax, Comments, and Order of Code

Lesson 1.6: Line Commands (Stroke and No Stroke)

Lesson 1.7: Coloring Pixels

Lesson 1.8: Adding Transparency Values

Lesson 1.9: The Processing Reference – Important Resource!

Project: Geometric Design

Chapter 2: Creating Responsive Environments

Lesson 2.1: Dynamic Computer Programs

Lesson 2.2: First Animations

Lesson 2.3: Animation Trails

Lesson 2.4: Finding Exact Coordinates

Lesson 2.5: Complex Shapes

Lesson 2.6: Linking Shapes for Synched Movement

Lesson 2.7: Adding Text

Lesson 2.8: Rotating Shapes

Project: Interactive Environment

Chapter 3: Automated Animations

Lesson 3.1: Counting Variables

Lesson 3.2: Moving Objects in Multiple Directions

Lesson 3.3: Growing Shapes with the Mouse

Lesson 3.4: Println() for Debugging

Lesson 3.5: Constrain() for Stopping Animations

Lesson 3.6: Random() Opportunities

Lesson 3.7: Automated Rotations

Project: Automated Environment

Chapter 4: Animated Collages

Lesson 4.1: Preparing and Importing Imagery

Lesson 4.2: Moving Images

Lesson 4.3: Fading and Coloring Images using Tint()

Lesson 4.4: Resizing Images & Multiples

Lesson 4.5: Constraining Mouse Movements

Lesson 4.6: Void Key Pressed() and Image Rotations

Lesson 4.7: Create Fonts

Lesson 4.8: Project Optimization and noSmooth()

Project: Animated and Interactive Collage

Chapter 5: Conditional Interactions and Rollovers

Lesson 5.1: Conditional Statements and Relational Operators

Lesson 5.2: Conditional Statements with Custom Variables

Lesson 5.3: And vs. Or

Lesson 5.4: Logical Operators Defining Spaces

Lesson 5.5: Variations with Mouse and Keyboard Actions

Lesson 5.6: Two Variables: Alternating Movements

Lesson 5.7: Color Detection Using the Get() Function

Project: Rollover Animation

Chapter 6: Events and Interactions for Simple Games: Part 1

Lesson 6.1: Turning Things on with Boolean Variables

Lesson 6.2: Toggling Between Two States Using Boolean Variables

Lesson 6.3: Multiple Buttons Alternating

Lesson 6.4: Booleans Working with Counting Variables

Lesson 6.5: Specific Keyboard Interactions

Lesson 6.6: Creating a Walking Character

Lesson 6.7: Boundaries

Chapter 7: Events and Interactions for Simple Games: Part 2

Lesson 7.1: Timers

Lesson 7.2: Continuous Motion Key Controls

Lesson 7.3: For Loops are Efficient

Lesson 7.4: Color Detection with For Loops

Lesson 7.5: Game Creation from Keys, Loops, and Color Detection

Lesson 7.6: Image Collisions with the Distance() Function

Lesson 7.7: Two Players, Directional Movement, and Jumping!

Chapter 8: Multilevel Architectures and Arrays

Lesson 8.1: Basic Levels Architecture

Lesson 8.2: States within Levels

Lesson 8.3: Arrays

Lesson 8.4: Image Arrays

Lesson 8.5: Player Options

Lesson 8.6: Choice Based Projects

Conclusion

Final Project: Multilevel Interactive Experience