
Getting Started with p5.js
Beschreibung
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
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
Weitere Details
Weitere Ausgaben
Andere Ausgaben

Inhalt
- Intro
- Copyright
- Table of Contents
- 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
- Chapter 1. Hello
- Sketching and Prototyping
- Flexibility
- Giants
- Family Tree
- Join In
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Appendix A. Coding Tips
- Functions and Parameters
- Comments
- Uppercase and Lowercase
- Style
- Console
- One Step at a Time
- Appendix B. Order of Operations
- Appendix C. Variable Scope
- Index
Systemvoraussetzungen
Dateiformat: PDF
Kopierschutz: Adobe-DRM (Digital Rights Management)
Systemvoraussetzungen:
- Computer (Windows; MacOS X; Linux): Installieren Sie bereits vor dem Download die kostenlose Software Adobe Digital Editions (siehe E-Book Hilfe).
- Tablet/Smartphone (Android; iOS): Installieren Sie bereits vor dem Download die kostenlose App Adobe Digital Editions oder die App PocketBook (siehe E-Book Hilfe).
- E-Book-Reader: Bookeen, Kobo, Pocketbook, Sony, Tolino u.v.a.m. (nicht Kindle)
Das Dateiformat PDF zeigt auf jeder Hardware eine Buchseite stets identisch an. Daher ist eine PDF auch für ein komplexes Layout geeignet, wie es bei Lehr- und Fachbüchern verwendet wird (Bilder, Tabellen, Spalten, Fußnoten). Bei kleinen Displays von E-Readern oder Smartphones sind PDF leider eher nervig, weil zu viel Scrollen notwendig ist.
Mit Adobe-DRM wird hier ein „harter” Kopierschutz verwendet. Wenn die notwendigen Voraussetzungen nicht vorliegen, können Sie das E-Book leider nicht öffnen. Daher müssen Sie bereits vor dem Download Ihre Lese-Hardware vorbereiten.
Bitte beachten Sie: Wir empfehlen Ihnen unbedingt nach Installation der Lese-Software diese mit Ihrer persönlichen Adobe-ID zu autorisieren!
Weitere Informationen finden Sie in unserer E-Book Hilfe.