sandy-image
v1.0.3
Published
Create a mesmerizing sand animation effect by drawing an `<img>` tag in grayscale using sand grains
Downloads
27
Maintainers
Readme
Sandy Image Library
The Sandy Image Library is a JavaScript library that creates a mesmerizing sand animation effect by drawing an <img>
tag in grayscale using sand grains. The sand grains are dynamically repelled from the mouse or touch input, creating an interactive and visually appealing experience.
Features
- Converts an image into a grayscale sand animation
- Sand grains are repelled from the mouse or touch input
- Customizable options for grain size, animation steps, and more
- Smooth and efficient animation using a worker thread
- Adjustable wind effect for dynamic animations
Installation
You can install the Sandy Image Library via npm:
npm install sandy-image
Alternatively, you can include the library files directly in your project:
<script src="path/to/sandy.js"></script>
<!-- Make sure sandy-worker.js, sandy-image.js and sandy-image_bg.wasm is in the same directory -->
Usage
Create an instance of the SandyImage class, passing the selector of the target image and any desired options:
const sandyImage = new SandyImage('#myImage', { size: 6, steps: 5, // Other options... });
The library will automatically replace the target image with a canvas and start the sand animation.
Customize the animation by providing options during initialization. The available options include:
size
: The pixel size of each sand grain (default: 5). Bigger sizes result in a faster animation but reduces the detail in the final image.steps
: The number of grayscale steps the image should be converted into (default: 5). Smaller steps result in a faster animation, but values lower than 5 tend to have clear grayscale steps.stepDepth
: The artificial "depth" added to each grayscale step (default: 3). This makes it possible to use bigger sizes and smaller steps by adding an artificial detail to the final image. It also helps grains to not be dislodged (by the mouse or breeze) from "deep" cuts easily. Values between 2 and 5 tend to work well.targetFPS
: The target frames per second for the animation (default: 30).dampingFactor
: The damping factor for sand movement (default: 0.95). Values should be between 0 and 1.repelRadius
: The radius within which sand particles are repelled by the mouse or touch input (default: 20).createGrainFn
: A custom function for creating sand grains. It takes an object with propertiescanvasWidth
,canvasHeight
,size
, andindex
as input and should return an object withx
,y
,vx
, andvy
properties for the initial grain's position and velocity.breezeFn
: A custom function for applying a breeze effect to the animation. It takes an object with propertiesframe
,globalVx
, andglobalVy
as input and should return an object with updatedglobalVx
andglobalVy
values.debug
: Enable debug mode for performance logging (default: false).
The sand animation will automatically respond to mouse or touch input, repelling the sand particles within the specified repelRadius.
Performance Considerations
Keep the grain count less than 20,000 for optimal performance. This can be achieved by editing the image ahead of time to have as much white space as possible and clear constrast between objects in the image. Use the debug option during development to monitor the animation's performance and frames per second (FPS).
Contributing
Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the GitHub repository.
License
This library is released under the MIT License.