book

Getting Started with p5.js

by Lauren McCarthy, Casey Reas, Ben Fry

October 2015

Beginner

246 pages

4h 6m

English

Make: Community

Read now

Unlock full access

How This Book Is OrganizedWho This Book Is ForConventions Used in This BookUsing Code ExamplesSafari® Books OnlineHow to Contact UsAcknowledgments
Sketching and PrototypingFlexibilityGiantsFamily TreeJoin In
EnvironmentDownload and File SetupYour First ProgramExample 2-1: Draw an EllipseExample 2-2: Make CirclesThe ConsoleMaking a New ProjectExamples and Reference
The CanvasExample 3-1: Create a CanvasExample 3-2: Draw a PointBasic ShapesExample 3-3: Draw a LineExample 3-4: Draw Basic ShapesExample 3-5: Draw a RectangleExample 3-6: Draw an EllipseExample 3-7: Draw Part of an EllipseExample 3-8: Draw with DegreesExample 3-9: Use angleModeDrawing OrderExample 3-10: Control Your Drawing OrderExample 3-11: Put It in ReverseShape PropertiesExample 3-12: Set Stroke WeightExample 3-13: Set Stroke AttributesColorExample 3-14: Paint with GraysExample 3-15: Control Fill and StrokeExample 3-16: Draw with ColorExample 3-17: Set TransparencyCustom ShapesExample 3-18: Draw an ArrowExample 3-19: Close the GapExample 3-20: Create Some CreaturesCommentsRobot 1: Draw
First VariablesExample 4-1: Reuse the Same ValuesExample 4-2: Change ValuesMaking Variablesp5.js VariablesExample 4-3: Adjust the Canvas, See What FollowsA Little MathExample 4-4: Basic ArithmeticRepetitionExample 4-5: Do the Same Thing Over and OverExample 4-6: Use a for LoopExample 4-7: Flex Your for Loop’s MusclesExample 4-8: Fanning Out the LinesExample 4-9: Kinking the LinesExample 4-10: Embed One for Loop in AnotherExample 4-11: Rows and ColumnsExample 4-12: Pins and LinesExample 4-13: Halftone DotsRobot 2: Variables
Once and ForeverExample 5-1: The draw() FunctionExample 5-2: The setup() FunctionExample 5-3: setup(), Meet draw()FollowExample 5-4: Track the MouseExample 5-5: The Dot Follows YouExample 5-6: Draw ContinuouslyExample 5-7: Set Thickness on the FlyExample 5-8: Easing Does ItExample 5-9: Smooth Lines with EasingClickExample 5-10: Click the MouseExample 5-11: Detect When Not ClickedExample 5-12: Multiple Mouse ButtonsLocationExample 5-13: Find the CursorExample 5-14: The Bounds of a CircleExample 5-15: The Bounds of a RectangleTypeExample 5-16: Tap a KeyExample 5-17: Draw Some LettersExample 5-18: Check for Specific KeysExample 5-19: Move with Arrow KeysTouchExample 5-20: Touch the ScreenExample 5-21: Track the FingerMapExample 5-22: Map Values to a RangeExample 5-23: Map with the map() FunctionRobot 3: Response
TranslateExample 6-1: Translating LocationExample 6-2: Multiple TranslationsRotateExample 6-3: Corner RotationExample 6-4: Center RotationExample 6-5: Translation, Then RotationExample 6-6: Rotation, Then TranslationExample 6-7: An Articulating ArmScaleExample 6-8: ScalingExample 6-9: Keeping Strokes ConsistentPush and PopExample 6-10: Isolating TransformationsRobot 4: Translate, Rotate, Scale
ImagesExample 7-1: Load an ImageExample 7-2: Load More ImagesExample 7-3: Mousing Around with ImagesExample 7-4: Transparency with a GIFExample 7-5: Transparency with a PNGExample 7-6: Displaying an SVG ImageAsynchronicityExample 7-7: Demonstrating AsynchronicityExample 7-8: Loading with a CallbackFontsExample 7-9: Drawing with FontsExample 7-10: Use a WebfontExample 7-11: Load a Custom FontExample 7-12: Set the Text Stroke and FillExample 7-13: Draw Text in a BoxExample 7-13: Store Text in a VariableRobot 5: Media
FramesExample 8-1: See the Frame RateExample 8-2: Set the Frame RateSpeed and DirectionExample 8-3: Move a ShapeExample 8-4: Wrap AroundExample 8-5: Bounce Off the WallTweeningExample 8-6: Calculate Tween PositionsRandomExample 8-7: Generate Random ValuesExample 8-8: Draw RandomlyExample 8-9: Move Shapes RandomlyTimersExample 8-10: Time PassesExample 8-11: Triggering Timed EventsCircularExample 8-12: Sine Wave ValuesExample 8-13: Sine Wave MovementExample 8-14: Circular MotionExample 8-15: SpiralsRobot 6: Motion
Function BasicsExample 9-1: Roll the DiceExample 9-2: Another Way to RollMake a FunctionExample 9-3: Draw the OwlExample 9-4: Two’s CompanyExample 9-5: An Owl FunctionExample 9-6: Increasing the Surplus PopulationExample 9-7: Owls of Different SizesReturn ValuesExample 9-8: Return a ValueRobot 7: Functions

Properties and MethodsDefine a ConstructorCreate ObjectsExample 10-1: Make an ObjectExample 10-2: Make Multiple ObjectsRobot 8: Objects
From Variables to ArraysExample 11-1: Many VariablesExample 11-2: Too Many VariablesExample 11-3: Arrays, Not VariablesMake an ArrayExample 11-4: Declare and Assign an ArrayExample 11-5: Assigning to an Array in One GoExample 11-6: Revisiting the First ExampleRepetition and ArraysExample 11-7: Filling an Array in a for LoopExample 11-8: Track Mouse MovementsArrays of ObjectsExample 11-9: Managing Many ObjectsExample 11-10: Sequences of ImagesRobot 9: Arrays
Data SummaryTablesExample 12-1: Read the TableExample 12-2: Draw the TableExample 12-3: 29,740 CitiesJSONExample 12-4: Read a JSON FileExample 12-5: Visualize Data from a JSON FileNetwork Data and APIsExample 12-6: Parsing the Weather DataExample 12-7: Chaining MethodsRobot 10: Data
p5.soundExample 13-1: Play a SampleExample 13-2: Listen to a MicExample 13-3: Create a Sine Wavep5.domExample 13-4: Access the WebcamExample 13-5: Create a SliderExample 13-6: Create an Input Box
Functions and ParametersCommentsUppercase and LowercaseStyleConsoleOne Step at a Time

Overview

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: