Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Codecademy

Learn p5.js

via Codecademy

Go to class Write review
Unihackers Ad

Launch Your Cybersecurity Career in 6 Months

Learn More → DataCamp Ad

PowerBI Data Analyst - Create visualizations and dashboards from scratch

Learn More →

Overview

Build a Learning Habit
Download Class Central's free printable study calendar
Download for Free
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.

Syllabus

  • Welcome to p5.js: Get an introduction to creative coding and the p5.js JavaScript library.
    • Article: Welcome to Learn p5.js
  • Introduction to Creative Coding: Learn the fundamental concepts of p5.js and create your first p5.js sketch to draw and color shapes!
    • Lesson: Introduction to Creative Coding with p5.js
    • Lesson: Drawing and Coloring Shapes with p5.js
    • ExternalResource: p5.js Web Editor
    • Article: Creating a Local p5.js Project
    • Project: Wall Drawing
    • Quiz: Introduction to Creative Coding with p5.js
  • Animation: Turn your static p5.js sketch into animation and learn to create more complex sketches using grouping and transformation functions.
    • Lesson: Animation with p5.js
    • Lesson: Grouping and Transforming Shapes
    • Article: Tips for Creating Animations with p5.js
    • Project: Bouncing Balls
    • Quiz: Animations with p5.js
  • Interaction: Add interactivity to your p5.js sketch with mouse and keyboard functions.
    • Lesson: Interaction with p5.js
    • Project: Generative Art Creator
    • Quiz: Interaction with p5.js
  • Media: Learn how to add and manipulate media assets, such as images and videos, in your p5.js sketch.
    • Lesson: Images and Videos
    • Article: Creative Coding with Webcams
    • Project: Interactive Video Sculpture
    • Quiz: Media with p5.js
  • Next Steps: You’ve completed the Learn p5.js course! What’s next?
    • Article: Next Steps

Taught by

Jiwon Shin

Reviews

4.3 rating at Codecademy based on 122 ratings

Start your review of Learn p5.js

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.