├── LibraryEditLog.txt ├── .gitignore ├── lib ├── HTML-KickStart-master │ ├── css │ │ ├── img │ │ │ ├── bx_loader.gif │ │ │ ├── controls.png │ │ │ ├── gray_jean.png │ │ │ ├── breadcrumbs-bg.gif │ │ │ ├── fancybox │ │ │ │ ├── blank.gif │ │ │ │ ├── fancybox.png │ │ │ │ ├── fancybox-x.png │ │ │ │ ├── fancybox-y.png │ │ │ │ ├── fancy_close.png │ │ │ │ ├── fancy_loading.png │ │ │ │ ├── fancy_nav_left.png │ │ │ │ ├── fancy_nav_right.png │ │ │ │ ├── fancy_shadow_e.png │ │ │ │ ├── fancy_shadow_n.png │ │ │ │ ├── fancy_shadow_ne.png │ │ │ │ ├── fancy_shadow_nw.png │ │ │ │ ├── fancy_shadow_s.png │ │ │ │ ├── fancy_shadow_se.png │ │ │ │ ├── fancy_shadow_sw.png │ │ │ │ ├── fancy_shadow_w.png │ │ │ │ ├── fancy_title_left.png │ │ │ │ ├── fancy_title_main.png │ │ │ │ ├── fancy_title_over.png │ │ │ │ ├── fancy_title_right.png │ │ │ │ ├── jquery.mousewheel-3.0.4.pack.js │ │ │ │ └── jquery.easing-1.3.pack.js │ │ │ └── icon-arrow-right.png │ │ ├── fonts │ │ │ └── font-awesome-4.2.0 │ │ │ │ ├── fonts │ │ │ │ ├── FontAwesome.otf │ │ │ │ ├── fontawesome-webfont.eot │ │ │ │ ├── fontawesome-webfont.ttf │ │ │ │ └── fontawesome-webfont.woff │ │ │ │ ├── less │ │ │ │ ├── fixed-width.less │ │ │ │ ├── bordered-pulled.less │ │ │ │ ├── larger.less │ │ │ │ ├── core.less │ │ │ │ ├── list.less │ │ │ │ ├── font-awesome.less │ │ │ │ ├── stacked.less │ │ │ │ ├── rotated-flipped.less │ │ │ │ ├── spinning.less │ │ │ │ ├── path.less │ │ │ │ └── mixins.less │ │ │ │ └── scss │ │ │ │ ├── _fixed-width.scss │ │ │ │ ├── _bordered-pulled.scss │ │ │ │ ├── _larger.scss │ │ │ │ ├── _core.scss │ │ │ │ ├── _list.scss │ │ │ │ ├── font-awesome.scss │ │ │ │ ├── _stacked.scss │ │ │ │ ├── _spinning.scss │ │ │ │ ├── _path.scss │ │ │ │ ├── _rotated-flipped.scss │ │ │ │ └── _mixins.scss │ │ ├── prettify.css │ │ ├── tiptip.css │ │ ├── kickstart-grid.css │ │ ├── kickstart-slideshow.css │ │ ├── kickstart-menus.css │ │ └── kickstart-forms.css │ ├── composer.json │ ├── blank.html │ ├── license.txt │ ├── README.md │ ├── style.css │ └── example.html ├── SVGToCanvas.js ├── jsgif │ ├── b64.js │ ├── LICENSE │ ├── animWorker.js │ ├── anim.js │ ├── LZWEncoder.js │ └── README.md ├── jscolor │ └── jscolor-example.html ├── ZIPWorker.js ├── custom.css ├── spawnWorkers.js ├── MainWorker.js ├── FrontEnd-Common.js ├── FileSaver.min.js ├── filer-util.js └── canvg │ └── rgbcolor.js ├── src ├── Structures.ts ├── PSquare.ts ├── PTriangle.ts ├── tsconfig.json ├── PCircle.ts ├── PStar.ts ├── PPopCircle.ts ├── PSimple.ts ├── Utils.ts ├── ParticleBase.ts ├── PopLineEffect.ts ├── PRibbon.ts └── ParticlePreset1.ts ├── GulpFile.js ├── res ├── material │ ├── Twitter-Like.svg │ └── File.svg ├── Mode-other.svg ├── Mode-selecting.svg └── File.svg ├── package.json ├── memo ├── LicenseForGeneratedImages.md ├── experiment ├── writeOutCanvas.html ├── writeOutAnimGif.html ├── writeOut.html ├── testV2.html ├── writeOutAnimGifV2-All.html ├── writeOutAnimGifV2.html └── index_noWorker.html ├── readme.md ├── 10thAnniv-Spec.md └── LICENSE /LibraryEditLog.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | src/*.js 2 | node_modules/ 3 | lib/LLEAG10th/ 4 | *~ 5 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/bx_loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/bx_loader.gif -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/controls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/controls.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/gray_jean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/gray_jean.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/breadcrumbs-bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/breadcrumbs-bg.gif -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/blank.gif -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancybox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancybox.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/icon-arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/icon-arrow-right.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancybox-x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancybox-x.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancybox-y.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancybox-y.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_close.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_loading.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_nav_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_nav_left.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_nav_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_nav_right.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_e.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_n.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_ne.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_ne.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_nw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_nw.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_s.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_se.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_se.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_sw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_sw.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_shadow_w.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_title_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_title_left.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_title_main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_title_main.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_title_over.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_title_over.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/fancy_title_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/img/fancybox/fancy_title_right.png -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/less/fixed-width.less: -------------------------------------------------------------------------------- 1 | // Fixed Width Icons 2 | // ------------------------- 3 | .@{fa-css-prefix}-fw { 4 | width: (18em / 14); 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/scss/_fixed-width.scss: -------------------------------------------------------------------------------- 1 | // Fixed Width Icons 2 | // ------------------------- 3 | .#{$fa-css-prefix}-fw { 4 | width: (18em / 14); 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WL-Amigo/LikeLikeEffectGenerator/HEAD/lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /src/Structures.ts: -------------------------------------------------------------------------------- 1 | namespace LLEAG { 2 | export interface RGB { 3 | r: number; 4 | g: number; 5 | b: number; 6 | } 7 | 8 | export interface Point { 9 | x: number; 10 | y: number; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /lib/SVGToCanvas.js: -------------------------------------------------------------------------------- 1 | function generateCanvasFromSVG(svgSource, size){ 2 | 3 | var ret = document.createElement('canvas'); 4 | ret.width = size; 5 | ret.height = size; 6 | 7 | canvg(ret, svgSource, { useCORS : true }); 8 | 9 | return ret; 10 | 11 | } 12 | -------------------------------------------------------------------------------- /GulpFile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var webserver = require('gulp-webserver'); 3 | 4 | gulp.task('webserver', function() { 5 | gulp.src('./') 6 | .pipe(webserver({ 7 | livereload: false, 8 | directoryListing: false, 9 | open: true 10 | })); 11 | }); 12 | 13 | gulp.task("default", ["webserver"]) 14 | -------------------------------------------------------------------------------- /res/material/Twitter-Like.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "99lime/html-kickstart", 3 | "license": "MIT", 4 | "description": "Ultra–Lean HTML Building Blocks for Rapid Website Production", 5 | "minimum-stability": "dev", 6 | "authors": [ 7 | { 8 | "name": "Joshua Gatcke", 9 | "email": "joshua@99lime.com" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/less/bordered-pulled.less: -------------------------------------------------------------------------------- 1 | // Bordered & Pulled 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-border { 5 | padding: .2em .25em .15em; 6 | border: solid .08em @fa-border-color; 7 | border-radius: .1em; 8 | } 9 | 10 | .pull-right { float: right; } 11 | .pull-left { float: left; } 12 | 13 | .@{fa-css-prefix} { 14 | &.pull-left { margin-right: .3em; } 15 | &.pull-right { margin-left: .3em; } 16 | } 17 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/scss/_bordered-pulled.scss: -------------------------------------------------------------------------------- 1 | // Bordered & Pulled 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-border { 5 | padding: .2em .25em .15em; 6 | border: solid .08em $fa-border-color; 7 | border-radius: .1em; 8 | } 9 | 10 | .pull-right { float: right; } 11 | .pull-left { float: left; } 12 | 13 | .#{$fa-css-prefix} { 14 | &.pull-left { margin-right: .3em; } 15 | &.pull-right { margin-left: .3em; } 16 | } 17 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/less/larger.less: -------------------------------------------------------------------------------- 1 | // Icon Sizes 2 | // ------------------------- 3 | 4 | /* makes the font 33% larger relative to the icon container */ 5 | .@{fa-css-prefix}-lg { 6 | font-size: (4em / 3); 7 | line-height: (3em / 4); 8 | vertical-align: -15%; 9 | } 10 | .@{fa-css-prefix}-2x { font-size: 2em; } 11 | .@{fa-css-prefix}-3x { font-size: 3em; } 12 | .@{fa-css-prefix}-4x { font-size: 4em; } 13 | .@{fa-css-prefix}-5x { font-size: 5em; } 14 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/scss/_larger.scss: -------------------------------------------------------------------------------- 1 | // Icon Sizes 2 | // ------------------------- 3 | 4 | /* makes the font 33% larger relative to the icon container */ 5 | .#{$fa-css-prefix}-lg { 6 | font-size: (4em / 3); 7 | line-height: (3em / 4); 8 | vertical-align: -15%; 9 | } 10 | .#{$fa-css-prefix}-2x { font-size: 2em; } 11 | .#{$fa-css-prefix}-3x { font-size: 3em; } 12 | .#{$fa-css-prefix}-4x { font-size: 4em; } 13 | .#{$fa-css-prefix}-5x { font-size: 5em; } 14 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/less/core.less: -------------------------------------------------------------------------------- 1 | // Base Class Definition 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix} { 5 | display: inline-block; 6 | font: normal normal normal 14px/1 FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | } 12 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/less/list.less: -------------------------------------------------------------------------------- 1 | // List Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-ul { 5 | padding-left: 0; 6 | margin-left: @fa-li-width; 7 | list-style-type: none; 8 | > li { position: relative; } 9 | } 10 | .@{fa-css-prefix}-li { 11 | position: absolute; 12 | left: -@fa-li-width; 13 | width: @fa-li-width; 14 | top: (2em / 14); 15 | text-align: center; 16 | &.@{fa-css-prefix}-lg { 17 | left: (-@fa-li-width + (4em / 14)); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/scss/_core.scss: -------------------------------------------------------------------------------- 1 | // Base Class Definition 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix} { 5 | display: inline-block; 6 | font: normal normal normal 14px/1 FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | } 12 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/scss/_list.scss: -------------------------------------------------------------------------------- 1 | // List Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-ul { 5 | padding-left: 0; 6 | margin-left: $fa-li-width; 7 | list-style-type: none; 8 | > li { position: relative; } 9 | } 10 | .#{$fa-css-prefix}-li { 11 | position: absolute; 12 | left: -$fa-li-width; 13 | width: $fa-li-width; 14 | top: (2em / 14); 15 | text-align: center; 16 | &.#{$fa-css-prefix}-lg { 17 | left: -$fa-li-width + (4em / 14); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/scss/font-awesome.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | 6 | @import "variables"; 7 | @import "mixins"; 8 | @import "path"; 9 | @import "core"; 10 | @import "larger"; 11 | @import "fixed-width"; 12 | @import "list"; 13 | @import "bordered-pulled"; 14 | @import "spinning"; 15 | @import "rotated-flipped"; 16 | @import "stacked"; 17 | @import "icons"; 18 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/less/font-awesome.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | 6 | @import "variables.less"; 7 | @import "mixins.less"; 8 | @import "path.less"; 9 | @import "core.less"; 10 | @import "larger.less"; 11 | @import "fixed-width.less"; 12 | @import "list.less"; 13 | @import "bordered-pulled.less"; 14 | @import "spinning.less"; 15 | @import "rotated-flipped.less"; 16 | @import "stacked.less"; 17 | @import "icons.less"; 18 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/less/stacked.less: -------------------------------------------------------------------------------- 1 | // Stacked Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-stack { 5 | position: relative; 6 | display: inline-block; 7 | width: 2em; 8 | height: 2em; 9 | line-height: 2em; 10 | vertical-align: middle; 11 | } 12 | .@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x { 13 | position: absolute; 14 | left: 0; 15 | width: 100%; 16 | text-align: center; 17 | } 18 | .@{fa-css-prefix}-stack-1x { line-height: inherit; } 19 | .@{fa-css-prefix}-stack-2x { font-size: 2em; } 20 | .@{fa-css-prefix}-inverse { color: @fa-inverse; } 21 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/scss/_stacked.scss: -------------------------------------------------------------------------------- 1 | // Stacked Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-stack { 5 | position: relative; 6 | display: inline-block; 7 | width: 2em; 8 | height: 2em; 9 | line-height: 2em; 10 | vertical-align: middle; 11 | } 12 | .#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x { 13 | position: absolute; 14 | left: 0; 15 | width: 100%; 16 | text-align: center; 17 | } 18 | .#{$fa-css-prefix}-stack-1x { line-height: inherit; } 19 | .#{$fa-css-prefix}-stack-2x { font-size: 2em; } 20 | .#{$fa-css-prefix}-inverse { color: $fa-inverse; } 21 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /lib/jsgif/b64.js: -------------------------------------------------------------------------------- 1 | function encode64(input) { 2 | var output = "", i = 0, l = input.length, 3 | key = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", 4 | chr1, chr2, chr3, enc1, enc2, enc3, enc4; 5 | while (i < l) { 6 | chr1 = input.charCodeAt(i++); 7 | chr2 = input.charCodeAt(i++); 8 | chr3 = input.charCodeAt(i++); 9 | enc1 = chr1 >> 2; 10 | enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 11 | enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 12 | enc4 = chr3 & 63; 13 | if (isNaN(chr2)) enc3 = enc4 = 64; 14 | else if (isNaN(chr3)) enc4 = 64; 15 | output = output + key.charAt(enc1) + key.charAt(enc2) + key.charAt(enc3) + key.charAt(enc4); 16 | } 17 | return output; 18 | } 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "like-like-effect-generator", 3 | "version": "1.0.0", 4 | "description": "Twitter's Like-like effect animation GIF generator", 5 | "main": "null", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/WL-Amigo/LikeLikeEffectGenerator.git" 12 | }, 13 | "author": "Amigo (WhiteLuckers)", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/WL-Amigo/LikeLikeEffectGenerator/issues" 17 | }, 18 | "homepage": "https://github.com/WL-Amigo/LikeLikeEffectGenerator#readme", 19 | "devDependencies": { 20 | "gulp": "^3.9.1", 21 | "gulp-webserver": "^0.9.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/less/rotated-flipped.less: -------------------------------------------------------------------------------- 1 | // Rotated & Flipped Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); } 5 | .@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); } 6 | .@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); } 7 | 8 | .@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); } 9 | .@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1, 2); } 10 | 11 | // Hook for IE8-9 12 | // ------------------------- 13 | 14 | :root .@{fa-css-prefix}-rotate-90, 15 | :root .@{fa-css-prefix}-rotate-180, 16 | :root .@{fa-css-prefix}-rotate-270, 17 | :root .@{fa-css-prefix}-flip-horizontal, 18 | :root .@{fa-css-prefix}-flip-vertical { 19 | filter: none; 20 | } 21 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/less/spinning.less: -------------------------------------------------------------------------------- 1 | // Spinning Icons 2 | // -------------------------- 3 | 4 | .@{fa-css-prefix}-spin { 5 | -webkit-animation: fa-spin 2s infinite linear; 6 | animation: fa-spin 2s infinite linear; 7 | } 8 | 9 | @-webkit-keyframes fa-spin { 10 | 0% { 11 | -webkit-transform: rotate(0deg); 12 | transform: rotate(0deg); 13 | } 14 | 100% { 15 | -webkit-transform: rotate(359deg); 16 | transform: rotate(359deg); 17 | } 18 | } 19 | 20 | @keyframes fa-spin { 21 | 0% { 22 | -webkit-transform: rotate(0deg); 23 | transform: rotate(0deg); 24 | } 25 | 100% { 26 | -webkit-transform: rotate(359deg); 27 | transform: rotate(359deg); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/scss/_spinning.scss: -------------------------------------------------------------------------------- 1 | // Spinning Icons 2 | // -------------------------- 3 | 4 | .#{$fa-css-prefix}-spin { 5 | -webkit-animation: fa-spin 2s infinite linear; 6 | animation: fa-spin 2s infinite linear; 7 | } 8 | 9 | @-webkit-keyframes fa-spin { 10 | 0% { 11 | -webkit-transform: rotate(0deg); 12 | transform: rotate(0deg); 13 | } 14 | 100% { 15 | -webkit-transform: rotate(359deg); 16 | transform: rotate(359deg); 17 | } 18 | } 19 | 20 | @keyframes fa-spin { 21 | 0% { 22 | -webkit-transform: rotate(0deg); 23 | transform: rotate(0deg); 24 | } 25 | 100% { 26 | -webkit-transform: rotate(359deg); 27 | transform: rotate(359deg); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/less/path.less: -------------------------------------------------------------------------------- 1 | /* FONT PATH 2 | * -------------------------- */ 3 | 4 | @font-face { 5 | font-family: 'FontAwesome'; 6 | src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}'); 7 | src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'), 8 | url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'), 9 | url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'), 10 | url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg'); 11 | // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 12 | font-weight: normal; 13 | font-style: normal; 14 | } 15 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/scss/_path.scss: -------------------------------------------------------------------------------- 1 | /* FONT PATH 2 | * -------------------------- */ 3 | 4 | @font-face { 5 | font-family: 'FontAwesome'; 6 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); 7 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), 8 | url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), 9 | url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), 10 | url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); 11 | //src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 12 | font-weight: normal; 13 | font-style: normal; 14 | } 15 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/scss/_rotated-flipped.scss: -------------------------------------------------------------------------------- 1 | // Rotated & Flipped Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } 5 | .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } 6 | .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } 7 | 8 | .#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } 9 | .#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } 10 | 11 | // Hook for IE8-9 12 | // ------------------------- 13 | 14 | :root .#{$fa-css-prefix}-rotate-90, 15 | :root .#{$fa-css-prefix}-rotate-180, 16 | :root .#{$fa-css-prefix}-rotate-270, 17 | :root .#{$fa-css-prefix}-flip-horizontal, 18 | :root .#{$fa-css-prefix}-flip-vertical { 19 | filter: none; 20 | } 21 | -------------------------------------------------------------------------------- /src/PSquare.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | namespace LLEAG { 5 | 6 | const PStarInnerRadiusRate = 0.55; 7 | 8 | export class PSquare extends PSimple { 9 | 10 | protected generateParticlePath(drawer: svgjs.Doc): svgjs.Path{ 11 | let pathCommands = ""; 12 | pathCommands += "M " + (-this.size).toString() + "," + (this.size).toString(); 13 | pathCommands += " L " + (this.size).toString() + "," + (this.size).toString(); 14 | pathCommands += " L " + (this.size).toString() + "," + (-this.size).toString(); 15 | pathCommands += " L " + (-this.size).toString() + "," + (-this.size).toString() + " z"; 16 | return drawer.path(pathCommands).fill(getHexColor(this.color)); 17 | } 18 | 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /lib/jscolor/jscolor-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jscolor Example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Example 1

15 | Color: 16 | 17 | 18 | 19 |

Example 2

20 | 21 | 24 | 25 | HEX value: 26 | 27 | 32 | 33 | 34 | 35 |

Check out more examples at jscolor.com!

36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/PTriangle.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | namespace LLEAG { 5 | 6 | const PStarInnerRadiusRate = 0.55; 7 | 8 | export class PTriangle extends PSimple { 9 | 10 | protected generateParticlePath(drawer: svgjs.Doc): svgjs.Path{ 11 | let pathCommands = ""; 12 | for(let i = 0; i < 3; i++){ 13 | let x = Math.cos(Math.PI * 2 / 3 * i) * this.size; 14 | let y = Math.sin(Math.PI * 2 / 3 * i) * this.size; 15 | if(i == 0) pathCommands += "M "; 16 | else pathCommands += "L "; 17 | pathCommands += x.toString() + "," + y.toString(); 18 | if(i == 2) pathCommands += " z"; 19 | } 20 | return drawer.path(pathCommands).fill(getHexColor(this.color)); 21 | } 22 | 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "system", 5 | "moduleResolution": "node", 6 | "isolatedModules": false, 7 | "jsx": "react", 8 | "experimentalDecorators": true, 9 | "emitDecoratorMetadata": true, 10 | "declaration": false, 11 | "noImplicitAny": false, 12 | "noImplicitUseStrict": false, 13 | "removeComments": true, 14 | "noLib": false, 15 | "outDir": "../lib/LLEAG10th/", 16 | "outFile": "../lib/LikeEffectGenerator10th.js", 17 | "preserveConstEnums": true, 18 | "suppressImplicitAnyIndexErrors": true 19 | }, 20 | "exclude": [ 21 | "node_modules", 22 | "typings/browser", 23 | "typings/browser.d.ts" 24 | ], 25 | "compileOnSave": true, 26 | "buildOnSave": false, 27 | "atom": { 28 | "rewriteTsconfig": true 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /memo: -------------------------------------------------------------------------------- 1 | TODO 2 | ====== 3 | 4 | * 「連番PNGをZIPでダウンロード」機能(JSZipにBase64エンコードされたデータを追加する機能がある(しかもちゃんとcanvasから画像データを得る目的との記述有り)のでそれを利用する) <- 済 5 | * GIFEncoderOnlyGlobal.jsにおいて、最初に最も参考になるフレームを元にグローバルパレットを作成し、以降それを利用するようにエンコーダを書き換える <- 済 6 | 7 | 8 | 参考資料 9 | ========== 10 | 11 | canvasにローカルの画像ファイルを描画するには : 12 | http://d.hatena.ne.jp/oovu70/20111122/p1 13 | 14 | canvas to svg : 15 | http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#canvas_to_svg 16 | 17 | javascriptでSVG生成 : 18 | http://www.h6.dion.ne.jp/~lib-k/SVGByJavaScript/SVGByJavaScriptDOM.html 19 | 20 | canvg (SVG to Canvas Renderer) : 21 | https://github.com/gabelerner/canvg 22 | 23 | javascriptで画像の本来の幅・高さを得る方法 : 24 | http://d.hatena.ne.jp/uupaa/20090602/1243933843 25 | 26 | 画像を組み込む - canvas - html5.jp : 27 | http://www.html5.jp/canvas/how6.html 28 | 29 | GIFフォーマットの詳細 : 30 | http://www.tohoho-web.com/wwwgif.htm 31 | 32 | 33 | Design 34 | -------- 35 | 36 | ChromeでエクスプローラからファイルをD&Dする : 37 | http://d.hatena.ne.jp/umorigu/20120610/1339282010 38 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/less/mixins.less: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------- 3 | 4 | .fa-icon() { 5 | display: inline-block; 6 | font: normal normal normal 14px/1 FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | } 12 | 13 | .fa-icon-rotate(@degrees, @rotation) { 14 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation); 15 | -webkit-transform: rotate(@degrees); 16 | -ms-transform: rotate(@degrees); 17 | transform: rotate(@degrees); 18 | } 19 | 20 | .fa-icon-flip(@horiz, @vert, @rotation) { 21 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation, mirror=1); 22 | -webkit-transform: scale(@horiz, @vert); 23 | -ms-transform: scale(@horiz, @vert); 24 | transform: scale(@horiz, @vert); 25 | } 26 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/blank.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML KickStart Elements 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |

22 |

23 | This example is blank

24 |

Add some HTML KickStart Elements to see the magic happen

25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/fonts/font-awesome-4.2.0/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------- 3 | 4 | @mixin fa-icon() { 5 | display: inline-block; 6 | font: normal normal normal 14px/1 FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | } 12 | 13 | @mixin fa-icon-rotate($degrees, $rotation) { 14 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); 15 | -webkit-transform: rotate($degrees); 16 | -ms-transform: rotate($degrees); 17 | transform: rotate($degrees); 18 | } 19 | 20 | @mixin fa-icon-flip($horiz, $vert, $rotation) { 21 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); 22 | -webkit-transform: scale($horiz, $vert); 23 | -ms-transform: scale($horiz, $vert); 24 | transform: scale($horiz, $vert); 25 | } 26 | -------------------------------------------------------------------------------- /LicenseForGeneratedImages.md: -------------------------------------------------------------------------------- 1 | 本ツールを使って作成した画像・素材の利用について 2 | ================================================== 3 | 4 | この文書は、「いいね風エフェクトアニメジェネレータを使用して作成したGIF/PNG/SVG画像の利用」についての情報提供を目的とするものです。ツールそのものの規約(ライセンス)については、同リポジトリ内の LICENSE をご参照下さい。 5 | 6 | ※本文書は、事前の予告・通知なく変更される可能性があります。 7 | 8 | 9 | ## 著作権について 10 | 11 | 本ツールが生成したエフェクト部分の画像(ZIPでダウンロード可能なSVG画像)についての著作権は、本ツールの作者(アミーゴ)が保有しますが、後述の例外を除く利用については、画像の利用(合成・加工等)に関して一切制限を課さないこととします。商用/非商用の別などは問いません。クレジット表記も任意で構いません。 12 | 13 | 本ツールに入力され合成された画像(GIFアニメファイル、ZIPでダウンロード可能なPNG画像)についての著作権は、その入力された画像の著作権と作者の著作権の両方によって構成されるものとしますが、これについても、後述の例外を除く利用については、前述のエフェクト部分を合成する利用とみなし、作者から制限を課すことはありません。入力として使った元画像の著作権や利用規約等は十分考慮するようにしてください。 14 | 15 | ### 例外 16 | 17 | * 著作者を偽っての発信・発表等(自作発言等) 18 | * 素材としての再配布(素材集等への収録もご遠慮下さい) 19 | 20 | 上記の例外は、「本ツールが生成したエフェクト部分」にのみ適用されます。本ツールに入力された画像には適用されません。 21 | 22 | 23 | ## 注意事項 24 | 25 | 本ツールは、某SNSの機能の一部で使われているエフェクトに触発されて制作されたものですが、本ツールを利用して作成した画像を発表する際、そのSNSのブランド(サービス名、アイコンなど)を利用することはお控え下さい(特に商用利用する場合)。 26 | 27 | 28 | ## 免責事項 29 | 30 | 本ツールを利用して作成した画像・素材等を利用したことにより発生したいかなる損害・トラブル等に関して、作者のアミーゴは一切責任を負わないこととします。 31 | -------------------------------------------------------------------------------- /src/PCircle.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | namespace LLEAG { 6 | 7 | export class PCircle extends ParticleBase { 8 | public generateSVGTree(t: number): svgjs.G { 9 | // check if t > lifeTime 10 | if(t > this.lifeTime) return null; 11 | 12 | // create SVG Circle 13 | let container = document.createElement("div"); 14 | let drawer = SVG(container); 15 | let circle = drawer.circle(this.size).translate(-this.size / 2, -this.size / 2).fill(getHexColor(this.color)); 16 | 17 | // apply disappearing 18 | let disappearingRate = this.calcDisappearingRate(t); 19 | let currentGroup = drawer.group().scale(disappearingRate, disappearingRate).add(circle); 20 | 21 | // apply translate 22 | let translateXY = this.getBaseXY(t); 23 | return drawer.group().translate(translateXY.x, translateXY.y).add(currentGroup); 24 | }; 25 | } 26 | 27 | } 28 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/license.txt: -------------------------------------------------------------------------------- 1 | Copyright © 2011-2012 Joshua Gatcke http://www.99lime.com | HTML KickStart 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /lib/jsgif/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2010-2014 Kevin Kwok 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /src/PStar.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | namespace LLEAG { 5 | 6 | const PStarInnerRadiusRate = 0.55; 7 | 8 | export class PStar extends PSimple { 9 | 10 | protected generateParticlePath(drawer: svgjs.Doc): svgjs.Path{ 11 | let pathCommands = ""; 12 | for(let i = 0; i < 5; i++){ 13 | let x = Math.cos(Math.PI * 2.0 / 5.0 * i) * this.size; 14 | let y = Math.sin(Math.PI * 2.0 / 5.0 * i) * this.size; 15 | if(i == 0) pathCommands += "M "; 16 | else pathCommands += "L "; 17 | pathCommands += x.toString() + "," + y.toString() + " "; 18 | 19 | x = Math.cos(Math.PI * (2.0 / 5.0 * i + 1.0 / 5.0)) * this.size * PStarInnerRadiusRate; 20 | y = Math.sin(Math.PI * (2.0 / 5.0 * i + 1.0 / 5.0)) * this.size * PStarInnerRadiusRate; 21 | pathCommands += "L " + x.toString() + "," + y.toString() + " "; 22 | if(i == 4) pathCommands += "z"; 23 | } 24 | return drawer.path(pathCommands).fill(getHexColor(this.color)); 25 | } 26 | 27 | } 28 | 29 | } 30 | -------------------------------------------------------------------------------- /lib/ZIPWorker.js: -------------------------------------------------------------------------------- 1 | importScripts('jszip.min.js'); 2 | 3 | self.addEventListener('message', function(event) { 4 | var evData = event.data; 5 | switch (evData.command) { 6 | case 'package': 7 | package(evData); 8 | break; 9 | } 10 | }); 11 | 12 | function package(evData) { 13 | var zip = new JSZip(); 14 | var dataArray = evData.dataArray; 15 | var svgSourceArray = evData.svgSourceArray; 16 | 17 | // package frame PNG images 18 | var zipFframes = zip.folder('frames'); 19 | for (var fIndex = 0; fIndex < dataArray.length; fIndex++) { 20 | zipFframes.file("frame" + fIndex + ".png", dataArray[fIndex], { 21 | base64: true 22 | }); 23 | } 24 | 25 | // package svg source files 26 | if (svgSourceArray != null) { 27 | var zipFsvg = zip.folder('effectSVG'); 28 | for (var sIndex = 0; sIndex < svgSourceArray.length; sIndex++) { 29 | zipFsvg.file("frame" + sIndex + ".svg", svgSourceArray[sIndex]); 30 | } 31 | } 32 | 33 | var content = zip.generate({ 34 | type: "blob" 35 | }); 36 | 37 | self.postMessage({ 38 | state: "finish", 39 | blob: content 40 | }); 41 | 42 | } 43 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/jquery.mousewheel-3.0.4.pack.js: -------------------------------------------------------------------------------- 1 | /*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net) 2 | * Licensed under the MIT License (LICENSE.txt). 3 | * 4 | * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers. 5 | * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. 6 | * Thanks to: Seamus Leahy for adding deltaX and deltaY 7 | * 8 | * Version: 3.0.4 9 | * 10 | * Requires: 1.2.2+ 11 | */ 12 | 13 | (function(d){function g(a){var b=a||window.event,i=[].slice.call(arguments,1),c=0,h=0,e=0;a=d.event.fix(b);a.type="mousewheel";if(a.wheelDelta)c=a.wheelDelta/120;if(a.detail)c=-a.detail/3;e=c;if(b.axis!==undefined&&b.axis===b.HORIZONTAL_AXIS){e=0;h=-1*c}if(b.wheelDeltaY!==undefined)e=b.wheelDeltaY/120;if(b.wheelDeltaX!==undefined)h=-1*b.wheelDeltaX/120;i.unshift(a,c,h,e);return d.event.handle.apply(this,i)}var f=["DOMMouseScroll","mousewheel"];d.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a= 14 | f.length;a;)this.addEventListener(f[--a],g,false);else this.onmousewheel=g},teardown:function(){if(this.removeEventListener)for(var a=f.length;a;)this.removeEventListener(f[--a],g,false);else this.onmousewheel=null}};d.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery); -------------------------------------------------------------------------------- /lib/jsgif/animWorker.js: -------------------------------------------------------------------------------- 1 | importScripts('LZWEncoder.js', 'NeuQuant.js', 'GIFEncoder.js'); /* imports three scripts */ 2 | 3 | self.onmessage = function(event) { 4 | //console.log("message!"); 5 | //alert("message"); 6 | //self.postMessage(event.data); 7 | //return; 8 | var frame_index, 9 | frame_length, 10 | height, 11 | width, 12 | delay, 13 | imageData; //get it from onmessage 14 | 15 | frame_index = event.data["frame_index"]; 16 | frame_length = event.data["frame_length"]; 17 | height = event.data["height"]; 18 | width = event.data["width"]; 19 | imageData = event.data["imageData"]; 20 | delay = event.data["delay"]; 21 | 22 | var encoder = new GIFEncoder(); //create a new GIFEncoder for every new job 23 | encoder.setRepeat(0); //0 -> loop forever 24 | //1+ -> loop n times then stop 25 | encoder.setQuality(1); 26 | encoder.setSize(width, height); 27 | encoder.setDelay(delay); //go to next frame every n milliseconds 28 | 29 | if(frame_index == 0) 30 | { 31 | 32 | encoder.start(); 33 | } 34 | else 35 | { 36 | //alert(); 37 | encoder.cont(); 38 | encoder.setProperties(true, false); //started, firstFrame 39 | } 40 | 41 | encoder.addFrame(imageData, true); 42 | if(frame_length == frame_index) 43 | { 44 | encoder.finish(); 45 | } 46 | self.postMessage({"frame_index":frame_index, "frame_data":encoder.stream().getData()}) //on the page, search for the GIF89a to see the frame_index 47 | }; -------------------------------------------------------------------------------- /src/PPopCircle.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | namespace LLEAG { 6 | 7 | export class PPopCircle extends ParticleBase { 8 | 9 | public generateSVGTree(t: number): svgjs.G { 10 | // check if t > lifeTime 11 | if(t > this.lifeTime) return null; 12 | 13 | // create SVG Path 14 | let container = document.createElement("div"); 15 | let drawer = SVG(container); 16 | let pathData = ""; 17 | 18 | // draw outer circle 19 | pathData = 'M 0,-' + this.size + ' A ' + this.size + 20 | ',' + this.size + ' 0 1,0 0,' + this.size + 21 | ' A ' + this.size + ',' + this.size + 22 | ' 0 1,0 0,-' + this.size + ' z'; 23 | 24 | // draw inner circle if this is disappearing 25 | let disappearingRate = this.calcDisappearingRate(t); 26 | if(disappearingRate != 1.0){ 27 | let radius2 = easeOutCubic(1.0 - disappearingRate) * this.size; 28 | pathData += ' M 0,-' + radius2 + ' A ' + radius2 + ',' + radius2 + ' 0 1,1 0,' + radius2 + ' A ' + radius2 + ',' + radius2 + ' 0 1,1 0,-' + radius2 + ' z'; 29 | } 30 | 31 | // set attributes 32 | let path = drawer.path(pathData).fill(getHexColor(this.color)).attr("fill-rule", "nonzero"); 33 | 34 | // apply translate 35 | let translateXY = this.getBaseXY(t); 36 | return drawer.group().translate(translateXY.x, translateXY.y).add(path); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /experiment/writeOutCanvas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Like Effect Generator 8 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 |
26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 | 35 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /lib/custom.css: -------------------------------------------------------------------------------- 1 | /* 2 | Base 3 | */ 4 | body.override { 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | /* 10 | Heading 11 | */ 12 | div.header { 13 | height: 160px; 14 | width: 100%; 15 | background-color: lightcoral; 16 | } 17 | 18 | div.header .inner { 19 | display: block; 20 | width: 80%; 21 | margin-left: auto; 22 | margin-right: auto; 23 | } 24 | 25 | /* 26 | Footer 27 | */ 28 | div.footer { 29 | padding-top: 40px; 30 | margin-top: 40px; 31 | padding-bottom: 40px; 32 | width: 100%; 33 | background-color: lightcoral; 34 | text-align: center; 35 | } 36 | 37 | /* 38 | Body Designing 39 | */ 40 | .block-center { 41 | display: block; 42 | margin-left: auto; 43 | margin-right: auto; 44 | } 45 | div.file-drop-area { 46 | position: relative; 47 | max-width: 480px; 48 | height: 100px; 49 | } 50 | input.file-drop-area { 51 | position: relative; 52 | opacity: 0; 53 | z-index: 2; 54 | width: 100%; 55 | height: 100%; 56 | } 57 | div.file-drop-area .custom-design { 58 | position: absolute; 59 | top: 0px; 60 | left: 0px; 61 | z-index: 1; 62 | background-color: lightcoral; 63 | background-image: url("../res/File.svg"); 64 | background-position: center; 65 | background-repeat: no-repeat; 66 | max-width: 600px; 67 | width: 100%; 68 | height: 100px; 69 | padding-top: 30px; 70 | text-align: center; 71 | -webkit-border-radius: 10px; 72 | -moz-border-radius: 10px; 73 | border-radius: 10px; 74 | } 75 | .warning { 76 | color: #D00; 77 | } 78 | .tips { 79 | color: #25c; 80 | } 81 | .mode-select { 82 | color: #ff589f; 83 | } 84 | .mode-select a:link, 85 | .mode-select a:hover, 86 | .mode-select a:active, 87 | .mode-select a:visited { 88 | color: #ff589f; 89 | text-decoration: none; 90 | } 91 | -------------------------------------------------------------------------------- /lib/spawnWorkers.js: -------------------------------------------------------------------------------- 1 | // this needs... 2 | // * filer-util.js 3 | // * FileSaver.min.js 4 | 5 | // spawn web workers 6 | var legWorker = new Worker("lib/MainWorker.js"); 7 | var getGIF = null; 8 | var blobGIF = null; 9 | legWorker.addEventListener('message', function(event) { 10 | var evData = event.data; 11 | switch (evData.state) { 12 | case 'progress': 13 | document.getElementById('progressBar').setAttribute("value", evData.value); 14 | document.getElementById('progressBar').setAttribute("max", evData.max); 15 | break; 16 | 17 | case 'finish': 18 | document.getElementById('progressBlock').setAttribute("style", "display: none;"); 19 | document.getElementById('targetImg').src = evData.dataURL; 20 | document.getElementById('targetImg').removeAttribute("style"); 21 | document.getElementById('downloadGIFButton1').setAttribute("class", "orange"); 22 | document.getElementById('downloadGIFButton1').removeAttribute("disabled"); 23 | document.getElementById('downloadGIFButton2').setAttribute("class", "orange"); 24 | document.getElementById('downloadGIFButton2').removeAttribute("disabled"); 25 | blobGIF = Util.dataURLToBlob(evData.dataURL); 26 | getGIF = function(){ 27 | saveAs(blobGIF, "LikeEffectAnimation.gif"); 28 | } 29 | } 30 | }); 31 | 32 | var zipWorker = new Worker("lib/ZIPWorker.js"); 33 | var getZIP = null; 34 | zipWorker.addEventListener('message', function(event) { 35 | var evData = event.data; 36 | switch (evData.state) { 37 | case 'finish': 38 | document.getElementById('downloadZIPButton').setAttribute("class", "orange"); 39 | document.getElementById('downloadZIPButton').removeAttribute("disabled"); 40 | getZIP = function() { 41 | saveAs(evData.blob, "allFrames.zip"); 42 | } 43 | } 44 | }) 45 | -------------------------------------------------------------------------------- /lib/MainWorker.js: -------------------------------------------------------------------------------- 1 | importScripts('jsgif/LZWEncoder.js', 'jsgif/NeuQuant.js', 'jsgif/GIFEncoderOnlyGlobal.js', 'jsgif/b64.js'); 2 | 3 | self.addEventListener('message', function(event) { 4 | var evData = event.data; 5 | switch (evData.command) { 6 | case 'encode': 7 | encode(evData); 8 | break; 9 | } 10 | }); 11 | 12 | function encode(evData) { 13 | var nFrames = evData.nFrames, 14 | height = evData.height, 15 | width = evData.width, 16 | frameRate = evData.frameRate, 17 | quality = evData.quality; 18 | gpFrameIndexArray = evData.gpFrameIndexArray, 19 | imageDataArray = evData.imageDataArray; 20 | 21 | //console.log(JSON.stringify(imageDataArray)); 22 | //console.log(JSON.stringify(evData)); 23 | 24 | var encoder = new GIFEncoder(); 25 | encoder.setRepeat(0); 26 | encoder.setFrameRate(frameRate); 27 | encoder.setQuality(quality); 28 | 29 | // set size 30 | encoder.setSize(width, height); 31 | 32 | // generate global palette 33 | var imageDataArrayGP = []; 34 | for(var idgpIndex = 0; idgpIndex < gpFrameIndexArray.length; idgpIndex++){ 35 | imageDataArrayGP.push(imageDataArray[gpFrameIndexArray[idgpIndex]]); 36 | } 37 | if(!encoder.analyzeGlobalPalleteImage(imageDataArrayGP, gpFrameIndexArray.length, true)){ 38 | throw new Error("Something wrong in analyzeGlobalPalleteImage()"); 39 | } 40 | 41 | // generate animated GIF 42 | encoder.start(); 43 | for(var fIndex = 0; fIndex < imageDataArray.length; fIndex++){ 44 | encoder.addFrame(imageDataArray[fIndex], true); 45 | self.postMessage({ state: 'progress', value: fIndex, max: imageDataArray.length - 1 }); 46 | } 47 | encoder.finish(); 48 | var binaryGIF = encoder.stream().getData(); 49 | var dataURL = 'data:image/gif;base64,' + encode64(binaryGIF); 50 | 51 | self.postMessage({ state: 'finish', dataURL: dataURL }); 52 | //self.close(); 53 | } 54 | -------------------------------------------------------------------------------- /src/PSimple.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | namespace LLEAG { 6 | 7 | export interface PSimpleOptions extends PBaseOptions { 8 | vSpinX: number; 9 | vSpinY: number; 10 | vSpinZ: number; 11 | initSpinZ: number; 12 | } 13 | 14 | export abstract class PSimple extends ParticleBase { 15 | 16 | private vSpinX: number; 17 | private vSpinY: number; 18 | private vSpinZ: number; 19 | private initSpinZ: number; 20 | 21 | constructor(options: PSimpleOptions){ 22 | super(options); 23 | this.vSpinX = options.vSpinX; 24 | this.vSpinY = options.vSpinY; 25 | this.vSpinZ = options.vSpinZ; 26 | this.initSpinZ = options.initSpinZ; 27 | } 28 | 29 | public generateSVGTree(t: number): svgjs.G { 30 | // check if t > lifeTime 31 | if(t > this.lifeTime) return null; 32 | 33 | // create SVG Path 34 | let container = document.createElement("div"); 35 | let drawer = SVG(container); 36 | let path = this.generateParticlePath(drawer); 37 | 38 | // apply spin by Z axis 39 | let currentGroup = drawer.group().rotate(360.0 * (this.initSpinZ + t * this.vSpinZ)).add(path); 40 | 41 | // apply spin by XY axis + disappearing 42 | let disappearingRate; 43 | if(t > this.lifeTime * (1.0 - this.disappearDurationRate)) disappearingRate = (this.lifeTime - t) / (this.lifeTime * this.disappearDurationRate); 44 | else disappearingRate = 1.0 45 | currentGroup = drawer.group().scale(Math.cos(Math.PI * 2.0 * (this.vSpinY * t)),Math.cos(Math.PI * 2.0 * (this.vSpinX * t)) * disappearingRate).add(currentGroup); 46 | 47 | // apply translate 48 | let translateXY = this.getBaseXY(t); 49 | currentGroup = drawer.group().translate(translateXY.x, translateXY.y).add(currentGroup); 50 | 51 | return currentGroup; 52 | } 53 | 54 | protected abstract generateParticlePath(drawer: svgjs.Doc): svgjs.Path; 55 | } 56 | 57 | } 58 | -------------------------------------------------------------------------------- /res/Mode-other.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/README.md: -------------------------------------------------------------------------------- 1 | # HTML KickStart # 2 | by Joshua Gatcke 3 | http://www.99lime.com 4 | Version: 0.94 5 | 6 | ## What is HTML KickStart? ## 7 | 8 | HTML KickStart is an ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10's of hours on your next web project. 9 | 10 | HTML KickStart includes everything you need to rapidly create website layouts – things like slideshows, menus, flexible grids, image placeholders, buttons, and more – saving you a ton of time so you can produce faster and make more money. 11 | 12 | Bonus! All HTML KickStart Elements are fully Browser tested, they even gracefully degrade ;) 13 | 14 | ## Perfect for Wireframing in HTML ## 15 | 16 | HTML KickStart has everything you need to rapidly create HTML Page Layouts, perfect for Wireframing in HTML. 17 | Layouts that used to take hours now take minutes. 18 | 19 | ## Getting Started ## 20 | 21 | 1. Download HTML KickStart 22 | 2. Open blank.html in your favorite text editor 23 | 3. Start adding KickStart Elements to blank.html: (http://www.99lime.com/elements/) 24 | 4. Save blank.html and open in your favorite Web Browser 25 | 5. Have fun! 26 | 27 | 28 | ## HTML KickStart is FREE and Open Source. ## 29 | ### Release Under the MIT Open Source License. ### 30 | 31 | Copyright © 2011-2012 Joshua Gatcke http://www.99lime.com | HTML KickStart 32 | 33 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 34 | 35 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 36 | 37 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 38 | -------------------------------------------------------------------------------- /experiment/writeOutAnimGif.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Like Effect Generator 8 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 | 30 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /res/Mode-selecting.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 63 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /src/Utils.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | namespace LLEAG { 4 | 5 | // color space conversion Function 6 | // from http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion 7 | 8 | /** 9 | * Converts an HSL color value to RGB. Conversion formula 10 | * adapted from http://en.wikipedia.org/wiki/HSL_color_space. 11 | * Assumes h, s, and l are contained in the set [0, 1] and 12 | * returns r, g, and b in the set [0, 255]. 13 | * 14 | * @param Number h The hue 15 | * @param Number s The saturation 16 | * @param Number l The lightness 17 | * @return Array The RGB representation 18 | */ 19 | export function hslToRGB(h: number, s: number, l: number): RGB { 20 | var r, g, b; 21 | 22 | if (s == 0) { 23 | r = g = b = l; // achromatic 24 | } else { 25 | var hue2rgb = function hue2rgb(p, q, t) { 26 | if (t < 0) t += 1; 27 | if (t > 1) t -= 1; 28 | if (t < 1 / 6) return p + (q - p) * 6 * t; 29 | if (t < 1 / 2) return q; 30 | if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; 31 | return p; 32 | } 33 | 34 | var q = l < 0.5 ? l * (1 + s) : l + s - l * s; 35 | var p = 2 * l - q; 36 | r = hue2rgb(p, q, h + 1 / 3); 37 | g = hue2rgb(p, q, h); 38 | b = hue2rgb(p, q, h - 1 / 3); 39 | } 40 | 41 | return { 42 | r: Math.round(r * 255), 43 | g: Math.round(g * 255), 44 | b: Math.round(b * 255) 45 | }; 46 | } 47 | 48 | export function getHexColor(color: RGB): string { 49 | // solution from http://stackoverflow.com/a/4090628 50 | let rs = ("0" + color.r.toString(16)).slice(-2); 51 | let gs = ("0" + color.g.toString(16)).slice(-2); 52 | let bs = ("0" + color.b.toString(16)).slice(-2); 53 | 54 | return "#" + rs + gs + bs; 55 | } 56 | 57 | // easing functions from http://gizma.com/easing/ 58 | export function easeOutCubic(t: number) { 59 | t--; 60 | return (t * t * t + 1); 61 | }; 62 | 63 | export function easeInCubic(t: number) { 64 | return t*t*t; 65 | }; 66 | 67 | export function easeInOutCubic(t: number) { 68 | t *= 2; 69 | if (t < 1) return t * t * t / 2; 70 | t -= 2; 71 | return (t * t * t + 2) / 2; 72 | }; 73 | } 74 | -------------------------------------------------------------------------------- /experiment/writeOut.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Like Effect Generator 8 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |
48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /src/ParticleBase.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | namespace LLEAG { 5 | export let kX: number = 1; 6 | export let kY: number = 4.5; 7 | export let vLastY: number = -20.0; 8 | //export let g: number = kY * -vLastY; 9 | 10 | export let defaultX0: number = 0.0; 11 | export let defaultY0: number = -40.0; 12 | 13 | export interface PBaseOptions{ 14 | x0?: number; 15 | y0?: number; 16 | v0X: number; 17 | v0Y: number; 18 | size: number; 19 | lifeTime: number; 20 | disappearDurationRate: number; 21 | color: RGB; 22 | } 23 | 24 | export abstract class ParticleBase { 25 | 26 | protected x0: number; 27 | protected y0: number; 28 | protected v0X: number; 29 | protected v0Y: number; 30 | protected size: number; 31 | protected lifeTime: number; 32 | protected disappearDurationRate: number; 33 | protected color: RGB; 34 | 35 | constructor(options: PBaseOptions){ 36 | // init fields 37 | this.x0 = options.x0 || defaultX0; 38 | this.y0 = options.y0 || defaultY0; 39 | this.v0X = options.v0X; 40 | this.v0Y = options.v0Y; 41 | this.size = options.size; 42 | this.lifeTime = options.lifeTime; 43 | this.disappearDurationRate = options.disappearDurationRate; 44 | this.color = options.color; 45 | if(!this.checkColorConsistency()) throw "out of color range"; 46 | } 47 | 48 | protected getBaseXY(t: number): Point { 49 | // x = - (v0x / k) e^(-kt) + x0 + v0x / k 50 | // y = - ((k v0y + g) / k^2) e^(-kt) - g/k t + (y0 + ((k v0y + g) / k^2)) 51 | let retP: Point = { x: 0, y: 0 }; 52 | retP.x = (this.v0X / kX) * (1.0 - Math.exp(-kX * t)) + this.x0; 53 | let c0 = ((this.v0Y - vLastY) / kY) 54 | retP.y = c0 * (1.0 - Math.exp(-kY * t)) - vLastY * t + this.y0; 55 | 56 | return retP; 57 | } 58 | 59 | public abstract generateSVGTree(t: number): svgjs.G; 60 | 61 | private checkColorConsistency(): boolean { 62 | return this.color.r <= 255 && this.color.g <= 255 && this.color.b <= 255 && 63 | this.color.r >= 0 && this.color.g >= 0 && this.color.b >= 0; 64 | } 65 | 66 | protected calcDisappearingRate(t: number): number { 67 | return (t > this.lifeTime * (1.0 - this.disappearDurationRate)) ? (this.lifeTime - t) / (this.lifeTime * this.disappearDurationRate) : 1.0; 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/PopLineEffect.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | namespace LLEAG { 6 | 7 | export interface PLEOptions { 8 | lifeTime: number; 9 | lineWidthFactor: number; 10 | lineNumber? : number; 11 | lineColor?: RGB; 12 | } 13 | 14 | const PLELineSaturation = 0.8; 15 | const PLELineLightness = 0.7; 16 | 17 | export class PopLineEffect { 18 | 19 | private lifeTime: number; 20 | private lineWidthFactor: number; 21 | private lineNumber: number; 22 | private lineColor: RGB; 23 | 24 | constructor(options: PLEOptions){ 25 | this.lifeTime = options.lifeTime; 26 | this.lineWidthFactor = options.lineWidthFactor; 27 | 28 | this.lineNumber = options.lineNumber || 8; 29 | // guarantee that lineNumber is integer value 30 | this.lineNumber = Math.ceil(this.lineNumber); 31 | 32 | this.lineColor = options.lineColor || null; 33 | } 34 | 35 | public generateSVGTree(t: number, size: number){ 36 | // check if t > lifeTime 37 | if(t > this.lifeTime) return null; 38 | 39 | // create SVG group 40 | let container = document.createElement("div"); 41 | let drawer = SVG(container); 42 | let currentGroup = drawer.group(); 43 | 44 | // generate lines 45 | for(let i = 0; i < this.lineNumber; i++){ 46 | let baseX = Math.cos(Math.PI * 2 / this.lineNumber * i) * size * (1.0 + 0.1 * t); 47 | let baseY = Math.sin(Math.PI * 2 / this.lineNumber * i) * size * (1.0 + 0.1 * t); 48 | let startX = baseX * easeOutCubic(t / this.lifeTime); 49 | let startY = baseY * easeOutCubic(t / this.lifeTime); 50 | let color = this.lineColor; 51 | if(color == null){ 52 | // generate rainbow colors 53 | let hue = i / this.lineNumber * 2.0; 54 | if(hue > 1.0) hue -= 1.0; 55 | color = hslToRGB(hue, PLELineSaturation, PLELineLightness); 56 | } 57 | let lineWidth = size * this.lineWidthFactor; 58 | 59 | let line = drawer.line(startX, startY, baseX, baseY) 60 | .stroke({ color: getHexColor(color), width: lineWidth }).attr("stroke-linecap", "round"); 61 | currentGroup.add(line); 62 | } 63 | 64 | return currentGroup; 65 | } 66 | 67 | public getLifeTime(): number{ 68 | return this.lifeTime; 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/tiptip.css: -------------------------------------------------------------------------------- 1 | /* 2 | TipTip CSS - Version 1.2 3 | http://code.drewwilson.com/entry/tiptip-jquery-plugin 4 | */ 5 | 6 | #tiptip_holder { display: none; position: absolute; top: 0; left: 0; z-index: 99999; } 7 | #tiptip_holder.tip_top { padding-bottom: 5px; } 8 | #tiptip_holder.tip_bottom { padding-top: 5px; } 9 | #tiptip_holder.tip_right { padding-left: 5px; } 10 | #tiptip_holder.tip_left { padding-right: 5px; } 11 | 12 | #tiptip_content { 13 | font-size: 11px; 14 | color: #fff; 15 | text-shadow: 0 0 2px #000; 16 | padding: 4px 8px; 17 | border: 1px solid rgba(255,255,255,0.25); 18 | background:#212121; 19 | background-color: rgba(25,25,25,0.92); 20 | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000)); 21 | -webkit-border-radius: 3px; 22 | -moz-border-radius: 3px; 23 | border-radius: 3px; 24 | -webkit-box-shadow: 0 0 3px #555; 25 | -moz-box-shadow: 0 0 3px #555; 26 | box-shadow: 0 0 3px #555; 27 | *background:#212121; 28 | } 29 | 30 | #tiptip_arrow, #tiptip_arrow_inner { 31 | position: absolute; 32 | border-color: transparent; 33 | border-style: solid; 34 | border-width: 6px; 35 | height: 0; 36 | width: 0; 37 | } 38 | 39 | #tiptip_holder.tip_top #tiptip_arrow { 40 | border-top-color: #fff; 41 | border-top-color: rgba(255,255,255,0.35); 42 | } 43 | 44 | #tiptip_holder.tip_bottom #tiptip_arrow { 45 | border-bottom-color: #fff; 46 | border-bottom-color: rgba(255,255,255,0.35); 47 | } 48 | 49 | #tiptip_holder.tip_right #tiptip_arrow { 50 | border-right-color: #fff; 51 | border-right-color: rgba(255,255,255,0.35); 52 | } 53 | 54 | #tiptip_holder.tip_left #tiptip_arrow { 55 | border-left-color: #fff; 56 | border-left-color: rgba(255,255,255,0.35); 57 | } 58 | 59 | #tiptip_holder.tip_top #tiptip_arrow_inner { 60 | margin-top: -7px; 61 | margin-left: -6px; 62 | border-top-color: rgb(25,25,25); 63 | border-top-color: rgba(25,25,25,0.92); 64 | } 65 | 66 | #tiptip_holder.tip_bottom #tiptip_arrow_inner { 67 | margin-top: -5px; 68 | margin-left: -6px; 69 | border-bottom-color: rgb(25,25,25); 70 | border-bottom-color: rgba(25,25,25,0.92); 71 | } 72 | 73 | #tiptip_holder.tip_right #tiptip_arrow_inner { 74 | margin-top: -6px; 75 | margin-left: -5px; 76 | border-right-color: rgb(25,25,25); 77 | border-right-color: rgba(25,25,25,0.92); 78 | } 79 | 80 | #tiptip_holder.tip_left #tiptip_arrow_inner { 81 | margin-top: -6px; 82 | margin-left: -7px; 83 | border-left-color: rgb(25,25,25); 84 | border-left-color: rgba(25,25,25,0.92); 85 | } 86 | 87 | /* Webkit Hacks */ 88 | @media screen and (-webkit-min-device-pixel-ratio:0) { 89 | #tiptip_content { 90 | padding: 4px 8px 5px 8px; 91 | background-color: rgba(45,45,45,0.88); 92 | } 93 | #tiptip_holder.tip_bottom #tiptip_arrow_inner { 94 | border-bottom-color: rgba(45,45,45,0.88); 95 | } 96 | #tiptip_holder.tip_top #tiptip_arrow_inner { 97 | border-top-color: rgba(20,20,20,0.92); 98 | } 99 | } -------------------------------------------------------------------------------- /res/File.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | 20 | 38 | 40 | 41 | 43 | image/svg+xml 44 | 46 | 47 | 48 | 49 | 50 | 55 | 60 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /res/material/File.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | 20 | 38 | 40 | 41 | 43 | image/svg+xml 44 | 46 | 47 | 48 | 49 | 50 | 55 | 60 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /lib/FrontEnd-Common.js: -------------------------------------------------------------------------------- 1 | function confirmImageSize() { 2 | var kSVGNS = 'http://www.w3.org/2000/svg'; 3 | 4 | var size = parseInt(document.getElementById('generateSize').value); 5 | if (size.isNaN) { 6 | alert("サイズは半角数字のみで入力して下さい。"); 7 | return false; 8 | } 9 | 10 | var svgBlock = document.createElementNS(kSVGNS, 'svg'); 11 | svgBlock.setAttribute('width', size); 12 | svgBlock.setAttribute('height', size); 13 | svgBlock.setAttribute('viewBox', '0 0 ' + size + ' ' + size); 14 | svgBlock.setAttribute('xmlns', kSVGNS); 15 | svgBlock.setAttribute('version', '1.1'); 16 | 17 | var rectBlock = document.createElementNS(kSVGNS, 'rect'); 18 | rectBlock.setAttribute('x', '0'); 19 | rectBlock.setAttribute('y', '0'); 20 | rectBlock.setAttribute('width', size.toString()); 21 | rectBlock.setAttribute('height', size.toString()); 22 | rectBlock.setAttribute('stroke', '#CCC'); 23 | rectBlock.setAttribute('stroke-width', '4'); 24 | rectBlock.setAttribute('fill', 'none'); 25 | svgBlock.appendChild(rectBlock); 26 | 27 | var textBlock = document.createElementNS(kSVGNS, 'text'); 28 | textBlock.setAttribute('x', (size / 2).toString()); 29 | textBlock.setAttribute('y', (size / 2).toString()); 30 | textBlock.setAttribute('text-anchor', 'middle'); 31 | textBlock.setAttribute('font-family', 'sans-serif'); 32 | textBlock.setAttribute('font-size', '20'); 33 | textBlock.setAttribute('fill', '#CCC'); 34 | textBlock.innerHTML = size.toString() + ' x ' + size.toString(); 35 | svgBlock.appendChild(textBlock); 36 | 37 | var tempBlock = document.createElement('span'); 38 | tempBlock.appendChild(svgBlock); 39 | var canvasBlock = generateCanvasFromSVG(tempBlock.innerHTML, size); 40 | 41 | var targetImgBlock = document.getElementById('targetImg'); 42 | targetImgBlock.src = canvasBlock.toDataURL(); 43 | targetImgBlock.setAttribute("style", "display: block;"); 44 | } 45 | 46 | function loadImg() { 47 | 48 | var imgFile = document.getElementById('localImgFile').files[0]; 49 | if (!imgFile.type.match(/^image\/(png|jpeg|gif)$/)) { 50 | alert("png,jpg,gif以外の画像ファイルは扱えません。"); 51 | return; 52 | } 53 | 54 | var image = document.createElement('img'); 55 | image.crossOrigin = "anonymous"; 56 | image.setAttribute('style', 'width: auto; height: 200px'); 57 | image.setAttribute('id', 'iconImg'); 58 | var fileReader = new FileReader(); 59 | 60 | fileReader.onload = function(evt) { 61 | image.src = evt.target.result; 62 | document.getElementById('generateButton1').removeAttribute("disabled"); 63 | document.getElementById('generateButton1').setAttribute("class", "blue"); 64 | document.getElementById('generateButton2').removeAttribute("disabled"); 65 | document.getElementById('generateButton2').setAttribute("class", "blue"); 66 | }; 67 | 68 | fileReader.readAsDataURL(imgFile); 69 | 70 | var confirmBlock = document.getElementById('confirmLocalImg'); 71 | confirmBlock.innerHTML = ""; 72 | confirmBlock.appendChild(image); 73 | var confirmTextBlock = document.createElement('p'); 74 | confirmTextBlock.innerHTML = "準備が完了すると上に読み込んだ画像が表示されます。"; 75 | confirmBlock.appendChild(confirmTextBlock); 76 | } 77 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 99Lime.com HTML KickStart by Joshua Gatcke 3 | style.css 4 | 5 | */ 6 | 7 | /*--------------------------------- 8 | IMPORTS 9 | -----------------------------------*/ 10 | @import url(https://fonts.googleapis.com/css?family=Arimo:400,700); 11 | 12 | /*--------------------------------- 13 | OVERRIDES 14 | -----------------------------------*/ 15 | h1,h2,h3,h4,h5,h6{ 16 | font-family: "Arimo", arial, verdana, sans-serif; 17 | font-weight:normal; 18 | } 19 | 20 | thead th, 21 | tbody th{ 22 | font-family: "Arimo", arial, verdana, sans-serif; 23 | } 24 | 25 | button, 26 | a.btn, 27 | input[type="submit"], 28 | input[type="reset"], 29 | input[type="button"]{ 30 | font-family: "Arimo", arial, verdana, sans-serif; 31 | } 32 | 33 | .menu{ 34 | font-family: "Arimo", arial, verdana, sans-serif; 35 | } 36 | 37 | blockquote{ 38 | font-family: "Arimo", arial, verdana, sans-serif; 39 | } 40 | 41 | /*--------------------------------- 42 | LAYOUT 43 | -----------------------------------*/ 44 | body{ 45 | margin:0; 46 | padding:0 0 0 0; 47 | color:#000; 48 | background:#efefef url(css/img/gray_jean.png); 49 | font:normal 0.9em/150% 'Arimo', arial, verdana, sans-serif; 50 | text-shadow: 0 0 1px transparent; /* google font pixelation fix */ 51 | } 52 | 53 | #wrap{ 54 | width:100%; 55 | background:#fff; 56 | margin:30px auto 30px auto; 57 | padding:0 2%; 58 | border:1px solid #ccc; 59 | } 60 | 61 | 62 | #footer{ 63 | text-align:center; 64 | padding:20px; 65 | margin:0; 66 | border-top:1px solid #ddd; 67 | color:#999; 68 | font-size:0.8em; 69 | text-shadow:0px 1px 1px #fff; 70 | position: relative; 71 | top:0; 72 | left:0; 73 | background:#fff; 74 | } 75 | 76 | #link-top{ 77 | display:none; 78 | } 79 | 80 | /* NAV BAR*/ 81 | .navbar{ 82 | position:fixed; 83 | top:0; 84 | left:0; 85 | width: 100%; 86 | background:#000; 87 | color:#fff; 88 | z-index:1000; 89 | } 90 | 91 | .navbar #logo{ 92 | position:absolute; 93 | top:0; 94 | right:0; 95 | padding:0.5em 1em; 96 | font-size: 1.7em; 97 | color:#efefef; 98 | text-decoration:none; 99 | } 100 | 101 | .navbar span{ 102 | color:#86dc00; 103 | } 104 | 105 | 106 | .navbar ul{ 107 | display:inline-block; 108 | margin:0; 109 | padding:0; 110 | } 111 | 112 | .navbar li{ 113 | margin:0; 114 | padding:0; 115 | list-style-type:0; 116 | display:inline-block; 117 | } 118 | 119 | .navbar li a{ 120 | display:inline-block; 121 | color:#efefef; 122 | padding:1em 1.3em; 123 | text-decoration:none; 124 | text-transform: uppercase; 125 | line-height:100%; 126 | font-size: 1.2em; 127 | } 128 | 129 | .callout{ 130 | background:#4598ef;/*#86dc00;*/ 131 | padding:3em 0; 132 | color:#fff; 133 | box-shadow:inset 0 0 10px rgba(0,0,0,0.2); 134 | text-align: center; 135 | text-shadow:0px 1px 3px rgba(0,0,0,0.2); 136 | display:block; 137 | } 138 | .callout + div.grid{margin-top:50px;} 139 | a.callout{cursor:pointer;} 140 | .callout i.icon-4x{font-size:6em;} 141 | .callout h4{margin-bottom:30px;} 142 | .callout-top{margin:50px 0 0 0;} 143 | .callout p{margin-bottom:0;} 144 | .callout .button{margin-top:10px;} 145 | .callout.green{background:#19ad0b;/*#86dc00;*/} 146 | 147 | #mc_embed_signup{ 148 | padding:30px 0; 149 | } 150 | 151 | #ui-preview{ 152 | border:5px solid #ddd; 153 | margin:30px 0; 154 | display:block; 155 | } 156 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | いいねボタン風エフェクトアニメジェネレータ 2 | ============================================ 3 | 4 | [Webアプリはこちらから (Web App is available here)](http://wl-amigo.github.io/LikeLikeEffectGenerator/) 5 | 6 | (twitter's Like-like GIF animation generator) 7 | 8 | Twitterのいいねボタンを押した時っぽいGIFアニメを、好きな画像から生成出来るWebアプリです。 9 | 10 | This is a web application generates GIF animation like twitter's Like button, from any image you like. 11 | 12 | (This documentation is written in Japanese. At the moment, There is no English version of documentation. Sorry.) 13 | 14 | 15 | 16 | 動作環境 17 | ---------- 18 | 19 | 本アプリは、以下の環境で動作することを確認しています。 20 | 21 | * FireFox (44.0.2) on Ubuntu 14.04 LTS 22 | * Google Chrome (49.0.2623.75 (64-bit)) on Ubuntu 14.04 LTS 23 | * Google Chrome (49.0.2623.87 (32-bit)) on Windows 7 (64-bit) 24 | 25 | 26 | 使い方 27 | -------- 28 | 29 | 1. 「ここに使いたい画像をドラッグ＆ドロップ！」と書かれた場所に、生成元の画像ファイルをドラッグ＆ドロップします。(もしくは、その場所をクリックするとファイル選択画面が開きます) 30 | 2. 「生成！」ボタンを押します。しばらく待つと、生成結果のGIFアニメが表示されます。 31 | 3. 「GIFアニメをダウンロード」ボタンを押すと、生成したGIFアニメをダウンロード出来ます(表示されているGIFアニメを 右クリック->名前を付けて保存 でも大丈夫です)。また、ページ下部にある「連番PNGをZIPでダウンロード」ボタンを押すと、生成されたGIFアニメの元になっている連番PNG(減色前)をZIPで固めたものをダウンロード出来ます(おまけでエフェクトのみのSVGファイルも入ってます)。 32 | 33 | 34 | 設定可能なパラメータについて 35 | ------------------------------ 36 | 37 | ページ中央にある設定についての説明です。 38 | 39 | ### 「出現画像」 40 | 41 | * **出力サイズ(px)** : 生成するGIFアニメの1辺のピクセル数を指定します。大きいと生成にそれなりに時間がかかりますので注意して下さい。横にある「出力サイズを確認する」ボタンで、出力されるGIFの縦横サイズを確認出来ます(既にGIFアニメを生成していた場合、これを実行すると破棄されてしまいますのでご注意下さい)。 42 | * **画像を円形にトリミングする** : 入力された画像を先に円形にトリミング(切り抜き)してからGIFアニメを生成します。動作としては、まず入力画像の長辺を1辺の長さとする正方形の画像を生成し、その中央に入力画像を配置します(入力画像が正方形だった場合は何も起こりません)。その後、その画像いっぱいの正円で切り抜きを行います。 43 | * **押されてない時風の画像を付加する** : 入力画像を、透明度を維持したまま灰色に塗りつぶした画像を用意し、それをGIFアニメの最初の方に表示させます。この処理は画像の透明度に依存しますので、透明度が設定されていない画像ではうまく行きません(四角い灰色の画像が表示されてしまいます)。 44 | * **画像拡大時に補完しない** : 生成されるGIFのサイズが入力された画像サイズよりも大きい時に行われる入力画像の拡大出力において、補間を行わないようにします( = 最近傍法で拡大します)。ドット絵などを使用して生成する時にオススメです。(一部ブラウザは対応していない可能性があります。PC版FireFox, Chromeでは利用可能です) 45 | 46 | 47 | ### 「弾ける大きな丸のエフェクト」 48 | 49 | いいねボタンを押した直後に出てくる「弾ける大きな丸」の色を指定できます。色は「出現時の色」->「消滅時の色」と線形に変化します。 50 | 51 | 52 | ### 「飛び散る小さい丸のエフェクト」 53 | 54 | いいねボタンを押して、ハートマークと共に出てくる「飛び散る小さい丸」の色を指定できます。 55 | 56 | * **色の付け方** : 「虹色」か「指定色」が選べます。「虹色」の場合は、時計回りに虹色になるように自動で設定します。「指定色」の場合は、「色1(早く消える方)」と「色2(遅く消える方)」で指定した色を使用します。 57 | 58 | 59 | ### 「高度な設定」 60 | 61 | あまり使われ無さそうな特殊な設定です。 62 | 63 | * **クオンタイズ品質** : GIFアニメの生成に使用している [jsgif](https://github.com/antimatter15/jsgif) 内で使用されている [NeuQuant](https://github.com/devongovett/neuquant) に与える quality 値です(1 〜 30)。小さいほどクオンタイズ(減色)の品質が上がります(元の画像との誤差平均が小さくなる)が、計算にものすごい時間が掛かります。通常は10で問題ありません。 64 | 65 | 66 | 利用したライブラリ 67 | -------------------- 68 | 69 | * [jQuery](https://jquery.com/) 70 | * [canvg](https://github.com/gabelerner/canvg) : SVGからcanvasを得るために使用 71 | * [jsgif](https://github.com/antimatter15/jsgif) : 連番canvasからのGIFアニメの生成(但し、NeuQuantによるパレットの生成をグローバルパレットのみに限定するために改造したものを使用) 72 | * [filer](https://github.com/ebidel/filer.js/) : data-urlからのblobの取得(ユーティリティ部分のみを抜き出して使用) 73 | * [FileSaver](https://github.com/eligrey/FileSaver.js/) : blobのダウンロードボタンの実装に使用 74 | * [jszip](https://stuk.github.io/jszip/) : 連番canvasと連番SVGをzipに固めるのに使用 75 | * [Tiny Color Picker](http://www.dematte.at/tinyColorPicker/) : 色指定でカラーピッカーを利用可能にするために使用 76 | 77 | 78 | ライセンス 79 | ------------ 80 | 81 | 本ソフトウェアは MITライセンス の下でライセンスされています。従って、**著作権表記とライセンス文をソフトウェア付近の参照可能な場所に設置する** こと(例えば、公開リポジトリの中など)を条件に、本ソフトウェアを元に新たなソフトウェアを作ることなどを全面的に認めます。 82 | 83 | より詳細には、本リポジトリ内の LICENSE をご覧ください。 84 | -------------------------------------------------------------------------------- /experiment/testV2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Like Effect Generator 8 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |
55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |
65 | 66 | 67 | 68 | 69 | 70 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /src/PRibbon.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | /// 5 | 6 | namespace LLEAG { 7 | 8 | export interface PRibbonOptions extends PBaseOptions { 9 | vSpinZ: number; 10 | initSpinZ: number; 11 | lineWidth?: number; 12 | popLineEffectInstance: PopLineEffect; 13 | } 14 | 15 | export class PRibbon extends ParticleBase { 16 | 17 | private vSpinZ: number; 18 | private initSpinZ: number; 19 | private lineWidth: number; 20 | private popLineEffectInstance: PopLineEffect; 21 | 22 | constructor(options: PRibbonOptions) { 23 | super(options); 24 | this.vSpinZ = options.vSpinZ; 25 | this.initSpinZ = options.initSpinZ; 26 | this.lineWidth = options.lineWidth; 27 | this.popLineEffectInstance = options.popLineEffectInstance; 28 | } 29 | 30 | public generateSVGTree(t: number): svgjs.G { 31 | // check if t > lifeTime + pleInstance.lifeTime 32 | if (t > this.lifeTime + this.popLineEffectInstance.getLifeTime()) return null; 33 | 34 | // create SVG Document 35 | let container = document.createElement("div"); 36 | let drawer = SVG(container); 37 | let currentGroup = drawer.group(); 38 | 39 | if (t > this.lifeTime) { 40 | // get PopLineEffect SVG group 41 | let pleSVGGroup = this.popLineEffectInstance.generateSVGTree(t - this.lifeTime, this.size); 42 | 43 | if(pleSVGGroup == null) return null; 44 | 45 | // apply last spin by Z axis 46 | currentGroup.translate(this.size, 0).add(pleSVGGroup); 47 | currentGroup = drawer.group().rotate(360.0 * (this.initSpinZ + this.lifeTime * this.vSpinZ)).add(currentGroup); 48 | 49 | // apply translate 50 | let translateXY = this.getBaseXY(this.lifeTime); 51 | currentGroup = drawer.group().translate(translateXY.x, translateXY.y).add(currentGroup); 52 | } else { 53 | // draw arc 54 | let arcData = ""; 55 | let disappearingRate = this.calcDisappearingRate(t); 56 | if (disappearingRate < 1.0) { 57 | let startX = Math.cos(Math.PI / 3 * (1.0 - disappearingRate)) * this.size; 58 | let startY = Math.sin(Math.PI / 3 * (1.0 - disappearingRate)) * this.size; 59 | arcData = "M " + (Math.cos(-Math.PI / 3 * easeInCubic(disappearingRate)) * this.size).toString() + "," + (Math.sin(-Math.PI / 3 * easeInCubic(disappearingRate)) * this.size).toString(); 60 | arcData += " A " + this.size.toString() + "," + this.size.toString() + " 0 0,1 " + this.size.toString() + ",0"; 61 | // TODO: 逆向きから近づいていくように変更 62 | } else { 63 | arcData = "M " + (Math.cos(-Math.PI / 3) * this.size).toString() + "," + (Math.sin(-Math.PI / 3) * this.size).toString(); 64 | arcData += " A " + this.size.toString() + "," + this.size.toString() + " 0 0,1 " + this.size.toString() + ",0"; 65 | } 66 | let arc = drawer.path(arcData).stroke({ color: getHexColor(this.color), width: this.lineWidth }).attr("stroke-linecap", "round"); 67 | 68 | // apply spin by Z axis 69 | currentGroup.rotate(360.0 * (this.initSpinZ + t * this.vSpinZ)).add(arc); 70 | 71 | // apply translate 72 | let translateXY = this.getBaseXY(t); 73 | currentGroup = drawer.group().translate(translateXY.x, translateXY.y).add(currentGroup); 74 | } 75 | 76 | return currentGroup; 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /lib/jsgif/anim.js: -------------------------------------------------------------------------------- 1 | //This Demonstrates calling the animWorker.js web worker, allowing for non-blocking 2 | //Gif building. 3 | 4 | 5 | function animDelayValue() //Gets a user defined frame delay from user input (dom element), displays current value on dom 6 | { 7 | var value = new Number(document.getElementById("animDelay").value/1000); 8 | value.toFixed(2); 9 | document.getElementById("animDelayVal").innerHTML = value; 10 | } 11 | animDelayValue(); //initialize delay value display 12 | this.animDelayValue = animDelayValue; //make animDelayValue global 13 | this.gifalizer = function() //function, called from DOM to build gif. 14 | { 15 | function getAnimScaleFactor() 16 | { 17 | var autosaveElements = document.getElementsByName("animScale"); //DOM widget to set scale factor to 100%, 50% or 25% 18 | var autosaveValue = "4" 19 | for (var i=0; i < autosaveElements.length; i++) 20 | { 21 | if (autosaveElements[i].checked) 22 | { 23 | autosaveValue = autosaveElements[i].value; 24 | break; 25 | } 26 | } 27 | if(autosaveValue == "1") 28 | { 29 | return 1; 30 | } 31 | if(autosaveValue == "2") 32 | { 33 | return 2; 34 | } 35 | else 36 | { 37 | return 4; 38 | } 39 | } 40 | 41 | var delay = document.getElementById("animDelay").value; 42 | var scale = getAnimScaleFactor(); 43 | 44 | var animation_parts = new Array(paintedCanvases.length); 45 | 46 | var worker = new Worker('animWorker.js'); 47 | //worker.onmessage = function(e) 48 | //{ 49 | // console.log(e.data); 50 | //} 51 | 52 | //call web worker. 53 | worker.onmessage = function(e) 54 | { 55 | //handle stuff, like get the frame_index 56 | var frame_index = e.data["frame_index"]; 57 | var frame_data = e.data["frame_data"]; 58 | animation_parts[frame_index] = frame_data; 59 | console.log(frame_index); 60 | for(var j = 0; j < paintedCanvases.length; j++) 61 | { 62 | if(animation_parts[j] == null) 63 | { 64 | return; 65 | } 66 | } 67 | console.log("append"); 68 | //check when everything else is done and then do animation_parts.join('') and have fun 69 | var binary_gif = animation_parts.join(''); 70 | var data_url = 'data:image/gif;base64,'+window.btoa(binary_gif); 71 | 72 | var gifItem = new Image(); 73 | gifItem.src = data_url; 74 | var thumbs = document.getElementById("gifContainer"); 75 | 76 | //nuke all child nodes! 77 | while(thumbs.hasChildNodes()) 78 | { 79 | thumbs.removeChild(thumbs.lastChild); 80 | } 81 | document.getElementById("gifContainer").appendChild(gifItem); 82 | } 83 | 84 | var imageItems = new Array(); //hacky way to ensure that an arbitrary number of onload events occur. 85 | //paintedCanvases is an array of canvas data generated by a canvas toDataURL calls elsewhere in the parent scope. Replicate this how you wish. 86 | for(var i = 0; i < paintedCanvases.length; i++) 87 | { 88 | imageItems[i] = new Image(); 89 | imageItems[i].src = paintedCanvases[i]; 90 | imageItems[i].isloaded = false; 91 | imageItems[i].index = i; 92 | imageItems[i].onload = function() 93 | { 94 | var scratchCanvas = document.createElement("canvas"); 95 | scratchCanvas.width = comicPane.width/scale; 96 | scratchCanvas.height = comicPane.height/scale; 97 | var scratchCanvasContext = scratchCanvas.getContext("2d"); 98 | scratchCanvasContext.fillStyle = "#FFFFFF"; 99 | scratchCanvasContext.fillRect(0,0,scratchCanvas.width, scratchCanvas.height); 100 | scratchCanvasContext.drawImage(this,0,0,scratchCanvas.width,scratchCanvas.height); 101 | var imdata = scratchCanvasContext.getImageData(0,0, scratchCanvas.width, scratchCanvas.height).data; 102 | console.log(this.index); 103 | worker.postMessage({"frame_index": this.index, "delay": delay, "frame_length":paintedCanvases.length-1, "height":scratchCanvas.height, "width":scratchCanvas.width, "imageData":imdata}); //imarray.join(',') 104 | 105 | } 106 | } 107 | } -------------------------------------------------------------------------------- /experiment/writeOutAnimGifV2-All.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Like Effect Generator 8 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 | 42 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/kickstart-grid.css: -------------------------------------------------------------------------------- 1 | /* 2 | 99Lime.com HTML KickStart by Joshua Gatcke 3 | kickstart-grids.css 4 | 5 | DO NOT EDIT THIS FILE unless you know what you are doing. 6 | */ 7 | /*--------------------------------- 8 | GRID/COLUMNS 9 | ----------------------------------- 10 | tinyfluidgrid.com 11 | & girlfriendnyc.com 12 | with changes by 99Lime 13 | -----------------------------------*/ 14 | /* 15 | & Columns : 12 16 | & Gutter %: 20% 17 | & MaxWidth: 1280px 18 | */ 19 | 20 | .grid{ 21 | max-width:1220px; 22 | margin:0 auto; 23 | padding:0 2em; 24 | } 25 | 26 | .grid.flex{ 27 | width:100%; 28 | max-width:100%; 29 | padding:0 2%; 30 | padding:2em; 31 | } 32 | 33 | .row{ 34 | display:block; 35 | overflow:hidden; 36 | clear:both; 37 | } 38 | 39 | *[class*="col_"].alpha{margin-left:0;} 40 | *[class*="col_"].omega{margin-right:0;} 41 | 42 | .col_1 { width: 6.6666666666667%; } 43 | .col_2 { width: 15%; } 44 | .col_3 { width: 23.333333333333%; } 45 | .col_4 { width: 31.666666666667%; } 46 | .col_5 { width: 40%; } 47 | .col_6 { width: 48.333333333333%; } 48 | .col_7 { width: 56.666666666667%; } 49 | .col_8 { width: 65%; } 50 | .col_9 { width: 73.333333333333%; } 51 | .col_10 { width: 81.666666666667%; } 52 | .col_11 { width: 90%; } 53 | .col_12 { width: 98.333333333333%; } 54 | 55 | *[class*="col_"]{ 56 | margin-left: 0.83333333333333%; 57 | margin-right: 0.83333333333333%; 58 | margin-top:0.5em; 59 | margin-bottom:0.5em; 60 | float: left; 61 | display: block; 62 | } 63 | 64 | .grid img{ 65 | max-width: 100%; 66 | height:auto; 67 | } 68 | 69 | .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0} 70 | .clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} 71 | * html .clearfix, *:first-child+html .clearfix{zoom:1} 72 | 73 | /* Viewable Grids 74 | To view your grids, add the class .visible to any grid container. 75 | This will add a background color so you can see the layout of your grids. 76 | */ 77 | *[class*="col_"].visible{ 78 | background:#eee; 79 | border:1px dotted #ccc; 80 | } 81 | 82 | 83 | /*--------------------------------- 84 | Responsive Grid Media Queries - 1280, 1024, 768, 480 85 | 1280-1024 - desktop (default grid) 86 | 1024-768 - tablet landscape 87 | 768-480 - tablet 88 | 480-less - phone landscape & smaller 89 | -----------------------------------*/ 90 | @media all and (min-width: 1024px) and (max-width: 1280px) { 91 | 92 | .grid *[class*="col_"]{} 93 | .grid{max-width: 1024px;} 94 | .show-desktop {display:block;} 95 | .hide-desktop {display:none;} 96 | .show-tablet {display:none;} 97 | .hide-tablet {display:block;} 98 | .show-phone {display:none;} 99 | .hide-phone {display:block;} 100 | 101 | } 102 | 103 | @media all and (min-width: 768px) and (max-width: 1024px) { 104 | 105 | .grid *[class*="col_"]{} 106 | .grid{max-width: 768px;} 107 | .show-desktop {display:none;} 108 | .hide-desktop {display:block;} 109 | .show-tablet {display:block;} 110 | .hide-tablet {display:none;} 111 | .show-phone {display:none;} 112 | .hide-phone {display:block;} 113 | 114 | } 115 | 116 | 117 | @media all and (min-width: 480px) and (max-width: 768px) { 118 | 119 | .grid *[class*="col_"]{ 120 | float:none; 121 | width:auto; 122 | clear:both; 123 | display:block; 124 | } 125 | 126 | /* columns inside of columns */ 127 | .grid *[class*="col_"] [class*="col_"]{ 128 | margin-left:0; 129 | margin-right:0; 130 | width:100%; 131 | } 132 | 133 | .grid{max-width: 480px;} 134 | .show-desktop {display:none;} 135 | .hide-desktop {display:block;} 136 | .show-tablet {display:block;} 137 | .hide-tablet {display:none;} 138 | .show-phone {display:none;} 139 | .hide-phone {display:block;} 140 | 141 | } 142 | 143 | @media all and (max-width: 480px) { 144 | 145 | .grid *[class*="col_"]{ 146 | float:none; 147 | width:auto; 148 | clear:both; 149 | display:block; 150 | } 151 | 152 | /* columns inside of columns */ 153 | .grid *[class*="col_"] [class*="col_"]{ 154 | margin-left:0; 155 | margin-right:0; 156 | width:100%; 157 | } 158 | 159 | .grid{max-width: 100%;/*320*/} 160 | .show-desktop {display:none;} 161 | .hide-desktop {display:block;} 162 | .show-tablet {display:none;} 163 | .hide-tablet {display:block;} 164 | .show-phone {display:block;} 165 | .hide-phone {display:none;} 166 | 167 | } 168 | -------------------------------------------------------------------------------- /lib/FileSaver.min.js: -------------------------------------------------------------------------------- 1 | /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */ 2 | var saveAs=saveAs||function(view){"use strict";if(typeof navigator!=="undefined"&&/MSIE [1-9]\./.test(navigator.userAgent)){return}var doc=view.document,get_URL=function(){return view.URL||view.webkitURL||view},save_link=doc.createElementNS("http://www.w3.org/1999/xhtml","a"),can_use_save_link="download"in save_link,click=function(node){var event=new MouseEvent("click");node.dispatchEvent(event)},is_safari=/Version\/[\d\.]+.*Safari/.test(navigator.userAgent),webkit_req_fs=view.webkitRequestFileSystem,req_fs=view.requestFileSystem||webkit_req_fs||view.mozRequestFileSystem,throw_outside=function(ex){(view.setImmediate||view.setTimeout)(function(){throw ex},0)},force_saveable_type="application/octet-stream",fs_min_size=0,arbitrary_revoke_timeout=500,revoke=function(file){var revoker=function(){if(typeof file==="string"){get_URL().revokeObjectURL(file)}else{file.remove()}};if(view.chrome){revoker()}else{setTimeout(revoker,arbitrary_revoke_timeout)}},dispatch=function(filesaver,event_types,event){event_types=[].concat(event_types);var i=event_types.length;while(i--){var listener=filesaver["on"+event_types[i]];if(typeof listener==="function"){try{listener.call(filesaver,event||filesaver)}catch(ex){throw_outside(ex)}}}},auto_bom=function(blob){if(/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)){return new Blob(["\ufeff",blob],{type:blob.type})}return blob},FileSaver=function(blob,name,no_auto_bom){if(!no_auto_bom){blob=auto_bom(blob)}var filesaver=this,type=blob.type,blob_changed=false,object_url,target_view,dispatch_all=function(){dispatch(filesaver,"writestart progress write writeend".split(" "))},fs_error=function(){if(target_view&&is_safari&&typeof FileReader!=="undefined"){var reader=new FileReader;reader.onloadend=function(){var base64Data=reader.result;target_view.location.href="data:attachment/file"+base64Data.slice(base64Data.search(/[,;]/));filesaver.readyState=filesaver.DONE;dispatch_all()};reader.readAsDataURL(blob);filesaver.readyState=filesaver.INIT;return}if(blob_changed||!object_url){object_url=get_URL().createObjectURL(blob)}if(target_view){target_view.location.href=object_url}else{var new_tab=view.open(object_url,"_blank");if(new_tab==undefined&&is_safari){view.location.href=object_url}}filesaver.readyState=filesaver.DONE;dispatch_all();revoke(object_url)},abortable=function(func){return function(){if(filesaver.readyState!==filesaver.DONE){return func.apply(this,arguments)}}},create_if_not_found={create:true,exclusive:false},slice;filesaver.readyState=filesaver.INIT;if(!name){name="download"}if(can_use_save_link){object_url=get_URL().createObjectURL(blob);setTimeout(function(){save_link.href=object_url;save_link.download=name;click(save_link);dispatch_all();revoke(object_url);filesaver.readyState=filesaver.DONE});return}if(view.chrome&&type&&type!==force_saveable_type){slice=blob.slice||blob.webkitSlice;blob=slice.call(blob,0,blob.size,force_saveable_type);blob_changed=true}if(webkit_req_fs&&name!=="download"){name+=".download"}if(type===force_saveable_type||webkit_req_fs){target_view=view}if(!req_fs){fs_error();return}fs_min_size+=blob.size;req_fs(view.TEMPORARY,fs_min_size,abortable(function(fs){fs.root.getDirectory("saved",create_if_not_found,abortable(function(dir){var save=function(){dir.getFile(name,create_if_not_found,abortable(function(file){file.createWriter(abortable(function(writer){writer.onwriteend=function(event){target_view.location.href=file.toURL();filesaver.readyState=filesaver.DONE;dispatch(filesaver,"writeend",event);revoke(file)};writer.onerror=function(){var error=writer.error;if(error.code!==error.ABORT_ERR){fs_error()}};"writestart progress write abort".split(" ").forEach(function(event){writer["on"+event]=filesaver["on"+event]});writer.write(blob);filesaver.abort=function(){writer.abort();filesaver.readyState=filesaver.DONE};filesaver.readyState=filesaver.WRITING}),fs_error)}),fs_error)};dir.getFile(name,{create:false},abortable(function(file){file.remove();save()}),abortable(function(ex){if(ex.code===ex.NOT_FOUND_ERR){save()}else{fs_error()}}))}),fs_error)}),fs_error)},FS_proto=FileSaver.prototype,saveAs=function(blob,name,no_auto_bom){return new FileSaver(blob,name,no_auto_bom)};if(typeof navigator!=="undefined"&&navigator.msSaveOrOpenBlob){return function(blob,name,no_auto_bom){if(!no_auto_bom){blob=auto_bom(blob)}return navigator.msSaveOrOpenBlob(blob,name||"download")}}FS_proto.abort=function(){var filesaver=this;filesaver.readyState=filesaver.DONE;dispatch(filesaver,"abort")};FS_proto.readyState=FS_proto.INIT=0;FS_proto.WRITING=1;FS_proto.DONE=2;FS_proto.error=FS_proto.onwritestart=FS_proto.onprogress=FS_proto.onwrite=FS_proto.onabort=FS_proto.onerror=FS_proto.onwriteend=null;return saveAs}(typeof self!=="undefined"&&self||typeof window!=="undefined"&&window||this.content);if(typeof module!=="undefined"&&module.exports){module.exports.saveAs=saveAs}else if(typeof define!=="undefined"&&define!==null&&define.amd!=null){define([],function(){return saveAs})} 3 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/kickstart-slideshow.css: -------------------------------------------------------------------------------- 1 | /*--------------------------------- 2 | SLIDESHOW2 - Slight Fixes for the slideshow layout *needs work 3 | -----------------------------------*/ 4 | 5 | .slideshow{ 6 | clear:both; 7 | margin:0; 8 | padding:0; 9 | width:auto; 10 | height:auto; 11 | overflow:hidden; 12 | } 13 | 14 | .slideshow li{ 15 | list-style-type:none; 16 | margin:0; 17 | padding:0; 18 | float:left; 19 | display:block; 20 | } 21 | 22 | /** 23 | * BxSlider v4.0 - Fully loaded, responsive content slider 24 | * http://bxslider.com 25 | * 26 | * Written by: Steven Wanderski, 2012 27 | * http://stevenwanderski.com 28 | * (while drinking Belgian ales and listening to jazz) 29 | * 30 | * CEO and founder of bxCreative, LTD 31 | * http://bxcreative.com 32 | */ 33 | 34 | 35 | /** RESET AND LAYOUT 36 | ===================================*/ 37 | .bx-wrapper, .bx-wrapper *{ 38 | -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */ 39 | -moz-box-sizing: content-box; /* Firefox, other Gecko */ 40 | box-sizing: content-box; /* Opera/IE 8+ */ 41 | } 42 | 43 | .bx-wrapper { 44 | position: relative; 45 | margin: 0 0 60px; 46 | padding: 0; 47 | *zoom: 1; 48 | } 49 | 50 | .bx-wrapper img { 51 | width: 100%; 52 | display: block; 53 | } 54 | 55 | /** THEME 56 | ===================================*/ 57 | 58 | .bx-wrapper .bx-viewport { 59 | -moz-box-shadow: 0 0 5px #ccc; 60 | -webkit-box-shadow: 0 0 5px #ccc; 61 | box-shadow: 0 0 5px #ccc; 62 | border: solid #fff 5px; 63 | left: 0; 64 | background: #fff; 65 | } 66 | 67 | .bx-wrapper .bx-pager, 68 | .bx-wrapper .bx-controls-auto { 69 | position: absolute; 70 | bottom: -30px; 71 | width: 100%; 72 | } 73 | 74 | /* LOADER */ 75 | 76 | .bx-wrapper .bx-loading { 77 | min-height: 50px; 78 | background: url(img/bx_loader.gif) center center no-repeat #fff; 79 | height: 100%; 80 | width: 100%; 81 | position: absolute; 82 | top: 0; 83 | left: 0; 84 | z-index: 2000; 85 | } 86 | 87 | /* PAGER */ 88 | 89 | .bx-wrapper .bx-pager { 90 | text-align: center; 91 | font-size: .85em; 92 | font-family: Arial; 93 | font-weight: bold; 94 | color: #666; 95 | padding-top: 20px; 96 | } 97 | 98 | .bx-wrapper .bx-pager .bx-pager-item, 99 | .bx-wrapper .bx-controls-auto .bx-controls-auto-item { 100 | display: inline-block; 101 | *zoom: 1; 102 | *display: inline; 103 | } 104 | 105 | .bx-wrapper .bx-pager.bx-default-pager a { 106 | background: #666; 107 | text-indent: -9999px; 108 | display: block; 109 | width: 10px; 110 | height: 10px; 111 | margin: 0 5px; 112 | outline: 0; 113 | -moz-border-radius: 5px; 114 | -webkit-border-radius: 5px; 115 | border-radius: 5px; 116 | } 117 | 118 | .bx-wrapper .bx-pager.bx-default-pager a:hover, 119 | .bx-wrapper .bx-pager.bx-default-pager a.active { 120 | background: #000; 121 | } 122 | 123 | /* DIRECTION CONTROLS (NEXT / PREV) */ 124 | 125 | .bx-wrapper .bx-prev { 126 | left: 10px; 127 | background: url(img/controls.png) no-repeat 0 -32px; 128 | } 129 | 130 | .bx-wrapper .bx-next { 131 | right: 10px; 132 | background: url(img/controls.png) no-repeat -43px -32px; 133 | } 134 | 135 | .bx-wrapper .bx-prev:hover { 136 | background-position: 0 0; 137 | } 138 | 139 | .bx-wrapper .bx-next:hover { 140 | background-position: -43px 0; 141 | } 142 | 143 | .bx-wrapper .bx-controls-direction a { 144 | position: absolute; 145 | top: 50%; 146 | margin-top: -16px; 147 | outline: 0; 148 | width: 32px; 149 | height: 32px; 150 | text-indent: -9999px; 151 | z-index: 9999; 152 | } 153 | 154 | .bx-wrapper .bx-controls-direction a.disabled { 155 | display: none; 156 | } 157 | 158 | /* AUTO CONTROLS (START / STOP) */ 159 | 160 | .bx-wrapper .bx-controls-auto { 161 | text-align: center; 162 | } 163 | 164 | .bx-wrapper .bx-controls-auto .bx-start { 165 | display: block; 166 | text-indent: -9999px; 167 | width: 10px; 168 | height: 11px; 169 | outline: 0; 170 | background: url(img/controls.png) -86px -11px no-repeat; 171 | margin: 0 3px; 172 | } 173 | 174 | .bx-wrapper .bx-controls-auto .bx-start:hover, 175 | .bx-wrapper .bx-controls-auto .bx-start.active { 176 | background-position: -86px 0; 177 | } 178 | 179 | .bx-wrapper .bx-controls-auto .bx-stop { 180 | display: block; 181 | text-indent: -9999px; 182 | width: 9px; 183 | height: 11px; 184 | outline: 0; 185 | background: url(img/controls.png) -86px -44px no-repeat; 186 | margin: 0 3px; 187 | } 188 | 189 | .bx-wrapper .bx-controls-auto .bx-stop:hover, 190 | .bx-wrapper .bx-controls-auto .bx-stop.active { 191 | background-position: -86px -33px; 192 | } 193 | 194 | /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ 195 | 196 | .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { 197 | text-align: left; 198 | width: 80%; 199 | } 200 | 201 | .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { 202 | right: 0; 203 | width: 35px; 204 | } 205 | 206 | /* IMAGE CAPTIONS */ 207 | 208 | .bx-wrapper .bx-caption { 209 | position: absolute; 210 | bottom: 0; 211 | left: 0; 212 | background: #666\9; 213 | background: rgba(80, 80, 80, 0.75); 214 | width: 100%; 215 | } 216 | 217 | .bx-wrapper .bx-caption span { 218 | color: #fff; 219 | font-family: Arial; 220 | display: block; 221 | font-size: .85em; 222 | padding: 10px; 223 | } 224 | -------------------------------------------------------------------------------- /10thAnniv-Spec.md: -------------------------------------------------------------------------------- 1 | 10周年記念仕様いいねボタン風EAG 仕様 2 | ====================================== 3 | 4 | ## やりたいこと 5 | 6 | * まずはそれっぽいものを再現 7 | * パーティクルの画像も差し替えられるようにする 8 | 9 | ## 解析 10 | 11 | * パーティクル 12 | * 星(3軸回転、色も変わってる？、消滅時拡大率1軸に対し0) 13 | * 正方形(3軸回転、消滅時拡大率1軸に対し0) 14 | * 扇型( **1軸** 回転、表示角度の大きさが変わる(変わる速度も一定でない)、消滅時にポップエフェクト) 15 | * ドーナツ(通常仕様のポップエフェクトみたいなやつ) 16 | * 正円(消滅時単純縮小) 17 | * 三角形(3軸回転、消滅時拡大率1軸に対し0) 18 | * パーティクルに対する単純な物理演算 19 | * 重力(下向き定数値の力) 20 | * 空気抵抗(速度に比例する抵抗力) 21 | * 登場エフェクト 22 | * 8方向に線分(ポップエフェクト) 23 | * 移動しながら伸びて消える 24 | * 始点と終点の座標変化をずらして実現 25 | * 始点は速く2乗に比例して最終座標に移動、終点は遅く線形に最終座標に移動 26 | * 多分色はまた虹色 27 | * と思ったら、1つの直線上に乗ってる線分は同じ色 28 | * 色はバラバラなので、虹色で近似してしまって良いと思われる 29 | * ハートマークは単純に跳ねるだけ(y座標が二乗に比例) 30 | * じゃない！！！！ 31 | * 着地時にちょっとオーバーシュートする(下に凸の2次関数をくっつければ良いと思われる) 32 | 33 | ## パーティクルエンジン 34 | 35 | ### 単純物理演算 36 | パーティクルの **位置のみ** を決定する。 37 | 38 | * 鉛直方向の計算式は以下の通り 39 | * 速度モデル : vy = (v0y - gn / k) e^(-kt) + gn / k (g : 鉛直下方向重力定数(正値), k : 空気抵抗定数, v0y : 初速度, gn := -g) 40 | * **位置モデル** : y = - ((k v0y - gn) / k^2) e^(-kt) + gn/k t + (y0 + ((k v0y - gn) / k^2)) 41 | * == y = - ((k v0y + g) / k^2) e^(-kt) - g/k t + (y0 + (k v0y + g) / k^2) (y0 : 初期位置) 42 | * **y0** はハート出現位置で固定(一応パーティクルオブジェクトで指定) 43 | * g は、直接決めるのではなく、最終的な落下速度 **vly** の値を用いて、**g = - k vly** で決定する 44 | * **vly, k** はパーティクルエンジン内で決める 45 | * **v0y** はパーティクル1個毎に決める 46 | * 水平方向の計算式は以下の通り 47 | * 速度モデル : vx = (v0x) e^(-kt) (v0x : 初速度, k : 空気抵抗定数) 48 | * **位置モデル** : x = - (v0x / k) e^(-kt) + x0 + v0x / k (x0 : 初期位置) 49 | * **x0** はハート出現位置で固定(一応パーティクルオブジェクトで指定) 50 | * **k** はパーティクルエンジン内で決める(一応、XとY軸で別々に設定できるようにした方が良いかも) 51 | * **v0x** はパーティクル1個毎に決める 52 | 53 | ### パーティクルオブジェクト 54 | パーティクルの"挙動"を決定し、その"挙動"から実際のSVGツリー構造を返却するメソッドを持つオブジェクト 55 | 56 | * 基底クラス `ParticleBase` 57 | * protected getBaseXY(t: number) -> { x: number, y: number } : 上記の単純物理演算を、オブジェクトに設定された初速度・初期位置を用いて実行し、XY座標を含む基礎座標を返却する 58 | * abstract public generateSVGTree(t: number) -> : 後述のルールに従うSVGグループノードを生成し、返却する(抽象メソッド、これを継承する各子クラスで実装) 59 | * protected v0X, v0Y: number : 初速度(sip/s) 60 | * protected x0, y0: number : 初期位置(sip) 61 | * private kX, kY: number : 空気抵抗定数(一応XY軸で別々に設定できるようにする) 62 | * private vLastY: number : 最終落下速度(sip/s) 63 | * private g: number : 重力定数(= -k × vly) (sip/s^2) 64 | * protected size: number : パーティクルのサイズ(半径の長さで指定)(sip) 65 | * protected lifeTime: number : 寿命(s) 66 | * protected disappearDurationRate: number : lifeTimeに対する消失に使用される時間の割合([0,1]) 67 | * protected color: { r,g,b: number } : 色(それぞれ8bit整数値で指定) 68 | * 星のパーティクルクラス `PStar` 69 | * private vSpinZ, vSpinX, vSpinY: number : ZXY軸に関する回転速度(360deg/s, 1.0で360度/secになる) 70 | * private initSpinZ: number : 初期Z軸回転角度(360deg) 71 | * 星形のパス、3軸回転、消滅時X軸拡大率0 を再現 72 | * 正方形のパーティクルクラス `PSquare` 73 | * private vSpinZ, vSpinX, vSpinY: number : ZXY軸に関する回転速度(360deg/s) 74 | * private initSpinZ: number : 初期Z軸回転角度(360deg/s) 75 | * 正方形のパス、3軸回転、消滅時X軸拡大率0 を再現 76 | * 三角形のパーティクルクラス `PTriangle` 77 | * private vSpinZ, vSpinX, vSpinY: number : ZXY軸に関する回転速度(360deg/s) 78 | * private initSpinZ: number : 初期Z軸回転角度(360deg/s) 79 | * 正三角形のパス、3軸回転、消滅時X軸拡大率0 を再現 80 | * 正円のパーティクルクラス `PCircle` 81 | * 正円のパス、消滅時単純拡大率0 を再現 82 | * ポップサークルのパーティクルクラス `PPopCircle` 83 | * 通常仕様のポップサークルと同じ(但し、lifeTime, disappearDurationRate に対応) 84 | * リボンのパーティクルクラス `PRibbon` 85 | * private vSpinZ: number : Z軸に関する回転速度(360deg/s) 86 | * private initSpinZ: number : 初期Z軸回転角度(360deg/s) 87 | * private lineWidth: number : 線幅(sip) 88 | * private PopLineEffectInstance: PopLineEffect : ポップエフェクトオブジェクトのインスタンス 89 | * 扇型のパス を再現(データ内容は多分次の通り) 90 | * …と思ったけど、これもしかして 単なる円弧＋端形状丸＋線幅太め で良いのでは？ 91 | * 資料をよく見るとどうも端形状は丸になっているので、これを全部パスで表現するのは相当キツい 92 | * ということは、データ内容は以下で良い 93 | * M <円弧始点X>,<円弧始点Y> 94 | * A <中心半径>,<中心半径> 0 0,1 <円弧終点X>,<円弧終点Y> 95 | * あとはストロークと色を指定すれば良い 96 | * 終点座標の基礎角度は PI / 3 97 | * 消滅時間中に始点座標の基礎角度を 0 〜 PI / 3(よりわずかに小さい値) で動かす 98 | * 寿命が過ぎた後、その 寿命〜寿命＋popDuration までの間でポップエフェクトを再現 99 | * ポップエフェクトの仕様は、いいねボタンを押した時のポップエフェクトと全く同様なので、それを再利用する 100 | * ポップエフェクトの表示場所は、寿命が過ぎた瞬間の座標を固定で使用する 101 | * Z軸回転を再現 102 | 103 | ### ポップエフェクト 104 | いいねボタンを押した時に出現画像を中心に出現する、広がる8本の線を再現する関数。 105 | 106 | * generatePopEffectSVGTree(t: number, size: number) -> 107 | * 内部定数 108 | * duration: number : 消滅までの時間(sec) 109 | * OuterStartRadiusRate : 線分の終点をどの半径の円上から開始するかを、sizeに対する割合で指定([0,1]) 110 | * lineWidthFactor : sizeに対する線分の太さの割合 111 | * 引数 112 | * t: number : 該当フレームの時刻(sec) 113 | * size: number : 大きさ(消滅時の半径で指定) 114 | * 始点は2次関数、終点は1次関数で動かす 115 | 116 | 117 | ## SVG出力時のルール 118 | 119 | * viewport 120 | * x : -50, 50 (w : 100) 121 | * y : -80, 20 (h : 100) *座標系が右手系でないことに注意* 122 | * 単位はsip(scale independent pixels) 123 | * 最終的にcanvasへ描画する直前までは、このviewportの座標範囲で描画を行う 124 | * 生成サイズ(短辺指定) / w の倍率で拡大する(最終的に生成されたSVGノード群をグループ化して、`transform="scale(,)"`属性を付与) 125 | * もしかしたら、viewBoxを上のviewportの通りに指定した上で、width/height を適切に設定すれば、それだけでうまく行くかも？ 126 | * 出現画像は、上記viewport上で ([-18,18], [-18,18]) に収まるように配置 127 | * 回転は、Z軸方向に関しては`transform="rotate()"`、XY軸方向に関しては`transform="scale()"`で表現 128 | * 時間はフレーム単位ではなく実時間(sec)で表現し、実際の出力時は 1 / フレームレート の間隔でSVGを取得し、それを各フレームの内容とする。 129 | 130 | 131 | ## 追加の依存スクリプト 132 | 133 | 今回ちょっと物量が前回より遥かに多いので、SVGツリーの生成には [SVG.JS](http://svgjs.com/) を利用する。 134 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | HTML KickStart Elements 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 34 | 35 |
36 | 37 | 38 | 39 |
40 |
41 |

Paragraphs

42 |

43 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 44 | tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis 45 | nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 46 | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

47 | 48 |

El illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 49 | dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam 50 | liber tempor cum soluta nobis eleifend <h1>Sample Code</h1> option 51 | congue nihil imperdiet doming id quod mazim placerat facer possim assum.

52 | 53 |

54 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 55 | magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 56 | nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 57 | molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 58 | qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum 59 | soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

60 |
61 | 62 |
63 |
Icon List
64 |
    65 |
  • Apple
    • 66 |
  • Banana
    • 67 |
  • Orange
    • 68 |
  • Pear
    • 69 |
70 | 71 |
Sample Icons
72 | 73 | 74 | 75 | 76 | 77 |
Button w/Icon
78 | RSS 79 |
80 | 81 |
82 | 83 |
84 |

Column

85 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 86 | magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis

87 |
88 | 89 |
90 |

Column

91 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 92 | magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis

93 |
94 | 95 |
96 |

Column

97 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 98 | magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis

99 |
100 | 101 |
102 |

Column

103 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 104 | magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis

105 |
106 |
107 | 108 |
109 | 110 | 111 |
112 | 115 | 116 | -------------------------------------------------------------------------------- /lib/filer-util.js: -------------------------------------------------------------------------------- 1 | var Util = { 2 | 3 | /** 4 | * Turns a NodeList into an array. 5 | * 6 | * @param {NodeList} list The array-like object. 7 | * @return {Array} The NodeList as an array. 8 | */ 9 | toArray: function(list) { 10 | return Array.prototype.slice.call(list || [], 0); 11 | }, 12 | 13 | /*toDataURL: function(contentType, uint8Array) { 14 | return 'data:' + contentType + ';base64,' + 15 | self.btoa(this.arrayToBinaryString(uint8Array)); 16 | },*/ 17 | 18 | /** 19 | * Creates a data: URL from string data. 20 | * 21 | * @param {string} str The content to encode the data: URL from. 22 | * @param {string} contentType The mimetype of the data str represents. 23 | * @param {bool=} opt_isBinary Whether the string data is a binary string 24 | * (and therefore should be base64 encoded). True by default. 25 | * @return {string} The created data: URL. 26 | */ 27 | strToDataURL: function(str, contentType, opt_isBinary) { 28 | var isBinary = opt_isBinary != undefined ? opt_isBinary : true; 29 | if (isBinary) { 30 | return 'data:' + contentType + ';base64,' + self.btoa(str); 31 | } else { 32 | return 'data:' + contentType + ',' + str; 33 | } 34 | }, 35 | 36 | /** 37 | * Creates a blob: URL from a binary str. 38 | * 39 | * @param {string} binStr The content as a binary string. 40 | * @param {string=} opt_contentType An optional mimetype of the data. 41 | * @return {string} A new blob: URL. 42 | */ 43 | strToObjectURL: function(binStr, opt_contentType) { 44 | 45 | var ui8a = new Uint8Array(binStr.length); 46 | for (var i = 0; i < ui8a.length; ++i) { 47 | ui8a[i] = binStr.charCodeAt(i); 48 | } 49 | 50 | var blob = new Blob([ui8a], 51 | opt_contentType ? {type: opt_contentType} : {}); 52 | 53 | return self.URL.createObjectURL(blob); 54 | }, 55 | 56 | /** 57 | * Creates a blob: URL from a File or Blob object. 58 | * 59 | * @param {Blob|File} blob The File or Blob data. 60 | * @return {string} A new blob: URL. 61 | */ 62 | fileToObjectURL: function(blob) { 63 | return self.URL.createObjectURL(blob); 64 | }, 65 | 66 | /** 67 | * Reads a File or Blob object and returns it as an ArrayBuffer. 68 | * 69 | * @param {Blob|File} blob The File or Blob data. 70 | * @param {Function} callback Success callback passed the array buffer. 71 | * @param {Function=} opt_error Optional error callback if the read fails. 72 | */ 73 | fileToArrayBuffer: function(blob, callback, opt_errorCallback) { 74 | var reader = new FileReader(); 75 | reader.onload = function(e) { 76 | callback(e.target.result); 77 | }; 78 | reader.onerror = function(e) { 79 | if (opt_errorCallback) { 80 | opt_errorCallback(e); 81 | } 82 | }; 83 | 84 | reader.readAsArrayBuffer(blob); 85 | }, 86 | 87 | /** 88 | * Creates and returns a blob from a data URL (either base64 encoded or not). 89 | * 90 | * @param {string} dataURL The data URL to convert. 91 | * @return {Blob} A blob representing the array buffer data. 92 | */ 93 | dataURLToBlob: function(dataURL) { 94 | var BASE64_MARKER = ';base64,'; 95 | if (dataURL.indexOf(BASE64_MARKER) == -1) { 96 | var parts = dataURL.split(','); 97 | var contentType = parts[0].split(':')[1]; 98 | var raw = decodeURIComponent(parts[1]); 99 | 100 | return new Blob([raw], {type: contentType}); 101 | } 102 | 103 | var parts = dataURL.split(BASE64_MARKER); 104 | var contentType = parts[0].split(':')[1]; 105 | var raw = window.atob(parts[1]); 106 | var rawLength = raw.length; 107 | 108 | var uInt8Array = new Uint8Array(rawLength); 109 | 110 | for (var i = 0; i < rawLength; ++i) { 111 | uInt8Array[i] = raw.charCodeAt(i); 112 | } 113 | 114 | return new Blob([uInt8Array], {type: contentType}); 115 | }, 116 | 117 | /** 118 | * Reads an ArrayBuffer as returns its contents as a binary string. 119 | * 120 | * @param {ArrayBuffer} buffer The buffer of data. 121 | * @param {string=} opt_contentType An optional mimetype of the data. 122 | * @return {Blob} A blob representing the array buffer data. 123 | */ 124 | arrayBufferToBlob: function(buffer, opt_contentType) { 125 | var uInt8Array = new Uint8Array(buffer); 126 | return new Blob([uInt8Array], 127 | opt_contentType ? {type: opt_contentType} : {}); 128 | }, 129 | 130 | /** 131 | * Reads an ArrayBuffer as returns its contents as a binary string. 132 | * 133 | * @param {ArrayBuffer} buffer The buffer of data. 134 | * @param {Function} callback Success callback passed the binary string. 135 | * @param {Function=} opt_error Optional error callback if the read fails. 136 | */ 137 | arrayBufferToBinaryString: function(buffer, callback, opt_errorCallback) { 138 | var reader = new FileReader(); 139 | reader.onload = function(e) { 140 | callback(e.target.result); 141 | }; 142 | reader.onerror = function(e) { 143 | if (opt_errorCallback) { 144 | opt_errorCallback(e); 145 | } 146 | }; 147 | 148 | var uInt8Array = new Uint8Array(buffer); 149 | reader.readAsBinaryString(new Blob([uInt8Array])); 150 | }, 151 | 152 | /** 153 | * Create a binary string out of an array of numbers (bytes), each varying 154 | * from 0-255. 155 | * 156 | * @param {Array} bytes The array of numbers to transform into a binary str. 157 | * @return {string} The byte array as a string. 158 | */ 159 | arrayToBinaryString: function(bytes) { 160 | if (typeof bytes != typeof []) { 161 | return null; 162 | } 163 | var i = bytes.length; 164 | var bstr = new Array(i); 165 | while (i--) { 166 | bstr[i] = String.fromCharCode(bytes[i]); 167 | } 168 | return bstr.join(''); 169 | }, 170 | 171 | /** 172 | * Returns the file extension for a given filename. 173 | * 174 | * @param {string} filename The filename. 175 | * @return {string} The file's extension. 176 | */ 177 | getFileExtension: function(filename) { 178 | var idx = filename.lastIndexOf('.'); 179 | return idx != -1 ? filename.substring(idx) : ''; 180 | } 181 | }; 182 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/img/fancybox/jquery.easing-1.3.pack.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ 3 | * 4 | * Uses the built in easing capabilities added In jQuery 1.1 5 | * to offer multiple easing options 6 | * 7 | * TERMS OF USE - jQuery Easing 8 | * 9 | * Open source under the BSD License. 10 | * 11 | * Copyright © 2008 George McGinley Smith 12 | * All rights reserved. 13 | * 14 | * Redistribution and use in source and binary forms, with or without modification, 15 | * are permitted provided that the following conditions are met: 16 | * 17 | * Redistributions of source code must retain the above copyright notice, this list of 18 | * conditions and the following disclaimer. 19 | * Redistributions in binary form must reproduce the above copyright notice, this list 20 | * of conditions and the following disclaimer in the documentation and/or other materials 21 | * provided with the distribution. 22 | * 23 | * Neither the name of the author nor the names of contributors may be used to endorse 24 | * or promote products derived from this software without specific prior written permission. 25 | * 26 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 27 | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 28 | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE 29 | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 30 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE 31 | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 32 | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 33 | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 34 | * OF THE POSSIBILITY OF SUCH DAMAGE. 35 | * 36 | */ 37 | 38 | // t: current time, b: begInnIng value, c: change In value, d: duration 39 | eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('h.i[\'1a\']=h.i[\'z\'];h.O(h.i,{y:\'D\',z:9(x,t,b,c,d){6 h.i[h.i.y](x,t,b,c,d)},17:9(x,t,b,c,d){6 c*(t/=d)*t+b},D:9(x,t,b,c,d){6-c*(t/=d)*(t-2)+b},13:9(x,t,b,c,d){e((t/=d/2)<1)6 c/2*t*t+b;6-c/2*((--t)*(t-2)-1)+b},X:9(x,t,b,c,d){6 c*(t/=d)*t*t+b},U:9(x,t,b,c,d){6 c*((t=t/d-1)*t*t+1)+b},R:9(x,t,b,c,d){e((t/=d/2)<1)6 c/2*t*t*t+b;6 c/2*((t-=2)*t*t+2)+b},N:9(x,t,b,c,d){6 c*(t/=d)*t*t*t+b},M:9(x,t,b,c,d){6-c*((t=t/d-1)*t*t*t-1)+b},L:9(x,t,b,c,d){e((t/=d/2)<1)6 c/2*t*t*t*t+b;6-c/2*((t-=2)*t*t*t-2)+b},K:9(x,t,b,c,d){6 c*(t/=d)*t*t*t*t+b},J:9(x,t,b,c,d){6 c*((t=t/d-1)*t*t*t*t+1)+b},I:9(x,t,b,c,d){e((t/=d/2)<1)6 c/2*t*t*t*t*t+b;6 c/2*((t-=2)*t*t*t*t+2)+b},G:9(x,t,b,c,d){6-c*8.C(t/d*(8.g/2))+c+b},15:9(x,t,b,c,d){6 c*8.n(t/d*(8.g/2))+b},12:9(x,t,b,c,d){6-c/2*(8.C(8.g*t/d)-1)+b},Z:9(x,t,b,c,d){6(t==0)?b:c*8.j(2,10*(t/d-1))+b},Y:9(x,t,b,c,d){6(t==d)?b+c:c*(-8.j(2,-10*t/d)+1)+b},W:9(x,t,b,c,d){e(t==0)6 b;e(t==d)6 b+c;e((t/=d/2)<1)6 c/2*8.j(2,10*(t-1))+b;6 c/2*(-8.j(2,-10*--t)+2)+b},V:9(x,t,b,c,d){6-c*(8.o(1-(t/=d)*t)-1)+b},S:9(x,t,b,c,d){6 c*8.o(1-(t=t/d-1)*t)+b},Q:9(x,t,b,c,d){e((t/=d/2)<1)6-c/2*(8.o(1-t*t)-1)+b;6 c/2*(8.o(1-(t-=2)*t)+1)+b},P:9(x,t,b,c,d){f s=1.l;f p=0;f a=c;e(t==0)6 b;e((t/=d)==1)6 b+c;e(!p)p=d*.3;e(a<8.w(c)){a=c;f s=p/4}m f s=p/(2*8.g)*8.r(c/a);6-(a*8.j(2,10*(t-=1))*8.n((t*d-s)*(2*8.g)/p))+b},H:9(x,t,b,c,d){f s=1.l;f p=0;f a=c;e(t==0)6 b;e((t/=d)==1)6 b+c;e(!p)p=d*.3;e(a<8.w(c)){a=c;f s=p/4}m f s=p/(2*8.g)*8.r(c/a);6 a*8.j(2,-10*t)*8.n((t*d-s)*(2*8.g)/p)+c+b},T:9(x,t,b,c,d){f s=1.l;f p=0;f a=c;e(t==0)6 b;e((t/=d/2)==2)6 b+c;e(!p)p=d*(.3*1.5);e(a<8.w(c)){a=c;f s=p/4}m f s=p/(2*8.g)*8.r(c/a);e(t<1)6-.5*(a*8.j(2,10*(t-=1))*8.n((t*d-s)*(2*8.g)/p))+b;6 a*8.j(2,-10*(t-=1))*8.n((t*d-s)*(2*8.g)/p)*.5+c+b},F:9(x,t,b,c,d,s){e(s==u)s=1.l;6 c*(t/=d)*t*((s+1)*t-s)+b},E:9(x,t,b,c,d,s){e(s==u)s=1.l;6 c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},16:9(x,t,b,c,d,s){e(s==u)s=1.l;e((t/=d/2)<1)6 c/2*(t*t*(((s*=(1.B))+1)*t-s))+b;6 c/2*((t-=2)*t*(((s*=(1.B))+1)*t+s)+2)+b},A:9(x,t,b,c,d){6 c-h.i.v(x,d-t,0,c,d)+b},v:9(x,t,b,c,d){e((t/=d)<(1/2.k)){6 c*(7.q*t*t)+b}m e(t<(2/2.k)){6 c*(7.q*(t-=(1.5/2.k))*t+.k)+b}m e(t<(2.5/2.k)){6 c*(7.q*(t-=(2.14/2.k))*t+.11)+b}m{6 c*(7.q*(t-=(2.18/2.k))*t+.19)+b}},1b:9(x,t,b,c,d){e(t ul{display:block;}*/ 22 | .menu ul{margin:0;padding:0;position: absolute;top:100%;left:0;display:none;min-width:150px;max-width:150%;*width:150px;} 23 | .menu ul li{display:block;width:100%;} 24 | .menu ul li a{display:block;} 25 | .menu ul ul{top:0;left:100%;} 26 | 27 | /*--------------Dividers-------------------*/ 28 | .menu ul li.divider{border-top:1px solid #ccc;} 29 | .menu ul li.divider a{border-top:1px solid #fff;} 30 | 31 | 32 | /*--------------Right---------------------*/ 33 | .menu li.right{float:right;} 34 | 35 | 36 | /*--------------Arrows-------------------*/ 37 | .menu li.has-menu a{padding-right:25px;} 38 | .menu li.has-menu span.arrow{border-style:solid;border-width:5px; 39 | display:block;position:absolute;top:50%;right:5px;font-size:0;line-height:0;height:0;width:0;} 40 | .menu li li.has-menu span.arrow{margin-top:-4px;} 41 | 42 | /*--------------Vertical Menu Layout-------------------*/ 43 | .menu.vertical{} 44 | .menu.vertical li{display:block;} 45 | .menu.vertical li a{display:block;} 46 | .menu.vertical ul{top:0;left:100%;} 47 | .menu.vertical li.has-menu span.arrow{margin-top:-4px;} 48 | 49 | /*--------------Vertical Right Menu Layout-------------------*/ 50 | .menu.vertical.right{text-align:left;} 51 | .menu.vertical.right ul{top:0;right:100%;left:auto;} 52 | .menu.vertical.right li a{padding-left:25px;padding-right:20px;} 53 | .menu.vertical.right li.has-menu span.arrow{right:auto;left:5px;margin-top:-4px;} 54 | 55 | 56 | /*--------------------------------- 57 | MENU STYLES 58 | EDIT BELOW THIS LINE TO CUSTOMIZE 59 | -----------------------------------*/ 60 | .menu{ 61 | border:1px solid #ccc; 62 | background: #eee; /* Old browsers */ 63 | background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */ 64 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */ 65 | background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */ 66 | background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */ 67 | background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */ 68 | z-index:600; 69 | } 70 | 71 | .menu li{} 72 | 73 | .menu li a{ 74 | text-shadow:0px 1px 1px #fff; 75 | padding:15px 20px; 76 | text-decoration:none; 77 | font-size:0.9em; 78 | color: #777; 79 | } 80 | 81 | .menu li.current>a, 82 | .menu li.current>a:hover, 83 | .menu li.current.hover>a{ 84 | background: rgb(122,188,255); /* Old browsers */ 85 | background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */ 86 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */ 87 | background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */ 88 | background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera11.10+ */ 89 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */ 90 | background: linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */ 91 | color:#fff; 92 | text-shadow:0px -1px 0 rgba(0,0,0,0.2); 93 | cursor: default; 94 | } 95 | 96 | .menu li a:hover, 97 | .menu li.hover>a{ 98 | background:#f5f5f5; 99 | } 100 | 101 | /* sub menus */ 102 | .menu ul{ 103 | background: #efefef; 104 | border:1px solid #ccc; 105 | } 106 | 107 | .menu ul li{} 108 | .menu ul li a{} 109 | 110 | /* sub-sub menus */ 111 | .menu ul ul{} 112 | .menu ul ul li{} 113 | .menu ul ul li a{} 114 | 115 | /* arrows */ 116 | /* arrow down */ .menu li.has-menu span.arrow{border-color-top:#ccc;border-color:#ccc transparent transparent transparent;} 117 | /* arrow left */ .menu li li.has-menu span.arrow, .menu.vertical li.has-menu span.arrow 118 | {border-color-left:#ccc;border-color:transparent transparent transparent #ccc;} 119 | /* arrow right */ .menu.vertical.right li.has-menu span.arrow{border-color-right:#ccc;border-color:transparent #ccc transparent transparent;} 120 | 121 | /* dividers */ .menu ul li.divider{border-top:1px solid #ccc;} 122 | .menu ul li.divider a{border-top:1px solid #fff;} 123 | 124 | 125 | 126 | /*--------------------------------- 127 | RESPONSIVE MENU STYLES 128 | DO NOT EDIT unless you know what you are doing 129 | -----------------------------------*/ 130 | 131 | .menu li.menu-toggle{display:none;} 132 | 133 | 134 | @media all and (max-width: 768px) { 135 | 136 | .grid .menu li, 137 | .grid .menu.vertical li, 138 | .grid .menu.vertical.right li{ 139 | display:block; 140 | display:none; 141 | } 142 | 143 | .grid .menu li.menu-toggle, 144 | .grid .menu.vertical li.menu-toggle, 145 | .grid .menu.vertical.right li.menu-toggle{ 146 | display:block; 147 | } 148 | 149 | .grid .menu:hover li, 150 | .grid .menu.vertical:hover li, 151 | .grid .menu.vertical.right:hover li{ 152 | display:block; 153 | } 154 | 155 | /* arrows */ 156 | .grid .menu li.has-menu span.arrow, 157 | .grid .menu.vertical li.has-menu span.arrow, 158 | .grid .menu.vertical.right li.has-menu span.arrow, 159 | .grid .menu li li.has-menu span.arrow, .menu.vertical li.has-menu span.arrow 160 | {border-color-top:#ccc;border-color:#ccc transparent transparent transparent;} 161 | 162 | .grid .menu.vertical.right li.has-menu span.arrow{ 163 | right:5px;left:auto; 164 | } 165 | 166 | .grid .menu li a{ 167 | display:block; 168 | } 169 | 170 | .grid .menu ul, 171 | .grid .menu ul ul, 172 | .grid .menu.vertical ul, 173 | .grid .menu.vertical.right ul{ 174 | position:relative; 175 | top:0; 176 | left:0; 177 | margin:10px; 178 | } 179 | 180 | } 181 | -------------------------------------------------------------------------------- /experiment/writeOutAnimGifV2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Like Effect Generator 8 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 | 39 |
40 | 41 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /lib/HTML-KickStart-master/css/kickstart-forms.css: -------------------------------------------------------------------------------- 1 | /*--------------------------------- 2 | FORMS 3 | -----------------------------------*/ 4 | form{ 5 | padding:0; 6 | margin:0; 7 | } 8 | 9 | fieldset{ 10 | margin:30px 0 20px 0; 11 | padding:5px 15px 15px 15px; 12 | border:1px solid #ccc; 13 | background:#f5f5f5; 14 | -moz-border-radius:5px; 15 | -webkit-border-radius:5px; 16 | border-radius:5px; 17 | position: relative; 18 | top:0; 19 | left:0; 20 | } 21 | 22 | legend{ 23 | -moz-border-radius:5px; 24 | -webkit-border-radius:5px; 25 | border-radius:5px; 26 | border:1px solid #ccc; 27 | background:#f5f5f5; 28 | padding:2px 10px; 29 | margin:0 0 0 0; 30 | display:block; 31 | position: relative; 32 | top:0; 33 | left:0; 34 | } 35 | 36 | /*IE ONLY - I know, this is a stop gap*/ 37 | .msie fieldset{padding-top:25px;} 38 | .msie legend{position:absolute;top:-0.7em;left:10px;} 39 | 40 | label{ 41 | display:inline-block; 42 | *display:inline; 43 | vertical-align: middle; 44 | margin:0; 45 | padding:0; 46 | position:relative; 47 | top:0; 48 | left:0; 49 | zoom:1; 50 | -moz-box-sizing: border-box; 51 | -webkit-box-sizing: border-box; 52 | box-sizing: border-box; 53 | } 54 | 55 | label.inline{ 56 | display:inline; 57 | margin:0; 58 | } 59 | 60 | label span{ 61 | color:#999; 62 | font-size:0.9em; 63 | } 64 | 65 | label span.right{ 66 | position:absolute; 67 | bottom:0; 68 | right:0; 69 | text-align:right; 70 | display:inline-block; 71 | *display:inline; 72 | } 73 | 74 | label.disabled{ 75 | color:#ccc; 76 | } 77 | 78 | input{ 79 | display:inline-block; 80 | *display:inline; 81 | vertical-align: middle; 82 | width:auto; 83 | zoom:1; 84 | margin:0; 85 | border:1px solid #ccc; 86 | font-size:1em; 87 | padding:5px 0; 88 | text-indent: 5px; 89 | -moz-border-radius:5px; 90 | -webkit-border-radius:5px; 91 | border-radius:5px; 92 | background:#fff; 93 | -moz-box-shadow:inset 0 0 6px #ccc; 94 | -webkit-box-shadow:inset 0 1px 6px #ccc; 95 | box-shadow:inset 0 1px 6px #ccc; 96 | -moz-box-sizing: border-box; 97 | -webkit-box-sizing: border-box; 98 | box-sizing: border-box; 99 | } 100 | 101 | input::-webkit-input-placeholder, 102 | input:-moz-placeholder, 103 | .placeholder{ 104 | color:#bbb; 105 | } 106 | 107 | input::-moz-focus-inner {border:0;} 108 | 109 | input[disabled="disabled"], input.disabled{ 110 | color:#999; 111 | background:#f5f5f5; 112 | -moz-box-shadow:inset 0 0 2px #ddd; 113 | -webkit-box-shadow:inset 0 1px 2px #ddd; 114 | box-shadow:inset 0 1px 2px #ddd; 115 | } 116 | 117 | /* FOCUS STATES */ 118 | input[type="text"]:focus, 119 | textarea:focus, 120 | button:focus, 121 | a.button:focus, 122 | select:focus, 123 | input[type="file"]:focus, 124 | input[type="password"]:focus{ 125 | -webkit-box-shadow: 0 0 7px #6DB9FF; 126 | -moz-box-shadow : 0 0 7px #6DB9FF; 127 | box-shadow : 0 0 7px #6DB9FF; 128 | border: 1px solid #50B1FE; 129 | outline: none; 130 | } 131 | 132 | /* TRANSITION */ 133 | input[type="text"], 134 | textarea, 135 | button, 136 | a.button, 137 | a, 138 | input[type="file"]{ 139 | -moz-transition: -moz-box-shadow 0.5s, border 0.5s, background 0.5s; 140 | -webkit-transition: -webkit-box-shadow 0.5s, border 0.5s, background 0.5s; 141 | -o-transition: box-shadow 0.5s, border 0.5s, background 0.5s; 142 | transition: box-shadow 0.5s, border 0.5s, background 0.5s; 143 | } 144 | 145 | input.checkbox, 146 | input[type="checkbox"]{ 147 | display:inline; 148 | width:auto; 149 | margin:0; 150 | padding:0; 151 | border:0; 152 | background:none; 153 | vertical-align:center; 154 | *vertical-align: top; 155 | } 156 | 157 | input.radio, 158 | input[type="radio"]{ 159 | display:inline; 160 | width:auto; 161 | margin:0; 162 | padding:0; 163 | border:0; 164 | background:none; 165 | vertical-align:center; 166 | *vertical-align: top; 167 | } 168 | 169 | input[type="radio"]:focus, 170 | input[ type="checkbox"]:focus{ 171 | -webkit-box-shadow: 0 0 5px #6DB9FF; 172 | -moz-box-shadow : 0 0 5px #6DB9FF; 173 | box-shadow : 0 0 5px #6DB9FF; 174 | outline-color: #6DB9FF; 175 | } 176 | 177 | input.file, 178 | input[type="file"]{ 179 | /*font-size:0.8em;*/ 180 | -moz-box-shadow:none; 181 | -webkit-box-shadow:none; 182 | box-shadow:none; 183 | border:none; 184 | } 185 | 186 | select{ 187 | display:inline; 188 | width:auto; 189 | margin:0; 190 | border:1px solid #ccc; 191 | line-height:100%; 192 | padding:3px; 193 | vertical-align: middle; 194 | } 195 | 196 | select[disabled="disabled"], select.disabled{ 197 | color:#999; 198 | background:#f5f5f5; 199 | -moz-box-shadow:inset 0 0 2px #ddd; 200 | -webkit-box-shadow:inset 0 1px 2px #ddd; 201 | box-shadow:inset 0 1px 2px #ddd; 202 | } 203 | 204 | textarea{ 205 | width:auto; 206 | height:200px; 207 | margin:0; 208 | border:1px solid #ccc; 209 | padding:5px; 210 | vertical-align: middle; 211 | font-family:inherit; 212 | font-size:0.9em; 213 | -moz-border-radius:5px; 214 | -webkit-border-radius:5px; 215 | border-radius:5px; 216 | -moz-box-shadow:inset 0 0 6px #ccc; 217 | -webkit-box-shadow:inset 0 1px 6px #ccc; 218 | box-shadow:inset 0 1px 6px #ccc; 219 | -moz-box-sizing: border-box; 220 | -webkit-box-sizing: border-box; 221 | box-sizing: border-box; 222 | } 223 | 224 | /*--------------------------------- 225 | COLUMN SIZES 226 | -----------------------------------*/ 227 | 228 | /* sizes */ 229 | input[class*="col_"], 230 | select[class*="col_"], 231 | label[class*="col_"]{ 232 | float:none;display:inline-block;*display:inline;margin-bottom:0; 233 | *margin-left: 0.5%;*margin-right: 0.5%;/* this is for IE 7 Only and is not a good fix - work needed here */ 234 | } 235 | 236 | /*--------------------------------- 237 | FORMS VERTICAL 238 | -----------------------------------*/ 239 | form.vertical{ 240 | 241 | } 242 | 243 | form.vertical label{display:block;} 244 | form.vertical input, 245 | form.vertical select, 246 | form.vertical textarea{width:100%;display:block;margin-bottom:10px;} 247 | form.vertical .chzn-container{display:block;margin-bottom:10px;} 248 | form.vertical .chzn-choices{display:block;margin-bottom:10px;} 249 | 250 | /* radios & checks */ 251 | form.vertical input.checkbox, 252 | form.vertical input[type="checkbox"], 253 | form.vertical input.radio, 254 | form.vertical input[type="radio"], 255 | form.vertical label.inline{display:inline;width:auto;margin:0;} 256 | /*--------------------------------- 257 | FORM VALIDATION 258 | -----------------------------------*/ 259 | label.error{color:red;} 260 | input.error{border:1px solid red;} 261 | select.error{border:1px solid red;} 262 | 263 | /*--------------------------------- 264 | NOTICES 265 | -----------------------------------*/ 266 | .notice{ 267 | border:1px solid gold; 268 | background:lightyellow; 269 | padding:10px 20px 10px 40px; 270 | margin:10px 0; 271 | -moz-border-radius:5px; 272 | -webkit-border-radius:5px; 273 | border-radius:5px; 274 | color:#DEAE00; 275 | line-height:120%; 276 | vertical-align: center; 277 | text-shadow:0px 1px rgba(255,255,255,0.5); 278 | position:relative; 279 | top:0; 280 | left:0; 281 | clear:both; 282 | } 283 | 284 | .notice.warning{}/*default*/ 285 | .notice.error{border:1px solid red;background:pink;color:red;} 286 | .notice.success{border:1px solid green;background:lightgreen;color:green;} 287 | .notice i[class*='fa-']{position:absolute;top:50%;left:0.8em;margin-top:-0.6em;} 288 | .notice a[class*='fa-remove'], 289 | .notice a[class*='fa-remove']:active, 290 | .notice a[class*='fa-remove']:visited{text-decoration:none;font-size:12px;position:absolute;top:5px;right:5px;left:auto;color:inherit;margin-top:0;left:auto;} 291 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Like Effect Generator 3 | ----------------------- 4 | 5 | Files: 6 | * FrontEnd.js 7 | * LikeEffectGenerator.js 8 | * MainWorker.js 9 | * ZIPWorker.js 10 | * SVGToCanvas.js 11 | * FrontEnd_NoWorker.js 12 | * custom.css 13 | * index.html 14 | * index_noWorker.html 15 | 16 | The MIT License (MIT) 17 | 18 | Copyright (c) 2016 Amigo(WhiteLuckers) (@WL_Amigo) 19 | 20 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 21 | 22 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 23 | 24 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 25 | 26 | 27 | 28 | jsgif 29 | ------- 30 | (includes jsgif/GIFEncoderOnlyGlobal.js) 31 | 32 | Copyright (c) 2010-2014 Kevin Kwok 33 | 34 | Permission is hereby granted, free of charge, to any person obtaining a copy 35 | of this software and associated documentation files (the "Software"), to deal 36 | in the Software without restriction, including without limitation the rights 37 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 38 | copies of the Software, and to permit persons to whom the Software is 39 | furnished to do so, subject to the following conditions: 40 | 41 | The above copyright notice and this permission notice shall be included in 42 | all copies or substantial portions of the Software. 43 | 44 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 45 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 46 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 47 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 48 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 49 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 50 | THE SOFTWARE. 51 | 52 | 53 | 54 | Tiny Color Picker 55 | ------------------- 56 | 57 | The MIT License (MIT) 58 | 59 | Copyright (c) 2014 Peter Dematté 60 | 61 | Permission is hereby granted, free of charge, to any person obtaining a copy 62 | of this software and associated documentation files (the "Software"), to deal 63 | in the Software without restriction, including without limitation the rights 64 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 65 | copies of the Software, and to permit persons to whom the Software is 66 | furnished to do so, subject to the following conditions: 67 | 68 | The above copyright notice and this permission notice shall be included in 69 | all copies or substantial portions of the Software. 70 | 71 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 72 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 73 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 74 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 75 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 76 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 77 | THE SOFTWARE. 78 | 79 | 80 | 81 | FileSaver 82 | ----------- 83 | 84 | Copyright © 2015 [Eli Grey][1]. 85 | 86 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 87 | 88 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 89 | 90 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 91 | 92 | [1]: http://eligrey.com 93 | 94 | 95 | 96 | jszip 97 | ------- 98 | 99 | The MIT License 100 | 101 | Copyright (c) 2009-2014 Stuart Knightley, David Duponchel, Franz Buchinger, António Afonso 102 | 103 | Permission is hereby granted, free of charge, to any person obtaining a copy 104 | of this software and associated documentation files (the "Software"), to deal 105 | in the Software without restriction, including without limitation the rights 106 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 107 | copies of the Software, and to permit persons to whom the Software is 108 | furnished to do so, subject to the following conditions: 109 | 110 | The above copyright notice and this permission notice shall be included in 111 | all copies or substantial portions of the Software. 112 | 113 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 114 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 115 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 116 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 117 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 118 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 119 | THE SOFTWARE. 120 | 121 | 122 | 123 | filer.js 124 | ---------- 125 | (filer-util.js contains copy of `Util` functions from filer.js) 126 | 127 | Copyright 2013 - Eric Bidelman (ebidel@gmail.com) 128 | 129 | Licensed under the Apache License, Version 2.0 (the "License"); 130 | you may not use this file except in compliance with the License. 131 | You may obtain a copy of the License at 132 | 133 | http://www.apache.org/licenses/LICENSE-2.0 134 | 135 | Unless required by applicable law or agreed to in writing, software 136 | distributed under the License is distributed on an "AS IS" BASIS, 137 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 138 | See the License for the specific language governing permissions and 139 | limitations under the License. 140 | 141 | 142 | 143 | HTML KickStart 144 | ---------------- 145 | 146 | Copyright © 2011-2012 Joshua Gatcke http://www.99lime.com | HTML KickStart 147 | 148 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 149 | 150 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 151 | 152 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 153 | -------------------------------------------------------------------------------- /lib/jsgif/LZWEncoder.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This class handles LZW encoding 3 | * Adapted from Jef Poskanzer's Java port by way of J. M. G. Elliott. 4 | * @author Kevin Weiner (original Java version - kweiner@fmsware.com) 5 | * @author Thibault Imbert (AS3 version - bytearray.org) 6 | * @author Kevin Kwok (JavaScript version - https://github.com/antimatter15/jsgif) 7 | * @version 0.1 AS3 implementation 8 | */ 9 | 10 | LZWEncoder = function() { 11 | 12 | var exports = {}; 13 | var EOF = -1; 14 | var imgW; 15 | var imgH; 16 | var pixAry; 17 | var initCodeSize; 18 | var remaining; 19 | var curPixel; 20 | 21 | // GIFCOMPR.C - GIF Image compression routines 22 | // Lempel-Ziv compression based on 'compress'. GIF modifications by 23 | // David Rowley (mgardi@watdcsu.waterloo.edu) 24 | // General DEFINEs 25 | 26 | var BITS = 12; 27 | var HSIZE = 5003; // 80% occupancy 28 | 29 | // GIF Image compression - modified 'compress' 30 | // Based on: compress.c - File compression ala IEEE Computer, June 1984. 31 | // By Authors: Spencer W. Thomas (decvax!harpo!utah-cs!utah-gr!thomas) 32 | // Jim McKie (decvax!mcvax!jim) 33 | // Steve Davies (decvax!vax135!petsd!peora!srd) 34 | // Ken Turkowski (decvax!decwrl!turtlevax!ken) 35 | // James A. Woods (decvax!ihnp4!ames!jaw) 36 | // Joe Orost (decvax!vax135!petsd!joe) 37 | 38 | var n_bits; // number of bits/code 39 | var maxbits = BITS; // user settable max # bits/code 40 | var maxcode; // maximum code, given n_bits 41 | var maxmaxcode = 1 << BITS; // should NEVER generate this code 42 | var htab = []; 43 | var codetab = []; 44 | var hsize = HSIZE; // for dynamic table sizing 45 | var free_ent = 0; // first unused entry 46 | 47 | // block compression parameters -- after all codes are used up, 48 | // and compression rate changes, start over. 49 | 50 | var clear_flg = false; 51 | 52 | // Algorithm: use open addressing double hashing (no chaining) on the 53 | // prefix code / next character combination. We do a variant of Knuth's 54 | // algorithm D (vol. 3, sec. 6.4) along with G. Knott's relatively-prime 55 | // secondary probe. Here, the modular division first probe is gives way 56 | // to a faster exclusive-or manipulation. Also do block compression with 57 | // an adaptive reset, whereby the code table is cleared when the compression 58 | // ratio decreases, but after the table fills. The variable-length output 59 | // codes are re-sized at this point, and a special CLEAR code is generated 60 | // for the decompressor. Late addition: construct the table according to 61 | // file size for noticeable speed improvement on small files. Please direct 62 | // questions about this implementation to ames!jaw. 63 | 64 | var g_init_bits; 65 | var ClearCode; 66 | var EOFCode; 67 | 68 | // output 69 | // Output the given code. 70 | // Inputs: 71 | // code: A n_bits-bit integer. If == -1, then EOF. This assumes 72 | // that n_bits =< wordsize - 1. 73 | // Outputs: 74 | // Outputs code to the file. 75 | // Assumptions: 76 | // Chars are 8 bits long. 77 | // Algorithm: 78 | // Maintain a BITS character long buffer (so that 8 codes will 79 | // fit in it exactly). Use the VAX insv instruction to insert each 80 | // code in turn. When the buffer fills up empty it and start over. 81 | 82 | var cur_accum = 0; 83 | var cur_bits = 0; 84 | var masks = [0x0000, 0x0001, 0x0003, 0x0007, 0x000F, 0x001F, 0x003F, 0x007F, 0x00FF, 0x01FF, 0x03FF, 0x07FF, 0x0FFF, 0x1FFF, 0x3FFF, 0x7FFF, 0xFFFF]; 85 | 86 | // Number of characters so far in this 'packet' 87 | var a_count; 88 | 89 | // Define the storage for the packet accumulator 90 | var accum = []; 91 | 92 | var LZWEncoder = exports.LZWEncoder = function LZWEncoder(width, height, pixels, color_depth) { 93 | imgW = width; 94 | imgH = height; 95 | pixAry = pixels; 96 | initCodeSize = Math.max(2, color_depth); 97 | }; 98 | 99 | // Add a character to the end of the current packet, and if it is 254 100 | // characters, flush the packet to disk. 101 | var char_out = function char_out(c, outs) { 102 | accum[a_count++] = c; 103 | if (a_count >= 254) flush_char(outs); 104 | }; 105 | 106 | // Clear out the hash table 107 | // table clear for block compress 108 | 109 | var cl_block = function cl_block(outs) { 110 | cl_hash(hsize); 111 | free_ent = ClearCode + 2; 112 | clear_flg = true; 113 | output(ClearCode, outs); 114 | }; 115 | 116 | // reset code table 117 | var cl_hash = function cl_hash(hsize) { 118 | for (var i = 0; i < hsize; ++i) htab[i] = -1; 119 | }; 120 | 121 | var compress = exports.compress = function compress(init_bits, outs) { 122 | 123 | var fcode; 124 | var i; /* = 0 */ 125 | var c; 126 | var ent; 127 | var disp; 128 | var hsize_reg; 129 | var hshift; 130 | 131 | // Set up the globals: g_init_bits - initial number of bits 132 | g_init_bits = init_bits; 133 | 134 | // Set up the necessary values 135 | clear_flg = false; 136 | n_bits = g_init_bits; 137 | maxcode = MAXCODE(n_bits); 138 | 139 | ClearCode = 1 << (init_bits - 1); 140 | EOFCode = ClearCode + 1; 141 | free_ent = ClearCode + 2; 142 | 143 | a_count = 0; // clear packet 144 | 145 | ent = nextPixel(); 146 | 147 | hshift = 0; 148 | for (fcode = hsize; fcode < 65536; fcode *= 2) 149 | ++hshift; 150 | hshift = 8 - hshift; // set hash code range bound 151 | 152 | hsize_reg = hsize; 153 | cl_hash(hsize_reg); // clear hash table 154 | 155 | output(ClearCode, outs); 156 | 157 | outer_loop: while ((c = nextPixel()) != EOF) { 158 | fcode = (c << maxbits) + ent; 159 | i = (c << hshift) ^ ent; // xor hashing 160 | 161 | if (htab[i] == fcode) { 162 | ent = codetab[i]; 163 | continue; 164 | } 165 | 166 | else if (htab[i] >= 0) { // non-empty slot 167 | 168 | disp = hsize_reg - i; // secondary hash (after G. Knott) 169 | if (i === 0) disp = 1; 170 | 171 | do { 172 | if ((i -= disp) < 0) 173 | i += hsize_reg; 174 | 175 | if (htab[i] == fcode) { 176 | ent = codetab[i]; 177 | continue outer_loop; 178 | } 179 | } while (htab[i] >= 0); 180 | } 181 | 182 | output(ent, outs); 183 | ent = c; 184 | if (free_ent < maxmaxcode) { 185 | codetab[i] = free_ent++; // code -> hashtable 186 | htab[i] = fcode; 187 | } 188 | else cl_block(outs); 189 | } 190 | 191 | // Put out the final code. 192 | output(ent, outs); 193 | output(EOFCode, outs); 194 | }; 195 | 196 | // ---------------------------------------------------------------------------- 197 | var encode = exports.encode = function encode(os) { 198 | os.writeByte(initCodeSize); // write "initial code size" byte 199 | remaining = imgW * imgH; // reset navigation variables 200 | curPixel = 0; 201 | compress(initCodeSize + 1, os); // compress and write the pixel data 202 | os.writeByte(0); // write block terminator 203 | }; 204 | 205 | // Flush the packet to disk, and reset the accumulator 206 | var flush_char = function flush_char(outs) { 207 | if (a_count > 0) { 208 | outs.writeByte(a_count); 209 | outs.writeBytes(accum, 0, a_count); 210 | a_count = 0; 211 | } 212 | }; 213 | 214 | var MAXCODE = function MAXCODE(n_bits) { 215 | return (1 << n_bits) - 1; 216 | }; 217 | 218 | // ---------------------------------------------------------------------------- 219 | // Return the next pixel from the image 220 | // ---------------------------------------------------------------------------- 221 | 222 | var nextPixel = function nextPixel() { 223 | if (remaining === 0) return EOF; 224 | --remaining; 225 | var pix = pixAry[curPixel++]; 226 | return pix & 0xff; 227 | }; 228 | 229 | var output = function output(code, outs) { 230 | 231 | cur_accum &= masks[cur_bits]; 232 | 233 | if (cur_bits > 0) cur_accum |= (code << cur_bits); 234 | else cur_accum = code; 235 | 236 | cur_bits += n_bits; 237 | 238 | while (cur_bits >= 8) { 239 | char_out((cur_accum & 0xff), outs); 240 | cur_accum >>= 8; 241 | cur_bits -= 8; 242 | } 243 | 244 | // If the next entry is going to be too big for the code size, 245 | // then increase it, if possible. 246 | 247 | if (free_ent > maxcode || clear_flg) { 248 | 249 | if (clear_flg) { 250 | 251 | maxcode = MAXCODE(n_bits = g_init_bits); 252 | clear_flg = false; 253 | 254 | } else { 255 | 256 | ++n_bits; 257 | if (n_bits == maxbits) maxcode = maxmaxcode; 258 | else maxcode = MAXCODE(n_bits); 259 | } 260 | } 261 | 262 | if (code == EOFCode) { 263 | 264 | // At EOF, write the rest of the buffer. 265 | while (cur_bits > 0) { 266 | char_out((cur_accum & 0xff), outs); 267 | cur_accum >>= 8; 268 | cur_bits -= 8; 269 | } 270 | 271 | flush_char(outs); 272 | } 273 | }; 274 | 275 | LZWEncoder.apply(this, arguments); 276 | return exports; 277 | }; 278 | -------------------------------------------------------------------------------- /lib/canvg/rgbcolor.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A class to parse color values 3 | * @author Stoyan Stefanov 4 | * @link http://www.phpied.com/rgb-color-parser-in-javascript/ 5 | * @license Use it if you like it 6 | */ 7 | 8 | (function ( global ) { 9 | 10 | function RGBColor(color_string) 11 | { 12 | this.ok = false; 13 | 14 | // strip any leading # 15 | if (color_string.charAt(0) == '#') { // remove # if any 16 | color_string = color_string.substr(1,6); 17 | } 18 | 19 | color_string = color_string.replace(/ /g,''); 20 | color_string = color_string.toLowerCase(); 21 | 22 | // before getting into regexps, try simple matches 23 | // and overwrite the input 24 | var simple_colors = { 25 | aliceblue: 'f0f8ff', 26 | antiquewhite: 'faebd7', 27 | aqua: '00ffff', 28 | aquamarine: '7fffd4', 29 | azure: 'f0ffff', 30 | beige: 'f5f5dc', 31 | bisque: 'ffe4c4', 32 | black: '000000', 33 | blanchedalmond: 'ffebcd', 34 | blue: '0000ff', 35 | blueviolet: '8a2be2', 36 | brown: 'a52a2a', 37 | burlywood: 'deb887', 38 | cadetblue: '5f9ea0', 39 | chartreuse: '7fff00', 40 | chocolate: 'd2691e', 41 | coral: 'ff7f50', 42 | cornflowerblue: '6495ed', 43 | cornsilk: 'fff8dc', 44 | crimson: 'dc143c', 45 | cyan: '00ffff', 46 | darkblue: '00008b', 47 | darkcyan: '008b8b', 48 | darkgoldenrod: 'b8860b', 49 | darkgray: 'a9a9a9', 50 | darkgreen: '006400', 51 | darkkhaki: 'bdb76b', 52 | darkmagenta: '8b008b', 53 | darkolivegreen: '556b2f', 54 | darkorange: 'ff8c00', 55 | darkorchid: '9932cc', 56 | darkred: '8b0000', 57 | darksalmon: 'e9967a', 58 | darkseagreen: '8fbc8f', 59 | darkslateblue: '483d8b', 60 | darkslategray: '2f4f4f', 61 | darkturquoise: '00ced1', 62 | darkviolet: '9400d3', 63 | deeppink: 'ff1493', 64 | deepskyblue: '00bfff', 65 | dimgray: '696969', 66 | dodgerblue: '1e90ff', 67 | feldspar: 'd19275', 68 | firebrick: 'b22222', 69 | floralwhite: 'fffaf0', 70 | forestgreen: '228b22', 71 | fuchsia: 'ff00ff', 72 | gainsboro: 'dcdcdc', 73 | ghostwhite: 'f8f8ff', 74 | gold: 'ffd700', 75 | goldenrod: 'daa520', 76 | gray: '808080', 77 | green: '008000', 78 | greenyellow: 'adff2f', 79 | honeydew: 'f0fff0', 80 | hotpink: 'ff69b4', 81 | indianred : 'cd5c5c', 82 | indigo : '4b0082', 83 | ivory: 'fffff0', 84 | khaki: 'f0e68c', 85 | lavender: 'e6e6fa', 86 | lavenderblush: 'fff0f5', 87 | lawngreen: '7cfc00', 88 | lemonchiffon: 'fffacd', 89 | lightblue: 'add8e6', 90 | lightcoral: 'f08080', 91 | lightcyan: 'e0ffff', 92 | lightgoldenrodyellow: 'fafad2', 93 | lightgrey: 'd3d3d3', 94 | lightgreen: '90ee90', 95 | lightpink: 'ffb6c1', 96 | lightsalmon: 'ffa07a', 97 | lightseagreen: '20b2aa', 98 | lightskyblue: '87cefa', 99 | lightslateblue: '8470ff', 100 | lightslategray: '778899', 101 | lightsteelblue: 'b0c4de', 102 | lightyellow: 'ffffe0', 103 | lime: '00ff00', 104 | limegreen: '32cd32', 105 | linen: 'faf0e6', 106 | magenta: 'ff00ff', 107 | maroon: '800000', 108 | mediumaquamarine: '66cdaa', 109 | mediumblue: '0000cd', 110 | mediumorchid: 'ba55d3', 111 | mediumpurple: '9370d8', 112 | mediumseagreen: '3cb371', 113 | mediumslateblue: '7b68ee', 114 | mediumspringgreen: '00fa9a', 115 | mediumturquoise: '48d1cc', 116 | mediumvioletred: 'c71585', 117 | midnightblue: '191970', 118 | mintcream: 'f5fffa', 119 | mistyrose: 'ffe4e1', 120 | moccasin: 'ffe4b5', 121 | navajowhite: 'ffdead', 122 | navy: '000080', 123 | oldlace: 'fdf5e6', 124 | olive: '808000', 125 | olivedrab: '6b8e23', 126 | orange: 'ffa500', 127 | orangered: 'ff4500', 128 | orchid: 'da70d6', 129 | palegoldenrod: 'eee8aa', 130 | palegreen: '98fb98', 131 | paleturquoise: 'afeeee', 132 | palevioletred: 'd87093', 133 | papayawhip: 'ffefd5', 134 | peachpuff: 'ffdab9', 135 | peru: 'cd853f', 136 | pink: 'ffc0cb', 137 | plum: 'dda0dd', 138 | powderblue: 'b0e0e6', 139 | purple: '800080', 140 | red: 'ff0000', 141 | rosybrown: 'bc8f8f', 142 | royalblue: '4169e1', 143 | saddlebrown: '8b4513', 144 | salmon: 'fa8072', 145 | sandybrown: 'f4a460', 146 | seagreen: '2e8b57', 147 | seashell: 'fff5ee', 148 | sienna: 'a0522d', 149 | silver: 'c0c0c0', 150 | skyblue: '87ceeb', 151 | slateblue: '6a5acd', 152 | slategray: '708090', 153 | snow: 'fffafa', 154 | springgreen: '00ff7f', 155 | steelblue: '4682b4', 156 | tan: 'd2b48c', 157 | teal: '008080', 158 | thistle: 'd8bfd8', 159 | tomato: 'ff6347', 160 | turquoise: '40e0d0', 161 | violet: 'ee82ee', 162 | violetred: 'd02090', 163 | wheat: 'f5deb3', 164 | white: 'ffffff', 165 | whitesmoke: 'f5f5f5', 166 | yellow: 'ffff00', 167 | yellowgreen: '9acd32' 168 | }; 169 | for (var key in simple_colors) { 170 | if (color_string == key) { 171 | color_string = simple_colors[key]; 172 | } 173 | } 174 | // emd of simple type-in colors 175 | 176 | // array of color definition objects 177 | var color_defs = [ 178 | { 179 | re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/, 180 | example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'], 181 | process: function (bits){ 182 | return [ 183 | parseInt(bits[1]), 184 | parseInt(bits[2]), 185 | parseInt(bits[3]) 186 | ]; 187 | } 188 | }, 189 | { 190 | re: /^(\w{2})(\w{2})(\w{2})$/, 191 | example: ['#00ff00', '336699'], 192 | process: function (bits){ 193 | return [ 194 | parseInt(bits[1], 16), 195 | parseInt(bits[2], 16), 196 | parseInt(bits[3], 16) 197 | ]; 198 | } 199 | }, 200 | { 201 | re: /^(\w{1})(\w{1})(\w{1})$/, 202 | example: ['#fb0', 'f0f'], 203 | process: function (bits){ 204 | return [ 205 | parseInt(bits[1] + bits[1], 16), 206 | parseInt(bits[2] + bits[2], 16), 207 | parseInt(bits[3] + bits[3], 16) 208 | ]; 209 | } 210 | } 211 | ]; 212 | 213 | // search through the definitions to find a match 214 | for (var i = 0; i < color_defs.length; i++) { 215 | var re = color_defs[i].re; 216 | var processor = color_defs[i].process; 217 | var bits = re.exec(color_string); 218 | if (bits) { 219 | channels = processor(bits); 220 | this.r = channels[0]; 221 | this.g = channels[1]; 222 | this.b = channels[2]; 223 | this.ok = true; 224 | } 225 | 226 | } 227 | 228 | // validate/cleanup values 229 | this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r); 230 | this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g); 231 | this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b); 232 | 233 | // some getters 234 | this.toRGB = function () { 235 | return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')'; 236 | } 237 | this.toHex = function () { 238 | var r = this.r.toString(16); 239 | var g = this.g.toString(16); 240 | var b = this.b.toString(16); 241 | if (r.length == 1) r = '0' + r; 242 | if (g.length == 1) g = '0' + g; 243 | if (b.length == 1) b = '0' + b; 244 | return '#' + r + g + b; 245 | } 246 | 247 | // help 248 | this.getHelpXML = function () { 249 | 250 | var examples = new Array(); 251 | // add regexps 252 | for (var i = 0; i < color_defs.length; i++) { 253 | var example = color_defs[i].example; 254 | for (var j = 0; j < example.length; j++) { 255 | examples[examples.length] = example[j]; 256 | } 257 | } 258 | // add type-in colors 259 | for (var sc in simple_colors) { 260 | examples[examples.length] = sc; 261 | } 262 | 263 | var xml = document.createElement('ul'); 264 | xml.setAttribute('id', 'rgbcolor-examples'); 265 | for (var i = 0; i < examples.length; i++) { 266 | try { 267 | var list_item = document.createElement('li'); 268 | var list_color = new RGBColor(examples[i]); 269 | var example_div = document.createElement('div'); 270 | example_div.style.cssText = 271 | 'margin: 3px; ' 272 | + 'border: 1px solid black; ' 273 | + 'background:' + list_color.toHex() + '; ' 274 | + 'color:' + list_color.toHex() 275 | ; 276 | example_div.appendChild(document.createTextNode('test')); 277 | var list_item_value = document.createTextNode( 278 | ' ' + examples[i] + ' -> ' + list_color.toRGB() + ' -> ' + list_color.toHex() 279 | ); 280 | list_item.appendChild(example_div); 281 | list_item.appendChild(list_item_value); 282 | xml.appendChild(list_item); 283 | 284 | } catch(e){} 285 | } 286 | return xml; 287 | 288 | } 289 | 290 | } 291 | 292 | // export as AMD... 293 | if ( typeof define !== 'undefined' && define.amd ) { 294 | define( function () { return RGBColor; }); 295 | } 296 | 297 | // ...or as browserify 298 | else if ( typeof module !== 'undefined' && module.exports ) { 299 | module.exports = RGBColor; 300 | } 301 | 302 | global.RGBColor = RGBColor; 303 | 304 | }( typeof window !== 'undefined' ? window : this )); -------------------------------------------------------------------------------- /experiment/index_noWorker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | いいねボタン風エフェクトアニメジェネレータ 8 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 |
40 |

いいねボタン風エフェクトアニメジェネレータ

41 |
42 |
43 | 44 |
45 |
46 |
47 | 48 |
49 |
50 | ここに使いたい画像ファイルをドラッグ＆ドロップ！ 51 |
(もしくはここをクリックでファイルダイアログを開いて選択) 52 |
53 |
54 |
55 |
56 |
57 | 58 |
59 |
60 | 61 |
62 |
63 | 64 |
65 |
66 | 67 |
68 | 69 |

もっと細かくいじる

70 | 76 | 77 |
78 | 79 |
80 |
81 | 82 | 83 | 84 | 85 |

86 | GIFアニメを生成していた場合、「出力サイズを確認する」を実行すると破棄されてしまいますのでご注意下さい。 87 |

88 |
89 |
90 | 91 | 92 |
93 |
94 |
95 | 96 | 97 |
98 |
99 |

100 | 「押されていない時風の画像を付加する」は、透明度が設定されている画像のみ正常に動作します。 101 |

102 |
103 |
104 |
105 | 106 |
107 | 108 |
109 |
110 | 111 | 112 |
113 |
114 | 115 | 116 |
117 | 118 |
119 | 120 | 121 |

122 | 生成時に自動で「出現時の色」と色相が同じで薄く明るい色に設定されます。 123 |

124 |
125 |
126 |
127 | 128 |
129 | 130 |
131 | 色の付け方 132 | 133 | 134 |
135 | 136 | 137 |
138 |
139 | 140 |
141 |
142 | 143 | 144 |
145 |
146 | 147 | 148 |
149 |
150 | 151 |
152 | 153 |
154 | 155 |

156 | 説明で何のことかが分からない場合、設定値を変更しないことをお勧めします。 157 |

158 | 159 |
160 | 161 | 162 |

163 | jsgif内で使用されているNeuQuantに与えるquality値。小さい程クオンタイズ品質が高くなります(元の画像との誤差平均が小さくなる)が、ものすごく計算に時間が掛かります。 164 |

165 |
166 |
167 | 168 | 169 |

170 | アニメーションGIFではなく、連番canvas(PNGとして保存可)で出力します。クオンタイズ前のフルカラー版の画像を得られます。pixiv等の連番PNGによるアニメーションに対応しているサービスで利用したい場合などに使って下さい。 171 |

172 |
173 |
174 | 175 |
176 | 177 |
178 | 179 |
180 | 181 | 182 | 183 | 186 | 187 | 188 | 189 | 190 | -------------------------------------------------------------------------------- /src/ParticlePreset1.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | /// 5 | /// 6 | /// 7 | /// 8 | /// 9 | /// 10 | /// 11 | 12 | namespace LLEAG { 13 | 14 | export function setAndGetPreset1(): Array{ 15 | // set physical constants 16 | kX = 2; 17 | kY = 4.0; 18 | vLastY = -18; 19 | //g = kY * -vLastY; 20 | defaultX0 = 0.0; 21 | defaultY0 = -5.0; 22 | 23 | // create particle presets 24 | let ribbonPLEffect = new PopLineEffect({ 25 | lifeTime: 0.5, 26 | lineWidthFactor: 0.1 27 | }); 28 | let colorPresets = { 29 | magenta: { 30 | r: 0xff, g: 0x20, b: 0x56 31 | }, 32 | yellow: { 33 | r: 0xff, g: 0xbb, b: 0x00 34 | }, 35 | pink: { 36 | r: 0xff, g: 0x24, b: 0xde 37 | }, 38 | green: { 39 | r: 0x50, g: 0xd6, b: 0x00 40 | }, 41 | blue: { 42 | r: 0x09, g: 0xa5, b: 0xff 43 | } 44 | } 45 | let pp = [ 46 | // PStar 47 | new PStar({ 48 | v0X: 34, 49 | v0Y: -200, 50 | size: 2.6, 51 | lifeTime: 1.85, // (73 - 12) / 33 ~= 1.85 52 | disappearDurationRate: 0.1, 53 | color: colorPresets.magenta, 54 | vSpinX: 0, 55 | vSpinY: 0, 56 | vSpinZ: 0.2, 57 | initSpinZ: 0.1 58 | }), 59 | new PStar({ 60 | v0X: -48, 61 | v0Y: -160, 62 | size: 2.3, 63 | lifeTime: 2.1, // (81 - 12) / 33 ~= 2.10 64 | disappearDurationRate: 0.1, 65 | color: colorPresets.blue, 66 | vSpinX: 0, 67 | vSpinY: 0, 68 | vSpinZ: -0.3, 69 | initSpinZ: 0.1 70 | }), 71 | new PStar({ 72 | v0X: 24, 73 | v0Y: -95, 74 | size: 1.5, 75 | lifeTime: 1.49, // (61 - 12) / 33 ~= 1.49 76 | disappearDurationRate: 0.1, 77 | color: colorPresets.magenta, 78 | vSpinX: 0, 79 | vSpinY: 0, 80 | vSpinZ: 0.4, 81 | initSpinZ: 0.1 82 | }), 83 | // PSquare 84 | new PSquare({ 85 | v0X: -20, 86 | v0Y: -190, 87 | size: 1.8, 88 | lifeTime: 1.46, // (60 - 12) / 33 ~= 1.46 89 | disappearDurationRate: 0.1, 90 | color: colorPresets.magenta, 91 | vSpinX: 0, 92 | vSpinY: 0, 93 | vSpinZ: 0.2, 94 | initSpinZ: 0.1 95 | }), 96 | new PSquare({ 97 | v0X: -14, 98 | v0Y: -160, 99 | size: 1.4, 100 | lifeTime: 1.61, // (65 - 12) / 33 ~= 1.61 101 | disappearDurationRate: 0.1, 102 | color: colorPresets.magenta, 103 | vSpinX: 0, 104 | vSpinY: 0, 105 | vSpinZ: -0.4, 106 | initSpinZ: 0.1 107 | }), 108 | new PSquare({ 109 | v0X: 30, 110 | v0Y: -170, 111 | size: 1.5, 112 | lifeTime: 1.18, // (51 - 12) / 33 ~= 1.18 113 | disappearDurationRate: 0.1, 114 | color: colorPresets.blue, 115 | vSpinX: 0, 116 | vSpinY: 0, 117 | vSpinZ: -0.4, 118 | initSpinZ: 0.1 119 | }), 120 | new PSquare({ 121 | v0X: 22, 122 | v0Y: -140, 123 | size: 1.2, 124 | lifeTime: 1.58, // (64 - 12) / 33 ~= 1.58 125 | disappearDurationRate: 0.1, 126 | color: colorPresets.magenta, 127 | vSpinX: 0, 128 | vSpinY: 0, 129 | vSpinZ: 0.8, 130 | initSpinZ: 0.1 131 | }), 132 | new PSquare({ 133 | v0X: -16, 134 | v0Y: -115, 135 | size: 1.0, 136 | lifeTime: 0.97, // (44 - 12) / 33 ~= 0.97 137 | disappearDurationRate: 1.0, 138 | color: colorPresets.green, 139 | vSpinX: 0, 140 | vSpinY: 0, 141 | vSpinZ: 0.6, 142 | initSpinZ: 0.1 143 | }), 144 | // PTriangle 145 | new PTriangle({ 146 | v0X: 14, 147 | v0Y: -166, 148 | size: 1.5, 149 | lifeTime: 1.85, // (73 - 12) / 33 ~= 1.85 150 | disappearDurationRate: 0.1, 151 | color: colorPresets.magenta, 152 | vSpinX: 0, 153 | vSpinY: 0, 154 | vSpinZ: 0.3, 155 | initSpinZ: 0.1 156 | }), 157 | new PTriangle({ 158 | v0X: 45, 159 | v0Y: -165, 160 | size: 1.3, 161 | lifeTime: 2.18, // (84 - 12) / 33 ~= 2.18 162 | disappearDurationRate: 0.3, 163 | color: colorPresets.green, 164 | vSpinX: 0, 165 | vSpinY: 0, 166 | vSpinZ: 0.6, 167 | initSpinZ: 0.1 168 | }), 169 | new PTriangle({ 170 | v0X: -34, 171 | v0Y: -115, 172 | size: 1.0, 173 | lifeTime: 1.39, // (58 - 12) / 33 ~= 1.39 174 | disappearDurationRate: 0.3, 175 | color: colorPresets.blue, 176 | vSpinX: 0, 177 | vSpinY: 0, 178 | vSpinZ: -1.0, 179 | initSpinZ: 0.1 180 | }), 181 | // PCircle 182 | new PCircle({ 183 | v0X: 8, 184 | v0Y: -135, 185 | size: 2, 186 | lifeTime: 1.23, // (49 - 12) / 33 ~= 1.12 187 | disappearDurationRate: 1.0, 188 | color: colorPresets.yellow 189 | }), 190 | new PCircle({ 191 | v0X: -6, 192 | v0Y: -105, 193 | size: 1.0, 194 | lifeTime: 1.76, // (70 - 12) / 33 ~= 1.76 195 | disappearDurationRate: 0.3, 196 | color: colorPresets.magenta 197 | }), 198 | // PPopCircle 199 | new PPopCircle({ 200 | v0X: 15, 201 | v0Y: -100, 202 | size: 2, 203 | lifeTime: 1.3, 204 | disappearDurationRate: 1.0, 205 | color: colorPresets.magenta 206 | }), 207 | new PPopCircle({ 208 | v0X: -12, 209 | v0Y: -135, 210 | size: 1.2, 211 | lifeTime: 2.0, 212 | disappearDurationRate: 0.4, 213 | color: colorPresets.yellow 214 | }), 215 | // PRibbon 216 | new PRibbon({ 217 | v0X: 0, 218 | v0Y: -190, 219 | size: 3.5, 220 | lifeTime: 1.85, // (73 - 12) / 33 ~= 1.85 221 | disappearDurationRate: 0.4, 222 | color: colorPresets.blue, 223 | vSpinZ: 0.15, 224 | initSpinZ: -0.08, 225 | lineWidth: 1.2, 226 | popLineEffectInstance: ribbonPLEffect, 227 | }), 228 | new PRibbon({ 229 | v0X: -28, 230 | v0Y: -135, 231 | size: 3.5, 232 | lifeTime: 1.7, // (68 - 12) / 33 ~= 1.70 233 | disappearDurationRate: 0.2, 234 | color: colorPresets.magenta, 235 | vSpinZ: -0.12, 236 | initSpinZ: -0.12, 237 | lineWidth: 1.2, 238 | popLineEffectInstance: ribbonPLEffect, 239 | }), 240 | new PRibbon({ 241 | v0X: -17, 242 | v0Y: -70, 243 | size: 3.5, 244 | lifeTime: 1.24, // (53 - 12) / 33 ~= 1.24 245 | disappearDurationRate: 0.5, 246 | color: colorPresets.magenta, 247 | vSpinZ: -0.24, 248 | initSpinZ: -0.0, 249 | lineWidth: 1.2, 250 | popLineEffectInstance: ribbonPLEffect, 251 | }), 252 | new PRibbon({ 253 | v0X: 26, 254 | v0Y: -50, 255 | size: 3.5, 256 | lifeTime: 1.18, // (51 - 12) / 33 ~= 1.18 257 | disappearDurationRate: 0.2, 258 | color: colorPresets.yellow, 259 | vSpinZ: 0.06, 260 | initSpinZ: -0.15, 261 | lineWidth: 1.2, 262 | popLineEffectInstance: ribbonPLEffect, 263 | }), 264 | ]; 265 | 266 | return pp; 267 | } 268 | } 269 | -------------------------------------------------------------------------------- /lib/jsgif/README.md: -------------------------------------------------------------------------------- 1 | Pure JavaScript HTML5 to (Animated) GIF Conversion 2 | =========================================================== 3 | 4 | Based on [as3gif](http://code.google.com/p/as3gif/) Ported by [Kevin Kwok](http://antimatter15.com) 5 | 6 | ![This is the raw canvas element saved as a non-animated PNG](Demos/raw_canvas.png) 7 | ![This is the GIF which was generated from the canvas.](Demos/converted_animation.gif) 8 | ![This is the GIF which was generated from the canvas.](Demos/clock.gif) 9 | 10 | > AS3GIF lets you play and encode animated GIF's with ActionScript 3 11 | 12 | Since web pages can usually natively play GIFs fine, it's only a port of the GIFEncoder 13 | portions of the library. 14 | 15 | 16 | Basic Usage 17 | ============ 18 | 19 | Since it pretty much *is* GIFEncoder, you could consult the [as3gif how-to page](http://code.google.com/p/as3gif/wiki/How_to_use#The_GIFEncoder) 20 | 21 | 22 | But there are some differences so I'll cover it here anyway. 23 | 24 | You first need to include the JS files. It's probably best if you include it in this order, but it shouldn't matter too much. 25 | 26 | 27 | 28 | 29 | 30 | If you want to render the gif through an inline `` tag or try to save to disk or send to server or anything that requires 31 | conversion into a non-binary string form, you should probably include `b64.js` too. 32 | 33 | 34 | 35 | Simple enough right? Now to convert stuff to GIF, you need to have a working or at least some imageData-esque array. 36 | 37 | 38 |