<commit_before># Illusion Number

![Illusion Number Gif](https://gist.githubusercontent.com/malash/9ff5b2897f05d0fae6dd/raw/1b069c33becefa4ca5c19efc955bbc1bc67f441a/illusion-number.gif)

## Overview

Implementing an illusion number transform as showing in GIF written in Javascript and CSS.
I find the GIF image from SNS website and don't know its source. Please leave me a issuse if you know it and I will be appreciate for you :)

## Demo

Timer: [https://rawgit.com/malash/illusion-number/master/example/index.html](https://rawgit.com/malash/illusion-number/master/example/index.html)

Datetime: [https://rawgit.com/malash/illusion-number/master/example/datetime.html](https://rawgit.com/malash/illusion-number/master/example/datetime.html)

You can find more demos in the `example` folder.

## Usage

Use `bower`  to install `illusion-number` to your project:

```bash
$ bower install illusion-number
```

Then include `.js` and `.css` files:

```html
<link rel="stylesheet" href="/beep/bower_components/illusion-number/dest/illusion-number.css">
<script src="/beep/bower_components/illusion-number/dest/illusion-number.js"></script>
```

Put an empty `div` emelent to your HTML file:

```html
<div id="test"></div>
```

Call global variable `IllusionNumber`'s method `play` with the element and options:

```javascript
IllusionNumber.play(document.getElementById('test'), {
  from: '0',
  to: '1'
});
```

## Documentation

### IllusionNumber.play(ele, options)

#### ele

Type: `element`

Required: `true`

The DOM element to bind

#### options.from

Type: `number` or `char`

Required: `true`

#### options.to

Type: `number` or `char`

Required: `true`

The animation transforms from `options.from` bitmap to `options.to` bitmap.

#### options.size

Type: `number` or `string`

Default: `250px`

The animation canvas size. Some valid value: `250`, `'14px'`, `'3em'`, `'2rem'`

#### options.animationDuration

Type: `number`

Default: `1`

The animation duration defaults to 1 second. The type of value could be `number` or `float`.

### IllusionNumber.play(char, bitmap)

Set or override a bitmap.

For example:

```javascript
IllusionNumber.setBitmap('A', [
  [0, 1, 0],
  [1, 0, 0],
  [1, 1, 1],
  [1, 0, 1],
  [1, 0, 1]<commit_msg>fix README.md typo<commit_after># Illusion Number

![Illusion Number Gif](https://gist.githubusercontent.com/malash/9ff5b2897f05d0fae6dd/raw/1b069c33becefa4ca5c19efc955bbc1bc67f441a/illusion-number.gif)

## Overview

Implementing an illusion number transform as showing in GIF written in Javascript and CSS.
I find the GIF image from SNS website and don't know its source. Please leave me a issuse if you know it and I will be appreciate for you :)

## Demo

Timer: [https://rawgit.com/malash/illusion-number/master/example/index.html](https://rawgit.com/malash/illusion-number/master/example/index.html)

Datetime: [https://rawgit.com/malash/illusion-number/master/example/datetime.html](https://rawgit.com/malash/illusion-number/master/example/datetime.html)

You can find more demos in the `example` folder.

## Usage

Use `bower`  to install `illusion-number` to your project:

```bash
$ bower install illusion-number
```

Then include `.js` and `.css` files:

```html
<link rel="stylesheet" href="/beep/bower_components/illusion-number/dest/illusion-number.css">
<script src="/beep/bower_components/illusion-number/dest/illusion-number.js"></script>
```

Put an empty `div` emelent to your HTML file:

```html
<div id="test"></div>
```

Call global variable `IllusionNumber`'s method `play` with the element and options:

```javascript
IllusionNumber.play(document.getElementById('test'), {
  from: '0',
  to: '1'
});
```

## Documentation

### IllusionNumber.play(ele, options)

#### ele

Type: `element`

Required: `true`

The DOM element to bind

#### options.from

Type: `number` or `char`

Required: `true`

#### options.to

Type: `number` or `char`

Required: `true`

The animation transforms from `options.from` bitmap to `options.to` bitmap.

#### options.size

Type: `number` or `string`

Default: `250px`

The animation canvas size. Some valid value: `250`, `'14px'`, `'3em'`, `'2rem'`

#### options.animationDuration

Type: `number`

Default: `1`

The animation duration defaults to 1 second. The type of value could be `number` or `float`.

### IllusionNumber.setBitmap(char, bitmap)

Set or override a bitmap.

For example:

```javascript
IllusionNumber.setBitmap('A', [
  [0, 1, 0],
  [1, 0, 0],
  [1, 1, 1],
  [1, 0, 1],
  [1, 0, 1]
{'fraction_non_alphanumeric': 0.15109034267912771, 'fraction_numerical': 0.0258121940364931, 'mean_word_length': 4.792525773195877, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '843967', 'n_tokens_mistral': 1639, 'n_tokens_neox': 1552, 'n_words': 439}