Getting Started with p5.js

Höfundar: Lauren McCarthy; Casey Reas; Ben Fry (Útgáfa: 1)
Getting Started with p5.js

Kaup valmöguleikar

With p5. js, you can think of your entire Web browser as your canvas for sketching with code! Learn programming the fun way--by sketching with interactive computer graphics! Getting Started with p5. js contains techniques that can be applied to creating games, animations, and interfaces. p5. js is a new interpretation of Processing written in JavaScript that makes it easy to interact with HTML5 objects, including text, input, video, webcam, and sound.

Like its older sibling Processing, p5. js makes coding accessible for artists, designers, educators, and beginners. Written by the lead p5. js developer and the founders of Processing, this book provides an introduction to the creative possibilities of today's Web, using JavaScript and HTML. With Getting Started with p5. js, you'll: Quickly learn programming basics, from variables to objects Understand the fundamentals of computer graphics Create interactive graphics with easy-to-follow projects Learn to apply data visualization techniques Capture and manipulate webcam audio and video feeds in the browser.

Nánar um bókina

Útgefandi
O'Reilly Media, Inc.
ISBN
9781457186738
Print ISBN
9781457186776
Format
ePub
Útgáfa
1
Höfundar
Lauren McCarthy; Casey Reas; Ben Fry
Tungumál
English
Útgefið
20151012
Prent takmörkun á líftíma
100
Prent takmörkun
2
Afritunar takmörkun
2

Kaflar

  • 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