p5.js is a JavaScript library that’s transforming the way artists and designers approach make art with code.

If you’re intrigued by the intersection of art and programming, freeCodeCamp’s YouTube course on p5.js is an ideal starting point.

Patt Vira created this course. She loves making art with code and teaching others how to as well. Patt teaches the vast potential of p5.js through five beginner-friendly project tutorials.

What is p5.js?

p5.js is built to make programming accessible, enjoyable, and inclusive. At its core, p5.js is a JavaScript library that simplifies the process of coding for the web, enabling users to create interactive graphics, animations, and complex visual compositions with ease. What sets p5.js apart is its emphasis on creating a coding environment that is welcoming to all — artists, designers, educators, beginners, and anyone else interested in diving into the world of digital art.

The philosophy behind p5.js is deeply rooted in the belief that coding should be as approachable and understandable as sketching. This ethos is inspired by Processing, a flexible software sketchbook and a language for learning how to code within the context of the visual arts. p5.js extends this vision to the web, allowing for the creation of experiences that go beyond static images to include interaction, animation, and even participation from the audience.

Key Features of p5.js:

• Accessibility: Designed with beginners in mind, it offers a gentle introduction to the fundamentals of programming.
• Inclusivity: With its community-driven approach, p5.js encourages contributions and collaborations from a diverse group of users.
• Interactivity: Allows creators to build interactive projects that can respond to user inputs, such as mouse clicks, movement, or keyboard actions.
• Integration: Seamlessly integrates with the HTML/CSS web ecosystem, making it easy to incorporate visual elements into websites or online portfolios.
• Extensibility: Supports advanced features and customizations for more experienced coders looking to push the boundaries of digital art.

About the Course

This course is structured around five engaging projects, each designed to introduce a different aspect of the p5.js library and its capabilities for creative expression.

Project 1: Interactive Display with Rotating Blocks

Dive into the world of interactivity by creating a mesmerizing display of rotating blocks that react to user input.

Project 2: Beautiful Trigonometry

Explore the mathematical beauty behind coding by drawing intricate patterns and shapes using trigonometric functions.

Project 3: 3-Dimensional Kinetic Typography

Bring text to life by constructing a 3D kinetic typography project, adding a dynamic layer of interaction to digital art.

Project 4: Hypnotic Flowers

Create stunning, animated flowers that bloom and change over time, showcasing the potential of loops and animation in visual design.

Project 5: Mondrian-Inspired Generative Art

Pay homage to Piet Mondrian by generating art pieces that reflect his distinctive style, introducing the concept of generative art in the process.

Conclusion

Under the guidance of Patt Vira, you’ll not only learn the technical skillPostss needed to work with p5.js but also develop an appreciation for the beauty and versatility of coding as a form of creative expression.

Watch the full course on the freeCodeCamp.org YouTube channel (2-hour watch).