Learn p5.js
Offered By: Codecademy
Course Description
Overview
Create generative visualizations and interactive experiences with p5.js, a popular JavaScript library for creative coding.
### Why Learn p5.js?
Meet p5.js — an open-source JavaScript library that allows you to use programming as an artistic medium. With it, you can simplify the way you build graphic and interactive experiences. Create colorful, dynamic, and engaging visuals for design, architecture, fashion, gaming — anything you can imagine.
### Take-Away Skills
You’ll build on your JavaScript foundation and dive into p5.js’s full range of functionality. Learn how to create everything from simple 2D sketches to generative visualizations using interactive animations and multimedia elements.
### Note on Prerequisites:
We recommend having a basic knowledge of HTML, CSS, and JavaScript. It also helps to have an understanding of HTML elements and structures, CSS colors, and JavaScript arrays, loops, and objects before starting this course.
### Why Learn p5.js?
Meet p5.js — an open-source JavaScript library that allows you to use programming as an artistic medium. With it, you can simplify the way you build graphic and interactive experiences. Create colorful, dynamic, and engaging visuals for design, architecture, fashion, gaming — anything you can imagine.
### Take-Away Skills
You’ll build on your JavaScript foundation and dive into p5.js’s full range of functionality. Learn how to create everything from simple 2D sketches to generative visualizations using interactive animations and multimedia elements.
### Note on Prerequisites:
We recommend having a basic knowledge of HTML, CSS, and JavaScript. It also helps to have an understanding of HTML elements and structures, CSS colors, and JavaScript arrays, loops, and objects before starting this course.
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
Kenny Lin
Related Courses
ABC du langage CInstitut Mines-Télécom via France Université Numerique Abstraction, Problem Decomposition, and Functions
University of Colorado System via Coursera Advanced Data Structures in Java
University of California, San Diego via Coursera Advanced React
Meta via Coursera Testing with Agile
University of Virginia via Coursera