Getting Started with p5.js

Getting Started with p5.js

Released
Publisher(s): Make: Community
ISBN: None

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

None

Table of contents

  1. Preface
    1. How This Book Is Organized
    2. Who This Book Is For
    3. Conventions Used in This Book
    4. Using Code Examples
    5. Safari® Books Online
    6. How to Contact Us
    7. Acknowledgments
  2. 1. Hello
    1. Sketching and Prototyping
    2. Flexibility
    3. Giants
    4. Family Tree
    5. Join In
  3. 2. Starting to Code
    1. Environment
    2. Download and File Setup
    3. Your First Program
      1. Example 2-1: Draw an Ellipse
      2. Example 2-2: Make Circles
    4. The Console
    5. Making a New Project
    6. Examples and Reference
  4. 3. Draw
    1. The Canvas
      1. Example 3-1: Create a Canvas
      2. Example 3-2: Draw a Point
    2. Basic Shapes
      1. Example 3-3: Draw a Line
      2. Example 3-4: Draw Basic Shapes
      3. Example 3-5: Draw a Rectangle
      4. Example 3-6: Draw an Ellipse
      5. Example 3-7: Draw Part of an Ellipse
      6. Example 3-8: Draw with Degrees
      7. Example 3-9: Use angleMode
    3. Drawing Order
      1. Example 3-10: Control Your Drawing Order
      2. Example 3-11: Put It in Reverse
    4. Shape Properties
      1. Example 3-12: Set Stroke Weight
      2. Example 3-13: Set Stroke Attributes
    5. Color
      1. Example 3-14: Paint with Grays
      2. Example 3-15: Control Fill and Stroke
      3. Example 3-16: Draw with Color
      4. Example 3-17: Set Transparency
    6. Custom Shapes
      1. Example 3-18: Draw an Arrow
      2. Example 3-19: Close the Gap
      3. Example 3-20: Create Some Creatures
    7. Comments
    8. Robot 1: Draw
  5. 4. Variables
    1. First Variables
      1. Example 4-1: Reuse the Same Values
      2. Example 4-2: Change Values
    2. Making Variables
    3. p5.js Variables
      1. Example 4-3: Adjust the Canvas, See What Follows
    4. A Little Math
      1. Example 4-4: Basic Arithmetic
    5. Repetition
      1. Example 4-5: Do the Same Thing Over and Over
      2. Example 4-6: Use a for Loop
      3. Example 4-7: Flex Your for Loop’s Muscles
      4. Example 4-8: Fanning Out the Lines
      5. Example 4-9: Kinking the Lines
      6. Example 4-10: Embed One for Loop in Another
      7. Example 4-11: Rows and Columns
      8. Example 4-12: Pins and Lines
      9. Example 4-13: Halftone Dots
    6. Robot 2: Variables
  6. 5. Response
    1. Once and Forever
      1. Example 5-1: The draw() Function
      2. Example 5-2: The setup() Function
      3. Example 5-3: setup(), Meet draw()
    2. Follow
      1. Example 5-4: Track the Mouse
      2. Example 5-5: The Dot Follows You
      3. Example 5-6: Draw Continuously
      4. Example 5-7: Set Thickness on the Fly
      5. Example 5-8: Easing Does It
      6. Example 5-9: Smooth Lines with Easing
    3. Click
      1. Example 5-10: Click the Mouse
      2. Example 5-11: Detect When Not Clicked
      3. Example 5-12: Multiple Mouse Buttons
    4. Location
      1. Example 5-13: Find the Cursor
      2. Example 5-14: The Bounds of a Circle
      3. Example 5-15: The Bounds of a Rectangle
    5. Type
      1. Example 5-16: Tap a Key
      2. Example 5-17: Draw Some Letters
      3. Example 5-18: Check for Specific Keys
      4. Example 5-19: Move with Arrow Keys
    6. Touch
      1. Example 5-20: Touch the Screen
      2. Example 5-21: Track the Finger
    7. Map
      1. Example 5-22: Map Values to a Range
      2. Example 5-23: Map with the map() Function
    8. Robot 3: Response
  7. 6. Translate, Rotate, Scale
    1. Translate
      1. Example 6-1: Translating Location
      2. Example 6-2: Multiple Translations
    2. Rotate
      1. Example 6-3: Corner Rotation
      2. Example 6-4: Center Rotation
      3. Example 6-5: Translation, Then Rotation
      4. Example 6-6: Rotation, Then Translation
      5. Example 6-7: An Articulating Arm
    3. Scale
      1. Example 6-8: Scaling
      2. Example 6-9: Keeping Strokes Consistent
    4. Push and Pop
      1. Example 6-10: Isolating Transformations
    5. Robot 4: Translate, Rotate, Scale
  8. 7. Media
    1. Images
      1. Example 7-1: Load an Image
      2. Example 7-2: Load More Images
      3. Example 7-3: Mousing Around with Images
      4. Example 7-4: Transparency with a GIF
      5. Example 7-5: Transparency with a PNG
      6. Example 7-6: Displaying an SVG Image
    2. Asynchronicity
      1. Example 7-7: Demonstrating Asynchronicity
      2. Example 7-8: Loading with a Callback
    3. Fonts
      1. Example 7-9: Drawing with Fonts
      2. Example 7-10: Use a Webfont
      3. Example 7-11: Load a Custom Font
      4. Example 7-12: Set the Text Stroke and Fill
      5. Example 7-13: Draw Text in a Box
      6. Example 7-13: Store Text in a Variable
    4. Robot 5: Media
  9. 8. Motion
    1. Frames
      1. Example 8-1: See the Frame Rate
      2. Example 8-2: Set the Frame Rate
    2. Speed and Direction
      1. Example 8-3: Move a Shape
      2. Example 8-4: Wrap Around
      3. Example 8-5: Bounce Off the Wall
    3. Tweening
      1. Example 8-6: Calculate Tween Positions
    4. Random
      1. Example 8-7: Generate Random Values
      2. Example 8-8: Draw Randomly
      3. Example 8-9: Move Shapes Randomly
    5. Timers
      1. Example 8-10: Time Passes
      2. Example 8-11: Triggering Timed Events
    6. Circular
      1. Example 8-12: Sine Wave Values
      2. Example 8-13: Sine Wave Movement
      3. Example 8-14: Circular Motion
      4. Example 8-15: Spirals
    7. Robot 6: Motion
  10. 9. Functions
    1. Function Basics
      1. Example 9-1: Roll the Dice
      2. Example 9-2: Another Way to Roll
    2. Make a Function
      1. Example 9-3: Draw the Owl
      2. Example 9-4: Two’s Company
      3. Example 9-5: An Owl Function
      4. Example 9-6: Increasing the Surplus Population
      5. Example 9-7: Owls of Different Sizes
    3. Return Values
      1. Example 9-8: Return a Value
    4. Robot 7: Functions
  11. 10. Objects
    1. Properties and Methods
    2. Define a Constructor
    3. Create Objects
      1. Example 10-1: Make an Object
      2. Example 10-2: Make Multiple Objects
    4. Robot 8: Objects
  12. 11. Arrays
    1. From Variables to Arrays
      1. Example 11-1: Many Variables
      2. Example 11-2: Too Many Variables
      3. Example 11-3: Arrays, Not Variables
    2. Make an Array
      1. Example 11-4: Declare and Assign an Array
      2. Example 11-5: Assigning to an Array in One Go
      3. Example 11-6: Revisiting the First Example
    3. Repetition and Arrays
      1. Example 11-7: Filling an Array in a for Loop
      2. Example 11-8: Track Mouse Movements
    4. Arrays of Objects
      1. Example 11-9: Managing Many Objects
      2. Example 11-10: Sequences of Images
    5. Robot 9: Arrays
  13. 12. Data
    1. Data Summary
    2. Tables
      1. Example 12-1: Read the Table
      2. Example 12-2: Draw the Table
      3. Example 12-3: 29,740 Cities
    3. JSON
      1. Example 12-4: Read a JSON File
      2. Example 12-5: Visualize Data from a JSON File
    4. Network Data and APIs
      1. Example 12-6: Parsing the Weather Data
      2. Example 12-7: Chaining Methods
    5. Robot 10: Data
  14. 13. Extend
    1. p5.sound
      1. Example 13-1: Play a Sample
      2. Example 13-2: Listen to a Mic
      3. Example 13-3: Create a Sine Wave
    2. p5.dom
      1. Example 13-4: Access the Webcam
      2. Example 13-5: Create a Slider
      3. Example 13-6: Create an Input Box
  15. A. Coding Tips
    1. Functions and Parameters
    2. Comments
    3. Uppercase and Lowercase
    4. Style
    5. Console
    6. One Step at a Time
  16. B. Order of Operations
  17. C. Variable Scope
  18. Index

Product information

  • Title: Getting Started with p5.js
  • Author(s):
  • Release date:
  • Publisher(s): Make: Community
  • ISBN: None