Table of Contents
Title Page Title Page
2. Starting to Code 7 2. Starting to Code 7
Your First Program
Example 2-1: Draw an Ellipse
Example 2-2: Make Circles
Show
Save and New
Share
Examples and Reference
3. Draw
The Display Window
Example 3-1: Draw a Window
Example 3-2: Draw a Point
Basic Shapes
Example 3-3: Draw a Line
Example 3-4: Draw Basic Shapes
Example 3-5: Draw a Rectangle
Example 3-6: Draw an Ellipse
Example 3-7: Draw Part of an Ellipse
Example 3-8: Draw with Degrees
Drawing Order
Example 3-9: Control Your Drawing Order
Example 3-10: Put It in Reverse
Shape Properties
Example 3-11: Set Stroke Weight
Example 3-12: Set Stroke Caps
Example 3-13: Set Stroke Joins
Drawing Modes
Example 3-14: On the Corner
Color
Example 3-15: Paint with Grays
Example 3-16: Control Fill and Stroke
Example 3-17: Draw with Color
Example 3-18: Set Transparency
Custom Shapes
Example 3-19: Draw an Arrow
Example 3-20: Close the Gap
Example 3-21: Create Some Creatures
Comments
Robot 1: Draw
4. Variables
First Variables
Example 4-1: Reuse the Same Values
Example 4-2: Change Values
Making Variables
Processing Variables
Example 4-3: Adjust the Size, See What Follows
A Little Math
Example 4-4: Basic Arithmetic
Repetition
Example 4-5: Do the Same Thing Over and Over
Example 4-6: Use a for Loop
Example 4-7: Flex Your for Loop’s Muscles
Example 4-8: Fanning Out the Lines
Example 4-9: Kinking the Lines
Example 4-10: Embed One for Loop in Another
Example 4-11: Rows and Columns
Example 4-12: Pins and Lines
Example 4-13: Halftone Dots
Robot 2: Variables
5. Response
Once and Forever
Example 5-1: The draw() Function
Example 5-2: The setup() Function
Example 5-3: Global Variable
Follow
Example 5-4: Track the Mouse
Example 5-5: The Dot Follows You
Example 5-6: Draw Continuously
Example 5-7: Set Line Thickness
Example 5-8: Easing Does It
Example 5-9: Smooth Lines with Easing
Click
Example 5-10: Click the Mouse
Example 5-11: Detect When Not Clicked
Example 5-12: Multiple Mouse Buttons
Location
Example 5-13: Find the Cursor
Example 5-14: The Bounds of a Circle
Example 5-15: The Bounds of a Rectangle
Type
Example 5-16: Tap a Key
Example 5-17: Draw Some Letters
Example 5-18: Check for Specific Keys
Example 5-19: Move with Arrow Keys
Map
Example 5-20: Map Values to a Range
Example 5-21: Map with the map() Function
Robot 3: Response
6. Translate, Rotate, Scale
Translate
Example 6-1: Translating Location
Example 6-2: Multiple Translations
Rotate
Example 6-3: Corner Rotation
Example 6-4: Center Rotation
Example 6-5: Translation, then Rotation
Example 6-6: Rotation, Then Translation
Example 6-7: An Articulating Arm
Scale
Example 6-8: Scaling
Example 6-9: Keeping Strokes Consistent
Push and Pop
Example 6-10: Isolating Transformations
Robot 4: Translate, Rotate, Scale
7. Media
Images
Example 7-1: Load an Image
Example 7-2: Load More Images
Example 7-3: Mousing Around with Images
Example 7-4: Transparency with a GIF
Example 7-5: Transparency with a PNG
Fonts
Example 7-6: Drawing with Fonts
Example 7-7: Draw Text in a Box
Example 7-8: Store Text in a String
Shapes
Example 7-9: Draw with Shapes
Example 7-10: Scaling Shapes
Example 7-11: Creating a New Shape
Robot 5: Media
8. Motion
Frames
Example 8-1: See the Frame Rate
Example 8-2: Set the Frame Rate
Speed and Direction
Example 8-3: Move a Shape
Example 8-4: Wrap Around
Example 8-5: Bounce Off the Wall
Tweening
Example 8-6: Calculate Tween Positions
Random
Example 8-7: Generate Random Values
Example 8-8: Draw Randomly
Example 8-9: Move Shapes Randomly
Timers
Example 8-10: Time Passes
Example 8-11: Triggering Timed Events
Circular
Example 8-12: Sine Wave Values
Example 8-13: Sine Wave Movement
Example 8-14: Circular Motion
Example 8-15: Spirals
Robot 6: Motion
9. Functions
Function Basics
Example 9-1: Roll the Dice
Example 9-2: Another Way to Roll
Make a Function
Example 9-3: Draw the Owl
Example 9-4: Two’s Company
Example 9-5: An Owl Function
Example 9-6: Increasing the Surplus Population
Example 9-7: Owls of Different Sizes
Return Values
Example 9-8: Return a Value
Robot 7: Functions
10. Objects
Fields and Methods
Define a Class
Create Objects
Example 10-1: Make an Object
Example 10-2: Make Multiple Objects
Tabs
Robot 8: Objects
11. Arrays
From Variables to Arrays
Example 11-1: Many Variables
Example 11-2: Too Many Variables
Example 11-3: Arrays, Not Variables
Make an Array
Example 11-4: Declare and Assign an Array
Example 11-5: Compact Array Assignment
Example 11-6: Assigning to an Array in One Go
Example 11-7: Revisiting the First Example
Repetition and Arrays
Example 11-8: Filling an Array in a for Loop
Example 11-9: Track Mouse Movements
Arrays of Objects
Example 11-10: Managing Many Objects
Example 11-11: A New Way to Manage Objects
Example 11-12: Sequences of Images
Robot 9: Arrays
12. Data
Data Summary
Tables
Example 12-1: Read the Table
Example 12-2: Draw the Table
Example 12-3: 29,740 Cities
JSON
Example 12-4: Read a JSON File
Example 12-5: Visualize Data from a JSON File
Network Data and APIs
Example 12-6: Parsing the Weather Data
Example 12-7: Chaining Methods
Robot 10: Data
13. Extend
Sound
Example 13-1: Play a Sample
Example 13-2: Listen to a Microphone
Example 13-3: Create a Sine Wave
Image and PDF Export
Example 13-4: Saving Images
Example 13-5: Draw to a PDF
Hello, Arduino
Example 13-6: Read a Sensor
Example 13-7: Read Data from the Serial Port
Example 13-8: Visualizing the Data Stream
Example 13-9: Another Way to Look at the Data