Learn P5.js - Codecademy

Skip to Content Free CourseLearn p5.js

Create generative visualizations and interactive experiences with p5.js, a popular JavaScript library for creative coding.

4.34.33 out of 5 stars120 ratingsDiagonal B RegularThis course includes

• AI assistance for guided coding help
• Projects to apply new skills
• Quizzes to test your knowledge
• A certificate of completion

Start14,793 learners enrolledDiagonal B RegularThis course includes

• AI assistance for guided coding help
• Projects to apply new skills
• Quizzes to test your knowledge
• A certificate of completion

• Skill level

  Intermediate

• Time to complete

  Average based on combined completion rates — individual pacing in lessons, projects, and quizzes may vary9 hours

• Projects

  4

• Prerequisites

  3 coursesWe suggest you complete the following courses before you get started with Learn p5.js:
  • Learn HTML
  • Learn CSS
  • Learn JavaScript

About this course

p5.js is an open-source JavaScript library designed for creative coding. This course allows you to explore programming as a form of artistic expression, teaching you how to create dynamic visuals, interactive experiences, and generative designs for various creative fields like design, gaming, and architecture.

Skills you'll gain

• Creating 2D sketches and generative visuals

• Interactive animations and multimedia elements

• Using JavaScript fundamentals within p5.js

Syllabus

6 lessons • 4 projects • 4 quizzesExpand all sections

• 1

  Welcome to p5.js

  Get an introduction to creative coding and the p5.js JavaScript library.

• 2

  Introduction to Creative Coding

  Learn the fundamental concepts of p5.js and create your first p5.js sketch to draw and color shapes!

• 3

  Animation

  Turn your static p5.js sketch into animation and learn to create more complex sketches using grouping and transformation functions.

• 4

  Interaction

  Add interactivity to your p5.js sketch with mouse and keyboard functions.

• 5

  Media

  Learn how to add and manipulate media assets, such as images and videos, in your p5.js sketch.

• 6

  Next Steps

  You’ve completed the Learn p5.js course! What’s next?

• Certificate of completion available with Plus or Pro

  Earn a certificate of completion and showcase your accomplishment on your resume or LinkedIn.

Start

The platform

Hands-on learning

AI-assisted learningMake progress faster with our AI Learning Assistant, a tool that automatically understands your current course, instructions, and solution code — and gives you instant, personalized feedback.Real-world projectsTake what you're learning into the real world. Choose from guided projects that help you solidify new concepts — or test yourself with independent projects designed to build your portfolio.Job-readiness checkerSee how well your skills and experience meet the requirements for jobs you're interested in. AI generates a personalized report to show you how ready you are for your dream job and where to improve to qualify for a role.Interview simulatorUse AI to identify strengths and get personalized, actionable feedback to improve your interviewing skills. Easily see what's needed to improve your skills — no matter what stage you're at in your career.AssessmentsTest new skills as you learn them so you can better understand and apply new concepts. You'll also see which topics need more review and get practice recommendations to continue to improve.Explore features

Projects in this course

• practice Project

  Wall Drawing

  Let's create a Sol LeWitt inspired wall drawing using p5.js.
• practice Project

  Bouncing Balls

  Let's create an animation overflowing with colorful bouncing balls!
• practice Project

  Generative Art Creator

  Let's build a tool that generates visualizations using keyboard interactions with p5.js.

Diagonal A DenseMeet the creator of the courseMeet the full teamChecker DenseJiwon ShinManager of Programming at CodecademyJiwon is a Senior Curriculum Developer at Codecademy. She has created courses across the web development catalog on languages such as JavaScript, PHP, and CSS, frameworks like React and Node.js, and the Front-End Engineer Career Path. She also created courses on p5.js, build tools, and Intro to UI and UX Design. Meet the full teamGrid RegularGrid Regular

Earn a certificate of completion

Show your network you've done the work by earning a certificate of completion for each course or path you finish.

• Show proofReceive a certificate that demonstrates you've completed a course or path.
• Build a collectionThe more courses and paths you complete, the more certificates you collect.
• Share with your networkEasily add certificates of completion to your LinkedIn profile to share your accomplishments.

Learn p5.js course ratings and reviews

4.34.33 out of 5 stars120 ratings

1. 5 stars61%
2. 4 stars22%
3. 3 stars11%
4. 2 stars3%
5. 1 star4%

• Checker DenseThe progress I have made since starting to use codecademy is immense! I can study for short periods or long periods at my own convenience - mostly late in the evenings.ChrisCodecademy Learner @ USA
• Checker DenseI felt like I learned months in a week. I love how Codecademy uses learning by practice and gives great challenges to help the learner to understand a new concept and subject.RodrigoCodecademy Learner @ UK
• Checker DenseBrilliant learning experience. Very interactive. Literally a game changer if you're learning on your own.John-AndrewCodecademy Learner @ USA

Our learners work at

• Google Logo
• Meta Logo
• Apple Logo
• EA Logo
• Amazon Logo
• IBM Logo
• Microsoft Logo
• Reddit Logo
• Spotify Logo
• Uber Logo
• YouTube Logo
• Instagram Logo

Join over 50 million learners and start Learn p5.js today!

Start

Looking for something else?

Related resources

• Article

  What is a p5.js Script? Complete Setup Guide

  Learn what a p5.js script is, how it works, its different types, and how to set up your first project locally in this beginner-friendly guide.
• Article

  How to Create Flutter Animations: Complete Tutorial

  Master Flutter animations: build widget transitions, animated backgrounds, and number counters with working code examples.
• Article

  Mastering Tailwind Animations for Beginners

  Learn how to use Tailwind CSS to create attractive website animations.

Related courses and paths

• Free course

  Learn p5.js: Fundamentals

  Generate visualizations and interactive experiences with p5.js, a popular JavaScript library for creative coding.
  • Checker DenseIntermediate.Intermediate5 hours5 hours
  
• Free course

  Learn p5.js: Interaction

  Add interactivity to your p5.js sketch with mouse and keyboard functions.
  • Checker DenseIntermediate.Intermediate2 hours2 hours
  
• Free course

  Learn p5.js: Media

  Add and manipulate media assets, such as images and videos, in your p5.js sketch.
  • Checker DenseIntermediate.Intermediate2 hours2 hours
  

Browse more topics

• Open source148,424 learners enrolled
• Web development5,773,621 learners enrolled
• JavaScript3,233,247 learners enrolled
• Code foundations8,597,473 learners enrolled
• Computer science7,093,845 learners enrolled
• Data science5,376,445 learners enrolled
• Python4,351,040 learners enrolled
• For business4,150,572 learners enrolled
• Data analytics3,255,780 learners enrolled

View full catalogChecker Dense

Unlock additional features with a paid plan

• Practice Projects

  Guided projects that help you solidify the skills and concepts you're learning.

• Assessments

  Auto-graded quizzes and immediate feedback help you reinforce your skills as you learn.

• Certificate of Completion

  Earn a document to prove you've completed a course or path that you can share with your network.

See pricing and plans