https://github.com/uvacoder/uva-scripts-collection
https://github.com/uvacoder/uva-scripts-collection
collection curated js js-snips myrepos readme scripts snippets tips
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/uvacoder/uva-scripts-collection
- Owner: Uvacoder
- Created: 2021-08-15T08:52:10.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-24T02:26:21.000Z (over 2 years ago)
- Last Synced: 2025-01-24T05:44:21.271Z (5 months ago)
- Topics: collection, curated, js, js-snips, myrepos, readme, scripts, snippets, tips
- Language: JavaScript
- Homepage:
- Size: 38 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
- https://github.com/Uvacoder/uva-css-scripts-collection
- https://github.com/Uvacoder/aaa-css-reference-collect
- https://github.com/Uvacoder/aaa-html-css-snips-collection
- https://github.com/Uvacoder/aaa-css-tricks-collection
## 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)