Skip to content

A dynamic p5.js visualization that combines a noise-driven color grid with user-generated ripple effects for an immersive canvas experience.

License

Notifications You must be signed in to change notification settings

RealAlexZ/PerlinPulse

Repository files navigation

PerlinPulse

Overview

demo.mp4

PerlinPulse is a dynamic visualization project built with p5.js, showcasing a mesmerizing grid of animated rectangles whose colors and positions are influenced by Perlin noise, creating a fluid, ever-changing visual experience. Additionally, the project features a fading ripple effect that activates upon mouse clicks, adding an interactive layer to the visualization.

Installation

To run PerlinPulse, you need to have p5.js library included in your HTML file. You can either download the library and include it locally or use a CDN link.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

After including the library, add the provided JavaScript code to a script file and link it in your HTML.

Usage

Once the setup is complete, open the HTML file in a browser to see the visualization. Click anywhere on the canvas to create ripples that expand and fade out over time. The grid of rectangles in the background will continuously animate, changing colors and positions subtly.

Dependencies

  • p5.js

About

A dynamic p5.js visualization that combines a noise-driven color grid with user-generated ripple effects for an immersive canvas experience.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages