p5.js Examples Collection

A collection of interactive p5.js sketches demonstrating various creative coding techniques.

Features

• Bouncing Balls: Colorful balls that bounce around and react to mouse position
• Fractal Tree: A recursive tree structure that changes with mouse position
• Particle System: Interactive particles that follow mouse movement
• Wave Animation: A colorful wave pattern that animates over time

Usage

To run these examples:

1. Clone or download this repository
2. Open index.html in a web browser

Alternatively, you can run a local server:

# Using Node.js http-server
npx http-server

# Then open http://localhost:8080 in your browser

Structure

p5js-examples/
├── index.html          # Main HTML file
├── bounce.html         # Bouncing balls example page
├── fractal.html        # Fractal tree example page
├── particles.html      # Particle system example page
├── wave.html           # Wave animation example page
├── styles.css          # Styling for all pages
├── sketches/
│   ├── bounce.js       # Bouncing balls sketch
│   ├── fractal.js      # Fractal tree sketch
│   ├── particles.js    # Particle system sketch
│   └── wave.js         # Wave animation sketch
└── README.md

Technologies Used

• p5.js - A JavaScript library for creative coding
• HTML5 Canvas - For rendering graphics
• CSS3 - For modern liquid glass design

Examples

Bouncing Balls

Interactive simulation where colorful balls bounce around the canvas and react to mouse position. Click to add new balls.

Fractal Tree

A recursive tree structure that changes its angle based on mouse position.

Particle System

A particle system where particles follow mouse movement. Click and drag to create more particles.

Wave Animation

Animated wave pattern with colors that change based on position and time. Mouse position affects the frequency.

Design Features

The project utilizes a modern "liquid glass" design aesthetic with:

• Semi-transparent elements
• Blur effects (backdrop-filter)
• Gradient backgrounds
• Smooth animations
• Responsive layout
• Dark mode support

Contributing

Feel free to fork this repository and add your own p5.js sketches! Make sure to follow the same design patterns as the existing examples.