https://github.com/qc20/orderedchaos

Welcome to **Particle Playground** - an interactive, mesmerizing simulation where 45,000 particles come to life at your fingertips. Move your cursor and watch as the particles dance and weave, creating a captivating visual experience.
https://github.com/qc20/orderedchaos

creative-coding css frontend html javascript ui-components webdevelopment

Last synced: 6 days ago
JSON representation

Welcome to **Particle Playground** - an interactive, mesmerizing simulation where 45,000 particles come to life at your fingertips. Move your cursor and watch as the particles dance and weave, creating a captivating visual experience.

• Host: GitHub
• URL: https://github.com/qc20/orderedchaos
• Owner: QC20
• Created: 2024-07-01T01:21:14.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-07-07T14:59:31.000Z (4 months ago)
• Last Synced: 2024-07-07T16:18:00.828Z (4 months ago)
• Topics: creative-coding, css, frontend, html, javascript, ui-components, webdevelopment
• Language: JavaScript
• Homepage: https://qc20.github.io/OrderedChaos/
• Size: 39.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ordered Chaos: Particle Animation Study with Canvas and Three.js

This repository contains a study on creating performant particle animations using Canvas 2D and Three.js. It explores the following:

- **Canvas Animation**: Utilizing HTML5 Canvas for rendering and animating particles.

- **Three.js Integration**: Incorporating Three.js for advanced 3D rendering effects.

- **Interaction**: Interactivity through mouse movements to manipulate animations.

- **Performance Optimization**: Techniques to ensure smooth performance with a large number of particles.

## Features

- Interactive particle animations based on mouse movements.

- Implementation of custom shaders and textures for visual effects.

- Responsive design adjustments for various screen sizes.

- Performance profiling and optimization techniques.

## Technologies Used

- **HTML5 Canvas**: For 2D graphics rendering.

- **Three.js**: JavaScript 3D library for WebGL.

- **CSS**: Styling and layout adjustments.

- **JavaScript**: Programming language for animations and interactivity.

## Usage

Clone the repository and open `index.html` in a web browser to view the particle animation study.