Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
Preface
How This Book Is Organized
Who This Book Is For
Conventions Used in This Book
Using Code Examples
Safari® Books Online
How to Contact Us
Acknowledgments
1. Hello
Sketching and Prototyping
Flexibility
Giants
Family Tree
Join In
2. Starting to Code
Environment
Download and File Setup
Your First Program
Example 2-1: Draw an Ellipse
Example 2-2: Make Circles
The Console
Making a New Project
Examples and Reference
3. Draw
The Canvas
Example 3-1: Create a Canvas
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
Example 3-9: Use angleMode
Drawing Order
Example 3-10: Control Your Drawing Order
Example 3-11: Put It in Reverse
Shape Properties
Example 3-12: Set Stroke Weight
Example 3-13: Set Stroke Attributes
Color
Example 3-14: Paint with Grays
Example 3-15: Control Fill and Stroke
Example 3-16: Draw with Color
Example 3-17: Set Transparency
Custom Shapes
Example 3-18: Draw an Arrow
Example 3-19: Close the Gap
Example 3-20: 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
p5.js Variables
Example 4-3: Adjust the Canvas, 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: setup(), Meet draw()
Follow
Example 5-4: Track the Mouse
Example 5-5: The Dot Follows You
Example 5-6: Draw Continuously
Example 5-7: Set Thickness on the Fly
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
Touch
Example 5-20: Touch the Screen
Example 5-21: Track the Finger
Map
Example 5-22: Map Values to a Range
Example 5-23: 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
Example 7-6: Displaying an SVG Image
Asynchronicity
Example 7-7: Demonstrating Asynchronicity
Example 7-8: Loading with a Callback
Fonts
Example 7-9: Drawing with Fonts
Example 7-10: Use a Webfont
Example 7-11: Load a Custom Font
Example 7-12: Set the Text Stroke and Fill
Example 7-13: Draw Text in a Box
Example 7-13: Store Text in a Variable
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
Properties and Methods
Define a Constructor
Create Objects
Example 10-1: Make an Object
Example 10-2: Make Multiple Objects
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: Assigning to an Array in One Go
Example 11-6: Revisiting the First Example
Repetition and Arrays
Example 11-7: Filling an Array in a for Loop
Example 11-8: Track Mouse Movements
Arrays of Objects
Example 11-9: Managing Many Objects
Example 11-10: 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
p5.sound
Example 13-1: Play a Sample
Example 13-2: Listen to a Mic
Example 13-3: Create a Sine Wave
p5.dom
Example 13-4: Access the Webcam
Example 13-5: Create a Slider
Example 13-6: Create an Input Box
A. Coding Tips
Functions and Parameters
Comments
Uppercase and Lowercase
Style
Console
One Step at a Time
B. Order of Operations
C. Variable Scope
Index
← Prev
Back
Next →
← Prev
Back
Next →