galleryprojects

Waving Tiles

Waving Tiles is a TypeScript library for creating waving tile visualizations. It uses Perlin noise to generate smooth, flowing animations with customizable styles, colors, and densities.

Installation

You can install WavingTiles via npm:

npm i @mjpeake/wavingtiles

Alternatively, you can also use the following script tag reference:

<script src="https://cdn.jsdelivr.net/npm/@mjpeake/wavingtiles@1.0.0/dist/wavingtiles.js"></script>

Usage

To use WavingTiles in your project, include the library in your HTML file and initialize it with the appropriate parameters.

 1<!DOCTYPE html>
 2<html>
 3
 4<head>
 5  <title>Waving Tiles</title>
 6  <link rel="stylesheet" href="./assets/style.css">
 7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 8  <script src="https://cdn.jsdelivr.net/npm/@mjpeake/wavingtiles@1.0.0/dist/wavingtiles.js"></script>
 9</head>
10
11<body>
12  <div id="wavingtiles"></div>
13  <script>
14    const colors = ["#7209b7", "#b5179e", "#f72585", "#4cc9f0", "#4895ef", "#4361ee"];
15    const backgroundColor = "#3a0ca3";
16    const density = 75;
17
18    $(document).ready(function () {
19      WavingTiles.WavingTiles("wavingtiles", colors, backgroundColor, density);
20    });
21  </script>
22</body>
23</html>

Configuration Options

The Waving Tiles library allows you to customize the appearance and behavior of the tiles through the following parameters:

Color Options

  • colors (string[]):
    An array of colors used for the tiles. Each tile is assigned a color from this array.

  • backgroundColor (string):
    The background color of the canvas.

Tile Characteristics

  • density (number):
    Controls the number of tiles per row and column. Higher values result in smaller tiles and a denser grid.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Gallery