Mode:
Duration:
1
2
3
4
5
6
7
8
function setup() {
createCanvas(400, 200);
}
function draw() {
background(255);
fill(0, 100, 255);
ellipse(mouseX, mouseY, 50, 50);
}Coding works best on desktop or with an external keyboard.
Mouse Follow Circle - P5js Typing CST Test
Mouse Follow Circle — P5js Code
A circle that follows the mouse cursor.
function setup() {
createCanvas(400, 200);
}
function draw() {
background(255);
fill(0, 100, 255);
ellipse(mouseX, mouseY, 50, 50);
}P5js Language Guide
p5.js is a JavaScript library designed to make coding accessible for artists, designers, and beginners. It provides an intuitive way to create graphics, animations, and interactive content on the web using a friendly API inspired by Processing.
Primary Use Cases
- ▸Educational projects for teaching programming
- ▸Interactive art installations
- ▸Web-based animations and visualizations
- ▸Prototyping games and interactive experiences
- ▸Creative coding experiments
Notable Features
- ▸Simplifies HTML5 Canvas and WebGL interactions
- ▸High-level functions for drawing and animation
- ▸Event handling for mouse, keyboard, and touch
- ▸Supports multimedia like sound and video
- ▸Open-source and community-driven
Origin & Creator
p5.js was created by Lauren McCarthy in 2014 as a JavaScript adaptation of Processing to make creative coding more web-friendly and accessible.
Industrial Note
Primarily used in education, art, and creative coding communities rather than enterprise software. Its focus is on learning, prototyping, and interactive visualization.
Quick Explain
- ▸p5.js simplifies drawing shapes, handling events, and creating animations in JavaScript.
- ▸It provides a high-level API for 2D and 3D graphics, sound, and video.
- ▸The library encourages creative coding and visual experimentation.
- ▸It abstracts complex web APIs like Canvas and WebGL for easy use.
- ▸p5.js can run directly in a browser without setup.
Core Features
- ▸`setup()` and `draw()` loop for initialization and animation
- ▸Functions for shapes: `rect()`, `ellipse()`, `line()`
- ▸Color and style management: `fill()`, `stroke()`
- ▸Mouse and keyboard event callbacks
- ▸Integration with DOM and HTML elements
Learning Path
- ▸Learn basic JavaScript syntax
- ▸Understand `setup()` and `draw()`
- ▸Experiment with shapes, colors, and animation
- ▸Handle events like mouse and keyboard
- ▸Create interactive sketches and small projects
Practical Examples
- ▸Animating bouncing balls on canvas
- ▸Drawing interactive fractals
- ▸Creating generative art patterns
- ▸Visualizing data with graphs and shapes
- ▸Building simple browser-based games
Comparisons
- ▸p5.js vs Processing -> JavaScript vs Java, both beginner-friendly
- ▸p5.js vs Three.js -> p5.js simpler 2D/3D, Three.js more advanced 3D
- ▸p5.js vs D3.js -> p5.js creative coding, D3.js data visualization
- ▸p5.js vs vanilla Canvas -> p5.js easier, abstracts low-level details
- ▸p5.js vs PixiJS -> p5.js general creative coding, PixiJS optimized for WebGL graphics
Strengths
- ▸Easy to learn for beginners
- ▸Great for visual and interactive projects
- ▸Runs directly in browsers
- ▸Strong community and learning resources
- ▸Extensible via additional libraries (sound, DOM, ML)
Limitations
- ▸Not optimized for high-performance applications
- ▸Limited to web/browser environment
- ▸Complex 3D graphics are harder than low-level WebGL
- ▸May require JavaScript knowledge for advanced features
- ▸Not ideal for enterprise-scale applications
When NOT to Use
- ▸High-performance games requiring WebGL optimization
- ▸Enterprise web apps without graphical components
- ▸Backend server applications
- ▸Complex 3D graphics projects better suited for Three.js
- ▸Large-scale data visualization projects requiring D3.js features
Cheat Sheet
- ▸createCanvas(width, height) - initialize drawing area
- ▸background(color) - set canvas background
- ▸fill(color) - set fill color for shapes
- ▸stroke(color) - set outline color for shapes
- ▸ellipse(x, y, w, h), rect(x, y, w, h) - draw shapes
FAQ
- ▸Is p5.js suitable for beginners? -> Yes, designed for accessibility
- ▸Can I use p5.js for 3D graphics? -> Yes, with WEBGL mode
- ▸Does it work in all browsers? -> Modern browsers supported
- ▸Do I need prior JS knowledge? -> Helpful but not strictly required
- ▸Are there extensions for sound or ML? -> Yes, p5.sound and ml5.js
30-Day Skill Plan
- ▸Week 1: Draw shapes and apply colors
- ▸Week 2: Animate objects and learn frame updates
- ▸Week 3: Handle mouse/keyboard events
- ▸Week 4: Work with images, sounds, and video
- ▸Week 5: Build interactive projects and mini-games
Final Summary
- ▸p5.js is a beginner-friendly creative coding library for the web.
- ▸It simplifies drawing, animation, and interactivity in JavaScript.
- ▸Primarily used in education, art, and creative coding.
- ▸Supports multimedia, events, and extensible features.
- ▸Encourages experimentation and visual programming.
Project Structure
- ▸Single HTML file with embedded JS script
- ▸Optional external JS files for modularity
- ▸Optional assets folder for images, sounds, etc.
- ▸Sketch code usually global in scope
- ▸Libraries included as needed
Monetization
- ▸Mostly educational and hobbyist use
- ▸Online courses and workshops
- ▸Interactive web projects for clients
- ▸Portfolio showcases for artists and developers
- ▸Digital art sales and NFT projects
Productivity Tips
- ▸Start with small sketches
- ▸Reuse code and functions
- ▸Leverage community examples
- ▸Test continuously in browser
- ▸Focus on visual clarity and interaction
Basic Concepts
- ▸Sketch - a p5.js program containing `setup()` and `draw()`
- ▸`setup()` - runs once for initialization
- ▸`draw()` - runs continuously for animation
- ▸Shapes - `rect()`, `ellipse()`, `line()` to draw graphics
- ▸Events - `mousePressed()`, `keyPressed()` for interactivity