Getting Started with p5.js you own this product

prerequisites
basic JavaScript • general math
skills learned
drawing on the p5.js canvas • moving pixels to animate objects • keyboard and mouse inputs • math and animation techniques
Jon Borgman
1 week · 2-4 hours per week · BEGINNER
Included with a Manning Online subscription
try now

pro $24.99 per month

  • access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
  • choose one free eBook per month to keep
  • exclusive 50% discount on all purchases

lite $19.99 per month

  • access to all Manning books, including MEAPs!

team

5, 10 or 20 seats+ for your team - learn more

Look inside
p5.js is a fun and creative JavaScript framework that lets you create graphics and flex your artistic skills—all while using code! In this liveProject, you’ll explore and expand your drawing, animating, and interactive art skills with the p5.js framework. You’ll use the p5.js canvas and JavaScript code to create drawings, animate them, and make them interactive. The skills you develop will expand your coding creativity, and give you a solid foundation for advancing with graphic design.

project author

Jon Borgman
Jon Borgman is a Consulting Software Engineer at LexisNexis. He spends most of his days studying technology and designing enterprise software. He has spent 20+ years in the industry as an architect and team lead of agile software efforts.

prerequisites

This liveProject is for programmers who know the basics of JavaScript and are interested in exploring creative coding. To begin this liveProject, you will need to be familiar with:

TOOLS
  • Basic Javascript syntax and data structures
TECHNIQUES
  • Creating functions and objects in a JavaScript-based language
  • General math concepts
  • Learning to draw lines and shapes with grid coordinates

you will learn

In this liveProject, you’ll learn by developing interactive graphics with p5.js.

  • Drawing on the p5.js canvas
  • Moving pixels to animate objects
  • Keyboard and mouse inputs
  • Math and animation techniques

features

Self-paced
You choose the schedule and decide how much time to invest as you build your project.
Project roadmap
Each project is divided into several achievable steps.
Get Help
While within the liveProject platform, get help from other participants.
Compare with others
For each step, compare your deliverable to the solutions by the author and other participants.