https://github.com/qc20/wavebreaker

This interactive sketch is designed for digital designers and user experience (UX) professionals who want to explore dynamic and creative visual effects. It generates a mesmerizing grid of moving particles that can be used for various design and art purposes.
https://github.com/qc20/wavebreaker

creative-coding css html interactive-visualizations javascript p5 ux-design webdevelopment

Last synced: 4 days ago
JSON representation

This interactive sketch is designed for digital designers and user experience (UX) professionals who want to explore dynamic and creative visual effects. It generates a mesmerizing grid of moving particles that can be used for various design and art purposes.

• Host: GitHub
• URL: https://github.com/qc20/wavebreaker
• Owner: QC20
• Created: 2023-10-05T18:10:12.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-29T11:30:23.000Z (6 months ago)
• Last Synced: 2024-11-08T12:09:34.064Z (about 2 months ago)
• Topics: creative-coding, css, html, interactive-visualizations, javascript, p5, ux-design, webdevelopment
• Language: JavaScript
• Homepage: https://qc20.github.io/Wavebreaker/
• Size: 13.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Wavebreaker

## Overview

This interactive sketch is designed for digital designers and user experience (UX) professionals who want to explore dynamic and creative visual effects. It generates a mesmerizing grid of moving particles that can be used for various design and art purposes.

![Alt text]()

## Features

Interactive Drawing: The sketch allows you to create dynamic visual compositions by clicking the mouse, leaving a trail of moving particles. This feature enables you to draw and design with ease.

Real-time Particle Motion: Particles move in a circular motion, creating captivating and continuously evolving patterns on the canvas. The motion adds an artistic and interactive element to your design.

Color Customization: You can customize the color of the particles by pressing 'r', 'g', or 'b' keys to select red, green, or blue, respectively. This feature allows you to experiment with different color schemes and create visually appealing designs.

Size Adjustment: Use the '+' and '-' keys to increase or decrease the size of the particles. This feature provides flexibility in controlling the visual impact and density of the particles.

Clear Canvas: You can clear the canvas by pressing the 'c' key, allowing you to start fresh with your design.

## Usage

Click anywhere on the canvas to create particles at the mouse cursor's position. Experiment with different mouse clicks to produce unique patterns and designs.

Press 'r', 'g', or 'b' to change the particle color to red, green, or blue, respectively.

Use the '+' and '-' keys to adjust the particle size. Experiment with different sizes to achieve the desired visual effect.

Press the 'c' key to clear the canvas and start a new design.

## Customize and Explore

Feel free to modify the code and experiment with different parameters to create your own unique visual experiences. You can adjust the canvas size, background color, particle behavior, and more to suit your design goals.

![Alt text]()