Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tholman/ascii-morph
Library to animate between two ascii images -
https://github.com/tholman/ascii-morph
Last synced: about 1 month ago
JSON representation
Library to animate between two ascii images -
- Host: GitHub
- URL: https://github.com/tholman/ascii-morph
- Owner: tholman
- License: mit
- Created: 2016-11-07T22:53:17.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-01-13T03:11:07.000Z (almost 5 years ago)
- Last Synced: 2024-05-22T21:32:14.625Z (7 months ago)
- Language: JavaScript
- Homepage: http://codepen.io/tholman/full/BQLQyo
- Size: 7.81 KB
- Stars: 571
- Watchers: 14
- Forks: 44
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: license.md
Awesome Lists containing this project
- awesome-github-repos - tholman/ascii-morph - Library to animate between two ascii images - (JavaScript)
- awesome-client-side - AsciiMorph - Library to animate between two ascii images - [Try it!](https://codepen.io/tholman/full/BQLQyo) (ASCII Art)
- awesome-ascii - ascii-morph
README
## AsciiMorph
AsciiMorph is a small stand alone javascript library for rendering ascii art and creations into elements, allowing for them to be changed out with a morphing transition.
### Demo
Here's a gif of it in action. You can also play with the [demo live here](http://codepen.io/tholman/full/BQLQyo).
### Usage
You'll need an `dom` element for the ascii's to be rendered within.
```html
```
Next up, you will want to initialize the library. The second parameter is the `width` and `height` properties you want in your rendering square. The ascii will be rendered centered within them, and fill the rest with white space. Naturally this looks best with monospace fonts.
```javascript
// Initialize AsciiMorph
var element = document.querySelector('pre');
AsciiMorph(element, {x: 50,y: 25});
```
Then you can get to the fun, rendering elements, and morphing between them.
```javascript
// First, define some ascii art.
var bird = [
" /",
" /",
" /;",
" //",
" ;/",
" ,//",
" _,-' ;_,,",
" _,'-_ ;|,'",
" _,-'_,..--. |",
" ___ .'-'_)' ) _)\\| ___",
" ,'\"\"\"`'' _ ) ) _) ''--'''_,-'",
"-={-o- /| ) _) ) ; '_,--''",
" \\ -' ,`. ) .) _)_,''|",
" `.\"( `------'' /",
" `.\\ _,'",
" `-.____....-\\\\",
" || \\\\",
" // ||",
" // ||",
" _-.//_ _||_,",
" ,' ,-'/"
]
var mona = [
" ____",
" o8%8888,",
" o88%8888888.",
" 8'- -:8888b",
" 8' 8888",
" d8.-=. ,==-.:888b",
" >8 `~` :`~' d8888",
" 88 ,88888",
" 88b. `-~ ':88888",
" 888b ~==~ .:88888",
" 88888o--:':::8888",
" `88888| :::' 8888b",
" 8888^^' 8888b",
" d888 ,%888b.",
" d88% %%%8--'-.",
"/88:.__ , _%-' --- -",
" '''::===..-' = --. `",
]
// Then, you can render (will render instantly)
AsciiMorph.render(bird);
// Then morph, to a new creation
AsciiMorph.morph(mona);
```
### License
Copyright (c) 2016 Tim Holman - http://tholman.com
[The MIT License](https://github.com/tholman/ascii-morph/blob/master/license.md)