PIXI Falling Shapes Playground

An interactive application for generating and managing shapes with gravity and adjustable generation rate, built with PIXI.js.

🚀 Overview

This project demonstrates an interactive scene with shapes using PIXI.js.

• Generate new shapes or remove existing ones by clicking on the canvas.
• Control the number of shapes generated per second.
• Adjust gravity affecting the shapes.
• Display current shape count, total area, and optionally FPS.
• Follows MVC pattern separating logic, view, and controllers.

🛠️ Technologies Used

• TypeScript
• PIXI.js
• Vite bundler

📦 Installation

1. Clone the repository:

git clone https://github.com/ilvoo/falling-shapes.git
cd falling-shapes

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

🎮 Usage

• Open your browser at http://localhost:5713 (or configured port).
• Use the counters to adjust shape generation rate and gravity.
• Click on the canvas to generate new shapes or remove existing ones.
• Watch the metrics update in real time.
• Add ?fps to the URL query string to enable FPS display.

📁 Project Structure

├── src/
│   ├── controller/        # Controllers and business logic
│   ├── model/             # Data models
│   ├── view/              # PIXI.js/HTML view components
│   ├── styles/            # CSS styles
│   ├── utils/             # Utility functions (e.g. URL helpers)
│   └── main.ts            # Entry point
├── public/                # Static assets
├── package.json
├── tsconfig.json
└── README.md

📄 License

This project is licensed under the MIT License.

👤 Author

Illia Voitenko – GitHub – ilvoo.work@gmail.com