Introduction to p5.js

Welcome to this p5.js crash course, designed to help you dive into creative coding with JavaScript. Whether you’re an artist, designer, educator, or beginner, p5.js makes it easy to create interactive sketches, animations, and generative art.

This guide is structured into key chapters, each focusing on fundamental aspects of p5.js:

• Getting Started – Learn what p5.js is, explore the p5.js Web Editor, and set up an HTML template for local development.
• State Machine – Understand how push() and pop() help manage drawing styles and transformations.
• Sketch Structure – Explore the three core functions: preload(), setup(), and draw(), and see how they define a p5.js sketch.
• Mouse – Work with mouseX, mouseY, mousePressed(), and mouseClicked() to handle mouse interaction.
• Keyboard – Use key, keyPressed(), and keyIsDown() to detect keyboard input.
• DOM – Create buttons, sliders, checkboxes, dropdowns, and color pickers to add UI elements to your sketch.

Each chapter includes concise explanations, code examples, and interactive demos, allowing you to experiment and learn by doing.