[
  {
    "path": ".bowerrc",
    "content": "{\n    \"directory\": \"app/bower_components\"\n}\n"
  },
  {
    "path": ".editorconfig",
    "content": "# EditorConfig helps developers define and maintain consistent\n# coding styles between different editors and IDEs\n# editorconfig.org\n\nroot = true\n\n\n[*]\n\n# Change these settings to your own preference\nindent_style = space\nindent_size = 4\n\n# We recommend you to keep these unchanged\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": ".gitattributes",
    "content": "* text=auto"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\ndist\n.tmp\n.sass-cache\napp/bower_components\ntest/bower_components\n"
  },
  {
    "path": ".jshintrc",
    "content": "{\n    \"node\": true,\n    \"browser\": true,\n    \"esnext\": true,\n    \"bitwise\": true,\n    \"camelcase\": true,\n    \"curly\": true,\n    \"eqeqeq\": true,\n    \"immed\": true,\n    \"indent\": 4,\n    \"latedef\": true,\n    \"newcap\": true,\n    \"noarg\": true,\n    \"quotmark\": \"single\",\n    \"undef\": true,\n    \"unused\": true,\n    \"strict\": true,\n    \"trailing\": true,\n    \"smarttabs\": true,\n    \"jquery\": true\n}\n"
  },
  {
    "path": "Gruntfile.js",
    "content": "// Generated on 2014-05-01 using generator-webapp 0.4.8\n'use strict';\n\n// # Globbing\n// for performance reasons we're only matching one level down:\n// 'test/spec/{,*/}*.js'\n// use this if you want to recursively match all subfolders:\n// 'test/spec/**/*.js'\n\nmodule.exports = function (grunt) {\n\n    // Load grunt tasks automatically\n    require('load-grunt-tasks')(grunt);\n\n    // Time how long tasks take. Can help when optimizing build times\n    require('time-grunt')(grunt);\n\n    // Define the configuration for all the tasks\n    grunt.initConfig({\n\n        // Project settings\n        config: {\n            // Configurable paths\n            app: 'app',\n            dist: 'dist'\n        },\n\n        // Watches files for changes and runs tasks based on the changed files\n        watch: {\n            bower: {\n                files: ['bower.json'],\n                tasks: ['bowerInstall']\n            },\n            gruntfile: {\n                files: ['Gruntfile.js']\n            },\n            compass: {\n                files: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],\n                tasks: ['compass:server', 'autoprefixer']\n            },\n            styles: {\n                files: ['<%= config.app %>/styles/{,*/}*.css'],\n                tasks: ['newer:copy:styles', 'autoprefixer']\n            },\n            livereload: {\n                options: {\n                    livereload: '<%= connect.options.livereload %>'\n                },\n                files: [\n                ]\n            }\n        },\n\n        // The actual grunt server settings\n        connect: {\n            options: {\n                port: 9000,\n                livereload: 35729,\n                // Change this to '0.0.0.0' to access the server from outside\n                hostname: '0.0.0.0'\n            },\n            livereload: {\n                options: {\n                    open: true,\n                    base: [\n                        '.tmp',\n                        '<%= config.app %>'\n                    ]\n                }\n            },\n            test: {\n                options: {\n                    port: 9001,\n                    base: [\n                        '.tmp',\n                        'test',\n                        '<%= config.app %>'\n                    ]\n                }\n            },\n            dist: {\n                options: {\n                    open: true,\n                    base: '<%= config.dist %>',\n                    livereload: false\n                }\n            }\n        },\n\n        // Empties folders to start fresh\n        clean: {\n            dist: {\n                files: [{\n                    dot: true,\n                    src: [\n                        '.tmp',\n                        '<%= config.dist %>/*',\n                        '!<%= config.dist %>/.git*'\n                    ]\n                }]\n            },\n            server: '.tmp'\n        },\n\n        // Make sure code styles are up to par and there are no obvious mistakes\n        jshint: {\n            options: {\n                jshintrc: '.jshintrc',\n                reporter: require('jshint-stylish')\n            },\n            all: [\n                'Gruntfile.js',\n                '<%= config.app %>/scripts/{,*/}*.js',\n                '!<%= config.app %>/scripts/vendor/*',\n                'test/spec/{,*/}*.js'\n            ]\n        },\n\n        // Mocha testing framework configuration options\n        mocha: {\n            all: {\n                options: {\n                    run: true,\n                    urls: ['http://<%= connect.test.options.hostname %>:<%= connect.test.options.port %>/index.html']\n                }\n            }\n        },\n\n        // Compiles Sass to CSS and generates necessary files if requested\n        compass: {\n            options: {\n                sassDir: '<%= config.app %>/styles',\n                cssDir: '.tmp/styles',\n                generatedImagesDir: '.tmp/images/generated',\n                imagesDir: '<%= config.app %>/images',\n                javascriptsDir: '<%= config.app %>/scripts',\n                fontsDir: '<%= config.app %>/styles/fonts',\n                importPath: '<%= config.app %>/bower_components',\n                httpImagesPath: '/images',\n                httpGeneratedImagesPath: '/images/generated',\n                httpFontsPath: '/styles/fonts',\n                relativeAssets: false,\n                assetCacheBuster: false\n            },\n            dist: {\n                options: {\n                    generatedImagesDir: '<%= config.dist %>/images/generated'\n                }\n            },\n            server: {\n                options: {\n                    debugInfo: true\n                }\n            }\n        },\n\n        // Add vendor prefixed styles\n        autoprefixer: {\n            options: {\n                browsers: ['last 1 version']\n            },\n            dist: {\n                files: [{\n                    expand: true,\n                    cwd: '.tmp/styles/',\n                    src: '{,*/}*.css',\n                    dest: '.tmp/styles/'\n                }]\n            }\n        },\n\n        // Automatically inject Bower components into the HTML file\n        bowerInstall: {\n            app: {\n                src: ['<%= config.app %>/index.html'],\n                ignorePath: '<%= config.app %>/',\n                exclude: ['<%= config.app %>/bower_components/bootstrap-sass/vendor/assets/javascripts/bootstrap.js']\n            },\n            sass: {\n                src: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],\n                ignorePath: '<%= config.app %>/bower_components/'\n            }\n        },\n\n        // Renames files for browser caching purposes\n        rev: {\n            dist: {\n                files: {\n                    src: [\n                        '<%= config.dist %>/scripts/{,*/}*.js',\n                        '<%= config.dist %>/styles/{,*/}*.css',\n                        '<%= config.dist %>/images/{,*/}*.*',\n                        '<%= config.dist %>/styles/fonts/{,*/}*.*',\n                        '<%= config.dist %>/*.{ico,png}'\n                    ]\n                }\n            }\n        },\n\n        // Reads HTML for usemin blocks to enable smart builds that automatically\n        // concat, minify and revision files. Creates configurations in memory so\n        // additional tasks can operate on them\n        useminPrepare: {\n            options: {\n                dest: '<%= config.dist %>'\n            },\n            html: '<%= config.app %>/index.html'\n        },\n\n        // Performs rewrites based on rev and the useminPrepare configuration\n        usemin: {\n            options: {\n                assetsDirs: ['<%= config.dist %>', '<%= config.dist %>/images']\n            },\n            html: ['<%= config.dist %>/{,*/}*.html'],\n            css: ['<%= config.dist %>/styles/{,*/}*.css']\n        },\n\n        // The following *-min tasks produce minified files in the dist folder\n        imagemin: {\n            dist: {\n                files: [{\n                    expand: true,\n                    cwd: '<%= config.app %>/images',\n                    src: '{,*/}*.{gif,jpeg,jpg,png}',\n                    dest: '<%= config.dist %>/images'\n                }]\n            }\n        },\n\n        svgmin: {\n            dist: {\n                files: [{\n                    expand: true,\n                    cwd: '<%= config.app %>/images',\n                    src: '{,*/}*.svg',\n                    dest: '<%= config.dist %>/images'\n                }]\n            }\n        },\n\n        htmlmin: {\n            dist: {\n                options: {\n                    collapseBooleanAttributes: true,\n                    collapseWhitespace: true,\n                    removeAttributeQuotes: true,\n                    removeCommentsFromCDATA: true,\n                    removeEmptyAttributes: true,\n                    removeOptionalTags: true,\n                    removeRedundantAttributes: true,\n                    useShortDoctype: true\n                },\n                files: [{\n                    expand: true,\n                    cwd: '<%= config.dist %>',\n                    src: '{,*/}*.html',\n                    dest: '<%= config.dist %>'\n                }]\n            }\n        },\n\n        // By default, your `index.html`'s <!-- Usemin block --> will take care of\n        // minification. These next options are pre-configured if you do not wish\n        // to use the Usemin blocks.\n        // cssmin: {\n        //     dist: {\n        //         files: {\n        //             '<%= config.dist %>/styles/main.css': [\n        //                 '.tmp/styles/{,*/}*.css',\n        //                 '<%= config.app %>/styles/{,*/}*.css'\n        //             ]\n        //         }\n        //     }\n        // },\n        // uglify: {\n        //     dist: {\n        //         files: {\n        //             '<%= config.dist %>/scripts/scripts.js': [\n        //                 '<%= config.dist %>/scripts/scripts.js'\n        //             ]\n        //         }\n        //     }\n        // },\n        // concat: {\n        //     dist: {}\n        // },\n\n        // Copies remaining files to places other tasks can use\n        copy: {\n            dist: {\n                files: [{\n                    expand: true,\n                    dot: true,\n                    cwd: '<%= config.app %>',\n                    dest: '<%= config.dist %>',\n                    src: [\n                        '*.{ico,png,txt}',\n                        '.htaccess',\n                        'images/{,*/}*.webp',\n                        '{,*/}*.html',\n                        'styles/fonts/{,*/}*.*'\n                    ]\n                }]\n            },\n            styles: {\n                expand: true,\n                dot: true,\n                cwd: '<%= config.app %>/styles',\n                dest: '.tmp/styles/',\n                src: '{,*/}*.css'\n            }\n        },\n\n        // Generates a custom Modernizr build that includes only the tests you\n        // reference in your app\n        modernizr: {\n            devFile: '<%= config.app %>/bower_components/modernizr/modernizr.js',\n            outputFile: '<%= config.dist %>/scripts/vendor/modernizr.js',\n            files: [\n                '<%= config.dist %>/scripts/{,*/}*.js',\n                '<%= config.dist %>/styles/{,*/}*.css',\n                '!<%= config.dist %>/scripts/vendor/*'\n            ],\n            uglify: true\n        },\n\n        // Run some tasks in parallel to speed up build process\n        concurrent: {\n            server: [\n                'compass:server',\n                'copy:styles'\n            ],\n            test: [\n                'copy:styles'\n            ],\n            dist: [\n                'compass',\n                'copy:styles',\n                'imagemin',\n                'svgmin'\n            ]\n        }\n    });\n\n\n    grunt.registerTask('serve', function (target) {\n        if (target === 'dist') {\n            return grunt.task.run(['build', 'connect:dist:keepalive']);\n        }\n\n        grunt.task.run([\n            'clean:server',\n            'concurrent:server',\n            'autoprefixer',\n            'connect:livereload',\n            'watch'\n        ]);\n    });\n\n    grunt.registerTask('server', function (target) {\n        grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');\n        grunt.task.run([target ? ('serve:' + target) : 'serve']);\n    });\n\n    grunt.registerTask('test', function (target) {\n        if (target !== 'watch') {\n            grunt.task.run([\n                'clean:server',\n                'concurrent:test',\n                'autoprefixer'\n            ]);\n        }\n\n        grunt.task.run([\n            'connect:test',\n            'mocha'\n        ]);\n    });\n\n    grunt.registerTask('build', [\n        'clean:dist',\n        'useminPrepare',\n        'concurrent:dist',\n        'autoprefixer',\n        'concat',\n        'cssmin',\n        'uglify',\n        'copy:dist',\n        'modernizr',\n        'rev',\n        'usemin',\n        'htmlmin'\n    ]);\n\n    grunt.registerTask('default', [\n        'newer:jshint',\n        'test',\n        'build'\n    ]);\n};\n"
  },
  {
    "path": "README.md",
    "content": "100day-canvas-bootcamp-training\n===============================\n### PROJECT URL: [http://codepen.io/kenjiSpecial/](http://codepen.io/kenjiSpecial/)\n![Image of project](https://raw.githubusercontent.com/kenjiSpecial/100day-canvas-bootcamp-training/master/images/screen01.png)\nThis is my project for create one canvas animation work until I finish 100 work.\n\nAll codes for js which are for animation works are at app/script.\n\nHopefuly I want to create a small work every day, but sometime it takes a few day to make it.\n\n\n## Demos and Codes.\n\n### common file:\nhtml : [index.html](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/index.html) | scss : [main.scss](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/styles/main.scss)\n\n### Day 1 - Day 10\n- Day1. [rect animation](http://codepen.io/kenjiSpecial/pen/phiBu) |  [ js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/1-squash.js)\n- Day2. [squash & strech](http://codepen.io/kenjiSpecial/pen/hjsdG)| [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/2-squash.js)\n- Day3. [squash & stretch + staging](http://codepen.io/kenjiSpecial/pen/Bapfi) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/3-stage.js)\n- Day4. [squash & stretch + anticipation](http://codepen.io/kenjiSpecial/pen/uidbC) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/4-anticipation.js)\n- Day5. [Pose to Pose.](http://codepen.io/kenjiSpecial/pen/tfnEh) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/5-pose-to-pos.js)\n- Day6. [Pose to Pose.](http://codepen.io/kenjiSpecial/pen/wIhqf) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/6-pose-to-pos.js)\n- Day7. [Pose to Pose.](http://codepen.io/kenjiSpecial/pen/yiBJw) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/7-pose-to-pose.js)\n- Day8. [just skect it.](http://codepen.io/kenjiSpecial/pen/hiLfs) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/8-arcs.js)\n- Day9. [arc](http://codepen.io/kenjiSpecial/pen/Frazi) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/9-arcs.js)\n- Day10. [Just sketch.](http://codepen.io/kenjiSpecial/pen/ghfwL) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/10-animation.js)\n\n\n### Day 11 - Day 20\n- Day11. [animation](http://codepen.io/kenjiSpecial/pen/xEIwr) | [js code](http://codepen.io/kenjiSpecial/pen/xEIwr)\n- Day12. [animation](http://codepen.io/kenjiSpecial/pen/chGgL) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/12-secondary-action.js)\n- Day13. [secondary action](http://codepen.io/kenjiSpecial/pen/eyCkt) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/13-secondary-action.js)\n- Day14. [undefined](http://codepen.io/kenjiSpecial/pen/nxKhm) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/14-undefined.js)\n- Day15. [undefined](http://codepen.io/kenjiSpecial/pen/qfLdD) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/15-undefined.js)\n- Day16. [June 2?](http://codepen.io/kenjiSpecial/pen/uIjnH) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/16-undefined.js)\n- Day17. [undefined](http://codepen.io/kenjiSpecial/pen/zxqDv) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/17-undefined.js)\n- Day18. [undefined](http://codepen.io/kenjiSpecial/pen/dvHIq) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/18-undefined.js)\n- Day19. [undefined](http://codepen.io/kenjiSpecial/pen/vDfKi) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/19-undefined.js)\n- Day20. [undefined](http://codepen.io/kenjiSpecial/pen/tnmCc) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/20-undefined.js)\n\n### Day 21 - Day 30\n- Day21. [undefined](http://codepen.io/kenjiSpecial/pen/dkLho) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/21-undefined.js)\n- Day22. [undefined](http://codepen.io/kenjiSpecial/pen/zsGrB) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/22-undefined.js)\n- Day23. [undefined](http://codepen.io/kenjiSpecial/pen/BGhrm) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/22-undefined.js)\n- Day24. [undefined](http://codepen.io/kenjiSpecial/pen/aIhmB) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/1-illusion-of-life/23-undefined.js)\n- Day25. [undefined](http://codepen.io/kenjiSpecial/pen/kCoEq) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/2-numbers/24-number0.js)\n- Day26. [undefined](http://codepen.io/kenjiSpecial/pen/ysChe)\n- Day27. [undefined](http://codepen.io/kenjiSpecial/pen/dwypc) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/99-hobby/26-undefined.js)\n- Day28. [undefined](http://codepen.io/kenjiSpecial/pen/yLFwi)\n- Day29. [Combination](http://codepen.io/kenjiSpecial/pen/qsipv) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/99-hobby/28-02-combination.js)\n- Day30. [boid animation](http://codepen.io/kenjiSpecial/pen/efgzI) | js code\n\n### Day 31 - Day 40\n- Day31. [Move Mouse](http://codepen.io/kenjiSpecial/pen/AJxDc) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/99-hobby/30-mouse-boid.js)\n- Day32. [Colorful boids.](http://codepen.io/kenjiSpecial/pen/DerBc) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/99-hobby/32-boid-collection.js)\n- Day33. [undefined](http://codepen.io/kenjiSpecial/pen/atAoE) | [js code](https://github.com/kenjiSpecial/100day-canvas-bootcamp-training/blob/master/app/scripts/3-algorithm/35-undefined.js)\n- Day34. [undefined](http://codepen.io/kenjiSpecial/pen/qBbEv) \n- Day35. [undefined](http://codepen.io/kenjiSpecial/pen/ulBCG)\n- Day35. [undefined](http://codepen.io/kenjiSpecial/pen/bzGkJ)\n- Day36. [undefined](http://codepen.io/kenjiSpecial/pen/vrfuJ)\n- Day37. [undefined](http://codepen.io/kenjiSpecial/pen/qimgz)\n- Day38. [Loop](http://codepen.io/kenjiSpecial/pen/vIHFG)\n- Day39. [Loop](http://codepen.io/kenjiSpecial/pen/FlcaB)\n- Day40. [Loop](http://codepen.io/kenjiSpecial/pen/enrbq)\n\n### Day 41 - Day 50\n- Day41. [Loop](http://codepen.io/kenjiSpecial/pen/agGIs)\n- Day42. [Loop](http://codepen.io/kenjiSpecial/pen/AwJjt)\n- Day43. [Loop](http://codepen.io/kenjiSpecial/pen/saAjL)\n- Day44. [Clock with gray scott model.](http://codepen.io/kenjiSpecial/pen/AExmF)\n- Day45. [Loop](http://codepen.io/kenjiSpecial/pen/DpCjF)\n- Day46. [undefined](http://codepen.io/kenjiSpecial/pen/FpvCj)\n- Day47. [Clock with shader](http://codepen.io/kenjiSpecial/pen/IFCzK)\n- Day48. [undefined](http://codepen.io/kenjiSpecial/pen/pwIdm)\n- Day49. [Typography Animation.](http://codepen.io/kenjiSpecial/pen/JqGdE)\n- Day50. [awwwards logo animation.](http://codepen.io/kenjiSpecial/pen/GsLwn)\n\n### Day 51 - Day 60\n- Day51. [Color](http://codepen.io/kenjiSpecial/pen/azOXEa)\n- Day52. [Image Slider](http://codepen.io/kenjiSpecial/pen/EaVxdx)\n- Day53. [Image Gallery.](http://codepen.io/kenjiSpecial/pen/YPyyVq)\n- Day54. [WebGL Particle Animation.](http://codepen.io/kenjiSpecial/pen/vELOrM)\n- Day55. [WebGL Particle Animation#2.](http://codepen.io/kenjiSpecial/pen/yyeaKm)\n- Day56. [WebGL Particle Animation#3.](http://codepen.io/kenjiSpecial/pen/zxrRZz)\n- Day57. [Hello with three.js.](http://codepen.io/kenjiSpecial/pen/jEWorO)\n- Day58. [Particle Clock.](http://codepen.io/kenjiSpecial/pen/gbrvpK)\n- Day59. [WebGL Particle Animation#4.](http://codepen.io/kenjiSpecial/pen/EaKLyB)\n- Day60. [WebGL Animation.](http://codepen.io/kenjiSpecial/pen/WbwJZy)\n\n\n### Day 60 - Day 70\n- Day61. [Particle Animation](http://codepen.io/kenjiSpecial/pen/ogzdxO)\n- Day62. [Shader experience](http://codepen.io/kenjiSpecial/pen/ByWxGy)\n- Day63. [Shader experience](http://codepen.io/kenjiSpecial/pen/YPyyVq)\n\n\n\n#### Referrence\n\n- [http://the12principles.tumblr.com/](http://the12principles.tumblr.com/)\n- [http://fyprocessing.tumblr.com/](http://fyprocessing.tumblr.com/)\n- [http://centolodigiani.tumblr.com/](http://centolodigiani.tumblr.com/)\n- [http://beesandbombs.tumblr.com/](http://beesandbombs.tumblr.com/)\n- [https://github.com/edankwan/PerspectiveTransform.js](https://github.com/edankwan/PerspectiveTransform.js)\n \n##### WEBGL\n\n- [https://github.com/tombye/3d-testground](https://github.com/tombye/3d-testground)\n- [https://github.com/mrdoob/webgl-blendfunctions](https://github.com/mrdoob/webgl-blendfunctions)\n- [https://github.com/KhronosGroup/WebGL](https://github.com/KhronosGroup/WebGL)\n- [https://github.com/greggman/webgl-fundamentals](https://github.com/greggman/webgl-fundamentals)\n- [http://www.rozengain.com/blog/2010/02/22/beginning-webgl-step-by-step-tutorial/](http://www.rozengain.com/blog/2010/02/22/beginning-webgl-step-by-step-tutorial/)\n"
  },
  {
    "path": "app/.htaccess",
    "content": "# Apache Server Configs v2.2.0 | MIT License\n# https://github.com/h5bp/server-configs-apache\n\n# (!) Using `.htaccess` files slows down Apache, therefore, if you have access\n# to the main server config file (usually called `httpd.conf`), you should add\n# this logic there: http://httpd.apache.org/docs/current/howto/htaccess.html.\n\n# ##############################################################################\n# # CROSS-ORIGIN RESOURCE SHARING (CORS)                                       #\n# ##############################################################################\n\n# ------------------------------------------------------------------------------\n# | Cross-domain AJAX requests                                                 |\n# ------------------------------------------------------------------------------\n\n# Allow cross-origin AJAX requests.\n# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity\n# http://enable-cors.org/\n\n# <IfModule mod_headers.c>\n#    Header set Access-Control-Allow-Origin \"*\"\n# </IfModule>\n\n# ------------------------------------------------------------------------------\n# | CORS-enabled images                                                        |\n# ------------------------------------------------------------------------------\n\n# Send the CORS header for images when browsers request it.\n# https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image\n# http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html\n# http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/\n\n<IfModule mod_setenvif.c>\n    <IfModule mod_headers.c>\n        <FilesMatch \"\\.(cur|gif|ico|jpe?g|png|svgz?|webp)$\">\n            SetEnvIf Origin \":\" IS_CORS\n            Header set Access-Control-Allow-Origin \"*\" env=IS_CORS\n        </FilesMatch>\n    </IfModule>\n</IfModule>\n\n# ------------------------------------------------------------------------------\n# | Web fonts access                                                           |\n# ------------------------------------------------------------------------------\n\n# Allow access to web fonts from all domains.\n\n<IfModule mod_headers.c>\n    <FilesMatch \"\\.(eot|otf|tt[cf]|woff)$\">\n        Header set Access-Control-Allow-Origin \"*\"\n    </FilesMatch>\n</IfModule>\n\n\n# ##############################################################################\n# # ERRORS                                                                     #\n# ##############################################################################\n\n# ------------------------------------------------------------------------------\n# | 404 error prevention for non-existing redirected folders                   |\n# ------------------------------------------------------------------------------\n\n# Prevent Apache from returning a 404 error as the result of a rewrite\n# when the directory with the same name does not exist.\n# http://httpd.apache.org/docs/current/content-negotiation.html#multiviews\n# http://www.webmasterworld.com/apache/3808792.htm\n\nOptions -MultiViews\n\n# ------------------------------------------------------------------------------\n# | Custom error messages / pages                                              |\n# ------------------------------------------------------------------------------\n\n# Customize what Apache returns to the client in case of an error.\n# http://httpd.apache.org/docs/current/mod/core.html#errordocument\n\nErrorDocument 404 /404.html\n\n\n# ##############################################################################\n# # INTERNET EXPLORER                                                          #\n# ##############################################################################\n\n# ------------------------------------------------------------------------------\n# | Better website experience                                                  |\n# ------------------------------------------------------------------------------\n\n# Force Internet Explorer to render pages in the highest available mode\n# in the various cases when it may not.\n# http://hsivonen.iki.fi/doctype/ie-mode.pdf\n\n<IfModule mod_headers.c>\n    Header set X-UA-Compatible \"IE=edge\"\n    # `mod_headers` cannot match based on the content-type, however, this\n    # header should be send only for HTML pages and not for the other resources\n    <FilesMatch \"\\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$\">\n        Header unset X-UA-Compatible\n    </FilesMatch>\n</IfModule>\n\n# ------------------------------------------------------------------------------\n# | Cookie setting from iframes                                                |\n# ------------------------------------------------------------------------------\n\n# Allow cookies to be set from iframes in Internet Explorer.\n# http://msdn.microsoft.com/en-us/library/ms537343.aspx\n# http://www.w3.org/TR/2000/CR-P3P-20001215/\n\n# <IfModule mod_headers.c>\n#   Header set P3P \"policyref=\\\"/w3c/p3p.xml\\\", CP=\\\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\\\"\"\n# </IfModule>\n\n\n# ##############################################################################\n# # MIME TYPES AND ENCODING                                                    #\n# ##############################################################################\n\n# ------------------------------------------------------------------------------\n# | Proper MIME types for all files                                            |\n# ------------------------------------------------------------------------------\n\n<IfModule mod_mime.c>\n\n  # Audio\n    AddType audio/mp4                                   m4a f4a f4b\n    AddType audio/ogg                                   oga ogg opus\n\n  # Data interchange\n    AddType application/json                            json map\n    AddType application/ld+json                         jsonld\n\n  # JavaScript\n    # Normalize to standard type.\n    # http://tools.ietf.org/html/rfc4329#section-7.2\n    AddType application/javascript                      js\n\n  # Video\n    AddType video/mp4                                   f4v f4p m4v mp4\n    AddType video/ogg                                   ogv\n    AddType video/webm                                  webm\n    AddType video/x-flv                                 flv\n\n  # Web fonts\n    AddType application/font-woff                       woff\n    AddType application/vnd.ms-fontobject               eot\n\n    # Browsers usually ignore the font MIME types and simply sniff the bytes\n    # to figure out the font type.\n    # http://mimesniff.spec.whatwg.org/#matching-a-font-type-pattern\n\n    # Chrome however, shows a warning if any other MIME types are used for\n    # the following fonts.\n\n    AddType application/x-font-ttf                      ttc ttf\n    AddType font/opentype                               otf\n\n    # Make SVGZ fonts work on the iPad.\n    # https://twitter.com/FontSquirrel/status/14855840545\n    AddType     image/svg+xml                           svgz\n    AddEncoding gzip                                    svgz\n\n  # Other\n    AddType application/octet-stream                    safariextz\n    AddType application/x-chrome-extension              crx\n    AddType application/x-opera-extension               oex\n    AddType application/x-web-app-manifest+json         webapp\n    AddType application/x-xpinstall                     xpi\n    AddType application/xml                             atom rdf rss xml\n    AddType image/webp                                  webp\n    AddType image/x-icon                                cur\n    AddType text/cache-manifest                         appcache manifest\n    AddType text/vtt                                    vtt\n    AddType text/x-component                            htc\n    AddType text/x-vcard                                vcf\n\n</IfModule>\n\n# ------------------------------------------------------------------------------\n# | UTF-8 encoding                                                             |\n# ------------------------------------------------------------------------------\n\n# Use UTF-8 encoding for anything served as `text/html` or `text/plain`.\nAddDefaultCharset utf-8\n\n# Force UTF-8 for certain file formats.\n<IfModule mod_mime.c>\n    AddCharset utf-8 .atom .css .js .json .jsonld .rss .vtt .webapp .xml\n</IfModule>\n\n\n# ##############################################################################\n# # URL REWRITES                                                               #\n# ##############################################################################\n\n# ------------------------------------------------------------------------------\n# | Rewrite engine                                                             |\n# ------------------------------------------------------------------------------\n\n# Turn on the rewrite engine and enable the `FollowSymLinks` option (this is\n# necessary in order for the following directives to work).\n\n# If your web host doesn't allow the `FollowSymlinks` option, you may need to\n# comment it out and use `Options +SymLinksIfOwnerMatch`, but be aware of the\n# performance impact.\n# http://httpd.apache.org/docs/current/misc/perf-tuning.html#symlinks\n\n# Also, some cloud hosting services require `RewriteBase` to be set.\n# http://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-mod-rewrite-not-working-on-my-site\n\n<IfModule mod_rewrite.c>\n    Options +FollowSymlinks\n  # Options +SymLinksIfOwnerMatch\n    RewriteEngine On\n  # RewriteBase /\n</IfModule>\n\n# ------------------------------------------------------------------------------\n# | Suppressing / Forcing the `www.` at the beginning of URLs                  |\n# ------------------------------------------------------------------------------\n\n# The same content should never be available under two different URLs,\n# especially not with and without `www.` at the beginning. This can cause\n# SEO problems (duplicate content), and therefore, you should choose one\n# of the alternatives and redirect the other one.\n\n# By default `Option 1` (no `www.`) is activated.\n# http://no-www.org/faq.php?q=class_b\n\n# If you would prefer to use `Option 2`, just comment out all the lines\n# from `Option 1` and uncomment the ones from `Option 2`.\n\n# IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME!\n\n# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -\n\n# Option 1: rewrite www.example.com → example.com\n\n<IfModule mod_rewrite.c>\n    RewriteCond %{HTTPS} !=on\n    RewriteCond %{HTTP_HOST} ^www\\.(.+)$ [NC]\n    RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]\n</IfModule>\n\n# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -\n\n# Option 2: rewrite example.com → www.example.com\n\n# Be aware that the following might not be a good idea if you use \"real\"\n# subdomains for certain parts of your website.\n\n# <IfModule mod_rewrite.c>\n#    RewriteCond %{HTTPS} !=on\n#    RewriteCond %{HTTP_HOST} !^www\\. [NC]\n#    RewriteCond %{SERVER_ADDR} !=127.0.0.1\n#    RewriteCond %{SERVER_ADDR} !=::1\n#    RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]\n# </IfModule>\n\n\n# ##############################################################################\n# # SECURITY                                                                   #\n# ##############################################################################\n\n# ------------------------------------------------------------------------------\n# | Clickjacking                                                               |\n# ------------------------------------------------------------------------------\n\n# Protect website against clickjacking.\n\n# The example below sends the `X-Frame-Options` response header with the value\n# `DENY`, informing browsers not to display the web page content in any frame.\n\n# This might not be the best setting for everyone. You should read about the\n# other two possible values for `X-Frame-Options`: `SAMEORIGIN` & `ALLOW-FROM`.\n# http://tools.ietf.org/html/rfc7034#section-2.1\n\n# Keep in mind that while you could send the `X-Frame-Options` header for all\n# of your site’s pages, this has the potential downside that it forbids even\n# non-malicious framing of your content (e.g.: when users visit your site using\n# a Google Image Search results page).\n\n# Nonetheless, you should ensure that you send the `X-Frame-Options` header for\n# all pages that allow a user to make a state changing operation (e.g: pages\n# that contain one-click purchase links, checkout or bank-transfer confirmation\n# pages, pages that make permanent configuration changes, etc.).\n\n# Sending the `X-Frame-Options` header can also protect your website against\n# more than just clickjacking attacks: https://cure53.de/xfo-clickjacking.pdf.\n\n# http://tools.ietf.org/html/rfc7034\n# http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx\n# https://www.owasp.org/index.php/Clickjacking\n\n# <IfModule mod_headers.c>\n#     Header set X-Frame-Options \"DENY\"\n#     <FilesMatch \"\\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$\">\n#         Header unset X-Frame-Options\n#     </FilesMatch>\n# </IfModule>\n\n# ------------------------------------------------------------------------------\n# | Content Security Policy (CSP)                                              |\n# ------------------------------------------------------------------------------\n\n# Mitigate the risk of cross-site scripting and other content-injection attacks.\n\n# This can be done by setting a `Content Security Policy` which whitelists\n# trusted sources of content for your website.\n\n# The example header below allows ONLY scripts that are loaded from the current\n# site's origin (no inline scripts, no CDN, etc). This almost certainly won't\n# work as-is for your site!\n\n# For more details on how to craft a reasonable policy for your site, read:\n# http://html5rocks.com/en/tutorials/security/content-security-policy (or the\n# specification: http://w3.org/TR/CSP). Also, to make things easier, you can\n# use an online CSP header generator such as: http://cspisawesome.com/.\n\n# <IfModule mod_headers.c>\n#     Header set Content-Security-Policy \"script-src 'self'; object-src 'self'\"\n#     <FilesMatch \"\\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$\">\n#         Header unset Content-Security-Policy\n#     </FilesMatch>\n# </IfModule>\n\n# ------------------------------------------------------------------------------\n# | File access                                                                |\n# ------------------------------------------------------------------------------\n\n# Block access to directories without a default document.\n# You should leave the following uncommented, as you shouldn't allow anyone to\n# surf through every directory on your server (which may includes rather private\n# places such as the CMS's directories).\n\n<IfModule mod_autoindex.c>\n    Options -Indexes\n</IfModule>\n\n# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -\n\n# Block access to hidden files and directories.\n# This includes directories used by version control systems such as Git and SVN.\n\n<IfModule mod_rewrite.c>\n    RewriteCond %{SCRIPT_FILENAME} -d [OR]\n    RewriteCond %{SCRIPT_FILENAME} -f\n    RewriteRule \"(^|/)\\.\" - [F]\n</IfModule>\n\n# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -\n\n# Block access to files that can expose sensitive information.\n\n# By default, block access to backup and source files that may be left by some\n# text editors and can pose a security risk when anyone has access to them.\n# http://feross.org/cmsploit/\n\n# IMPORTANT: Update the `<FilesMatch>` regular expression from below to include\n# any files that might end up on your production server and can expose sensitive\n# information about your website. These files may include: configuration files,\n# files that contain metadata about the project (e.g.: project dependencies),\n# build scripts, etc..\n\n<FilesMatch \"(^#.*#|\\.(bak|config|dist|fla|in[ci]|log|psd|sh|sql|sw[op])|~)$\">\n\n    # Apache < 2.3\n    <IfModule !mod_authz_core.c>\n        Order allow,deny\n        Deny from all\n        Satisfy All\n    </IfModule>\n\n    # Apache ≥ 2.3\n    <IfModule mod_authz_core.c>\n        Require all denied\n    </IfModule>\n\n</FilesMatch>\n\n# ------------------------------------------------------------------------------\n# | Reducing MIME-type security risks                                          |\n# ------------------------------------------------------------------------------\n\n# Prevent some browsers from MIME-sniffing the response.\n\n# This reduces exposure to drive-by download attacks and should be enable\n# especially if the web server is serving user uploaded content, content\n# that could potentially be treated by the browser as executable.\n\n# http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-v-comprehensive-protection.aspx\n# http://msdn.microsoft.com/en-us/library/ie/gg622941.aspx\n# http://mimesniff.spec.whatwg.org/\n\n# <IfModule mod_headers.c>\n#     Header set X-Content-Type-Options \"nosniff\"\n# </IfModule>\n\n# ------------------------------------------------------------------------------\n# | Reflected Cross-Site Scripting (XSS) attacks                               |\n# ------------------------------------------------------------------------------\n\n# (1) Try to re-enable the Cross-Site Scripting (XSS) filter built into the\n#     most recent web browsers.\n#\n#     The filter is usually enabled by default, but in some cases it may be\n#     disabled by the user. However, in Internet Explorer for example, it can\n#     be re-enabled just by sending the `X-XSS-Protection` header with the\n#     value of `1`.\n#\n# (2) Prevent web browsers from rendering the web page if a potential reflected\n#     (a.k.a non-persistent) XSS attack is detected by the filter.\n#\n#     By default, if the filter is enabled and browsers detect a reflected\n#     XSS attack, they will attempt to block the attack by making the smallest\n#     possible modifications to the returned web page.\n#\n#     Unfortunately, in some browsers (e.g.: Internet Explorer), this default\n#     behavior may allow the XSS filter to be exploited, thereby, it's better\n#     to tell browsers to prevent the rendering of the page altogether, instead\n#     of attempting to modify it.\n#\n#     http://hackademix.net/2009/11/21/ies-xss-filter-creates-xss-vulnerabilities\n#\n# IMPORTANT: Do not rely on the XSS filter to prevent XSS attacks! Ensure that\n# you are taking all possible measures to prevent XSS attacks, the most obvious\n# being: validating and sanitizing your site's inputs.\n#\n# http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-iv-the-xss-filter.aspx\n# http://blogs.msdn.com/b/ieinternals/archive/2011/01/31/controlling-the-internet-explorer-xss-filter-with-the-x-xss-protection-http-header.aspx\n# https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29\n\n# <IfModule mod_headers.c>\n#     #                           (1)    (2)\n#     Header set X-XSS-Protection \"1; mode=block\"\n#     <FilesMatch \"\\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$\">\n#         Header unset X-XSS-Protection\n#     </FilesMatch>\n# </IfModule>\n\n# ------------------------------------------------------------------------------\n# | Secure Sockets Layer (SSL)                                                 |\n# ------------------------------------------------------------------------------\n\n# Rewrite secure requests properly in order to prevent SSL certificate warnings.\n# E.g.: prevent `https://www.example.com` when your certificate only allows\n# `https://secure.example.com`.\n\n# <IfModule mod_rewrite.c>\n#    RewriteCond %{SERVER_PORT} !^443\n#    RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L]\n# </IfModule>\n\n# ------------------------------------------------------------------------------\n# | HTTP Strict Transport Security (HSTS)                                      |\n# ------------------------------------------------------------------------------\n\n# Force client-side SSL redirection.\n\n# If a user types `example.com` in his browser, the above rule will redirect\n# him to the secure version of the site. That still leaves a window of\n# opportunity (the initial HTTP connection) for an attacker to downgrade or\n# redirect the request.\n\n# The following header ensures that browser will ONLY connect to your server\n# via HTTPS, regardless of what the users type in the address bar.\n\n# http://tools.ietf.org/html/draft-ietf-websec-strict-transport-sec-14#section-6.1\n# http://www.html5rocks.com/en/tutorials/security/transport-layer-security/\n\n# IMPORTANT: Remove the `includeSubDomains` optional directive if the subdomains\n# are not using HTTPS.\n\n# <IfModule mod_headers.c>\n#    Header set Strict-Transport-Security \"max-age=16070400; includeSubDomains\"\n# </IfModule>\n\n# ------------------------------------------------------------------------------\n# | Server software information                                                |\n# ------------------------------------------------------------------------------\n\n# Avoid displaying the exact Apache version number, the description of the\n# generic OS-type and the information about Apache's compiled-in modules.\n\n# ADD THIS DIRECTIVE IN THE `httpd.conf` AS IT WILL NOT WORK IN THE `.htaccess`!\n\n# ServerTokens Prod\n\n\n# ##############################################################################\n# # WEB PERFORMANCE                                                            #\n# ##############################################################################\n\n# ------------------------------------------------------------------------------\n# | Compression                                                                |\n# ------------------------------------------------------------------------------\n\n<IfModule mod_deflate.c>\n\n    # Force compression for mangled headers.\n    # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping\n    <IfModule mod_setenvif.c>\n        <IfModule mod_headers.c>\n            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\\s*,?\\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding\n            RequestHeader append Accept-Encoding \"gzip,deflate\" env=HAVE_Accept-Encoding\n        </IfModule>\n    </IfModule>\n\n    # Compress all output labeled with one of the following MIME-types\n    # (for Apache versions below 2.3.7, you don't need to enable `mod_filter`\n    #  and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines\n    #  as `AddOutputFilterByType` is still in the core directives).\n    <IfModule mod_filter.c>\n        AddOutputFilterByType DEFLATE application/atom+xml \\\n                                      application/javascript \\\n                                      application/json \\\n                                      application/ld+json \\\n                                      application/rss+xml \\\n                                      application/vnd.ms-fontobject \\\n                                      application/x-font-ttf \\\n                                      application/x-web-app-manifest+json \\\n                                      application/xhtml+xml \\\n                                      application/xml \\\n                                      font/opentype \\\n                                      image/svg+xml \\\n                                      image/x-icon \\\n                                      text/css \\\n                                      text/html \\\n                                      text/plain \\\n                                      text/x-component \\\n                                      text/xml\n    </IfModule>\n\n</IfModule>\n\n# ------------------------------------------------------------------------------\n# | Content transformations                                                    |\n# ------------------------------------------------------------------------------\n\n# Prevent mobile network providers from modifying the website's content.\n# http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9.5.\n\n# <IfModule mod_headers.c>\n#    Header set Cache-Control \"no-transform\"\n# </IfModule>\n\n# ------------------------------------------------------------------------------\n# | ETags                                                                      |\n# ------------------------------------------------------------------------------\n\n# Remove `ETags` as resources are sent with far-future expires headers.\n# http://developer.yahoo.com/performance/rules.html#etags.\n\n# `FileETag None` doesn't work in all cases.\n<IfModule mod_headers.c>\n    Header unset ETag\n</IfModule>\n\nFileETag None\n\n# ------------------------------------------------------------------------------\n# | Expires headers                                                            |\n# ------------------------------------------------------------------------------\n\n# The following expires headers are set pretty far in the future. If you\n# don't control versioning with filename-based cache busting, consider\n# lowering the cache time for resources such as style sheets and JavaScript\n# files to something like one week.\n\n<IfModule mod_expires.c>\n\n    ExpiresActive on\n    ExpiresDefault                                      \"access plus 1 month\"\n\n  # CSS\n    ExpiresByType text/css                              \"access plus 1 year\"\n\n  # Data interchange\n    ExpiresByType application/json                      \"access plus 0 seconds\"\n    ExpiresByType application/ld+json                   \"access plus 0 seconds\"\n    ExpiresByType application/xml                       \"access plus 0 seconds\"\n    ExpiresByType text/xml                              \"access plus 0 seconds\"\n\n  # Favicon (cannot be renamed!) and cursor images\n    ExpiresByType image/x-icon                          \"access plus 1 week\"\n\n  # HTML components (HTCs)\n    ExpiresByType text/x-component                      \"access plus 1 month\"\n\n  # HTML\n    ExpiresByType text/html                             \"access plus 0 seconds\"\n\n  # JavaScript\n    ExpiresByType application/javascript                \"access plus 1 year\"\n\n  # Manifest files\n    ExpiresByType application/x-web-app-manifest+json   \"access plus 0 seconds\"\n    ExpiresByType text/cache-manifest                   \"access plus 0 seconds\"\n\n  # Media\n    ExpiresByType audio/ogg                             \"access plus 1 month\"\n    ExpiresByType image/gif                             \"access plus 1 month\"\n    ExpiresByType image/jpeg                            \"access plus 1 month\"\n    ExpiresByType image/png                             \"access plus 1 month\"\n    ExpiresByType video/mp4                             \"access plus 1 month\"\n    ExpiresByType video/ogg                             \"access plus 1 month\"\n    ExpiresByType video/webm                            \"access plus 1 month\"\n\n  # Web feeds\n    ExpiresByType application/atom+xml                  \"access plus 1 hour\"\n    ExpiresByType application/rss+xml                   \"access plus 1 hour\"\n\n  # Web fonts\n    ExpiresByType application/font-woff                 \"access plus 1 month\"\n    ExpiresByType application/vnd.ms-fontobject         \"access plus 1 month\"\n    ExpiresByType application/x-font-ttf                \"access plus 1 month\"\n    ExpiresByType font/opentype                         \"access plus 1 month\"\n    ExpiresByType image/svg+xml                         \"access plus 1 month\"\n\n</IfModule>\n\n# ------------------------------------------------------------------------------\n# | Filename-based cache busting                                               |\n# ------------------------------------------------------------------------------\n\n# If you're not using a build process to manage your filename version revving,\n# you might want to consider enabling the following directives to route all\n# requests such as `/css/style.12345.css` to `/css/style.css`.\n\n# To understand why this is important and a better idea than `*.css?v231`, read:\n# http://stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring\n\n# <IfModule mod_rewrite.c>\n#    RewriteCond %{REQUEST_FILENAME} !-f\n#    RewriteRule ^(.+)\\.(\\d+)\\.(js|css|png|jpe?g|gif)$ $1.$3 [L]\n# </IfModule>\n\n# ------------------------------------------------------------------------------\n# | File concatenation                                                         |\n# ------------------------------------------------------------------------------\n\n# Allow concatenation from within specific style sheets and JavaScript files.\n\n# e.g.:\n#\n#   If you have the following content in a file\n#\n#       <!--#include file=\"libs/jquery.js\" -->\n#       <!--#include file=\"plugins/jquery.timer.js\" -->\n#\n#   Apache will replace it with the content from the specified files.\n\n# <IfModule mod_include.c>\n#    <FilesMatch \"\\.combined\\.js$\">\n#        Options +Includes\n#        AddOutputFilterByType INCLUDES application/javascript application/json\n#        SetOutputFilter INCLUDES\n#    </FilesMatch>\n#    <FilesMatch \"\\.combined\\.css$\">\n#        Options +Includes\n#        AddOutputFilterByType INCLUDES text/css\n#        SetOutputFilter INCLUDES\n#    </FilesMatch>\n# </IfModule>\n"
  },
  {
    "path": "app/404.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"utf-8\">\n        <title>Page Not Found :(</title>\n        <style>\n            ::-moz-selection {\n                background: #b3d4fc;\n                text-shadow: none;\n            }\n\n            ::selection {\n                background: #b3d4fc;\n                text-shadow: none;\n            }\n\n            html {\n                padding: 30px 10px;\n                font-size: 20px;\n                line-height: 1.4;\n                color: #737373;\n                background: #f0f0f0;\n                -webkit-text-size-adjust: 100%;\n                -ms-text-size-adjust: 100%;\n            }\n\n            html,\n            input {\n                font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n            }\n\n            body {\n                max-width: 500px;\n                _width: 500px;\n                padding: 30px 20px 50px;\n                border: 1px solid #b3b3b3;\n                border-radius: 4px;\n                margin: 0 auto;\n                box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;\n                background: #fcfcfc;\n            }\n\n            h1 {\n                margin: 0 10px;\n                font-size: 50px;\n                text-align: center;\n            }\n\n            h1 span {\n                color: #bbb;\n            }\n\n            h3 {\n                margin: 1.5em 0 0.5em;\n            }\n\n            p {\n                margin: 1em 0;\n            }\n\n            ul {\n                padding: 0 0 0 40px;\n                margin: 1em 0;\n            }\n\n            .container {\n                max-width: 380px;\n                _width: 380px;\n                margin: 0 auto;\n            }\n\n            /* google search */\n\n            #goog-fixurl ul {\n                list-style: none;\n                padding: 0;\n                margin: 0;\n            }\n\n            #goog-fixurl form {\n                margin: 0;\n            }\n\n            #goog-wm-qt,\n            #goog-wm-sb {\n                border: 1px solid #bbb;\n                font-size: 16px;\n                line-height: normal;\n                vertical-align: top;\n                color: #444;\n                border-radius: 2px;\n            }\n\n            #goog-wm-qt {\n                width: 220px;\n                height: 20px;\n                padding: 5px;\n                margin: 5px 10px 0 0;\n                box-shadow: inset 0 1px 1px #ccc;\n            }\n\n            #goog-wm-sb {\n                display: inline-block;\n                height: 32px;\n                padding: 0 10px;\n                margin: 5px 0 0;\n                white-space: nowrap;\n                cursor: pointer;\n                background-color: #f5f5f5;\n                background-image: -webkit-linear-gradient(rgba(255,255,255,0), #f1f1f1);\n                background-image: -moz-linear-gradient(rgba(255,255,255,0), #f1f1f1);\n                background-image: -ms-linear-gradient(rgba(255,255,255,0), #f1f1f1);\n                background-image: -o-linear-gradient(rgba(255,255,255,0), #f1f1f1);\n                -webkit-appearance: none;\n                -moz-appearance: none;\n                appearance: none;\n                *overflow: visible;\n                *display: inline;\n                *zoom: 1;\n            }\n\n            #goog-wm-sb:hover,\n            #goog-wm-sb:focus {\n                border-color: #aaa;\n                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n                background-color: #f8f8f8;\n            }\n\n            #goog-wm-qt:hover,\n            #goog-wm-qt:focus {\n                border-color: #105cb6;\n                outline: 0;\n                color: #222;\n            }\n\n            input::-moz-focus-inner {\n                padding: 0;\n                border: 0;\n            }\n        </style>\n    </head>\n    <body>\n        <div class=\"container\">\n            <h1>Not found <span>:(</span></h1>\n            <p>Sorry, but the page you were trying to view does not exist.</p>\n            <p>It looks like this was the result of either:</p>\n            <ul>\n                <li>a mistyped address</li>\n                <li>an out-of-date link</li>\n            </ul>\n            <script>\n                var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),GOOG_FIXURL_SITE = location.host;\n            </script>\n            <script src=\"//linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js\"></script>\n        </div>\n    </body>\n</html>\n"
  },
  {
    "path": "app/gl-html/gl00.html",
    "content": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n    <meta charset=\"UTF-8\">\n    <link rel=\"stylesheet\" href=\"../styles/main.css\">\n    <title></title>\n    <script id=\"shader-fs\" type=\"x-shader/x-fragment\">\n\t\t\t\t#ifdef GL_ES\n\t\t\t\t  precision highp float;\n\t\t\t\t  #endif\n    \t\tvoid main(void) {\n    \t\t gl_FragColor = vec4(0.4, 0.6, 0.75, 1.0);\n    \t\t}\n\t\t</script>\n\n    <script id=\"shader-vs\" type=\"x-shader/x-vertex\">\n    \tattribute vec3 vertexPosition;\n\n  \tuniform mat4 modelViewMatrix;\n  \tuniform mat4 perspectiveMatrix;\n\n   \tvoid main(void) {\n  \t\tgl_Position = perspectiveMatrix * modelViewMatrix * vec4(  vertexPosition, 1.0);\n  \t}\n  </script>\n\n</head>\n<canvas id=\"c\"></canvas>\n<body>\n<script src=\"../scripts/4-webgl/55-gl.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "app/gl-html/gl01.html",
    "content": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n    <meta charset=\"UTF-8\">\n    <link rel=\"stylesheet\" href=\"../styles/main.css\">\n    <title></title>\n    <script src=\"../bower_components/dat-gui/build/dat.gui.js\"></script>\n    <script id=\"shader-fs\" type=\"x-shader/x-fragment\">\n\t\t\t\t#ifdef GL_ES\n\t\t\t\t  precision highp float;\n\t\t\t\t  #endif\n\n\n    \t\tvoid main(void) {\n    \t\t gl_FragColor = vec4(0.4, 0.6, 0.75, 1.0);\n    \t\t}\n\t\t</script>\n\n    <script id=\"shader-vs\" type=\"x-shader/x-vertex\">\n    \tattribute vec3 vertexPosition;\n\n  \tuniform mat4 modelViewMatrix;\n  \tuniform mat4 perspectiveMatrix;\n\n   \tvoid main(void) {\n  \t\tgl_Position = perspectiveMatrix * modelViewMatrix * vec4(  vertexPosition, 1.0);\n  \t}\n  </script>\n\n</head>\n<canvas id=\"c\"></canvas>\n<body>\n\n<script src=\"../scripts/4-webgl/56-gl.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "app/gl-html/gl57.html",
    "content": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n    <meta charset=\"UTF-8\">\n    <title></title>\n\n\n    <script id=\"shader-fs\" type=\"x-shader/x-fragment\">\n\t\t\t\t#ifdef GL_ES\n\t\t\t\t  precision highp float;\n\t\t\t\t  #endif\n\n            //attribute vec2 a_position;\n            varying   vec4 vColor;\n\n    \t\tvoid main(void) {\n    \t\t gl_FragColor = vec4(vColor);\n    \t\t}\n\n    </script>\n\n    <script id=\"shader-vs\" type=\"x-shader/x-vertex\">\n    //attribute vec3 vertexPosition;\n    attribute vec2 a_position;\n    attribute vec4 a_color;\n\n    varying   vec4 vColor;\n\n    uniform vec2 u_resolution;\n\n   \tvoid main(void) {\n   \t    vColor = a_color;\n   \t    vec2 curPosition = a_position + u_resolution/2.0;\n\n  \t\tvec2 zeroToOne = curPosition / u_resolution;\n  \t\tvec2 zeroToTwo = zeroToOne * 2.0;\n  \t\tvec2 clipSpace = zeroToTwo - 1.0;\n  \t\tgl_Position = vec4(clipSpace, 0, 1);\n  \t}\n\n    </script>\n</head>\n<body>\n<canvas id=\"c\"></canvas>\n<script src=\"../scripts/4-webgl/57-gl.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "app/gl-html/three58.html",
    "content": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n    <meta charset=\"UTF-8\">\n    <title>== three58 ==</title>\n    <link rel=\"stylesheet\" href=\"../styles/main.css\">\n    <script src=\"../bower_components/underscore/underscore.js\"></script>\n    <script src=\"../bower_components/backbone/backbone.js\"></script>\n</head>\n<body>\n<canvas id=\"c\"></canvas>\n<script src=\"../scripts/helpers/keyEvents.js\"></script>\n<script src=\"../bower_components/threejs/build/three.min.js\"></script>\n<script src=\"../scripts/4-webgl/58-three-js.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "app/gl-html/three64.html",
    "content": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n    <meta charset=\"UTF-8\">\n    <title>Three.js</title>\n    <style>\n        /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */\n        html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}\n    </style>\n</head>\n<body>\n\n<script src=\"../bower_components/threejs/build/three.min.js\"></script>\n<script src=\"../scripts/4-webgl/64-three-js.js\"></script>\n\n</body>\n</html>\n"
  },
  {
    "path": "app/gl-index.html",
    "content": "<html>\n<head>\n    <title>WebGL TEST</title>\n\n    <script src=\"scripts/7-gl/vendors/minMatrix.js\" type=\"text/javascript\"></script>\n\n    <script id=\"vs\" type=\"x-shader/x-vertex\">\nattribute vec3 position;\nuniform   mat4 mvpMatrix;\n\nvoid main(void){\n    gl_Position = mvpMatrix * vec4(position, 1.0);\n}\n        </script>\n\n    <script id=\"fs\" type=\"x-shader/x-fragment\">\nvoid main(void){\n    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n}\n        </script>\n</head>\n\n<body>\n<canvas id=\"canvas\"></canvas>\n</body>\n\n<script src=\"scripts/7-gl/99-00-gl-learning.js\" type=\"text/javascript\"></script>\n\n</html>\n"
  },
  {
    "path": "app/index.html",
    "content": "<!doctype html>\n<!--[if lt IE 7]>\n<html class=\"no-js lt-ie9 lt-ie8 lt-ie7\"> <![endif]-->\n<!--[if IE 7]>\n<html class=\"no-js lt-ie9 lt-ie8\"> <![endif]-->\n<!--[if IE 8]>\n<html class=\"no-js lt-ie9\"> <![endif]-->\n<!--[if gt IE 8]><!-->\n<html class=\"no-js\"> <!--<![endif]-->\n<head>\n    <meta charset=\"utf-8\">\n    <title>201405</title>\n    <meta name=\"description\" content=\"\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <link rel=\"shortcut icon\" href=\"/favicon.ico\">\n    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->\n    <!-- build:css styles/vendor.css -->\n    <!-- bower:css -->\n    <!-- endbower -->\n    <!-- endbuild -->\n    <!-- build:css(.tmp) styles/main.css -->\n    <link rel=\"stylesheet\" href=\"styles/main.css\">\n    <link rel=\"stylesheet\" href=\"//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css\"/>\n    <!-- endbuild -->\n    <!-- build:js scripts/vendor/modernizr.js -->\n    <script src=\"bower_components/modernizr/modernizr.js\"></script>\n    <!-- endbuild -->\n\n</head>\n\n    <body>\n    <!--\n        <div id=\"container\">\n            <input id=\"button\" type=\"checkbox\">\n            <label id=\"play\" for=\"button\" class=\"glyphicon glyphicon-volume-up\"></label>\n            <label id=\"stop\" for=\"button\" class=\"glyphicon glyphicon-volume-off\"></label>\n        </div>\n    -->\n\n        <canvas id=\"c\"></canvas>\n\n\n    <!-- build:js scripts/vendor.js -->\n    <!-- bower:js -->\n    <script src=\"bower_components/jquery/dist/jquery.js\"></script>\n    <script src=\"bower_components/TweenJS/lib/tweenjs-0.5.1.combined.js\"></script>\n    <script src=\"bower_components/greensock/src/uncompressed/TweenMax.js\"></script>\n    <script src=\"bower_components/underscore/underscore.js\"></script>\n    <script src=\"bower_components/howler.js/howler.js\"></script>\n    <script src=\"bower_components/threejs/build/three.min.js\"></script>\n    <script src=\"bower_components/angular/angular.js\"></script>\n    <script src=\"bower_components/dat-gui/build/dat.gui.js\"></script>\n    <script src=\"bower_components/backbone/backbone.js\"></script>\n    <!-- endbower -->\n    <!-- endbuild -->\n\n    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->\n    <!--<script>-->\n    <!--(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=-->\n    <!--function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;-->\n    <!--e=o.createElement(i);r=o.getElementsByTagName(i)[0];-->\n    <!--e.src='//www.google-analytics.com/analytics.js';-->\n    <!--r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));-->\n    <!--ga('create','UA-XXXXX-X');ga('send','pageview');-->\n    <!--</script>-->\n\n    <!-- build:js({app,.tmp}) scripts/main.js -->\n    <!--<script src=\"scripts/4-webgl/43-three-js-example.js\"></script>-->\n    <!--<script src=\"scripts/4-webgl/2-test-three-js-example.js\"></script>-->\n    <!--<script src=\"scripts/6-letters/53-letters.js\"></script>-->\n    <!--<script src=\"scripts/helpers/svg-parse.js\"></script>-->\n    <!--<script src=\"scripts/6-letters/54-letter.js\"></script>-->\n    <!--<script src=\"scripts/99-hobby/99-03-circle-drawing.js\"></script>-->\n    <script src=\"scripts/helpers/colorConverter.js\"></script>\n    <script src=\"scripts/99-hobby/99-05-color-draw.js\"></script>\n    <!-- endbuild -->\n    </body>\n</html>\n"
  },
  {
    "path": "app/json/awwwrd.js",
    "content": "var l1Pt0 = [ [0.6905, 0.534], [0.648, 0.534], [0.638, 0.565], [0.6154999999999999, 0.565], [0.6579999999999999, 0.4445], [0.6809999999999999, 0.4445], [0.7234999999999999, 0.565], [0.701, 0.565], [0.6905, 0.534] ] ;\nvar l1Pt1 = [ [0.6695, 0.46549999999999997], [0.6695, 0.46549999999999997, 0.667, 0.4775,0.6645, 0.484], [0.654, 0.5165], [0.6855000000000001, 0.5165], [0.6750000000000002, 0.484], [0.6725, 0.4775, 0.6695, 0.46549999999999997,0.6695, 0.46549999999999997], [0.6695, 0.46549999999999997] ];\nvar l2Pt0 = [ [0.7559999999999999, 0.4445], [0.795, 0.4445], [0.8079999999999999, 0.4445, 0.8140000000000001, 0.44550000000000006,0.8195, 0.44800000000000006], [0.8315, 0.4535, 0.8390000000000001, 0.4650000000000001,0.8390000000000001, 0.48100000000000004], [0.8390000000000001, 0.49550000000000005, 0.8315, 0.509,0.8185000000000001, 0.514], [0.8185000000000001, 0.5145], [0.8185000000000001, 0.5145, 0.8200000000000002, 0.5159999999999999,0.8225000000000001, 0.5205], [0.8475000000000001, 0.5655], [0.8230000000000001, 0.5655], [0.799, 0.5205], [0.7780000000000001, 0.5205], [0.7780000000000001, 0.5655], [0.7560000000000001, 0.5655], [0.7559999999999999, 0.4445], [0.7559999999999999, 0.4445] ];\nvar l2Pt1 = [ [0.7975, 0.501], [0.809, 0.501, 0.8165, 0.494,0.8165, 0.48200000000000004], [0.8165, 0.47050000000000003, 0.8115000000000001, 0.4635,0.7945, 0.4635], [0.778, 0.4635], [0.778, 0.501], [0.7975, 0.501], [0.7975, 0.501] ] ;\nvar l3Pt0 = [ [0.885, 0.4445], [0.9259999999999999, 0.4445], [0.963, 0.4445, 0.9875, 0.4665000000000001,0.9875, 0.5045000000000001], [0.9875, 0.5425, 0.963, 0.565,0.9259999999999999, 0.565], [0.885, 0.565], [0.885, 0.4445] ] ;\nvar l3Pt1 = [ [0.9245, 0.5465], [0.9490000000000001, 0.5465, 0.9645, 0.5319999999999999,0.9645, 0.505], [0.9645, 0.478, 0.9485000000000001, 0.4635,0.9245, 0.4635], [0.9065000000000001, 0.4635], [0.9065000000000001, 0.5465000000000001], [0.9245, 0.5465000000000001] ];\nvar l4    = [ [1.0265, 0.534], [1.0265, 0.534, 1.0395, 0.5469999999999999,1.0565, 0.5469999999999999], [1.0655000000000001, 0.5469999999999999, 1.074, 0.5425,1.074, 0.5325], [1.074, 0.5109999999999999, 1.0170000000000001, 0.5145,1.0170000000000001, 0.4774999999999999], [1.0170000000000001, 0.4574999999999999, 1.0345, 0.44249999999999995,1.0575, 0.44249999999999995], [1.0815000000000001, 0.44249999999999995, 1.0935, 0.4554999999999999,1.0935, 0.4554999999999999], [1.0839999999999999, 0.47349999999999987], [1.0839999999999999, 0.47349999999999987, 1.0724999999999998, 0.4629999999999999,1.0574999999999999, 0.4629999999999999], [1.0474999999999999, 0.4629999999999999, 1.0394999999999999, 0.4689999999999999,1.0394999999999999, 0.4774999999999999], [1.0394999999999999, 0.4989999999999999, 1.0964999999999998, 0.49349999999999994,1.0964999999999998, 0.5325], [1.0964999999999998, 0.5514999999999999, 1.0819999999999999, 0.568,1.0565, 0.568], [1.0294999999999999, 0.568, 1.015, 0.5514999999999999,1.015, 0.5514999999999999], [1.0265, 0.534] ];\nvar l5    = [ [0.4435, 0.4445], [0.4235, 0.528], [0.42200000000000004, 0.535, 0.4215, 0.5405000000000001,0.4215, 0.5405000000000001], [0.42100000000000004, 0.5405000000000001], [0.42100000000000004, 0.5405000000000001, 0.42050000000000004, 0.5345,0.419, 0.528], [0.3975, 0.4445], [0.3785, 0.4445], [0.3565, 0.528], [0.3545, 0.535, 0.3545, 0.5405000000000001,0.3545, 0.5405000000000001], [0.354, 0.5405000000000001], [0.354, 0.5405000000000001, 0.35350000000000004, 0.5345,0.352, 0.528], [0.33799999999999997, 0.4655], [0.3275, 0.511], [0.341, 0.565], [0.3665, 0.565], [0.385, 0.4935], [0.387, 0.48550000000000004, 0.38799999999999996, 0.4775,0.38799999999999996, 0.4775], [0.38849999999999996, 0.4775], [0.38849999999999996, 0.4775, 0.38949999999999996, 0.4855,0.3914999999999999, 0.4935], [0.4099999999999999, 0.565], [0.435, 0.565], [0.466, 0.4445], [0.4435, 0.4445], [0.4435, 0.4445] ];\nvar l6    = [ [0.5795, 0.4445], [0.5595, 0.528], [0.558, 0.535, 0.5575, 0.5405000000000001,0.5575, 0.5405000000000001], [0.557, 0.5405000000000001], [0.557, 0.5405000000000001, 0.5565000000000001, 0.5345,0.555, 0.528], [0.5335, 0.4445], [0.5145000000000001, 0.4445], [0.4925, 0.528], [0.4905, 0.535, 0.4905, 0.5405000000000001,0.4905, 0.5405000000000001], [0.49, 0.5405000000000001], [0.49, 0.5405000000000001, 0.48950000000000005, 0.5345,0.488, 0.528], [0.474, 0.465], [0.4635, 0.5105], [0.47700000000000004, 0.565], [0.5025, 0.565], [0.521, 0.4935], [0.523, 0.48550000000000004, 0.524, 0.4775,0.524, 0.4775], [0.5245, 0.4775], [0.5245, 0.4775, 0.5255, 0.4855,0.5275, 0.4935], [0.5459999999999999, 0.565], [0.5714999999999999, 0.565], [0.6024999999999999, 0.4445], [0.5795, 0.4445], [0.5795, 0.4445] ];\nvar l7    = [ [0.13, 0.534], [0.0875, 0.534], [0.0775, 0.565], [0.055, 0.565], [0.0975, 0.4445], [0.12050000000000001, 0.4445], [0.163, 0.565], [0.1405, 0.565], [0.13, 0.534], [0.109, 0.46549999999999997], [0.109, 0.46549999999999997, 0.1065, 0.4775,0.10400000000000001, 0.484], [0.0935, 0.5165], [0.125, 0.5165], [0.11449999999999999, 0.484], [0.11199999999999999, 0.4775, 0.109, 0.46549999999999997,0.109, 0.46549999999999997], [0.109, 0.46549999999999997] ];\nvar l8    = [ [0.2825, 0.528], [0.2845, 0.535, 0.2845, 0.5405,0.2845, 0.5405], [0.285, 0.5405], [0.285, 0.5405, 0.28550000000000003, 0.5345,0.287, 0.528], [0.307, 0.44449999999999995], [0.3295, 0.44449999999999995], [0.2985, 0.565], [0.273, 0.565], [0.2545, 0.4935], [0.2525, 0.48550000000000004, 0.2515, 0.4775,0.2515, 0.4775], [0.251, 0.4775], [0.251, 0.4775, 0.24999999999999997, 0.4855,0.24799999999999997, 0.4935], [0.22949999999999998, 0.565], [0.204, 0.565], [0.174, 0.4445], [0.19649999999999998, 0.4445], [0.21549999999999997, 0.528], [0.21699999999999997, 0.535, 0.21749999999999997, 0.5405000000000001,0.21749999999999997, 0.5405000000000001], [0.21799999999999997, 0.5405000000000001], [0.21799999999999997, 0.5405000000000001, 0.21849999999999997, 0.5345,0.21999999999999997, 0.528], [0.24199999999999997, 0.4445], [0.26099999999999995, 0.4445], [0.2825, 0.528] ];\n"
  },
  {
    "path": "app/robots.txt",
    "content": "# robotstxt.org/\n\nUser-agent: *\n"
  },
  {
    "path": "app/scripts/0-components/boilerplate.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\n\n// ================\n\ninit();\nloop();\n\nfunction init(){\n\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/0-components/output.js",
    "content": ""
  },
  {
    "path": "app/scripts/0-components/path.js",
    "content": "// =============\n\n\nfunction forEach(array, fn){\n    for(var i = 0; i< array.length; i++){\n        fn(array[i]);\n    }\n}\n\n// =============\n\nvar fs = require('fs');\nvar thClonedArr = [];\n\nvar th = \"M100,75.603c0,50.12-18.593,77.779-51.246,77.779c-28.794,0-48.302-26.985-48.754-75.739C0,28.216,21.316,1,51.246,1C82.312,1,100,28.668,100,75.603z M19.959,77.874c0,38.322,11.789,60.09,29.93,60.09c20.412,0,30.161-23.809,30.161-61.447c0-36.281-9.296-60.1-29.93-60.1C32.653,16.417,19.959,37.734,19.959,77.874z\";\n\nvar thArr = th.split(/[A-Z]/);\n\nforEach(thArr, function(val){\n    thClonedArr.push(val);\n});\n\n// console.log(thClonedArr);\n//\n\nvar outputArr = [];\n\noutputArr.push([]);\n\nforEach(thClonedArr, function(val){\n    if(val.search(/[a-y]/) > 0){\n        var count = 0;\n\n        var textArr = val.split(/[a-y]/);\n        var firstVal;\n\n        forEach(textArr, function(val){\n            val = val.replace(/-/g, ',-');\n\n            if(count === 0){\n                outputArr[outputArr.length - 1].push(val);\n                var ptArr = val.split(/,/);\n                firstArr = ptArr;\n            }else{\n                var ptArr = val.split(/,/);\n                var hosei = ptArr.length % 2;\n                var ptTemArr = [];\n\n                for(var ii = hosei; ii < ptArr.length; ii+= 2){\n                    var ptX = parseFloat(ptArr[ii + 0]) + parseFloat(firstArr[0]);\n                    var ptY = parseFloat(ptArr[ii + 1]) + parseFloat(firstArr[1]);\n\n                    ptTemArr.push(ptX);\n                    ptTemArr.push(ptY);\n                }\n\n                firstArr = [ptArr[ptArr.length - 2], ptArr[ptArr.length - 1]];\n\n                var pointText = \"\";\n                var pointCnt = 0;\n\n                forEach( ptTemArr, function(val){\n\n                    if(pointCnt == 0){\n                        pointText += String(val); \n                    }else{\n                        pointText += ','  + String(val);\n                    }\n                    \n                    pointCnt++;\n                });\n\n                outputArr[outputArr.length - 1].push(pointText);\n            }\n\n            \n            count++; \n            \n        });\n    }else{\n        if(val.search(/z/) > 0){\n            var text = val.split(/z/);\n\n            outputArr[outputArr.length - 1].push(text[0]);\n            outputArr.push([]);\n        }else{\n            //console.log(val);\n            if(val.length > 0){\n                outputArr[outputArr.length - 1].push(val);\n            }\n        }\n    }\n});\n\nconsole.log(outputArr);\n\nvar '[['\nfor(var ii = 0; ii < outputArr.length; ii++){\n    var pathArr = outputArr[ii];\n    if(pathArr.length > 0){\n        for(var j = 0; j  \n    }\n}\n\n\nfs.open('./data.js', 'w', function(err, fd) {\n      if(err) throw err;\n      var buf = new Buffer(thArr);\n      fs.write(fd, buf, 0, buf.length, null, function(err, written, buffer) {\n          if(err) throw err;\n          console.log(err, written, buffer);\n          fs.close(fd, function() {\n              console.log('Done');\n          });\n      });\n});\n\n\n"
  },
  {
    "path": "app/scripts/1-illusion-of-life/1-squash.js",
    "content": "function backingScale(context) {\n    if ('devicePixelRatio' in window) {\n        if (window.devicePixelRatio > 1) {\n            return window.devicePixelRatio;\n        }\n    }\n    return 1;\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\nvar Rect = function( ctx, x, y, wid, hig ){\n    this.ctx = ctx;\n    this.x = x - wid/2;\n    this.y = y;\n    this.wid = wid;\n    this.hig = hig;\n\n    this.vel = 100;\n};\n\nRect.prototype = {\n    update : function(dt){\n        this.y += this.vel * dt;\n    },\n\n    draw : function(){\n        this.ctx.beginPath();\n        this.ctx.fillStyle = '#fff';\n        this.ctx.fillRect(this.x, this.y, this.wid, this.hig);\n        this.ctx.closePath();\n    }\n};\n\n// ---------------\n\nvar Rect1 = function(ctx, x, y, wid, hig){\n    Rect.call(this, ctx, x, y, wid, hig);\n\n    this.vel = 20;\n    this.acl = 100;\n};\n\nRect1.prototype = Object.create(Rect.prototype);\n\nRect1.prototype = {\n    update : function(dt){\n        this.vel += this.acl * dt;\n\n        Rect.prototype.update.call(this, dt);\n    },\n\n    draw : function(){\n        Rect.prototype.draw.call(this);\n    }\n};\n\n// ---------------\n\nvar Rect2 = function(ctx, x, y, wid, hig){\n    Rect.call(this, ctx, x, y, wid, hig);\n};\n\nRect2.prototype = Object.create(Rect.prototype);\n\n\n\n\nvar width, height, previousTime;\nvar rect, rect1;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar scaleFactor = backingScale(ctx);\n\nwidth  = window.innerWidth * scaleFactor;\nheight = window.innerHeight * scaleFactor;\n\ncanvas.width  = width;\ncanvas.height = height;\n\ninit();\n\nloop();\n\nfunction init(){\n    previousTime = +new Date;\n\n    rect = new Rect( ctx, width/2 - 200, 0, 100, 100);\n    rect1 = new Rect1( ctx, width/2 - 50, 0, 100, 100);\n}\n\n\nfunction loop(){\n    var curTime = +new Date;\n    var dt = (curTime - previousTime) / 1000;\n\n    this.ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    rect.update(dt);\n    rect.draw();\n\n    rect1.update(dt);\n    rect1.draw();\n\n    previousTime = curTime;\n    requestAnimationFrame(loop);\n}\n\n\n"
  },
  {
    "path": "app/scripts/1-illusion-of-life/10-animation.js",
    "content": "function backingScale(context) {\n    if ('devicePixelRatio' in window) {\n        if (window.devicePixelRatio > 1) {\n            return window.devicePixelRatio;\n        }\n    }\n    return 1;\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\n\nvar width, height, previousTime;\nvar side1, side2;\nvar side1Wid, side1Hig;\nvar rect;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar scaleFactor = backingScale(ctx);\n\nwidth  = window.innerWidth * scaleFactor;\nheight = window.innerHeight * scaleFactor;\n\nside1 = 100;\nside2 = 180;\n\nvar sideHig = 10 * scaleFactor;\n\nvar duration1 = .8;\nvar duration2 = .6;\n\ncanvas.width  = width;\ncanvas.height = height;\n\nvar Rect = function(ctx){\n    this.ctx = ctx;\n    this.col = '#fff';\n\n    this.width = this.baseWidth = 15 * scaleFactor;\n    this.penWidth = 14.5 * scaleFactor;\n    this.height = 100 * scaleFactor;\n\n    this.pt1 = {x : width / 2, y: height};\n    this.pt2 = {x : width / 2, y: height - this.height};\n\n    this.anchorPt = {x : width /2, y: (this.pt1.y + this.pt2.y) / 2};\n\n    this.anchorTheta1 = 0;\n    this.anchorTheta2 = 0;\n};\n\nRect.prototype = {\n    div : -2,\n    val : 0,\n\n    update : function(){\n        this.anchorTheta1 += 0.1;\n        if(this.pt2.y <= 0){ this.div = 2;\n        }\n        if(this.pt2.y >= height - 100*scaleFactor){ this.div = -2;\n        }\n\n        this.pt2.y += this.div;\n        this.width = this.baseWidth + this.penWidth * Math.sin(this.anchorTheta1);\n        this.val -= this.div / 2;\n\n        this.pt2.x      = width / 2 - 30 * scaleFactor * Math.cos(this.anchorTheta1);\n        this.anchorPt.x = width / 2 + (50 + this.val) * scaleFactor * Math.cos(this.anchorTheta1);\n        this.anchorPt.y = (this.pt1.y + this.pt2.y) / 2;\n    },\n\n    draw : function(){\n        this.ctx.fillStyle = this.col;\n        this.ctx.beginPath();\n        this.ctx.moveTo(this.pt1.x - this.width / 2, this.pt1.y);\n        this.ctx.quadraticCurveTo(this.anchorPt.x - this.width / 2, this.anchorPt.y, this.pt2.x - this.width / 2, this.pt2.y);\n        this.ctx.lineTo(this.pt2.x + this.width / 2, this.pt2.y);\n        this.ctx.quadraticCurveTo(this.anchorPt.x + this.width / 2, this.anchorPt.y, this.pt1.x + this.width / 2, this.pt1.y);\n        this.ctx.fill();\n        this.ctx.closePath();\n\n    },\n\n    debugDraw : function(){\n        this.ctx.strokeStyle = this.col;\n\n        this.ctx.beginPath();\n        this.ctx.moveTo(this.pt1.x, this.pt1.y);\n        this.ctx.quadraticCurveTo(this.anchorPt.x, this.anchorPt.y, this.pt2.x, this.pt2.y);\n        this.ctx.stroke();\n        this.ctx.closePath();\n    }\n};\n\nvar rect;\n\ninit();\nloop();\n\nfunction init(){\n    rect = new Rect(ctx);\n}\n\nfunction loop(){\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    rect.update();\n    rect.draw();\n\n    requestAnimationFrame(loop);\n}"
  },
  {
    "path": "app/scripts/1-illusion-of-life/11-animation-2.js",
    "content": "function backingScale(context) {\n    if ('devicePixelRatio' in window) {\n        if (window.devicePixelRatio > 1) {\n            return window.devicePixelRatio;\n        }\n    }\n    return 1;\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\n// --------------------------\n\nvar Rect = function(ctx, x, y, i){\n\n    this.color = '#fff';\n    this.ctx = ctx;\n\n    this.side = 200;\n\n    this.x   = this.originX = x - this.side/2;\n    this.y   = this.originY = y - this.side/2;\n    if(i % 2 == 0) this.rad = 170;\n    else           this.rad = 90;\n\n\n};\n\nRect.prototype = {\n    sec : 0,\n    rad : 100 + 200 * Math.random(),\n\n    update : function(){\n        this.sec += .1;\n        this.x = this.originX + this.rad * Math.cos(this.sec);\n        if(this.x > width) this.x = -this.side;\n\n        this.ctx.strokeStyle = this.color;\n        this.ctx.strokeRect(this.x, this.y, this.side, this.side);\n    }\n};\n\nvar Point = function(x1, y1, x2, y2){\n    this.status = 'triangle';\n\n    this.point = {\n        'circle'   : {x : x1, y: y1},\n        'triangle' : {x : x2, y: y2}\n    };\n};\n\nPoint.prototype = {\n    get : function(){\n        return this.point[this.status]\n    }\n};\n\nvar Shape = function(ctx, x, y, rad){\n    this.ctx = ctx;\n\n    this.x = x;\n    this.y = y;\n    this.rad = rad;\n\n    this.pointArr = [];\n\n    this.num = 120;\n    var triangle = this.num / 3;\n    var circlePtArr = [\n            {x : this.rad * Math.cos(0), y: this.rad * Math.sin(0) },\n            {x : this.rad * Math.cos(2/3*Math.PI), y: this.rad * Math.sin(2/3*Math.PI) },\n            {x : this.rad * Math.cos(4/3*Math.PI), y: this.rad * Math.sin(4/3*Math.PI) }\n    ];\n\n    for(var i = 0; i < this.num; i++){\n        // circle\n        var ptX = this.rad * Math.cos(i / this.num * Math.PI * 2);\n        var ptY = this.rad * Math.sin(i / this.num * Math.PI * 2);\n\n        // triangle\n        var triangleNum1 = parseInt(i / triangle);\n        var triangleNum2 = (triangleNum1 + 1) % 3;\n        var circleI = i % triangle;\n\n        var ptTriX = circlePtArr[triangleNum1].x * (1 - circleI / triangle) + circlePtArr[triangleNum2].x * (0 + circleI / triangle);\n        var ptTriY = circlePtArr[triangleNum1].y * (1 - circleI / triangle) + circlePtArr[triangleNum2].y * (0 + circleI / triangle);\n\n\n        var pt  = new Point(ptX, ptY, ptTriX, ptTriY);\n        this.pointArr[i] = pt;\n    }\n\n};\n\nShape.prototype = {\n    vel:8,\n\n    update : function(rectArr){\n        this.x += this.vel;\n        if(this.x > width + 100) this.x = - 100;\n\n        // update\n        // this.x - this.rad -- this.x + this.rad\n        for(var i = 0; i < this.num; i++){\n            this.pointArr[i].status = 'circle';\n        }\n\n\n        for(var j = 0; j < rectArr.length; j++){\n            var rect = rectArr[j];\n\n            for(var i = 0; i < this.num; i++){\n                var ptX = this.pointArr[i]['point']['circle'].x + this.x;\n                if(ptX > (rect.x) && ptX < (rect.x + rect.side) )                   this.pointArr[i].status = 'triangle';\n                //else                                                                this.pointArr[i].status = 'circle';\n            }\n        }\n\n\n\n        // draw\n        this.ctx.save();\n\n        this.ctx.beginPath();\n        this.ctx.translate(this.x, this.y);\n\n        this.ctx.moveTo(this.pointArr[0].get().x, this.pointArr[0].get().y);\n\n        for(var i = 1; i < this.num; i++){\n            this.ctx.lineTo(this.pointArr[i].get().x, this.pointArr[i].get().y);\n        }\n\n        this.ctx.lineTo(this.pointArr[0].get().x, this.pointArr[0].get().y);\n\n        this.ctx.fillStyle = '#fff';\n        this.ctx.stroke();\n\n        this.ctx.closePath();\n\n        this.ctx.restore();\n\n    }\n};\n\n\n\n// --------------------------\n\n\nvar width, height, previousTime;\nvar side1, side2;\nvar side1Wid, side1Hig;\nvar rect, rectArr = [];\nvar shape, shapeArr = [];\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar scaleFactor = backingScale(ctx);\n\nwidth  = window.innerWidth;\nheight = window.innerHeight;\n\nside1 = 100;\nside2 = 180;\n\nvar sideHig = 10 * scaleFactor;\n\nvar duration1 = .8;\nvar duration2 = .6;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n\ninit();\nloop();\n\nfunction init(){\n\n\n    for(var i = 0; i < 3; i++){\n        rect = new Rect(ctx, width/2 + 300 * i - 300, height/2, i);\n        rectArr.push(rect);\n    }\n\n    for(var i = 0;i < 8; i++){\n        shape = new Shape(ctx, width/2, height/2, 8 + 12 * i);\n        shapeArr.push(shape);\n    }\n\n}\n\nfunction loop(){\n    //ctx.clearRect(0, 0, width, height);\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    for(var i in rectArr){\n        rect = rectArr[i];\n        rect.update();\n    }\n\n    //console.log('shape update');\n    for(var i in shapeArr){\n        shape = shapeArr[i];\n        shape.update(rectArr);\n    }\n\n    //console.log('shape update');\n\n    requestAnimationFrame(loop);\n}"
  },
  {
    "path": "app/scripts/1-illusion-of-life/12-secondary-action.js",
    "content": "\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\n\n\n// --------------------------\nvar Pt = function(theta){\n    this.rad   = side;\n    this.theta = theta;\n};\n\nPt.prototype = {\n    setTheta : function(val){\n        this.futureTheta = val;\n        TweenLite.to(this,.5, { theta : val, ease: Power3.easeInOut});\n    }\n}\n\n\nObject.defineProperty(Pt.prototype, 'theta', {\n    get : function(){\n        return this._theta;\n    },\n\n    set : function(val){\n        this._theta = val;\n        this.x = this.rad * Math.cos(this._theta);\n        this.y = this.rad * Math.sin(this._theta);\n    }\n});\n\n\n\n\nvar Shape = function(ctx, x, y){\n    _.bindAll(this, 'add');\n\n    this.x = x;\n    this.y = y;\n    this.ctx = ctx;\n\n    this.col = '#fff';\n\n    this.triArr = [];\n\n    this.shapeType = {\n        3 : [[0, 1, 2]],\n        4 : [[0, 1, 2], [3, 1, 2]]\n    };\n\n    for(var i = 0; i < this.triNum; i++){\n        var pt = new Pt( i / this.triNum * 2 * Math.PI );\n        this.triArr.push(pt);\n    }\n\n    setInterval(this.add, 600);\n};\n\n\nShape.prototype = {\n    triNum : 2,\n    inc : 1,\n    theta : 0,\n    add : function(){\n        // clone pt\n        if(this.triArr.length > 12) this.inc = -1;\n        if(this.triArr.length < 3)  this.inc = 1;\n\n\n        if(this.inc == 1){\n            var clonedPt = new Pt(this.triArr[this.triArr.length - 1].theta);\n            this.triArr.push(clonedPt);\n\n            for(var i in this.triArr){\n                this.triArr[i].setTheta(2 * Math.PI * i / this.triArr.length);\n            }\n        }else{\n            for(var i in this.triArr){\n                this.triArr[i].setTheta(2 * Math.PI * i / (this.triArr.length -1));\n            }\n            var self = this;\n            setTimeout(function(){\n                self.triArr.shift();\n            }, 400 );\n        }\n\n        var val = this.theta + 1/3 * Math.PI;\n        TweenLite.to(this,.3, { theta : val});\n\n\n    },\n\n    update : function(){\n        this.ctx.save();\n\n        this.ctx.translate(this.x, this.y);\n        this.ctx.rotate(this.theta);\n\n        this.ctx.strokeStyle = this.col;\n\n\n        for(var i in this.triArr){\n            var pt1 = this.triArr[i]\n            for(var j = i; j < this.triArr.length; j++){\n                var pt2 = this.triArr[j];\n\n                this.ctx.beginPath();\n                this.ctx.moveTo(pt1.x, pt1.y);\n                this.ctx.lineTo(pt2.x, pt2.y);\n                this.ctx.stroke();\n                this.ctx.closePath();\n            }\n        }\n\n\n\n\n        this.ctx.restore();\n\n    }\n};\n\n\n// --------------------------\n\n\nvar width, height, previousTime;\nvar side1, side2;\nvar shape;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar side;\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\nside = Math.min(width, height) * .45;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n\ninit();\nloop();\n\nfunction init(){\n    shape = new Shape(ctx, width/2, height/2);\n}\n\nfunction loop(){\n    //ctx.clearRect(0, 0, width, height);\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    shape.update();\n\n    requestAnimationFrame(loop);\n}"
  },
  {
    "path": "app/scripts/1-illusion-of-life/13-secondary-action.js",
    "content": "\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\n\n\n// --------------------------\nvar Pt = function(rad, theta){\n\n    this.rad   = rad;\n    this.theta = theta;\n};\n\nPt.prototype = {\n    setTheta : function(val){\n        this.futureTheta = val;\n        TweenLite.to(this,.5, { theta : val, ease: Elastic.easeInOut});\n    },\n}\n\n\nObject.defineProperty(Pt.prototype, 'theta', {\n    get : function(){\n        return this._theta;\n    },\n\n    set : function(val){\n        this._theta = val;\n        this.x = this.rad * Math.cos(this._theta);\n        this.y = this.rad * Math.sin(this._theta);\n    }\n});\n\n\n\n\nvar Rect = function(ctx, x, y){\n    _.bindAll(this, 'rotationComplete');\n\n    this.x = this.originX = x;\n    this.y = y;\n    //console.log(this.x, this.y);\n    this.transX = 0;\n    this.side = 60;\n    this.halfSide = this.side / 2 * -1;\n    this.ctx = ctx;\n\n    this.col = '#fff';\n\n    this.rotate = 0;\n    this.thetaArr = [0, Math.PI, Math.PI * 5 / 4, Math.PI * 3 / 2];\n    this.ptArr =[\n        new Pt(0, 0),\n        new Pt(this.side, Math.PI),\n        new Pt(this.side * Math.sqrt(2), Math.PI * (5/4)),\n        new Pt(this.side, Math.PI * (3/2)),\n    ];\n\n    this.rotation();\n};\n\nRect.prototype = {\n    rotation : function(){\n        this.rotate =  Math.PI/2;\n        for(var i = 0; i < this.ptArr.length; i++){\n            var pt = this.ptArr[i];\n            var theta = this.thetaArr[i];\n            TweenLite.to(pt, 1, { theta : (theta + this.rotate)});\n        }\n\n        TweenLite.to(this, 1, { x : (this.originX - 60), onComplete : this.rotationComplete});\n    },\n\n    rotationComplete : function(){\n        this.ptArr =[\n            new Pt(0, 0),\n            new Pt(this.side, Math.PI),\n            new Pt(this.side * Math.sqrt(2), Math.PI * (5/4)),\n            new Pt(this.side, Math.PI * (3/2)),\n        ];\n\n        this.x = this.originX;\n        this.rotation();\n    },\n\n    update : function(){\n        this.ctx.save();\n        this.ctx.translate(this.x + this.side /2, this.y + this.side /2);\n\n        this.ctx.beginPath();\n        this.ctx.strokeStyle = this.col;\n\n        this.ctx.moveTo(this.ptArr[0].x, this.ptArr[0].y);\n\n        for(var i = 0; i < this.ptArr.length; i++ ){\n            var number = (i + 1) % this.ptArr.length;\n            this.ctx.lineTo(this.ptArr[number].x, this.ptArr[number].y);\n        }\n\n        this.ctx.stroke();\n        this.ctx.closePath();\n\n        this.ctx.restore();\n    }\n};\n\nvar RectTop1 = function(ctx, x, y, rect){\n    _.bindAll(this, 'rotationComplete');\n\n    this.x = this.originX = x;\n    this.y = y;\n\n    this.side = 60;\n    this.baseRect = rect;\n    this.ctx = ctx;\n\n    this.col = '#fff';\n\n    this.rotate = 0;\n    this.thetaArr = [0, Math.PI * 3 / 2, Math.PI * 7 / 4, Math.PI * 2];\n    this.ptArr =[\n        new Pt(0, 0),\n        new Pt(this.side, Math.PI* (3/2)),\n        new Pt(this.side * Math.sqrt(2), Math.PI * (7/4)),\n        new Pt(this.side, Math.PI * 2),\n    ];\n\n    this.rotation();\n};\n\nRectTop1.prototype = {\n    rotation : function(){\n        this.rotate =  -Math.PI/2;\n        for(var i = 0; i < this.ptArr.length; i++){\n            var pt = this.ptArr[i];\n            var theta = this.thetaArr[i];\n            TweenLite.to(pt, 1, { theta : (theta + this.rotate)});\n        }\n\n        TweenLite.to(this, 1, { x : (this.originX ), onComplete : this.rotationComplete});\n    },\n    rotationComplete : function(){\n        this.ptArr =[\n            new Pt(0, 0),\n            new Pt(this.side, Math.PI* (3/2)),\n            new Pt(this.side * Math.sqrt(2), Math.PI * (7/4)),\n            new Pt(this.side, Math.PI * 2),\n        ];\n\n        this.x = this.originX;\n        this.rotation();\n    },\n    update : function(){\n        this.ctx.save();\n        //this.ctx.translate(this.x + this.baseRect.ptArr[2].x - this.side/2, this.y + this.baseRect.ptArr[2].y + this.side/2);\n        this.x = this.baseRect.x + this.baseRect.ptArr[2].x + this.side / 2;\n        this.y = this.baseRect.y + this.baseRect.ptArr[2].y + this.side/2;\n        this.ctx.translate( this.x, this.y);\n\n        this.ctx.beginPath();\n        this.ctx.strokeStyle = this.col;\n\n        this.ctx.moveTo(this.ptArr[0].x, this.ptArr[0].y);\n\n        for(var i = 0; i < this.ptArr.length; i++ ){\n            var number = (i + 1) % this.ptArr.length;\n            this.ctx.lineTo(this.ptArr[number].x, this.ptArr[number].y);\n        }\n\n        this.ctx.stroke();\n        this.ctx.closePath();\n\n        this.ctx.restore();\n    }\n};\n\nvar RectTop2 = function(ctx, x, y, rect){\n    _.bindAll(this, 'rotationComplete');\n\n    this.x = this.originX = x;\n    this.y = y;\n\n    this.side = 60;\n    this.baseRect = rect;\n    this.ctx = ctx;\n\n    this.col = '#fff';\n\n    this.rotate = 0;\n    this.thetaArr = [0, Math.PI, Math.PI * 5 / 4, Math.PI * 3 / 2];\n    this.ptArr =[\n        new Pt(0, 0),\n        new Pt(this.side, Math.PI),\n        new Pt(this.side * Math.sqrt(2), Math.PI * (5/4)),\n        new Pt(this.side, Math.PI * (3/2)),\n    ];\n\n    this.rotation();\n};\n\nRectTop2.prototype = {\n    rotation : function(){\n        this.rotate =  Math.PI/2;\n        for(var i = 0; i < this.ptArr.length; i++){\n            var pt = this.ptArr[i];\n            var theta = this.thetaArr[i];\n            TweenLite.to(pt, 1, { theta : (theta + this.rotate)});\n        }\n\n        TweenLite.to(this, 1, { x : (this.originX ), onComplete : this.rotationComplete});\n    },\n    rotationComplete : function(){\n        this.ptArr =[\n            new Pt(0, 0),\n            new Pt(this.side, Math.PI),\n            new Pt(this.side * Math.sqrt(2), Math.PI * (5/4)),\n            new Pt(this.side, Math.PI * (3/2)),\n        ];\n\n        this.x = this.originX;\n        this.rotation();\n    },\n    update : function(){\n        this.ctx.save();\n        this.x = this.baseRect.x + this.baseRect.ptArr[2].x;\n        this.y = this.baseRect.y + this.baseRect.ptArr[2].y;\n        this.ctx.translate( this.x, this.y );\n\n        this.ctx.beginPath();\n        this.ctx.strokeStyle = this.col;\n\n        this.ctx.moveTo(this.ptArr[0].x, this.ptArr[0].y);\n\n        for(var i = 0; i < this.ptArr.length; i++ ){\n            var number = (i + 1) % this.ptArr.length;\n            this.ctx.lineTo(this.ptArr[number].x, this.ptArr[number].y);\n        }\n\n        this.ctx.stroke();\n        this.ctx.closePath();\n\n        this.ctx.restore();\n    }\n};\n\n\n\n\n\nvar Road = function(ctx, x, y){\n    var line;\n    var lineWidth = 20;\n    var lineWidthMargin = 10;\n\n    this.ctx = ctx;\n\n    this.width = window.innerWidth;\n\n    this.x = x;\n    this.y = y;\n\n    this.lineArr = [];\n\n    this.mask = {x: - this.num /2 * (lineWidth + lineWidthMargin), width: this.num * (lineWidth + lineWidthMargin)}\n\n    for(var i = 0; i <= this.num; i++){\n        line = new Line(this.ctx, (lineWidth + lineWidthMargin) * (i - this.num/2), 0, lineWidth, {minX: this.mask.x, maxX: this.mask.x + this.mask.width})\n        this.lineArr.push(line);\n    }\n};\n\nRoad.prototype = {\n    num : 20,\n    lineArr : null,\n    update : function(){\n        this.ctx.save();\n\n        this.ctx.translate(this.x, this.y);\n\n        for(var i = 0; i < this.lineArr.length; i++){\n            this.lineArr[i].update();\n        }\n\n        var grd = this.ctx.createLinearGradient(this.mask.x * 2, 0, this.mask.width, 0);\n\n\n        grd.addColorStop(0.25, 'rgba(51, 51, 51, 1)');\n        grd.addColorStop(0.3, 'rgba(51, 51, 51, 0)');\n        grd.addColorStop(0.5, 'rgba(51, 51, 51, 0)');\n        grd.addColorStop(0.7, 'rgba(51, 51, 51, 0)');\n        grd.addColorStop(0.75, 'rgba(51, 51, 51, 1)');\n\n        this.ctx.fillStyle = grd;\n        this.ctx.fillRect(-this.x, -15, this.width, 30);\n\n        this.ctx.restore();\n    }\n};\n\nvar Line = function(ctx, x, y, width, range){\n    this.x = x;\n    this.range = range;\n\n    this.ctx = ctx;\n    this.col = '#fff';\n    this.width = width;\n    this.prevTime = + new Date;\n};\n\nLine.prototype = {\n    update : function(){\n\n        this.x -= 1;\n        if(this.x < this.range.minX) this.x = this.range.maxX;\n\n        this.ctx.strokeStyle = this.col;\n        this.ctx.beginPath();\n\n        this.ctx.moveTo(this.x - this.width / 2, 0);\n        this.ctx.lineTo(this.x + this.width / 2, 0);\n        this.ctx.stroke();\n\n        this.ctx.closePath();\n\n    }\n};\n\n\n\n\n// --------------------------\n\nvar width, height, previousTime;\nvar side1, side2;\nvar rect, rectTop1, rectTop2, side, road;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\nside = Math.min(width, height) / 8;\n\n\ncanvas.width  = width;\ncanvas.height = height;\n\n\ninit();\nloop();\n\nfunction init(){\n    rect = new Rect(ctx, width / 2, height *.9);\n    rectTop1 = new RectTop1(ctx, width/2, height*.9, rect);\n    rectTop2 = new RectTop2(ctx, width/2, height*.9, rectTop1);\n\n    road = new Road(ctx, width/2, height *.9 + 30 + 2);\n}\n\nfunction loop(){\n    //ctx.clearRect(0, 0, width, height);\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    rect.update();\n    rectTop1.update();\n    rectTop2.update();\n    road.update();\n\n    requestAnimationFrame(loop);\n}\n"
  },
  {
    "path": "app/scripts/1-illusion-of-life/14-undefined.js",
    "content": "\n\n\n// --------------------------\nvar Pt = function(x, y){\n    this.x = x;\n    this.y = y;\n};\n\nvar Line = function(ctx, pt1, pt2, pt3, pt4, i){\n    _.bindAll(this, 'changeAnimation1', 'changeAnimation1Complete', 'changeAnimation2', 'changeAnimation2Complete');\n\n    this.curPt1 = new Pt(pt1.x, pt1.y);\n    this.curPt2 = new Pt(pt2.x, pt2.y);\n\n    this.col = 'rgba(255, 255, 255, .3)';\n    this.ctx = ctx;\n\n    this.pt1 = pt1;\n    this.pt2 = pt2;\n\n    this.pt3 = pt3;\n    this.pt4 = pt4;\n\n    //this.duration = i/ 20 * .3 + .2;\n    this.duration = .5;\n    this.wait     = (.8 - this.duration) * 1000;\n\n    setTimeout(this.changeAnimation1, 500);\n};\n\nLine.prototype = {\n    changeAnimation1 : function(){\n        TweenLite.to(this.curPt1, this.duration, { x : (this.pt3.x ), onComplete : this.changeAnimation1Complete, ease: Power3.easeInOut});\n        TweenLite.to(this.curPt2, this.duration, { y : (this.pt4.y ), ease: Power3.easeInOut});\n    },\n\n    changeAnimation1Complete : function(){\n        setTimeout(this.changeAnimation2, this.wait);\n    },\n\n    changeAnimation2 : function(){\n        TweenLite.to(this.curPt1, this.duration, { x : (this.pt1.x ), onComplete : this.changeAnimation2Complete, ease: Power3.easeInOut});\n        TweenLite.to(this.curPt2, this.duration, { y : (this.pt2.y ), ease: Power3.easeInOut});\n    },\n\n    changeAnimation2Complete : function(){\n        setTimeout(this.changeAnimation1, this.wait);\n    },\n\n    update : function(){\n        this.ctx.strokeStyle = this.col;\n\n        this.ctx.beginPath();\n        this.ctx.moveTo(this.curPt1.x, this.curPt1.y);\n        this.ctx.lineTo(this.curPt2.x, this.curPt2.y);\n        this.ctx.stroke();\n        this.ctx.closePath();\n    }\n};\n\nvar side = 100;\n\nvar RightRect = function(ctx, x, y){\n    var ptX, ptY, pt1, pt2, pt3, pt4 ,line, i;\n\n    this.ctx = ctx;\n    this.x   = x;\n    this.y   = y;\n\n    this.lineArr = [];\n\n    for(var j = 0; i < 4; i++){\n\n    }\n\n    // ---------\n\n    for(var i = 0; i < this.num; i++){\n        ptX  = (i) / (this.num-1) * side;\n        ptY  = (i) / (this.num-1) * side;\n        pt1  = new Pt( 0, -side);\n        pt2  = new Pt( side, -side);\n        pt3  = new Pt( ptX, -side);\n        pt4  = new Pt( 0, ptY -side);\n        line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);\n\n        this.lineArr.push(line);\n    }\n\n    for(var i = 0; i < this.num; i++){\n        ptX  = (i) / (this.num-1) * side;\n        ptY  = (i) / (this.num-1) * side;\n        pt1  = new Pt( side, -side);\n        pt2  = new Pt( side, side-side);\n        pt3  = new Pt( ptX, -side);\n        pt4  = new Pt( 0, ptY-side);\n        line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);\n\n        this.lineArr.push(line);\n    }\n\n    // ---------\n\n    for(var i = 0; i < this.num; i++){\n        ptX  = (i) / (this.num-1) * side;\n        ptY  = (i) / (this.num-1) * side;\n        pt1  = new Pt( 0, side);\n        pt2  = new Pt( side, side);\n        pt3  = new Pt( ptX, side);\n        pt4  = new Pt( 0, -ptY + side);\n        line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);\n\n        this.lineArr.push(line);\n    }\n\n    for(var i = 0; i < this.num; i++){\n        ptX  = (i) / (this.num-1) * side;\n        ptY  = (i) / (this.num-1) * side;\n        pt1  = new Pt( side, side);\n        pt2  = new Pt( side, 0);\n        pt3  = new Pt( side - ptX, side);\n        pt4  = new Pt( side, ptY);\n        line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);\n\n        this.lineArr.push(line);\n    }\n\n    // ---------\n\n    for(var i = 0; i < this.num; i++){\n        ptX  = (i) / (this.num-1) * side * -1;\n        ptY  = (i) / (this.num-1) * side;\n        pt1  = new Pt( 0, -side);\n        pt2  = new Pt( -side, -side);\n        pt3  = new Pt( ptX, -side);\n        pt4  = new Pt( 0, ptY -side);\n        line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);\n\n        this.lineArr.push(line);\n    }\n\n    for(var i = 0; i < this.num; i++){\n        ptX  = (i) / (this.num-1) * side * -1;\n        ptY  = (i) / (this.num-1) * side;\n        pt1  = new Pt( -side, -side);\n        pt2  = new Pt( -side, side-side);\n        pt3  = new Pt( ptX, -side);\n        pt4  = new Pt( 0, ptY-side);\n        line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);\n\n        this.lineArr.push(line);\n    }\n\n    // ----------\n\n    for(var i = 0; i < this.num; i++){\n        ptX  = (i) / (this.num-1) * side * -1;\n        ptY  = (i) / (this.num-1) * side;\n        pt1  = new Pt( 0, side);\n        pt2  = new Pt( -side, side);\n        pt3  = new Pt( ptX, side);\n        pt4  = new Pt( 0, -ptY + side);\n        line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);\n\n        this.lineArr.push(line);\n    }\n\n    for(var i = 0; i < this.num; i++){\n        ptX  = (i) / (this.num-1) * side;\n        ptY  = (i) / (this.num-1) * side;\n        pt1  = new Pt( -side, side);\n        pt2  = new Pt( -side, 0);\n        pt3  = new Pt( ptX - side, side);\n        pt4  = new Pt( 0, ptY);\n        line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);\n\n        this.lineArr.push(line);\n    }\n\n\n};\n\nRightRect.prototype = {\n    num    : 20,\n    update : function(){\n        this.ctx.save();\n        this.ctx.translate(this.x, this.y);\n\n        for(var i = 0; i < this.lineArr.length; i++){\n            var line = this.lineArr[i];\n            line.update();\n        }\n\n        this.ctx.restore();\n    }\n};\n\n\n\n// --------------------------\n\n\nvar width, height, previousTime;\nvar side1, side2;\nvar rightRect;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\n\ncanvas.width  = width;\ncanvas.height = height;\n\n\ninit();\nloop();\n\nfunction init(){\n    rightRect = new RightRect( ctx, width/2, height/2 );\n}\n\nfunction loop(){\n    //ctx.clearRect(0, 0, width, height);\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    rightRect.update();\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/1-illusion-of-life/15-undefined.js",
    "content": "window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\nvar col = '#fff';\n\nvar Circle = function( ctx, x, y, rad ){\n    this.ctx = ctx;\n    this.x = x;\n    this.y = y;\n    this.rad = rad;\n};\n\nCircle.prototype = {\n    update : function(){\n        this.ctx.fillStyle = col;\n\n        this.ctx.beginPath();\n        this.ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);\n        this.ctx.fill();\n        this.ctx.closePath();\n\n    }\n};\n\n\nvar DynamicCircle = function(ctx, x, y, rad, dis){\n    this.shuuki = .3;\n    this.dis = dis;\n    this.vel = dis / this.shuuki;\n    this.duration = 0;\n    this.shinpuku = rad * 3;\n    this.originY  = y;\n    Circle.call(this, ctx, x, y, rad/2);\n};\n\nDynamicCircle.prototype = Object.create(Circle.prototype);\n\nDynamicCircle.prototype = {\n    update : function(dt, shapeArr){\n\n        this.duration += dt;\n\n        var times = parseInt(this.duration / (this.shuuki * 2))\n\n        this.x = this.x + this.vel * dt;\n\n        if(this.x >= maxX){\n            var dis = this.x - maxX;\n            this.x = minX + dis - this.dis;\n        }\n\n        var globalAlpha = 1;\n\n        if(this.x >= (maxX-this.dis) ){\n            globalAlpha = (maxX - this.x )/ this.dis\n            if(globalAlpha < 0) globalAlpha = 0;\n        }\n\n\n\n        this.y = -1 * Math.cos(this.duration  / this.shuuki * Math.PI ) * this.shinpuku + this.originY;\n\n        var circleNumber = (times * 2 + 1) % shapeArr.length;\n        var shapeRatio = (this.duration - times * this.shuuki * 2) * Math.PI * 2;\n        if(shapeRatio > Math.PI) shapeRatio = Math.PI;\n\n        shapeArr[circleNumber].y = this.rad * 4 *Math.sin(shapeRatio);\n\n        this.ctx.save();\n        this.ctx.globalAlpha = globalAlpha;\n\n        Circle.prototype.update.call(this);\n\n        this.ctx.restore();\n    }\n};\n\n\nvar DynamicCircle2= function(ctx, x, y, rad, dis){\n    this.shuuki = .3;\n    this.dis = dis;\n    this.vel = -1 * dis / this.shuuki;\n    this.duration = 0;\n    this.shinpuku = rad * 3;\n    this.originY  = y;\n    Circle.call(this, ctx, x, y, rad/2);\n};\n\nDynamicCircle2.prototype = Object.create(Circle.prototype);\n\nDynamicCircle2.prototype = {\n    update : function(dt, shapeArr){\n\n        this.duration += dt;\n\n        var times = parseInt(this.duration / (this.shuuki * 2))\n\n        this.x = this.x + this.vel * dt;\n        this.y = 1 * Math.cos(this.duration  / this.shuuki * Math.PI ) * this.shinpuku + this.originY;\n\n//        if(this.x >= maxX){\n//            var dis = this.x - maxX;\n//            this.x = minX + dis - this.dis;\n//        }\n\n        if(this.x <= minX){\n            var dis = minX - this.x;\n            this.x = maxX - dis + this.dis;\n        }\n\n        var globalAlpha = 1;\n\n        if(this.x <= (minX+this.dis) ){\n            globalAlpha = (this.x - minX )/ this.dis;\n            if(globalAlpha < 0) globalAlpha = 0;\n        }\n\n\n//\n\n//\n        var circleNumber = (times * 2 ) % shapeArr.length;\n        circleNumber = shapeArr.length - 2 - circleNumber;\n\n        if(circleNumber < 0) circleNumber =shapeArr.length  + circleNumber;\n\n        var shapeRatio = (this.duration - times * this.shuuki * 2) * Math.PI * 2;\n        if(shapeRatio > Math.PI) shapeRatio = Math.PI;\n\n        shapeArr[circleNumber].y = this.rad * 4 *Math.sin(shapeRatio) * -1;\n//\n        this.ctx.save();\n        this.ctx.globalAlpha = globalAlpha;\n\n        Circle.prototype.update.call(this);\n\n        this.ctx.restore();\n    }\n};\n\n\n\nvar Rect = function( ctx, x, y, rad ){\n    this.ctx = ctx;\n    this.x   = x;\n    this.y   = y;\n    this.rad = rad * 2;\n};\n\nRect.prototype = {\n    update : function(){\n        this.ctx.fillStyle = col;\n\n        this.ctx.beginPath();\n        this.ctx.fillRect(this.x - this.rad/2, this.y - this.rad/2, this.rad, this.rad);\n        this.ctx.closePath();\n    }\n};\n\n\n\n\n// --------------------------\n\n\nvar width, height, previousTime;\nvar side1, side2;\nvar colNum = 19;\nvar shapeArr = [];\nvar dynamicCircle, dynamicCircle2;\nvar prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\n\ncanvas.width  = width;\ncanvas.height = height;\n\nvar minX = 1/(colNum + 1) * width - .5*width;\nvar maxX = colNum/(colNum + 1) * width - .5*width;\n\n\ninit();\nloop();\n\nfunction init(){\n    var shape;\n    var xPos;\n    var yPos = 0;\n    var rad = parseInt(width / colNum / 2 * .6);\n    var dis = 1/(colNum+1) * width;\n    var rectX;\n\n\n\n    for(var i = 0; i < colNum; i++){\n        xPos = ((i + 1) / (colNum  + 1) -.5) * width;\n\n        if(i % 2 == 0) {\n            shape = new Rect(ctx, xPos, yPos, rad );\n        }else{\n            shape = new Circle(ctx, xPos, yPos, rad );\n        }\n\n\n        shapeArr.push(shape);\n    }\n\n    dynamicCircle = new DynamicCircle(ctx, minX, yPos - rad * 3, rad, dis);\n    dynamicCircle2= new DynamicCircle2(ctx, maxX, yPos + rad * 3, rad, dis);\n\n\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n    //ctx.clearRect(0, 0, width, height);\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    ctx.save();\n\n    ctx.translate(width/2, height/2);\n\n    for(var i in shapeArr){\n        var shape = shapeArr[i];\n        shape.update();\n    }\n\n    dynamicCircle.update(duration, shapeArr);\n    dynamicCircle2.update(duration, shapeArr);\n\n    ctx.restore();\n\n\n    requestAnimationFrame(loop);\n}"
  },
  {
    "path": "app/scripts/1-illusion-of-life/16-undefined.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\n\nvar apple = [\n    [5, 5, 5, 5, 5,  5, 5, 5, 5, 5  , 4, 3, 2 ,1],\n    [5, 5, 5, 5, 5,  5, 5, 5, 5, 4  , 3, 2, 1],\n    [5, 5, 5, 5, 5,  5, 5, 5, 4, 2  , 1],\n    [5, 5, 5, 5, 5,  5, 5, 5, 3, 1],\n    [5, 5, 5, 5, 5,  5, 5, 4, 2, 1],\n\n    [5, 5, 5, 5, 5,  5, 5, 3, 2, 1],\n    [5, 5, 5, 5, 5,  5, 5, 3, 2, 1],\n    [5, 5, 5, 5, 5,  5, 5, 3, 2, 1],\n    [5, 5, 5, 5, 5,  5, 5, 3, 2, 1],\n    [5, 5, 5, 5, 5,  5, 5, 3, 2, 1],\n\n    // ============= ===================\n\n    [5, 5, 5, 5, 5,  5, 5, 3, 2, 1],\n    [5, 5, 5, 5, 5,  5, 5, 3, 2, 1],\n    [5, 5, 5, 5, 5,  5, 5, 4, 3, 2,   1],\n    [5, 5, 5, 5, 5,  5, 5, 5, 4, 3,   2, 1],\n    [5, 5, 5, 5, 5,  5, 5, 5, 4, 3,   2, 1],\n\n    [5, 5, 5, 5, 5,  5, 5, 5, 4, 4,   2, 1],\n    [5, 5, 5, 5, 5,  5, 5, 5, 5, 4,   3, 2, 1],\n    [5, 5, 5, 5, 5,  5, 5, 5, 5, 4,   3, 2, 1],\n    [5, 5, 5, 5, 5,  5, 5, 5, 5, 5,   4, 3, 1],\n    [5, 5, 5, 5, 5,  5, 5, 5, 5, 5,   4, 3, 2, 1],\n\n    // ============= ===================\n\n    [5, 4, 3, 3, 3,  3, 3, 4, 5, 5,   4, 3, 2, 1],\n    [4, 3, 2, 2, 2,  2, 2, 3, 4, 5,   4, 3, 2, 1],\n    [2, 1, 0, 0, 0,  1, 2, 3, 4, 5,   4, 3, 2, 1],\n    [0, 0, 0, 0, 0,  1, 2, 3, 4, 5,   4, 3, 2, 1],\n    [0, 0, 0, 0, 0,  1, 3, 4, 4, 5,   4, 2, 1],\n\n    [0, 0, 0, 0, 0,  2, 3, 4, 5, 4,   3, 1],\n    [0, 0, 0, 0, 0,  2, 3, 4, 5, 4,   3, 1],\n    [0, 0, 0, 0, 1,  2, 4, 5, 5, 4,   3, 1],\n    [0, 0, 0, 1, 3,  4, 5, 5, 4, 3,   1],\n    [0, 0, 1, 3, 4,  5, 5, 5, 4, 3,   1],\n\n    // ============= ===================\n\n    [0, 1, 3, 4, 5,  5, 5, 5, 4, 3,   1],\n    [1, 3, 4, 5, 5,  5, 5, 4, 3, 1],\n    [2, 4, 5, 5, 5,  5, 5, 4, 3, 1],\n    [4, 5, 5, 5, 5,  5, 5, 4, 3, 1],\n    [5, 5, 5, 5, 5,  5, 5, 4, 3, 1],\n\n    [5, 5, 5, 5, 5,  5, 5, 4, 3, 1],\n    [5, 5, 5, 5, 5,  5, 5, 4, 3, 1],\n    [5, 5, 5, 5, 5,  5, 5, 4, 3, 1],\n    [5, 5, 5, 5, 5,  5, 5, 5, 4, 3,  1],\n    [5, 5, 5, 5, 5,  5, 5, 5, 4, 4,  2],\n\n    // =========== ===============\n\n    [5, 5, 5, 5, 5,  5, 5, 5, 4, 4,  2],\n    [5, 5, 5, 5, 5,  5, 5, 5, 5, 4,  2],\n    [5, 5, 5, 5, 5,  5, 5, 5, 5, 4,  3, 1],\n\n\n];\nvar rectWidth = 860;\nvar rectHeight = 476;\n\n\nvar Apple = function(ctx, x, y){\n    _.bindAll(this, 'updateTile');\n\n    //this.bgRect = new BgRect(ctx, x, y);\n    this.ctx = ctx;\n    this.tiles  = new Tiles(ctx);\n\n    //setTimeout(this.showBg, 300);\n    setTimeout(this.updateTile, 1000);\n};\n\nApple.prototype = {\n    updateTile : function(){\n        this.tiles.changeSize();\n    },\n\n    update : function(){\n        this.tiles.update();\n\n        this.ctx.fillStyle = '#fff';\n        this.ctx.font = \"24px sans-serif\";\n        this.ctx.fillText('Is it in June 2nd?', width/2 - 90, height/2  + 200)\n    }\n\n};\n\nvar Tiles = function(ctx){\n       this.tileArr = [];\n       var margin = 2;\n\n\n       for(var i = 0; i < 43; i++){\n           this.tileArr[i] = [];\n           var visualArr = apple[i];\n           for(var j = 0; j < 24; j++){\n               var number = visualArr[j] ? visualArr[j] : 0;\n               var tile = new Tile(ctx, i * 20 + 10 - rectWidth/2, j * 20 + 10 - rectHeight/2, number, i, j);\n               this.tileArr[i].push(tile);\n\n           }\n       }\n};\n\n\nTiles.prototype = {\n    changeSize : function(){\n        for(var i in this.tileArr){\n            var tileArr = this.tileArr[i];\n            for(var j in tileArr){\n                tileArr[j].changeSize();\n            }\n        }\n    },\n    update : function(){\n        for(var i in this.tileArr){\n            var tileArr = this.tileArr[i];\n            for(var j in tileArr){\n                tileArr[j].update();\n            }\n        }\n    }\n};\n\nvar Tile = function(ctx, x, y, number, i, j){\n    _.bindAll(this, 'onCompleteAnimation', 'changeSize');\n\n    this.xId = i;\n    this.yId = j;\n\n    this.ctx = ctx;\n\n    this.x = x;\n    this.y = y;\n    this.number = number;\n\n    this.firstWidth = this.side = 21;\n    this.secondWidth = 16;\n\n    this.grd = this.ctx.createLinearGradient( -rectWidth/2-this.x, 0, rectWidth, 0);\n\n\n    this.grd.addColorStop(0, 'rgba(181, 240, 83, 1)');\n    this.grd.addColorStop(0.15, 'rgba(0, 215, 171, 1)');\n    this.grd.addColorStop(0.3, 'rgba(151, 69, 219, 1)');\n    this.grd.addColorStop(0.40, 'rgba(254, 91, 81, 1)');\n    this.grd.addColorStop(0.5, 'rgba(255, 216, 59, 1)');\n};\n\nTile.prototype = {\n    animationDuration :.3,\n    anchor : 0,\n    update : function(){\n\n        this.ctx.save();\n        this.ctx.translate(this.x + width/2, this.y + height/2);\n        this.ctx.fillStyle = this.grd;\n\n        this.ctx.beginPath();\n        this.ctx.moveTo(-this.side/2 + this.anchor, -this.side/2);\n        this.ctx.lineTo(this.side/2 - this.anchor, -this.side/2);\n        this.ctx.quadraticCurveTo(this.side/2, -this.side/2, this.side/2, this.anchor - this.side/2);\n        this.ctx.lineTo(this.side/2, this.side/2- this.anchor);\n        this.ctx.quadraticCurveTo(this.side/2, this.side/2, this.side/2 - this.anchor, this.side/2);\n        this.ctx.lineTo(- this.side/2 + this.anchor, this.side/2);\n        this.ctx.quadraticCurveTo(-this.side/2, this.side/2, -this.side/2, this.side/2 - this.anchor);\n        this.ctx.lineTo(-this.side/2, -this.side/2 + this.anchor);\n        this.ctx.quadraticCurveTo(-this.side/2, -this.side/2, -this.side/2 + this.anchor, -this.side/2);\n\n        this.ctx.fill();\n        this.ctx.closePath();\n        this.ctx.restore();\n\n    },\n\n    delay : 0,\n\n    changeSize : function(){\n        TweenLite.to(this, this.animationDuration, {side : 16, anchor: 4, onComplete: this.onCompleteAnimation, delay: this.delay});\n    },\n\n    restart : function(){\n        if(this.number > 0){\n            TweenLite.to(this, this.animationDuration, {side : 0, anchor: 0 });\n        }\n\n        this.delay  = 1;\n        TweenLite.to(this, this.animationDuration, {side : 21, delay: 2, onComplete: this.changeSize });\n    },\n\n    onCompleteAnimation : function(){\n        var self = this;\n        setTimeout(function(){\n            self.restart();\n        },3000);\n\n        var sid, anch;\n        switch (this.number){\n            case 0:\n                sid = 0; anch = 0;\n                break;\n            case 1:\n                sid = 2, anch = .5;\n                break;\n            case 2:\n                sid = 4, anch = 1;\n                break;\n            case 3:\n                sid = 8, anch = 2;\n                break;\n            case 4:\n                sid = 12, anch = 3;\n                break;\n            case 5:\n                return;\n                break;\n        }\n\n        TweenLite.to(this, this.animationDuration * 3, {side : sid, anchor: anch, delay:.5 });\n\n\n    }\n};\n\n// ================\nvar apple;\n\ninit();\nloop();\n\nfunction init(){\n    apple = new Apple(ctx, width/2, height/2);\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#fff';\n    ctx.fillRect(0, 0, width, height);\n\n    apple.update(duration);\n\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/1-illusion-of-life/17-undefined.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\n\nsw = 1000;\nsh = 1000;\nvar dtr = function(v) {return v * Math.PI/180;}\nvar camera = {\n    focus : 10,\n    self : {\n        x : 0,\n        y : 0,\n        z : 0\n    },\n    rotate : {\n        x : 0,\n        y : 0,\n        z : 0\n    },\n    up : {\n        x : 0,\n        y : 1,\n        z : 0\n    },\n    zoom : 1,\n    display : {\n        x : width/2,\n        y : height/2,\n        z : 0\n    }\n};\n\nvar Circles = function(ctx){\n    var circle;\n    this.circles = [];\n    var side = 300;\n\n    for(var x = 0; x < this.sideNum; x++){\n        for(var y = 0; y < this.sideNum; y++){\n\n            if(x % 3 == 0 && y % 3 == 0) circle = new Rect(ctx, side * (x - this.sideNum/2), side * (y - this.sideNum/2))\n            else                         circle = new Circle(ctx, side * (x - this.sideNum/2), side * (y - this.sideNum/2))\n\n\n\n            this.circles.push(circle);\n        }\n    }\n};\n\nCircles.prototype = {\n    sideNum : 24,\n    t : 0,\n    update : function(){\n        this.t += .01;\n        camera.focus = 50 - 40 * Math.cos(this.t);\n\n        for(var i in this.circles){\n            this.circles[i].update();\n        }\n    }\n};\n\nvar Circle = function(ctx, x, y){\n    this.ctx = ctx;\n    this.x = x;\n    this.y = y;\n\n    this.z = -100;\n\n    this.rad =100;\n    this.col = '#fff';\n\n\n};\n\nCircle.prototype = {\n    update : function(){\n        this.ctx.fillStyle = '#fff';\n\n        var scale = ((camera.focus-camera.self.z) / ((camera.focus-camera.self.z) - this.z))* camera.zoom;\n\n        var xPos = this.x * scale;\n        var yPos = this.y * scale;\n        var rad  = this.rad * scale;\n\n\n        this.ctx.save();\n\n        this.ctx.translate(camera.display.x, camera.display.y);\n\n        this.ctx.beginPath();\n        this.ctx.arc(xPos, yPos, rad, 0, 2 * Math.PI, false);\n        this.ctx.fill();\n        this.ctx.closePath();\n\n        this.ctx.restore();\n    }\n};\n\nvar Rect = function(ctx, x, y){\n    this.ctx = ctx;\n    this.x = x;\n    this.y = y;\n\n    this.z = -100;\n\n    this.rad =100;\n    this.col = '#fff';\n};\n\nRect.prototype = {\n    update : function(){\n        this.ctx.fillStyle = '#fff';\n\n        var scale = ((camera.focus-camera.self.z) / ((camera.focus-camera.self.z) - this.z))* camera.zoom;\n\n        var xPos = this.x * scale;\n        var yPos = this.y * scale;\n        var rad  = this.rad * scale;\n\n\n        this.ctx.save();\n\n        this.ctx.translate(camera.display.x, camera.display.y);\n\n        this.ctx.beginPath();\n        this.ctx.fillRect(xPos - rad, yPos -rad , rad * 2, rad * 2);\n        this.ctx.closePath();\n\n        this.ctx.restore();\n    }\n};\n\n\n\n// ================\nvar circles;\n\ninit();\nloop();\n\nfunction init(){\n    circles = new Circles(ctx);\n\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    circles.update();\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/1-illusion-of-life/18-undefined.js",
    "content": "\n// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar isSoundPlay = true;\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n\n// ================\n\nvar dtr = function(v) {return v * Math.PI/180;}\nvar camera = {\n    focus : 100,\n    self : {\n        x : 0,\n        y : 0,\n        z : 0\n    },\n    rotate : {\n        x : 0,\n        y : 0,\n        z : 0\n    },\n    up : {\n        x : 0,\n        y : 1,\n        z : 0\n    },\n    zoom : 1,\n    display : {\n        x : width/2,\n        y : height/2,\n        z : 0\n    }\n};\n\nvar Point = function(x, y, z){\n    this.x = x;\n    this.y = y;\n    this.z = z;\n};\n\n\n\nvar Shape = function(ctx, z){\n    _.bindAll(this, 'updateRotation', 'onTweenComplete');\n\n    this.normalPtArr = this.ptArr = [];\n    this.ctx = ctx;\n\n    this.x = 0;\n    this.y = 0;\n    this.z = z;\n\n    this.theta = Math.PI / 2;\n\n\n    var side = this.side    = 200;\n    this.sideNum = 3;\n\n    //    200              200\n    // ----------      ----------\n    // \\        /     |          |\n    //  \\      /      |          |\n    //   \\    /       |          |\n    //    \\  /        |          |\n    //     \\/          ----------\n    //  triangle\n\n\n    var angle = function(number){\n\n      return (number - 2) / Math.PI / number / 2\n    };\n\n\n    this.sideList = {\n        3 : side / Math.cos(angle(3)),\n        4 : side / Math.cos(angle(4)),\n        5 : side / Math.cos(angle(5)),\n        6 : side / Math.cos(angle(6))\n    };\n\n    var gosa=0;\n    switch(this.sideNum){\n      case 3:\n        gosa = -90 / 180 * Math.PI;\n        break;\n    }\n\n    for(var i = 0; i < this.sideNum; i++){\n      var theta = i / this.sideNum * 2 * Math.PI;\n      var pt = new Point( this.sideList[this.sideNum] * Math.cos(theta + gosa), this.sideList[this.sideNum] * Math.sin(theta + gosa), 0);\n      this.normalPtArr.push(pt);\n    }\n\n    this.translateZ = this.originTranslateZ = this.sideList[this.sideNum];\n    this.theta = Math.PI/2;\n\n    var self = this;\n    this.count = 0;\n    this.sideNum = 0;\n\n    setTimeout(function(){\n      self.updateRotation(0);\n    } , 1000);\n};\n\nShape.prototype = {\n    updateRotation : function(){\n        this.count++;\n        if(this.count % 2 == 0) TweenLite.to(this, .5, {theta: Math.PI/2, translateZ: this.originTranslateZ, onComplete: this.onTweenComplete});\n        else{\n            TweenLite.to(this, .5, {theta: 0, translateZ: 0});\n            setTimeout(this.updateRotation, 600);\n        }\n    },\n\n    onTweenComplete : function(){\n        this.sideNum = (this.sideNum + 1) % 4;\n        var sideNum = this.sideNum + 3;\n\n\n        var rad = this.sideList[sideNum];\n\n        var gosa=0;\n        switch(sideNum){\n            case 3:\n                gosa = -90 / 180 * Math.PI;\n                break;\n            case 4:\n                gosa = 45 / 180 * Math.PI;\n                break;\n        }\n\n        this.normalPtArr = [];\n\n        for(var i = 0; i < sideNum; i++){\n            var theta = i / sideNum * 2 * Math.PI;\n            var pt = new Point( rad * Math.cos(theta + gosa), rad * Math.sin(theta + gosa), 0);\n            this.normalPtArr.push(pt);\n        }\n\n        this.translateZ = this.originTranslateZ = rad * Math.cos( Math.PI / (sideNum * 2) );\n        this.theta = Math.PI/2;\n\n        this.updateRotation();\n\n    },\n\n    duration : 0,\n\n    update : function(dt){\n      this.duration += dt;\n      this.ctx.fillStyle = '#fff';\n      this.ctx.strokeStyle = '#fff';\n\n      var side  = this.side * scale;\n\n      this.ctx.save();\n\n      this.ctx.translate(camera.display.x, camera.display.y);\n      this.ctx.rotate(this.duration/3);\n\n      this.ctx.beginPath();\n\n      for(var i = 0; i < this.ptArr.length; i++){\n        var pt = this.ptArr[i];\n\n        var scale = ((camera.focus-camera.self.z) / ((camera.focus-camera.self.z) - pt.z))* camera.zoom;\n\n        var xPos = pt.x * scale;\n        var yPos = pt.y * scale;\n\n        if(i == 0){\n          this.ctx.moveTo(xPos, yPos);\n        }else{\n          this.ctx.lineTo(xPos, yPos);\n        }\n      }\n\n      this.ctx.closePath();\n      this.ctx.fill();\n      this.ctx.stroke();\n\n      this.ctx.restore();\n    }\n};\n\nObject.defineProperty(Shape.prototype, 'theta', {\n  get : function(){\n    return this._theta;\n  },\n\n  set : function(val){\n    this._theta = val;\n\n    this.ptArr = [];\n    for(var i = 0; i < this.normalPtArr.length; i++){\n      var normalPt = this.normalPtArr[i];\n\n      var rotateX = normalPt.x;\n      var rotateY = Math.cos(val) * normalPt.y - Math.sin(val) * normalPt.z;\n      var rotateZ = Math.sin(val) * normalPt.y + Math.cos(val) * normalPt.z;\n\n      var rotatePt = new Point(rotateX, rotateY, rotateZ - this.translateZ);\n      this.ptArr.push(rotatePt);\n    }\n\n  }\n});\n\n// ================\n\ninit();\nloop();\n\nvar shape;\n\nfunction init(){\n\n    prevTime = +new Date;\n    shape = new Shape(ctx, 1000);\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    shape.update(duration);\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/1-illusion-of-life/19-undefined.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\nvar Point = function(x, y){\n    this.x = x;\n    this.y = y;\n}\n\nvar Circle = function(ctx, x, y, rad, val){\n    this.ctx = ctx;\n\n    this.rad = rad;\n     this.pt = new Point(x, y);\n\n    this.isFill = val;\n};\n\nCircle.prototype = {\n    col : 'rgba(0, 0, 0, 0)',\n    update : function(){\n        this.ctx.beginPath();\n\n        this.ctx.arc(this.pt.x, this.pt.y, this.rad, 0, 2 * Math.PI, false);\n\n        if(this.isFill){\n            this.ctx.fillStyle = this.col;\n            this.ctx.fill();\n        }else{\n            this.ctx.strokeStyle = this.col;\n            this.ctx.stroke();\n        }\n\n        this.ctx.closePath();\n    }\n};\n\nvar SmallCircle = function(i, ctx, bigRad, theta, rad ){\n    this.type    = i % 2;\n    this.bigRad  = bigRad;\n    this.theta   = theta;\n\n    this.count = 0;\n\n    if(i % 2 == 0) {\n        this.vel = this.originalVel = 0.01;\n        this.fure = 0.02;\n        this.countVel = 0.02;\n        this.col = 'rgba(0, 0, 0, 0)';\n    }else{\n        this.vel = this.originalVel =  0.02;\n        this.fure = 0.01;\n        this.countVel = 0.01;\n        this.col = 'rgba(0, 0, 0, 0)';\n    }\n\n    var x = this.bigRad * Math.cos(this.theta);\n    var y = this.bigRad * Math.sin(this.theta);\n\n\n    Circle.call(this, ctx, x, y, rad, true);\n};\n\nSmallCircle.prototype = Object.create(Circle.prototype);\n\nSmallCircle.prototype = {\n    velocityTheta : 0,\n    update : function(){\n        this.count++;\n\n        this.vel = this.originalVel +  this.fure * Math.cos(this.count * this.countVel);\n        this.theta += this.vel;\n\n        this.pt.x = this.bigRad * Math.cos(this.theta);\n        this.pt.y = this.bigRad * Math.sin(this.theta);\n\n        Circle.prototype.update.call(this);\n    }\n};\n\nvar AnimationCircle = function(smallCircle, curRad){\n    this.parentCircle = smallCircle;\n\n    this.minRad = -200;\n    this.maxRad = 200;\n\n    this.curRad = curRad;\n    var x = this.curRad * Math.cos(this.parentCircle);\n    var y = this.curRad * Math.sin(this.parentCircle);\n\n    this.type = this.parentCircle.type;\n\n    if(this.type % 2 == 0) this.col = '#999';\n    else                   this.col = '#fff';\n\n    this.vel = .5;\n\n    Circle.call(this, smallCircle.ctx, x, y, smallCircle.rad/3, true);\n};\n\nAnimationCircle.prototype = Object.create(Circle.prototype);\n\nAnimationCircle.prototype = {\n    update : function(){\n        this.curRad -= this.vel;\n\n        if(this.curRad < this.minRad){\n            //this.curRad = this.curRad + (this.minRad -this.curRad);\n            this.vel = -.5\n        }\n\n        if(this.curRad > this.maxRad){\n            //this.curRad = this.curRad - (this.maxRad -this.curRad);\n            this.vel = .5;\n        }\n\n        this.pt.x = this.curRad * Math.cos(this.parentCircle.theta);\n        this.pt.y = this.curRad * Math.sin(this.parentCircle.theta);\n\n        Circle.prototype.update.call(this);\n    }\n};\n\n\nvar MainCircle = function(ctx, x, y){\n    this.ctx = ctx;\n    this.point = new Point(x, y);\n\n    this.bigCircle = new Circle(ctx, 0, 0, this.rad, false);\n\n    this.circleArr = [];\n    this.animCircleArr = [];\n    for(var i = 0; i < this.circleNum; i++){\n        var theta = i / this.circleNum  * Math.PI * 2;\n\n        var circle = new SmallCircle( i, ctx, this.rad, theta, this.smallRad);\n        this.circleArr.push(circle);\n\n        for(var j = 0; j < 11; j++){\n\n            var animCircle = new AnimationCircle(circle, -j * 40 + 200);\n            this.animCircleArr.push(animCircle);\n        }\n    }\n};\n\nMainCircle.prototype = {\n    rad : 200,\n    smallRad : 8,\n    circleArr : null,\n    circleNum : 24,\n    count : 0,\n\n    update : function(){\n        this.count = this.count + 0.01;\n\n        this.val = Math.sin(this.count) * .5 + Math.sin(this.count/2) * .3 + 1;\n\n        this.ctx.save();\n        this.ctx.translate(this.point.x, this.point.y);\n        this.ctx.scale(this.val, this.val)\n\n        this.bigCircle.update();\n\n        for(var i = 0; i < this.circleArr.length; i++){\n            this.circleArr[i].update();\n        }\n\n        for(i = 0; i < this.animCircleArr.length; i++){\n            this.animCircleArr[i].update();\n        }\n\n        this.ctx.restore();\n    }\n};\n\n\n\n// ================\nvar mainCircle;\n\ninit();\nloop();\n\nfunction init(){\n    mainCircle = new MainCircle(ctx, width/2, height/2);\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    mainCircle.update();\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/1-illusion-of-life/2-squash.js",
    "content": "function backingScale(context) {\n    if ('devicePixelRatio' in window) {\n        if (window.devicePixelRatio > 1) {\n            return window.devicePixelRatio;\n        }\n    }\n    return 1;\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\nvar Rect = function( ctx, x, y, wid, hig ){\n    this.ctx = ctx;\n    this.x = x;\n    this.y = y;\n    this.wid = wid;\n    this.hig = hig;\n\n    this.vel = 100;\n};\n\nRect.prototype = {\n    draw : function(){\n        this.ctx.beginPath();\n        this.ctx.fillStyle = '#fff';\n        this.ctx.save();\n\n        this.ctx.translate(this.x, this.y);\n        this.ctx.fillRect(- this.wid / 2, -this.hig, this.wid, this.hig);\n        this.ctx.closePath();\n\n        this.ctx.restore();\n    }\n};\n\n// ---------------\n\n\nvar width, height, previousTime;\nvar side1, side2;\nvar rect, rect1, rect2;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar scaleFactor = backingScale(ctx);\n\nwidth  = window.innerWidth * scaleFactor;\nheight = window.innerHeight * scaleFactor;\n\nside1 = 100;\nside2 = 180;\n\nvar duration1 = .8;\nvar duration2 = .6;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n\ninit();\n\n\nfunction init(){\n    previousTime = +new Date;\n\n    rect1 = new Rect( ctx, width/2 - 200, height, side1, 50);\n    rect = new Rect( ctx, width/2, 0, side1, 200);\n    rect2 = new Rect( ctx, width/2 + 200, height, side1, 50);\n\n    TweenLite.to(rect, duration1, { y : height, onComplete: onTween1Complete, onUpdate: onTween1Update });\n    TweenLite.to(rect, duration2, { wid: side2, hig: 50, delay: .2});\n\n    TweenLite.to(rect1, duration1, { y : 200});\n    TweenLite.to(rect1, duration2, { wid: side1, hig:200});\n\n    TweenLite.to(rect2, duration1, { y : 200 });\n    TweenLite.to(rect2, duration2, { wid: side1, hig: 200});\n}\n\nfunction onTween1Update(){\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    rect.draw();\n    rect1.draw();\n    rect2.draw();\n}\n\nfunction onTween1Complete(){\n    TweenLite.to(rect, duration1, { y : 200, onComplete: onTween2Complete, onUpdate: onTween1Update, delay:.2});\n    TweenLite.to(rect, duration2, { wid: side1, hig: 200, delay: .2});\n\n    TweenLite.to(rect1, duration1, { y : height, delay:.2});\n    TweenLite.to(rect1, duration2, { wid: side2, hig:50, delay:.4});\n\n    TweenLite.to(rect2, duration1, { y : height, delay:.2 });\n    TweenLite.to(rect2, duration2, { wid: side2, hig: 50, delay:.4});\n}\n\nfunction onTween2Complete(){\n    TweenLite.to(rect, duration1, { y : height, onComplete: onTween1Complete, onUpdate: onTween1Update, delay:.2 });\n    TweenLite.to(rect, duration2, { wid: side2, hig: 50, delay:.4});\n\n    TweenLite.to(rect1, duration1, { y : 200, delay:.2});\n    TweenLite.to(rect1, duration2, { wid: side1, hig:200, delay:.2});\n\n    TweenLite.to(rect2, duration1, { y : 200, delay:.2 });\n    TweenLite.to(rect2, duration2, { wid: side1, hig: 200, delay:.2});\n}\n\n\n"
  },
  {
    "path": "app/scripts/1-illusion-of-life/20-undefined.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\n\nvar Point = function( x, y){\n    this.x = x;\n    this.y = y;\n}\n\nvar Circle = function( ctx, pt){\n    this.ctx = ctx;\n    this.pt = pt;\n};\n\nCircle.prototype = {\n    fillCol   : '#333',\n    strokeCol : '#fff',\n    rad       : 2,\n\n    update : function(){\n        this.ctx.fillStyle = this.fillCol;\n        this.ctx.strokeStyle = this.strokeCol;\n\n        this.ctx.beginPath();\n        this.ctx.arc(this.pt.x, this.pt.y, this.rad, 0, 2 * Math.PI, false);\n        this.ctx.stroke();\n        this.ctx.fill();\n        this.ctx.closePath();\n    }\n};\n\nvar Shape = function( ctx, x, y){\n    this.ctx = ctx;\n    this.center = new Point(x, y);\n\n    this.line = new Line(ctx);\n\n    this.circleArr = [];\n    this.circleArr.push(new Circle(ctx, this.line.startPt));\n    this.circleArr.push(new Circle(ctx, this.line.endPt));\n\n    var self = this;\n    setTimeout(function(){\n        self.add();\n    }, 800);\n};\n\nShape.prototype = {\n    circleArr : null,\n    count : 0,\n    angle : 0,\n\n    add : function(){\n        this.line.addPt();\n        this.circleArr.push(new Circle(this.ctx, this.line.ptArr[this.line.ptArr.length - 1]));\n\n        var self = this;\n        this.count++;\n        if(this.count > 8){\n            setTimeout(function(){\n                self.shrink();\n            }, 2000);\n\n        }else{\n            setTimeout(function(){\n                self.add();\n            }, 800);\n        }\n\n    },\n\n    init : function(){\n        this.count = 0;\n        this.line.init();\n        this.circleArr = [];\n        this.circleArr.push(new Circle(ctx, this.line.startPt));\n        this.circleArr.push(new Circle(ctx, this.line.endPt));\n\n        var self = this;\n        this.line.animate();\n        setTimeout(function(){\n            self.add();\n        }, 1600);\n    },\n\n    shrink : function(){\n        this.line.shrink();\n\n        var self = this;\n        setTimeout(function(){\n            self.init();\n        }, 1000);\n    },\n\n    update : function(){\n        this.angle += 0.01;\n\n        this.ctx.save();\n\n        this.ctx.translate(this.center.x, this.center.y);\n        this.ctx.rotate(this.angle);\n        this.line.update();\n\n        for(var i in this.circleArr){\n            this.circleArr[i].update();\n        }\n\n        this.ctx.restore();\n    }\n};\n\n// ------\n\nvar Line = function(ctx){\n    this.ctx = ctx;\n\n    this.startPt = new Point( 0, 0);\n    this.endPt   = new Point( 0, 0);\n\n    this.ptArr = [];\n\n    var self = this;\n    setTimeout(function(){\n        self.animate();\n    }, 300);\n};\n\nLine.prototype = {\n    col             : '#fff',\n    animateDuration :.5,\n    side            : 100,\n    ptArr           : null,\n\n    init : function(){\n        this.side = 100;\n        this.ptArr = [];\n    },\n\n    addPt : function(){\n        var pt = new Point(this.startPt.x, this.startPt.y);\n        this.ptArr.push(pt);\n\n        var sum = this.ptArr.length + 2;\n        this.side += 10;\n\n        for(var i = 0; i < sum; i++){\n            var theta = i / sum * 2 * Math.PI;\n            var x = Math.cos(theta) * this.side;\n            var y = Math.sin(theta) * this.side;\n\n\n            switch (i){\n                case 0:\n                    TweenLite.to(this.startPt, this.animateDuration, {x : x, y: y});\n                    break;\n                case 1:\n                    TweenLite.to(this.endPt, this.animateDuration, {x : x, y: y});\n                    break;\n                default :\n                    TweenLite.to(this.ptArr[i - 2], this.animateDuration, {x : x, y: y});\n            }\n\n        }\n\n    },\n\n    shrink : function(){\n        var sum = this.ptArr.length + 2;\n        for(var i = 0; i < sum; i++){\n            switch (i){\n                case 0:\n                    TweenLite.to(this.startPt, this.animateDuration, {x : 0, y: 0});\n                    break;\n                case 1:\n                    TweenLite.to(this.endPt, this.animateDuration, {x : 0, y: 0});\n                    break;\n                default :\n                    TweenLite.to(this.ptArr[i - 2], this.animateDuration, {x : 0, y: 0});\n            }\n\n        }\n    },\n\n    animate : function(){\n        TweenLite.to(this.startPt, this.animateDuration, {x : this.side});\n        TweenLite.to(this.endPt,   this.animateDuration, {x : -this.side});\n    },\n\n    update : function(){\n        this.ctx.beginPath();\n        this.ctx.strokeStyle = this.col;\n        this.ctx.moveTo(this.endPt.x, this.endPt.y);\n        if(this.ptArr.length > 0){\n            for(var i = 0; i < this.ptArr.length; i++){\n                this.ctx.lineTo(this.ptArr[i].x, this.ptArr[i].y);\n            }\n        }\n        this.ctx.lineTo(this.startPt.x, this.startPt.y);\n\n        this.ctx.lineTo(this.endPt.x, this.endPt.y);\n        this.ctx.stroke();\n        this.ctx.closePath();\n    }\n}\n\n// ================\nvar shape;\n\ninit();\nloop();\n\nfunction init(){\n    shape = new Shape(ctx, width/2, height/2);\n\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    shape.update();\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/1-illusion-of-life/21-undefined.js",
    "content": "window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame\n\n// ---------------------\n\nvar width, height, prevTime;\nvar mousePos;\nvar particleAnimation;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ---------------------\n\nvar Point = function(x, y){\n    this.x = this.origX = x;\n    this.y = this.origY = y;\n};\n\nvar AnimationPoint = function(ctx, x, y){\n    this.ctx = ctx;\n    this.x = this.origX = x;\n    this.y = this.origY = y;\n\n    this.isDraw = true;\n};\n\nAnimationPoint.prototype = {\n    rad1   : height/2 * .9,\n    theta1 : 0,\n\n    rad2   : 100,\n    theta2 : 0,\n\n    rad : 3,\n\n    update : function(){\n        this.theta1 += .04 * Math.random();\n        this.theta2 += Math.random() * .02;\n\n\n\n        this.x = this.origX + this.rad2 * Math.cos(this.theta2);\n        this.y = this.origY + this.rad1 * Math.sin(this.theta1);\n\n        if(this.isDraw) this.draw();\n    },\n\n    draw : function(){\n        this.ctx.beginPath();\n        this.ctx.fillStyle = '#000';\n        this.ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);\n        this.ctx.fill();\n        this.ctx.closePath();\n    }\n};\n\nvar AnimationPoint2 = function(ctx, x, y){\n    this.ctx = ctx;\n    this.x = this.origX = x;\n    this.y = this.origY = y;\n\n    this.isDraw = true;\n};\n\nAnimationPoint2.prototype = {\n    rad1   : width/2 * .9,\n    theta1 : 0,\n\n    rad2   : 200,\n    theta2 : 0,\n\n    rad : 3,\n\n    update : function(){\n        this.theta1 += .04 * Math.random();\n        this.theta2 += Math.random() * .02;\n\n        this.x = this.origX + this.rad1 * Math.cos(this.theta1) ;\n        this.y = this.origY + this.rad2 * Math.sin(this.theta2);\n\n        if(this.isDraw) this.draw();\n    },\n\n    draw : function(){\n        this.ctx.beginPath();\n        this.ctx.fillStyle = '#000';\n        this.ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);\n        this.ctx.fill();\n        this.ctx.closePath();\n    }\n};\n\n\n\nvar Particle = function(ctx, x, y){\n    this.ctx = ctx;\n    this.x = x;\n    this.y = y;\n    \n    this.vel = new Point(0, 0);\n}\n\nParticle.prototype = {\n    k   : .95,\n    col : '#fff',\n    update : function( dt, particleAnimation){\n        var acl\n        if(!this.isRandom) acl = particleAnimation.getPosition(this.x, this.y);\n        else               acl = this.random; \n        this.vel.x += acl.x * dt;\n        this.vel.y += acl.y * dt;\n        \n        this.vel.x *= this.k;\n        this.vel.y *= this.k;\n\n        this.x += this.vel.x * dt;\n        this.y += this.vel.y * dt;\n        \n        if(this.x < 0)     this.x = width;\n        if(this.x > width) this.x = 0;\n\n        if(this.y < 0)     this.y = height;\n        if(this.y > height)this.y = 0;\n\n        var col = parseInt(255 * this.x / width);\n        \n        this.ctx.beginPath();\n        this.ctx.fillStyle = 'hsl(' + col + ', 100%, 70%)';\n        this.ctx.arc(this.x, this.y, 1, 0, 2*Math.PI, false);\n        this.ctx.fill();\n        this.ctx.closePath();\n    },\n\n    randomStart : function(){\n        this.isRandom = true;\n        this.random = {x : 5000 * (Math.random() - .5), y: 5000 * (Math.random() - .5)};\n \n        \n    },\n\n    randomStop : function(){\n        this.isRandom = false;\n    }\n\n}\n\nvar Particles = function(ctx){\n    _.bindAll(this, 'interval');\n    this.ctx = ctx;\n    this.arr = [];\n\n    for(var i = 0; i < this.num; i++){\n        var particle = new Particle(ctx, width * Math.random(), height * Math.random());\n        this.arr.push(particle);\n    }\n\n    this.interval();\n    setInterval(this.interval, 4000);\n}\n\nParticles.prototype = {\n    num : 1000,\n    update : function(dt, particleAnimation){\n        for(var i = 0; i < this.num; i++){\n            this.arr[i].update(dt, particleAnimation);\n        }\n    },\n\n    interval : function(){\n        for(var i = 0; i < this.num; i++){\n            this.arr[i].randomStart();\n        }\n        \n        var self = this;\n        setTimeout(function(){\n            self.randomStop();\n        }, 500);\n    },\n\n    randomStop : function(){\n       for(var i = 0; i < this.num; i++){\n            this.arr[i].randomStop();\n        }\n    }\n    \n    \n};\n\nvar ParticleAnimation = function(ctx){\n    this.ctx = ctx;\n\n    this.gridWid = width / (this.gridNums - 1);\n    this.gridHig = height / (this.gridNums - 1);\n\n    this.range = this.gridWid * 3;\n\n    this.points = [];\n\n    for(var _x = 0; _x < this.gridNums; _x++){\n        for(var _y = 0; _y < this.gridNums; _y++){\n            var posX, posY, particle;\n            posX = this.gridWid * _x + this.gridWid/2; posY = this.gridHig * _y + this.gridHig/2;\n            particle = new Point(posX, posY)\n            this.points.push(particle);\n        }\n    }\n\n    this.animationPt = new AnimationPoint(this.ctx, width/2, height/2);\n    this.animationPt2 = new AnimationPoint2(this.ctx, width/2, height/2);\n\n    this.isDraw = true;\n};\n\nParticleAnimation.prototype = {\n    gridNums : 21,\n    points : [],\n    isDraw : false,\n    speed : 800,\n\n    update : function(){\n\n        this.animationPt.update();\n        this.animationPt2.update();\n\n        for(var i = 0; i < this.points.length; i++){\n            var dx, dy, distance;\n            var pointX1, pointY1, pointX2, pointY2;\n            var pointX, pointY;\n            var pt = this.points[i];\n\n            dx = this.animationPt.x - pt.x;\n            dy = this.animationPt.y - pt.y;\n\n            distance = Math.sqrt(dx * dx + dy * dy);\n            pt.x =  (pt.x - (dx / distance) * (this.range / distance) * this.speed) - ((pt.x - pt.origX) / 2);\n            pt.y =  (pt.y - (dy / distance) * (this.range / distance) * this.speed) - ((pt.y - pt.origY) / 2);\n\n        }\n\n        for(var i = 0; i < this.points.length; i++){\n            var dx, dy, distance;\n            var pointX1, pointY1, pointX2, pointY2;\n            var pointX, pointY;\n            var pt = this.points[i];\n\n            dx = this.animationPt2.x - pt.x;\n            dy = this.animationPt2.y - pt.y;\n\n            distance = Math.sqrt(dx * dx + dy * dy);\n            pt.x =  (pt.x - (dx / distance) * (this.range / distance) * this.speed) - ((pt.x - pt.origX) / 2);\n            pt.y =  (pt.y - (dy / distance) * (this.range / distance) * this.speed) - ((pt.y - pt.origY) / 2);\n\n        }\n        \n        // --------------\n\n        if(this.isDraw) this.draw();\n    },\n    \n    getPosition : function(x, y){\n        var xPos = parseInt(x / this.gridWid);\n        var yPos = parseInt(y / this.gridHig);\n\n       var arrayNum = xPos + yPos * this.gridNums;\n       var point = this.points[arrayNum];\n\n       var vector = {x : point.x - point.origX, y: point.y - point.origY};\n\n       return vector;\n    },\n\n    draw : function(){\n        this.ctx.strokeStyle = 'rgba(0, 0, 0, .1)';\n        for(var i = 0; i < this.points.length; i++){\n            var pt = this.points[i];\n            var dx = (pt.x - pt.origX)/20;\n            var dy = (pt.y - pt.origY)/20;\n            this.ctx.beginPath();\n            this.ctx.moveTo(pt.origX + dx, pt.origY + dy);\n            this.ctx.lineTo(pt.origX, pt.origY);\n            this.ctx.stroke();\n            this.ctx.closePath();\n        }\n    }\n};\n\n// ---------------------\n\nvar particles;\n\ninit();\nloop();\n\nfunction init(){\n    particles = new Particles(ctx);\n    particleAnimation = new ParticleAnimation(ctx);\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    var alp = .15 + .1 * Math.cos(curTime * .01);\n\n    ctx.fillStyle = 'rgba( 60, 60, 60,' + alp + ')';\n    ctx.fillRect(0, 0, width, height);\n\n    particleAnimation.update();\n    particles.update(duration, particleAnimation);\n\n    requestAnimationFrame(loop);\n}\n\ncanvas.addEventListener(\"mousemove\", function (evt) {\n    mousePos = {x: evt.clientX, y: evt.clientY};\n}, false);\n\n\n"
  },
  {
    "path": "app/scripts/1-illusion-of-life/22-sine-cos.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\nvar Point = function(theta){\n    this.theta = theta | 0;\n};\n\nPoint.prototype = {\n    rad : 10,\n    _theta : null,\n};\n\n\nObject.defineProperty(Point.prototype, 'theta', {\n    get : function(){\n        return this._theta;\n    },\n\n    set : function(val){\n        this._theta = val;\n        this.x = this.rad * Math.cos(this._theta);\n        this.y = this.rad * Math.sin(this._theta);\n    }\n});\n\nvar Line = function(ctx, x, y){\n    this.ctx = ctx;\n    this.x = x;\n    this.y = y;\n\n    this.theta = 0;\n\n    this.startPt = new Point(this.theta);\n    this.endPt   = new Point((this.theta + Math.PI));\n};\n\nLine.prototype = {\n    strokeCol : '#fff',\n\n    update : function(){\n        this.ctx.save();\n\n        this.ctx.translate(this.x, this.y);\n\n        this.ctx.beginPath();\n        this.ctx.fillStyle = this.strokeCol;\n\n        this.ctx.moveTo(this.startPt.x, this.startPt.y);\n        this.ctx.lineTo(this.endPt.x,   this.endPt.y);\n        this.ctx.stroke();\n\n        this.ctx.closePath();\n\n        this.ctx.restore();\n    }\n};\n\nvar LineCollection = function(ctx){\n    this.ctx = ctx;\n\n    this.widNum = parseInt(width / (Point.rad * 2)) + 1;\n    this.higNum = parseInt(height / (Point.rad * 2)) + 1;\n\n    this.lineArr = [];\n\n    for(var i = 0; i < this.widNum; i++){\n        var lineArr = [];\n        var x = Point.rad * ( 1 +  2 * i);\n        for(var j = 0;j < this.higNum; j++){\n            var y = Point.rad * (1 + 2 * j);\n            var line = new Line(this.ctx, x, y);\n\n            lineArr.push(line);\n        }\n        this.lineArr.push(lineArr);\n    }\n};\n\nLineCollection.prototype = {\n    lineArr: null,\n    widNum : null,\n    higNum : null,\n}\n\n\n// ================\n\ninit();\nloop();\n\nfunction init(){\n\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/1-illusion-of-life/22-undefined.js",
    "content": "window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame\n\n// ---------------------\n\n/**\n * Created with JetBrains WebStorm.\n * User: kenjisaito\n * Date: 12/14/12\n * Time: 3:41 PM\n * To change this template use File | Settings | File Templates.\n */\n\nvar Circle = function(rad, centerPoint){\n    this.rad = rad;\n    this.centerPoint = centerPoint;\n};\n\n//define the point class\n\nvar DelaunayDataSet = function( vertex, context){\n    this.vertex = vertex;\n    this.context = context;\n\n    this.fillTriangleColor = \"rgba(30, 30, 30, .2)\";\n    this.fillTriangleCheck = false;\n\n    this.strokeTriangleColor = \"rgba( 200, 200, 200, .05)\";\n    this.strokeTriangleCheck = true;\n};\n\nDelaunayDataSet.prototype.addPoints = function(ptArr){\n    for(var i = 0; i < ptArr.length; i++){\n        this.vertex.push(ptArr[i]);\n    }\n};\n\nDelaunayDataSet.prototype.drawTriangle = function(){\n\n    for (var i = 0; i < this.triangleVertexNumber.length; i += 3) {\n\n        if(this.triangleVertexNumber[i] !== 0 && this.triangleVertexNumber[i] !== 1 && this.triangleVertexNumber[i] !== 2 && this.triangleVertexNumber[i + 1] !== 0 && this.triangleVertexNumber[i + 1] !== 1 && this.triangleVertexNumber[i + 1] !== 2&& this.triangleVertexNumber[i + 2] !==  0&& this.triangleVertexNumber[i + 2] !== 1 && this.triangleVertexNumber[i + 2] !== 2){\n\n            this.context.beginPath();\n//        console.log(this.triangleVertexNumber[i]);\n\n            this.context.moveTo(this.vertex[this.triangleVertexNumber[i]].x, this.vertex[this.triangleVertexNumber[i]].y);\n//        console.log(this.triangleVertexNumber[i + 1]);\n            this.context.lineTo(this.vertex[this.triangleVertexNumber[i + 1]].x, this.vertex[this.triangleVertexNumber[i + 1]].y);\n//        console.log(this.triangleVertexNumber[i + 2]);\n            this.context.lineTo(this.vertex[this.triangleVertexNumber[i + 2]].x, this.vertex[this.triangleVertexNumber[i + 2]].y);\n            this.context.lineTo(this.vertex[this.triangleVertexNumber[i]].x, this.vertex[this.triangleVertexNumber[i]].y);\n\n            if (this.fillTriangleCheck) {\n                this.context.fillStyle = this.fillTriangleColor;\n                this.context.fill();\n            }\n\n            if (this.strokeTriangleCheck) {\n                this.context.strokeStyle = this.strokeTriangleColor;\n                this.context.stroke();\n            }\n\n            this.context.closePath();\n\n        }\n    }\n};\n\nDelaunayDataSet.prototype.update = function(){\n\n    var vertexNumber = this.vertex.length;\n    this.triangleVertexNumber = [ 0, 1, 2];\n    this.circumCircles = [];\n\n\n    var firstCircle = calculationCircle( this.vertex[0], this.vertex[1], this.vertex[2]);\n    this.circumCircles.push(firstCircle);\n\n    for(var i = 3; i < vertexNumber; i++){\n        calTriangles(this, i);\n        if(i > 3){\n            removeTriangle(this, i);\n        }\n    }\n\n};\n\n\n// define the method which is very useful\nfunction distanceBetweenPoints(pt1, pt2){\n    var dx = pt2.x - pt1.x;\n    var dy = pt2.y - pt1.y;\n\n    return  Math.sqrt(dx * dx + dy * dy);\n}\n\nfunction distanceBetweenPointAndCircle(pt, circle){\n    var dx = pt.x - circle.centerPoint.x;\n    var dy = pt.y - circle.centerPoint.y;\n\n    return  Math.sqrt(dx * dx + dy * dy);\n}\n\nfunction judgeBetweenDistance(_pt, _circle) {\n    var dis = distanceBetweenPointAndCircle(_pt, _circle);\n\n    var circleJudge = false;\n    if (dis < _circle.rad) {\n        circleJudge = true;\n    }\n\n    return circleJudge;\n}\n\n//this is the process of 3 ( separating of the triangles, add the circum circles, and deleting the extra triangle\nfunction calTriangles( _delaunayDataSet, num){\n    var newNumber = num;\n    var pt = _delaunayDataSet.vertex[newNumber];\n\n    var tempVertexNumber = [];\n    var tempCircles = [];\n    var tempNumbers =[];\n\n    for(var i = 0; i < _delaunayDataSet.circumCircles.length; i++){\n//        console.log(\"i: \" + i);\n        if(judgeBetweenDistance(pt, _delaunayDataSet.circumCircles[i])){\n            tempNumbers.push(i);\n\n            var selectingNum01 = _delaunayDataSet.triangleVertexNumber[3 * i];\n            var selectingNum02 = _delaunayDataSet.triangleVertexNumber[3 * i + 1];\n            var selectingNum03 = _delaunayDataSet.triangleVertexNumber[3 * i + 2];\n\n//                push the number to pointNumbers array\n            tempVertexNumber.push(selectingNum01);\n            tempVertexNumber.push(selectingNum02);\n            tempVertexNumber.push(newNumber);\n\n            tempVertexNumber.push(selectingNum02);\n            tempVertexNumber.push(selectingNum03);\n            tempVertexNumber.push(newNumber);\n\n            tempVertexNumber.push(selectingNum03);\n            tempVertexNumber.push(selectingNum01);\n            tempVertexNumber.push(newNumber);\n\n            var ct01circle1 = calculationCircle( _delaunayDataSet.vertex[selectingNum01], _delaunayDataSet.vertex[selectingNum02], _delaunayDataSet.vertex[newNumber]);\n            var ct01circle2 = calculationCircle( _delaunayDataSet.vertex[selectingNum02], _delaunayDataSet.vertex[selectingNum03], _delaunayDataSet.vertex[newNumber]);\n            var ct01circle3 = calculationCircle( _delaunayDataSet.vertex[selectingNum03], _delaunayDataSet.vertex[selectingNum01], _delaunayDataSet.vertex[newNumber]);\n\n            tempCircles.push(ct01circle1);\n            tempCircles.push(ct01circle2);\n            tempCircles.push(ct01circle3);\n        }\n    }\n\n    for(i = 0; i < tempVertexNumber.length; i++){\n        _delaunayDataSet.triangleVertexNumber.push(tempVertexNumber[i]);\n    }\n\n    for(i = 0; i < tempCircles.length; i++){\n        _delaunayDataSet.circumCircles.push(tempCircles[i]);\n    }\n\n    for (i = 0; i < tempNumbers.length; i++) {\n        var num = tempNumbers[i] - i;\n\n        var slicedObjectPtNumbers;\n        var slicedCircles;\n\n        if (num == 0) {\n            slicedObjectPtNumbers = _delaunayDataSet.triangleVertexNumber.slice(3);\n            slicedCircles = _delaunayDataSet.circumCircles.slice(1);\n        } else {\n            var slicedObjectPtNumberBefore = _delaunayDataSet.triangleVertexNumber.slice(0, 3 * num);\n            var slicedObjectPtNumberAfter = _delaunayDataSet.triangleVertexNumber.slice(3 * num + 3);\n            slicedObjectPtNumbers = slicedObjectPtNumberBefore.concat(slicedObjectPtNumberAfter);\n\n            var slicedCircleBefore = _delaunayDataSet.circumCircles.slice(0, num);\n            var slicedCircleAfter = _delaunayDataSet.circumCircles.slice(1 + num);\n            slicedCircles = slicedCircleBefore.concat(slicedCircleAfter);\n        }\n\n        _delaunayDataSet.triangleVertexNumber = slicedObjectPtNumbers;\n        _delaunayDataSet.circumCircles = slicedCircles;\n    }\n\n}\n\nfunction calculationCircle(pt01, pt02, pt03) {\n\n    var x1 = pt01.x;\n    var y1 = pt01.y;\n\n    var x2 = pt02.x;\n    var y2 = pt02.y;\n\n    var x3 = pt03.x;\n    var y3 = pt03.y;\n\n    var c = 2.0 * ((x2 - x1) * (y3 - y1) - (y2 - y1) * (x3 - x1));\n    var tempX = ((y3 - y1) * (x2 * x2 - x1 * x1 + y2 * y2 - y1 * y1) + (y1 - y2) * (x3 * x3 - x1 * x1 + y3 * y3 - y1 * y1)) / c;\n    var tempY = ((x1 - x3) * (x2 * x2 - x1 * x1 + y2 * y2 - y1 * y1) + (x2 - x1) * (x3 * x3 - x1 * x1 + y3 * y3 - y1 * y1)) / c;\n    var tempPt = new Point(tempX, tempY);\n\n    var tempRad = Math.sqrt(Math.pow(tempX - x1, 2) + Math.pow(tempY - y1, 2));\n\n    return new Circle(tempRad, tempPt);\n}\n\nfunction removeTriangle( _delaunayDataSet, tempVertexNum){\n    var circumcircleArrays = _delaunayDataSet.circumCircles;\n    var ommitCircumCircleNumbers = [];\n\n    for( var i = 0; i < circumcircleArrays.length;i++){\n        var vertexNum01 = _delaunayDataSet.triangleVertexNumber[i * 3];\n        var vertexNum02 = _delaunayDataSet.triangleVertexNumber[i * 3 + 1];\n        var vertexNum03 = _delaunayDataSet.triangleVertexNumber[i * 3 + 2];\n\n        for(var num = 0; num < tempVertexNum; num++){\n            if(num != vertexNum01 && num != vertexNum02 && num != vertexNum03){\n\n                if(judgeBetweenDistance(_delaunayDataSet.vertex[num], circumcircleArrays[i])){\n                    ommitCircumCircleNumbers.push(i);\n                    break;\n                }\n\n            }\n        }\n\n    }\n\n\n    //omit\n    var tempCircumCircleArray = [];\n    var tempTriagneNumberArray = [];\n\n    for( i = 0; i < circumcircleArrays.length; i++){\n        for(var j = 0; j < ommitCircumCircleNumbers.length; j++){\n            if(ommitCircumCircleNumbers[j] == i){\n                break;\n            }\n        }\n\n        if(j == ommitCircumCircleNumbers.length){\n\n            tempTriagneNumberArray.push( _delaunayDataSet.triangleVertexNumber[3 * i]);\n            tempTriagneNumberArray.push( _delaunayDataSet.triangleVertexNumber[3 * i + 1]);\n            tempTriagneNumberArray.push( _delaunayDataSet.triangleVertexNumber[3 * i + 2]);\n\n            tempCircumCircleArray.push( _delaunayDataSet.circumCircles[i]);\n        }\n    }\n\n\n\n//    console.log(\"tempTriagneNumberArray.length: \" + tempTriagneNumberArray.length);\n    _delaunayDataSet.triangleVertexNumber = [];\n    for( i = 0; i < tempTriagneNumberArray.length; i++){\n        _delaunayDataSet.triangleVertexNumber[i] = tempTriagneNumberArray[i];\n    }\n\n    _delaunayDataSet.circumCircles = [];\n    for( i = 0; i < tempCircumCircleArray.length; i++){\n        _delaunayDataSet.circumCircles[i] = tempCircumCircleArray[i];\n    }\n}\n\nfunction initTriangle(context, recWid, recHig, recTop, recLeft){\n    var vertex = [];\n\n    var bigRad = Math.sqrt(Math.pow(recWid, 2) + Math.pow(recHig, 2)) / 2;\n    var bigCirclePos = new Point(recWid / 2 + recLeft, recHig / 2 + recTop);\n\n    vertex.push(new Point(bigCirclePos.x - Math.sqrt(3) * bigRad, bigCirclePos.y - bigRad));\n    vertex.push(new Point(bigCirclePos.x + Math.sqrt(3) * bigRad, bigCirclePos.y - bigRad));\n    vertex.push(new Point(bigCirclePos.x, bigCirclePos.y + bigRad * 2));\n\n    var tempPt;\n    tempPt = new Point(0, 0);\n    vertex.push(tempPt);\n\n    tempPt = new Point( width, 0);\n    vertex.push(tempPt);\n\n    tempPt = new Point(0, height);\n    vertex.push(tempPt);\n\n    tempPt = new Point( width, height);\n    vertex.push(tempPt);\n\n//    setting DelaunayDataSet with the vertex.\n    return new DelaunayDataSet( vertex, context);\n}\n\nvar width, height, prevTime;\nvar mousePos;\nvar particleAnimation;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ---------------------\n\nvar Point = function(x, y){\n    this.x = this.origX = x;\n    this.y = this.origY = y;\n};\n\nvar AnimationPoint = function(ctx, x, y){\n    this.ctx = ctx;\n    this.x = this.origX = x;\n    this.y = this.origY = y;\n\n    this.isDraw = false;\n};\n\nAnimationPoint.prototype = {\n    rad1   : height/2 * .9,\n    theta1 : 0,\n\n    rad2   : 100,\n    theta2 : 0,\n\n    rad : 3,\n\n    update : function(){\n        this.theta1 += .04 * Math.random();\n        this.theta2 += Math.random() * .02;\n\n        this.x = this.origX + this.rad2 * Math.cos(this.theta2);\n        this.y = this.origY + this.rad1 * Math.sin(this.theta1);\n\n        if(this.isDraw) this.draw();\n    },\n\n    draw : function(){\n        this.ctx.beginPath();\n        this.ctx.fillStyle = '#000';\n        this.ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);\n        this.ctx.fill();\n        this.ctx.closePath();\n    }\n};\n\nvar AnimationPoint2 = function(ctx, x, y){\n    this.ctx = ctx;\n    this.x = this.origX = x;\n    this.y = this.origY = y;\n\n    this.isDraw = false;\n};\n\nAnimationPoint2.prototype = {\n    rad1   : width/2 * .9,\n    theta1 : 0,\n\n    rad2   : 200,\n    theta2 : 0,\n\n    rad : 3,\n\n    update : function(){\n        this.theta1 += .04 * Math.random();\n        this.theta2 += Math.random() * .02;\n\n        this.x = this.origX + this.rad1 * Math.cos(this.theta1) ;\n        this.y = this.origY + this.rad2 * Math.sin(this.theta2);\n\n        if(this.isDraw) this.draw();\n    },\n\n    draw : function(){\n        this.ctx.beginPath();\n        this.ctx.fillStyle = '#000';\n        this.ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);\n        this.ctx.fill();\n        this.ctx.closePath();\n    }\n};\n\n\n\nvar Particle = function(ctx, x, y){\n    this.ctx = ctx;\n    this.x = x;\n    this.y = y;\n    \n    this.vel = new Point(0, 0);\n}\n\nParticle.prototype = {\n    k   : .95,\n    col : '#fff',\n    update : function( dt, particleAnimation){\n        var acl\n        if(!this.isRandom) acl = particleAnimation.getPosition(this.x, this.y);\n        else               acl = this.random; \n        this.vel.x += acl.x * dt;\n        this.vel.y += acl.y * dt;\n        \n        this.vel.x *= this.k;\n        this.vel.y *= this.k;\n\n        this.x += this.vel.x * dt;\n        this.y += this.vel.y * dt;\n        \n        if(this.x < 0)     this.x = width;\n        if(this.x > width) this.x = 0;\n\n        if(this.y < 0)     this.y = height;\n        if(this.y > height)this.y = 0;\n\n        var col = parseInt(255 * this.x / width);\n        \n        this.ctx.beginPath();\n        this.ctx.fillStyle = 'hsl(' + col + ', 100%, 70%)';\n        this.ctx.arc(this.x, this.y, 1, 0, 2*Math.PI, false);\n        this.ctx.fill();\n        this.ctx.closePath();\n    },\n\n    randomStart : function(){\n        this.isRandom = true;\n        this.random = {x : 5000 * (Math.random() - .5), y: 5000 * (Math.random() - .5)};\n \n        \n    },\n\n    randomStop : function(){\n        this.isRandom = false;\n    }\n\n};\n\nvar Particles = function(ctx){\n    _.bindAll(this, 'interval');\n    this.ctx = ctx;\n    this.arr = [];\n\n    for(var i = 0; i < this.num; i++){\n        var particle = new Particle(ctx, width/2, height /2);\n        this.arr.push(particle);\n    }\n\n    this.interval();\n    setInterval(this.interval, 4000);\n};\n\nParticles.prototype = {\n    num : 100,\n    update : function(dt, particleAnimation){\n        for(var i = 0; i < this.num; i++){\n            this.arr[i].update(dt, particleAnimation);\n        }\n    },\n\n    interval : function(){\n        for(var i = 0; i < this.num; i++){\n            this.arr[i].randomStart();\n        }\n        \n        var self = this;\n        setTimeout(function(){\n            self.randomStop();\n        }, 500);\n    },\n\n    randomStop : function(){\n       for(var i = 0; i < this.num; i++){\n            this.arr[i].randomStop();\n        }\n    }\n    \n    \n};\n\nvar ParticleAnimation = function(ctx){\n    this.ctx = ctx;\n\n    this.gridWid = width / (this.gridNums - 1);\n    this.gridHig = height / (this.gridNums - 1);\n\n    this.range = this.gridWid * 3;\n\n    this.points = [];\n\n    for(var _x = 0; _x < this.gridNums; _x++){\n        for(var _y = 0; _y < this.gridNums; _y++){\n            var posX, posY, particle;\n            posX = this.gridWid * _x + this.gridWid/2; posY = this.gridHig * _y + this.gridHig/2;\n            particle = new Point(posX, posY)\n            this.points.push(particle);\n        }\n    }\n\n    this.animationPt = new AnimationPoint(this.ctx, width/2, height/2);\n    this.animationPt2 = new AnimationPoint2(this.ctx, width/2, height/2);\n\n};\n\nParticleAnimation.prototype = {\n    gridNums : 11,\n    points : [],\n    isDraw : false,\n    speed : 800,\n\n    update : function(){\n\n        this.animationPt.update();\n        this.animationPt2.update();\n\n        for(var i = 0; i < this.points.length; i++){\n            var dx, dy, distance;\n            var pointX1, pointY1, pointX2, pointY2;\n            var pointX, pointY;\n            var pt = this.points[i];\n\n            dx = this.animationPt.x - pt.x;\n            dy = this.animationPt.y - pt.y;\n\n            distance = Math.sqrt(dx * dx + dy * dy);\n            pt.x =  (pt.x - (dx / distance) * (this.range / distance) * this.speed) - ((pt.x - pt.origX) / 2);\n            pt.y =  (pt.y - (dy / distance) * (this.range / distance) * this.speed) - ((pt.y - pt.origY) / 2);\n\n        }\n\n        for(var i = 0; i < this.points.length; i++){\n            var dx, dy, distance;\n            var pointX1, pointY1, pointX2, pointY2;\n            var pointX, pointY;\n            var pt = this.points[i];\n\n            dx = this.animationPt2.x - pt.x;\n            dy = this.animationPt2.y - pt.y;\n\n            distance = Math.sqrt(dx * dx + dy * dy);\n            pt.x =  (pt.x - (dx / distance) * (this.range / distance) * this.speed) - ((pt.x - pt.origX) / 2);\n            pt.y =  (pt.y - (dy / distance) * (this.range / distance) * this.speed) - ((pt.y - pt.origY) / 2);\n        }\n\n \n        if(mousePos){\n            for(var i = 0; i < this.points.length; i++){\n                var dx, dy, distance;\n                var pointX1, pointY1, pointX2, pointY2;\n                var pointX, pointY;\n                var pt = this.points[i];\n\n                dx = mousePos.x - pt.x;\n                dy = mousePos.y - pt.y;\n\n                distance = Math.sqrt(dx * dx + dy * dy);\n                pt.x =  (pt.x - (dx / distance) * (this.range / distance) * this.speed * 5) - ((pt.x - pt.origX) / 2);\n                pt.y =  (pt.y - (dy / distance) * (this.range / distance) * this.speed * 5) - ((pt.y - pt.origY) / 2);\n\n            }\n        }\n        // --------------\n\n        if(this.isDraw) this.draw();\n    },\n    \n    getPosition : function(x, y){\n        var xPos = parseInt(x / this.gridWid);\n        var yPos = parseInt(y / this.gridHig);\n\n       var arrayNum = xPos + yPos * this.gridNums;\n       var point = this.points[arrayNum];\n\n       var vector = {x : point.x - point.origX, y: point.y - point.origY};\n\n       return vector;\n    },\n\n    draw : function(){\n        this.ctx.strokeStyle = 'rgba(0, 0, 0, .1)';\n        for(var i = 0; i < this.points.length; i++){\n            var pt = this.points[i];\n            var dx = (pt.x - pt.origX)/20;\n            var dy = (pt.y - pt.origY)/20;\n            this.ctx.beginPath();\n            this.ctx.moveTo(pt.origX + dx, pt.origY + dy);\n            this.ctx.lineTo(pt.origX, pt.origY);\n            this.ctx.stroke();\n            this.ctx.closePath();\n        }\n    }\n};\n\n// ---------------------\n\nvar delaunay;\nvar particles;\n\ninit();\nloop();\n\nfunction init(){\n    delaunay = initTriangle(ctx, width, height, 0, 0);\n    particles = new Particles(ctx);\n\n    ctx.fillStyle = 'rgba( 60, 60, 60,.5)';\n    ctx.fillRect(0, 0, width, height);\n\n    particleAnimation = new ParticleAnimation(ctx);\n\n    delaunay.addPoints(particles.arr);\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    var alp = .15 + .1 * Math.cos(curTime * .01);\n\n    ctx.fillStyle = 'rgba( 60, 60, 60,' + alp + ')';\n    ctx.fillRect(0, 0, width, height);\n\n    particleAnimation.update();\n    particles.update(duration, particleAnimation);\n    delaunay.update();\n    delaunay.drawTriangle();\n\n    requestAnimationFrame(loop);\n}\n\ncanvas.addEventListener(\"mousemove\", function (evt) {\n    mousePos = {x: evt.clientX, y: evt.clientY};\n}, false);\n\n\n"
  },
  {
    "path": "app/scripts/1-illusion-of-life/23-undefined.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\n\nvar Shape = function( ctx, x, y){\n    this.ctx = ctx;\n\n    this.x = x;\n    this.y = y;\n\n    this.circlrRawArr = [];\n\n    var minRad = 30;\n    var maxRad = Math.min(width, height) / 2 * .9;\n\n    for(var i = 0; i < this.circlrRawNum; i++){\n        var theta = 2 * Math.PI * i / this.circlrRawNum;\n        var circleRaw = new CircleRaw( ctx, minRad, maxRad, theta);\n        this.circlrRawArr.push(circleRaw);\n    }\n};\n\nShape.prototype = {\n    circlrRawArr : null,\n    circlrRawNum : 60,\n    update : function(){\n       this.ctx.save();\n       this.ctx.translate(this.x, this.y);\n       \n       for(var i = 0; i < this.circlrRawNum; i++){\n           var circleRaw = this.circlrRawArr[i];\n           circleRaw.update();\n       }\n\n       this.ctx.restore();\n    }\n};\n\nvar CircleRaw = function( ctx, minRad, maxRad, theta){\n    var difRad;\n    this.ctx = ctx;\n\n    this.rad = {min : minRad, max: maxRad};\n    difRad = (maxRad - minRad); \n    this.theta = theta;\n\n    this.circleArr = [];\n    \n    for(var i = 0; i < this.rawNum; i++){\n        var rate = i / this.rawNum;\n        var curRad = difRad * rate + minRad; \n\n        var circle = new Circle( this.ctx, this.theta, curRad, maxRad);\n        this.circleArr.push(circle);\n    }\n\n    this.count = theta;\n}\n\nCircleRaw.prototype = {\n    rate   : 0,\n    rawNum : 20,\n    count  : 0,\n    update : function(){ \n       this.count += 0.04; \n\n        for( var i = 0; i < this.rawNum; i++){\n            var circle = this.circleArr[i];\n            circle.update(this.count);\n        }\n    }\n}\n\nvar Circle = function( ctx, theta,  minRad, maxRad ){\n    this.ctx = ctx;\n    \n    this.theta = theta;\n    this.curRad = minRad;\n    this.minRad = minRad;\n    this.maxRad = maxRad;\n    this.difRad = (this.maxRad - this.minRad);\n};\n\nCircle.prototype = {\n    col : '#fff',\n    rad : 2,\n\n    update : function(count){\n        var rate = ( 1 + Math.sin(count))/2 * .8;\n        // var otherRate  = (1 + Math.cos(count * 2))/2;\n        // var otherRate2 = (1 + Math.sin(count * 4))/2;\n\n        var rad  = this.difRad  * rate + this.minRad;\n        \n        \n        var xPos = rad * Math.cos(this.theta);\n        var yPos = rad * Math.sin(this.theta);\n\n        var col = parseInt(100 + 155 * rate);\n\n        this.ctx.beginPath();\n        this.ctx.fillStyle = 'rgb( ' + col + ', ' + col + ', ' + col + ')';\n        this.ctx.arc( xPos, yPos, this.rad, 0, 2 * Math.PI, false);\n        this.ctx.fill();\n        this.ctx.closePath();\n    }\n};\n\n// ================\nvar shape;\n\ninit();\nloop();\n\nfunction init(){\n    shape = new Shape( ctx, width/2, height/2);\n\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    shape.update();\n\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/1-illusion-of-life/3-stage.js",
    "content": "function backingScale(context) {\n    if ('devicePixelRatio' in window) {\n        if (window.devicePixelRatio > 1) {\n            return window.devicePixelRatio;\n        }\n    }\n    return 1;\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\nvar width, height, previousTime;\nvar side1, side2;\nvar rect, rect1, rect2;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar scaleFactor = backingScale(ctx);\n\nvar Rect = function( ctx, i, x ){\n    var self = this;\n\n    this.ctx = ctx;\n    this.x = x;\n    this.y = 0;\n\n    this.i = i;\n\n    this.y2 =  window.innerHeight* scaleFactor - i * this.height3;\n    this.height2 =  this.y2 *0.8;\n\n    this.wid = this.width1;\n    this.hig = this.height1;\n\n    setTimeout(function(){\n        self.verticalAnimation();\n    }, 500 * this.i);\n\n\n};\n\nRect.prototype = {\n    color : '#fff',\n\n    width1 : 50* scaleFactor,\n    width2 : 90* scaleFactor,\n\n    height1 : 50* scaleFactor,\n    height2 : null,\n    height3 : 30* scaleFactor,\n\n    rad1 : 80 * scaleFactor,\n    rad2 : 105 * scaleFactor,\n\n    y2: null,\n\n    duration1 : 0.4,\n    duration2 : 0.3,\n    duration3 : 0.2,\n\n    lineRate1 : 0,\n    lineRate2 : 0,\n\n    isStage : false,\n\n    reset : function(){\n        if(this.color == '#fff') this.color = '#333';\n        else                     this.color = '#fff';\n\n        var self = this;\n        this.y = 0;\n\n        this.y2 =  window.innerHeight* scaleFactor - this.i * this.height3;\n        this.height2 =  this.y2 *0.8;\n\n        this.wid = this.width1;\n        this.hig = this.height1;\n\n        setTimeout(function(){\n            self.verticalAnimation();\n        }, 400 * this.i);\n    },\n\n    verticalAnimation : function(){\n        var self = this;\n\n        this.lineRate1 = 0;\n        this.lineRate2 = 0;\n\n        TweenLite.to(this, this.duration1, {hig: this.height2, y: this.height2, ease: Power2.easeIn});\n        TweenLite.to(this, this.duration2, {y: this.y2, delay: this.duration1 });\n        TweenLite.to(this, this.duration2, {wid: this.width2, hig : this.height3, delay: this.duration1 });\n\n        TweenLite.to(this, this.duration3, {lineRate1 : 1, delay: this.duration1 + this.duration2, ease: Power3.easeInOut });\n        TweenLite.to(this, this.duration3, {lineRate2 : 1, delay: this.duration1 + this.duration2, ease: Power3.easeOut });\n\n        setTimeout(function(){\n            self.isStage = true;\n        }, (this.duration1 + this.duration2) * 1000 );\n        setTimeout(function(){\n            self.isStage = false;\n        }, (this.duration1 + this.duration2 + this.duration3) * 1000 );\n    },\n\n    draw : function(){\n        this.ctx.beginPath();\n\n        this.ctx.fillStyle   = this.color;\n        this.ctx.lineWidth   = 3;\n\n        this.ctx.save();\n\n        this.ctx.translate(this.x, this.y);\n        this.ctx.fillRect(- this.wid / 2, -this.hig, this.wid, this.hig);\n        this.ctx.closePath();\n\n\n        if(this.isStage){\n            for(var ii = 0; ii < 7; ii++){\n                var theta = (190 + 25 * ii)/180 * Math.PI;\n\n                var rad1 = (this.rad2 - this.rad1) * this.lineRate1 + this.rad1;\n                var rad2 = (this.rad2 - this.rad1) * this.lineRate2 + this.rad1;\n\n                var x1 = Math.cos(theta) * rad1;\n                var y1 = Math.sin(theta) * rad1;\n\n                var x2 = Math.cos(theta) * rad2;\n                var y2 = Math.sin(theta) * rad2;\n\n                this.ctx.strokeStyle = '#999';\n                this.ctx.beginPath();\n                this.ctx.moveTo(x1, y1);\n                this.ctx.lineTo(x2, y2);\n                this.ctx.stroke();\n                this.ctx.closePath();\n            }\n        }\n\n        this.ctx.restore();\n    }\n};\n\n// ---------------\n\n\nwidth  = window.innerWidth * scaleFactor;\nheight = window.innerHeight * scaleFactor;\n\nside1 = 100;\nside2 = 180;\n\nvar duration1 = .8;\nvar duration2 = .6;\n\ncanvas.width  = width;\ncanvas.height = height;\nvar isReset = false;\nvar resetColor = '#333';\nvar rectWidth = 90 * scaleFactor;\nvar rects = [];\nvar rectNumber = parseInt(window.innerHeight / 30) + 1;\n\ninit();\n\nloop();\n\n\nfunction init(){\n\n    for(var i = 0; i < rectNumber; i++){\n        var rectangle = new Rect( ctx, i, width/2);\n        rects.push(rectangle);\n    }\n\n    setTimeout(function(){\n        reset()\n    }, 500 * rectNumber + 500);\n}\n\nfunction reset(){\n    isReset = true;\n\n    if(resetColor == '#fff') resetColor = '#333';\n    else                     resetColor = '#fff';\n\n\n    for(var i = 0; i < rectNumber; i++){\n        rects[i].reset();\n    }\n\n    setTimeout(function(){\n        reset()\n    }, 500 * rectNumber + 1000);\n}\n\nfunction loop(){\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    if(isReset){\n        ctx.fillStyle = resetColor;\n        ctx.fillRect((width - rectWidth)/2, 0, rectWidth, height);\n    }\n\n    for(var i = 0; i < rectNumber; i++){\n        rects[i].draw();\n    }\n\n    requestAnimationFrame(loop);\n}"
  },
  {
    "path": "app/scripts/1-illusion-of-life/4-anticipation.js",
    "content": "function backingScale(context) {\n    if ('devicePixelRatio' in window) {\n        if (window.devicePixelRatio > 1) {\n            return window.devicePixelRatio;\n        }\n    }\n    return 1;\n}\n\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\nvar width, height, previousTime;\nvar side1, side2;\nvar rect, rect1, rect2;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar scaleFactor = backingScale(ctx);\n\nvar Rect = function( ctx, i, x ){\n    var self = this;\n\n    this.ctx = ctx;\n    this.x = x;\n    this.y = 0;\n\n    this.i = i;\n\n    this.originX = x;\n\n    this.wid = this.width1;\n    this.hig = this.height1;\n\n    if((i % 2) == 0 ){\n        setTimeout(function(){\n            self.anticipationAnimation();\n        }, 7 * 1000 * this.duration1);\n\n    }else{\n        this.anticipationAnimation();\n    }\n\n\n};\n\nRect.prototype = {\n    color : '#aaa',\n    x     : null,\n    y     : null,\n\n    width1 : 10 * scaleFactor,\n    width2 : 5 * scaleFactor,\n    width3 : window.innerWidth / 10 * scaleFactor,\n\n    height1 : window.innerHeight* scaleFactor,\n\n    originX : null,\n\n    y2: null,\n\n    duration1 : 0.3,\n    duration2 : 0.3,\n    duration3 : 0.3,\n\n    lineRate1 : 0,\n    lineRate2 : 0,\n\n    isStage : false,\n\n    reset : function(){\n        if(this.color == '#fff') this.color = '#333';\n        else                     this.color = '#fff';\n\n        var self = this;\n        this.y = 0;\n\n        this.y2 =  window.innerHeight* scaleFactor - this.i * this.height3;\n        this.height2 =  this.y2 *0.8;\n\n        this.wid = this.width1;\n        this.hig = this.height1;\n\n    },\n\n\n    anticipationAnimation : function(){\n        var scaleX1 = 20 * scaleFactor;\n        var scaleX2 = 20 * scaleFactor;\n        var scaleX3 = 60 * scaleFactor;\n\n        this.originX = this.x;\n        if(this.originX < 0){\n            this.x = window.innerWidth * scaleFactor - this.originX;\n            this.originX = this.x;\n        }\n\n        TweenLite.to(this, this.duration1, { x: this.originX - scaleX1, ease: Power3.easeInOut });\n        TweenLite.to(this, this.duration1, { x: this.originX + scaleX1, delay: this.duration1, ease: Power3.easeInOut});\n        TweenLite.to(this, this.duration2, { x: this.originX - scaleX2, delay: this.duration1 * 2, ease: Power3.easeInOut});\n        TweenLite.to(this, this.duration3, { x: this.originX + scaleX3, delay: this.duration1 * 2 + this.duration2, ease: Power3.easeInOut});\n\n        TweenLite.to(this, this.duration3, { wid: this.width2,  x: this.originX + scaleX3 + (this.width1 - this.width2)/2 ,delay: this.duration1 * 4});\n        TweenLite.to(this, this.duration3, { wid: this.width3,  x: this.originX + scaleX3 + (this.width1 - this.width3)/2 ,delay: this.duration1 * 5, ease: Power3.easeInOut});\n        TweenLite.to(this, this.duration3, { wid: this.width1,  x: this.originX + scaleX3 + (this.width1 - this.width3) ,delay: this.duration1 * 6, ease: Power3.easeInOut});\n\n\n        var self = this;\n        setTimeout(function(){\n            self.anticipationAnimation();\n        }, this.duration1 * 14 * 1000);\n    },\n\n    verticalAnimation : function(){\n        var self = this;\n\n        this.lineRate1 = 0;\n        this.lineRate2 = 0;\n\n        TweenLite.to(this, this.duration1, {hig: this.height2, y: this.height2, ease: Power2.easeIn});\n        TweenLite.to(this, this.duration2, {y: this.y2, delay: this.duration1 });\n        TweenLite.to(this, this.duration2, {wid: this.width2, hig : this.height3, delay: this.duration1 });\n\n        TweenLite.to(this, this.duration3, {lineRate1 : 1, delay: this.duration1 + this.duration2, ease: Power3.easeInOut });\n        TweenLite.to(this, this.duration3, {lineRate2 : 1, delay: this.duration1 + this.duration2, ease: Power3.easeOut });\n\n        setTimeout(function(){\n            self.isStage = true;\n        }, (this.duration1 + this.duration2) * 1000 );\n        setTimeout(function(){\n            self.isStage = false;\n        }, (this.duration1 + this.duration2 + this.duration3) * 1000 );\n    },\n\n    draw : function(){\n        this.ctx.beginPath();\n\n        this.ctx.fillStyle   = this.color;\n        this.ctx.lineWidth   = 3;\n\n        this.ctx.save();\n\n        this.ctx.translate(this.x, this.y);\n        this.ctx.fillRect(- this.wid / 2, 0, this.wid, this.hig);\n        this.ctx.closePath();\n\n\n        if(this.isStage){\n            for(var ii = 0; ii < 7; ii++){\n                var theta = (190 + 25 * ii)/180 * Math.PI;\n\n                var rad1 = (this.rad2 - this.rad1) * this.lineRate1 + this.rad1;\n                var rad2 = (this.rad2 - this.rad1) * this.lineRate2 + this.rad1;\n\n                var x1 = Math.cos(theta) * rad1;\n                var y1 = Math.sin(theta) * rad1;\n\n                var x2 = Math.cos(theta) * rad2;\n                var y2 = Math.sin(theta) * rad2;\n\n                this.ctx.strokeStyle = '#999';\n                this.ctx.beginPath();\n                this.ctx.moveTo(x1, y1);\n                this.ctx.lineTo(x2, y2);\n                this.ctx.stroke();\n                this.ctx.closePath();\n            }\n        }\n\n        this.ctx.restore();\n    }\n};\n\n// ---------------\n\n\nwidth  = window.innerWidth * scaleFactor;\nheight = window.innerHeight * scaleFactor;\n\nside1 = 100;\nside2 = 180;\n\nvar duration1 = .8;\nvar duration2 = .6;\n\ncanvas.width  = width;\ncanvas.height = height;\n\nvar rectangle;\nvar isReset = false;\nvar resetColor = '#333';\nvar rectWidth = 90 * scaleFactor;\nvar rects = [];\nvar rectNumber = parseInt(window.innerHeight / 30) + 1;\nvar num = 40;\n\ninit();\n\nloop();\n\n\nfunction init(){\n    for(var i = 0; i < num; i++){\n        rectangle = new Rect( ctx, i, width * (i + 1) / (num + 1));\n        rects.push(rectangle);\n    }\n\n\n}\n\nfunction loop(){\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    for(var i = 0; i < num; i++){\n        rects[i].draw();\n    }\n\n    requestAnimationFrame(loop);\n}\n"
  },
  {
    "path": "app/scripts/1-illusion-of-life/5-pose-to-pos.js",
    "content": "function backingScale(context) {\n    if ('devicePixelRatio' in window) {\n        if (window.devicePixelRatio > 1) {\n            return window.devicePixelRatio;\n        }\n    }\n    return 1;\n}\n\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\nvar width, height, previousTime;\nvar side1, side2;\nvar rect, rect1, rect2;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar scaleFactor = backingScale(ctx);\n\nvar Form = function( ctx, x, y, rad ){\n    _.bindAll(this, 'onUpdateTween', 'onCompleteTween');\n\n    this.ctx = ctx;\n    this.x   = x;\n    this.y   = y;\n    this.rad = rad;\n\n    this.triangle();\n    this.rect();\n    this.circle();\n\n\n\n    this.formType = {\n        'triangle'  : this.trianglePts,\n        'rectangle' : this.rectanglePts,\n        'circle'    : this.circlePts\n    };\n\n    this.curType = 'circle';\n\n    for(var i = 0; i < this.ptNumber; i++){\n        this.pts[i] = {x: this.x, y: this.y}\n    }\n};\n\n\nForm.prototype = {\n    color : '#fff',\n    ptNumber : 120,\n    pts : [],\n\n    oldPts : [],\n\n    trianglePts  : [],\n    rectanglePts : [],\n    circlePts    : [],\n\n    rate : 0,\n\n    transform : function(toType){\n        this.rate = 0;\n        this.toType   = toType;\n\n        TweenLite.to(this,.6, { rate: 1, ease: Power2.easeInOut, onComplete: this.onCompleteTween, onUpdate: this.onUpdateTween });\n    },\n\n    onUpdateTween : function(){\n\n        for(var i = 0;i < this.ptNumber; i++){\n            this.pts[i].x = ( 1- this.rate) * this.formType[this.curType][i].x + this.rate * this.formType[this.toType][i].x;\n            this.pts[i].y = ( 1- this.rate) * this.formType[this.curType][i].y + this.rate * this.formType[this.toType][i].y;\n        }\n    },\n\n    onCompleteTween : function(){\n        for(var i = 0;i < this.ptNumber; i++){\n            this.pts[i].x = this.formType[this.toType][i].x;\n            this.pts[i].y = this.formType[this.toType][i].y;\n        }\n\n        this.curType = this.toType;\n    },\n\n    triangle : function(){\n        var x, y, rate, pt;\n\n        var pt0 = { x : this.rad * Math.cos(30 / 180 * Math.PI), y : this.rad * Math.sin(30 / 180 * Math.PI)};\n        var pt1 = { x : this.rad * Math.cos(150 / 180 * Math.PI), y : this.rad * Math.sin(150 / 180 * Math.PI)};\n        var pt2 = { x : this.rad * Math.cos(270 / 180 * Math.PI), y : this.rad * Math.sin(270/ 180 * Math.PI)};\n\n        for(var i = 0; i < this.ptNumber; i++){\n\n            if(i < this.ptNumber / 6){\n                rate = .5 + i / (this.ptNumber / 6) * .5;\n                x = pt0.x * (1 - rate) + pt1.x * rate;\n                y = pt0.y * (1 - rate) + pt1.y * rate;\n            }else if(i >= this.ptNumber /6 && i < this.ptNumber / 2){\n                rate = (i - this.ptNumber/6) / (this.ptNumber / 3);\n                x = pt1.x * (1 - rate) + pt2.x * rate;\n                y = pt1.y * (1 - rate) + pt2.y * rate;\n            }else if(i >= this.ptNumber /2 && i < this.ptNumber * 5 /6){\n                rate = (i - this.ptNumber/2) / (this.ptNumber / 3);\n                x = pt2.x * (1 - rate) + pt0.x * rate;\n                y = pt2.y * (1 - rate) + pt0.y * rate;\n            }else{\n                rate = (i - this.ptNumber * 5/6) / (this.ptNumber / 3);\n                x = pt0.x * (1 - rate) + pt1.x * rate;\n                y = pt0.y * (1 - rate) + pt1.y * rate;\n            }\n\n\n            pt = {x : x + this.x, y: y + this.y};\n            this.trianglePts.push(pt);\n        }\n\n    },\n\n    rect : function(){\n        var theta, pt;\n\n        var side = this.rad * Math.cos(45 / 180 * Math.PI);\n\n        for(var i = 0; i < this.ptNumber; i++){\n            if(i < this.ptNumber / 8){\n                pt = {x : side , y : side * i / (this.ptNumber / 8) };\n            }else if(i >= this.ptNumber/8 && i < this.ptNumber * 3 / 8){\n                pt = {x : side - side * (i - this.ptNumber / 8) / (this.ptNumber / 8), y : side };\n            }else if( i >= this.ptNumber * 3 / 8 && i < this.ptNumber * 5 / 8) {\n                pt = {x : -side , y : side - side * (i - 3 * this.ptNumber / 8) / (this.ptNumber / 8) };\n            }else if( i >= this.ptNumber * 5 / 8 && i < this.ptNumber * 7 / 8) {\n                pt = {x :-side + side * (i - 5 * this.ptNumber / 8) / (this.ptNumber / 8), y: -side};\n            }else{\n                pt = {x : side, y : -side + side * (i - 7 * this.ptNumber / 8) / (this.ptNumber / 8)};\n            }\n\n            pt.x += this.x;\n            pt.y += this.y;\n\n            this.rectanglePts.push(pt);\n        }\n\n    },\n\n\n    circle : function(){\n        var theta, pt;\n\n        this.nextPts = [];\n\n        for(var i = 0; i < this.ptNumber; i++){\n            theta = i / this.ptNumber * 2 * Math.PI;\n            pt = {x : this.rad * Math.cos(theta) + this.x, y : this.rad * Math.sin(theta) + this.y};\n            this.circlePts[i] = pt;\n        }\n    },\n\n    draw : function(){\n\n        this.ctx.fillStyle = this.color;\n\n        this.ctx.beginPath();\n\n        this.ctx.moveTo(this.pts[0].x, this.pts[0].y);\n\n        for(var i =  1; i < this.pts.length; i++){\n            this.ctx.lineTo(this.pts[i].x, this.pts[i].y);\n        }\n\n        this.ctx.fill();\n        this.ctx.closePath();\n\n    },\n\n};\n\n\n// ---------------\n\n\nwidth  = window.innerWidth * scaleFactor;\nheight = window.innerHeight * scaleFactor;\n\nside1 = 100;\nside2 = 180;\n\nvar duration1 = .8;\nvar duration2 = .6;\n\nvar types = ['triangle','rectangle', 'circle'];\n\ncanvas.width  = width;\ncanvas.height = height;\n\nvar form;\n\ninit();\n\nloop();\n\n\nfunction init(){\n    form = new Form(ctx, width / 2, height / 2, Math.sqrt( width* width /20+ height * height / 20));\n\n    var nextType = form.curType;\n    while(nextType == form.curType){\n        nextType = types[parseInt(types.length * Math.random())];\n    }\n\n    console.log(nextType);\n\n    form.transform(nextType);\n\n    setInterval(function(){\n        var nextType = form.curType;\n        while(nextType == form.curType){\n            nextType = types[parseInt(types.length * Math.random())];\n        }\n\n        form.transform(nextType);\n    }, 800);\n}\n\n\n\nfunction loop(){\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    form.draw();\n\n    requestAnimationFrame(loop);\n}\n"
  },
  {
    "path": "app/scripts/1-illusion-of-life/6-pose-to-pose.js",
    "content": "function backingScale(context) {\n    if ('devicePixelRatio' in window) {\n        if (window.devicePixelRatio > 1) {\n            return window.devicePixelRatio;\n        }\n    }\n    return 1;\n}\n\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\nvar width, height, previousTime;\nvar side1, side2;\nvar rect, rect1, rect2;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar scaleFactor = backingScale(ctx);\n\nvar Forms = function(ctx, x, y){\n    _.bindAll(this, 'onUpdateInitTween', 'onCompleteInitTween', 'onUpdateIncrementTween', 'onCompleteIncrementTween', 'increment');\n\n    this.MAX_RAD = Math.min(window.innerWidth / 3, window.innerHeight / 3);\n    this.ctx = ctx;\n    this.x   = x;\n    this.y   = y;\n\n    this.currentNumber =   0;\n    this.pointNumber = 288 * 3;\n    this.numberArr = [1, 4, 9, 16];\n\n    this.isTransfrom = false;\n\n    this.initialize();\n\n    this.pts = [];\n\n    //types = ['triangle','rectangle', 'circle'];\n\n    this.formType = {\n        'triangle'  : this.trianglePts,\n        'rectangle' : this.rectanglePts,\n        'circle'    : this.circlePts\n    };\n\n    this.currentType = ['circle'];\n\n    for(var i = 0; i < this.pointNumber; i++){\n        this.pts[i] = {x: this.x, y: this.y}\n    };\n};\n\nForms.prototype = {\n    color : '#fff',\n\n    trianglePts  : [],\n    rectanglePts : [],\n    circlePts    : [],\n\n    initialize : function(){\n        this.initializeCircle();\n\n        this.initializeAnimation();\n    },\n\n\n\n    initializeCircle : function(){\n        var side, number, pointNumber, rad, centerPoint;\n        var points, theta, pt;\n        var arr = this.numberArr;\n\n        for(var i = 0; i < arr.length; i++){\n            number = this.numberArr[i];\n            side = Math.sqrt(arr[i]);\n            rad = this.MAX_RAD / side;\n            pointNumber = this.pointNumber / side;\n\n\n            // 1 2 3 4\n            points = [];\n            console.log(this.x);\n            console.log(side);\n            for(var x = 0; x < side; x++){\n                for(var y = 0; y < side; y++){\n                    var center = (side - 1)/ 2;\n                    centerPoint = { x : this.x + 2 * rad * (x - center), y : this.y + 2 * rad * (y - center) };\n\n                    for(var j = 0; j < (this.pointNumber / number); j++){\n                        theta = j / (this.pointNumber / number) * 2 * Math.PI;\n                        pt = {x : rad * Math.cos(theta) + centerPoint.x, y : rad * Math.sin(theta) + centerPoint.y};\n                        points.push(pt);\n                    }\n                }\n            }\n            this.circlePts.push(points);\n        }\n\n    },\n\n    initializeAnimation : function(){\n        this.rate = 01\n        this.toType   = 'circle';\n\n\n        TweenLite.to(this,.6, { rate: 0, ease: Power2.easeInOut, onComplete: this.onCompleteInitTween, onUpdate: this.onUpdateInitTween });\n    },\n\n    onUpdateInitTween : function(){\n\n        for(var i = 0;i < this.pointNumber; i++){\n            this.pts[i].x = (1-this.rate) * this.formType[this.toType][this.currentNumber][i].x + (this.rate) * this.x;\n            this.pts[i].y = (1-this.rate) * this.formType[this.toType][this.currentNumber][i].y + (this.rate) * this.y;\n        }\n    },\n\n    onCompleteInitTween : function(){\n        for(var i = 0;i < this.pointNumber; i++){\n            this.pts[i].x = this.formType[this.toType][this.currentNumber][i].x;\n            this.pts[i].y = this.formType[this.toType][this.currentNumber][i].y;\n        }\n\n        this.curType = this.toType;\n\n        var self = this;\n        setTimeout(function(){\n            self.increment();\n        }, 300);\n    },\n\n\n    increment : function(){\n        this.currentNumber = (this.currentNumber + 1) % this.numberArr.length ;\n\n        this.isTransfrom = true;\n\n        this.rate = 0;\n        TweenLite.to(this, .6, { rate: 1, ease: Power2.easeInOut, onComplete: this.onCompleteIncrementTween, onUpdate: this.onUpdateIncrementTween });\n    },\n\n    onUpdateIncrementTween : function(){\n        var prevNumber = this.currentNumber - 1;\n        if(prevNumber < 0) prevNumber += this.numberArr.length;\n\n        for(var i = 0;i < this.pointNumber; i++){\n            this.pts[i].x = this.rate * this.formType[this.toType][this.currentNumber][i].x + (1 - this.rate) * this.formType[this.toType][prevNumber][i].x;\n            this.pts[i].y = this.rate * this.formType[this.toType][this.currentNumber][i].y + (1 - this.rate) * this.formType[this.toType][prevNumber][i].y;\n        }\n    },\n\n    onCompleteIncrementTween : function(){\n        this.isTransfrom = false;\n        for(var i = 0;i < this.pointNumber; i++){\n            this.pts[i].x = this.formType[this.toType][this.currentNumber][i].x;\n            this.pts[i].y = this.formType[this.toType][this.currentNumber][i].y;\n        }\n\n        TweenLite.to(this, .6, { rate: 0, ease: Power2.easeInOut, onComplete: this.increment});\n    },\n\n    draw : function(){\n\n\n\n        if(this.isTransfrom){\n\n            var previousNumber = this.currentNumber - 1;\n            if(previousNumber < 0) previousNumber += this.numberArr.length;\n\n            currentNumber = this.numberArr[previousNumber];\n            inc           = this.pointNumber / currentNumber;\n\n            for(var i = 0; i < this.pointNumber  ; i+= inc){\n                this.ctx.fillStyle = 'rgba(255, 255, 255, ' + (1-this.rate) + \")\" ;\n\n                this.ctx.beginPath();\n\n                this.ctx.moveTo(this.pts[i].x, this.pts[i].y);\n\n                for(var j = 1; j < inc; j++){\n                    this.ctx.lineTo(this.pts[i + j].x, this.pts[i + j].y);\n                }\n\n                this.ctx.fill();\n                this.ctx.closePath();\n            }\n\n\n        }else{\n            var currentNumber = this.numberArr[this.currentNumber];\n            var inc           = this.pointNumber / currentNumber;\n\n            for(var i = 0; i < this.pointNumber  ; i+= inc){\n                this.ctx.fillStyle = 'rgba(255, 255, 255, ' +  (1-this.rate )+ \")\" ;\n\n                this.ctx.beginPath();\n\n                this.ctx.moveTo(this.pts[i].x, this.pts[i].y);\n\n                for(var j = 1; j < inc; j++){\n                    this.ctx.lineTo(this.pts[i + j].x, this.pts[i + j].y);\n                }\n\n                this.ctx.fill();\n                this.ctx.closePath();\n            }\n        }\n\n\n    }\n};\n\n\n\n\n// ---------------\n\n\nwidth  = window.innerWidth * scaleFactor;\nheight = window.innerHeight * scaleFactor;\n\nside1 = 100;\nside2 = 180;\n\nvar duration1 = .8;\nvar duration2 = .6;\n\nvar types = ['triangle','rectangle', 'circle'];\n\ncanvas.width  = width;\ncanvas.height = height;\n\nvar forms;\n\ninit();\n\nloop();\n\n\nfunction init(){\n    forms = new Forms(ctx, width / 2, height / 2 );\n\n}\n\n\n\nfunction loop(){\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    forms.draw();\n\n    requestAnimationFrame(loop);\n}\n"
  },
  {
    "path": "app/scripts/1-illusion-of-life/7-pose-to-pose.js",
    "content": "function backingScale(context) {\n    if ('devicePixelRatio' in window) {\n        if (window.devicePixelRatio > 1) {\n            return window.devicePixelRatio;\n        }\n    }\n    return 1;\n}\n\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\nvar width, height, previousTime;\nvar side1, side2;\nvar rect, rect1, rect2;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar scaleFactor = backingScale(ctx);\n\nvar Form = function( ctx, x, y, rad ){\n    _.bindAll(this, 'onUpdateTween', 'onCompleteTween');\n\n    this.ctx = ctx;\n    this.x   = x;\n    this.y   = y;\n    this.rad = rad;\n\n    this.triangle();\n    this.rect();\n    this.circle();\n\n\n\n    this.formType = {\n        'triangle'  : this.trianglePts,\n        'rectangle' : this.rectanglePts,\n        'circle'    : this.circlePts\n    };\n\n    this.curType = 'circle';\n\n    for(var i = 0; i < this.ptNumber; i++){\n        this.pts[i] = {x: this.x, y: this.y}\n    }\n};\n\n\nForm.prototype = {\n    color : '#fff',\n    ptNumber : 120,\n    pts : [],\n\n    oldPts : [],\n\n    trianglePts  : [],\n    rectanglePts : [],\n    circlePts    : [],\n\n    rate : 0,\n\n    transform : function(toType){\n        this.rate = 0;\n        this.toType   = toType;\n\n        TweenLite.to(this,.6, { rate: 1, ease: Power2.easeInOut, onComplete: this.onCompleteTween, onUpdate: this.onUpdateTween });\n    },\n\n    onUpdateTween : function(){\n\n        for(var i = 0;i < this.ptNumber; i++){\n            this.pts[i].x = ( 1- this.rate) * this.formType[this.curType][i].x + this.rate * this.formType[this.toType][i].x;\n            this.pts[i].y = ( 1- this.rate) * this.formType[this.curType][i].y + this.rate * this.formType[this.toType][i].y;\n        }\n    },\n\n    onCompleteTween : function(){\n        for(var i = 0;i < this.ptNumber; i++){\n            this.pts[i].x = this.formType[this.toType][i].x;\n            this.pts[i].y = this.formType[this.toType][i].y;\n        }\n\n        this.curType = this.toType;\n    },\n\n    triangle : function(){\n        var x, y, rate, pt;\n\n        var pt0 = { x : this.rad * Math.cos(30 / 180 * Math.PI), y : this.rad * Math.sin(30 / 180 * Math.PI)};\n        var pt1 = { x : this.rad * Math.cos(150 / 180 * Math.PI), y : this.rad * Math.sin(150 / 180 * Math.PI)};\n        var pt2 = { x : this.rad * Math.cos(270 / 180 * Math.PI), y : this.rad * Math.sin(270/ 180 * Math.PI)};\n\n        for(var i = 0; i < this.ptNumber; i++){\n\n            if(i < this.ptNumber / 6){\n                rate = .5 + i / (this.ptNumber / 6) * .5;\n                x = pt0.x * (1 - rate) + pt1.x * rate;\n                y = pt0.y * (1 - rate) + pt1.y * rate;\n            }else if(i >= this.ptNumber /6 && i < this.ptNumber / 2){\n                rate = (i - this.ptNumber/6) / (this.ptNumber / 3);\n                x = pt1.x * (1 - rate) + pt2.x * rate;\n                y = pt1.y * (1 - rate) + pt2.y * rate;\n            }else if(i >= this.ptNumber /2 && i < this.ptNumber * 5 /6){\n                rate = (i - this.ptNumber/2) / (this.ptNumber / 3);\n                x = pt2.x * (1 - rate) + pt0.x * rate;\n                y = pt2.y * (1 - rate) + pt0.y * rate;\n            }else{\n                rate = (i - this.ptNumber * 5/6) / (this.ptNumber / 3);\n                x = pt0.x * (1 - rate) + pt1.x * rate;\n                y = pt0.y * (1 - rate) + pt1.y * rate;\n            }\n\n\n            pt = {x : x + this.x, y: y + this.y};\n            this.trianglePts.push(pt);\n        }\n\n    },\n\n    rect : function(){\n        var theta, pt;\n\n        var side = this.rad * Math.cos(45 / 180 * Math.PI);\n\n        for(var i = 0; i < this.ptNumber; i++){\n            if(i < this.ptNumber / 8){\n                pt = {x : side , y : side * i / (this.ptNumber / 8) };\n            }else if(i >= this.ptNumber/8 && i < this.ptNumber * 3 / 8){\n                pt = {x : side - side * (i - this.ptNumber / 8) / (this.ptNumber / 8), y : side };\n            }else if( i >= this.ptNumber * 3 / 8 && i < this.ptNumber * 5 / 8) {\n                pt = {x : -side , y : side - side * (i - 3 * this.ptNumber / 8) / (this.ptNumber / 8) };\n            }else if( i >= this.ptNumber * 5 / 8 && i < this.ptNumber * 7 / 8) {\n                pt = {x :-side + side * (i - 5 * this.ptNumber / 8) / (this.ptNumber / 8), y: -side};\n            }else{\n                pt = {x : side, y : -side + side * (i - 7 * this.ptNumber / 8) / (this.ptNumber / 8)};\n            }\n\n            pt.x += this.x;\n            pt.y += this.y;\n\n            this.rectanglePts.push(pt);\n        }\n\n    },\n\n\n    circle : function(){\n        var theta, pt;\n\n        this.nextPts = [];\n\n        for(var i = 0; i < this.ptNumber; i++){\n            theta = i / this.ptNumber * 2 * Math.PI;\n            pt = {x : this.rad * Math.cos(theta) + this.x, y : this.rad * Math.sin(theta) + this.y};\n            this.circlePts[i] = pt;\n        }\n    },\n\n    draw : function(){\n\n        this.ctx.fillStyle = this.color;\n\n        this.ctx.beginPath();\n\n        this.ctx.moveTo(this.pts[0].x, this.pts[0].y);\n\n        for(var i =  1; i < this.pts.length; i++){\n            this.ctx.lineTo(this.pts[i].x, this.pts[i].y);\n        }\n\n        this.ctx.fill();\n        this.ctx.closePath();\n\n    },\n\n};\n\nvar Panel = function(ctx, y){\n    this.ctx = ctx;\n    this.y   = y;\n    this.height  = 30 * scaleFactor;\n\n    this.pts = [];\n    window.pts = this.pts;\n}\n\nPanel.prototype = {\n    count : 0,\n\n    draw : function(form){\n        // calculate the rate\n        var newPtArr = [];\n        this.count++;\n        if(this.count % 15 == 0){\n            for(var i = 0; i < form.pts.length; i++){\n                var pt = form.pts[i];\n\n                var xRate = ( pt.x - (form.x - form.rad) ) / (form.rad * 2);\n                var yRate = ( pt.y - (form.y - form.rad) ) / (form.rad * 2);\n\n                var posX = window.innerWidth * scaleFactor + xRate*this.height ;\n                var posY = yRate * this.height + this.y;\n\n                var newPt = {x : posX, y: posY};\n\n                newPtArr.push(newPt);\n            }\n\n            this.pts.push(newPtArr);\n        }\n\n\n        for(var i = 0; i < this.pts.length; i++){\n            var ptArr = this.pts[i];\n            for(var j = 0; j < ptArr.length; j++){\n                //var pt = ptArr[j];\n                ptArr[j].x -= 1;\n            }\n        }\n\n        this.ctx.strokeStyle = 'rgba(255, 255, 255, .6)';\n        this.ctx.beginPath();\n\n\n        for(var i = 0; i < this.pts.length; i++){\n            var ptArr = this.pts[i];\n\n            this.ctx.moveTo( ptArr[0].x, ptArr[0].y);\n            for(var j = 1; j < ptArr.length; j++){\n                this.ctx.lineTo(ptArr[j].x, ptArr[j].y);\n            }\n        }\n\n        this.ctx.stroke();\n        this.ctx.closePath();\n\n    }\n};\n\n\n// ---------------\n\n\nwidth  = window.innerWidth * scaleFactor;\nheight = window.innerHeight * scaleFactor;\n\nside1 = 100;\nside2 = 180;\n\nvar duration1 = .8;\nvar duration2 = .6;\n\nvar types = ['triangle','rectangle', 'circle'];\n\ncanvas.width  = width;\ncanvas.height = height;\n\nvar form;\nvar panel;\n\ninit();\n\nloop();\n\n\nfunction init(){\n    var rad = Math.min( width/3, height/3);\n    form = new Form(ctx, width / 2, height / 2, rad );\n    panel = new Panel(ctx, height / 2 + rad + 30 * scaleFactor);\n\n    var nextType = form.curType;\n    while(nextType == form.curType){\n        nextType = types[parseInt(types.length * Math.random())];\n    }\n\n    form.transform(nextType);\n\n    setInterval(function(){\n        var nextType = form.curType;\n        while(nextType == form.curType){\n            nextType = types[parseInt(types.length * Math.random())];\n        }\n\n        form.transform(nextType);\n    }, 800);\n}\n\n\n\nfunction loop(){\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    form.draw();\n    panel.draw(form);\n\n    requestAnimationFrame(loop);\n}\n"
  },
  {
    "path": "app/scripts/1-illusion-of-life/8-arcs.js",
    "content": "function backingScale(context) {\n    if ('devicePixelRatio' in window) {\n        if (window.devicePixelRatio > 1) {\n            return window.devicePixelRatio;\n        }\n    }\n    return 1;\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\nvar Rect = function( ctx, x, y, wid, hig, rad, i ){\n    _.bindAll(this, 'tweenOnUpdate1', 'tweenOnComplete1');\n\n    this.ctx = ctx;\n    this.x = x;\n    this.y = y;\n    this.wid = wid;\n    this.hig = hig;\n\n    this.vel = 100;\n    this.arcRate = 0;\n\n    this.rad1 = 100 * scaleFactor;\n    this.rad2 = rad;\n\n    this.isArcAnimation = false;\n\n    this.duration1 = i * .05;\n    var col = 255 - parseInt(255 / 100 * i);\n    this.col = 'rgb(' + col + ', ' + col + ', ' + col + ')';\n};\n\nRect.prototype = {\n    duration1      : 1,\n    isArcAnimation : null,\n\n    draw : function(){\n        this.ctx.beginPath();\n        this.ctx.fillStyle = this.col;\n        this.ctx.save();\n\n        this.ctx.translate(this.x, this.y);\n        if(this.isArcAnimation){\n\n            this.ctx.moveTo(0, 0);\n            this.ctx.arc(0, 0, this.rad2, this.theta1, this.theta2 );\n            this.ctx.fill();\n            this.ctx.closePath();\n\n\n            this.ctx.beginPath();\n            this.ctx.fillStyle = '#333';\n            this.ctx.moveTo(0, 0);\n            this.ctx.arc(0, 0, this.rad1, 0, 2 * Math.PI );\n            this.ctx.fill();\n            this.ctx.closePath();\n\n\n\n\n        }else{\n            this.ctx.fillRect( this.rad1 , -this.hig, this.wid, this.hig);\n        }\n\n\n\n        this.ctx.restore();\n    },\n\n    startArcAnimation : function(){\n        this.isArcAnimation = true;\n        this.arcRate = 0;\n        TweenLite.to(this, this.duration1, { arcRate : 1, onUpdate: this.tweenOnUpdate1, onComplete: this.tweenOnComplete1 });\n    },\n\n    tweenOnUpdate1 : function(){\n        this.theta1 = this.arcRate * Math.PI * -1 + 2 * Math.PI;\n        this.theta2 = this.arcRate * this.arcRate * this.arcRate * Math.PI * -1 + 2 * Math.PI;\n\n    },\n\n    tweenOnComplete1 : function(){\n\n    }\n};\n\n\nvar width, height, previousTime;\nvar side1, side2;\nvar side1Wid, side1Hig;\nvar rect;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar scaleFactor = backingScale(ctx);\nvar arcs = [];\n\nwidth  = window.innerWidth * scaleFactor;\nheight = window.innerHeight * scaleFactor;\n\nside1 = 100;\nside2 = 180;\n\n//side1Wid = 100;\nside1Wid = 200;\n\nside1Hig = 50;\n\n\nvar duration1 = .8;\nvar duration2 = .6;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n\ninit();\nloop();\n\nfunction init(){\n    var rad = Math.min(width/2, height/2);\n    for(var i = 0;i < 100; i++){\n        rect = new Rect(ctx, width/2, height, side1Wid, side1Hig, rad/100* (1 + i), i);\n        rect.startArcAnimation();\n        arcs.push(rect);\n    }\n\n\n    setInterval(function(){\n        for(var i = 0; i < arcs.length; i++){\n            arcs[i].startArcAnimation();\n        }\n    }, 100 *.05 * 1000);\n}\n\nfunction loop(){\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    for(var i = 0;i < arcs.length; i++){\n        arcs[i].draw();\n    }\n\n    requestAnimationFrame(loop);\n}"
  },
  {
    "path": "app/scripts/1-illusion-of-life/9-arcs.js",
    "content": "function backingScale(context) {\n    if ('devicePixelRatio' in window) {\n        if (window.devicePixelRatio > 1) {\n            return window.devicePixelRatio;\n        }\n    }\n    return 1;\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\nvar Rect = function( i, ctx, x, y, prevWid, wid, hig ){\n    _.bindAll(this, 'tweenOnUpdate1', 'tweenOnUpdate2', 'tweenOnComplete1');\n\n    this.ctx = ctx;\n    this.x = x;\n    this.y = y;\n    this.wid = (wid-prevWid);\n    this.hig = hig;\n\n    this.vel = 100;\n    this.arcRate = 0;\n\n    this.oriRad1 = this.rad1 = prevWid + 10*scaleFactor;\n    this.oriRad2 = this.rad2 = this.rad1 + this.wid;\n\n\n    this.theta3 = Math.atan2( this.hig, this.rad2);\n    this.theta4 = Math.atan2( this.hig, this.rad1);\n    //console.log(this.theta4)\n\n    this.animTheta0 = 0;\n    this.animTheta1 = 0;\n    this.animTheta3 = 0;\n    this.animTheta4 = 0;\n\n    this.theta00 = 0;\n    this.theta11 = 0;\n\n    this.oriRad3 = this.rad3 = 1/Math.cos(this.theta3) * (this.rad2);\n    this.oriRad4 = this.rad4 = 1/Math.cos(this.theta4) * (this.rad1);\n\n\n\n    this.isReverse = false;\n    this.isArcAnimation = false;\n\n    this.id = i;\n    //var col = parseInt(255 * i / (number - 1));\n    var col = 255;\n    this.col = 'rgb(' + col + ', ' + col + ', ' + col + ')';\n    this.delay =  .3 * (number - i) / (number - 1);\n};\n\nvar co = Math.cos;\nvar si = Math.sin;\n\nRect.prototype = {\n    duration1 :.5,\n    duration2 : .4,\n    isArcAnimation : null,\n\n    draw : function(){\n        this.ctx.beginPath();\n        this.ctx.fillStyle = this.col;\n        this.ctx.save();\n\n        this.ctx.translate(this.x, this.y);\n\n            this.ctx.moveTo(this.rad1 * co( this.theta00 + this.animTheta0 ), -this.rad1 * si( this.theta00 + this.animTheta0) );\n            this.ctx.lineTo(this.rad2 * co( this.theta11 + this.animTheta1 ), -this.rad2 * si( this.theta11 + this.animTheta1) );\n            this.ctx.lineTo(this.rad3 * co( this.theta3  + this.animTheta3 + this.theta11), -this.rad3 * si(this.theta3 + this.animTheta3 + this.theta11) );\n            this.ctx.lineTo(this.rad4 * co( this.theta4  + this.animTheta4 + this.theta00), -this.rad4 * si(this.theta4 + this.animTheta4 + this.theta00) );\n\n\n            this.ctx.fill();\n\n\n        this.ctx.restore();\n    },\n\n    startArcAnimation : function(){\n        var self = this;\n        setTimeout(function(){\n            self.isArcAnimation = true;\n            self.arcRate1 = 0;\n            self.arcRate2 = 0;\n\n            self.originaLRate1 = 0;\n            self.originaLRate2 = 0;\n\n            TweenLite.to(self, self.duration1 +.03 * self.id, { arcRate1 : self.arcRate1 +1, onUpdate: self.tweenOnUpdate1, ease: Power3.easeOut});\n            TweenLite.to(self, self.duration2 +.03 * self.id, { arcRate2 : self.arcRate1 +1, onUpdate: self.tweenOnUpdate2, onComplete: self.tweenOnComplete1});\n        }, 300);\n\n    },\n\n    tweenOnUpdate1 : function(){\n        //this.theta1 = this.arcRate1 * (Math.PI - this.theta11) * -1 + 2 * Math.PI - this.theta;\n\n        this.animTheta3 =  this.arcRate1 *Math.PI ;\n        this.animTheta4 =  this.arcRate1 *Math.PI ;\n\n        //this.rad4 = this.oriRad4 * (1-this.arcRate1 + this.originaLRate1) + this.oriRad1 * (this.arcRate1 -  this.originaLRate1);\n        //this.rad3 = this.oriRad3 * (1-this.arcRate1 + this.originaLRate1) + this.oriRad2 * (this.arcRate1 -  this.originaLRate1)\n    },\n\n    tweenOnUpdate2 : function(){\n        //this.theta2 = this.arcRate2 * (Math.PI - this.theta) * -1 + 2 * Math.PI ;\n        this.animTheta0 =  this.arcRate2 *Math.PI ;\n        this.animTheta1 =  this.arcRate2 *Math.PI ;\n\n        //this.rad1 = this.oriRad1 * (1-this.arcRate2 + this.originaLRate2) + this.oriRad4 * (this.arcRate2 - this.originaLRate2);\n        //this.rad2 = this.oriRad2 * (1-this.arcRate2 + this.originaLRate2) + this.oriRad3 * (this.arcRate2 - this.originaLRate2);\n    },\n\n    tweenOnComplete1 : function(){\n        this.originaLRate1 = this.arcRate1;\n        this.originaLRate2 = this.arcRate2;\n\n        TweenLite.to(this, this.duration1 +.03 * this.id, { arcRate1 : this.arcRate1 + 1, onUpdate: this.tweenOnUpdate1, ease: Power3.easeOut, delay: this.delay});\n        TweenLite.to(this, this.duration2 +.03 * this.id, { arcRate2 : this.arcRate2 + 1, onUpdate: this.tweenOnUpdate2, onComplete: this.tweenOnComplete1, delay: this.delay});\n    },\n\n    test : function(){\n\n    }\n};\n\n\nvar width, height, previousTime;\nvar side1, side2;\nvar side1Wid, side1Hig;\nvar rect;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar scaleFactor = backingScale(ctx);\nvar arcs = [];\n\nwidth  = window.innerWidth * scaleFactor;\nheight = window.innerHeight * scaleFactor;\n\nside1 = 100;\nside2 = 180;\n\n//side1Wid = 100;\nvar number = 30;\nvar sideHig = 10 * scaleFactor;\n\n\nvar duration1 = .8;\nvar duration2 = .6;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n\ninit();\nloop();\n\nfunction init(){\n    var prevRad = 10*scaleFactor;\n    for(var i = 0; i < number; i++){\n        var rad = (i + 1)  / number * (width/3 - 10 * scaleFactor) + 10 * scaleFactor;\n        rect = new Rect(i, ctx, width/2, height/2, prevRad, rad, sideHig);\n        rect.startArcAnimation();\n        arcs.push(rect);\n        prevRad = rad;\n    }\n\n\n}\n\nfunction loop(){\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    for(var i = number; i > 0; i--){\n        arcs[i-1].draw()\n    }\n\n    requestAnimationFrame(loop);\n}"
  },
  {
    "path": "app/scripts/2-numbers/24-number0.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\n\nvar Point = function(x, y){\n    this.x = this.origX = x;\n    this.y = this.origY = y;\n};\n\nvar AnimationPoint = function(ctx){\n    this.ctx = ctx;\n    this.x = this.origX = width/2;\n    this.y = this.origY = height/2;\n\n    this.isDraw = true;\n};\n\nAnimationPoint.prototype = {\n    rad1   : height/2 * .6,\n    theta1 : 0,\n\n    rad2   : width /2 * .6,\n    theta2 : 0,\n\n    rad : 3,\n\n    update : function(){\n        this.theta1 += .04;\n        this.theta2 += .02;\n\n        this.x = this.origX + this.rad2 * Math.cos(this.theta2);\n        this.y = this.origY + this.rad1 * Math.sin(this.theta1);\n\n        if(this.isDraw) this.draw();\n    },\n\n    draw : function(){\n        this.ctx.beginPath();\n        this.ctx.fillStyle = '#fff';\n        this.ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);\n        this.ctx.fill();\n        this.ctx.closePath();\n    }\n};\n\nvar DIVIDE_X = 20;\nvar DIVIDE_Y = 20;\n\nvar Shape = function(ctx){\n   this.ctx = ctx;\n   this.nodeArr = []; \n\n   for(var i = 0; i < this.ny; i++){\n       this.nodeArr[i] = [];\n\n       for(var j = 0; j < this.nx; j++){\n           var node = new Node();\n           \n           node.ox = node.x = i * width / DIVIDE_X;\n           node.oy = node.y = j * height/ DIVIDE_Y;\n\n           this.nodeArr[i].push(node);\n       }\n   }\n\n   for(var i = 0; i < this.ny; i++){\n       for(var j = 0; j < this.nx; j++){\n           node = this.nodeArr[i][j];\n\n           var bounds = [];\n\n           bounds[0] = (i == 0)         ? true : false;\n           bounds[1] = (j == this.nx-1) ? true : false;\n           bounds[2] = (i == this.ny-1) ? true : false;\n           bounds[3] = (j == 0)         ? true : false;\n\n          // ===================== \n\n          node.nn[0] = ( bounds[0]              ) ? null : this.nodeArr[i - 1][j    ];\n          node.nn[1] = ( bounds[0] || bounds[1] ) ? null : this.nodeArr[i - 1][j + 1];\n          node.nn[2] = ( bounds[1]              ) ? null : this.nodeArr[i    ][j + 1];\n          node.nn[3] = ( bounds[1] || bounds[2] ) ? null : this.nodeArr[i + 1][j + 1];\n          node.nn[4] = ( bounds[2]              ) ? null : this.nodeArr[i + 1][j    ];\n          node.nn[5] = ( bounds[3] || bounds[2] ) ? null : this.nodeArr[i + 1][j + 1];\n          node.nn[6] = ( bounds[3]              ) ? null : this.nodeArr[i    ][j - 1];\n          node.nn[7] = ( bounds[3] || bounds[0] ) ? null : this.nodeArr[i - 1][j - 1];\n\n          var isFirst, oldNode;\n          if(!this.first){\n              this.first = node;\n              oldNode = node;\n          }else{\n              oldNode.next = node;\n              oldNode      = node;\n          }\n       }\n   }\n};\n\nShape.prototype = {\n    first : null,\n\n    col : '#444',\n    count : 0,\n\n    nx : DIVIDE_X + 1,\n    ny : DIVIDE_Y + 1,\n\n    SPRING : .2,\n    FRICTION : .05,\n\n    nodeArr : null,\n\n    update : function(pt){\n\n        var dx, dy, dist;\n        var node = this.first;\n\n\n        do{\n           dx = node.ox - pt.x; \n           dy = node.oy - pt.y;\n\n           dist = Math.sqrt(dx * dx + dy * dy) + 1;\n\n           tx = node.ox + dx / dist * 10;\n           ty = node.oy + dy / dist * 10;\n\n           node.vx += (tx - node.x) * this.SPRING;\n           node.vy += (ty - node.y) * this.SPRING;\n\n           node.x += node.vx * this.FRICTION;\n           node.y += node.vy * this.FRICTION;\n\n\n        }while(node = node.next);\n        \n\n        this.draw();\n    },\n    \n    draw : function(){\n        var n1, n2, n3, n4;\n        var node = this.first;\n\n \n        this.count += 1;\n        var col = this.count % 255;\n       \n        this.ctx.save();\n        this.ctx.globalAlpha = .1;\n        this.ctx.beginPath();\n        this.ctx.strokeStyle = 'hsl(' + col + ', 100%, 70%)';       \n        do{\n            var px = node.x;\n            var py = node.y;\n\n            n1 = node.nn[1];\n            n2 = node.nn[2];\n            n3 = node.nn[3];\n            n4 = node.nn[4];\n            \n            if(n1){\n                this.ctx.beginPath();\n                this.ctx.moveTo(px, py);\n                this.ctx.lineTo(n1.x, n1.y);\n                this.ctx.stroke();\n                this.ctx.closePath();\n            }\n\n            if(n2){\n                this.ctx.beginPath();\n                this.ctx.moveTo(px, py);\n                this.ctx.lineTo(n2.x, n2.y);\n                this.ctx.stroke();\n                this.ctx.closePath();\n            }\n            \n            if(n3){\n                this.ctx.beginPath();\n                this.ctx.moveTo(px, py);\n                this.ctx.lineTo(n3.x, n3.y);\n                this.ctx.stroke();\n                this.ctx.closePath();\n            }\n\n            if(n4){\n                this.ctx.beginPath();\n                this.ctx.moveTo(px, py);\n                this.ctx.lineTo(n4.x, n4.y);\n                this.ctx.stroke();\n                this.ctx.closePath();\n            }\n \n\n        }while(node = node.next);\n\n        this.ctx.restore();\n\n    }\n};\n\n\n\nvar Node = function(){\n    this.nn = [];\n}\n\nNode.prototype = {\n    x : 0,\n    y : 0,\n    vx: 0,\n    vy: 0,\n    ox: 0,\n    oy: 0,\n\n    nn   : null,\n    next : null,\n};\n\n\n// ================\n\nvar animationPt;\nvar shape;\n\ninit();\nloop();\n\nfunction init(){\n    shape = new Shape(ctx);\n    animationPt = new AnimationPoint( ctx); \n     \n    ctx.fillStyle = 'rgb(30, 30, 30)';\n    ctx.fillRect(0, 0, width, height);\n    \n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = 'rgba(30, 30, 30, .1)';\n    ctx.fillRect(0, 0, width, height);\n\n    animationPt.update();\n    shape.update(animationPt);\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/2-numbers/25-number0.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\nvar NumberZero = function(ctx){\n    'use strict';\n    this.ctx = ctx;\n    this.x   = width/2;\n    this.y   = height/2;\n};\n\nNumberZero.prototype = {\n    update : function(){\n        'use strict';\n\n        this.ctx.beginPath();\n        this.ctx.stroke();\n        this.ctx.\n    }\n};\n\n// ================\nvar shape;\ninit();\nloop();\n\nfunction init(){\n    shape = new NumberZero(ctx):\n\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    shape.update(duration);\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/3-algorithm/-1-43-undefined-botsu.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\nVectorManipulator = {\n    sub : function(main, other){\n        var x = main.x - other.x;\n        var y = main.y - other.y;\n        var vec = new Vector(x, y);\n\n        return vec;\n    }\n};\nvar Vector = function(x, y){\n    this.x = x || 0;\n    this.y = y || 0;\n};\n\n\nVector.prototype = {\n    sub : function(vec){\n        this.x = this.x - vec.x;\n        this.y = this.y - vec.y;\n    },\n\n    add : function(vec){\n        this.x = this.x + vec.x;\n        this.y = this.y + vec.y;\n    },\n\n    mag : function(){\n        var magnitude = Math.sqrt(this.x * this.x + this.y * this.y);\n        return magnitude;\n    },\n\n    getAngle : function(){\n        var theta = Math.atan2(this.y, this.x);\n        return theta;\n    }\n\n};\n\nvar friction = 1;\n\n// ----------------\nvar Circle = function(x, y, rad){\n    this.rad = rad;\n    this.velocity = new Vector();\n    this.position = new Vector(x, y);\n};\n\nCircle.prototype = {\n    g        : 1,\n    m        : 1,\n    rad      : null,\n    velocity : null,\n    position : null,\n\n    setVelocity : function(x, y){\n        this.velocity.x = x;\n        this.velocity.y = y;\n    },\n\n    setMass : function(val){\n        this.m = val;\n    },\n\n    update : function(){\n        this.velocity.y += this.g;\n\n        this.position.add(this.velocity);\n        this.updateForBoarder();\n\n    },\n\n    updateForBoarder : function(){\n        var dis;\n        var masatsu = .8;\n        if(this.position.x -this.rad < 0){\n            dis = -1 * (this.position.x - this.rad);\n            this.position.x += dis;\n            this.velocity.x *= -masatsu;\n        }\n\n        if(this.position.x + this.rad > width){\n            dis = this.position.x + this.rad - width;\n            this.position.x -= dis;\n            this.velocity.x *= -masatsu;\n        }\n\n        if(this.position.y - this.rad < 1/3 * height){\n            dis = -1 * (this.position.y - this.rad);\n            this.position.y += dis;\n            this.velocity.y *= -masatsu;\n        }\n\n        if(this.position.y + this.rad > height){\n            dis = this.position.y + this.rad - height;\n            this.position.y -= dis;\n            this.velocity.y *= -masatsu;\n        }\n    },\n\n    checkCollision : function(circle){\n        var bVector = VectorManipulator.sub( circle.position, this.position);\n        var dis = bVector.mag();\n        //console.log(circle.rad);\n        if(dis < this.rad + circle.rad){\n            var theta = bVector.getAngle();\n            var sine = Math.sin(theta);\n            var cosine = Math.cos(theta);\n\n            var tempVec0 = new Vector();\n            var tempVec1 = new Vector();\n\n            tempVec1.x = cosine * bVector.x + sine * bVector.y;\n            tempVec1.y = cosine * bVector.y - sine * bVector.x;\n\n            var vTempVec0 = new Vector();\n            var vTempVec1 = new Vector();\n\n            vTempVec0.x  = cosine * this.velocity.x + sine * this.velocity.y;\n            vTempVec0.y  = cosine * this.velocity.y - sine * this.velocity.x;\n            vTempVec1.x  = cosine * circle.velocity.x + sine * circle.velocity.y;\n            vTempVec1.y  = cosine * circle.velocity.y - sine * circle.velocity.x;\n\n            var vFinal0 = new Vector();\n            var vFinal1 = new Vector();\n\n            //vFinal0.x = ((this.m - circle.m) * vTempVec0.x + 2 * circle.m * vTempVec1.x) / (this.m + circle.m);\n            vFinal0.x = ((this.m - friction * circle.m) * vTempVec0.x + (1 + friction) * circle.m * vTempVec1.x) / (this.m + circle.m);\n            vFinal0.y = vTempVec1.y;\n\n            // final rotated velocity for b[0]\n            vFinal1.x = ((circle.m - friction * this.m) * vTempVec1.x + (friction + 1) * this.m * vTempVec0.x) / (this.m + circle.m);\n            vTempVec1.y = vTempVec1.y;\n\n           tempVec0.x += vFinal0.x;\n           tempVec1.x += vFinal1.x;\n\n            var bFinal0 = new Vector();\n            var bFinal1 = new Vector();\n\n            bFinal0.x = cosine * tempVec0.x - sine * tempVec0.y;\n            bFinal0.y = cosine * tempVec0.y + sine * tempVec0.x;\n            bFinal1.x = cosine * tempVec1.x - sine * tempVec1.y;\n            bFinal1.y = cosine * tempVec1.y + sine * tempVec1.x;\n\n            circle.position.x = this.position.x + bFinal1.x;\n            circle.position.y = this.position.y + bFinal1.y;\n\n            this.position.add(bFinal0);\n\n            this.velocity.x = cosine * vFinal0.x - sine * vFinal0.y;\n            this.velocity.y = cosine * vFinal0.y + sine * vFinal0.x;\n\n\n            circle.velocity.x = cosine * vFinal1.x - sine * vFinal1.y;\n            circle.velocity.y = cosine * vFinal1.y + sine * vFinal1.x;\n\n        }\n    },\n\n    draw : function(){\n        ctx.beginPath();\n        ctx.fillStyle = \"#fff\";\n        ctx.arc(this.position.x, this.position.y, this.rad, 0, 2 * Math.PI, false);\n        ctx.fill();\n        ctx.beginPath();\n    }\n};\n\n//================\nvar circleArr = [];\nvar circleNum = 10;\n\ninit();\nloop();\n\nfunction init(){\n\n    for(var i = 0; i < circleNum; i++){\n        var xPos = (.1 + .8 * Math.random()) * width;\n        var yPos =  (1/3 + 2/3 * (Math.random() * .8 +.1))*height;\n        var rad = parseInt(10 + 25 * Math.random());\n        var circle = new Circle(xPos, yPos, rad);\n        circle.m = rad;\n\n        circleArr.push(circle);\n    }\n\n\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n    ctx.fillStyle = \"#fff\";\n    ctx.fillRect( 0, 0, width, height/3);\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect( 0, height/3, width, height * 2 / 3);\n\n    circleArr.forEach((function(element, index){\n        element.update();\n        for(var i = 0; i < circleArr.length; i++){\n            element.checkCollision(circleArr[i]);\n        }\n    }));\n\n\n    circleArr.forEach((function(element, index){\n        element.draw();\n    }));\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/3-algorithm/33-bubble-sort.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\nvar randoms;\n\n\n// ================\nvar Circle = function(num, x, y){\n    this.number = num;\n    var colNum = parseInt(this.number);\n    this.col = 'rgb(' + colNum + ', ' + colNum + ', ' + 0 + ')';\n    this.rad = 10;\n\n    this.x = x;\n    this.y = y;\n};\n\nCircle.prototype = {\n    draw : function(){\n        ctx.fillStyle = this.col;\n        ctx.strokeStyle = '#fff';\n\n        ctx.beginPath();\n\n        ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI);\n        ctx.fill();\n\n        ctx.closePath();\n    },\n\n    transform : function(xPos){\n        TweenLite.to(this,.2, {x: xPos});\n    },\n\n    slowTransform : function(xPos){\n        TweenLite.to(this, 1.4, {x: xPos});\n    }\n};\n\nvar side = 80;\n\nvar Circles = function(){\n\n    this.circleArr = [];\n    this.NUM = parseInt(width / side) - 1;\n\n    if(typeof randoms === 'undefined'){\n        randoms = [];\n        for(var i = 0; i < this.NUM; i++){\n            randoms.push(Math.random() * 255);\n        }\n    }\n\n    for(var i = 0; i < this.NUM; i++){\n\n        var circle = new Circle( randoms[i], side + side * i, this.y);\n        this.circleArr.push(circle);\n    }\n\n    //this.bubbleSort();\n};\n\nCircles.prototype = {\n    y : height/2,\n    NUM : null,\n    k : 0,\n\n    draw : function(){\n        this.circleArr.forEach(function(element){\n            element.draw();\n        });\n    }\n};\n\nvar Circles1 = function(){\n    this.y = height/4;\n    Circles.call(this);\n\n    _.bindAll(this, 'bubbleSort');\n    this.bubbleSort();\n};\n\nCircles1.prototype = Object.create(Circles.prototype);\n\nCircles1.prototype.bubbleSort = function(){\n\n    for(var i = 0; i < this.NUM-1-this.k; i++){\n        if(this.circleArr[i].number > this.circleArr[i+1].number){\n            var temp = this.circleArr[i];\n            this.circleArr[i] = this.circleArr[i+1];\n            this.circleArr[i+1] = temp;\n\n            this.circleArr[i].transform(this.circleArr[i+1].x);\n            this.circleArr[i+1].transform(this.circleArr[i].x);\n\n\n            setTimeout(this.bubbleSort, 300);\n\n            return;\n        }\n    }\n};\n\nvar Circles2 = function(){\n    this.y = height * 3/4;\n    Circles.call(this);\n\n    _.bindAll(this, 'quickSort');\n\n    this.quickSort(0, this.circleArr.length);\n};\n\nCircles2.prototype = Object.create(Circles.prototype);\n\nCircles2.prototype.quickSort = function(start, end){\n\n\n    if(start >= end) return;\n\n\n    var left = [], right = [], pivot = this.circleArr[start];\n\n\n    for(var i = start + 1; i < end; i++){\n        this.circleArr[i].number < pivot.number ? left.push(this.circleArr[i]) : right.push(this.circleArr[i]);\n    }\n\n    var leftNum = left.length + start;\n    var rightNum = leftNum + 1;\n\n    if(start > 0 && end <  this.circleArr.length){\n        var temp1 = this.circleArr.slice(0, start);\n        var temp2 = this.circleArr.slice(end, this.circleArr.length);\n\n        this.circleArr = temp1.concat(left, pivot, right, temp2);\n\n    }else if(start > 0){\n        var temp = this.circleArr.slice(0, start);\n        this.circleArr = temp.concat(left, pivot, right);\n    }else if(end < this.circleArr.length){\n        var temp = this.circleArr.slice(end, this.circleArr.length);\n        this.circleArr = left.concat(pivot, right, temp);\n\n    }else{\n        this.circleArr = left.concat(pivot, right);\n    }\n\n    for(var i = 0; i < this.circleArr.length; i++){\n        var xPos = side + side * i;\n        if(xPos != this.circleArr[i].x) this.circleArr[i].slowTransform(xPos);\n    }\n\n\n    var self=this;\n    setTimeout(function(){\n        self.quickSort(start, leftNum);\n        self.quickSort(rightNum, end);\n    }, 1500);\n\n    /*\n    for (var i = 1; i < a.length; i++) {\n        a[i] < pivot ? left.push(a[i]) : right.push(a[i]);\n    }\n\n    return qsort(left).concat(pivot, qsort(right));*/\n\n}\n\n// ================\nvar circles1, circles2;\nvar circles;\n\ninit();\nloop();\n\nfunction init(){\n    circles = new Circles();\n\n    circles1 = new Circles1();\n    circles2 = new Circles2();\n\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    circles.draw();\n    circles1.draw();\n    circles2.draw();\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/3-algorithm/34-search.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\nvar Circle = function(number, x){\n    this.number = number;\n    this.x = x;\n    this.y = 120;\n};\n\nCircle.prototype = {\n    rad       : 15,\n    fillCol   : '#fff',\n    fontCol   : '#333',\n    fontStyle : \"12px Arial\",\n    draw : function(){\n        ctx.fillStyle = this.fillCol;\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.rad, 0, 2*Math.PI);\n        ctx.fill();\n        ctx.closePath();\n\n        ctx.textAlign = 'center';\n        ctx.textBaseline = 'middle';\n        ctx.font = this.fontStyle;\n        ctx.fillStyle = this.fontCol;\n        ctx.fillText(this.number, this.x, this.y);\n\n    }\n};\n\nvar Circles = function(){\n    _.bindAll(this, 'binarySearch', 'shuffleDone');\n\n    this.translate = 0;\n    this.number = 101;\n    this.kankaku = 50;\n    this.circles = [];\n\n    this.translate = width/2;\n\n    for(var i = 0; i < this.number; i++ ){\n        var circle = new Circle(i, i * this.kankaku);\n        this.circles.push(circle);\n    }\n\n};\n\nCircles.prototype = {\n    startToSearch : function(){\n        this.start = 0;\n        this.end   = this.number - 1;    \n\n        this.circles[this.shuffle.number].fillCol = '#e74c3c';\n\n        this.binarySearch();\n    },\n\n    binarySearch : function(){\n        if(this.start > this.end) return;\n\n        var prev = this.middle;\n        if(!prev) prev = 0;\n        this.circles[prev].fillCol = '#fff';\n        this.middle = parseInt((this.start + this.end)/2);\n        if(this.middle != this.shuffle.number) this.circles[this.middle].fillCol = '#3498db';\n        \n        var xPos = this.middle * -1 * this.kankaku + width/2;\n        var second = Math.abs((this.middle - prev) / 20) > .5 ? Math.abs((this.middle - prev)/20) : .5;\n        var duration = (second + 1) * 1000; \n        var self= this;\n\n        TweenLite.to(this, second, { translate: xPos});\n\n        if(this.shuffle.number > this.middle){\n            this.start = this.middle + 1;\n            \n            setTimeout(function(){\n                self.binarySearch()\n            }, duration)\n            return;\n        }\n\n        if(this.shuffle.number < this.middle){\n            this.end = this.middle - 1;\n            setTimeout(function(){\n                self.binarySearch()\n            }, duration)\n            return;\n        }\n\n        // setDone\n        setTimeout(this.shuffleDone, duration);\n\n    },\n\n    shuffleDone : function(){\n        this.circles[this.shuffle.number].fillCol = '#fff';\n\n        this.shuffle.shuffleStart();\n    },\n\n    draw : function(){\n        ctx.save();\n        ctx.translate(this.translate, 0);\n        this.circles.forEach(function(element){\n            element.draw();\n        });\n        ctx.restore();\n    }\n};\n\nvar Shuffle = function(circles){\n    _.bindAll(this, 'shuffle');\n    \n    this.number = 0;\n    this.circles = circles;\n\n    this.shuffleStart();\n};\n\nShuffle.prototype = {\n    fontStyle : 'bold 42px Arial',\n    fontCol   : '#fff',\n\n    shuffleStart : function(){\n        this.shuffleCount = 0;\n        this.shuffle();\n    },\n\n    shuffle : function(){\n        this.number = parseInt(100 * Math.random());\n\n        this.shuffleCount++;\n        if(this.shuffleCount < 50) setTimeout(this.shuffle, 20);\n        else                       {\n               var self = this;\n               setTimeout(function(){\n                self.circles.startToSearch();\n               }, 800) \n        }\n    },\n\n    draw : function(){\n\n\n        ctx.textAlign = 'center';\n        ctx.textBaseline = 'top';\n        ctx.font = this.fontStyle;\n        ctx.fillStyle = this.fontCol;\n        ctx.fillText(this.number, width/2, 20);\n    }\n};\n\n// ================\nvar circles, shuffle;\n\ninit();\nloop();\n\nfunction init(){\n    circles = new Circles();\n    shuffle = new Shuffle();\n\n    shuffle.circles = circles;\n    circles.shuffle = shuffle;\n\n    prevTime = +new Date;\n\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    shuffle.draw();\n    circles.draw();\n\n\n\n    ctx.strokeStyle = '#fff';\n\n    ctx.beginPath();\n    ctx.moveTo(width/2, 85);\n    ctx.lineTo(width/2, 95);\n    ctx.stroke();\n    ctx.closePath();\n\n    ctx.beginPath();\n    ctx.moveTo(width/2, 145);\n    ctx.lineTo(width/2, 155);\n    ctx.stroke();\n    ctx.closePath();\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/3-algorithm/35-undefined.js",
    "content": "// --------------------------\n\nvar width, height, prevTime, rad;\nvar sound220, sound440, sound880;\nvar isBlack = true;\nvar soundLoopCount  = 0;\nvar soundCount      = 0;\nvar soundLoopDuration = 600;\nvar tweenAnimationDuration = .4;\nvar isSoundPlay = true;\nvar SOUND_MAX_COUNT = 3;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\nrad = Math.min(width *.4, height *.4);\n\ndocument.getElementById(\"button\").addEventListener(\"click\", function(){ isSoundPlay = !isSoundPlay; });\n// ================\nvar Line = function(){\n};\n\nLine.prototype = {\n    _theta1 : 0,\n    _theta2 : 0,\n\n    isBlack : false,\n    opacity : Math.random() *.8,\n\n    init1  : function(){\n        this.y1 = .2 * height;\n        this.y2 = .8 * height;\n\n        this.x1 = Math.random() * width;\n        this.x2 = Math.random() * width;\n\n    },\n    update : function(){\n        if(this.isBlack) ctx.strokeStyle = \"rgba(0, 0, 0, \" + this.opacity * (Math.random()) + \")\";\n        else             ctx.strokeStyle = \"rgba(255, 255, 255, \" + this.opacity * (Math.random()) + \")\";\n        ctx.beginPath();\n        ctx.moveTo(this.x1, this.y1);\n        ctx.lineTo(this.x2, this.y2);\n        ctx.closePath();\n\n        ctx.stroke();\n    },\n\n    zero : function(){\n        var opacity = Math.random() *.8;\n        TweenLite.to(this, tweenAnimationDuration/2, {x1: width/2, x2: width/2, y1: height/2, y2: height/2, opacity: opacity, ease: \"Power1.easeOut\"});\n        //TweenLite.to(this, tweenAnimationDuration/2, {x1: width * Math.random(), x2: width * Math.random(), y1: height * Math.random(), y2: height * Math.random(), ease: \"Power1.easeOut\"});\n    },\n\n    changeState0 : function(){\n        var opacity = Math.random() *.8;\n        var x1 = (.8 * Math.random() +.1) * width;\n        var x2 = (.8 * Math.random() +.1)* width;\n        var y1 = .2 * height;\n        var y2 = .8 * height;\n\n        TweenLite.to(this, tweenAnimationDuration, {x1: x1, x2: x2, y1: y1, y2: y2, opacity: opacity, ease: \"Power1.easeOut\"});\n    },\n\n    changeState1 : function(){\n        var opacity = Math.random() *.8;\n\n        var x1 = .2 * width;\n        var x2 = .8 * width;\n        var y1 = (.8 * Math.random() +.1) * height;\n        var y2 = (.8 * Math.random() +.1)* height;\n\n        TweenLite.to(this, tweenAnimationDuration, {x1: x1, x2: x2, y1: y1, y2: y2,opacity: opacity, ease: \"Power1.easeOut\"});\n    },\n\n    changeState2  : function(){\n        var opacity = Math.random() *.8;\n\n        var theta1 = 2 * Math.PI * Math.random();\n        var theta2 = 2 * Math.PI * Math.random();\n\n        this._theta1 = theta1;\n        this._theta2 = theta2;\n\n        var x1 = width / 2 + rad * Math.cos(theta1);\n        var y1 = height /2 + rad * Math.sin(theta1);\n        var x2 = width / 2 + rad * Math.cos(theta2);\n        var y2 = height/2  + rad * Math.sin(theta2);\n\n        TweenLite.to(this, tweenAnimationDuration, {x1: x1, x2: x2, y1: y1, y2: y2, opacity: opacity, ease: \"Power1.easeOut\"});\n    },\n\n    move0 : function(){\n        var opacity = Math.random() *.8;\n        TweenLite.to(this, tweenAnimationDuration, {x1: (Math.random() * .8 +.1) * width, x2: (Math.random() *.8 +.1) * width, opacity: opacity, ease: \"Power1.easeOut\"});\n    },\n\n    move1 : function(){\n        var opacity = Math.random() *.8;\n        TweenLite.to(this, tweenAnimationDuration, {y1: (Math.random() * .8 +.1) * height, y2: (Math.random() * .8 +.1) * height, opacity: opacity, ease: \"Power1.easeOut\"});\n    },\n\n    move2 : function(){\n        var opacity = Math.random() *.8;\n        var theta1 = 2 * Math.PI * Math.random();\n        var theta2 = 2 * Math.PI * Math.random();\n\n        TweenLite.to(this, tweenAnimationDuration, { theta1: theta1, theta2: theta2, opacity: opacity, ease: \"Power1.easeOut\"});\n    },\n\n    changeColor : function(){\n        this.isBlack = !this.isBlack;\n    }\n\n};\n\nObject.defineProperty(Line.prototype, 'theta1', {\n    get : function(){\n        return this._theta1;\n    },\n\n    set : function(val){\n        this._theta1 = val;\n\n        this.x1 = width / 2 + rad * Math.cos(val);\n        this.y1 = height / 2 + rad * Math.sin(val);\n    }\n});\n\nObject.defineProperty(Line.prototype, 'theta2', {\n    get : function(){\n        return this._theta2;\n    },\n\n    set : function(val){\n        this._theta2 = val;\n\n        this.x2 = width / 2 + rad * Math.cos(val);\n        this.y2 = height / 2 + rad * Math.sin(val);\n    }\n});\nvar App = function(){\n    this.lines = [];\n    this.currentState = 0;\n\n    for(var i = 0; i < 200; i ++){\n        var line = new Line();\n        line.init1();\n\n        this.lines.push(line);\n    }\n\n}\n\nApp.prototype = {\n    MAX_STAGE: 3,\n    isBlack       : true,\n    isChangeColor : false,\n    rad           : 0,\n\n    update : function(){\n        if(this.isChangeColor){\n            if(this.isBlack) ctx.fillStyle = \"#000\";\n            else             ctx.fillStyle = \"#fff\";\n            ctx.beginPath();\n            ctx.arc(width/2, height/2, this.rad, 0, 2 * Math.PI, false);\n            ctx.fill();\n            ctx.closePath();\n        }\n\n        for(var i = 0; i < this.lines.length; i++){\n            this.lines[i].update();\n        }\n\n    },\n\n    changeState : function(){\n        this.currentState = (this.currentState + 1) % this.MAX_STAGE;\n\n        this.changeStates[this.currentState].call(this);\n    },\n\n    changeStates : [\n        function(){\n            for(var i = 0; i < this.lines.length; i++){\n                this.lines[i].changeState0();\n            }\n        },\n        function(){\n            for(var i = 0; i < this.lines.length; i++){\n                this.lines[i].changeState1();\n            }\n        },\n        function(){\n            for(var i = 0; i < this.lines.length; i++){\n                this.lines[i].changeState2();\n            }\n        },\n    ],\n\n    changeColor : function(){\n        this.isChangeColor = true;\n        this.isBlack       = !this.isBlack;\n\n        this.rad = 0;\n\n        var rad = Math.sqrt(width/2 * width/2 + height/2 * height/2);\n        TweenLite.to(this, tweenAnimationDuration, { rad: rad, ease: \"Power1.easeOut\"});\n\n        for(var i = 0; i < this.lines.length; i++){\n            this.lines[i].changeColor();\n        }\n    },\n\n    zero : function(){\n        for(var i = 0; i < this.lines.length; i++){\n            this.lines[i].zero();\n        }\n    },\n\n    soundPlay : function(){\n        this.soundPlays[this.currentState].call(this);\n    },\n\n    soundPlays : [\n\n        function(){\n            for(var i = 0; i < this.lines.length; i++){\n                this.lines[i].move0();\n            }\n        },\n        function(){\n            for(var i = 0; i < this.lines.length; i++){\n                this.lines[i].move1();\n            }\n        },\n        function(){\n            for(var i = 0; i < this.lines.length; i++){\n                this.lines[i].move2();\n            }\n        }\n\n    ]\n};\n\n// ================\n\n//init();\n//loop();\n\nvar app = new App()\n\n\nctx.fillStyle = '#00';\nctx.fillRect(0, 0, width, height);\n\n\nsound220 = new Howl({\n    urls: ['https://dl.dropboxusercontent.com/u/7630890/sounds/sound220.mp3', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound220.ogg', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound220.wav'],\n    volume : 1,\n    onload : function(){\n        soundCount++;\n\n        if(soundCount === SOUND_MAX_COUNT) init();\n    }\n});\n\n\nsound440 = new Howl({\n    urls: ['https://dl.dropboxusercontent.com/u/7630890/sounds/sound440.mp3', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound440.ogg', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound440.wav'],\n    volume : 1,\n    onload : function(){\n        soundCount++;\n\n        if(soundCount === SOUND_MAX_COUNT) init();\n    }\n});\n\nsound880 = new Howl({\n    urls: ['https://dl.dropboxusercontent.com/u/7630890/sounds/sound880.mp3', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound880.ogg', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound880.wav'],\n    volume: 1,\n    onload : function(){\n        soundCount++;\n\n        if(soundCount === SOUND_MAX_COUNT) init();\n    }\n});\n\n\nfunction init(){\n\n    prevTime = +new Date;\n    soundLoop();\n    loop();\n}\n\nfunction loop(){\n\n    if(isBlack) ctx.fillStyle = 'rgb(0, 0, 0)';\n    else        ctx.fillStyle = 'rgb(255, 255, 255)';\n    ctx.fillRect(0, 0, width, height);\n\n\n    app.update();\n\n    requestAnimationFrame(loop);\n}\n\nfunction soundLoop(){\n\n    soundLoopCount++;\n\n    if(soundLoopCount % 12 == 0)   {\n        if(isSoundPlay)sound880.play();\n        app.zero();\n\n        setTimeout(function(){\n            if(isSoundPlay)sound880.play();\n\n            app.changeColor();\n            app.changeState();\n\n//            setTimeout(soundLoop, soundLoopDuration);\n        }, soundLoopDuration/2);\n\n        setTimeout(function(){\n            isBlack = !isBlack;\n        }, soundLoopDuration);\n\n\n        setTimeout(soundLoop, soundLoopDuration);\n    }else if(soundLoopCount % 4 == 0){\n        if(isSoundPlay) sound880.play();\n        app.changeState();\n\n        setTimeout(soundLoop, soundLoopDuration);\n    }else{\n        if(isSoundPlay) sound440.play();\n        app.soundPlay();\n\n        setTimeout(soundLoop, soundLoopDuration);\n    }\n\n\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/3-algorithm/36-undefined.js",
    "content": "// --------------------------\n\nvar width, height, prevTime, rad;\nvar sound220, sound440, sound880;\nvar isBlack = true;\nvar soundLoopCount  = 0;\nvar soundCount      = 0;\nvar soundLoopDuration = 600;\nvar tweenAnimationDuration = .4;\nvar isSoundPlay = true;\nvar SOUND_MAX_COUNT = 3;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\nrad = Math.min(width *.4, height *.4);\n\ndocument.getElementById(\"button\").addEventListener(\"click\", function(){ isSoundPlay = !isSoundPlay; });\n// ================\nvar Line = function(i){\n    this.id = i;\n    this.type = i % 4;\n    this.x = this.prevX = width / 2;\n    this.y = this.prevY = height / 2;\n};\n\nLine.prototype = {\n    curState : 0,\n\n    isBlack : false,\n    isAcl   : false,\n\n    kasoku  : 0,\n    opacity : .8,\n\n    init : function(){\n        this.inits[this.curState].call(this);\n    },\n\n    inits : [\n        function(){\n            this.x = this.prevX = width/2;\n            this.y = this.prevY = height/2;\n        },\n\n        function(){\n            if(this.type == 0){\n                this.x = this.prevX = width * Math.random();\n                this.y = this.prevY = height + 20 * Math.random();\n            }\n\n            if(this.type == 1){\n                this.x = this.prevX = width * Math.random();\n                this.y = this.prevY = 0 - 20 * Math.random();\n            }\n\n            if(this.type == 2){\n                this.x = this.prevX = -20 * Math.random();\n                this.y = this.prevY = height * Math.random();\n            }\n\n            if(this.type == 3){\n                this.x = this.prevX = width + 20 * Math.random();\n                this.y = this.prevY = height * Math.random();\n            }\n\n\n        },\n\n        function(){\n            this.y = height * Math.random();\n            this.velY = 1.5 - 3 * Math.random();\n        }\n    ],\n\n    update : function(){\n        this.updates[this.curState].call(this);\n    },\n\n    updates : [\n        function(){\n            this.prevX = this.x;///\n            this.prevY = this.y;\n\n            this.x += Math.random() * 20 - 10 + this.kasoku1;\n            this.y += Math.random() * 20 - 10 + this.kasoku2;\n            this.kasoku1 *= .8;\n            this.kasoku2 *= .8;\n\n\n            //ctx.strokeStyle = \"rgba(255, 255, 255, \" + this.opacity * (Math.random()) + \")\";\n            ctx.strokeStyle = \"#fff\";\n            ctx.beginPath();\n            ctx.moveTo(this.prevX, this.prevY);\n            ctx.lineTo(this.x, this.y);\n            ctx.closePath();\n\n            ctx.stroke();\n        },\n\n        function(){\n            this.prevX = this.x;\n            this.prevY = this.y;\n\n            if(this.type == 0){\n                this.x += Math.random() * 20 - 10 + this.kasoku1;\n                this.y -= 5 + 5 * Math.random();\n                this.kasoku1 *= .8;\n            }\n\n            if(this.type == 1){\n                this.x += Math.random() * 20 - 10 + this.kasoku1;\n                this.y += 5 + 5  * Math.random();\n                this.kasoku1 *= .8;\n            }\n\n            if(this.type == 2){\n                this.x += 5 + 5 * Math.random();\n                this.y += Math.random() * 20 - 10 + this.kasoku1;\n                this.kasoku1 *= .8;\n            }\n\n            if(this.type == 3){\n                this.x -= 5 + 5 * Math.random();\n                this.y += Math.random() * 20 - 10 + this.kasoku1;\n                this.kasoku1 *= .8;\n            }\n\n\n            //ctx.strokeStyle = \"rgba(255, 255, 255, \" + this.opacity * (Math.random()) + \")\";\n            ctx.strokeStyle = \"#fff\";\n            ctx.beginPath();\n            ctx.moveTo(this.prevX, this.prevY);\n            ctx.lineTo(this.x, this.y);\n            ctx.closePath();\n\n            ctx.stroke();\n        },\n\n        function(){\n            if(this.id % 12 == 0){\n\n                this.prevX = this.x;\n                this.prevY = this.y;\n\n                this.y -=  this.velY + this.kasoku1;\n                this.kasoku1 *= .8;\n\n\n\n                ctx.fillStyle = \"rgba(255, 255, 255, .1)\";\n                ctx.beginPath();\n                ctx.moveTo(0, this.prevY);\n                ctx.lineTo(width, this.prevY);\n                ctx.lineTo(width, this.y);\n                ctx.lineTo(0, this.y);\n                ctx.lineTo(0, this.prevY);\n                ctx.closePath();\n\n\n                ctx.fill();\n\n            }\n\n        }\n    ],\n\n    acl : function(){\n        this.kasoku1 = -50 + 100 * Math.random();\n        this.kasoku2 = -50 + 100 * Math.random();\n        this.isAcl = true;\n    },\n\n    changeState : function(){\n        this.curState = (this.curState + 1) % SOUND_MAX_COUNT;\n\n        this.init();\n        this.acl();\n    }\n\n};\n\nvar App = function(){\n    this.lines = [];\n\n    for(var i = 0; i < 300; i++){\n        var line = new Line(i);\n        this.lines.push(line);\n    }\n};\n\nApp.prototype = {\n    MAX_STAGE: 3,\n    isBlack       : true,\n    isChangeColor : false,\n    rad           : 0,\n\n    update : function(){\n\n        ctx.fillStyle = \"rgba(0, 0, 0, .1)\";\n        ctx.fillRect(0, 0, width, height);\n\n        for(var i = 0; i < this.lines.length; i++){\n            this.lines[i].update();\n        }\n\n    },\n\n    start : function(){\n        for(var i = 0; i < this.lines.length; i++){\n            this.lines[i].acl();\n        }\n    },\n\n    changeState : function(){\n        for(var i = 0; i < this.lines.length; i++){\n            this.lines[i].changeState();\n        }\n    }\n};\n\n// ================\n\n//init();\n//loop();\n\nvar app = new App()\n\n\nctx.fillStyle = '#00';\nctx.fillRect(0, 0, width, height);\n\n\nsound220 = new Howl({\n    urls: ['https://dl.dropboxusercontent.com/u/7630890/sounds/sound220.mp3', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound220.ogg', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound220.wav'],\n    volume : 1,\n    onload : function(){\n        soundCount++;\n\n        if(soundCount === SOUND_MAX_COUNT) init();\n    }\n});\n\n\nsound440 = new Howl({\n    urls: ['https://dl.dropboxusercontent.com/u/7630890/sounds/sound440.mp3', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound440.ogg', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound440.wav'],\n    volume : 1,\n    onload : function(){\n        soundCount++;\n\n        if(soundCount === SOUND_MAX_COUNT) init();\n    }\n});\n\nsound880 = new Howl({\n    urls: ['https://dl.dropboxusercontent.com/u/7630890/sounds/sound880.mp3', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound880.ogg', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound880.wav'],\n    volume: 1,\n    onload : function(){\n        soundCount++;\n\n        if(soundCount === SOUND_MAX_COUNT) init();\n    }\n});\n\n\nfunction init(){\n\n    soundLoop();\n    loop();\n}\n\nfunction loop(){\n\n    app.update();\n\n    requestAnimationFrame(loop);\n}\n\nfunction soundLoop(){\n\n    soundLoopCount++;\n\n    if(soundLoopCount % 12 == 0)   {\n        if(isSoundPlay)sound880.play();\n\n        ctx.fillStyle = '#000';\n        ctx.fillRect(0, 0, width, height);\n        app.changeState();\n\n\n        setTimeout(function(){\n            if(isSoundPlay)sound880.play();\n\n\n        }, soundLoopDuration/2);\n\n\n        setTimeout(soundLoop, soundLoopDuration);\n    }else if(soundLoopCount % 4 == 0){\n        if(isSoundPlay) sound880.play();\n\n        ctx.fillStyle = '#000';\n        ctx.fillRect(0, 0, width, height);\n\n        app.changeState();\n\n\n        setTimeout(soundLoop, soundLoopDuration);\n    }else{\n        app.start();\n        if(isSoundPlay) sound440.play();\n\n\n        setTimeout(soundLoop, soundLoopDuration);\n    }\n\n\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/3-algorithm/37-undefined.js",
    "content": "// --------------------------\n\nvar width, height, prevTime, rad;\nvar sound220, sound440, sound880;\nvar isBlack = true;\nvar soundLoopCount  = 0;\nvar soundCount      = 0;\nvar soundLoopDuration = 600;\nvar tweenAnimationDuration = .4;\nvar isSoundPlay = true;\nvar SOUND_MAX_COUNT = 2;\nvar LOOP_MAX_COUNT  = 3;\n\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\nrad = Math.min(width *.4, height *.4);\n\ndocument.getElementById(\"button\").addEventListener(\"click\", function(){ isSoundPlay = !isSoundPlay; });\n// ================\n\nvar App = function(){\n    this.scale = 20;\n    this.x = 0;\n    this.y = 0;\n    this.rad = 10;\n\n};\n\nApp.prototype = {\n\n    update : function(){\n\n        ctx.fillStyle = \"#fff\";\n        ctx.save();\n\n        ctx.translate(width/2, height/2);\n        ctx.scale(this.scale, this.scale);\n\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.rad, 0, 2 *Math.PI, false);\n        ctx.closePath();\n\n        ctx.fill();\n\n        ctx.restore();\n    },\n\n    scaleDown : function(){\n        TweenLite.to(this, 10, {scale: 1, ease: \"Power1.easeOut\"});\n\n    }\n\n\n};\n\n// ================\n\n//init();\n//loop();\n\nvar app = new App();\n\nctx.fillStyle = '#00';\nctx.fillRect(0, 0, width, height);\n\n// =============\n\nsound440 = new Howl({\n    urls: ['https://dl.dropboxusercontent.com/u/7630890/sounds/sound440.mp3', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound440.ogg', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound440.wav'],\n    volume : 1,\n    onload : function(){\n        soundCount++;\n\n        if(soundCount === SOUND_MAX_COUNT) init();\n    }\n});\n\n\nsound880 = new Howl({\n    urls: ['https://dl.dropboxusercontent.com/u/7630890/sounds/sound880.mp3', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound880.ogg', 'https://dl.dropboxusercontent.com/u/7630890/sounds/sound880.wav'],\n    volume: 1,\n    onload : function(){\n        soundCount++;\n\n        if(soundCount === SOUND_MAX_COUNT) init();\n    }\n});\n\n// =============\n\n\nfunction init(){\n\n    app.scaleDown();\n    soundLoop();\n    loop();\n}\n\nfunction loop(){\n\n    app.update();\n\n    requestAnimationFrame(loop);\n}\n\nfunction soundLoop(){\n\n    /**\n    soundLoopCount++;\n\n    if(soundLoopCount % 12 == 0)   {\n        if(isSoundPlay)sound880.play();\n\n        ctx.fillStyle = '#000';\n        ctx.fillRect(0, 0, width, height);\n        app.changeState();\n\n\n        setTimeout(function(){\n            if(isSoundPlay)sound880.play();\n\n\n        }, soundLoopDuration/2);\n\n\n        setTimeout(soundLoop, soundLoopDuration);\n    }else if(soundLoopCount % 4 == 0){\n        if(isSoundPlay) sound880.play();\n\n        ctx.fillStyle = '#000';\n        ctx.fillRect(0, 0, width, height);\n\n        app.changeState();\n\n\n        setTimeout(soundLoop, soundLoopDuration);\n    }else{\n        app.impulse();\n        if(isSoundPlay) sound440.play();\n\n\n        setTimeout(soundLoop, soundLoopDuration);\n    }\n     */\n\n\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/3-algorithm/38-undefined.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar side, rad;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nvar ptArr    = [];\nvar ptNumber = 120;\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\nside = Math.min(width, height) * .9;\nrad  = side / 2 * .8;\n\ncanvas.width  = width;\ncanvas.height = height;\n\nvar virtualCanvas = document.createElement(\"canvas\");\nvar virtualLeft, virtualTop;\nvar maxRad = Math.sqrt(side  * side + side * side) / 2;\nvar sideNum = 5;\n\nvirtualCanvas.width = side;\nvirtualCanvas.height = side;\n\nvirtualLeft = (width - side) / 2;\nvirtualTop  = (height - side) / 2;\n\nvar virtualCtx    = virtualCanvas.getContext(\"2d\");\n\n// ================\nvar Circles = function(){\n    this.circles = [];\n\n    for(var yPos = 0; yPos < sideNum; yPos++){\n        this.circles[yPos] = [];\n\n        for(var xPos = 0; xPos < sideNum; xPos++){\n            this.circles[yPos][xPos] = new Circle();\n        }\n    }\n};\n\nCircles.prototype = {\n\n    count : 0,\n    update : function(){\n        this.count += .01;\n        var scale = (6 - 4 * Math.cos(this.count))/10;\n        virtualCtx.save();\n        virtualCtx.translate(side/2, side/2);\n        virtualCtx.scale(scale, scale);\n\n\n        for(var yPos = 0; yPos < sideNum; yPos++) {\n            for (var xPos = 0; xPos < sideNum; xPos++) {\n                var centerNum = (sideNum - 1)/2;\n                var xx = (xPos - centerNum) * side;\n                var yy = (yPos - centerNum) * side;\n\n                virtualCtx.save();\n                virtualCtx.translate(xx, yy);\n                this.circles[yPos][xPos].update();\n                virtualCtx.restore();\n\n            }\n        }\n\n        virtualCtx.restore();\n    }\n};\n\n\n\n\nvar Circle = function(){\n\n    this.tempCanvas = document.createElement(\"canvas\");\n\n    this.tempCanvas.width  = side;\n    this.tempCanvas.height = side;\n\n    this.tempCtx = this.tempCanvas.getContext(\"2d\");\n\n    for(var i = 0; i < ptNumber; i++){\n        this.sides[i] = rad * (.8 +.2 * Math.random());\n        this.randomSides[i] = rad / 3 * (Math.random() -.5);\n    }\n\n};\n\nCircle.prototype = {\n    sides  : [],\n    randomSides : [],\n    count : 0,\n    rot : 0,\n\n    update : function(){\n        this.count += 0.1;\n\n        var theta;\n        this.tempCtx.clearRect(0, 0, side, side);\n\n        for(var i = 0; i < ptNumber; i++){\n            var num = i;\n            var randomRad = this.randomSides[i] * Math.cos(this.count);\n            theta = i / ptNumber * 2 * Math.PI;\n\n            this.tempCtx.beginPath();\n            this.tempCtx.strokeStyle = \"#ff0000\";\n            this.tempCtx.moveTo( (this.sides[num] + randomRad) * Math.cos(theta) + side / 2, (this.sides[num] + randomRad) * Math.sin(theta) + side / 2);\n            this.tempCtx.lineTo( maxRad * Math.cos(theta) + side / 2, maxRad * Math.sin(theta) + side / 2);\n            this.tempCtx.stroke();\n            this.tempCtx.closePath();\n\n        }\n\n        virtualCtx.save();\n\n        virtualCtx.drawImage(this.tempCanvas, -side/2, -side/2);\n\n        virtualCtx.restore();\n\n\n\n    }\n\n};\n\n// ================\nvar circle;\n\ninit();\nloop();\n\nfunction init(){\n    circle = new Circles();\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    prevTime = +new Date;\n\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    clear();\n    circle.update();\n\n    ctx.drawImage( virtualCanvas, virtualLeft, virtualTop);\n\n\n    requestAnimationFrame(loop);\n}\n\nfunction clear(){\n\n    virtualCtx.fillStyle = '#fff';\n    virtualCtx.fillRect(0, 0, side, side);\n\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/3-algorithm/39-undefined.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar virtualWidth, virtualHeight, virtualLeft, virtualRight;\nvar widthNumber, heightNumber;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// 100pix random\nvar intervalX = 100;\n\nvirtualWidth = parseInt(width / intervalX) * intervalX + intervalX * 4;\nvirtualLeft = (width - virtualWidth) / 2;\nvirtualRight = virtualLeft + virtualWidth;\n\nwidthNumber = virtualWidth / 100;\n\nheightNumber = parseInt(height / 2 / 100) + 1;\n\n\n// ================\nvar obj = {};\nobj.rad = 15;\nvar velY = -200;\n\nvar LeftCircle = function( xPos, yPos ){\n    this.ctx = ctx;\n\n    this.x = xPos;\n    this.y = yPos;\n\n    this.theta = 0;\n};\n\nLeftCircle.prototype = {\n    col : \"#fff\",\n    update : function(){\n        this.ctx.save();\n\n        this.ctx.translate(this.x, this.y);\n        this.ctx.rotate(this.theta);\n\n        this.ctx.beginPath();\n        this.ctx.moveTo( 0, 0);\n        this.ctx.lineTo( obj.rad * Math.cos(Math.PI * 3/2), obj.rad * Math.sin(Math.PI*3/2) );\n        this.ctx.arc(0, 0, obj.rad, Math.PI * 3/2, Math.PI *  2, false);\n        this.ctx.lineTo( obj.rad * Math.cos( 2 * Math.PI), obj.rad * Math.sin(2 * Math.PI) );\n        this.ctx.closePath();\n\n        this.ctx.fillStyle = this.col;\n        this.ctx.fill();\n\n\n        this.ctx.beginPath();\n        this.ctx.moveTo( 0, 0);\n        this.ctx.lineTo( obj.rad * Math.cos(Math.PI /2), obj.rad * Math.sin(Math.PI/2) );\n        this.ctx.arc(0, 0, obj.rad, Math.PI /2, Math.PI, false);\n        this.ctx.lineTo( obj.rad * Math.cos(Math.PI), obj.rad * Math.sin(Math.PI) );\n        this.ctx.closePath();\n\n        this.ctx.fillStyle = this.col;\n        this.ctx.fill();\n\n        this.ctx.restore();\n\n    },\n\n    rotate : function(){\n        var theta = this.theta + Math.PI;\n\n        TweenLite.to(this, .6, { theta: theta});\n    }\n};\n\n\nvar CircleTopLeft = function( xPos, yPos ){\n    _.bindAll(this, \"rotate\", \"onCompleteRotation\");\n    this.ctx = ctx;\n\n    this.x = xPos;\n    this.y = yPos;\n\n    this.acl = (velY * -2) / 0.6;\n\n    this.thetaVal = Math.PI * 2 / .6;\n    this.velX = 100 / .6;\n};\n\n\n\nCircleTopLeft.prototype = {\n    theta : 0,\n    col : \"#fff\",\n    acl : null,\n\n    originX : null,\n    originY : null,\n    originTheta : null,\n\n    changePos : function(){\n    },\n\n    update : function(dt){\n\n\n\n        if(this.isRotation){\n            this.x -= this.velX * dt;\n            if(this.x < this.originX - intervalX) this.x = this.originX - intervalX;\n\n            this.velY += this.acl * dt;\n            this.y -= this.velY * dt;\n            if(this.y < this.originY) this.y = this.originY;\n\n            this.theta += this.thetaVal * dt;\n        }\n\n        this.ctx.save();\n\n        this.ctx.translate(this.x, this.y);\n        this.ctx.rotate(this.theta);\n\n        this.ctx.beginPath();\n        this.ctx.moveTo( 0, 0);\n        this.ctx.lineTo( obj.rad * Math.cos(Math.PI), obj.rad * Math.sin(Math.PI) );\n        this.ctx.arc(0, 0, obj.rad, Math.PI, Math.PI * 3 / 2, false);\n        this.ctx.lineTo( obj.rad * Math.cos(3 / 2 * Math.PI), obj.rad * Math.sin(3 / 2 * Math.PI) );\n        this.ctx.closePath();\n\n        this.ctx.fillStyle = this.col;\n        this.ctx.fill();\n\n        this.ctx.restore();\n    },\n\n    rotate : function(){\n        var duration = 0.6;\n\n        this.velY = velY;\n        this.isRotation = true;\n\n        this.originX     = this.x;\n        this.originY     = this.y;\n        this.originTheta = this.theta;\n\n        setTimeout(this.onCompleteRotation, 600);\n    },\n\n    onCompleteRotation : function(){\n        this.isRotation = false;\n\n        this.x = this.originX - intervalX;\n        this.y = this.originY;\n        this.theta = this.originTheta;\n\n        if(this.x <= virtualLeft) this.x += virtualWidth;\n    }\n};\n\nvar CircleBottomRight = function( xPos, yPos ){\n    _.bindAll(this, \"rotate\", \"onCompleteRotation\");\n    this.ctx = ctx;\n\n    this.x = xPos;\n    this.y = yPos;\n\n    this.acl = (velY * -2) / 0.6;\n\n    this.thetaVal = Math.PI * 2 / .6;\n    this.velX = 100 / .6;\n\n    console.log(this.x);\n\n};\n\nCircleBottomRight.prototype = {\n    theta : 0,\n    col : \"#fff\",\n    acl : null,\n\n    originX : null,\n    originY : null,\n    originTheta : null,\n\n    update : function(dt){\n        if(this.isRotation){\n            this.x += this.velX * dt;\n            if(this.x > this.originX + intervalX) this.x = this.originX + intervalX;\n\n            this.velY += this.acl * dt;\n            this.y += this.velY * dt;\n            if(this.y > this.originY) this.y = this.originY;\n\n            this.theta += this.thetaVal * dt;\n        }\n\n\n\n        this.ctx.save();\n\n        this.ctx.translate(this.x, this.y);\n        this.ctx.rotate(this.theta);\n\n\n        this.ctx.beginPath();\n        this.ctx.moveTo( 0, 0);\n        this.ctx.lineTo( obj.rad * Math.cos(0), obj.rad * Math.sin(0) );\n        this.ctx.arc(0, 0, obj.rad, 0, Math.PI  / 2, false);\n        this.ctx.lineTo( obj.rad * Math.cos(1 / 2 * Math.PI), obj.rad * Math.sin(1 / 2 * Math.PI) );\n        this.ctx.closePath();\n\n        this.ctx.fillStyle = this.col;\n        this.ctx.fill();\n\n        this.ctx.restore();\n\n    },\n\n    rotate : function(){\n        var duration = 0.6;\n\n        this.velY = velY;\n        this.isRotation = true;\n\n        this.originX     = this.x;\n        this.originY     = this.y;\n        this.originTheta = this.theta;\n\n        setTimeout(this.onCompleteRotation, 600);\n    },\n\n    onCompleteRotation : function(){\n        this.isRotation = false;\n\n        this.x = this.originX + intervalX;\n        this.y = this.originY;\n        this.theta = this.originTheta;\n\n        if(this.x >= virtualRight) this.x -= virtualWidth;\n    }\n};\n\n// ================\n\nvar circleTopLeft;\n\n//var circleArr = [];\nvar circleWidthArr = [];\nvar circleBotArr   = [];\nvar circleLeftArr  = [];\n\nvar count = 0;\nvar i, j;\n\ncircleWidthArr[count] = [];\ncircleBotArr[count]   = [];\ncircleLeftArr[count]  = [];\n\nfor(i = 0; i < widthNumber; i++){\n    xPos  = (i + 1) * intervalX + virtualLeft;\n    xPos2 = i * intervalX + virtualLeft;\n    yPos = height / 2;\n\n    circleWidthArr[count][i] = new CircleTopLeft( xPos, yPos );\n    circleBotArr[count][i]   = new CircleBottomRight( xPos2, yPos )\n}\n\nfor(var i = 1; i < widthNumber - 1; i++){\n    var xPos = i * intervalX + virtualLeft;\n    var yPos = height / 2;\n\n    circleLeftArr[count][i - 1] = new LeftCircle(xPos, yPos);\n}\n\nif(heightNumber > 0) {\n    var yPos1, yPos2;\n    var xPos1, xPos2;\n    var yPos,  xPos;\n\n    for (j = 1; j < heightNumber; j++) {\n        yPos1 = height / 2 - intervalX * j;\n        yPos2 = height / 2 + intervalX * j;\n\n        var tempCount = 2 * count + 1;\n\n        for(var k = 0; k < 2; k++) {\n            circleWidthArr[tempCount] = [];\n            circleBotArr[tempCount]   = [];\n            circleLeftArr[tempCount]  = [];\n\n            if(k == 0) yPos = yPos1;\n            if(k == 1) yPos = yPos2;\n\n            for (i = 0; i < widthNumber; i++) {\n                if (j % 2 == 1) xPos1 = (i + 1) * intervalX + intervalX / 2 + virtualLeft;\n                else           xPos1 = (i + 1) * intervalX + virtualLeft;\n\n                if (j % 2 == 1) xPos2 = i * intervalX + virtualLeft - intervalX / 2;\n                else           xPos2 = i * intervalX + virtualLeft;\n\n                circleWidthArr[tempCount][i] = new CircleTopLeft(xPos1, yPos);\n                circleBotArr[tempCount][i] = new CircleBottomRight(xPos1, yPos);\n            }\n\n            for (i = 1; i < widthNumber - 1; i++) {\n                if (j % 2 == 1) xPos = i * intervalX + intervalX / 2 + virtualLeft;\n                else            xPos = i * intervalX + virtualLeft;\n\n                circleLeftArr[tempCount][i - 1] = new LeftCircle(xPos, yPos);\n            }\n\n            tempCount++;\n        }\n\n        count++;\n\n    }\n}\n\n\n\n// ================\n\ninit();\nloop();\n\nfunction init(){\n\n\n    prevTime = +new Date;\n\n    movement();\n    setTimeout(timer, 1000);\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    for(var j = 0; j < circleWidthArr.length; j++) {\n\n        for (var i = 0; i < circleWidthArr[j].length; i++) {\n            circleWidthArr[j][i].update(duration);\n            circleBotArr[j][i].update(duration);\n        }\n\n        for (var i = 0; i < circleLeftArr[j].length; i++) {\n            circleLeftArr[j][i].update(duration);\n        }\n\n    }\n\n\n\n    requestAnimationFrame(loop);\n}\n\nfunction timer(){\n    var randomRad = 5 + parseInt(Math.random() * 45);\n    TweenLite.to( obj, 1, { rad: randomRad });\n\n    setTimeout(timer, 2000);\n}\n\nfunction movement(){\n    for(var j = 0; j < circleWidthArr.length; j++) {\n\n        for (var i = 0; i < circleWidthArr[j].length; i++) {\n            circleWidthArr[j][i].rotate();\n            circleBotArr[j][i].rotate();\n\n        }\n\n        for (var i = 0; i < circleLeftArr[j].length; i++) {\n            circleLeftArr[j][i].rotate();\n        }\n    }\n\n    setTimeout(movement, 2000);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/3-algorithm/40-undefined.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\n\n// ================\n\nvar xNum = 15;\nvar yNum = 7;\nvar halfXNum = 8;\nvar halfYNum = 4;\n\nvar kankaku = 20;\n\nvar xPosArr = [];\nvar yPosArr = [];\n\ninit();\nloop();\n\nvar curRad = 20;\n\nfunction init(){\n\n    var halfWidth = width/2;\n    var halfHeight = height/2;\n\n    for(var xx = 0; xx < xNum; xx++){\n        xPosArr[xx] = [];\n        yPosArr[xx] = [];\n        for(var yy = 0; yy < yNum; yy++){\n            var xPos = halfWidth  + (xx - halfXNum) * kankaku;\n            var yPos = halfHeight + (yy - halfYNum) * kankaku;\n\n            xPosArr[xx][yy] = xPos;\n            yPosArr[xx][yy] = yPos;\n\n        }\n    }\n\n    prevTime = +new Date;\n\n    timer()\n}\n\nfunction timer(){\n    var rad =  curRad + 20;\n    if(rad > 300) rad = 20;\n\n    TweenLite.to(this,.5, { curRad: rad});\n\n    setTimeout(timer, 600);\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.globalCompositeOperation  = 'source-over';\n\n    ctx.fillStyle = '#fff';\n    ctx.fillRect(0, 0, width, height);\n\n    for(var xx = 0; xx < xNum; xx++) {\n        for (var yy = 0; yy < yNum; yy++) {\n            //xPosArr[xx][yy] += Math.random() - .5;\n            //yPosArr[xx][yy] += Math.random() - .5;\n\n            ctx.globalCompositeOperation = 'xor';\n\n            ctx.beginPath();\n            ctx.fillStyle = \"#000000\";\n            ctx.arc(xPosArr[xx][yy], yPosArr[xx][yy], curRad, 0, 2*Math.PI, false);\n            ctx.fill();\n            ctx.closePath();\n        }\n    }\n\n\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/3-algorithm/41-undefined.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\nvar bigRad = 200;\n\n// ================\nvar Circle = function(baseTheta){\n    this.ctx = ctx;\n\n    this.rad = parseInt(100 + 30 * Math.random());\n\n    this.theta = 0;\n    this.tehtaVel = Math.PI / 20;\n\n    this.baseTheta = baseTheta | 0;\n\n    this.x = width/2 + Math.cos(baseTheta) * bigRad;\n    this.y = height/2 + Math.sin(baseTheta) * bigRad;\n\n    this.ptX = this.x + this.rad * Math.cos(this.theta);\n    this.ptY = this.y + this.rad * Math.sin(this.theta);\n    this.ptRad = 10;\n\n    this.velTheta = Math.random() * 0.05 + 0.01;\n};\n\nCircle.prototype = {\n    update : function(){\n        this.baseTheta += 0.01;\n        this.theta += this.velTheta;\n\n        this.x = width/2  + Math.cos(this.baseTheta) * bigRad;\n        this.y = height/2 + Math.sin(this.baseTheta) * bigRad;\n        this.ptX = this.x + this.rad * Math.cos(this.theta);\n\n        this.ptY = this.y + this.rad * Math.sin(this.theta);\n\n\n        this.ctx.save();\n\n        this.ctx.beginPath();\n        this.ctx.strokeStyle = \"#fff\";\n        this.ctx.arc(this.x, this.y, this.rad, 0, 2*Math.PI, false);\n        this.ctx.stroke();\n        this.ctx.closePath();\n\n        this.ctx.beginPath();\n        this.ctx.fillStyle = \"#fff\";\n        this.ctx.arc(this.ptX, this.ptY, this.ptRad, 0, 2 * Math.PI, false);\n        this.ctx.fill();\n        this.ctx.closePath();\n\n        this.ctx.restore();\n    }\n};\n\n// ================\nvar circle1;\nvar circle2;\nvar circle3;\n\ninit();\nloop();\n\nfunction init(){\n    circle1 = new Circle(0);\n    circle2 = new Circle(2/3*Math.PI);\n    circle3 = new Circle(4/3*Math.PI);\n\n\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    circle1.update();\n    circle2.update();\n    circle3.update();\n\n    ctx.beginPath();\n    ctx.strokeStyle = '#fff';\n    ctx.moveTo(circle1.ptX, circle1.ptY);\n    ctx.lineTo(circle2.ptX, circle2.ptY);\n    ctx.lineTo(circle3.ptX, circle3.ptY);\n    ctx.lineTo(circle1.ptX, circle1.ptY);\n    ctx.stroke();\n    ctx.closePath();\n\n\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/3-algorithm/42-undefined.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar app;\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\nvar Shape1 = function(){\n    _.bindAll(this, \"tweenOnComplete1\", \"tweenOnComplete2\");\n    this.x = -this.sideRad;\n    this.y = height/2 - this.sideRad;\n\n    TweenLite.to(this, 1, { x : width/2, onComplete : this.tweenOnComplete1, ease:\"Power2.easeOut\", delay:.2 });\n};\n\nShape1.prototype = {\n    type : \"circle1\",\n    sideRad : 50,\n    rect    : 100,\n\n    update : function(){\n        switch (this.type){\n            case \"circle1\":\n                this.circle1Update();\n                break;\n            case \"circle2\":\n                this.circle2Update();\n                break;\n        }\n    },\n\n    circle1Update : function(){\n        if(this.x > width/2 - this.sideRad * 2){\n            var side = this.x - (width/2 - this.sideRad * 2);\n            if(side > 0){\n                side = this.sideRad - side;\n            }else{\n                side *= -1;\n            }\n            var rectHeight = Math.sqrt(this.sideRad * this.sideRad - side * side);\n            var theta = Math.atan2( rectHeight, side);\n\n            ctx.save();\n            ctx.fillStyle = \"#fff\";\n            ctx.beginPath();\n            ctx.arc(this.x, this.y, this.sideRad, 0, 2 * Math.PI, false);\n            ctx.closePath();\n            ctx.fill();\n            ctx.restore();\n\n            ctx.save();\n            ctx.fillStyle = \"#000\";\n            ctx.beginPath();\n            ctx.moveTo(this.x + this.sideRad * Math.cos( - theta), this.y + this.sideRad * Math.sin( - theta));\n            ctx.arc(this.x, this.y, this.sideRad, -theta, theta, false);\n            ctx.lineTo(this.x + this.sideRad * Math.cos(theta), this.y + this.sideRad * Math.sin( theta));\n            ctx.closePath();\n            ctx.fill();\n            ctx.restore();\n\n        }else{\n            ctx.save();\n            ctx.fillStyle = \"#fff\";\n            ctx.beginPath();\n            ctx.arc(this.x, this.y, this.sideRad, 0, 2 * Math.PI, false);\n            ctx.closePath();\n            ctx.fill();\n            ctx.restore();\n        }\n   },\n\n    circle2Update : function(){\n\n        if(this.y <  window.innerHeight/2 + this.sideRad){\n\n\n            var startY = window.innerHeight/2 - this.sideRad * 2;\n            var height = (this.y - this.sideRad) - startY;\n            //console.log(height)\n\n            ctx.save();\n            ctx.fillStyle = \"#000\";\n            ctx.beginPath();\n            ctx.fillRect(width/2 - this.sideRad - 1, startY, this.rect + 2, height);\n            ctx.closePath();\n        }else{\n\n            var startY = window.innerHeight/2 - this.sideRad * 2;\n            ctx.save();\n            ctx.fillStyle = \"#000\";\n            ctx.beginPath();\n            ctx.fillRect(width/2 - this.sideRad - 1, startY, this.rect + 2, this.sideRad * 2);\n            ctx.closePath();\n        }\n        //console.log(this.y);\n\n        ctx.save();\n        ctx.fillStyle = \"#000\";\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.sideRad, 0, 2 * Math.PI, false);\n        ctx.closePath();\n        ctx.fill();\n        ctx.restore();\n    },\n    tweenOnComplete1 : function(){\n        this.type = \"circle2\";\n        TweenLite.to(this, 1, { y : height + this.sideRad, ease:\"Power2.easeIn\",onComplete : this.tweenOnComplete2 });\n    },\n    tweenOnComplete2 : function(){\n        this.type = \"circle1\";\n        this.x = -this.sideRad;\n        this.y = height/2 - this.sideRad;\n\n        TweenLite.to(this, 1, { x : width/2, onComplete : this.tweenOnComplete1, ease:\"Power2.easeOut\", delay:.5 });\n    }\n};\n\n// ---------------\n\nvar Shape = function(){\n    _.bindAll(this, 'tweenOnComplete1');\n    this.x = width/2;\n    this.y = height + this.sideRad;\n\n    TweenLite.to(this, 1, { y : height/2 - this.sideRad ,  onComplete : this.tweenOnComplete1 , ease:\"Power2.easeOut\"});\n};\n\nShape.prototype = {\n    type   : \"rect\",\n    sideRect : 100,\n    sideRad  : 50,\n\n    update : function(){\n\n\n        switch (this.type){\n            case \"circle\":\n                this.drawCircle();\n                break;\n            case \"rect\":\n                this.drawRect();\n                break;\n        }\n    },\n\n    drawRect : function(){\n\n\n        if(this.y < height / 2 + this.sideRad){\n\n            var rectHeight = height/2 + this.sideRad - this.y;\n            var rectWidth, theta;\n            var circleHeight, circleWidth;\n\n\n            ctx.save();\n            ctx.fillStyle = \"#000\";\n            ctx.beginPath();\n            ctx.arc(this.x, this.y, this.sideRad, 0, 2 * Math.PI, false);\n            ctx.closePath();\n            ctx.fill();\n            ctx.restore();\n\n            ctx.save();\n            ctx.fillStyle = \"#fff\";\n            ctx.fillRect(this.x - this.sideRad, this.y - this.sideRad, this.sideRect, rectHeight);\n            ctx.restore();\n\n        }else{\n            ctx.save();\n            ctx.fillStyle = \"#000\";\n            ctx.beginPath();\n            ctx.arc(this.x, this.y, this.sideRad, 0, 2 * Math.PI, false);\n            ctx.fill();\n            ctx.closePath();\n            ctx.restore();\n        }\n\n\n    },\n\n    drawCircle : function(){\n\n    },\n    tweenOnComplete1 : function(){\n        var self = this;\n        setTimeout(function(){\n            self.y = height + self.sideRad;\n            TweenLite.to(self, 1, { y : height/2 - self.sideRad ,  onComplete : self.tweenOnComplete1 , ease:\"Power2.easeOut\", delay:.5});\n        }, 1000);\n    },\n\n};\n\nvar Floor = function(){\n    this.y = height/2;\n    this.height = height/2;\n};\n\nFloor.prototype = {\n    update : function(){\n        ctx.fillStyle = \"#fff\";\n\n        ctx.save();\n        ctx.fillRect(0, this.y, width, this.height);\n        ctx.restore();\n    }\n};\n\n// ----------------\n\nvar App = function(){\n    this.Floor = new Floor();\n    this.shape = new Shape();\n    this.shape1 = new Shape1();\n};\n\nApp.prototype = {\n    update : function(){\n        this.Floor.update();\n        this.shape.update();\n        this.shape1.update();\n    }\n};\n\n\n// ================\n\ninit();\nloop();\n\nfunction init(){\n    app = new App();\n\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#000';\n    ctx.fillRect(0, 0, width, height);\n\n    app.update();\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/4-webgl/0-test-three-js-example.js",
    "content": "/**\n *\n * Created by kenji-special on 9/22/14.\n */\n//if ( ! Detector.webgl ) Detector.addGetWebGLMessage();\n\nvar container, stats;\n\nvar camera, scene, renderer;\n\nvar mesh;\n\ninit();\nanimate();\n\nfunction init() {\n\n    container = document.getElementById( 'container' );\n\n    //\n\n    camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 4000 );\n    camera.position.z = 2750;\n\n    scene = new THREE.Scene();\n\n\n    var segments = 10000;\n\n    var geometry = new THREE.BufferGeometry();\n    var material = new THREE.LineBasicMaterial({ vertexColors: true });\n\n    geometry.addAttribute( 'position', new Float32Array( segments * 3 ), 3 );\n    geometry.addAttribute( 'color', new Float32Array( segments * 3 ), 3 );\n\n    var positions = geometry.getAttribute( 'position' ).array;\n    var colors = geometry.getAttribute( 'color' ).array;\n\n    var r = 800;\n\n    for ( var i = 0; i < segments; i ++ ) {\n\n        var x = Math.random() * r - r / 2;\n        var y = Math.random() * r - r / 2;\n        var z = Math.random() * r - r / 2;\n\n        // positions\n\n        positions[ i * 3 ] = x;\n        positions[ i * 3 + 1 ] = y;\n        positions[ i * 3 + 2 ] = z;\n\n        // colors\n\n        colors[ i * 3 ] = ( x / r ) + 0.5;\n        colors[ i * 3 + 1 ] = ( y / r ) + 0.5;\n        colors[ i * 3 + 2 ] = ( z / r ) + 0.5;\n\n    }\n\n    geometry.computeBoundingSphere();\n\n    mesh = new THREE.Line( geometry, material );\n    scene.add( mesh );\n\n    //\n\n    renderer = new THREE.WebGLRenderer( { antialias: false, canvas: document.getElementById('c') } );\n    renderer.setSize( window.innerWidth, window.innerHeight );\n\n    renderer.gammaInput = true;\n    renderer.gammaOutput = true;\n\n    //container.appendChild( renderer.domElement );\n\n    //\n\n    stats = new Stats();\n    stats.domElement.style.position = 'absolute';\n    stats.domElement.style.top = '0px';\n    //container.appendChild( stats.domElement );\n    document.body.appendChild(stats.domElement);\n\n\n    //\n\n    window.addEventListener( 'resize', onWindowResize, false );\n\n}\n\nfunction onWindowResize() {\n\n    camera.aspect = window.innerWidth / window.innerHeight;\n    camera.updateProjectionMatrix();\n\n    renderer.setSize( window.innerWidth, window.innerHeight );\n\n}\n\n//\n\nfunction animate() {\n\n    requestAnimationFrame( animate );\n\n    render();\n    stats.update();\n\n}\n\nfunction render() {\n\n    var time = Date.now() * 0.001;\n\n    mesh.rotation.x = time * 0.25;\n    mesh.rotation.y = time * 0.5;\n\n    renderer.render( scene, camera );\n\n}\n"
  },
  {
    "path": "app/scripts/4-webgl/1-test-three-js-example.js",
    "content": "\nvar container, stats;\n\nvar camera, scene, renderer;\n\nvar mesh, parent_node;\nvar line;\n\nvar radius, segments, material, geometry;\n\ninit();\nanimate();\n\nfunction init() {\n\n    //container = document.getElementById( 'container' );\n\n    camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );\n    camera.position.z = 9000;\n\n    scene = new THREE.Scene();\n\n    var geometry = new THREE.BufferGeometry();\n    var material = new THREE.LineBasicMaterial({ vertexColors: true });\n\n    var positions = [];\n    var next_positions_index = 0;\n    var colors = [];\n    var indices_array = [];\n\n    // --------------------------------\n    var iteration_count = 4;\n    var rangle = 60 * Math.PI / 180.0;\n\n    function add_vertex(v) {\n\n        if (next_positions_index == 0xffff) throw new Error(\"Too many points\");\n\n        positions.push(v.x, v.y, v.z);\n        colors.push(Math.random()*0.5+0.5, Math.random()*0.5+0.5, 1);\n        return next_positions_index++;\n    }\n\n    // simple Koch curve\n    function snowflake_iteration(p0, p4, depth) {\n\n        if (--depth < 0) {\n\n            var i = next_positions_index-1; // p0 already there\n            add_vertex(p4);\n            indices_array.push(i, i+1);\n            return;\n        }\n\n        var v = p4.clone().sub(p0);\n        var v_tier = v.clone().multiplyScalar(1.0/3.0);\n        var p1 = p0.clone().add(v_tier);\n\n        var angle = Math.atan2(v.y, v.x) + rangle;\n        var length = v_tier.length();\n        var p2 = p1.clone();\n        p2.x += Math.cos(angle) * length;\n        p2.y += Math.sin(angle) * length;\n\n        var p3 = p0.clone().add(v_tier).add(v_tier);\n\n        snowflake_iteration(p0, p1, depth);\n        snowflake_iteration(p1, p2, depth);\n        snowflake_iteration(p2, p3, depth);\n        snowflake_iteration(p3, p4, depth);\n    }\n\n    function snowflake(points, loop, x_offset) {\n\n        for (var iteration = 0; iteration != iteration_count; ++iteration) {\n\n            add_vertex(points[0]);\n            for (var p_index=0, p_count=points.length-1; p_index != p_count; ++p_index) {\n                snowflake_iteration(points[p_index], points[p_index+1], iteration);\n            }\n\n            if (loop) snowflake_iteration(points[points.length-1], points[0], iteration);\n\n            // translate input curve for next iteration\n            for (var p_index=0, p_count=points.length; p_index != p_count; ++p_index) {\n                points[p_index].x += x_offset;\n            }\n\n        }\n    }\n\n    var y = 0;\n    snowflake\n    (\n        [\n            new THREE.Vector3(0, y+0, 0),\n            new THREE.Vector3(500, y+0, 0)\n        ],\n        false, 600\n    );\n\n    y += 600;\n    snowflake\n    (\n        [\n            new THREE.Vector3(0, y+0, 0),\n            new THREE.Vector3(250, y+400, 0),\n            new THREE.Vector3(500, y+0, 0)\n        ],\n        true, 600\n    );\n\n    y += 600;\n    snowflake\n    (\n        [\n            new THREE.Vector3(0, y+0, 0),\n            new THREE.Vector3(500, y, 0),\n            new THREE.Vector3(500, y+500, 0),\n            new THREE.Vector3(0, y+500, 0),\n        ],\n        true, 600\n    );\n\n    y += 1000;\n    snowflake\n    (\n        [\n            new THREE.Vector3(250, y+0, 0),\n            new THREE.Vector3(500, y+0, 0),\n            new THREE.Vector3(250, y+0, 0),\n            new THREE.Vector3(250, y+250, 0),\n            new THREE.Vector3(250, y+0, 0),\n            new THREE.Vector3(0, y, 0),\n            new THREE.Vector3(250, y+0, 0),\n            new THREE.Vector3(250, y-250, 0),\n            new THREE.Vector3(250, y+0, 0),\n        ],\n        false, 600\n    );\n    // --------------------------------\n\n    geometry.addAttribute( 'index', new Uint16Array( indices_array ), 1 );\n    geometry.addAttribute( 'position', new Float32Array( positions ), 3 );\n    geometry.addAttribute( 'color', new Float32Array( colors ), 3 );\n    geometry.computeBoundingSphere();\n\n    mesh = new THREE.Line( geometry, material, THREE.LinePieces );\n    mesh.position.x -= 1200;\n    mesh.position.y -= 1200;\n\n    parent_node = new THREE.Object3D();\n//    parent_node.add(mesh);\n\n    //scene.add( parent_node );\n\n        radius   = 100,\n        segments = 64,\n        material = new THREE.LineBasicMaterial( { color: 0x0000ff } ),\n        geometry = new THREE.CircleGeometry( radius, segments );\n\n    console.log(geometry);\n\n// Remove center vertex\n    geometry.vertices.shift();\n\n    line = new THREE.Line( geometry, material );\n    console.log(line.geometry);\n    scene.add( line );\n\n    renderer = new THREE.WebGLRenderer( { antialias: false, canvas: document.getElementById('c') } );\n    renderer.setSize( window.innerWidth, window.innerHeight );\n\n    renderer.gammaInput = true;\n    renderer.gammaOutput = true;\n\n    //container.appendChild( renderer.domElement );\n\n    //\n\n    stats = new Stats();\n    stats.domElement.style.position = 'absolute';\n    stats.domElement.style.top = '0px';\n    document.body.appendChild( stats.domElement );\n\n    //\n\n    window.addEventListener( 'resize', onWindowResize, false );\n\n}\n\nfunction onWindowResize() {\n\n    camera.aspect = window.innerWidth / window.innerHeight;\n    camera.updateProjectionMatrix();\n\n    renderer.setSize( window.innerWidth, window.innerHeight );\n\n}\n\n//\n\nfunction animate() {\n\n\n    requestAnimationFrame( animate );\n\n    render();\n    stats.update();\n\n}\n\nfunction render() {\n    //line.geometry.parameters.radius = 100 + 100 * Math.random();\n    line.scale.x += .1;\n\n    var time = Date.now() * 0.001;\n\n    //mesh.rotation.x = time * 0.25;\n    //mesh.rotation.y = time * 0.5;\n    parent_node.rotation.z = time * 0.5;\n\n    renderer.render( scene, camera );\n\n}"
  },
  {
    "path": "app/scripts/4-webgl/2-test-three-js-example.js",
    "content": "var container, stats;\nvar camera, scene, renderer;\nvar group;\nvar mouseX = 0, mouseY = 0;\n\nvar windowHalfX = window.innerWidth / 2;\nvar windowHalfY = window.innerHeight / 2;\n\nvar mesh1, mesh2, mesh3;\n\ninit();\nanimate();\n\n\n\nfunction init() {\n\n    //container = document.getElementById( 'container' );\n\n    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );\n    camera.position.z = 500;\n\n    scene = new THREE.Scene();\n\n    group = new THREE.Object3D();\n    scene.add( group );\n\n    // earth\n\n    var loader = new THREE.TextureLoader();\n    loader.load( 'image/earth.jpg', function ( texture ) {\n\n        var geometry = new THREE.SphereGeometry( 40, 40, 40 );\n\n        var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );\n        var mesh = new THREE.Mesh( geometry, material );\n        mesh.position.x = 0;\n        //group.add( mesh );\n        scene.add(mesh);\n\n        mesh1 = mesh;\n    } );\n\n    loader.load( 'image/portfolio.jpg', function(texture){\n        var geometry = new THREE.SphereGeometry( 40, 40, 40 );\n\n        var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );\n        var mesh = new THREE.Mesh( geometry, material );\n        mesh.position.x = -200;\n        //group.add( mesh );\n\n        scene.add(mesh);\n\n        mesh2 = mesh;\n    });\n\n    loader.load(\"image/pony.jpg\", function(texture){\n        var geometry = new THREE.SphereGeometry( 40, 40, 40 );\n\n        var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );\n        var mesh = new THREE.Mesh( geometry, material );\n        mesh.position.x = 200;\n        //group.add( mesh );\n\n        scene.add(mesh);\n\n        mesh3 = mesh;\n    });\n\n    // shadow\n\n    var canvas = document.createElement( 'canvas' );\n    canvas.width = 128;\n    canvas.height = 128;\n\n    var context = canvas.getContext( '2d' );\n    var gradient = context.createRadialGradient(\n            canvas.width / 2,\n            canvas.height / 2,\n        0,\n            canvas.width / 2,\n            canvas.height / 2,\n            canvas.width / 2\n    );\n    gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );\n    gradient.addColorStop( 1, 'rgba(255,255,255,1)' );\n\n    context.fillStyle = gradient;\n    context.fillRect( 0, 0, canvas.width, canvas.height );\n\n    var texture = new THREE.Texture( canvas );\n    texture.needsUpdate = true;\n\n    var geometry = new THREE.PlaneGeometry( 300, 300, 3, 3 );\n    var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );\n\n    var mesh = new THREE.Mesh( geometry, material );\n    mesh.position.y = - 250;\n    mesh.rotation.x = - Math.PI / 2;\n\n    //group.add( mesh );\n\n    renderer = new THREE.WebGLRenderer({ antialias: true, canvas: document.getElementById('c'), alpha: true });\n    renderer.setClearColor( 0x000,.2 );\n    renderer.setSize( window.innerWidth, window.innerHeight );\n\n    //container.appendChild( renderer.domElement );\n\n    stats = new Stats();\n    stats.domElement.style.position = 'absolute';\n    stats.domElement.style.top = '0px';\n//    document.body.appendChild( stats.domElement );\n\n    document.addEventListener( 'mousemove', onDocumentMouseMove, false );\n\n    //\n\n    window.addEventListener( 'resize', onWindowResize, false );\n\n}\n\nfunction onWindowResize() {\n\n    windowHalfX = window.innerWidth / 2;\n    windowHalfY = window.innerHeight / 2;\n\n    camera.aspect = window.innerWidth / window.innerHeight;\n    camera.updateProjectionMatrix();\n\n    renderer.setSize( window.innerWidth, window.innerHeight );\n\n}\n\nfunction onDocumentMouseMove( event ) {\n\n    mouseX = ( event.clientX - windowHalfX );\n    mouseY = ( event.clientY - windowHalfY );\n\n}\n\n//\n\nfunction animate() {\n\n    requestAnimationFrame( animate );\n\n    render();\n    stats.update();\n\n}\n\nfunction render() {\n\n\n    //camera.position.x += ( mouseX - camera.position.x ) * 0.05;\n    //camera.position.y += ( - mouseY - camera.position.y ) * 0.05;\n    camera.lookAt( scene.position );\n\n    mesh1.rotation.y -= 0.005;\n    mesh2.rotation.y -= 0.005;\n    mesh3.rotation.y -= 0.005;\n\n    renderer.render( scene, camera );\n\n}"
  },
  {
    "path": "app/scripts/4-webgl/48-three-js-shader.js",
    "content": "var scene, camera, renderer;\nvar vertexShaderString, fragmentShaderString;\nvar character = null;\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width = width;\ncanvas.height = height;\n\nvar yoCanvas = document.createElement(\"canvas\")\nyoCanvas.width = width;\nyoCanvas.height = height;\nvar yoCtx    = yoCanvas.getContext('2d');\n\nvar canvasTexture;\n\n// ==================\n\nvar mRenderer;\nvar mScene;\nvar mCamera;\nvar mUniforms;\nvar mColors;\nvar mColorsNeedUpdate = true;\nvar mLastTime = 0;\n\nvar mTexture1, mTexture2;\nvar mGSMaterial, mScreenMaterial;\nvar mScreenQuad;\n\nvar mToggled = false;\n\nvar mMinusOnes = new THREE.Vector2(-1, -1);\n/*\nvar presets = [\n    { // Default\n        //feed: 0.018,\n        //kill: 0.051\n        feed: 0.037,\n        kill: 0.06\n    },\n    { // Holes\n        feed: 0.039,\n        kill: 0.058\n    },\n\n    { // Chaos and holes (by clem)\n        feed: 0.034,\n        kill: 0.056\n    },\n\n    { // The U-Skate World\n        feed: 0.062,\n        kill: 0.06093\n    }\n]; */\nvar presets = [\n    { // Default\n        //feed: 0.018,\n        //kill: 0.051\n        feed: 0.037,\n        kill: 0.06\n    },\n    { // Solitons\n        feed: 0.03,\n        kill: 0.062\n    },\n    { // Pulsating solitons\n        feed: 0.025,\n        kill: 0.06\n    },\n    { // Worms.\n        feed: 0.078,\n        kill: 0.061\n    },\n    { // Mazes\n        feed: 0.029,\n        kill: 0.057\n    },\n    { // Holes\n        feed: 0.039,\n        kill: 0.058\n    },\n    { // Chaos\n        feed: 0.026,\n        kill: 0.051\n    },\n    { // Chaos and holes (by clem)\n        feed: 0.034,\n        kill: 0.056\n    },\n    { // Moving spots.\n        feed: 0.014,\n        kill: 0.054\n    },\n    { // Spots and loops.\n        feed: 0.018,\n        kill: 0.051\n    },\n    { // Waves\n        feed: 0.014,\n        kill: 0.045\n    },\n    { // The U-Skate World\n        feed: 0.062,\n        kill: 0.06093\n    }\n]\n// Configuration.\nvar count = 0;\nvar feed = presets[count].feed;\nvar kill = presets[count].kill;\n\n\nfunction init() {\n    setText();\n    setCanvasTexture();\n    var canvas = document.getElementById(\"c\");\n    mRenderer = new THREE.WebGLRenderer({canvas: canvas, preserveDrawingBuffer: true, alpha: true});\n\n    mScene = new THREE.Scene();\n    mCamera = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5, -10000, 10000);\n    mCamera.position.z = 100;\n    mScene.add(mCamera);\n\n    mUniforms = {\n        screenWidth: {type: \"f\", value: undefined},\n        screenHeight: {type: \"f\", value: undefined},\n        tSource: {type: \"t\", value: undefined},\n        canvasSource : {type: \"t\", value: canvasTexture},\n        delta: {type: \"f\", value: 1.0},\n        feed: {type: \"f\", value: feed},\n        kill: {type: \"f\", value: kill},\n        brush: {type: \"v2\", value: new THREE.Vector2(-10, -10)},\n        color1: {type: \"v4\", value: new THREE.Vector4(0, 0, 0.0, 0)},\n        color2: {type: \"v4\", value: new THREE.Vector4(0.1, .1, .1, 0.2)},\n        color3: {type: \"v4\", value: new THREE.Vector4(1.0,1.0, 1.0, 0.4)},\n        color4: {type: \"v4\", value: new THREE.Vector4(.1,.1,.1, 0.7)},\n        color5: {type: \"v4\", value: new THREE.Vector4(1.0,1.0,1.0, 0.9)}\n    };\n    mColors = [mUniforms.color1, mUniforms.color2, mUniforms.color3, mUniforms.color4, mUniforms.color5];\n\n    mGSMaterial = new THREE.ShaderMaterial({\n        uniforms: mUniforms,\n        vertexShader: [\n            \"varying vec2 vUv;\",\n            \"void main(){\",\n            \"vUv = uv;\",\n            \"gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}\"\n        ].join(\"\\n\"),\n        fragmentShader: [\n            \"varying vec2 vUv;\",\n            \"uniform float screenWidth;\",\n            \"uniform float screenHeight;\",\n            \"uniform sampler2D tSource;\",\n            \"uniform sampler2D canvasSource;\",\n            \"uniform float delta;\",\n            \"uniform float feed;\",\n            \"uniform float kill;\",\n            \"uniform vec2 brush;\",\n            \"vec2 texel = vec2(1.0/screenWidth, 1.0/screenHeight);\",\n            \"float step_x = 1.0/screenWidth;\",\n            \"float step_y = 1.0/screenHeight;\",\n            \"void main()\",\n            \"{\",\n            \"    if(brush.x < -5.0)\",\n            \"    {\",\n            \"        //gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\",\n            \"        //return;\",\n            \"    }\",\n            \"    \",\n            \"    \",\n            \"    vec2 uv = texture2D(tSource, vUv).rg;\",\n            \"    vec2 uv0 = texture2D(tSource, vUv+vec2(-step_x, 0.0)).rg;\",\n            \"    vec2 uv1 = texture2D(tSource, vUv+vec2(step_x, 0.0)).rg;\",\n            \"    vec2 uv2 = texture2D(tSource, vUv+vec2(0.0, -step_y)).rg;\",\n            \"    vec2 uv3 = texture2D(tSource, vUv+vec2(0.0, step_y)).rg;\",\n            \"    \",\n            \"    vec2 lapl = (uv0 + uv1 + uv2 + uv3 - 4.0*uv);//10485.76;\",\n            \"    float du = /*0.00002*/0.2097*lapl.r - uv.r*uv.g*uv.g + feed*(1.0 - uv.r);\",\n            \"    float dv = /*0.00001*/0.105*lapl.g + uv.r*uv.g*uv.g - (feed+kill)*uv.g;\",\n            \"    vec2 dst = uv + delta*vec2(du, dv);\",\n            \"    \",\n            \"    if(brush.x > 0.0)\",\n            \"    {\",\n            \"        vec2 diff = (vUv - brush)/texel;\",\n            \"        float dist = dot(diff, diff);\",\n            \"        if(dist < 10.0)\",\n            \"            dst.g = 0.9;\",\n            \"    }\",\n            \"    float canvasValue = texture2D(canvasSource, vUv).g;\",\n            \"    if(canvasValue < 0.1){ dst.g = 0.0; }\",\n\n            /*\n            \"    if(vUv.x < 0.2)\",\n            \"    {\",\n            \"        dst.g = 0.0;\",\n            \"    }\",\n            \"    \", */\n            \"    gl_FragColor = vec4(dst.r, dst.g, 0.0, 0);\",\n            \"}\"\n        ].join(\"\\n\")\n    });\n    mScreenMaterial = new THREE.ShaderMaterial({\n        uniforms: mUniforms,\n        vertexShader: [\n            \"varying vec2 vUv;\",\n            \"void main(){\",\n            \"vUv = uv;\",\n            \"gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}\"\n        ].join(\"\\n\"),\n        fragmentShader: [\n            \"varying vec2 vUv;\",\n            \"uniform vec2 brush;\",\n            \"uniform float screenWidth;\",\n            \"uniform float screenHeight;\",\n            \"uniform sampler2D tSource;\",\n            \"uniform sampler2D canvasSource;\",\n            \"uniform float delta;\",\n            \"uniform float feed;\",\n            \"uniform float kill;\",\n            \"uniform vec4 color1;\",\n            \"uniform vec4 color2;\",\n            \"uniform vec4 color3;\",\n            \"uniform vec4 color4;\",\n            \"uniform vec4 color5;\",\n\n            \"vec2 texel = vec2(1.0/screenWidth, 1.0/screenHeight);\",\n\n            \"void main()\",\n            \"{\",\n            \"    float value = texture2D(tSource, vUv).g;\",\n            \"    //int step = int(floor(value));\",\n            \"    //float a = fract(value);\",\n            \"    float a;\",\n            \"    vec3 col;\",\n            \"    \",\n            \"    if(value <= color1.a)\",\n            \"        col = color1.rgb;\",\n            \"    if(value > color1.a && value <= color2.a)\",\n            \"    {\",\n            \"        a = (value - color1.a)/(color2.a - color1.a);\",\n            \"        col = mix(color1.rgb, color2.rgb, a);\",\n            \"    }\",\n            \"    if(value > color2.a && value <= color3.a)\",\n            \"    {\",\n            \"        a = (value - color2.a)/(color3.a - color2.a);\",\n            \"        col = mix(color2.rgb, color3.rgb, a);\",\n            \"    }\",\n            \"    if(value > color3.a && value <= color4.a)\",\n            \"    {\",\n            \"        a = (value - color3.a)/(color4.a - color3.a);\",\n            \"        col = mix(color3.rgb, color4.rgb, a);\",\n            \"    }\",\n            \"    if(value > color4.a && value <= color5.a)\",\n            \"    {\",\n            \"        a = (value - color4.a)/(color5.a - color4.a);\",\n            \"        col = mix(color4.rgb, color5.rgb, a);\",\n            \"    }\",\n            \"    if(value > color5.a)\",\n            \"        col = color5.rgb;\",\n            \"    \",\n\n            \"    gl_FragColor = vec4( col.r, col.g, col.b, 1.0);\",\n            \"}\"\n        ].join(\"\\n\")\n    });\n\n    var plane = new THREE.PlaneGeometry(1.0, 1.0);\n    mScreenQuad = new THREE.Mesh(plane, mScreenMaterial);\n    mScene.add(mScreenQuad);\n\n\n    mTexture1 = new THREE.WebGLRenderTarget(width / 2, height / 2,\n        {minFilter: THREE.LinearFilter,\n            magFilter: THREE.LinearFilter,\n            format: THREE.RGBFormat,\n            type: THREE.FloatType});\n    mTexture2 = new THREE.WebGLRenderTarget(width / 2, height / 2,\n        {minFilter: THREE.LinearFilter,\n            magFilter: THREE.LinearFilter,\n            format: THREE.RGBFormat,\n            type: THREE.FloatType});\n    mTexture1.wrapS = THREE.RepeatWrapping;\n    mTexture1.wrapT = THREE.RepeatWrapping;\n    mTexture2.wrapS = THREE.RepeatWrapping;\n    mTexture2.wrapT = THREE.RepeatWrapping;\n\n    mUniforms.screenWidth.value = width / 2;\n    mUniforms.screenHeight.value = height / 2;\n\n\n    loop(0);\n\n    mUniforms.brush.value = new THREE.Vector2(0.5, 0.5);\n    mLastTime = new Date().getTime();\n\n    setTimeout(updateScott, 3000);\n    setTimeout(updateClear, 1000);\n}\n\nfunction updateClear(){\n    mUniforms.brush.value = new THREE.Vector2(0.5, 0.5);\n    //mUniforms.brush.value = new THREE.Vector2(-10, -10);\n    setTimeout(updateClear, 1000);\n}\n\nfunction updateScott(){\n\n\tcount = (count + 1) % presets.length;\n\tconsole.log(count)\n\tfeed = presets[count].feed;\n\tkill = presets[count].kill;\n\n    /*\n\tsetTimeout(function(){\n\t\tmUniforms.brush.value = new THREE.Vector2(0.5, 0.5);\n\t}, 100);*/\n\n\tsetTimeout(updateScott, 3000);\n}\n\nfunction setCanvasTexture(){\n    canvasTexture = new THREE.Texture(yoCanvas);\n\n    canvasTexture.magFilter = THREE.NearestFilter;\n    canvasTexture.needsUpdate = true;\n}\n\nfunction setText(){\n\n    yoCtx.fillStyle = \"#fff\";\n    yoCtx.fillRect( 0, 0, width, height );\n\n    /*\n    yoCtx.fillStyle = \"#000000\";\n    yoCtx.fillRect(width/4, height/4, width/2, height/4);\n    */\n    var textLeft;\n    var textTop;\n    var xPos, yPos;\n    var txt=\"YO\";\n    yoCtx.font = \"Bold 80px Arial\";\n\n    var textWidth = yoCtx.measureText(txt);\n    var textExtraWidth = textWidth.width * 2;\n\n    var extraHeight = 100 ;\n\n    for(var yy = 0; yy < height/extraHeight; yy++){\n        for(var xx = 0; xx < width / textExtraWidth; xx++){\n\n            yoCtx.fillStyle = '#000';\n\n            if(yy % 2 == 0) xPos = textExtraWidth * xx;\n            else        \txPos = textExtraWidth * (xx - .5);\n\n            yPos = extraHeight * yy + 40;\n\n            yoCtx.save();\n            yoCtx.translate(xPos, yPos);\n            yoCtx.fillText(txt,0,0);\n            yoCtx.restore();\n        }\n\n    }\n\n\n    //canvasTexture.needsUpdate = true;\n}\n\nfunction loop(time) {\n    var dt = (time - mLastTime) / 20.0;\n    if (dt > 0.8 || dt <= 0)    dt = 0.8;\n    dt = .8;\n    mLastTime = time;\n\n\n\n    //mUniforms.brush.value = new THREE.Vector2(0.5, 0.5);\n\n    mScreenQuad.material = mGSMaterial;\n    mUniforms.delta.value = 1;\n    mUniforms.feed.value = feed;\n    mUniforms.kill.value = kill;\n\n    for (var i = 0; i < 60; ++i) {\n\n        if (!mToggled) {\n            mUniforms.tSource.value = mTexture1;\n            mRenderer.render(mScene, mCamera, mTexture2, true);\n            mUniforms.tSource.value = mTexture2;\n        }\n        else {\n            mUniforms.tSource.value = mTexture2;\n            mRenderer.render(mScene, mCamera, mTexture1, true);\n            mUniforms.tSource.value = mTexture1;\n        }\n\n        mToggled = !mToggled;\n        mUniforms.brush.value = mMinusOnes;\n        //mUniforms.brush.value = new THREE.Vector2(0.5, 0.5);\n    }\n\n    mScreenQuad.material = mScreenMaterial;\n\n    mRenderer.render(mScene, mCamera);\n\n    requestAnimationFrame(loop);\n}\n\n\n//\n\ninit();\n"
  },
  {
    "path": "app/scripts/4-webgl/49-three-js.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar angularSpeed;\nvar renderer, camera, scene, plane;\nvar app, collections;\nvar canvas = document.getElementById('c');\n\nangularSpeed = 0.2;\nprevTime = (new Date()).getTime();\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\n\n\nvar Collections = function(){\n    _.bindAll(this, \"start\");\n\n    this.widthNum = parseInt(width/this.side) + 1;\n    this.heightNum = parseInt(height/this.side) + 1;\n\n    console.log(\"width: \" + this.widthNum + \", height: \" + this.heightNum);\n\n    this.planes = [];\n    this.scores = [];\n    var maxScore = 10;\n    for(var yy = 0; yy < this.heightNum; yy++){\n        this.planes[yy] = [];\n        this.scores[yy] = [];\n        for(var xx = 0; xx < this.widthNum; xx++){\n            plane = new THREE.Mesh(new THREE.PlaneGeometry(this.side, this.side), new THREE.MeshBasicMaterial({color: 0xffffff, side: THREE.DoubleSide}));\n            plane.position.x = xx * this.side - width/2;\n            plane.position.y = yy * this.side - height/2;\n            //plane.rotation.x = Math.PI/3;\n            plane.rotation.y = -Math.PI;\n\n            //plane.rotation.z= Math.PI/2;\n            plane.overdraw = true;\n\n            this.planes[yy][xx] = plane;\n            scene.add(plane);\n\n            //this.scores[yy][xx] = {x: xx, y: yy, score: yy};\n            var score = parseInt(maxScore * Math.random());\n\n            this.scores[yy][xx] = score;\n            //maxScore = Math.max(maxScore, yy);\n        }\n    }\n\n    this.maxScore = maxScore;\n    // 0 : {x: 10, y: 10}, 1 : {}\n\n    this.scorePosArr = [];\n    for(var i = 0; i <= maxScore; i++){\n        this.scorePosArr[i] = [];\n\n        for(var yy = 0; yy < this.scores.length; yy++){\n            for(var xx = 0; xx < this.scores[yy].length; xx++){\n                if(i == this.scores[yy][xx]){\n                    var pos = {x: xx, y: yy};\n\n                    this.scorePosArr[i].push(pos);\n                }\n            }\n        }\n    };\n\n\n    setTimeout(this.start, 2000);\n};\n\nCollections.prototype = {\n    side : 100,\n    count : 0,\n    planes : null,\n\n    update : function(){\n        for(var yy = 0; yy < this.heightNum; yy++){\n            for(var xx = 0; xx < this.widthNum; xx++){\n                this.planes[yy][xx].position.x += Math.random() * 2 - 1;\n                this.planes[yy][xx].position.y += Math.random() * 2 - 1;\n                this.planes[yy][xx].position.z += Math.random() * 2 - 1;\n            }\n        }\n\n    },\n\n    start : function(){\n        /*\n        for(var yy = 0; yy < this.planes.length; yy++){\n            for(var xx = 0; xx < this.planes[yy].length; xx++){\n                TweenLite.to(this.planes[yy][xx].rotation, 1, {x: Math.PI* 2, delay:.4});\n            }\n        }*/\n\n        for(var i = 0; i < this.scorePosArr[this.count].length; i++){\n            var pos = this.scorePosArr[this.count][i];\n\n            TweenLite.to(this.planes[pos.y][pos.x].rotation, .3 + Math.random() *.5, {x: Math.random() * Math.PI* 2, y: Math.random() * Math.PI, onComplete: function(){\n                TweenLite.to(this.target,.5, {x: 0, y: 0, ease:\"Power2.easeOut\"})\n            }});\n        }\n\n\n        this.count = (this.count + 1) % (this.maxScore + 1);\n        if(this.count == 0){\n            setTimeout(this.start,3000);\n        }else{\n            setTimeout(this.start,300);\n        }\n\n    }\n};\n\n\n\n// ================\n\ninit();\nloop();\n\nfunction init(){\n    renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});\n    renderer.setSize(width, height);\n\n    // camera\n    //camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);\n    camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 5000 )\n    //camera = new THREE.PerspectiveCamera( 15, 60, 100, 2000);\n    //camera = new THREE.OrthographicCamera( width/-2, width/2, height/2, height/-2, 1, 1000);\n    camera.position.y = 0;\n    camera.position.z = 3000;\n    //camera.rotation.x = 45 * (Math.PI / 180);\n\n    scene = new THREE.Scene();\n\n    camera.lookAt(scene.position);\n    // plane\n    collections = new Collections;\n\n}\n\nfunction loop(){\n    var time = (new Date()).getTime();\n    var dt = time - prevTime;\n\n    /*\n    camera.position.z += Math.random() * 20 - 10;\n    camera.position.x = 300 * Math.cos(time/100);\n    camera.position.y = 300 * Math.sin(time/100);\n    */\n\n    collections.update();\n\n    renderer.render( scene, camera );\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/4-webgl/50-three-js-with-shader.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar velArr;\nvar xPosArr;\n\n                                                                                                                                                                                                                                                                                                                                                                                                                                     var isText = false;\n\nvar totalWidth = 0;\nvar canvas = document.getElementById('c');\n\nvar canvasTexture;\nvar textureCanvas = document.createElement(\"canvas\");\ntextureCanvas.width = window.innerWidth;\ntextureCanvas.height = window.innerHeight;\nvar textureCtx    = textureCanvas.getContext(\"2d\");\n\nvar camera, scene, renderer;\nvar uniforms;\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\nvar col = {bl: 100};\nvar tl = new TimelineLite();\ntl.to( col, 2, {bl: 200, onComplete: onComplete1});\n\nfunction onComplete1(){\n    tl.to( col, 2, {bl: 100, onComplete: onComplete2, delay:.5});\n}\n\nfunction onComplete2(){\n    tl.to( col, 2, {bl: 200, onComplete: onComplete1, delay:.5});\n}\n\n\n// ================\n\n// ================\n\ninit();\nloop();\n\nfunction init(){\n\n    setCanvasTexture();\n    setText();\n\n    camera = new THREE.Camera();\n    camera.position.z = 1;\n\n    scene = new THREE.Scene();\n\n    var geometry = new THREE.PlaneGeometry( 2, 2 );\n\n    uniforms = {\n        canvasSource : {type: 't', value: canvasTexture},\n        time : {type: \"f\", value: 1.0},\n        resolution : { type: \"v2\", value: new THREE.Vector2() }\n    };\n\n    var material = new THREE.ShaderMaterial({\n        uniforms : uniforms,\n        vertexShader: document.getElementById( 'vertexShader' ).textContent,\n        fragmentShader: document.getElementById( 'fragmentShader' ).textContent\n    });\n\n    var mesh = new THREE.Mesh( geometry, material );\n    scene.add( mesh );\n\n    renderer = new THREE.WebGLRenderer({canvas: canvas});\n    uniforms.resolution.value.x = window.innerWidth;\n    uniforms.resolution.value.y = window.innerHeight;\n\n    renderer.setSize( window.innerWidth, window.innerHeight );\n\n\n\n}\n\nfunction loop(){\n    uniforms.time.value += 0.05;\n    setText();\n\n    renderer.render( scene, camera );\n\n    requestAnimationFrame(loop);\n}\n\nfunction setText(){\n\n    textureCtx.fillStyle = \"#fff\";\n    textureCtx.fillRect( 0, 0, width, height );\n\n    /*\n     yoCtx.fillStyle = \"#000000\";\n     yoCtx.fillRect(width/4, height/4, width/2, height/4);\n     */\n    var date = new Date();\n    var curHour = date.getHours();\n    var curHourStr = curHour < 10 ? \"0\" + curHour : curHour;\n    var curMin = date.getMinutes();\n    var curMinStr = curMin <10 ? \"0\" + curMin : curMin;\n    var curSec = date.getSeconds();\n    var curSecStr = curSec < 10 ? \"0\" + curSec : curSec;\n    var curTime = curHourStr + \":\" + curMinStr + \":\" + curSecStr;\n\n    var textLeft;\n    var textTop;\n    var xPos, yPos;\n    textureCtx.font = \"Bold 80px Helvetica\";\n\n    var textWidth = textureCtx.measureText(curTime);\n    var textExtraWidth = textWidth.width * 1.2;\n\n    var extraHeight = 80 ;\n\n    if(!velArr){\n        velArr = [];\n        for(var yy = 0; yy < height/extraHeight + 1; yy++){\n            velArr[yy] = -Math.random()  - .5;\n        }\n\n        xPosArr = [];\n\n\n        for(var yy = 0; yy < height/extraHeight + 1; yy++){\n            xPosArr[yy] = [];\n            for(var xx = 0; xx < width / textExtraWidth + 2; xx++){\n                xPos = textExtraWidth * xx + Math.random()*10 - 5 + velArr[yy];\n                xPosArr[yy][xx] = xPos;\n\n            }\n        }\n\n        totalWidth += parseInt(width / textExtraWidth + 3) * textExtraWidth;\n    }\n\n    var colNum = parseInt(col.bl)\n    var colRgb = \"rgb(\" + colNum + \", \" + colNum + \", \" + colNum + \")\";\n    textureCtx.fillStyle = colRgb;\n\n    for(var yy = 0; yy < height/extraHeight + 1; yy++){\n\n        for(var xx = 0; xx < width / textExtraWidth + 2; xx++){\n\n\n            textureCtx.font = \"Bold 80px Helvetica\";\n\n            xPosArr[yy][xx] += velArr[yy];\n            if(xPosArr[yy][xx] < -textExtraWidth) xPosArr[yy][xx] += totalWidth;\n\n            yPos = extraHeight * yy ;\n\n            //var fontNum = parseInt(75 + 10 *Math.random());\n\n            //yoCtx.font = \"Bold 80px Arial\";\n            textureCtx.save();\n            textureCtx.translate(xPosArr[yy][xx], yPos);\n\n\n            textureCtx.fillText(curTime,0,0);\n            textureCtx.restore();\n        }\n\n    }\n\n\n    if(canvasTexture) canvasTexture.needsUpdate = true;\n}\n\nfunction setCanvasTexture(){\n    canvasTexture = new THREE.Texture(textureCanvas);\n\n    canvasTexture.magFilter = THREE.NearestFilter;\n    canvasTexture.needsUpdate = true;\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/4-webgl/55-gl.js",
    "content": "\nwindow.onload = loadScene;\n\nfunction backingScale(context) {\n    if ('devicePixelRatio' in window) {\n        if (window.devicePixelRatio > 1) {\n            return window.devicePixelRatio;\n        }\n    }\n    return 1;\n}\n\nvar tempCanvas = document.createElement('canvas');\nvar tempCtx = tempCanvas.getContext('2d');\nvar scaleFactor = backingScale(tempCtx);\n\nvar canvas, gl,\n    ratio,\n    vertices,\n    velocities,\n    freqArr,\n    cw,\n    ch,\n    colorLoc,\n    thetaArr,\n    velThetaArr,\n    velRadArr,\n    boldRateArr,\n    drawType,\n    numLines = 80000;\nvar targetArr = [];\nvar randomTargetXArr = [], randomTargetYArr = [];\ndrawType = 2;\n\n\n/**\n * Initialises WebGL and creates the 3D scene.\n */\n\n\nfunction Target(rad){\n    this.x = 0;\n    this.y = 0;\n    this.rotate = 0;\n    this.radius = 0;\n    this.baseRad = rad;\n\n    this.update();\n};\n\nTarget.prototype = {\n    update : function() {\n        this.rotate_speed = .001 + Math.random() * 0.05;//Math.random(1) * 0.2 + 0.001;\n        //this.friction = Math.random(1) * 0.8 + 0.1;\n        this.speed = Math.random(1) * 0.2 + 0.03;\n        this.step = Math.random() * 0.1 + 0.2;\n\n        this.freq = 1;\n        this.bold_rate = this.baseRad * (.8 + Math.random()*.3) ;\n    }\n}\n\n\n\n\nfunction loadScene() {\n    //    Get the canvas element\n    canvas = document.getElementById(\"c\");\n    //    Get the WebGL context\n    gl = canvas.getContext(\"experimental-webgl\");\n    //    Check whether the WebGL context is available or not\n    //    if it's not available exit\n    if (!gl) {\n        alert(\"There's no WebGL context available.\");\n        return;\n    }\n    //    Set the viewport to the canvas width and height\n    cw = window.innerWidth;\n    ch = window.innerHeight;\n    canvas.width = cw;\n    canvas.height = ch;\n    gl.viewport(0, 0, canvas.width, canvas.height);\n\n    var vertexShaderScript = document.getElementById(\"shader-vs\");\n    var vertexShader = gl.createShader(gl.VERTEX_SHADER);\n    gl.shaderSource(vertexShader, vertexShaderScript.text);\n    gl.compileShader(vertexShader);\n    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {\n        alert(\"Couldn't compile the vertex shader\");\n        gl.deleteShader(vertexShader);\n        return;\n    }\n\n    var fragmentShaderScript = document.getElementById(\"shader-fs\");\n    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);\n    gl.shaderSource(fragmentShader, fragmentShaderScript.text);\n    gl.compileShader(fragmentShader);\n    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {\n        alert(\"Couldn't compile the fragment shader\");\n        gl.deleteShader(fragmentShader);\n        return;\n    }\n\n    //    Create a shader program.\n    gl.program = gl.createProgram();\n    gl.attachShader(gl.program, vertexShader);\n    gl.attachShader(gl.program, fragmentShader);\n    gl.linkProgram(gl.program);\n    if (!gl.getProgramParameter(gl.program, gl.LINK_STATUS)) {\n        alert(\"Unable to initialise shaders\");\n        gl.deleteProgram(gl.program);\n        gl.deleteProgram(vertexShader);\n        gl.deleteProgram(fragmentShader);\n        return;\n    }\n\n    gl.useProgram(gl.program);\n    var vertexPosition = gl.getAttribLocation(gl.program, \"vertexPosition\");\n    gl.enableVertexAttribArray(vertexPosition);\n    gl.clearColor(0.1, 0.1, 0.12, 1.0);\n    gl.clearDepth(1.0);\n\n    gl.enable(gl.BLEND);\n    gl.disable(gl.DEPTH_TEST);\n    gl.blendFunc(gl.SRC_ALPHA, gl.ONE);\n\n    var vertexBuffer = gl.createBuffer();\n    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);\n\n    // ------------------\n\n    setup();\n\n    // ------------------\n\n\n    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);\n\n    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n    //    Define the viewing frustum parameters\n    //    More info: http://en.wikipedia.org/wiki/Viewing_frustum\n    //    More info: http://knol.google.com/k/view-frustum\n    var fieldOfView = 30.0;\n    var aspectRatio = canvas.width / canvas.height;\n    var nearPlane = 1.0;\n    var farPlane = 10000.0;\n    var top = nearPlane * Math.tan(fieldOfView * Math.PI / 360.0);\n    var bottom = -top;\n    var right = top * aspectRatio;\n    var left = -right;\n\n    //     Create the perspective matrix. The OpenGL function that's normally used for this,\n    //     glFrustum() is not included in the WebGL API. That's why we have to do it manually here.\n    //     More info: http://www.cs.utk.edu/~vose/c-stuff/opengl/glFrustum.html\n    var a = (right + left) / (right - left);\n    var b = (top + bottom) / (top - bottom);\n    var c = (farPlane + nearPlane) / (farPlane - nearPlane);\n    var d = (2 * farPlane * nearPlane) / (farPlane - nearPlane);\n    var x = (2 * nearPlane) / (right - left);\n    var y = (2 * nearPlane) / (top - bottom);\n    var perspectiveMatrix = [\n        x, 0, a, 0,\n        0, y, b, 0,\n        0, 0, c, d,\n        0, 0, -1, 0\n    ];\n\n    //     Create the modelview matrix\n    //     More info about the modelview matrix: http://3dengine.org/Modelview_matrix\n    //     More info about the identity matrix: http://en.wikipedia.org/wiki/Identity_matrix\n    var modelViewMatrix = [\n        1, 0, 0, 0,\n        0, 1, 0, 0,\n        0, 0, 1, 0,\n        0, 0, 0, 1\n    ];\n\n    //     Get the vertex position attribute location from the shader program\n    var vertexPosAttribLocation = gl.getAttribLocation(gl.program, \"vertexPosition\");\n    //     Specify the location and format of the vertex position attribute\n    gl.vertexAttribPointer(vertexPosAttribLocation, 3.0, gl.FLOAT, false, 0, 0);\n    //gl.vertexAttribPointer(colorLoc, 4.0, gl.FLOAT, false, 0, 0);\n    //     Get the location of the \"modelViewMatrix\" uniform variable from the\n    //     shader program\n    var uModelViewMatrix = gl.getUniformLocation(gl.program, \"modelViewMatrix\");\n    //     Get the location of the \"perspectiveMatrix\" uniform variable from the\n    //     shader program\n    var uPerspectiveMatrix = gl.getUniformLocation(gl.program, \"perspectiveMatrix\");\n    //     Set the values\n    gl.uniformMatrix4fv(uModelViewMatrix, false, new Float32Array(perspectiveMatrix));\n    gl.uniformMatrix4fv(uPerspectiveMatrix, false, new Float32Array(modelViewMatrix));\n\n    animate();\n    setTimeout(timer, 1500);\n}\nvar count = 0;\nvar cn = 0;\n\nfunction animate() {\n    requestAnimationFrame(animate);\n    drawScene();\n}\n\n\nfunction drawScene() {\n    draw();\n\n    gl.lineWidth(2);\n    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);\n\n    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n    //gl.drawArrays( gl.LINES_STRIP, 0, numLines );\n    gl.drawArrays(gl.LINES, 0, numLines);\n    //gl.drawArrays( gl.QUAD_STRIP, 0, numLines );\n\n    gl.flush();\n}\n\n// ===================================\nfunction setup() {\n    setup00();\n}\n\n\nfunction draw() {\n    /*\n    switch (drawType) {\n        case 0:\n            draw0();\n            break;\n        case 1:\n            draw1();\n            break;\n        case 2:\n            draw2();\n            break;\n    }\n    */\n\n    draw00();\n}\n\n// ===================================\n\nfunction setup00() {\n\n    vertices = [];\n    velThetaArr = [];\n    velRadArr = [];\n    ratio = cw / ch;\n    velocities = [];\n    thetaArr = [];\n    freqArr = [];\n    boldRateArr = [];\n\n\n\n    // -------------------------------\n    //var minSize = Math.min(window.innerWidth, scale.innerHeight);\n    var widthScale = window.innerWidth / window.innerHeight;\n    var height = 340 * scaleFactor;\n    var X_MAX_NUM = parseInt(window.innerWidth / height);\n    var Y_MAX_NUM = parseInt(window.innerHeight / height);\n    // 2 -> window.innerHeight\n    // ? -> 50\n    var targetRad =  height / 2 / (2 * window.innerHeight) * 2;\n    var xPos, yPos;\n    for(var xx = -X_MAX_NUM + 1; xx < X_MAX_NUM; xx++){\n        for(var yy = -Y_MAX_NUM + 1; yy < Y_MAX_NUM; yy++){\n            //var rad = targetRad / Y_MAX_NUM;\n            var target = new Target(targetRad);\n            target.x = xx / X_MAX_NUM * widthScale;\n            target.y = yy / Y_MAX_NUM;\n            targetArr.push(target);\n\n        }\n    }\n\n    for(var ii = 0; ii < numLines; ii++){\n        vertices.push( 0, 0, 1.83);\n        vertices.push( 0, 0, 1.83);\n    }\n\n\n    vertices = new Float32Array(vertices);\n    velocities = new Float32Array(velocities);\n\n}\n\n// -------------------------------\n\nfunction draw00(){\n\n    for(var ii = 0; ii < targetArr.length; ii++ ){\n        targetArr[ii].rotate += targetArr[ii].rotate_speed;\n    }\n\n    var tRad, tX, tY;\n    var bp, px, py;\n    var target;\n    for(var ii = 0; ii < numLines * 2; ii += 2){\n        bp = ii * 3;\n\n        // copy old positions\n        //vertices[bp] = vertices[bp + 3];\n        //vertices[bp + 1] = vertices[bp + 4];\n\n        target = targetArr[ii % targetArr.length];\n        tRad   = Math.cos(target.rotate * 2.321 + target.freq * ii ) * target.bold_rate + target.radius;\n        tX = target.x + Math.cos(target.rotate + target.step * ii) * tRad;\n        tY = target.y + Math.sin(target.rotate + target.step * ii) * tRad;\n\n\n\n        px = vertices[bp + 3];\n        py = vertices[bp + 4];\n\n        px += (tX - px) * .1;\n        py += (tY - py) * .1;\n\n        vertices[bp + 3] = px;\n        vertices[bp + 4] = py;\n\n        vertices[bp ] = px-0.001;\n        vertices[bp + 1] = py-0.001;\n\n    }\n\n}\n\n\n// ===================================\n\n// -------------------------------\n\nfunction timer() {\n\n    /*\n    for(var ii = 0; ii < targetArr.length; ii++) {\n        targetArr[ii].update();\n    }\n\n\n    setTimeout(timer, 1500);*/\n}\n"
  },
  {
    "path": "app/scripts/4-webgl/56-gl.js",
    "content": "\nwindow.onload = loadScene;\n\nfunction backingScale(context) {\n    if ('devicePixelRatio' in window) {\n        if (window.devicePixelRatio > 1) {\n            return window.devicePixelRatio;\n        }\n    }\n    return 1;\n}\n\nvar tempCanvas = document.createElement('canvas');\nvar tempCtx = tempCanvas.getContext('2d');\nvar scaleFactor = backingScale(tempCtx);\n\nvar canvas, gl,\n    ratio,\n    vertices,\n    velocities,\n    freqArr,\n    cw,\n    ch,\n    colorLoc,\n    thetaArr,\n    velThetaArr,\n    velRadArr,\n    boldRateArr,\n    drawType,\n    numLines = 80000;\nvar targetArr = [];\n\nvar randomTargetXArr = [], randomTargetYArr = [];\ndrawType = 2;\n\n\n/**\n * Initialises WebGL and creates the 3D scene.\n */\n\n\nfunction Target(rad){\n    this.x = 0;\n    this.y = 0;\n    this.rotate = 0;\n    this.radius = 0;\n    this.baseRad = rad;\n\n    this.update();\n};\n\nTarget.prototype = {\n    freqSpecial : 0.0,\n    update : function() {\n        this.rotate_speed = curObject.rotateSpeed + Math.random() * curObject.rotateSpeedRandom;//Math.random(1) * 0.2 + 0.001;\n        //this.friction = Math.random(1) * 0.8 + 0.1;\n        this.speed = Math.random(1) * curObject.speed + curObject.speed;\n        this.step = Math.random() * curObject.stepRandom + curObject.step;\n\n        this.freq = curObject.freq + curObject.freqRandom * Math.random() + this.freqSpecial;\n        this.bold_rate = this.baseRad * (curObject.boldRate + Math.random()*curObject.boldRandom) ;\n        //console.log(this.)\n    }\n}\n\n\nvar curObject = {\n    rotateSpeed : 0.000,\n    rotateSpeedRandom: 0,\n    speed : 0.03,\n    speedRandom : 0.0,\n    step        : 0,\n    stepRandom  : 0.0,\n    freq : 0.01,\n    freqSpecial : 0.0,\n    freqRandom : 0.00,\n    boldRate    : 1.0,\n    boldRandom  :0,\n    update : function(){\n        onControllerChange(0);\n    }\n};\n\nvar onControllerChange = function(value){\n\n    for(var ii = 0; ii < targetArr.length; ii++) {\n     targetArr[ii].update();\n\n    }\n};\n\nvar gui = new dat.GUI();\nvar rotSpeedController = gui.add(curObject, 'rotateSpeed', 0.000, 0.005);\nvar rotSpeedRandomController = gui.add(curObject, 'rotateSpeedRandom', 0.00, 0.1);\nvar stepController = gui.add(curObject, 'step', 0.0, 1);\nvar stepRandomController = gui.add(curObject, 'stepRandom', 0.0, 1);\nvar speedController = gui.add(curObject, 'speed', 0, 0.2);\nvar speedRandomController = gui.add(curObject, 'speedRandom', 0, 0.6);\nvar freqController = gui.add(curObject, 'freq', 0.00, 1);\nvar freqRandomController = gui.add(curObject, 'freqRandom', 0.00,.1);\nvar boldRateController = gui.add(curObject, \"boldRate\", 0, 1.0);\nvar bolRandomController = gui.add(curObject, \"boldRandom\", 0, 1.0);\nvar updateController = gui.add(curObject, 'update');\n\nrotSpeedController.onChange(onControllerChange);\nrotSpeedRandomController.onChange(onControllerChange);\nspeedController.onChange(onControllerChange);\nspeedRandomController.onChange(onControllerChange);\nboldRateController.onChange(onControllerChange);\nbolRandomController.onChange(onControllerChange);\nfreqController.onChange(onControllerChange);\nfreqRandomController.onChange(onControllerChange);\nstepController.onChange(onControllerChange);\nstepRandomController.onChange(onControllerChange);\n\n\nvar incNum = 0.02;\nvar incSign = +1;\nvar count = 0;\nfunction onChangeTimer(){\n    curObject.step +=  incNum * incSign * (count + 1);\n    curObject.freq += incNum * incSign * (count + 1);\n\n    onControllerChange(0);\n\n    //count = count + count + 1;\n    count++;\n    if(count < 4) setTimeout(onChangeTimer, 500);\n    else setTimeout(backTimer, 500);\n\n}\ncircleCount = 1;\nfunction backTimer(){\n\n    circleCount++;\n\n    if(circleCount > 7){\n        circleCount = 1;\n\n        targetArr = [];\n        var targetRad = 1.0;\n        var target = new Target(targetRad);\n        targetArr.push(target);\n\n    }else {\n\n        for (var ii = (circleCount - 1) * (circleCount - 1); ii < circleCount * circleCount; ii++) {\n            var targetRad = 1.0;\n            var target = new Target(targetRad);\n            targetArr.push(target);\n        }\n\n\n        var targetNumber = targetArr.length;\n        var kankaku = 2.0 / ( circleCount );\n\n        for (var xx = 0; xx < circleCount; xx++) {\n            for (var yy = 0; yy < circleCount; yy++) {\n                var num = xx + yy * circleCount;\n\n                targetArr[num].baseRad = .9 / circleCount;\n                targetArr[num].x = 1.0 - kankaku * (xx + .5);\n                targetArr[num].y = 1.0 - kankaku * (yy + .5);\n                targetArr[num].freqSpecial = (xx + yy) * 0.01;\n            }\n        }\n    }\n\n\n\n    count = 0;\n    curObject.step = 0.00; curObject.freq = 0.01;\n    onControllerChange(0);\n\n\n\n    setTimeout(onChangeTimer, 300);\n}\n\n/*\nrotSpeedController.onChange(function(value) {\n    // Fires on every change, drag, keypress, etc.\n    console.log(\"change\")\n});\n*/\n\n\n\n\n\n\nfunction loadScene() {\n    //    Get the canvas element\n    canvas = document.getElementById(\"c\");\n    //    Get the WebGL context\n    gl = canvas.getContext(\"experimental-webgl\");\n    //    Check whether the WebGL context is available or not\n    //    if it's not available exit\n    if (!gl) {\n        alert(\"There's no WebGL context available.\");\n        return;\n    }\n    //    Set the viewport to the canvas width and height\n    cw = window.innerWidth;\n    ch = window.innerHeight;\n    canvas.width = cw;\n    canvas.height = ch;\n    gl.viewport(0, 0, canvas.width, canvas.height);\n\n    var vertexShaderScript = document.getElementById(\"shader-vs\");\n    var vertexShader = gl.createShader(gl.VERTEX_SHADER);\n    gl.shaderSource(vertexShader, vertexShaderScript.text);\n    gl.compileShader(vertexShader);\n    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {\n        alert(\"Couldn't compile the vertex shader\");\n        gl.deleteShader(vertexShader);\n        return;\n    }\n\n    var fragmentShaderScript = document.getElementById(\"shader-fs\");\n    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);\n    gl.shaderSource(fragmentShader, fragmentShaderScript.text);\n    gl.compileShader(fragmentShader);\n    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {\n        alert(\"Couldn't compile the fragment shader\");\n        gl.deleteShader(fragmentShader);\n        return;\n    }\n\n    //    Create a shader program.\n    gl.program = gl.createProgram();\n    gl.attachShader(gl.program, vertexShader);\n    gl.attachShader(gl.program, fragmentShader);\n    gl.linkProgram(gl.program);\n    if (!gl.getProgramParameter(gl.program, gl.LINK_STATUS)) {\n        alert(\"Unable to initialise shaders\");\n        gl.deleteProgram(gl.program);\n        gl.deleteProgram(vertexShader);\n        gl.deleteProgram(fragmentShader);\n        return;\n    }\n\n    gl.useProgram(gl.program);\n    var vertexPosition = gl.getAttribLocation(gl.program, \"vertexPosition\");\n    gl.enableVertexAttribArray(vertexPosition);\n    gl.clearColor(0.1, 0.1, 0.12, 1.0);\n    gl.clearDepth(1.0);\n\n    gl.enable(gl.BLEND);\n    gl.disable(gl.DEPTH_TEST);\n    gl.blendFunc(gl.SRC_ALPHA, gl.ONE);\n\n    var vertexBuffer = gl.createBuffer();\n    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);\n\n    // ------------------\n\n    setup();\n\n    // ------------------\n\n\n    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);\n\n    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n    //    Define the viewing frustum parameters\n    //    More info: http://en.wikipedia.org/wiki/Viewing_frustum\n    //    More info: http://knol.google.com/k/view-frustum\n    var fieldOfView = 30.0;\n    var aspectRatio = canvas.width / canvas.height;\n    var nearPlane = 1.0;\n    var farPlane = 10000.0;\n    var top = nearPlane * Math.tan(fieldOfView * Math.PI / 360.0);\n    var bottom = -top;\n    var right = top * aspectRatio;\n    var left = -right;\n\n    //     Create the perspective matrix. The OpenGL function that's normally used for this,\n    //     glFrustum() is not included in the WebGL API. That's why we have to do it manually here.\n    //     More info: http://www.cs.utk.edu/~vose/c-stuff/opengl/glFrustum.html\n    var a = (right + left) / (right - left);\n    var b = (top + bottom) / (top - bottom);\n    var c = (farPlane + nearPlane) / (farPlane - nearPlane);\n    var d = (2 * farPlane * nearPlane) / (farPlane - nearPlane);\n    var x = (2 * nearPlane) / (right - left);\n    var y = (2 * nearPlane) / (top - bottom);\n    var perspectiveMatrix = [\n        x, 0, a, 0,\n        0, y, b, 0,\n        0, 0, c, d,\n        0, 0, -1, 0\n    ];\n\n    //     Create the modelview matrix\n    //     More info about the modelview matrix: http://3dengine.org/Modelview_matrix\n    //     More info about the identity matrix: http://en.wikipedia.org/wiki/Identity_matrix\n    var modelViewMatrix = [\n        1, 0, 0, 0,\n        0, 1, 0, 0,\n        0, 0, 1, 0,\n        0, 0, 0, 1\n    ];\n\n    //     Get the vertex position attribute location from the shader program\n    var vertexPosAttribLocation = gl.getAttribLocation(gl.program, \"vertexPosition\");\n    //     Specify the location and format of the vertex position attribute\n    gl.vertexAttribPointer(vertexPosAttribLocation, 3.0, gl.FLOAT, false, 0, 0);\n    //gl.vertexAttribPointer(colorLoc, 4.0, gl.FLOAT, false, 0, 0);\n    //     Get the location of the \"modelViewMatrix\" uniform variable from the\n    //     shader program\n    var uModelViewMatrix = gl.getUniformLocation(gl.program, \"modelViewMatrix\");\n    //     Get the location of the \"perspectiveMatrix\" uniform variable from the\n    //     shader program\n    var uPerspectiveMatrix = gl.getUniformLocation(gl.program, \"perspectiveMatrix\");\n    //     Set the values\n    gl.uniformMatrix4fv(uModelViewMatrix, false, new Float32Array(perspectiveMatrix));\n    gl.uniformMatrix4fv(uPerspectiveMatrix, false, new Float32Array(modelViewMatrix));\n\n    animate();\n    setTimeout(timer, 1500);\n}\nvar count = 0;\nvar cn = 0;\n\nfunction animate() {\n    requestAnimationFrame(animate);\n    drawScene();\n}\n\n\nfunction drawScene() {\n    draw();\n\n    gl.lineWidth(2);\n    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);\n\n    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n    //gl.drawArrays( gl.LINES_STRIP, 0, numLines );\n    gl.drawArrays(gl.LINES, 0, numLines);\n    //gl.drawArrays( gl.QUAD_STRIP, 0, numLines );\n\n    gl.flush();\n}\n\n// ===================================\nfunction setup() {\n    setup00();\n\n    setTimeout(onChangeTimer, 300);\n}\n\n\nfunction draw() {\n    /*\n     switch (drawType) {\n     case 0:\n     draw0();\n     break;\n     case 1:\n     draw1();\n     break;\n     case 2:\n     draw2();\n     break;\n     }\n     */\n\n    draw00();\n}\n\n// ===================================\n\nfunction setup00() {\n\n    vertices = [];\n    velThetaArr = [];\n    velRadArr = [];\n    ratio = cw / ch;\n    velocities = [];\n    thetaArr = [];\n    freqArr = [];\n    boldRateArr = [];\n\n\n\n    // -------------------------------\n    //var minSize = Math.min(window.innerWidth, scale.innerHeight);\n    var widthScale = window.innerWidth / window.innerHeight;\n    var height = 340 * scaleFactor;\n\n\n    var X_MAX_NUM = parseInt(window.innerWidth / height);\n    var Y_MAX_NUM = parseInt(window.innerHeight / height);\n    // 2 -> window.innerHeight\n    // ? -> 50\n\n    var targetRad =  1.0;\n    var xPos, yPos;\n    var target = new Target(targetRad);\n    target.x = 0;\n    target.y = 0;\n\n    targetArr.push(target);\n\n    for(var ii = 0; ii < numLines; ii++){\n        vertices.push( 0, 0, 1.83);\n        vertices.push( 0, 0, 1.83);\n    }\n\n\n    vertices = new Float32Array(vertices);\n    velocities = new Float32Array(velocities);\n\n}\n\n// -------------------------------\n\nfunction draw00(){\n\n    for(var ii = 0; ii < targetArr.length; ii++ ){\n        targetArr[ii].rotate += targetArr[ii].rotate_speed;\n    }\n\n    var tRad, tX, tY;\n    var bp, px, py;\n    var target;\n    var side = .5 / window.innerHeight;\n    for(var ii = 0; ii < numLines * 2; ii += 2){\n        bp = ii * 3;\n\n        target = targetArr[ (ii/2) % targetArr.length];\n        tRad   = Math.cos(target.rotate * 2.321 + target.freq * ii ) * target.bold_rate ;\n\n        tX = target.x + Math.cos(target.rotate + target.step * ii) * tRad;\n        tY = target.y + Math.sin(target.rotate + target.step * ii) * tRad;\n\n\n\n        px = vertices[bp + 3];\n        py = vertices[bp + 4];\n\n        px += (tX - px) * .3;\n        py += (tY - py) * .3;\n\n        vertices[bp + 3] = px;\n        vertices[bp + 4] = py;\n\n\n        vertices[bp ] = px-side;\n        vertices[bp + 1] = py-side;\n\n    }\n\n}\n\n\n// ===================================\n\n// -------------------------------\n\nfunction timer() {\n\n    /*\n     for(var ii = 0; ii < targetArr.length; ii++) {\n     targetArr[ii].update();\n     }\n\n\n     setTimeout(timer, 1500);*/\n}\n"
  },
  {
    "path": "app/scripts/4-webgl/57-gl.js",
    "content": "window.onload = loadScene;\n\nvar canvas, gl,\n    ratio,\n    vertices,\n    velocities,\n    freqArr,\n    cw,\n    ch,\n    colorLoc,\n    thetaArr,\n    velThetaArr,\n    velRadArr0,\n    velRadArr1,\n    boldRateArr,\n    drawType,\n    numLines = 30000;\n\nvar colorArr = [];\nvar colorVbo;\n\nvar target = [];\nvar type = [];\n\nvar randomTargetXArr = [], randomTargetYArr = [];\ndrawType = 2;\n\n\n/**\n * Initialises WebGL and creates the 3D scene.\n */\nfunction loadScene() {\n    //    Get the canvas element\n    canvas = document.getElementById(\"c\");\n    //    Get the WebGL context\n    gl = canvas.getContext(\"experimental-webgl\");\n    //    Check whether the WebGL context is available or not\n    //    if it's not available exit\n    if (!gl) {\n        alert(\"There's no WebGL context available.\");\n        return;\n    }\n    //    Set the viewport to the canvas width and height\n    cw = window.innerWidth;\n    ch = window.innerHeight;\n    canvas.width = cw;\n    canvas.height = ch;\n    gl.viewport(0, 0, canvas.width, canvas.height);\n\n    //    Load the vertex shader that's defined in a separate script\n    //    block at the top of this page.\n    //    More info about shaders: http://en.wikipedia.org/wiki/Shader_Model\n    //    More info about GLSL: http://en.wikipedia.org/wiki/GLSL\n    //    More info about vertex shaders: http://en.wikipedia.org/wiki/Vertex_shader\n\n    //    Grab the script element\n    var vertexShaderScript = document.getElementById(\"shader-vs\");\n    var vertexShader = gl.createShader(gl.VERTEX_SHADER);\n    gl.shaderSource(vertexShader, vertexShaderScript.text);\n    gl.compileShader(vertexShader);\n    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {\n        alert(\"Couldn't compile the vertex shader\");\n        gl.deleteShader(vertexShader);\n        return;\n    }\n\n    //    Load the fragment shader that's defined in a separate script\n    //    More info about fragment shaders: http://en.wikipedia.org/wiki/Fragment_shader\n    var fragmentShaderScript = document.getElementById(\"shader-fs\");\n    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);\n    gl.shaderSource(fragmentShader, fragmentShaderScript.text);\n    gl.compileShader(fragmentShader);\n    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {\n        alert(\"Couldn't compile the fragment shader\");\n        gl.deleteShader(fragmentShader);\n        return;\n    }\n\n    //    Create a shader program.\n    gl.program = gl.createProgram();\n    gl.attachShader(gl.program, vertexShader);\n    gl.attachShader(gl.program, fragmentShader);\n    gl.linkProgram(gl.program);\n    if (!gl.getProgramParameter(gl.program, gl.LINK_STATUS)) {\n        alert(\"Unable to initialise shaders\");\n        gl.deleteProgram(gl.program);\n        gl.deleteProgram(vertexShader);\n        gl.deleteProgram(fragmentShader);\n        return;\n    }\n    gl.useProgram(gl.program);\n    //var vertexPosition = gl.getAttribLocation(gl.program, \"a_position\");\n\n    gl.clearColor(0.0, 0.0, 0.0, 1.0);\n    gl.clearDepth(1.0);\n\n\n    gl.enable(gl.BLEND);\n    gl.disable(gl.DEPTH_TEST);\n    gl.blendFunc(gl.SRC_ALPHA, gl.ONE);\n;\n\n    //color vbo\n\n\n\n    // ------------------\n\n    setup();\n\n    // ------------------\n\n\n    vertices = new Float32Array(vertices);\n    velocities = new Float32Array(velocities);\n    //console.log(c)\n    colorArr = new Float32Array(colorArr);\n    console.log(colorArr.length)\n\n    /*\n    thetaArr = new Float32Array(thetaArr);\n    velThetaArr = new Float32Array(velThetaArr);\n    velRadArr = new Float32Array(velRadArr);*/\n\n\n    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n    var colorVBO = gl.createBuffer();\n    gl.bindBuffer(gl.ARRAY_BUFFER, colorVBO);\n    gl.bufferData(gl.ARRAY_BUFFER, colorArr, gl.STATIC_DRAW);\n    var colorPosAttrbLocation = gl.getAttribLocation(gl.program, \"a_color\");\n    gl.enableVertexAttribArray(colorPosAttrbLocation);\n    gl.vertexAttribPointer(colorPosAttrbLocation, 4.0, gl.FLOAT, false, 0, 0);\n\n\n    var vertexBuffer = gl.createBuffer();\n    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)\n    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);\n    var vertexPosAttribLocation = gl.getAttribLocation(gl.program, \"a_position\");\n    gl.enableVertexAttribArray(vertexPosAttribLocation);\n    gl.vertexAttribPointer(vertexPosAttribLocation, 2.0, gl.FLOAT, false, 0, 0);\n\n\n\n\n    var resolutionLocation = gl.getUniformLocation( gl.program, \"u_resolution\" );\n    gl.uniform2f( resolutionLocation, window.innerWidth, window.innerHeight );\n\n\n    gl.enable(gl.BLEND);\n    gl.disable(gl.DEPTH_TEST);\n    gl.blendFunc(gl.SRC_ALPHA, gl.ONE);\n\n    animate();\n    //setTimeout(timer, 1500);\n}\nvar count = 0;\nvar cn = 0;\n\nfunction animate() {\n    requestAnimationFrame(animate);\n    drawScene();\n}\n\n\nfunction drawScene() {\n    draw();\n\n    gl.lineWidth(1);\n    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);\n\n    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n    gl.drawArrays(gl.LINES, 0, numLines);\n\n\n\n    gl.flush();\n}\n\n// ===================================\n\nvar centerRadX = 90;\nvar centerRadY = 120;\nvar centerTheta = 0;\nvar centerVelTheta = .03;\n\nfunction setup() {\n\n    vertices = [];\n    velThetaArr = [];\n\n    velRadArr0 = [];\n    velRadArr1 = [];\n\n    ratio = cw / ch;\n    velocities = [];\n    thetaArr = [];\n    freqArr = [];\n    boldRateArr = [];\n\n    // -------------------------------\n\n    for (var ii = 0; ii < numLines; ii++) {\n        var rad, rad2;\n        var random1 = Math.random();\n        var random2 = Math.random();\n\n        if(random1 < .33) rad = 10;\n        else if(random1 < .66) rad = 60;\n        else    rad = 120;\n\n        if(random2 < .33) rad2 = 60;\n        else if(random2 < .66) rad2 = 100;\n        else    rad2 = 140;\n\n        var theta = Math.random() * Math.PI * 2;\n\n        var freq = Math.random() * 0.12 + 0.03;\n        var boldRate = Math.random() * .04 + .01;\n        var randomPosX = (Math.random() * 2  - 1) * window.innerWidth / window.innerHeight;\n        var randomPosY = Math.random() * 2 - 1;\n\n        vertices.push(rad * Math.cos(theta), rad * Math.sin(theta));\n        vertices.push(rad * Math.cos(theta), rad * Math.sin(theta));\n\n        thetaArr.push(theta);\n\n\n        velRadArr0.push(rad);\n        velRadArr1.push(rad2);\n\n        freqArr.push(freq);\n        boldRateArr.push(boldRate);\n\n\n        randomTargetXArr.push(randomPosX);\n        randomTargetYArr.push(randomPosY);\n\n        var colRand = Math.random();\n        var col;\n        if(colRand < 1/3)       {\n            type.push(0);\n            col = [0.8, 0.0, 0.0];\n            var velTheta = (Math.random() * .2 + .8) * Math.PI * 2 / 300;\n        }\n        else if(colRand < 2/3) {\n            type.push(1);\n            col = [0.0, 0.8, 0.0];\n            var velTheta = (Math.random() * .2 + .8) * Math.PI * 2 / 100;\n        }else {\n            type.push(2);\n            col = [0.0, 0.0, 0.8];\n            var velTheta = (Math.random() * .2 + .8) * Math.PI * 2 / 200;\n        }\n\n        colorArr.push(col[0], col[1], col[2], 0.06 );\n        colorArr.push(col[0], col[1], col[2], 0.06 );\n\n        velThetaArr.push(velTheta);\n\n    }\n\n\n    freqArr = new Float32Array(freqArr);\n\n}\n\n// -------------------------------\n\n\n// ===================================\n// -------------------------------\nvar theta1 = 0, theta2 = 0;\nvar rCount = Math.PI/2;\nfunction draw() {\n\n\n\n    cn += .1;\n\n    var i, n = vertices.length, p, bp;\n    var px, py;\n    var cenX, cenY;\n    var pTheta;\n    var rad;\n    var num;\n    rCount += 0.03;\n    var rRad = 10 * Math.sin(rCount);\n    var transX, transY;\n\n    centerTheta += centerVelTheta;\n    cenX = centerRadX * Math.cos(centerTheta);\n    cenY = centerRadY * Math.sin(centerTheta);\n\n    theta1 += .01;\n    theta2 += .02;\n\n    for (i = 0; i < numLines * 2; i += 2) {\n        bp = i * 2;\n\n        num = parseInt(i / 2);\n\n        if(type[num] == 0){\n            transX = rRad * Math.cos(0);\n            transY = rRad * Math.sin(0);\n        }else if(type[num] == 2){\n            transX = rRad * Math.cos(120/180*Math.PI);\n            transY = rRad * Math.sin(120/180*Math.PI);\n        }else{\n            transX = rRad * Math.cos(240/180*Math.PI);\n            transY = rRad * Math.sin(240/180*Math.PI);\n        }\n        pTheta = thetaArr[num];\n\n        pTheta = pTheta + velThetaArr[num];\n        thetaArr[num] = pTheta;\n\n        rad = velRadArr0[num];\n\n        px = rad * Math.cos(pTheta - theta2) + transX;\n        py = rad * Math.sin(pTheta - theta1) + transY;\n\n        vertices[bp + 2] = px + cenX;\n        vertices[bp + 3] = py + cenY;\n\n        rad = velRadArr1[num];\n        px = rad * Math.cos(pTheta + theta1 ) +transX;\n        py = rad * Math.sin(pTheta + theta2 ) +transY;\n\n        vertices[bp] = px;\n        vertices[bp + 1] = py;\n\n    }\n}\n\n// -------------------------------\n\n\nfunction timer() {\n    drawType = (drawType + 1) % 3;\n\n    setTimeout(timer, 1500);\n}\n"
  },
  {
    "path": "app/scripts/4-webgl/58-three-js.js",
    "content": "/**\n * Created by kenji-special on 12/26/14.\n */\n\nvar scene, camera, renderer;\nvar geometry, material, mesh;\nvar prevSecondTheta;\nvar hour, min, second;\nvar secondTheta;\n\nvar secondHandGeometry, secondHandMaterial, secondHandLine;\nvar id;\n\ninit();\nanimate();\n\nfunction init() {\n\n    scene = new THREE.Scene();\n\n    camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 100, 10000 );\n    camera.position.z = 300;\n\n    geometry = new THREE.BoxGeometry( 200, 200, 200 );\n    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );\n\n    mesh = new THREE.Mesh( geometry, material );\n    //scene.add( mesh );\n\n    secondHandGeometry = new THREE.Geometry();\n    secondHandGeometry.vertices.push(new THREE.Vector3( 0, 200, 0));\n    secondHandGeometry.vertices.push(new THREE.Vector3( 0, -20, 0));\n    secondHandMaterial = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 1 } );\n    secondHandLine = new THREE.Line(secondHandGeometry, secondHandMaterial);\n    scene.add(secondHandLine);\n\n    renderer = new THREE.WebGLRenderer({canvas: document.getElementById(\"c\")});\n    renderer.setSize( window.innerWidth, window.innerHeight );\n\n    //document.body.appendChild( renderer.domElement );\n\n    keyEvent.on(ESC_DOWN, onEscapeDonwHandler);\n}\n\nfunction animate() {\n\n\n    id = requestAnimationFrame( animate );\n    var dd = new Date();\n\n    second = dd.getSeconds();\n    secondTheta = second / 60 * 2 * Math.PI * -1;\n\n    secondHandLine.rotation.set(0, 0, secondTheta);\n\n    // calculation of the area of the animation.\n\n\n    // ----------------------------\n\n    prevSecondTheta = secondTheta;\n\n    renderer.render( scene, camera );\n}\n\nfunction onEscapeDonwHandler(){\n    cancelRequestAnimFrame(id);\n    //cancelAnimationFrame(requestId);\n}\n"
  },
  {
    "path": "app/scripts/4-webgl/64-three-js.js",
    "content": "var container, stats;\n\nvar camera, scene, renderer;\nvar sqLength = 80;\nvar yy = 0;\n\nvar group;\nvar meshArr = [];\n\nvar targetRotation = 0;\nvar targetRotationOnMouseDown = 0;\n\nvar mouseX = 0;\nvar mouseXOnMouseDown = 0;\n\nvar windowHalfX = window.innerWidth / 2;\nvar windowHalfY = window.innerHeight / 2;\nvar width = window.innerWidth;\nvar height = window.innerHeight;\n\ninit();\nanimate();\n\nfunction init() {\n\n    container = document.createElement('div');\n    document.body.appendChild(container);\n\n\n    scene = new THREE.Scene();\n\n    //camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );\n    camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000);\n    camera.position.set(0, 150, 500);\n    scene.add(camera);\n\n    var light = new THREE.PointLight(0xffffff, 0.8);\n    camera.add(light);\n\n    function addShape(shape, extrudeSettings, color, x, y, z) {\n        var points = shape.createPointsGeometry();\n        var spacedPoints = shape.createSpacedPointsGeometry(50);\n\n        // flat shape\n\n        var geometry = new THREE.ShapeGeometry(shape);\n\n        var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({\n            color: color,\n            ambient: color,\n            side: THREE.DoubleSide\n        }));\n        mesh.position.set(x, y, 0);\n        scene.add(mesh);\n\n        return mesh;\n    }\n\n\n    // Square\n\n    var squareShape = new THREE.Shape();\n    squareShape.moveTo(-sqLength / 2, -sqLength / 2);\n    squareShape.lineTo(-sqLength / 2, sqLength / 2);\n    squareShape.lineTo(sqLength / 2, sqLength / 2);\n    squareShape.lineTo(sqLength / 2, -sqLength / 2);\n    squareShape.lineTo(-sqLength / 2, -sqLength / 2);\n\n    var extrudeSettings = {amount: 8, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1};\n\n    // addShape( shape, color, x, y, z, rx, ry,rz, s );\n    var countX = 0;\n    var countY = 0;\n\n    for (var xx = -10; xx <= 10; xx++) {\n        var addValue;\n        meshArr[countX] = [];\n\n        for (var yy = -10; yy <= 10; yy++) {\n\n            if (yy % 2 == 0) addValue = 1;\n            else            addValue = 0;\n\n            var xPos = sqLength * (xx * 2 + addValue);\n            var yPos = sqLength * yy ;\n\n            var squareMesh = addShape(squareShape, extrudeSettings, 0x000000, xPos, yPos, 0);\n            squareMesh.originalX = xPos;\n            squareMesh.originalY = yPos;\n            meshArr[countX][countY] = squareMesh;\n\n\n            countY++;\n        }\n\n        countX++;\n        countY = 0;\n    }\n\n    randomGenerator();\n\n    //\n\n    renderer = new THREE.WebGLRenderer({antialias: true});\n    renderer.setClearColor(0xf0f0f0);\n    renderer.setPixelRatio(window.devicePixelRatio);\n    renderer.setSize(window.innerWidth, window.innerHeight);\n    container.appendChild(renderer.domElement);\n\n    document.addEventListener('mousedown', onDocumentMouseDown, false);\n    document.addEventListener('touchstart', onDocumentTouchStart, false);\n    document.addEventListener('touchmove', onDocumentTouchMove, false);\n\n    //\n\n    window.addEventListener('resize', onWindowResize, false);\n\n}\n\nfunction onWindowResize() {\n\n    windowHalfX = window.innerWidth / 2;\n    windowHalfY = window.innerHeight / 2;\n\n    camera.aspect = window.innerWidth / window.innerHeight;\n    camera.updateProjectionMatrix();\n\n    renderer.setSize(window.innerWidth, window.innerHeight);\n\n}\n\n//\n\nfunction onDocumentMouseDown(event) {\n\n    event.preventDefault();\n\n    document.addEventListener('mousemove', onDocumentMouseMove, false);\n    document.addEventListener('mouseup', onDocumentMouseUp, false);\n    document.addEventListener('mouseout', onDocumentMouseOut, false);\n\n    mouseXOnMouseDown = event.clientX - windowHalfX;\n    targetRotationOnMouseDown = targetRotation;\n\n}\n\nfunction onDocumentMouseMove(event) {\n\n    mouseX = event.clientX - windowHalfX;\n\n    targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;\n\n}\n\nfunction onDocumentMouseUp(event) {\n\n    document.removeEventListener('mousemove', onDocumentMouseMove, false);\n    document.removeEventListener('mouseup', onDocumentMouseUp, false);\n    document.removeEventListener('mouseout', onDocumentMouseOut, false);\n\n}\n\nfunction onDocumentMouseOut(event) {\n\n    document.removeEventListener('mousemove', onDocumentMouseMove, false);\n    document.removeEventListener('mouseup', onDocumentMouseUp, false);\n    document.removeEventListener('mouseout', onDocumentMouseOut, false);\n\n}\n\nfunction onDocumentTouchStart(event) {\n\n    if (event.touches.length == 1) {\n\n        event.preventDefault();\n\n        mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;\n        targetRotationOnMouseDown = targetRotation;\n\n    }\n\n}\n\nfunction onDocumentTouchMove(event) {\n\n    if (event.touches.length == 1) {\n\n        event.preventDefault();\n\n        mouseX = event.touches[0].pageX - windowHalfX;\n        targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;\n\n    }\n\n}\n\n//\n\nfunction animate() {\n\n    requestAnimationFrame(animate);\n\n    for(var ii = 0; ii < meshArr.length; ii++){\n        //meshArr[ii][yy].position.x ++;\n        meshArr[ii][yy].position.y = meshArr[ii][yy].originalY + sqLength * (2 * (Math.random() + Math.random() +Math.random())/3   - 1);\n    }\n\n    render();\n\n}\n\nfunction render() {\n\n    renderer.render(scene, camera);\n\n}\n\nfunction randomGenerator(){\n    yy++;// = (Math.random() * 12 ) | 0;\n\n    setTimeout(randomGenerator, 1000);\n}\n"
  },
  {
    "path": "app/scripts/4-webgl/99-00-gl-learning.js",
    "content": "// canvasエレメントを取得\nvar c = document.getElementById('canvas');\nc.width = 300;\nc.height = 300;\n\n// webglコンテキストを取得\nvar gl = c.getContext('webgl') || c.getContext('experimental-webgl');\n\n// canvasを初期化する色を設定する\ngl.clearColor(0.0, 0.0, 0.0, 1.0);\n\n// canvasを初期化する際の深度を設定する\ngl.clearDepth(1.0);\n\n// canvasを初期化\ngl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n// 頂点シェーダとフラグメントシェーダの生成\nvar v_shader = create_shader('vs');\nvar f_shader = create_shader('fs');\n\n// プログラムオブジェクトの生成とリンク\nvar prg = create_program(v_shader, f_shader);\n\n// attributeLocationの取得\nvar attLocation = gl.getAttribLocation(prg, 'position');\n\n// attributeの要素数(この場合は xyz の3要素)\nvar attStride = 3;\n\n// モデル(頂点)データ\nvar vertex_position = [\n    0.0, 1.0, 0.0,\n    1.0, 0.0, 0.0,\n    -1.0, 0.0, 0.0\n];\n\n// VBOの生成\nvar vbo = create_vbo(vertex_position);\n\n// VBOをバインド\ngl.bindBuffer(gl.ARRAY_BUFFER, vbo);\n\n// attribute属性を有効にする\ngl.enableVertexAttribArray(attLocation);\n\n// attribute属性を登録\ngl.vertexAttribPointer(attLocation, attStride, gl.FLOAT, false, 0, 0);\n\n// minMatrix.js を用いた行列関連処理\n// matIVオブジェクトを生成\nvar m = new matIV();\n\n// 各種行列の生成と初期化\nvar mMatrix = m.identity(m.create());\nvar vMatrix = m.identity(m.create());\nvar pMatrix = m.identity(m.create());\nvar mvpMatrix = m.identity(m.create());\n\n// ビュー座標変換行列\nm.lookAt([0.0, 1.0, 3.0], [0, 0, 0], [0, 1, 0], vMatrix);\n\n// プロジェクション座標変換行列\nm.perspective(90, c.width / c.height, 0.1, 100, pMatrix);\n\n// 各行列を掛け合わせ座標変換行列を完成させる\nm.multiply(pMatrix, vMatrix, mvpMatrix);\nm.multiply(mvpMatrix, mMatrix, mvpMatrix);\n\n// uniformLocationの取得\nvar uniLocation = gl.getUniformLocation(prg, 'mvpMatrix');\n\n// uniformLocationへ座標変換行列を登録\ngl.uniformMatrix4fv(uniLocation, false, mvpMatrix);\n\n// モデルの描画\ngl.drawArrays(gl.TRIANGLES, 0, 3);\n\n// コンテキストの再描画\ngl.flush();\n\n// シェーダを生成する関数\nfunction create_shader(id){\n    // シェーダを格納する変数\n    var shader;\n\n    // HTMLからscriptタグへの参照を取得\n    var scriptElement = document.getElementById(id);\n\n    // scriptタグが存在しない場合は抜ける\n    if(!scriptElement){return;}\n\n    // scriptタグのtype属性をチェック\n    switch(scriptElement.type){\n\n        // 頂点シェーダの場合\n        case 'x-shader/x-vertex':\n            shader = gl.createShader(gl.VERTEX_SHADER);\n            break;\n\n        // フラグメントシェーダの場合\n        case 'x-shader/x-fragment':\n            shader = gl.createShader(gl.FRAGMENT_SHADER);\n            break;\n        default :\n            return;\n    }\n\n    // 生成されたシェーダにソースを割り当てる\n    gl.shaderSource(shader, scriptElement.text);\n\n    // シェーダをコンパイルする\n    gl.compileShader(shader);\n\n    // シェーダが正しくコンパイルされたかチェック\n    if(gl.getShaderParameter(shader, gl.COMPILE_STATUS)){\n\n        // 成功していたらシェーダを返して終了\n        return shader;\n    }else{\n\n        // 失敗していたらエラーログをアラートする\n        alert(gl.getShaderInfoLog(shader));\n    }\n}\n\n// プログラムオブジェクトを生成しシェーダをリンクする関数\nfunction create_program(vs, fs){\n    // プログラムオブジェクトの生成\n    var program = gl.createProgram();\n\n    // プログラムオブジェクトにシェーダを割り当てる\n    gl.attachShader(program, vs);\n    gl.attachShader(program, fs);\n\n    // シェーダをリンク\n    gl.linkProgram(program);\n\n    // シェーダのリンクが正しく行なわれたかチェック\n    if(gl.getProgramParameter(program, gl.LINK_STATUS)){\n\n        // 成功していたらプログラムオブジェクトを有効にする\n        gl.useProgram(program);\n\n        // プログラムオブジェクトを返して終了\n        return program;\n    }else{\n\n        // 失敗していたらエラーログをアラートする\n        alert(gl.getProgramInfoLog(program));\n    }\n}\n\n// VBOを生成する関数\nfunction create_vbo(data){\n    // バッファオブジェクトの生成\n    var vbo = gl.createBuffer();\n\n    // バッファをバインドする\n    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);\n\n    // バッファにデータをセット\n    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);\n\n    // バッファのバインドを無効化\n    gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n    // 生成した VBO を返して終了\n    return vbo;\n}\n"
  },
  {
    "path": "app/scripts/4-webgl/vendors/minMatrix.js",
    "content": "// ------------------------------------------------------------------------------------------------\n// minMatrix.js\n// version 0.0.1\n// Copyright (c) doxas\n// ------------------------------------------------------------------------------------------------\n\nfunction matIV(){\n\tthis.create = function(){\n\t\treturn new Float32Array(16);\n\t};\n\tthis.identity = function(dest){\n\t\tdest[0]  = 1; dest[1]  = 0; dest[2]  = 0; dest[3]  = 0;\n\t\tdest[4]  = 0; dest[5]  = 1; dest[6]  = 0; dest[7]  = 0;\n\t\tdest[8]  = 0; dest[9]  = 0; dest[10] = 1; dest[11] = 0;\n\t\tdest[12] = 0; dest[13] = 0; dest[14] = 0; dest[15] = 1;\n\t\treturn dest;\n\t};\n\tthis.multiply = function(mat1, mat2, dest){\n\t\tvar a = mat1[0],  b = mat1[1],  c = mat1[2],  d = mat1[3],\n\t\t\te = mat1[4],  f = mat1[5],  g = mat1[6],  h = mat1[7],\n\t\t\ti = mat1[8],  j = mat1[9],  k = mat1[10], l = mat1[11],\n\t\t\tm = mat1[12], n = mat1[13], o = mat1[14], p = mat1[15],\n\t\t\tA = mat2[0],  B = mat2[1],  C = mat2[2],  D = mat2[3],\n\t\t\tE = mat2[4],  F = mat2[5],  G = mat2[6],  H = mat2[7],\n\t\t\tI = mat2[8],  J = mat2[9],  K = mat2[10], L = mat2[11],\n\t\t\tM = mat2[12], N = mat2[13], O = mat2[14], P = mat2[15];\n\t\tdest[0] = A * a + B * e + C * i + D * m;\n\t\tdest[1] = A * b + B * f + C * j + D * n;\n\t\tdest[2] = A * c + B * g + C * k + D * o;\n\t\tdest[3] = A * d + B * h + C * l + D * p;\n\t\tdest[4] = E * a + F * e + G * i + H * m;\n\t\tdest[5] = E * b + F * f + G * j + H * n;\n\t\tdest[6] = E * c + F * g + G * k + H * o;\n\t\tdest[7] = E * d + F * h + G * l + H * p;\n\t\tdest[8] = I * a + J * e + K * i + L * m;\n\t\tdest[9] = I * b + J * f + K * j + L * n;\n\t\tdest[10] = I * c + J * g + K * k + L * o;\n\t\tdest[11] = I * d + J * h + K * l + L * p;\n\t\tdest[12] = M * a + N * e + O * i + P * m;\n\t\tdest[13] = M * b + N * f + O * j + P * n;\n\t\tdest[14] = M * c + N * g + O * k + P * o;\n\t\tdest[15] = M * d + N * h + O * l + P * p;\n\t\treturn dest;\n\t};\n\tthis.scale = function(mat, vec, dest){\n\t\tdest[0]  = mat[0]  * vec[0];\n\t\tdest[1]  = mat[1]  * vec[0];\n\t\tdest[2]  = mat[2]  * vec[0];\n\t\tdest[3]  = mat[3]  * vec[0];\n\t\tdest[4]  = mat[4]  * vec[1];\n\t\tdest[5]  = mat[5]  * vec[1];\n\t\tdest[6]  = mat[6]  * vec[1];\n\t\tdest[7]  = mat[7]  * vec[1];\n\t\tdest[8]  = mat[8]  * vec[2];\n\t\tdest[9]  = mat[9]  * vec[2];\n\t\tdest[10] = mat[10] * vec[2];\n\t\tdest[11] = mat[11] * vec[2];\n\t\tdest[12] = mat[12];\n\t\tdest[13] = mat[13];\n\t\tdest[14] = mat[14];\n\t\tdest[15] = mat[15];\n\t\treturn dest;\n\t};\n\tthis.translate = function(mat, vec, dest){\n\t\tdest[0] = mat[0]; dest[1] = mat[1]; dest[2]  = mat[2];  dest[3]  = mat[3];\n\t\tdest[4] = mat[4]; dest[5] = mat[5]; dest[6]  = mat[6];  dest[7]  = mat[7];\n\t\tdest[8] = mat[8]; dest[9] = mat[9]; dest[10] = mat[10]; dest[11] = mat[11];\n\t\tdest[12] = mat[0] * vec[0] + mat[4] * vec[1] + mat[8]  * vec[2] + mat[12];\n\t\tdest[13] = mat[1] * vec[0] + mat[5] * vec[1] + mat[9]  * vec[2] + mat[13];\n\t\tdest[14] = mat[2] * vec[0] + mat[6] * vec[1] + mat[10] * vec[2] + mat[14];\n\t\tdest[15] = mat[3] * vec[0] + mat[7] * vec[1] + mat[11] * vec[2] + mat[15];\n\t\treturn dest;\n\t};\n\tthis.rotate = function(mat, angle, axis, dest){\n\t\tvar sq = Math.sqrt(axis[0] * axis[0] + axis[1] * axis[1] + axis[2] * axis[2]);\n\t\tif(!sq){return null;}\n\t\tvar a = axis[0], b = axis[1], c = axis[2];\n\t\tif(sq != 1){sq = 1 / sq; a *= sq; b *= sq; c *= sq;}\n\t\tvar d = Math.sin(angle), e = Math.cos(angle), f = 1 - e,\n\t\t\tg = mat[0],  h = mat[1], i = mat[2],  j = mat[3],\n\t\t\tk = mat[4],  l = mat[5], m = mat[6],  n = mat[7],\n\t\t\to = mat[8],  p = mat[9], q = mat[10], r = mat[11],\n\t\t\ts = a * a * f + e,\n\t\t\tt = b * a * f + c * d,\n\t\t\tu = c * a * f - b * d,\n\t\t\tv = a * b * f - c * d,\n\t\t\tw = b * b * f + e,\n\t\t\tx = c * b * f + a * d,\n\t\t\ty = a * c * f + b * d,\n\t\t\tz = b * c * f - a * d,\n\t\t\tA = c * c * f + e;\n\t\tif(angle){\n\t\t\tif(mat != dest){\n\t\t\t\tdest[12] = mat[12]; dest[13] = mat[13];\n\t\t\t\tdest[14] = mat[14]; dest[15] = mat[15];\n\t\t\t}\n\t\t} else {\n\t\t\tdest = mat;\n\t\t}\n\t\tdest[0] = g * s + k * t + o * u;\n\t\tdest[1] = h * s + l * t + p * u;\n\t\tdest[2] = i * s + m * t + q * u;\n\t\tdest[3] = j * s + n * t + r * u;\n\t\tdest[4] = g * v + k * w + o * x;\n\t\tdest[5] = h * v + l * w + p * x;\n\t\tdest[6] = i * v + m * w + q * x;\n\t\tdest[7] = j * v + n * w + r * x;\n\t\tdest[8] = g * y + k * z + o * A;\n\t\tdest[9] = h * y + l * z + p * A;\n\t\tdest[10] = i * y + m * z + q * A;\n\t\tdest[11] = j * y + n * z + r * A;\n\t\treturn dest;\n\t};\n\tthis.lookAt = function(eye, center, up, dest){\n\t\tvar eyeX    = eye[0],    eyeY    = eye[1],    eyeZ    = eye[2],\n\t\t\tupX     = up[0],     upY     = up[1],     upZ     = up[2],\n\t\t\tcenterX = center[0], centerY = center[1], centerZ = center[2];\n\t\tif(eyeX == centerX && eyeY == centerY && eyeZ == centerZ){return this.identity(dest);}\n\t\tvar x0, x1, x2, y0, y1, y2, z0, z1, z2, l;\n\t\tz0 = eyeX - center[0]; z1 = eyeY - center[1]; z2 = eyeZ - center[2];\n\t\tl = 1 / Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2);\n\t\tz0 *= l; z1 *= l; z2 *= l;\n\t\tx0 = upY * z2 - upZ * z1;\n\t\tx1 = upZ * z0 - upX * z2;\n\t\tx2 = upX * z1 - upY * z0;\n\t\tl = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2);\n\t\tif(!l){\n\t\t\tx0 = 0; x1 = 0; x2 = 0;\n\t\t} else {\n\t\t\tl = 1 / l;\n\t\t\tx0 *= l; x1 *= l; x2 *= l;\n\t\t}\n\t\ty0 = z1 * x2 - z2 * x1; y1 = z2 * x0 - z0 * x2; y2 = z0 * x1 - z1 * x0;\n\t\tl = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2);\n\t\tif(!l){\n\t\t\ty0 = 0; y1 = 0; y2 = 0;\n\t\t} else {\n\t\t\tl = 1 / l;\n\t\t\ty0 *= l; y1 *= l; y2 *= l;\n\t\t}\n\t\tdest[0] = x0; dest[1] = y0; dest[2]  = z0; dest[3]  = 0;\n\t\tdest[4] = x1; dest[5] = y1; dest[6]  = z1; dest[7]  = 0;\n\t\tdest[8] = x2; dest[9] = y2; dest[10] = z2; dest[11] = 0;\n\t\tdest[12] = -(x0 * eyeX + x1 * eyeY + x2 * eyeZ);\n\t\tdest[13] = -(y0 * eyeX + y1 * eyeY + y2 * eyeZ);\n\t\tdest[14] = -(z0 * eyeX + z1 * eyeY + z2 * eyeZ);\n\t\tdest[15] = 1;\n\t\treturn dest;\n\t};\n\tthis.perspective = function(fovy, aspect, near, far, dest){\n\t\tvar t = near * Math.tan(fovy * Math.PI / 360);\n\t\tvar r = t * aspect;\n\t\tvar a = r * 2, b = t * 2, c = far - near;\n\t\tdest[0] = near * 2 / a;\n\t\tdest[1] = 0;\n\t\tdest[2] = 0;\n\t\tdest[3] = 0;\n\t\tdest[4] = 0;\n\t\tdest[5] = near * 2 / b;\n\t\tdest[6] = 0;\n\t\tdest[7] = 0;\n\t\tdest[8] = 0;\n\t\tdest[9] = 0;\n\t\tdest[10] = -(far + near) / c;\n\t\tdest[11] = -1;\n\t\tdest[12] = 0;\n\t\tdest[13] = 0;\n\t\tdest[14] = -(far * near * 2) / c;\n\t\tdest[15] = 0;\n\t\treturn dest;\n\t};\n\tthis.transpose = function(mat, dest){\n\t\tdest[0]  = mat[0];  dest[1]  = mat[4];\n\t\tdest[2]  = mat[8];  dest[3]  = mat[12];\n\t\tdest[4]  = mat[1];  dest[5]  = mat[5];\n\t\tdest[6]  = mat[9];  dest[7]  = mat[13];\n\t\tdest[8]  = mat[2];  dest[9]  = mat[6];\n\t\tdest[10] = mat[10]; dest[11] = mat[14];\n\t\tdest[12] = mat[3];  dest[13] = mat[7];\n\t\tdest[14] = mat[11]; dest[15] = mat[15];\n\t\treturn dest;\n\t};\n\tthis.inverse = function(mat, dest){\n\t\tvar a = mat[0],  b = mat[1],  c = mat[2],  d = mat[3],\n\t\t\te = mat[4],  f = mat[5],  g = mat[6],  h = mat[7],\n\t\t\ti = mat[8],  j = mat[9],  k = mat[10], l = mat[11],\n\t\t\tm = mat[12], n = mat[13], o = mat[14], p = mat[15],\n\t\t\tq = a * f - b * e, r = a * g - c * e,\n\t\t\ts = a * h - d * e, t = b * g - c * f,\n\t\t\tu = b * h - d * f, v = c * h - d * g,\n\t\t\tw = i * n - j * m, x = i * o - k * m,\n\t\t\ty = i * p - l * m, z = j * o - k * n,\n\t\t\tA = j * p - l * n, B = k * p - l * o,\n\t\t\tivd = 1 / (q * B - r * A + s * z + t * y - u * x + v * w);\n\t\tdest[0]  = ( f * B - g * A + h * z) * ivd;\n\t\tdest[1]  = (-b * B + c * A - d * z) * ivd;\n\t\tdest[2]  = ( n * v - o * u + p * t) * ivd;\n\t\tdest[3]  = (-j * v + k * u - l * t) * ivd;\n\t\tdest[4]  = (-e * B + g * y - h * x) * ivd;\n\t\tdest[5]  = ( a * B - c * y + d * x) * ivd;\n\t\tdest[6]  = (-m * v + o * s - p * r) * ivd;\n\t\tdest[7]  = ( i * v - k * s + l * r) * ivd;\n\t\tdest[8]  = ( e * A - f * y + h * w) * ivd;\n\t\tdest[9]  = (-a * A + b * y - d * w) * ivd;\n\t\tdest[10] = ( m * u - n * s + p * q) * ivd;\n\t\tdest[11] = (-i * u + j * s - l * q) * ivd;\n\t\tdest[12] = (-e * z + f * x - g * w) * ivd;\n\t\tdest[13] = ( a * z - b * x + c * w) * ivd;\n\t\tdest[14] = (-m * t + n * r - o * q) * ivd;\n\t\tdest[15] = ( i * t - j * r + k * q) * ivd;\n\t\treturn dest;\n\t};\n}"
  },
  {
    "path": "app/scripts/5-loop/43-loop.js",
    "content": "// --------------------------\nvar NUM_BALLS = 130,\n    DAMPING = 0.3,\n    GRAVITY = 1,\n    MOUSE_SIZE = 50,\n    SPEED = 1;\nvar TWO_PI = Math.PI * 2;\nvar count  = 0;\nvar balls  = [];\nvar walls = [];\nvar firstWidth;\nvar leftWidth;\n\nvar reset = {\n    y : null\n};\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nvar isNormal = true;\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\nvar Wall = function(left, right, top, bot){\n    this.left  = left;\n    this.right = right;\n    this.top   = top;\n    this.bot   = bot;\n};\n\nvar Ball = function(x, y, radius, wall) {\n\n    this.x = x;\n    this.y = y;\n\n    this.px = x;\n    this.py = y;\n\n    this.fx = 0;\n    this.fy = 0;\n\n    this.radius = 0;\n\n    TweenLite.to(this, 1, {radius: radius});\n\n};\n\nBall.prototype.apply_force = function(delta) {\n\n    delta *= delta;\n\n    this.fy += GRAVITY;\n\n    this.x += this.fx * delta;\n    this.y += this.fy * delta;\n\n    this.fx = this.fy = 0;\n};\n\nBall.prototype.verlet = function() {\n\n    var nx = (this.x * 2) - this.px;\n    var ny = (this.y * 2) - this.py;\n\n    this.px = this.x;\n    this.py = this.y;\n\n    this.x = nx;\n    this.y = ny;\n};\n\nBall.prototype.draw = function(ctx) {\n\n    ctx.beginPath();\n    ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);\n    ctx.fill();\n};\n\n//---------------------------------------\n\nvar resolve_collisions = function(ip) {\n\n    var i = balls[count].length;\n\n    while (i--) {\n\n        var ball_1 = balls[count][i];\n\n\n        var n = balls[count].length;\n\n        while (n--) {\n\n            if (n == i) continue;\n\n            var ball_2 = balls[count][n];\n\n            var diff_x = ball_1.x - ball_2.x;\n            var diff_y = ball_1.y - ball_2.y;\n\n            var length    = diff_x * diff_x + diff_y * diff_y;\n            var dist      = Math.sqrt(length);\n            var real_dist = dist - (ball_1.radius + ball_2.radius);\n\n            if (real_dist < 0) {\n\n                var vel_x1 = ball_1.x - ball_1.px;\n                var vel_y1 = ball_1.y - ball_1.py;\n                var vel_x2 = ball_2.x - ball_2.px;\n                var vel_y2 = ball_2.y - ball_2.py;\n\n                var depth_x = diff_x * (real_dist / dist);\n                var depth_y = diff_y * (real_dist / dist);\n\n                ball_1.x -= depth_x * 0.5;\n                ball_1.y -= depth_y * 0.5;\n\n                ball_2.x += depth_x * 0.5;\n                ball_2.y += depth_y * 0.5;\n\n                if (ip) {\n\n                    var pr1 = DAMPING * (diff_x*vel_x1+diff_y*vel_y1) / length,\n                        pr2 = DAMPING * (diff_x*vel_x2+diff_y*vel_y2) / length;\n\n                    vel_x1 += pr2 * diff_x - pr1 * diff_x;\n                    vel_x2 += pr1 * diff_x - pr2 * diff_x;\n\n                    vel_y1 += pr2 * diff_y - pr1 * diff_y;\n                    vel_y2 += pr1 * diff_y - pr2 * diff_y;\n\n                    ball_1.px = ball_1.x - vel_x1;\n                    ball_1.py = ball_1.y - vel_y1;\n\n                    ball_2.px = ball_2.x - vel_x2;\n                    ball_2.py = ball_2.y - vel_y2;\n                }\n            }\n        }\n    }\n};\n\nvar check_walls = function(wall) {\n\n    var i = balls[count].length;\n\n    while (i--) {\n\n        var ball = balls[count][i];\n\n        if (ball.x < wall.left + ball.radius) {\n\n            var vel_x = ball.px - ball.x;\n            ball.x = wall.left + ball.radius;\n            ball.px = ball.x - vel_x * DAMPING;\n\n        } else if (ball.x + ball.radius > wall.right) {\n\n            var vel_x = ball.px - ball.x;\n            ball.x = wall.right - ball.radius;\n            ball.px = ball.x - vel_x * DAMPING;\n        }\n\n         if (ball.y + ball.radius > wall.bot) {\n\n            var vel_y = ball.py - ball.y;\n            ball.y = wall.bot - ball.radius;\n            ball.py = ball.y - vel_y * DAMPING;\n        }\n    }\n};\n\n// ================\n\nvar add_ball = function(x, y, r) {\n\n\n    var x = x || Math.random() * (firstWidth),\n\n        r = r || leftWidth * .4 * (.1 +.8*Math.random()) + 1;\n    if(r > 100) r = 90 * Math.random() + 10;\n    var    y = y ||  -Math.random() * 100  + 50,\n        s = true,\n        i = balls[count].length;\n\n\n\n    if (s) balls[count].push(new Ball(x, y, r));\n};\n\nvar totalWidth = 0;\n\nfunction init(){\n    firstWidth = width;\n    totalWidth = width /2;\n    leftWidth = width - totalWidth;\n\n\n    var wall = new Wall(0, width, 0, height)\n    walls.push(wall);\n    balls[count] = [];\n    for(var i = 0; i < 20; i++){\n        add_ball();\n    }\n\n\n\n\n    var dis = leftWidth / 500;\n    TweenLite.to(wall, dis, {left: leftWidth, delay: 2, ease:\"Power2.easeOut\", onComplete: addNew});\n\n}\n\n\nfunction addNew(){\n\n    setTimeout(function(){\n\n        count++;\n\n        firstWidth = width - totalWidth;\n        var wall = new Wall(0, firstWidth, 0, height)\n        walls.push(wall);\n        balls[count] = [];\n\n        if(count < 3)\n        totalWidth += (width - totalWidth)/2;\n\n        leftWidth = width - totalWidth;\n\n        for(var i = 0; i < 20; i++){\n            add_ball();\n        }\n\n\n\n\n        if(count < 3) {\n            var dis = leftWidth / 500;\n            if(dis < .3) dis = .3;\n\n            TweenLite.to(wall, dis, {left: leftWidth, delay: 1, ease:\"Power2.easeOut\", onComplete: addNew});\n        }else{\n            setTimeout(function(){\n                isNormal = false;\n                reset.y = window.innerHeight;\n\n                TweenLite.to(reset, 1, {y: 0, delay:.5, ease:\"Power2.easeOut\", onUpdate: onUpdateResetHandler, onComplete: onCompleteResetHandler})\n                setTimeout(function(){\n                    for(var i = 0; i < balls.length; i++){\n                        for(var j = 0; j < balls[i].length; j++){\n                            balls[i][j].fy = -150 - 150 * Math.random();\n                        }\n                    }\n\n                }, 500);\n\n            }, 2000)\n        }\n    }, 1000);\n\n}\n\nfunction onUpdateResetHandler(){\n    walls.forEach(function(element){\n        element.bot = reset.y;\n    });\n\n};\n\nfunction onCompleteResetHandler(){\n    count = 0;\n    walls = [];\n    balls = [];\n\n    isNormal = true;\n\n    init();\n}\n\nfunction loop() {\n    if(isNormal) normalLoop();\n    else         resetLoop();\n\n\n    requestAnimationFrame(loop);\n}\n\nfunction normalLoop(){\n    for(var j = 0; j < balls.length; j++){\n        count = j;\n\n        var iter = 6;\n\n        var delta = SPEED / iter;\n\n        while (iter--) {\n\n            var i = balls[count].length;\n\n            while (i--) {\n\n                balls[count][i].apply_force(delta);\n                balls[count][i].verlet();\n            }\n\n            resolve_collisions();\n            check_walls(walls[count]);\n\n            var i = balls[count].length;\n            while (i--) balls[count][i].verlet();\n\n            resolve_collisions(1);\n            check_walls(walls[count]);\n        }\n    }\n\n    count = balls.length - 1;\n\n    if(count % 2 == 0)ctx.fillStyle = '#fff';\n    else          ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    for(var j = 0; j < count + 1;j++){\n        if(j % 2 == 0) ctx.fillStyle = '#333';\n        else       ctx.fillStyle = \"#fff\";\n        ctx.fillRect(walls[j].left, 0, walls[j].right - walls[j].left, height);\n\n        var i = balls[j].length;\n        if(j % 2 == 0) ctx.fillStyle = '#fff';\n        else       ctx.fillStyle = '#333';\n\n        while (i--) balls[j][i].draw(ctx)\n    }\n\n}\n\nfunction resetLoop(){\n    normalLoop();\n\n    ctx.fillStyle = \"#333\";\n    ctx.fillRect(0, reset.y, width, height - reset.y);\n}\n\n\ninit();\nloop();\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/5-loop/44-loop.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\nvar App = function(){\n    this.transX = width/2;\n    this.transY = height/2;\n\n    //this.shape = new Shape(0, 0);\n\n    this.widthNum  = parseInt(width / 50) + 1;\n    this.heightNum = parseInt(height / 50) + 1;\n\n    this.shapes = [];\n\n    for(var yy = 0; yy < this.heightNum; yy++){\n        for(var xx = 0; xx < this.widthNum; xx++){\n            var xPos = xx* 50 - width/2;\n            var yPos = yy * 50 - height/2;\n\n            var duration = Math.abs(xx - this.widthNum/2 + yy - this.heightNum/2);\n\n            var shape = new Shape(xPos, yPos, duration);\n            this.shapes.push(shape);\n        }\n    }\n};\n\nApp.prototype = {\n    update : function(){\n        this.shapes.forEach(function(element){\n            element.update();\n        });\n\n        this.draw();\n    },\n\n    draw : function(){\n\n        ctx.save();\n        ctx.translate(this.transX, this.transY);\n        this.shapes.forEach(function(element){\n            element.draw();\n        });\n        ctx.restore();\n    }\n};\n\nvar Shape = function(x, y, duration){\n    _.bindAll(this, \"onChangeStateHandler\");\n    this.count = 0;\n\n    this.x = x;\n    this.y = y;\n    this.side = 50;\n\n    this.startX = this.x + this.side/2;\n    this.startY = this.y - this.side/2;\n\n    this.endX   = this.x + this.side/2;\n    this.endY   = this.y + this.side/2;\n\n    var dur = duration * 20 + 300;\n    setTimeout(this.onChangeStateHandler, dur);\n};\n\nShape.prototype = {\n    update : function(){\n\n    },\n\n    draw : function(){\n\n        ctx.beginPath();\n        ctx.strokeStyle = \"#fff\";\n        ctx.moveTo( this.startX, this.startY);\n        ctx.lineTo( this.endX, this.endY );\n        ctx.stroke();\n        ctx.closePath();\n\n    },\n\n    onChangeStateHandler : function(){\n        switch (this.count){\n            case 0:\n                TweenLite.to(this,.6, { startX : this.x - this.side/2, ease:\"Power2.easeOut\"});\n                TweenLite.to(this,.6, { endY   : this.y - this.side/2, ease:\"Power2.easeOut\"});\n                break;\n            case 1:\n                TweenLite.to(this, .6, { startY : this.y + this.side/2, ease: \"Power2.easeOut\"});\n                TweenLite.to(this,.6, { endX : this.x - this.side/2, ease: \"Power2.easeOut\" });\n                break;\n            case 2:\n                TweenLite.to(this, .6, { startX : this.x + this.side/2, ease: \"Power2.easeOut\"});\n                TweenLite.to(this, .6, { endY : this.y + this.side/2, ease: \"Power2.easeOut\" });\n                break;\n            case 3:\n                TweenLite.to(this, .6, { startY : this.y - this.side/2, ease: \"Power2.easeOut\"});\n                TweenLite.to(this, .6, { endX : this.x + this.side/2, ease: \"Power2.easeOut\" });\n                break;\n\n        }\n\n        this.count = (this.count + 1) % 4;\n        setTimeout(this.onChangeStateHandler, 800);\n    }\n};\n\n// ================\nvar app;\n\ninit();\nloop();\n\nfunction init(){\n\n    app = new App();\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    app.update();\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/5-loop/45-loop.js",
    "content": "// --------------------------\nvar TWO_PI = Math.PI * 2;\nvar NUM_BALLS = 130,\n    DAMPING = 0.8,\n    GRAVITY = 1.5,\n    MOUSE_SIZE = 50,\n    SPEED = .5;\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width = width;\ncanvas.height = height;\n\n// ================\n\nvar Ball = function (x, y, radius, wall) {\n\n    this.x = x || 0;\n    this.y = y || 0;\n\n    this.px = x;\n    this.py = y;\n\n    this.fx = 0;\n    this.fy = 0;\n\n\n    this.radius = radius || 10;\n\n    //TweenLite.to(this, 1, {radius: radius});\n\n};\n\nBall.prototype.init = function () {\n    this.px = this.x;\n    this.py = this.y;\n\n    this.fx = 0;\n    this.fy = 0;\n}\n\nBall.prototype.apply_force = function (delta) {\n\n    delta *= delta;\n\n    this.fy += GRAVITY;\n\n    this.x += this.fx * delta;\n    this.y += this.fy * delta;\n\n    this.fx = this.fy = 0;\n};\n\nBall.prototype.verlet = function () {\n\n    var nx = (this.x * 2) - this.px;\n    var ny = (this.y * 2) - this.py;\n\n    this.px = this.x;\n    this.py = this.y;\n\n    this.x = nx;\n    this.y = ny;\n};\n\nBall.prototype.draw = function () {\n\n    ctx.beginPath();\n    ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);\n    ctx.fill();\n};\n\n\nvar OutsideCircle = function () {\n    this.rad = rad;\n};\n\nOutsideCircle.prototype = {\n    update: function () {\n\n    },\n\n    draw: function () {\n        ctx.beginPath();\n        ctx.strokeStyle = \"#fff\";\n        ctx.arc(0, 0, this.rad, 0, TWO_PI);\n        ctx.stroke();\n        ctx.closePath();\n    },\n\n    checkCollision : function(cricles){\n        var self = this;\n        cricles.forEach(function(element){\n            var dis1 = Math.sqrt(element.x * element.x + element.y * element.y);\n            if(dis1 + element.radius > self.rad){\n                var theta = Math.atan2(element.y, element.x);\n\n                var vel_x = element.px - element.x;\n                var vel_y = element.py - element.y;\n\n                var vel_xx = Math.cos(Math.PI / 2 - theta) * vel_x - vel_y * Math.cos(Math.PI / 2 - theta);\n                var vel_yy = Math.sin(Math.PI / 2 - theta) * vel_x + vel_y * Math.sin(Math.PI / 2 - theta);\n\n                vel_yy*= -DAMPING;\n\n                vel_x = Math.cos(theta - Math.PI/2) * vel_xx - Math.cos(theta - Math.PI/2) * vel_yy;\n                vel_y = Math.sin(theta - Math.PI/2) * vel_xx + Math.sin(theta - Math.PI/2) * vel_yy;\n\n\n                element.x = (self.rad - element.radius -.5) * Math.cos(theta);\n                element.y = (self.rad - element.radius -.5) * Math.sin(theta);\n\n                element.px = element.x - DAMPING * vel_x;\n                element.py = element.y - DAMPING * vel_y;\n\n            }\n        });\n    }\n};\n\n//---------------------------------------\n\nvar resolve_collisions = function(ip, balls) {\n\n    var i = balls.length;\n\n    while (i--) {\n\n        var ball_1 = balls[i];\n\n\n        var n = balls.length;\n\n        while (n--) {\n\n            if (n == i) continue;\n\n            var ball_2 = balls[n];\n\n            var diff_x = ball_1.x - ball_2.x;\n            var diff_y = ball_1.y - ball_2.y;\n\n            var length    = diff_x * diff_x + diff_y * diff_y;\n            var dist      = Math.sqrt(length);\n            var real_dist = dist - (ball_1.radius + ball_2.radius);\n\n            if (real_dist < 0) {\n\n                var vel_x1 = ball_1.x - ball_1.px;\n                var vel_y1 = ball_1.y - ball_1.py;\n                var vel_x2 = ball_2.x - ball_2.px;\n                var vel_y2 = ball_2.y - ball_2.py;\n\n                var depth_x = diff_x * (real_dist / dist);\n                var depth_y = diff_y * (real_dist / dist);\n\n                ball_1.x -= depth_x * 0.5;\n                ball_1.y -= depth_y * 0.5;\n\n                ball_2.x += depth_x * 0.5;\n                ball_2.y += depth_y * 0.5;\n\n                if (ip) {\n\n                    var pr1 = DAMPING * (diff_x*vel_x1+diff_y*vel_y1) / length,\n                        pr2 = DAMPING * (diff_x*vel_x2+diff_y*vel_y2) / length;\n\n                    vel_x1 += pr2 * diff_x - pr1 * diff_x;\n                    vel_x2 += pr1 * diff_x - pr2 * diff_x;\n\n                    vel_y1 += pr2 * diff_y - pr1 * diff_y;\n                    vel_y2 += pr1 * diff_y - pr2 * diff_y;\n\n                    ball_1.px = ball_1.x - vel_x1;\n                    ball_1.py = ball_1.y - vel_y1;\n\n                    ball_2.px = ball_2.x - vel_x2;\n                    ball_2.py = ball_2.y - vel_y2;\n                }\n            }\n        }\n    }\n}\n// ---------------------------------\n\nvar Balls = function () {\n    this.balls = [];\n\n    for (var i = 0; i < this.ballNum; i++) {\n        var ball = new Ball();\n        this.balls.push(ball);\n    }\n\n    this.outSide = new OutsideCircle();\n    this.init();\n};\n\nBalls.prototype = {\n    ballNum: 30,\n    init: function () {\n        this.balls[0].x = 0;\n        this.balls[0].y = 0;\n\n        for (var i = 1; i < this.ballNum; i++) {\n            var theta = TWO_PI * Math.random();\n\n            var rr = 5 + 55 * Math.random();\n            var randomRad = (rad - maxRad - rr * 2) * Math.random();\n            var xx = Math.cos(theta) * (maxRad + rr + randomRad);\n            var yy = Math.sin(theta) * (maxRad + rr + randomRad);\n\n            if(rr > rad /5) rr = 1 + Math.random() * rad/5;\n\n            this.balls[i].x = xx;\n            this.balls[i].y = yy;\n            this.balls[i].radius = rr;\n\n        }\n\n        this.balls.forEach(function (element) {\n            element.init();\n        });\n\n\n    },\n    update: function () {\n\n        var iter = 6;\n\n        var delta = SPEED / iter;\n\n        while (iter--) {\n\n            var i = this.balls.length;\n\n            while (i--) {\n\n                this.balls[i].apply_force(delta);\n                this.balls[i].verlet();\n            }\n\n            resolve_collisions(false, this.balls);\n            this.outSide.checkCollision(this.balls);\n\n            var i = this.balls.length;\n            while (i--) this.balls[i].verlet();\n\n            resolve_collisions(true, this.balls);\n            this.outSide.checkCollision(this.balls);\n        }\n\n    },\n\n    draw: function () {\n        this.balls.forEach(function (element) {\n            element.draw();\n        });\n\n        this.outSide.draw();\n\n\n    }\n};\n\nvar Cross = function(){\n    _.bindAll(this, \"secondRotation\");\n};\n\nCross.prototype = {\n    theta : 0,\n    isRotationDraw : false,\n    reset : function(){\n        this.isRotationDraw = false;\n        this.theta = 0;\n    },\n\n    rotation : function(){\n        TweenLite.to(this, 1.5, {theta: Math.PI * 2, onComplete: this.secondRotation});\n\n    },\n\n    secondRotation : function(){\n        this.isRotationDraw = true;\n        this.theta = 0;\n\n        TweenLite.to(this, 1, {theta: Math.PI /2,ease: \"Power2.easeOut\" });\n    },\n    update : function(){\n\n    },\n    draw : function(){\n        if(this.isRotationDraw){\n            for(var i = 0; i < 4; i++){\n                var baseTheta = i * Math.PI/2;\n                ctx.beginPath();\n                ctx.moveTo(0, 0)\n                ctx.lineTo(rad * Math.cos(baseTheta), rad * Math.sin(baseTheta));\n                ctx.arc( 0, 0, rad, baseTheta, baseTheta + this.theta );\n                ctx.lineTo(rad * Math.cos(baseTheta + this.theta), rad * Math.sin(baseTheta + this.theta));\n                ctx.stroke();\n                ctx.fill();\n                ctx.closePath();\n            }\n        }\n\n\n\n    }\n};\n\n// ---------------------------------\nvar App = function () {\n    _.bindAll(this, \"step1\", \"reset\", \"start\");\n    this.centerX = width / 2;\n    this.centerY = height / 2;\n\n    //this.ball = new Ball();\n    this.balls = new Balls();\n    this.scale = INIT_SCALE;\n    this.cross = new Cross();\n\n    setTimeout(this.start, 500);\n    //this.start();\n};\n\nApp.prototype = {\n    col: \"#fff\",\n    isStop : true,\n    reset : function(){\n        this.scale = INIT_SCALE;\n        this.balls.init();\n        this.cross.reset();\n        this.start();\n    },\n\n    start: function () {\n        this.isStop = true;\n        TweenLite.to(this, 1, {scale: 1, ease: \"Power2.easeOut\", onComplete: this.step1});\n    },\n\n    step1: function () {\n        this.isStop = false;\n        this.cross.rotation();\n\n        setTimeout(this.reset, 3000);\n    },\n\n    update: function () {\n        if (!this.isStop) {\n            this.balls.update();\n        }\n\n    },\n    draw: function () {\n        ctx.save();\n        ctx.fillStyle = \"#fff\";\n        ctx.translate(this.centerX, this.centerY);\n        ctx.scale(this.scale, this.scale);\n        this.balls.draw();\n        this.cross.draw();\n        ctx.restore();\n    }\n};\n\n// =================================\nvar rad = Math.min(width, height) / 2;\nvar INIT_SCALE = rad / 10;\nvar maxRad = Math.sqrt(width * width + height * height) / 2 / rad * 10;\n\nvar app;\n\ninit();\nloop();\n\nfunction init() {\n    app = new App();\n}\n\nfunction loop() {\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    app.update();\n    app.draw();\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/5-loop/46-loop.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar halfWidth;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth     = window.innerWidth;\nheight    = window.innerHeight;\nhalfWidth = width/2;\n\ncanvas.width  = width;\ncanvas.height = height;\n\nvar MAX_THETA;\n\nvar colorArr = ['#16a085', '#27ae60', '#2980b9', '#f39c12', '#c0392b', '#2ecc71', '#d35400', '#8e44ad']\n\n// ================\nvar Floor = function(id, col, y, height){\n    _.bindAll(this, 'onRotate2', 'onRotate3', 'onMove', 'onInit', 'init');\n\n    this.id  = id;\n    this.col = col;\n    this.y = y;\n    this.MAX_THETA = Math.atan2(height / 3, width / 2);\n    MAX_THETA = this.MAX_THETA;\n    this.theta = 0;\n\n    this.init();\n};\n\nFloor.prototype = {\n    count : 7,\n    init   : function(){\n\n        this.rotate();\n    },\n\n    rotate : function(){\n        TweenLite.to(this, .5, {theta : this.MAX_THETA, delay: 1, ease: \"Power2.easeOut\", onComplete: this.onRotate2})\n    },\n\n    onRotate2 : function(){\n        TweenLite.to(this, .5, {theta : -this.MAX_THETA, delay: 1, ease: \"Power2.easeOut\", onComplete: this.onRotate3})\n    },\n\n    onRotate3 : function(){\n        TweenLite.to(this, .5, {theta : 0, delay:1, ease: \"Power2.easeOut\", onComplete: this.onMove})\n    },\n\n    onMove : function(){\n        var yPos = this.y - floorHeight;\n        TweenLite.to(this, .5, { y : yPos, delay:.5, ease: \"Power2.easeOut\", onComplete: this.onInit})\n    },\n\n    onInit : function(){\n        if(this.id == this.count) this.y += 8 * floorHeight;\n\n        this.count = (this.count - 1) ;\n        if(this.count < 0) this.count += 8;\n            setTimeout(this.init, 500);\n    },\n\n    update : function(){\n        ctx.save();\n        ctx.beginPath();\n        ctx.fillStyle = this.col;\n        ctx.moveTo(0, this.y2 + this.y - floorHeight);\n        ctx.lineTo(width, this.y1 + this.y - floorHeight);\n        ctx.lineTo(width, this.y1 + this.y);\n        ctx.lineTo(0, this.y2 + this.y);\n        ctx.lineTo(0, this.y1 + this.y - floorHeight);\n        ctx.fill();\n        ctx.closePath();\n        ctx.restore();\n\n    }\n\n};\n\nObject.defineProperty(Floor.prototype, 'theta', {\n    get : function(){\n        return this._theta;\n    },\n\n    set : function(value){\n        this._theta = value;\n\n        this.y1 =  halfWidth * Math.tan(this.theta);\n        this.y2 = -halfWidth * Math.tan(this.theta);\n\n    }\n});\n\n// ----------------\n\nvar Circle = function(id, x, y){\n    _.bindAll(this, \"onUp\", \"onMove1\", \"onUp1\", \"onMove2\", \"onMove3\", \"onInit\");\n\n    this.id = id;\n    this.x = x;\n    this.y = 0;\n    this.r = 15;\n    this.centerY = y - this.r;\n    this.col = colorArr[this.id];\n    this.init();\n};\n\nCircle.prototype = {\n    count : 0,\n    _xx : 0,\n\n    init : function(){\n\n        this.theta = MAX_THETA;\n        TweenLite.to(this,.5, {xx : halfWidth - this.r, delay: 1.3, ease: \"Bounce.easeOut\", onComplete: this.onUp});\n    },\n\n    onUp : function(){\n        TweenLite.to(this,.5, {theta : -MAX_THETA, delay: .7, ease: \"Power2.easeOut\", onComplete: this.onMove1});\n    },\n\n    onMove1 : function(){\n        TweenLite.to(this,.5, {xx : this.r - halfWidth, ease: \"Bounce.easeOut\", onComplete: this.onUp1});\n    },\n\n    onUp1 : function(){\n        TweenLite.to(this,.5, {theta : 0,  delay: .5, ease: \"Power2.easeOut\", onComplete: this.onMove2});\n    },\n\n    onMove2 : function() {\n        TweenLite.to(this, .5, {xx: 0,  ease: \"Power2.easeOut\", onComplete: this.onMove3});\n    },\n\n    onMove3 : function(){\n        var nextY = this.centerY + floorHeight;\n        TweenLite.to(this,1, {centerY : nextY, ease: \"Bounce.easeOut\", onComplete: this.onInit});\n    },\n\n    onInit : function(){\n        if(this.id == this.count) this.centerY -= 8 * floorHeight;\n\n        this.count = (this.count + 1) % 8 ;\n        this.init()\n    },\n\n    update : function(){\n        ctx.beginPath();\n        ctx.fillStyle = this.col;\n        ctx.arc(this.x, this.y + this.centerY, this.r, 0, 2 * Math.PI);\n        ctx.fill();\n        ctx.closePath();\n    }\n};\n\nObject.defineProperty(Circle.prototype, 'xx', {\n    get : function(){\n        return this._xx;\n    },\n    set : function(value){\n        this.x = width/2 + value;\n        this.y = value * Math.tan(this.theta);\n\n        this._xx = value;\n    }\n});\n\n\nObject.defineProperty(Circle.prototype, 'theta', {\n    get : function(){\n        return this._theta;\n    },\n    set : function(value){\n        this.y = (this.x - width/2) * Math.tan(value);\n\n        this._theta = value;\n    }\n});\n\n\n// ================\n\nvar floorHeight;\nvar floorNumber = 8;\nvar floorArr = [];\nvar circleArr = [];\n\ninit();\nloop();\n\nfunction init(){\n    floorHeight = height / 4;\n\n    var col, yPos;\n    for(var i = 0;i  < floorNumber; i++) {\n        if (i % 2 == 0) col = \"#ecf0f1\";\n        else           col = \"#34495e\";\n\n        yPos = floorHeight * (5.5 - i);\n\n        var floor = new Floor(i, col, yPos, floorHeight);\n        floorArr.push(floor);\n\n        var circle = new Circle(i, width/2, yPos);\n        circleArr.push(circle)\n    }\n\n}\n\nfunction loop(){\n    ctx.clearRect(0, 0, width, height)\n\n    // updating and drawing the floor.\n    floorArr.forEach(function(element){element.update();});\n    circleArr.forEach(function(element){element.update();});\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/5-loop/47-loop.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar app;\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ===============\nvar Circle = function(x, id){\n    this.x = x;\n    this.y = height/2 + this.sideRad;\n\n    this.id = id;\n    TweenLite.to(this, 1, { y : - this.sideRad , delay: id/3 +.3, ease:\"Power2.easeIn\"});\n};\n\nCircle.prototype = {\n    type : \"rect1\",\n    sideRad  : 50,\n\n    update : function(){\n        switch (this.type){\n            case \"rect2\":\n                this.drawRect2();\n                break;\n            case \"rect1\":\n                this.drawRect1();\n                break;\n        }\n    },\n\n    drawRect1 : function(){\n        ctx.save();\n        ctx.fillStyle = \"#fff\";\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.sideRad, 0, 2 * Math.PI, false);\n        ctx.fill();\n        ctx.closePath();\n        ctx.restore();\n    },\n\n    drawRect2 : function(){\n        ctx.save();\n        ctx.fillStyle = \"#000\";\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.sideRad, 0, 2 * Math.PI, false);\n        ctx.fill();\n        ctx.closePath();\n        ctx.restore();\n    },\n\n    reset : function(){\n        if(this.type == \"rect1\") {\n            this.y = height/2 - this.sideRad*3;\n            this.type = \"rect2\";\n            TweenLite.to(this, 1, { y :  height + this.sideRad , delay: this.id/3+.5, ease:\"Power2.easeOut\"});\n        }else{\n            this.y = height/2 + this.sideRad;\n            this.type = \"rect1\";\n            TweenLite.to(this, 1, { y :  - this.sideRad , delay: this.id/3+.5, ease:\"Power2.easeOut\"});\n        }\n\n\n    }\n};\n\nvar Shape = function(x, id){\n    //_.bindAll(this, 'tweenOnComplete1');\n    this.x = x;\n    this.y = height + this.sideRad;\n\n    this.id = id;\n    TweenLite.to(this, 1, { y : height/2 - this.sideRad , delay: id/3, ease:\"Power2.easeOut\"});\n\n};\n\nShape.prototype = {\n    type   : \"rect1\",\n    sideRect : 100,\n    sideRad  : 50,\n\n    update : function(){\n\n\n        switch (this.type){\n            case \"rect2\":\n                this.drawRect2();\n                break;\n            case \"rect1\":\n                this.drawRect1();\n                break;\n        }\n    },\n\n    drawRect2 : function() {\n        if(this.y > height / 2 - 3 * this.sideRad){\n\n            var rectHeight = this.y - height/2 + this.sideRad * 3 ;\n\n            var rectWidth, theta;\n            var circleHeight, circleWidth;\n\n\n            ctx.save();\n            ctx.fillStyle = \"#fff\";\n            ctx.beginPath();\n            ctx.arc(this.x, this.y, this.sideRad, 0, 2 * Math.PI, false);\n            ctx.closePath();\n            ctx.fill();\n            ctx.restore();\n\n            ctx.save();\n            ctx.fillStyle = \"#000\";\n            ctx.fillRect(this.x - this.sideRad, this.y + this.sideRad - rectHeight, this.sideRect, rectHeight);\n            ctx.restore();\n\n        }else{\n            ctx.save();\n            ctx.fillStyle = \"#fff\";\n            ctx.beginPath();\n            ctx.arc(this.x, this.y, this.sideRad, 0, 2 * Math.PI, false);\n            ctx.fill();\n            ctx.closePath();\n            ctx.restore();\n        }\n\n    },\n    drawRect1 : function(){\n\n\n        if(this.y < height / 2 + this.sideRad){\n\n            var rectHeight = height/2 + this.sideRad - this.y;\n            var rectWidth, theta;\n            var circleHeight, circleWidth;\n\n\n            ctx.save();\n            ctx.fillStyle = \"#000\";\n            ctx.beginPath();\n            ctx.arc(this.x, this.y, this.sideRad, 0, 2 * Math.PI, false);\n            ctx.closePath();\n            ctx.fill();\n            ctx.restore();\n\n            ctx.save();\n            ctx.fillStyle = \"#fff\";\n            ctx.fillRect(this.x - this.sideRad, this.y - this.sideRad, this.sideRect, rectHeight);\n            ctx.restore();\n\n        }else{\n            ctx.save();\n            ctx.fillStyle = \"#000\";\n            ctx.beginPath();\n            ctx.arc(this.x, this.y, this.sideRad, 0, 2 * Math.PI, false);\n            ctx.fill();\n            ctx.closePath();\n            ctx.restore();\n        }\n\n\n    },\n\n    reset : function(){\n\n        if(this.type == \"rect1\") {\n            this.y = -this.sideRad;\n            this.type = \"rect2\";\n        }else{\n            this.y = height + this.sideRad;\n            this.type = \"rect1\";\n        }\n\n        TweenLite.to(this, 1, { y : height/2 - this.sideRad , delay: this.id/3, ease:\"Power2.easeOut\"});\n    }\n\n\n};\n\nvar Floor = function(){\n    this.y = height/2;\n    this.height = height/2;\n};\n\nFloor.prototype = {\n    count : 0,\n    update : function(){\n        ctx.fillStyle = \"#fff\";\n\n        ctx.save();\n        ctx.fillRect(0, this.y, width, this.height);\n        ctx.restore();\n    },\n\n    reset : function(){\n        this.count++;\n\n        if(this.count % 2 == 0) { this.y = height/2; this.height = height/2;}\n        else                    { this.y = height/2 - 100; this.height = height/2 + 100;}\n    }\n};\n\n// ----------------\n\nvar App = function(){\n    _.bindAll(this, 'interval');\n    this.shapeArrs = [];\n    this.circleArrs = [];\n\n    this.Floor = new Floor();\n    //this.shape1 = new Shape1();\n\n    var shape = new Shape(width/2, 0);\n    this.shapeArrs.push(shape);\n\n    var circle = new Circle(width/2, 0);\n    this.circleArrs.push(circle);\n    for(var i = 0; i < Math.round(width / 2 / 100); i++){\n        var shape01 = new Shape(width/2 - 100 * (i + 1), i+1);\n        var shape02 = new Shape(width/2 + 100 * (i + 1), i+1);\n\n        this.shapeArrs.push(shape01);\n        this.shapeArrs.push(shape02);\n\n        // =================\n\n        var circle01 = new Circle(width/2 - 100 * (i + 1), i+1);\n        var circle02 = new Circle(width/2 + 100 * (i + 1), i+1);\n\n        this.circleArrs.push(circle01);\n        this.circleArrs.push(circle02);\n    }\n\n    this.intervalDuration = (2 +.3 *Math.round(width / 2 / 100))*1000;\n    setTimeout(this.interval,  this.intervalDuration);\n};\n\nApp.prototype = {\n    update : function(){\n        this.Floor.update();\n\n\n        this.circleArrs.forEach(function(element){\n            element.update();\n        });\n\n        this.shapeArrs.forEach(function(element){\n            element.update();\n        });\n    },\n\n    interval : function(){\n\n        this.Floor.reset();\n\n        this.shapeArrs.forEach(function(element){\n            element.reset();\n        });\n\n        this.circleArrs.forEach(function(element){\n            element.reset();\n        });\n\n        setTimeout(this.interval,  this.intervalDuration);\n    }\n};\n\n\n// ================\n\ninit();\nloop();\n\nfunction init(){\n    app = new App();\n\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#000';\n    ctx.fillRect(0, 0, width, height);\n\n    app.update();\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/5-loop/51-loop.js",
    "content": "// --------------------------\n\nvar app;\nvar fK;\nvar width, height, prevTime;\nvar halfWidth, halfHeight;\n\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\nhalfWidth = width / 2;\nhalfHeight = height / 2;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\nfK = 0.25;\nvar widthNum = 31;\n\nvar Point = function(){\n\n};\n\nPoint.prototype = {\n    x : null,\n    y : null,\n    vel: 0,\n    mass : 10,\n\n    setPosY : function(value){\n        this.y = this.baseYPos = value;\n    }\n\n};\n\n\n\nvar SmallCircle = function(){\n\n};\n\nSmallCircle.prototype = {\n\n};\n\nvar MainShape = function(){\n    this.points = [];\n\n    var gapDistance = (width) / (this.pointNumber - 1);\n    var xPos;\n    var i;\n\n    for(i = 0; i < this.pointNumber; i++){\n        xPos = gapDistance * i;\n        var myPt = new Point();\n        myPt.x = xPos;\n        myPt.setPosY(0);\n        //myPt.y = 0;\n        this.points.push( myPt );i\n    }\n\n    this.particleSprings = [];\n\n    for(i = 0; i < this.pointNumber - 1; i++){\n        var spring = {iLengthY: this.points[i + 1].y - this.points[i].y };\n        this.particleSprings.push( spring );\n    }\n\n    //this.points[this.points.length - 1].y = 200;\n\n};\n\n\n/*\n this.mcParticles[i].fXPos\t= this.mcParticles[i]._x;\n this.mcParticles[i].fYAccel\t= 0;\n this.mcParticles[i].fYVel\t= 0;\n this.mcParticles[i].fYPos\t= this.mcParticles[i]._y;\n this.mcParticles[i].fBaseYPos\t= this.mcParticles[i]._y;\n this.mcParticles[i].iMass = 10;\n */\n\nMainShape.prototype = {\n\n    pointNumber : widthNum,\n    particleSprings : [],\n\n    x : 0,\n    y : 0,\n\n    col : \"#fff\",\n\n    update : function(){\n        // calculation\n        var i;\n        for( i = 0; i < this.points.length; i++){\n            var fExtensionY = 0;\n            var fForceY     = 0;\n\n\n            if(i > 0){\n                fExtensionY = this.points[i - 1].y - this.points[i].y - this.particleSprings[i-1].iLengthY;\n                fForceY += - fK * fExtensionY;\n            }\n\n\n\n            if( i < this.points.length - 1){\n                fExtensionY = this.points[i].y - this.points[i+1].y - this.particleSprings[i].iLengthY;\n                fForceY += fK * fExtensionY;\n            }\n\n            fExtensionY = this.points[i].y - this.points[i].baseYPos;\n            fForceY     += fK/20 * fExtensionY;\n\n            this.points[i].acl = - fForceY;\n            this.points[i].vel += this.points[i].acl;\n            this.points[i].y   += this.points[i].vel;\n            this.points[i].y   += 0.2 * (this.points[i].baseYPos - this.points[i].y);\n\n            this.points[i].vel /= 1.2;\n        }\n\n        // ================\n\n        ctx.save();\n        ctx.translate(this.x, this.y);\n\n        ctx.beginPath();\n        ctx.lineWidth = 2;\n\n        /**\n        for( i = 0; i < this.pointNumber; i++){\n            if(i == 0) ctx.moveTo(this.points[i].x, this.points[i].y);\n            else       ctx.lineTo(this.points[i].x, this.points[i].y);\n        }**/\n\n        for(i = 0; i < this.pointNumber- 1; i++ ){\n            var xPos = (this.points[i].x + this.points[i + 1].x)/2;\n            var yPos = (this.points[i].y + this.points[i + 1].y)/2;\n\n            if(i == 0) ctx.moveTo(xPos, yPos);\n            else       ctx.quadraticCurveTo( this.points[i].x, this.points[i].y, xPos, yPos);\n\n        }\n\n\n        //ctx.closePath();\n        ctx.strokeStyle = this.col;\n        ctx.stroke();\n\n        ctx.restore();\n    },\n\n    setCircle : function(xPos, yPos){\n        for(var i = 0; i < this.points.length; i++){\n            var dx = xPos - this.x - this.points[i].x;\n            var dy = yPos - this.y - this.points[i].y;\n\n            var dis = Math.sqrt(dx * dx + dy * dy);\n\n            if(dis < 60){\n                this.points[i].y += 40;\n            }\n        }\n\n    },\n\n    addImpulse : function(){\n\n        //this.points[parseInt(this.points.length/2)].vel = .1;\n    }\n};\n\nvar App = function(){\n    var kankakuHeight = 50;\n    var kankakuHeightNum = parseInt(height/kankakuHeight) ;\n\n    // createCircle\n    // width: widthNum \\\\ height: kankakuHeightNum\n\n\n    for(var i = 0; i < kankakuHeightNum; i++){\n        var mainShape = new MainShape();\n        mainShape.y = kankakuHeight * (i + 1);\n        this.mainShapeArr.push(mainShape);\n\n    }\n\n\n\n};\n\nApp.prototype = {\n    mainShapeArr : [],\n    bgCol : \"#333\",\n    update : function(){\n        ctx.fillStyle = this.bgCol;\n        ctx.fillRect(0, 0, width, height);\n\n        this.mainShapeArr.forEach(function(element){\n            element.update();\n        });\n    },\n\n    xPos : 60,\n    yPos : 60,\n    kigo : +1,\n\n    num : 12,\n    rad : 60,\n\n    addImpulse : function(){\n        this.yPos += this.kigo * 50; //= (this.yPos + 50) % height;\n        if(this.yPos > height - this.rad ) {\n            this.yPos = height - this.rad;\n            this.kigo  = -1;\n        }\n        if(this.yPos < this.rad) {\n            this.yPos = this.rad;\n            this.kigo = 1;\n        }\n\n        this.xPos += this.kigo * 50;\n        if(this.xPos > width - this.rad ) {\n            this.xPos = width - this.rad;\n            this.kigo  = -1;\n        }\n        if(this.xPos < this.rad) {\n            this.xPos = this.rad;\n            this.kigo = 1;\n        }\n\n\n\n        for(var i = 0; i < this.num; i++){\n            var xPos = this.rad * Math.cos(2 * Math.PI * i / this.num) + width/2;\n            var yPos = this.rad * Math.sin(2 * Math.PI * i / this.num) + this.yPos;\n\n            // xPos, yPos\n            for(var jj = 0; jj < this.mainShapeArr.length; jj++){\n                this.mainShapeArr[jj].setCircle(xPos, yPos);\n            }\n\n            //\n            var xPos = this.rad * Math.cos(2 * Math.PI * i / this.num) + this.xPos;\n            var yPos = this.rad * Math.sin(2 * Math.PI * i / this.num) + height/2;\n\n            // xPos, yPos\n            for(var jj = 0; jj < this.mainShapeArr.length; jj++){\n                this.mainShapeArr[jj].setCircle(xPos, yPos);\n            }\n        }\n    }\n};\n\n// ================\n\ninit();\nloop();\n\n\nfunction init(){\n    app = new App();\n\n    timer();\n}\n\nfunction timer(){\n    app.addImpulse();\n    setTimeout(timer, 100);\n}\n\nfunction loop(){\n    app.update();\n\n    requestAnimationFrame(loop);\n    //setTimeout(loop, 1000);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/6-letters/52-letters.js",
    "content": "// k\nvar kArr = [ [0.39049999999999996, 0.05], [0.39049999999999996, 0.39549999999999996], [0.39299999999999996, 0.39549999999999996], [0.5670000000000001, 0.05], [0.8165, 0.05], [0.5895, 0.4435], [0.8440000000000001, 0.95], [0.5770000000000001, 0.95], [0.4395, 0.636], [0.39050000000000007, 0.7115], [0.39050000000000007, 0.95], [0.156, 0.95], [0.156, 0.05], [0.39049999999999996, 0.05] ]\n// e\nvar eArr = [ [0.7609999999999999, 0.05], [0.7609999999999999, 0.2415], [0.462, 0.2415], [0.462, 0.39549999999999996], [0.742, 0.39549999999999996], [0.742, 0.5794999999999999], [0.462, 0.5794999999999999], [0.462, 0.7585], [0.772, 0.7585], [0.772, 0.95], [0.2275, 0.95], [0.2275, 0.05], [0.7609999999999999, 0.05] ];\n// n\nvar nArr = [ [0.4445, 0.05], [0.596, 0.6045], [0.5985, 0.6045], [0.5985, 0.05], [0.818, 0.05], [0.818, 0.95], [0.5609999999999999, 0.95], [0.40399999999999997, 0.39399999999999996], [0.40149999999999997, 0.39399999999999996], [0.40149999999999997, 0.95], [0.1825, 0.95], [0.1825, 0.05], [0.4445, 0.05] ] ;\n// j\n//var jArr = [ [0.7795000000000001, 0.6595], [0.7065, 0.885, 0.7795000000000001, 0.7665000000000001, 0.755, 0.8415], [0.49050000000000005, 0.95, 0.6575, 0.9285, 0.5855, 0.95], [0.28300000000000003, 0.878, 0.39350000000000007, 0.95, 0.3245, 0.9259999999999999], [0.22100000000000006, 0.6669999999999999, 0.24150000000000005, 0.83, 0.22100000000000006, 0.7595000000000001], [0.22100000000000006, 0.6485], [0.42950000000000005, 0.6485], [0.42950000000000005, 0.6919999999999998], [0.44650000000000006, 0.7765, 0.42950000000000005, 0.7339999999999999, 0.435, 0.7624999999999998], [0.48950000000000005, 0.7974999999999999, 0.4575000000000001, 0.7905, 0.47200000000000003, 0.7974999999999999], [0.5325, 0.7765, 0.507, 0.7974999999999999, 0.521, 0.7904999999999999], [0.5495, 0.6919999999999998, 0.5435, 0.7624999999999998, 0.5495, 0.7344999999999999], [0.5495, 0.05], [0.7805000000000001, 0.05], [0.7805000000000001, 0.6595] ];\nvar jArr = [ [0.7795000000000001, 0.6595], [0.7795000000000001, 0.7665000000000001, 0.755, 0.8415,0.7065, 0.885], [0.6575, 0.9285, 0.5855, 0.95,0.49050000000000005, 0.95], [0.39350000000000007, 0.95, 0.3245, 0.9259999999999999,0.28300000000000003, 0.878], [0.24150000000000005, 0.83, 0.22100000000000006, 0.7595000000000001,0.22100000000000006, 0.6669999999999999], [0.22100000000000006, 0.6485], [0.42950000000000005, 0.6485], [0.42950000000000005, 0.6919999999999998], [0.42950000000000005, 0.7339999999999999, 0.435, 0.7624999999999998,0.44650000000000006, 0.7765], [0.4575000000000001, 0.7905, 0.47200000000000003, 0.7974999999999999,0.48950000000000005, 0.7974999999999999], [0.507, 0.7974999999999999, 0.521, 0.7904999999999999,0.5325, 0.7765], [0.5435, 0.7624999999999998, 0.5495, 0.7344999999999999,0.5495, 0.6919999999999998], [0.5495, 0.05], [0.7805000000000001, 0.05], [0.7805000000000001, 0.6595] ];\n// i\nvar iArr = [ [0.617, 0.05], [0.617, 0.95], [0.38299999999999995, 0.95], [0.38299999999999995, 0.05], [0.617, 0.05] ] ;\n\n\nvar kenjiArr = [kArr, eArr, nArr, jArr, iArr];\n\nvar size = 400;\nif(size > window.innerHeight) size = window.innerHeight * .8;\nvar textNumber = 360;\nvar kenjiPtArrs = [];\n\nfor(var ii = 0; ii < kenjiArr.length; ii++){\n    kenjiPtArrs[ii] = [];\n\n    var kankakuDuration = parseInt(textNumber / kenjiArr[ii].length) + 1;\n    var curNumber = textNumber;\n\n    for(var jj = 0; jj < kenjiArr[ii].length; jj++){\n        for(var kk = 0; kk < kankakuDuration; kk++){\n            var ptX, ptY;\n\n            var rate = kk / kankakuDuration;\n            var curNum = jj;\n            var nextNum = (jj + 1) % kenjiArr[ii].length;\n\n            if(kenjiArr[ii][nextNum].length == 6){\n                //ptX = kenjiArr[ii][curNum][0] * size * (1 - rate) +  kenjiArr[ii][nextNum][0] * size * rate;\n                //ptY = kenjiArr[ii][curNum][1] * size * (1 - rate) +  kenjiArr[ii][nextNum][1] * size * rate;\n                var x1, y1, x2, y2, x3, y3, x4, y4;\n                if(kenjiArr[ii][curNum].length == 2){\n                    x1 = kenjiArr[ii][curNum][0] * size;\n                    y1 = kenjiArr[ii][curNum][1] * size;\n                }else if(kenjiArr[ii][curNum].length == 6){\n                    x1 = kenjiArr[ii][curNum][4] * size;\n                    y1 = kenjiArr[ii][curNum][5] * size;\n                }\n\n                x2 =  kenjiArr[ii][nextNum][0] * size;\n                y2 =  kenjiArr[ii][nextNum][1] * size;\n                x3 =  kenjiArr[ii][nextNum][2] * size;\n                y3 =  kenjiArr[ii][nextNum][3] * size;\n                x4 =  kenjiArr[ii][nextNum][4] * size;\n                y4 =  kenjiArr[ii][nextNum][5] * size;\n\n\n                ptX = x1 * (1 - rate) * (1 - rate) * (1 - rate) + x2 * 3 * (1-rate) * (1-rate) * rate + x3 * 3 * (1 -rate) * rate * rate + rate * rate * rate * x4;\n                ptY = y1 * (1 - rate) * (1 - rate) * (1 - rate) + y2 * 3 * (1-rate) * (1-rate) * rate + y3 * 3 * (1 -rate) * rate * rate + rate * rate * rate * y4;\n\n            }else{\n                if(kenjiArr[ii][curNum].length == 2){\n                    ptX = kenjiArr[ii][curNum][0] * size * (1 - rate) +  kenjiArr[ii][nextNum][0] * size * rate;\n                    ptY = kenjiArr[ii][curNum][1] * size * (1 - rate) +  kenjiArr[ii][nextNum][1] * size * rate;\n                }else if(kenjiArr[ii][curNum].length == 6){\n                    ptX = kenjiArr[ii][curNum][4] * size * (1 - rate) +  kenjiArr[ii][nextNum][0] * size * rate;\n                    ptY = kenjiArr[ii][curNum][5] * size * (1 - rate) +  kenjiArr[ii][nextNum][1] * size * rate;\n                }\n            }\n\n            var pos = {x: ptX - size/2, y: ptY - size/2};\n            kenjiPtArrs[ii].push(pos);\n        }\n        curNumber -= kankakuDuration;\n        if(kankakuDuration > curNumber) kankakuDuration = curNumber;\n    }\n}\n\n\n\n\n\n// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar rot = 0;\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n\n// ================\n\n// ================\n\n\nvar count = 0;\nvar curPtArr = [];\nvar rate;\n\ninit();\nloop();\n\n\nfunction init(){\n\n    prevTime = +new Date;\n\n    for(var i = 0; i < kenjiPtArrs[count].length; i++){\n        var pt = { x: kenjiPtArrs[count][i].x, y : kenjiPtArrs[count][i].y };\n        curPtArr.push(pt);\n    }\n\n    setTimeout(timer, 500);\n}\n\nfunction loop(){\n    rot += .1;\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.globalCompositeOperation=\"source-over\";\n    ctx.fillStyle = 'rgba(30, 30, 30, .3)';\n    ctx.fillRect(0, 0, width, height);\n\n    for(var n = 0; n < 3; n++){\n\n        ctx.save();\n        ctx.globalCompositeOperation=\"lighter\";\n        ctx.beginPath();\n\n        //ctx.rotate(rot);\n        ctx.translate(width/2, height/2)\n\n\n\n        if(n == 0) ctx.fillStyle = \"rgba(200, 0, 0,1)\";\n        if(n == 1) ctx.fillStyle = \"rgba(200, 200, 0, 1)\";\n        if(n == 2) ctx.fillStyle = \"rgba(0, 0, 200, 1)\";\n\n        for(var i = 0; i < curPtArr.length; i++){\n            if(i == 0) ctx.moveTo( curPtArr[i].x + Math.random() * 10, curPtArr[i].y+ Math.random() * 10);\n            else       ctx.lineTo( curPtArr[i].x + Math.random() * 10, curPtArr[i].y + Math.random() * 10);\n\n        }\n\n        ctx.closePath();\n        ctx.fill();\n        ctx.restore();\n\n    }\n\n\n\n    requestAnimationFrame(loop);\n}\n\nfunction timer(){\n    rate = 0;\n    TweenLite.to(this,.75, {rate: 1, onUpdate: onUpdateTweenHandler, onComplete: onCompleteTwennHandler, ease:Elastic.easeInOut});\n\n    setTimeout(timer, 1000);\n}\n\nfunction onUpdateTweenHandler(){\n    var nextCount = (count + 1) % kenjiPtArrs.length;\n    for(var i = 0; i < 360; i++){\n\n        var xPos = kenjiPtArrs[count][i].x * (1-rate) + kenjiPtArrs[nextCount][i].x * rate;\n        var yPos = kenjiPtArrs[count][i].y * (1-rate) + kenjiPtArrs[nextCount][i].y * rate;\n        curPtArr[i] = {x: xPos, y: yPos};\n    }\n\n}\n\nfunction onCompleteTwennHandler(){\n    count = (count + 1) % kenjiPtArrs.length;\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/6-letters/53-letters.js",
    "content": "// k\nvar kArr = [ [0.39049999999999996, 0.05], [0.39049999999999996, 0.39549999999999996], [0.39299999999999996, 0.39549999999999996], [0.5670000000000001, 0.05], [0.8165, 0.05], [0.5895, 0.4435], [0.8440000000000001, 0.95], [0.5770000000000001, 0.95], [0.4395, 0.636], [0.39050000000000007, 0.7115], [0.39050000000000007, 0.95], [0.156, 0.95], [0.156, 0.05], [0.39049999999999996, 0.05] ]\n// e\nvar eArr = [ [0.7609999999999999, 0.05], [0.7609999999999999, 0.2415], [0.462, 0.2415], [0.462, 0.39549999999999996], [0.742, 0.39549999999999996], [0.742, 0.5794999999999999], [0.462, 0.5794999999999999], [0.462, 0.7585], [0.772, 0.7585], [0.772, 0.95], [0.2275, 0.95], [0.2275, 0.05], [0.7609999999999999, 0.05] ];\n// n\nvar nArr = [ [0.4445, 0.05], [0.596, 0.6045], [0.5985, 0.6045], [0.5985, 0.05], [0.818, 0.05], [0.818, 0.95], [0.5609999999999999, 0.95], [0.40399999999999997, 0.39399999999999996], [0.40149999999999997, 0.39399999999999996], [0.40149999999999997, 0.95], [0.1825, 0.95], [0.1825, 0.05], [0.4445, 0.05] ] ;\n// j\n//var jArr = [ [0.7795000000000001, 0.6595], [0.7065, 0.885, 0.7795000000000001, 0.7665000000000001, 0.755, 0.8415], [0.49050000000000005, 0.95, 0.6575, 0.9285, 0.5855, 0.95], [0.28300000000000003, 0.878, 0.39350000000000007, 0.95, 0.3245, 0.9259999999999999], [0.22100000000000006, 0.6669999999999999, 0.24150000000000005, 0.83, 0.22100000000000006, 0.7595000000000001], [0.22100000000000006, 0.6485], [0.42950000000000005, 0.6485], [0.42950000000000005, 0.6919999999999998], [0.44650000000000006, 0.7765, 0.42950000000000005, 0.7339999999999999, 0.435, 0.7624999999999998], [0.48950000000000005, 0.7974999999999999, 0.4575000000000001, 0.7905, 0.47200000000000003, 0.7974999999999999], [0.5325, 0.7765, 0.507, 0.7974999999999999, 0.521, 0.7904999999999999], [0.5495, 0.6919999999999998, 0.5435, 0.7624999999999998, 0.5495, 0.7344999999999999], [0.5495, 0.05], [0.7805000000000001, 0.05], [0.7805000000000001, 0.6595] ];\nvar jArr = [ [0.7795000000000001, 0.6595], [0.7795000000000001, 0.7665000000000001, 0.755, 0.8415,0.7065, 0.885], [0.6575, 0.9285, 0.5855, 0.95,0.49050000000000005, 0.95], [0.39350000000000007, 0.95, 0.3245, 0.9259999999999999,0.28300000000000003, 0.878], [0.24150000000000005, 0.83, 0.22100000000000006, 0.7595000000000001,0.22100000000000006, 0.6669999999999999], [0.22100000000000006, 0.6485], [0.42950000000000005, 0.6485], [0.42950000000000005, 0.6919999999999998], [0.42950000000000005, 0.7339999999999999, 0.435, 0.7624999999999998,0.44650000000000006, 0.7765], [0.4575000000000001, 0.7905, 0.47200000000000003, 0.7974999999999999,0.48950000000000005, 0.7974999999999999], [0.507, 0.7974999999999999, 0.521, 0.7904999999999999,0.5325, 0.7765], [0.5435, 0.7624999999999998, 0.5495, 0.7344999999999999,0.5495, 0.6919999999999998], [0.5495, 0.05], [0.7805000000000001, 0.05], [0.7805000000000001, 0.6595] ];\n// i\nvar iArr = [ [0.617, 0.05], [0.617, 0.95], [0.38299999999999995, 0.95], [0.38299999999999995, 0.05], [0.617, 0.05] ] ;\n\n\nvar kenjiArr = [kArr, eArr, nArr, jArr, iArr];\n\nvar size = 400;\nif(size > window.innerHeight) size = window.innerHeight * .8;\nvar textNumber = 360;\nvar kenjiPtArrs = [];\n\nfor(var ii = 0; ii < kenjiArr.length; ii++){\n    kenjiPtArrs[ii] = [];\n\n    var kankakuDuration = parseInt(textNumber / kenjiArr[ii].length) + 1;\n    var curNumber = textNumber;\n\n    for(var jj = 0; jj < kenjiArr[ii].length; jj++){\n        for(var kk = 0; kk < kankakuDuration; kk++){\n            var ptX, ptY;\n\n            var rate = kk / kankakuDuration;\n            var curNum = jj;\n            var nextNum = (jj + 1) % kenjiArr[ii].length;\n\n            if(kenjiArr[ii][nextNum].length == 6){\n                //ptX = kenjiArr[ii][curNum][0] * size * (1 - rate) +  kenjiArr[ii][nextNum][0] * size * rate;\n                //ptY = kenjiArr[ii][curNum][1] * size * (1 - rate) +  kenjiArr[ii][nextNum][1] * size * rate;\n                var x1, y1, x2, y2, x3, y3, x4, y4;\n                if(kenjiArr[ii][curNum].length == 2){\n                    x1 = kenjiArr[ii][curNum][0] * size;\n                    y1 = kenjiArr[ii][curNum][1] * size;\n                }else if(kenjiArr[ii][curNum].length == 6){\n                    x1 = kenjiArr[ii][curNum][4] * size;\n                    y1 = kenjiArr[ii][curNum][5] * size;\n                }\n\n                x2 =  kenjiArr[ii][nextNum][0] * size;\n                y2 =  kenjiArr[ii][nextNum][1] * size;\n                x3 =  kenjiArr[ii][nextNum][2] * size;\n                y3 =  kenjiArr[ii][nextNum][3] * size;\n                x4 =  kenjiArr[ii][nextNum][4] * size;\n                y4 =  kenjiArr[ii][nextNum][5] * size;\n\n\n                ptX = x1 * (1 - rate) * (1 - rate) * (1 - rate) + x2 * 3 * (1-rate) * (1-rate) * rate + x3 * 3 * (1 -rate) * rate * rate + rate * rate * rate * x4;\n                ptY = y1 * (1 - rate) * (1 - rate) * (1 - rate) + y2 * 3 * (1-rate) * (1-rate) * rate + y3 * 3 * (1 -rate) * rate * rate + rate * rate * rate * y4;\n\n            }else{\n                if(kenjiArr[ii][curNum].length == 2){\n                    ptX = kenjiArr[ii][curNum][0] * size * (1 - rate) +  kenjiArr[ii][nextNum][0] * size * rate;\n                    ptY = kenjiArr[ii][curNum][1] * size * (1 - rate) +  kenjiArr[ii][nextNum][1] * size * rate;\n                }else if(kenjiArr[ii][curNum].length == 6){\n                    ptX = kenjiArr[ii][curNum][4] * size * (1 - rate) +  kenjiArr[ii][nextNum][0] * size * rate;\n                    ptY = kenjiArr[ii][curNum][5] * size * (1 - rate) +  kenjiArr[ii][nextNum][1] * size * rate;\n                }\n            }\n\n            var pos = {x: ptX - size/2, y: ptY - size/2};\n            kenjiPtArrs[ii].push(pos);\n        }\n        curNumber -= kankakuDuration;\n        if(kankakuDuration > curNumber) kankakuDuration = curNumber;\n    }\n}\n\n\n\n\n\n// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar rot = 0;\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n\n// ================\n\nvar Line = function(){\n    this.x0 = 0;\n    this.x1 = width;\n\n    this.velY = 2;\n\n    this.y = 0;\n};\n\nLine.prototype = {\n    update : function(){\n        this.y += this.velY;\n\n        if(this.y > height){\n            this.y = height;\n            this.velY = -2;\n        }\n\n        if(this.y < 0){\n            this.y = 0;\n            this.velY = 2;\n        }\n    },\n\n    draw : function(){\n        ctx.save();\n        ctx.strokeStyle = \"#ffffff\";\n        ctx.moveTo(this.x0, this.y);\n        ctx.lineTo(this.x1, this.y);\n        ctx.stroke();\n        ctx.restore();\n    }\n\n\n};\n\n// ================\n\n\nvar count = 0;\nvar curPtArr = [];\nvar rate;\nvar line;\n\ninit();\nloop();\n\n\nfunction init(){\n    line = new Line();\n\n    prevTime = +new Date;\n\n    for(var i = 0; i < kenjiPtArrs[count].length; i++){\n        var pt = { x: kenjiPtArrs[count][i].x, y : kenjiPtArrs[count][i].y };\n        curPtArr.push(pt);\n    }\n\n    //setTimeout(timer, 500);\n}\n\nfunction loop(){\n    line.update();\n\n    rot += .1;\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.globalCompositeOperation=\"source-over\";\n    ctx.fillStyle = 'rgba(30, 30, 30, .3)';\n    ctx.fillRect(0, 0, width, height);\n\n    for(var n = 0; n < 3; n++){\n        ctx.save();\n        ctx.globalCompositeOperation=\"lighter\";\n        ctx.beginPath();\n\n        //ctx.rotate(rot);\n        ctx.translate(width/2, height/2)\n\n        if(n == 0) ctx.fillStyle = \"rgba(200, 0, 0,1)\";\n        if(n == 1) ctx.fillStyle = \"rgba(200, 200, 0, 1)\";\n        if(n == 2) ctx.fillStyle = \"rgba(0, 0, 200, 1)\";\n\n        var biv;\n        for(var i = 0; i < curPtArr.length; i++){\n\n            if(line.y - height/2 > curPtArr[i].y) biv = 0;\n            else                       biv = 10;\n            if(i == 0) ctx.moveTo( curPtArr[i].x + Math.random() * biv, curPtArr[i].y+ Math.random() * biv);\n            else       ctx.lineTo( curPtArr[i].x + Math.random() * biv, curPtArr[i].y + Math.random() * biv);\n\n        }\n\n        ctx.closePath();\n        ctx.fill();\n        ctx.restore();\n    }\n\n    line.draw();\n\n    requestAnimationFrame(loop);\n}\n\nfunction timer(){\n    rate = 0;\n    TweenLite.to(this,.75, {rate: 1, onUpdate: onUpdateTweenHandler, onComplete: onCompleteTwennHandler, ease:Elastic.easeInOut});\n\n    setTimeout(timer, 1000);\n}\n\nfunction onUpdateTweenHandler(){\n    var nextCount = (count + 1) % kenjiPtArrs.length;\n    for(var i = 0; i < 360; i++){\n\n        var xPos = kenjiPtArrs[count][i].x * (1-rate) + kenjiPtArrs[nextCount][i].x * rate;\n        var yPos = kenjiPtArrs[count][i].y * (1-rate) + kenjiPtArrs[nextCount][i].y * rate;\n        curPtArr[i] = {x: xPos, y: yPos};\n    }\n\n}\n\nfunction onCompleteTwennHandler(){\n    count = (count + 1) % kenjiPtArrs.length;\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/6-letters/54-letter.js",
    "content": "var l1Pt0 = [\n    [0.6905, 0.534],\n    [0.648, 0.534],\n    [0.638, 0.565],\n    [0.6154999999999999, 0.565],\n    [0.6579999999999999, 0.4445],\n    [0.6809999999999999, 0.4445],\n    [0.7234999999999999, 0.565],\n    [0.701, 0.565],\n    [0.6905, 0.534]\n];\nvar l1Pt1 = [\n    [0.6695, 0.46549999999999997],\n    [0.6695, 0.46549999999999997, 0.667, 0.4775, 0.6645, 0.484],\n    [0.654, 0.5165],\n    [0.6855000000000001, 0.5165],\n    [0.6750000000000002, 0.484],\n    [0.6725, 0.4775, 0.6695, 0.46549999999999997, 0.6695, 0.46549999999999997],\n    [0.6695, 0.46549999999999997]\n];\nvar l2Pt0 = [\n    [0.7559999999999999, 0.4445],\n    [0.795, 0.4445],\n    [0.8079999999999999, 0.4445, 0.8140000000000001, 0.44550000000000006, 0.8195, 0.44800000000000006],\n    [0.8315, 0.4535, 0.8390000000000001, 0.4650000000000001, 0.8390000000000001, 0.48100000000000004],\n    [0.8390000000000001, 0.49550000000000005, 0.8315, 0.509, 0.8185000000000001, 0.514],\n    [0.8185000000000001, 0.5145],\n    [0.8185000000000001, 0.5145, 0.8200000000000002, 0.5159999999999999, 0.8225000000000001, 0.5205],\n    [0.8475000000000001, 0.5655],\n    [0.8230000000000001, 0.5655],\n    [0.799, 0.5205],\n    [0.7780000000000001, 0.5205],\n    [0.7780000000000001, 0.5655],\n    [0.7560000000000001, 0.5655],\n    [0.7559999999999999, 0.4445],\n    [0.7559999999999999, 0.4445]\n];\nvar l2Pt1 = [\n    [0.7975, 0.501],\n    [0.809, 0.501, 0.8165, 0.494, 0.8165, 0.48200000000000004],\n    [0.8165, 0.47050000000000003, 0.8115000000000001, 0.4635, 0.7945, 0.4635],\n    [0.778, 0.4635],\n    [0.778, 0.501],\n    [0.7975, 0.501],\n    [0.7975, 0.501]\n];\nvar l3Pt0 = [\n    [0.885, 0.4445],\n    [0.9259999999999999, 0.4445],\n    [0.963, 0.4445, 0.9875, 0.4665000000000001, 0.9875, 0.5045000000000001],\n    [0.9875, 0.5425, 0.963, 0.565, 0.9259999999999999, 0.565],\n    [0.885, 0.565],\n    [0.885, 0.4445]\n];\nvar l3Pt1 = [\n    [0.9245, 0.5465],\n    [0.9490000000000001, 0.5465, 0.9645, 0.5319999999999999, 0.9645, 0.505],\n    [0.9645, 0.478, 0.9485000000000001, 0.4635, 0.9245, 0.4635],\n    [0.9065000000000001, 0.4635],\n    [0.9065000000000001, 0.5465000000000001],\n    [0.9245, 0.5465000000000001]\n];\nvar l4 = [\n    [1.0265, 0.534],\n    [1.0265, 0.534, 1.0395, 0.5469999999999999, 1.0565, 0.5469999999999999],\n    [1.0655000000000001, 0.5469999999999999, 1.074, 0.5425, 1.074, 0.5325],\n    [1.074, 0.5109999999999999, 1.0170000000000001, 0.5145, 1.0170000000000001, 0.4774999999999999],\n    [1.0170000000000001, 0.4574999999999999, 1.0345, 0.44249999999999995, 1.0575, 0.44249999999999995],\n    [1.0815000000000001, 0.44249999999999995, 1.0935, 0.4554999999999999, 1.0935, 0.4554999999999999],\n    [1.0839999999999999, 0.47349999999999987],\n    [1.0839999999999999, 0.47349999999999987, 1.0724999999999998, 0.4629999999999999, 1.0574999999999999, 0.4629999999999999],\n    [1.0474999999999999, 0.4629999999999999, 1.0394999999999999, 0.4689999999999999, 1.0394999999999999, 0.4774999999999999],\n    [1.0394999999999999, 0.4989999999999999, 1.0964999999999998, 0.49349999999999994, 1.0964999999999998, 0.5325],\n    [1.0964999999999998, 0.5514999999999999, 1.0819999999999999, 0.568, 1.0565, 0.568],\n    [1.0294999999999999, 0.568, 1.015, 0.5514999999999999, 1.015, 0.5514999999999999],\n    [1.0265, 0.534]\n];\nvar l5 = [\n    [0.4435, 0.4445],\n    [0.4235, 0.528],\n    [0.42200000000000004, 0.535, 0.4215, 0.5405000000000001, 0.4215, 0.5405000000000001],\n    [0.42100000000000004, 0.5405000000000001],\n    [0.42100000000000004, 0.5405000000000001, 0.42050000000000004, 0.5345, 0.419, 0.528],\n    [0.3975, 0.4445],\n    [0.3785, 0.4445],\n    [0.3565, 0.528],\n    [0.3545, 0.535, 0.3545, 0.5405000000000001, 0.3545, 0.5405000000000001],\n    [0.354, 0.5405000000000001],\n    [0.354, 0.5405000000000001, 0.35350000000000004, 0.5345, 0.352, 0.528],\n    [0.33799999999999997, 0.4655],\n    [0.3275, 0.511],\n    [0.341, 0.565],\n    [0.3665, 0.565],\n    [0.385, 0.4935],\n    [0.387, 0.48550000000000004, 0.38799999999999996, 0.4775, 0.38799999999999996, 0.4775],\n    [0.38849999999999996, 0.4775],\n    [0.38849999999999996, 0.4775, 0.38949999999999996, 0.4855, 0.3914999999999999, 0.4935],\n    [0.4099999999999999, 0.565],\n    [0.435, 0.565],\n    [0.466, 0.4445],\n    [0.4435, 0.4445],\n    [0.4435, 0.4445]\n];\nvar l6 = [\n    [0.5795, 0.4445],\n    [0.5595, 0.528],\n    [0.558, 0.535, 0.5575, 0.5405000000000001, 0.5575, 0.5405000000000001],\n    [0.557, 0.5405000000000001],\n    [0.557, 0.5405000000000001, 0.5565000000000001, 0.5345, 0.555, 0.528],\n    [0.5335, 0.4445],\n    [0.5145000000000001, 0.4445],\n    [0.4925, 0.528],\n    [0.4905, 0.535, 0.4905, 0.5405000000000001, 0.4905, 0.5405000000000001],\n    [0.49, 0.5405000000000001],\n    [0.49, 0.5405000000000001, 0.48950000000000005, 0.5345, 0.488, 0.528],\n    [0.474, 0.465],\n    [0.4635, 0.5105],\n    [0.47700000000000004, 0.565],\n    [0.5025, 0.565],\n    [0.521, 0.4935],\n    [0.523, 0.48550000000000004, 0.524, 0.4775, 0.524, 0.4775],\n    [0.5245, 0.4775],\n    [0.5245, 0.4775, 0.5255, 0.4855, 0.5275, 0.4935],\n    [0.5459999999999999, 0.565],\n    [0.5714999999999999, 0.565],\n    [0.6024999999999999, 0.4445],\n    [0.5795, 0.4445],\n    [0.5795, 0.4445]\n];\nvar l7 = [\n    [0.13, 0.534],\n    [0.0875, 0.534],\n    [0.0775, 0.565],\n    [0.055, 0.565],\n    [0.0975, 0.4445],\n    [0.12050000000000001, 0.4445],\n    [0.163, 0.565],\n    [0.1405, 0.565],\n    [0.13, 0.534],\n    [0.109, 0.46549999999999997],\n    [0.109, 0.46549999999999997, 0.1065, 0.4775, 0.10400000000000001, 0.484],\n    [0.0935, 0.5165],\n    [0.125, 0.5165],\n    [0.11449999999999999, 0.484],\n    [0.11199999999999999, 0.4775, 0.109, 0.46549999999999997, 0.109, 0.46549999999999997],\n    [0.109, 0.46549999999999997]\n];\nvar l8 = [\n    [0.2825, 0.528],\n    [0.2845, 0.535, 0.2845, 0.5405, 0.2845, 0.5405],\n    [0.285, 0.5405],\n    [0.285, 0.5405, 0.28550000000000003, 0.5345, 0.287, 0.528],\n    [0.307, 0.44449999999999995],\n    [0.3295, 0.44449999999999995],\n    [0.2985, 0.565],\n    [0.273, 0.565],\n    [0.2545, 0.4935],\n    [0.2525, 0.48550000000000004, 0.2515, 0.4775, 0.2515, 0.4775],\n    [0.251, 0.4775],\n    [0.251, 0.4775, 0.24999999999999997, 0.4855, 0.24799999999999997, 0.4935],\n    [0.22949999999999998, 0.565],\n    [0.204, 0.565],\n    [0.174, 0.4445],\n    [0.19649999999999998, 0.4445],\n    [0.21549999999999997, 0.528],\n    [0.21699999999999997, 0.535, 0.21749999999999997, 0.5405000000000001, 0.21749999999999997, 0.5405000000000001],\n    [0.21799999999999997, 0.5405000000000001],\n    [0.21799999999999997, 0.5405000000000001, 0.21849999999999997, 0.5345, 0.21999999999999997, 0.528],\n    [0.24199999999999997, 0.4445],\n    [0.26099999999999995, 0.4445],\n    [0.2825, 0.528]\n];\n\n\nvar kenjiArr = [l1Pt0, l1Pt1, l2Pt0, l2Pt1, l3Pt0, l3Pt1, l4, l5, l6, l7, l8];\n\nvar size = 400;\nif (size > window.innerHeight) size = window.innerHeight * .8;\nvar textNumber = 90;\nvar kenjiPtArrs = [];\n\nfor (var ii = 0; ii < kenjiArr.length; ii++) {\n    kenjiPtArrs[ii] = [];\n\n    var kankakuDuration = parseInt(textNumber / kenjiArr[ii].length) + 1;\n    var curNumber = textNumber;\n\n    for (var jj = 0; jj < kenjiArr[ii].length; jj++) {\n        for (var kk = 0; kk < kankakuDuration; kk++) {\n            var ptX, ptY;\n\n            var rate = kk / kankakuDuration;\n            var curNum = jj;\n            var nextNum = (jj + 1) % kenjiArr[ii].length;\n\n            if (kenjiArr[ii][nextNum].length == 6) {\n                //ptX = kenjiArr[ii][curNum][0] * size * (1 - rate) +  kenjiArr[ii][nextNum][0] * size * rate;\n                //ptY = kenjiArr[ii][curNum][1] * size * (1 - rate) +  kenjiArr[ii][nextNum][1] * size * rate;\n                var x1, y1, x2, y2, x3, y3, x4, y4;\n                if (kenjiArr[ii][curNum].length == 2) {\n                    x1 = kenjiArr[ii][curNum][0] * size;\n                    y1 = kenjiArr[ii][curNum][1] * size;\n                } else if (kenjiArr[ii][curNum].length == 6) {\n                    x1 = kenjiArr[ii][curNum][4] * size;\n                    y1 = kenjiArr[ii][curNum][5] * size;\n                }\n\n                x2 = kenjiArr[ii][nextNum][0] * size;\n                y2 = kenjiArr[ii][nextNum][1] * size;\n                x3 = kenjiArr[ii][nextNum][2] * size;\n                y3 = kenjiArr[ii][nextNum][3] * size;\n                x4 = kenjiArr[ii][nextNum][4] * size;\n                y4 = kenjiArr[ii][nextNum][5] * size;\n\n\n                ptX = x1 * (1 - rate) * (1 - rate) * (1 - rate) + x2 * 3 * (1 - rate) * (1 - rate) * rate + x3 * 3 * (1 - rate) * rate * rate + rate * rate * rate * x4;\n                ptY = y1 * (1 - rate) * (1 - rate) * (1 - rate) + y2 * 3 * (1 - rate) * (1 - rate) * rate + y3 * 3 * (1 - rate) * rate * rate + rate * rate * rate * y4;\n\n            } else {\n                if (kenjiArr[ii][curNum].length == 2) {\n                    ptX = kenjiArr[ii][curNum][0] * size * (1 - rate) + kenjiArr[ii][nextNum][0] * size * rate;\n                    ptY = kenjiArr[ii][curNum][1] * size * (1 - rate) + kenjiArr[ii][nextNum][1] * size * rate;\n                } else if (kenjiArr[ii][curNum].length == 6) {\n                    ptX = kenjiArr[ii][curNum][4] * size * (1 - rate) + kenjiArr[ii][nextNum][0] * size * rate;\n                    ptY = kenjiArr[ii][curNum][5] * size * (1 - rate) + kenjiArr[ii][nextNum][1] * size * rate;\n                }\n            }\n\n            var pos = {x: ptX - size / 2 - 35, y: ptY - size / 2};\n            kenjiPtArrs[ii].push(pos);\n        }\n        curNumber -= kankakuDuration;\n        if (kankakuDuration > curNumber) kankakuDuration = curNumber;\n    }\n}\n\n\n// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canvas.getContext('2d');\nvar rot = 0;\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width = width;\ncanvas.height = height;\n\n\n// ================\n\nvar Line = function () {\n\n    this.height = 150;\n    this.width  = 500;\n\n    this.top =  (height - this.height)/2;\n    this.bot = this.top + this.height;\n    this.left = (width  - this.width)/2;\n\n\n    this.x0 = this.left;\n    this.x1 = this.width + this.left;\n\n    this.velY = 2;\n\n    this.y = this.top;\n};\n\nLine.prototype = {\n    update: function () {\n        this.y += this.velY;\n\n        if (this.y > this.bot) {\n            this.y = this.bot;\n            this.velY = -2;\n        }\n\n        if (this.y < this.top) {\n            this.y = this.top;\n            this.velY = 2;\n        }\n    },\n\n    draw: function () {\n\n        ctx.save();\n        ctx.strokeStyle = \"#19A598\";\n        ctx.moveTo(this.x0, this.y);\n        ctx.lineTo(this.x1, this.y);\n        ctx.stroke();\n\n\n        ctx.strokeRect(this.left, this.top, this.width, this.height);\n        ctx.restore();\n    }\n\n\n};\n\n// ================\n\n\nvar rate;\nvar line;\n\ninit();\nloop();\n\n\nfunction init() {\n    line = new Line();\n\n    prevTime = +new Date;\n\n    //setTimeout(timer, 500);\n}\n\nfunction loop() {\n    line.update();\n\n    rot += .1;\n    var curTime = +new Date;\n    var duration = (curTime - prevTime) / 1000;\n    prevTime = curTime;\n\n    ctx.globalCompositeOperation = \"source-over\";\n    ctx.fillStyle = 'rgba(30, 30, 30, .3)';\n    ctx.fillRect(0, 0, width, height);\n\n\n\n    var biv;\n\n    for(var jj = 0; jj < kenjiPtArrs.length; jj++) {\n        ctx.save();\n        ctx.beginPath();\n\n        ctx.translate(width / 2, height / 2)\n\n        ctx.strokeStyle = \"#19A598\";\n\n\n        for (var i = 0; i < kenjiPtArrs[jj].length; i+= 1) {\n\n\n            if (line.y - height / 2 > kenjiPtArrs[jj][i].y) biv = 0;\n            else                       biv = 10;\n\n            if (i == 0) ctx.moveTo(kenjiPtArrs[jj][i].x + (Math.random() -.5)* biv, kenjiPtArrs[jj][i].y + (Math.random() -.5) * biv);\n            else        ctx.lineTo(kenjiPtArrs[jj][i].x + (Math.random() -.5) * biv, kenjiPtArrs[jj][i].y + (Math.random() -.5) * biv);\n\n        }\n\n\n        if (line.y - height / 2 > kenjiPtArrs[jj][0].y) biv = 0;\n        else                       biv = 10;\n\n        ctx.moveTo(kenjiPtArrs[jj][0].x + (Math.random() -.5)* biv, kenjiPtArrs[jj][0].y + (Math.random() -.5) * biv);\n\n        ctx.closePath();\n        ctx.stroke();\n        ctx.restore();\n    }\n\n\n    //}\n\n    line.draw();\n\n    requestAnimationFrame(loop);\n}\n\nfunction timer() {\n    rate = 0;\n    TweenLite.to(this, .75, {rate: 1, onUpdate: onUpdateTweenHandler, onComplete: onCompleteTwennHandler, ease: Elastic.easeInOut});\n\n    setTimeout(timer, 1000);\n}\n\nfunction onUpdateTweenHandler() {\n    var nextCount = (count + 1) % kenjiPtArrs.length;\n    for (var i = 0; i < 360; i++) {\n\n        var xPos = kenjiPtArrs[count][i].x * (1 - rate) + kenjiPtArrs[nextCount][i].x * rate;\n        var yPos = kenjiPtArrs[count][i].y * (1 - rate) + kenjiPtArrs[nextCount][i].y * rate;\n        curPtArr[i] = {x: xPos, y: yPos};\n    }\n\n}\n\nfunction onCompleteTwennHandler() {\n    count = (count + 1) % kenjiPtArrs.length;\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame"
  },
  {
    "path": "app/scripts/99-hobby/26-undefined.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar pattern;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n\n\n// ================\n\nvar RectCollection = function(ctx){\n    _.bindAll(this, 'onRotation');\n    this.ctx = ctx;\n    var rectSide = Math.min(width, height);\n\n    this.x = -width/2;\n    this.y = -height/2;\n    \n    this.rectArr = [];\n    for(var i = 0; i < this.rectNumber; i ++){\n       var curSide = (.1 + .8 * (this.rectNumber - i) / this.rectNumber) * rectSide;\n       var curRect = new Rect(ctx, curSide);\n\n       this.rectArr.push(curRect);\n    }\n\n    _.delay(this.onRotation, 800);\n}\n\nRectCollection.prototype = {\n    rectNumber : 5,\n    rectArr    : null,\n\n    update : function(dt){\n        this.ctx.save();\n        this.ctx.fillStyle = pattern;\n        this.ctx.translate(-this.x, -this.y);\n        this.ctx.fillRect(this.x, this.y, width, height);\n\n        for(var i = 0; i < this.rectNumber; i++){\n            this.rectArr[i].update(dt);\n        }\n\n        this.ctx.restore();\n    },\n\n    onRotation : function(){\n        for(var i = 0; i < this.rectNumber; i++){\n            this.rectArr[i].onRotation(i /5);\n        }\n    }\n}\n\nvar Rect = function(ctx, side){\n    _.bindAll(this, 'onComplete');\n    this.ctx = ctx;\n    this.halfSide = side/2;\n    this.pos = - this.halfSide;\n    this.side = side;\n    this.kakusei = this.side;\n};\n\nRect.prototype = {\n    theta : 0,\n    sum   : 0,\n    kakusei : 0,\n    transx  : 0,\n    update : function(dt){\n        if(this.isTranslate){\n            this.sum += dt;\n            this.transX = Math.sin(this.sum) *this.side \n        }\n\n        // ======\n        //  draw\n        this.draw();\n    },\n\n    draw : function(){\n        this.ctx.save();\n\n        this.ctx.fillStyle = pattern;\n        \n        this.ctx.translate(this.transX, 0);\n        this.ctx.rotate(this.theta);\n        this.ctx.fillRect( this.pos, this.pos, this.side, this.side);\n        this.ctx.restore();\n\n    },\n\n    onRotation : function(delay){\n        var theta = delay  + Math.PI/6;\n        var duration = .4 + delay; \n        TweenLite.to(this, duration, {theta: theta,  ease: Power2.easeInOut, onComplete: this.onComplete});\n    },\n\n    onComplete : function(){\n        this.isTranslate = true;\n    }\n}\n\nvar Stripe = function(){\n\n}\n\n\n// ================\nvar rectCollection;\nvar tempUpdate, tempCanvas, tempCtx, tempSide, tempHalfSide;\nvar sum = 0;\n\ninit();\nloop();\n\nfunction init(){\n    // create pattern\n    createPattern();\n\n    rectCollection = new RectCollection(ctx);\n\n    prevTime = +new Date;\n}\n\nfunction createPattern(){\n    \n    tempSide = 40;\n    tempHalfSide = tempSide / 2;\n    tempUpdate = 0;\n\n    tempCanvas = document.createElement('canvas');\n    tempCanvas.width = tempSide;\n    tempCanvas.height = tempSide;\n\n    tempCtx = tempCanvas.getContext('2d');\n\n    tempCtx.fillStyle = '#fff';\n    tempCtx.fillRect(0, 0, tempSide/2, tempSide);\n\n    tempCtx.fillStyle = '#333';\n    tempCtx.fillRect( tempSide/2, 0, tempSide/2, tempSide);\n\n    pattern    = tempCtx.createPattern(tempCanvas, 'repeat');\n}\n\n\nfunction updatePattern(dt){\n    sum += dt * 2;\n    var speed =  (Math.cos(sum ) + Math.sin(sum) + 2) ;\n    tempUpdate += speed;\n    tempUpdate = tempUpdate % tempSide;\n\n    var xPos = -1 * tempUpdate;\n    for(var i = 0; i < 4; i++){\n        var col;\n        if(i % 2 == 0) col = \"#ffffff\";\n        else           col = '#333';\n\n        tempCtx.fillStyle = col;\n        tempCtx.fillRect(xPos, 0, tempHalfSide, tempSide);\n        xPos += tempHalfSide;\n    }\n\n    pattern    = tempCtx.createPattern(tempCanvas, 'repeat');\n    tempCtx.clearRect(0, 0, tempSide, tempSide);\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n\n    updatePattern(duration);\n    rectCollection.update(duration);\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/99-hobby/27-simple-boid.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\nvar Boid = function(ctx){\n    this.ctx = ctx;\n\n    this.x   = width * Math.random();\n    this.y   = height * Math.random();\n\n    this.vx  = 0;\n    this.vy  = 0;\n};\n\nBoid.prototype = {\n    rad : 5,\n    col : '#fff',\n\n    update : function(){\n        \n    },\n\n    draw : function(){\n        this.ctx.fillStyle = this.col; \n        this.ctx.beginPath();\n        this.ctx.arc( this.x, this.y, this.rad, 0, 2 * Math.PI, false );\n        this.ctx.fill();\n        this.ctx.closePath();\n    }\n    \n};\n\n// ================\nvar boids      = [];\nvar randomAclX = [];\nvar randomAclY = [];\nvar isRandom = false;\n\nvar NUM_BOIDS = 30;\nvar NUM_BOIDS_EXC = NUM_BOIDS - 1;\nvar BOID_SIDE = 40;\nvar MAX_SPEED = 10;\nvar MAX_DIStANCE = 150;\n\ninit();\nloop();\n\nfunction init(){\n\n    for(var i = 0; i < NUM_BOIDS; i++){\n        var boid = new Boid(ctx);\n\n        boids.push(boid);\n    }\n\n    prevTime = +new Date;\n    setTimeout(onRandomChange, 2000);\n}\n\nfunction onRandomChange(){\n    isRandom = !isRandom;\n\n    if(isRandom){\n        for(var i = 0; i < NUM_BOIDS; i++){\n            var aclX = 10 * (Math.random() - .5);\n            var aclY = 10 * (Math.random() - .5);\n\n            randomAclX[i] = aclX; \n            randomAclY[i] = aclY; \n        }\n\n        setTimeout(onRandomChange, 1000);\n    }else{\n        setTimeout(onRandomChange, 2000);\n    }\n}\n\n\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    for(var i = 0; i < boids.length; i++){\n        var b = boids[i];\n        if(!isRandom){\n            rule1(i);\n            rule2(i);\n            rule3(i);\n        }else{\n            b.vx += randomAclX[i]\n            b.vy += randomAclY[i];\n        }\n               \n        var speed = Math.sqrt(b.vx * b.vx + b.vy * b.vy);\n        if(speed >= MAX_SPEED) {\n            var r = MAX_SPEED / speed;\n            b.vx *= r;\n            b.vy *= r;\n        }\n\n        if(!isRandom){\n            if(b.x < 0 && b.vx < 0 || b.x > width  && b.vx > 0) b.vx *= -1;\n            if(b.y < 0 && b.vy < 0 || b.y > height && b.vy > 0) b.vy *= -1;\n        }\n        \n        \n        b.x += b.vx;\n        b.y += b.vy;\n\n        if(isRandom){\n            if(b.x < 0) b.x += width;\n            if(b.x > width) b.x -= width;\n\n            if(b.y < 0)b.y += height;\n            if(b.y > height)b.y -= height;\n        }\n\n    }\n\n    for(var i = 0; i < boids.length; i++){\n        var boidA = boids[i];\n\n        ctx.beginPath();\n        ctx.fillStyle = 'rgba(255, 255, 255, .3)';\n        ctx.arc(boidA.x , boidA.y, 2, 0, 2 * Math.PI);\n        ctx.fill();\n\n        ctx.closePath();\n\n\n        for(var j = i; j < boids.length; j++){\n            var boidB = boids[j];\n            var dx = boidA.x - boidB.x;\n            var dy = boidA.y - boidB.y;\n\n            var dis = Math.sqrt(dx * dx + dy * dy);\n\n            if(dis < MAX_DIStANCE){\n                var alpha = (MAX_DIStANCE - dis) / MAX_DIStANCE;\n\n                ctx.beginPath();\n                ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')';\n                ctx.moveTo(boidA.x, boidA.y);\n                ctx.lineTo(boidB.x, boidB.y);\n                ctx.stroke();\n\n                ctx.closePath();\n            }\n        }\n    }\n    \n\n    requestAnimationFrame(loop);\n}\n\nfunction rule1(index){\n    var c = {x: 0, y: 0};\n\n    for(var i = 0; i < boids.length; i++){\n\n        if(i != index){\n            c.x += boids[i].x;\n            c.y += boids[i].y;\n        }\n    }\n\n    c.x = c.x / NUM_BOIDS_EXC;\n    c.y = c.y / NUM_BOIDS_EXC;\n\n    boids[index].vx += (c.x - boids[index].x)/100;\n    boids[index].vy += (c.y - boids[index].y)/100;\n}\n\nfunction rule2(index){\n    for( var i = 0; i < boids.length; i++){\n        var d = getDistance(boids[i], boids[index]);\n        if(d < BOID_SIDE){\n            boids[index].vx -= boids[i].x - boids[index].x;\n            boids[index].vy -= boids[i].y - boids[index].y;\n        }\n    }\n}\n\nfunction rule3(index){\n    var pv = {x: 0, y: 0};\n    for(var i = 0; i < boids.length; i++){\n        if(i != index){\n            pv.x += boids[i].vx;\n            pv.y += boids[i].vy;\n        }\n    }\n\n    pv.x /= NUM_BOIDS_EXC;\n    pv.y /= NUM_BOIDS_EXC;\n\n    boids[index].vx += (pv.x - boids[index].vx) / 8;\n    boids[index].vy += (pv.y - boids[index].vy) / 8;\n}\n\nfunction getDistance(p1, p2){\n    var dx = p1.x - p2.x;\n    var dy = p1.y -p2.y;\n    return Math.sqrt(dx * dx + dy * dy);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/99-hobby/28-02-combination.js",
    "content": "window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\n\n\n// --------------------------\n\n\n(function () {\n    function Particle(x, y) {\n        this.x = x;\n        this.y = y;\n        this.mix = x;\n        this.miy = y;\n    }\n\n    var Boid = function(ctx){\n        this.ctx = ctx;\n\n        this.x   = width * Math.random();\n        this.y   = height * Math.random();\n\n        this.vx  = 0;\n        this.vy  = 0;\n    };\n\n    Boid.prototype = {\n        rad : 2,\n        col : '#fff',\n\n        update : function(){\n            \n        },\n\n        draw : function(){\n            this.ctx.fillStyle = this.col; \n            this.ctx.beginPath();\n            this.ctx.arc( this.x, this.y, this.rad, 0, 2 * Math.PI, false );\n            this.ctx.fill();\n            this.ctx.closePath();\n        }\n        \n    };\n\n    var boids      = [];\n\n    var NUM_BOIDS = 30;\n    var NUM_BOIDS_EXC = NUM_BOIDS - 1;\n    var BOID_SIDE = 40;\n    var MAX_SPEED = 10;\n    var MAX_DIStANCE = 150;\n\n\n\n  \n  var Circle = function(ctx){\n        var centerX = 0;\n        var centerY = 0;\n\n        for(var i = 0;i < NUM_BOIDS; i++){\n            centerX += boids[i].x;\n            centerY += boids[i].y;\n        }\n\n        centerX /= NUM_BOIDS;\n        centerY /= NUM_BOIDS;\n        \n        this.x = centerX;\n        this.y = centerY;\n  \n  };\n  \n  Circle.prototype = {\n    update : function(){\n        var centerVelX = 0;\n        var centerVelY = 0;\n\n        for(var i = 0;i < NUM_BOIDS; i++){\n            centerVelX += boids[i].vx;\n            centerVelY += boids[i].vy;\n        }\n\n        centerVelX /= NUM_BOIDS;\n        centerVelY /= NUM_BOIDS;\n        \n        this.x += centerVelX;\n        this.y += centerVelY;\n     \n    }\n  }\n\n\n    function Particles(particles, context) {\n        this.particles = particles;\n        this.context = context;\n    }\n\n    Particles.prototype.draw = function () {\n        for (var i = 0; i < this.particles.length; i++) {\n            this.context.beginPath();\n            this.context.fillStyle = \"#fff\";\n            this.context.arc(this.particles[i].x, this.particles[i].y, 3, 0, 2 * Math.PI, false);\n            this.context.fill();\n            this.context.closePath();\n        }\n    };\n\n    Particles.prototype.lineDraw = function(){\n        for (var i = 0; i < this.particles.length; i++) {\n            this.context.beginPath();\n            this.context.strokeStyle = \"rgba( 255, 255, 255, .6)\";\n            this.context.moveTo(this.particles[i].mix, this.particles[i].miy);\n            this.context.lineTo(this.particles[i].x, this.particles[i].y);\n            this.context.stroke();\n            this.context.closePath();\n        }\n    }\n\n    function getMousePos(canvas, evt) {\n        var rect = rect = canvas.getBoundingClientRect();\n//        new Particle( evt.clientX - rect.left, evt.clientY - rect.top);\n        return  new Particle(evt.clientX - rect.left, evt.clientY - rect.top);\n    }\n\n\n    var mainCanvas, mainContext;\n\n    var width = window.innerWidth;\n    var height = window.innerHeight;\n\n    var gridWidNums = 20 + 1;\n    var gridHigNums = 20 + 1;\n\n    var gripWid = width / (gridWidNums - 1);\n    var gripHig = height / (gridHigNums - 1);\n\n    var range = gripWid * 3;\n\n    var particleArray = [];\n\n    var grids;\n    var circle;\n\n    var speed = 50;\n    var multiSpeed = 1;\n\n    var drawCheck = false;\n\n\n    mainCanvas = document.getElementById(\"c\");\n    mainCanvas.width = width;\n    mainCanvas.height = height;\n\n    mainContext = mainCanvas.getContext(\"2d\");\n\n    init();\n\n    function init() {\n        for (var _x = 0; _x < gridWidNums; _x++) {\n            for (var _y = 0; _y < gridHigNums; _y++) {\n                var posX = gripWid * _x;\n                var posY = gripHig * _y;\n                var particle = new Particle(posX, posY);\n                particleArray.push(particle);\n            }\n        }\n      \n\n        grids = new Particles(particleArray, mainContext);\n        grids.draw();\n\n        for(var i = 0; i < NUM_BOIDS; i++){\n            var boid = new Boid(mainContext);\n\n            boids.push(boid);\n        }\n\n\n        circle = new Circle();\n    }\n  \n \n  \n    loop()\n\n    function loop(){\n\n        mainContext.fillStyle = \"#333\";\n        mainContext.fillRect(0, 0, width, height);\n\n\n      \n\n\n        for(var i = 0; i < boids.length; i++){\n            var b = boids[i];\n\n            rule1(i);\n            rule2(i);\n            rule3(i);\n          \n            var speed = Math.sqrt(b.vx * b.vx + b.vy * b.vy);\n\n            var speed = Math.sqrt(b.vx * b.vx + b.vy * b.vy);\n            if(speed >= MAX_SPEED) {\n                var r = MAX_SPEED / speed;\n                b.vx *= r;\n                b.vy *= r;\n            }\n\n                if(b.x < 0 && b.vx < 0 || b.x > width  && b.vx > 0) b.vx *= -1;\n                if(b.y < 0 && b.vy < 0 || b.y > height && b.vy > 0) b.vy *= -1;\n        \n        \n            b.x += b.vx;\n            b.y += b.vy;\n\n\n            b.draw();\n\n        }\n\n       circle.update();\n      \n        var particleNums = grids.particles.length;\n\n          for (var i = 0; i < particleNums; i++) {\n            var dx, dy, distance;\n            var particle = grids.particles[i];\n            \n             dx = circle.x - particle.x;\n             dy = circle.y - particle.y;\n            \n            distance = Math.sqrt(dx * dx + dy * dy);\n              particle.x = (particle.x - (dx / distance) * (range / distance) * speed) - ((particle.x - particle.mix) / 2);\n              particle.y = (particle.y - (dy / distance) * (range / distance) * speed) - ((particle.y - particle.miy) / 2);            \n            \n          \n        }\n        \n            grids.draw();\n\n        requestAnimationFrame(loop);\n    }\n\n    function rule1(index){\n        var c = {x: 0, y: 0};\n\n        for(var i = 0; i < boids.length; i++){\n\n            if(i != index){\n                c.x += boids[i].x;\n                c.y += boids[i].y;\n            }\n        }\n\n        c.x = c.x / NUM_BOIDS_EXC;\n        c.y = c.y / NUM_BOIDS_EXC;\n\n        boids[index].vx += (c.x - boids[index].x)/100;\n        boids[index].vy += (c.y - boids[index].y)/100;\n    }\n\n    function rule2(index){\n        for( var i = 0; i < boids.length; i++){\n            var d = getDistance(boids[i], boids[index]);\n            if(d < BOID_SIDE){\n                boids[index].vx -= boids[i].x - boids[index].x;\n                boids[index].vy -= boids[i].y - boids[index].y;\n            }\n        }\n    }\n\n    function rule3(index){\n        var pv = {x: 0, y: 0};\n        for(var i = 0; i < boids.length; i++){\n            if(i != index){\n                pv.x += boids[i].vx;\n                pv.y += boids[i].vy;\n            }\n        }\n\n        pv.x /= NUM_BOIDS_EXC;\n        pv.y /= NUM_BOIDS_EXC;\n\n        boids[index].vx += (pv.x - boids[index].vx) / 8;\n        boids[index].vy += (pv.y - boids[index].vy) / 8;\n    }\n\n    function getDistance(p1, p2){\n        var dx = p1.x - p2.x;\n        var dy = p1.y -p2.y;\n        return Math.sqrt(dx * dx + dy * dy);\n    }\n\n})();\n"
  },
  {
    "path": "app/scripts/99-hobby/28-combination.js",
    "content": "\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\n\n\n// --------------------------\nvar Boid = function(ctx){\n    this.ctx = ctx;\n\n    this.x   = 10 * Math.random() - 5;\n    this.y   = 10 * Math.random() - 5;\n\n    this.vx  = 0;\n    this.vy  = 0;\n};\n\nBoid.prototype = {\n    rad : 2,\n    col : '#fff',\n\n    update : function(){\n        \n    },\n\n    draw : function(){\n        this.ctx.fillStyle = this.col; \n        this.ctx.beginPath();\n        this.ctx.arc( this.x, this.y, this.rad, 0, 2 * Math.PI, false );\n        this.ctx.fill();\n        this.ctx.closePath();\n    }\n    \n};\n\n// --------------------------\nvar Pt = function(rad, theta){\n\n    this.rad   = rad;\n    this.theta = theta;\n};\n\nPt.prototype = {\n    setTheta : function(val){\n        this.futureTheta = val;\n        TweenLite.to(this,.5, { theta : val, ease: Elastic.easeInOut});\n    },\n}\n\n\nObject.defineProperty(Pt.prototype, 'theta', {\n    get : function(){\n        return this._theta;\n    },\n\n    set : function(val){\n        this._theta = val;\n        this.x = this.rad * Math.cos(this._theta);\n        this.y = this.rad * Math.sin(this._theta);\n    }\n});\n\n\n\n\nvar Rect = function(ctx, x, y){\n    _.bindAll(this, 'rotationComplete');\n\n\n    this.x = this.originX = x;\n    this.y = y;\n\n    this.transX = 0;\n    this.side = 120;\n    this.halfSide = this.side / 2 * -1;\n    this.ctx = ctx;\n\n    this.col = '#fff';\n\n    this.NUM_BOIDS = 20;\n    this.NUM_BOIDS_EXC = this.NUM_BOIDS - 1;\n    this.BOID_SIDE = 4;\n    this.MAX_SPEED = 5;\n    this.MAX_DIS   = 3;\n\n    this.boids = [];\n\n    this.rotate = 0;\n    this.thetaArr = [0, Math.PI, Math.PI * 5 / 4, Math.PI * 3 / 2];\n    this.ptArr =[\n        new Pt(0, 0),\n        new Pt(this.side, Math.PI),\n        new Pt(this.side * Math.sqrt(2), Math.PI * (5/4)),\n        new Pt(this.side, Math.PI * (3/2)),\n    ];\n\n    // initialize the boids\n    for(var i = 0; i < this.NUM_BOIDS; i++){\n        var boid = new Boid(ctx);\n        this.boids.push(boid);\n    }\n\n    this.rotation();\n};\n\nRect.prototype = {\n    rotation : function(){\n        this.rotate =  Math.PI/2;\n        for(var i = 0; i < this.ptArr.length; i++){\n            var pt = this.ptArr[i];\n            var theta = this.thetaArr[i];\n            TweenLite.to(pt, 1, { theta : (theta + this.rotate)});\n        }\n\n        TweenLite.to(this, 1, { x : (this.originX - 120), onComplete : this.rotationComplete});\n    },\n\n    rotationComplete : function(){\n        this.ptArr =[\n            new Pt(0, 0),\n            new Pt(this.side, Math.PI),\n            new Pt(this.side * Math.sqrt(2), Math.PI * (5/4)),\n            new Pt(this.side, Math.PI * (3/2)),\n        ];\n\n        this.x = this.originX;\n        this.rotation();\n    },\n\n    update : function(){\n        var center = {\n            x : this.x + (this.ptArr[0].x + this.ptArr[1].x + this.ptArr[2].x + this.ptArr[3].x)/4 + this.side/2,\n            y : this.y,// - (this.ptArr[0].y + this.ptArr[1].y + this.ptArr[2].y + this.ptArr[3].y)/4\n        };\n\n        for(var i = 0; i < this.NUM_BOIDS; i++){\n            var b = this.boids[i];\n            this.rule1(i);\n            this.rule2(i);\n            this.rule3(i);\n\n        var speed = Math.sqrt(b.vx * b.vx + b.vy * b.vy);\n        if(speed >= this.MAX_SPEED) {\n            var r = this.MAX_SPEED / speed;\n            b.vx *= r;\n            b.vy *= r;\n        }\n\n            if(b.x < -this.side/2 && b.vx < 0 || b.x > this.side/2  && b.vx > 0) b.vx *= -1;\n            if(b.y < -this.side/2 && b.vy < 0 || b.y > this.side/2 && b.vy > 0) b.vy *= -1;\n\n            b.x += b.vx;\n            b.y += b.vy;\n\n\n            this.ctx.save();\n            this.ctx.translate( center.x, center.y);\n\n            b.draw();\n\n            this.ctx.restore();\n\n        }\n        \n\n        this.ctx.save();\n        this.ctx.translate(this.x + this.side /2, this.y + this.side /2);\n\n        this.ctx.beginPath();\n        this.ctx.strokeStyle = this.col;\n\n        this.ctx.moveTo(this.ptArr[0].x, this.ptArr[0].y);\n\n        for(var i = 0; i < this.ptArr.length; i++ ){\n            var number = (i + 1) % this.ptArr.length;\n            this.ctx.lineTo(this.ptArr[number].x, this.ptArr[number].y);\n        }\n        \n\n        this.ctx.stroke();\n        this.ctx.closePath();\n\n        this.ctx.restore();\n    },\n\n    rule1 : function(index){\n        var c = {x : 0, y: 0};\n\n        for(var i = 0; i < this.NUM_BOIDS; i++){\n            if(i != index){\n                c.x += this.boids[i].x;\n                c.y += this.boids[i].y;\n            }\n        }\n\n        c.x /= this.NUM_BOIDS_EXC;\n        c.y /= this.NUM_BOIDS_EXC;\n\n        this.boids[index].vx += (c.x - this.boids[index].x)/100;\n        this.boids[index].vy += (c.y - this.boids[index].y)/100;\n    },\n\n    rule2 : function(index){\n        for(var i = 0; i < this.NUM_BOIDS; i++){\n            if(i == index) return;\n            var dis = this.getDistance(this.boids[i], this.boids[index]);\n            if(dis < this.BOID_SIDE){\n                this.boids[index].vx -= this.boids[i].x - this.boids[index].x;\n                this.boids[index].vy -= this.boids[i].y - this.boids[index].y;\n            }\n        }\n    },\n\n    rule3 : function(index){\n        var pv = {x: 0, y: 0};\n\n        for(var i = 0; i < this.NUM_BOIDS; i++){\n            if(i != index){\n                pv.x += this.boids[i].vx;\n                pv.y += this.boids[i].vy;\n            }\n        }\n\n        pv.x /= this.NUM_BOIDS_EXC;\n        pv.y /= this.NUM_BOIDS_EXC;\n\n        this.boids[index].vx += (pv.x - this.boids[index].vx)/8;\n        this.boids[index].vy += (pv.y - this.boids[index].vy)/8;\n    },\n\n    getDistance : function(p1, p2){\n        var dx = p1.x - p2.x;\n        var dy = p1.y - p2.y;\n\n        return Math.sqrt(dx * dx + dy * dy);\n    }\n};\n\nvar RectTop1 = function(ctx, x, y, rect){\n    _.bindAll(this, 'rotationComplete');\n\n    this.x = this.originX = x;\n    this.y = y;\n\n    this.side = 120;\n    this.baseRect = rect;\n    this.ctx = ctx;\n\n    this.col = '#fff';\n\n    this.rotate = 0;\n    this.thetaArr = [0, Math.PI * 3 / 2, Math.PI * 7 / 4, Math.PI * 2];\n    this.ptArr =[\n        new Pt(0, 0),\n        new Pt(this.side, Math.PI* (3/2)),\n        new Pt(this.side * Math.sqrt(2), Math.PI * (7/4)),\n        new Pt(this.side, Math.PI * 2),\n    ];\n\n    this.rotation();\n};\n\nRectTop1.prototype = {\n    rotation : function(){\n        this.rotate =  -Math.PI/2;\n        for(var i = 0; i < this.ptArr.length; i++){\n            var pt = this.ptArr[i];\n            var theta = this.thetaArr[i];\n            TweenLite.to(pt, 1, { theta : (theta + this.rotate)});\n        }\n\n        TweenLite.to(this, 1, { x : (this.originX ), onComplete : this.rotationComplete});\n    },\n    rotationComplete : function(){\n        this.ptArr =[\n            new Pt(0, 0),\n            new Pt(this.side, Math.PI* (3/2)),\n            new Pt(this.side * Math.sqrt(2), Math.PI * (7/4)),\n            new Pt(this.side, Math.PI * 2),\n        ];\n\n        this.x = this.originX;\n        this.rotation();\n    },\n    update : function(){\n        this.ctx.save();\n        //this.ctx.translate(this.x + this.baseRect.ptArr[2].x - this.side/2, this.y + this.baseRect.ptArr[2].y + this.side/2);\n        this.x = this.baseRect.x + this.baseRect.ptArr[2].x + this.side / 2;\n        this.y = this.baseRect.y + this.baseRect.ptArr[2].y + this.side/2;\n        this.ctx.translate( this.x, this.y);\n\n        this.ctx.beginPath();\n        this.ctx.strokeStyle = this.col;\n\n        this.ctx.moveTo(this.ptArr[0].x, this.ptArr[0].y);\n\n        for(var i = 0; i < this.ptArr.length; i++ ){\n            var number = (i + 1) % this.ptArr.length;\n            this.ctx.lineTo(this.ptArr[number].x, this.ptArr[number].y);\n        }\n\n        this.ctx.stroke();\n        this.ctx.closePath();\n\n        this.ctx.restore();\n    }\n};\n\nvar RectTop2 = function(ctx, x, y, rect){\n    _.bindAll(this, 'rotationComplete');\n\n    this.x = this.originX = x;\n    this.y = y;\n\n    this.side = 120;\n    this.baseRect = rect;\n    this.ctx = ctx;\n\n    this.col = '#fff';\n\n    this.rotate = 0;\n    this.thetaArr = [0, Math.PI, Math.PI * 5 / 4, Math.PI * 3 / 2];\n    this.ptArr =[\n        new Pt(0, 0),\n        new Pt(this.side, Math.PI),\n        new Pt(this.side * Math.sqrt(2), Math.PI * (5/4)),\n        new Pt(this.side, Math.PI * (3/2)),\n    ];\n\n    this.rotation();\n};\n\nRectTop2.prototype = {\n    rotation : function(){\n        this.rotate =  Math.PI/2;\n        for(var i = 0; i < this.ptArr.length; i++){\n            var pt = this.ptArr[i];\n            var theta = this.thetaArr[i];\n            TweenLite.to(pt, 1, { theta : (theta + this.rotate)});\n        }\n\n        TweenLite.to(this, 1, { x : (this.originX ), onComplete : this.rotationComplete});\n    },\n    rotationComplete : function(){\n        this.ptArr =[\n            new Pt(0, 0),\n            new Pt(this.side, Math.PI),\n            new Pt(this.side * Math.sqrt(2), Math.PI * (5/4)),\n            new Pt(this.side, Math.PI * (3/2)),\n        ];\n\n        this.x = this.originX;\n        this.rotation();\n    },\n    update : function(){\n        this.ctx.save();\n        this.x = this.baseRect.x + this.baseRect.ptArr[2].x;\n        this.y = this.baseRect.y + this.baseRect.ptArr[2].y;\n        this.ctx.translate( this.x, this.y );\n\n        this.ctx.beginPath();\n        this.ctx.strokeStyle = this.col;\n\n        this.ctx.moveTo(this.ptArr[0].x, this.ptArr[0].y);\n\n        for(var i = 0; i < this.ptArr.length; i++ ){\n            var number = (i + 1) % this.ptArr.length;\n            this.ctx.lineTo(this.ptArr[number].x, this.ptArr[number].y);\n        }\n\n        this.ctx.stroke();\n        this.ctx.closePath();\n\n        this.ctx.restore();\n    }\n};\n\n\n\n\n\nvar Road = function(ctx, x, y){\n    var line;\n    var lineWidth = 20;\n    var lineWidthMargin = 10;\n\n    this.ctx = ctx;\n\n    this.width = window.innerWidth;\n\n    this.x = x;\n    this.y = y;\n\n    this.lineArr = [];\n\n    this.mask = {x: - this.num /2 * (lineWidth + lineWidthMargin), width: this.num * (lineWidth + lineWidthMargin)}\n\n    for(var i = 0; i <= this.num; i++){\n        line = new Line(this.ctx, (lineWidth + lineWidthMargin) * (i - this.num/2), 0, lineWidth, {minX: this.mask.x, maxX: this.mask.x + this.mask.width})\n        this.lineArr.push(line);\n    }\n};\n\nRoad.prototype = {\n    num : 20,\n    lineArr : null,\n    update : function(){\n        this.ctx.save();\n\n        this.ctx.translate(this.x, this.y);\n\n        for(var i = 0; i < this.lineArr.length; i++){\n            this.lineArr[i].update();\n        }\n\n        var grd = this.ctx.createLinearGradient(this.mask.x * 2, 0, this.mask.width, 0);\n\n\n        grd.addColorStop(0.25, 'rgba(51, 51, 51, 1)');\n        grd.addColorStop(0.3, 'rgba(51, 51, 51, 0)');\n        grd.addColorStop(0.5, 'rgba(51, 51, 51, 0)');\n        grd.addColorStop(0.7, 'rgba(51, 51, 51, 0)');\n        grd.addColorStop(0.75, 'rgba(51, 51, 51, 1)');\n\n        this.ctx.fillStyle = grd;\n        this.ctx.fillRect(-this.x, -15, this.width, 30);\n\n        this.ctx.restore();\n    }\n};\n\nvar Line = function(ctx, x, y, width, range){\n    this.x = x;\n    this.range = range;\n\n    this.ctx = ctx;\n    this.col = '#fff';\n    this.width = width;\n    this.prevTime = + new Date;\n};\n\nLine.prototype = {\n    update : function(){\n\n        this.x -= 1;\n        if(this.x < this.range.minX) this.x = this.range.maxX;\n\n        this.ctx.strokeStyle = this.col;\n        this.ctx.beginPath();\n\n        this.ctx.moveTo(this.x - this.width / 2, 0);\n        this.ctx.lineTo(this.x + this.width / 2, 0);\n        this.ctx.stroke();\n\n        this.ctx.closePath();\n\n    }\n};\n\n\n\n\n// --------------------------\n\nvar width, height, previousTime;\nvar side1, side2;\nvar rect, rectTop1, rectTop2, side, road;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\nside = Math.min(width, height) / 8;\n\n\ncanvas.width  = width;\ncanvas.height = height;\n\n\ninit();\nloop();\n\nfunction init(){\n    rect = new Rect(ctx, width / 2, height *.9-60);\n    rectTop1 = new RectTop1(ctx, width/2, height*.9-60, rect);\n    rectTop2 = new RectTop2(ctx, width/2, height*.9-60, rectTop1);\n\n    road = new Road(ctx, width/2, height *.9 + 2);\n}\n\nfunction loop(){\n    //ctx.clearRect(0, 0, width, height);\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    rect.update();\n    rectTop1.update();\n    rectTop2.update();\n    road.update();\n\n    requestAnimationFrame(loop);\n}\n"
  },
  {
    "path": "app/scripts/99-hobby/30-mouse-boid.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\nvar Boid = function(ctx, x, y){\n    this.ctx = ctx;\n\n    this.x   = x;\n    this.y   = y;\n\n    this.vx  = 0;\n    this.vy  = 0;\n\n};\n\nBoid.prototype = {\n    rad : 2,\n    col : '#fff',\n\n    update : function(){\n\n    },\n\n    draw : function(){\n        this.ctx.save();\n\n        this.ctx.translate(this.x, this.y);\n        this.ctx.scale(0.05, 0.05);\n        this.ctx.drawImage(image, -imageWid/2, -imageHig/2);\n\n        this.ctx.restore();\n    }\n\n};\n\n// ================\n\n//init();\n//loop();\nvar boids = [];\nvar BOID_SIDE = 30;\nvar MAX_DIS = 20;\nvar MAX_SPEED = 12;\nvar NUM_BOIDS;\nvar NUM_BOIDS_EXC;\n\nvar imageWid, imageHig;\nvar image = new Image();\nimage.src = 'http://www.clipartbest.com/cliparts/dMT/LMo/dMTLMo6ia.png';\nimage.onload = onLoad;\nvar text = \"\";\nvar textCount = 0;\nvar FULL_TEXT = \"MOVE MOUSE\";\nvar mouse;\nvar isMouseStatic = false;\n\nfunction onLoad(){\n    imageWid = image.width;\n    imageHig = image.height;\n\n\n    init();\n    loop();\n\n}\n\nfunction init(){\n    prevTime = +new Date;\n\n    showText();\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n\n    ctx.fillStyle = '#fff';\n    ctx.fillRect(0, 0, width, height);\n\n    fillText();\n\n\n    if(boids.length > 0){\n        var isMouseActive = true;\n        for(var i = 0; i < boids.length; i++){\n            if(!isMouseStatic){\n                var b = boids[i];\n                rule1(i);\n                rule2(i);\n                rule3(i);\n\n                var speed = Math.sqrt(b.vx * b.vx + b.vy * b.vy);\n                if(speed >= MAX_SPEED) {\n                    var r = MAX_SPEED / speed;\n                    b.vx *= r;\n                    b.vy *= r;\n                }\n\n                boids[i].x += boids[i].vx;\n                boids[i].y += boids[i].vy;\n\n                if(b.x < 0 || b.x > width || b.y < 0 || b.y > height) {\n                    boids[i].isOut = true;\n                }\n                else                                                  {\n                    boids[i].isOut = false;\n                }\n            }\n\n            boids[i].draw();\n        }\n\n        for(var i = 0; i < boids.length; i++){\n            if(!boids[i].isOut) isMouseActive = false;\n        }\n\n\n        if(isMouseActive && !isMouseStatic){\n\n            isMouseStatic = true;\n            boids = [];\n            showText();\n        }\n\n    }\n\n\n\n\n\n\n    requestAnimationFrame(loop);\n}\n\nfunction showText(){\n    isMouseStatic = true;\n    textCount = 0;\n    //var boid = new Boid(ctx, 80, 90);\n    //boids.push(boid);\n\n\n\n    loopText();\n}\n\nfunction removeText(){\n    textCount--;\n    text = FULL_TEXT.substring(0, textCount);\n\n    if(textCount >= 0)\n        setTimeout(removeText, 16);\n\n}\n\nvar mouseCount = 0;\nvar prevMouse = {x: null, y: null};\n\nfunction loopText(){\n\n    textCount++;\n    if(textCount == 1){\n        var boid = new Boid(ctx, 82, 90);\n        boids.push(boid);\n    }else{\n\n        text = FULL_TEXT.substring(0, textCount-1);\n    }\n\n\n    if(textCount <= FULL_TEXT.length)\n        setTimeout(loopText, 16);\n    else{\n        ctx.font=\"30px Arial\";\n        var textWidth = ctx.measureText(FULL_TEXT).width;\n        var boid = new Boid(ctx, textWidth + 120, 90);\n        boids.push(boid);\n\n\n        mouseCount = 0;\n\n        document.addEventListener('mousemove', onMouseMove);\n        //setTimeout(onIntervalMousePosition, 100);\n    }\n\n}\n\nfunction fillText(){\n    ctx.font =  \"30px Arial\";\n    ctx.fillStyle = '#333';\n    ctx.fillText(text, 100, 100);\n}\n\nfunction onMouseMove(event){\n\n    mouse = {x: event.pageX, y: event.pageY};\n\n    var boid;\n    if(mouse.x == prevMouse.x && mouse.y == prevMouse.y)\n        return\n\n    boid = new Boid(ctx, mouse.x, mouse.y);\n\n    prevMouse = {x: mouse.x, y: mouse.y};\n\n    boids.push(boid);\n\n\n\n\n    mouseCount++;\n    if(mouseCount > 50){\n        NUM_BOIDS = boids.length;\n        NUM_BOIDS_EXC = NUM_BOIDS - 1;\n        isMouseStatic = false;\n        removeText();\n        document.removeEventListener('mousemove', onMouseMove);\n    }else{\n\n\n    }\n\n    mouseCount++;\n\n\n}\n\nfunction rule1(index){\n    var c = {x: 0, y: 0};\n\n    for(var i = 0; i < boids.length; i++){\n\n        if(i != index){\n            c.x += boids[i].x;\n            c.y += boids[i].y;\n        }\n    }\n\n    c.x = c.x / NUM_BOIDS_EXC;\n    c.y = c.y / NUM_BOIDS_EXC;\n\n    boids[index].vx += (c.x - boids[index].x)/100;\n    boids[index].vy += (c.y - boids[index].y)/100;\n}\n\nfunction rule2(index){\n    for( var i = 0; i < boids.length; i++){\n        var d = getDistance(boids[i], boids[index]);\n        if(d < BOID_SIDE){\n            boids[index].vx -= boids[i].x - boids[index].x;\n            boids[index].vy -= boids[i].y - boids[index].y;\n        }\n    }\n}\n\nfunction rule3(index){\n    var pv = {x: 0, y: 0};\n    for(var i = 0; i < boids.length; i++){\n        if(i != index){\n            pv.x += boids[i].vx;\n            pv.y += boids[i].vy;\n        }\n    }\n\n    pv.x /= NUM_BOIDS_EXC;\n    pv.y /= NUM_BOIDS_EXC;\n\n    boids[index].vx += (pv.x - boids[index].vx) / 8;\n    boids[index].vy += (pv.y - boids[index].vy) / 8;\n}\n\nfunction getDistance(p1, p2){\n    var dx = p1.x - p2.x;\n    var dy = p1.y -p2.y;\n    return Math.sqrt(dx * dx + dy * dy);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame"
  },
  {
    "path": "app/scripts/99-hobby/32-boid-collection.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\nvar side = 200\nvar leftX = width/2 - side/2;\nvar rightX = width/2 + side/2;\nvar topY = height/2 - side/2;\nvar bottomY = height/2 + side/2;\n\n// ================\nvar Boid = function(ctx){\n    this.ctx = ctx;\n\n    this.x   = width/2 + side * (Math.random() - .5);\n    this.y   = height/2 + side * (Math.random() -.5);\n\n    this.vx  = 0;\n    this.vy  = 0;\n};\n\nBoid.prototype = {\n    rad : 2,\n    col : '#fff',\n\n    update : function(){\n\n    },\n\n    draw : function(){\n        this.ctx.fillStyle = this.col;\n        this.ctx.beginPath();\n        this.ctx.arc( this.x, this.y, this.rad, 0, 2 * Math.PI, false );\n        this.ctx.fill();\n        this.ctx.closePath();\n    }\n\n};\n\n// ================\nvar boidCollection = [];\nvar boids      = [];\nboids[0] = [];\nboids[1] = [];\nboids[2] = [];\nboids[3] = [];\n\n\nvar Vars = [];\nvar NUM_BOIDS = 240;\nvar BOID_SIDE;\nvar MAX_SPEED;\n\ninit();\nloop();\n\nfunction init(){\n    for(var i = 0; i < 4; i++){\n        Vars.push({\n            BOID_SIDE : 2 + 4 * Math.random(),\n            MAX_SPEED : 3  + 3 * Math.random(),\n            rule1     : 10 + 140 * Math.random(),\n            rule3     : 6 + Math.random() * 20\n        });\n    }\n\n    for(var i = 0; i < NUM_BOIDS; i++){\n        var random = Math.random();\n        var boid = new Boid(ctx);\n\n        if(random < 1/4)       {\n            boid.col = '#e74c3c';\n            boids[0].push(boid);\n        }\n        else if(random < 1/2){\n            boid.col = '#f1c40f';\n            boids[1].push(boid);\n        }  else if(random < 3 /4){\n            boid.col = '#3498db';\n            boids[2].push(boid);\n        }\n        else                   {\n            boid.col = '#1abc9c';\n            boids[3].push(boid);\n        }\n\n        boidCollection.push(boid);\n    }\n\n\n\n    prevTime = +new Date;\n\n    setTimeout(shuffle, 1000 * 4);\n}\n\nfunction shuffle(){\n    //var collectionNum = parseInt(Math.random * 4);\n\n    boids[0] = [];\n    boids[1] = [];\n    boids[2] = [];\n    boids[3] = [];\n\n\n\n    for(var i = 0; i < 4; i++){\n        Vars[i] = {\n            BOID_SIDE : 2 + 4 * Math.random(),\n            MAX_SPEED : 3  + 3 * Math.random(),\n            rule1     : 10 + 140 * Math.random(),\n            rule3     : 6 + Math.random() * 20\n        };\n    }\n\n\n\n    for(var i = 0; i < NUM_BOIDS; i++){\n        var random = Math.random();\n        var boid = boidCollection[i];\n\n        if(random < 1/4)       {\n            boid.col = '#e74c3c';\n            boids[0].push(boid);\n        }\n        else if(random < 1/2){\n            boid.col = '#f1c40f';\n            boids[1].push(boid);\n        }  else if(random < 3 /4){\n            boid.col = '#3498db';\n            boids[2].push(boid);\n        }\n        else                   {\n            boid.col = '#1abc9c';\n            boids[3].push(boid);\n        }\n    }\n\n    console.log(boidCollection);\n\n    setTimeout(shuffle, 1000 * 4);\n}\n\n\n\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n\n    side = 300 + 100 * Math.cos(curTime/2000);\n    leftX = width/2 - side/2;\n    rightX = width/2 + side/2;\n    topY = height/2 - side/2;\n    bottomY = height/2 + side/2;\n\n    ctx.clearRect(0, 0, width, height);\n    ctx.fillStyle = '#333';\n    ctx.fillRect( leftX, topY, side, side);\n\n    ctx.beginPath();\n    ctx.moveTo(0, 0);\n    ctx.lineTo(leftX, topY);\n    ctx.strokeStyle = '#333';\n    ctx.stroke();\n    ctx.closePath();\n\n\n    ctx.beginPath();\n    ctx.moveTo(0, height);\n    ctx.lineTo(leftX, bottomY);\n    ctx.strokeStyle = '#333';\n    ctx.stroke();\n    ctx.closePath();\n\n\n    ctx.beginPath();\n    ctx.moveTo(width, 0);\n    ctx.lineTo(rightX, topY);\n    ctx.strokeStyle = '#333';\n    ctx.stroke();\n    ctx.closePath();\n\n\n    ctx.beginPath();\n    ctx.moveTo(width, height);\n    ctx.lineTo(rightX, bottomY);\n    ctx.strokeStyle = '#333';\n    ctx.stroke();\n    ctx.closePath();\n\n    for(var i = 0; i < boids.length; i++){\n        MAX_SPEED = Vars[i].MAX_SPEED;\n\n        for(var j = 0; j < boids[i].length; j++){\n            var b = boids[i][j];\n            b.rad = (side / 400 * .8 + .2) * 3;\n\n\n\n            rule1(i, j);\n            rule2(i, j);\n            rule3(i, j);\n\n            /**\n            if(b.x < 0) b.x += width;\n            if(b.x > width) b.x -= width;\n\n            if(b.y < 0) b.y += height;\n            if(b.y > height) b.y -= height;*/\n\n\n            var speed = Math.sqrt(b.vx * b.vx + b.vy * b.vy);\n            if(speed >= MAX_SPEED) {\n                var r = MAX_SPEED / speed;\n                b.vx *= r;\n                b.vy *= r;\n            }\n\n            if(b.x < leftX && b.vx < 0 || b.x > rightX  && b.vx > 0) b.vx *= -.9\n            if(b.y < topY && b.vy < 0 || b.y > bottomY && b.vy > 0) b.vy *= -.9;\n\n            b.x += b.vx;\n            b.y += b.vy;\n\n            b.draw();\n\n\n\n\n        }\n\n    }\n\n\n\n    requestAnimationFrame(loop);\n}\n\nfunction rule1(index1, index2){\n    var c = {x: 0, y: 0};\n    var vel = Vars[index1].rule1;\n\n    var _boids = boids[index1];\n    for(var i = 0; i < _boids.length; i++){\n\n        if(i != index2){\n            c.x += _boids[i].x;\n            c.y += _boids[i].y;\n        }\n    }\n\n    c.x = c.x / (_boids.length-1);\n    c.y = c.y / (_boids.length-1);\n\n    _boids[index2].vx += (c.x - _boids[index2].x)/vel;\n    _boids[index2].vy += (c.y - _boids[index2].y)/vel;\n}\n\nfunction rule2(index1, index2){\n    var _boids = boids[index1];\n    BOID_SIDE = Vars[index1].BOID_SIDE;\n\n    for( var i = 0; i < _boids.length; i++){\n        var d = getDistance(_boids[i], _boids[index2]);\n\n        if(d < BOID_SIDE){\n            _boids[index2].vx -= _boids[i].x - _boids[index2].x;\n            _boids[index2].vy -= _boids[i].y - _boids[index2].y;\n        }\n    }\n}\n\nfunction rule3(index1, index2){\n    var pv = {x: 0, y: 0};\n    var _boids = boids[index1];\n    var vel = Vars[index1].rule3;\n\n    for(var i = 0; i < _boids.length; i++){\n        if(i != index2){\n            pv.x += _boids[i].vx;\n            pv.y += _boids[i].vy;\n        }\n    }\n\n    pv.x /= (_boids.length - 1);\n    pv.y /= (_boids.length - 1);\n\n    _boids[index2].vx += (pv.x - _boids[index2].vx) / vel;\n    _boids[index2].vy += (pv.y - _boids[index2].vy) / vel;\n}\n\nfunction getDistance(p1, p2){\n    var dx = p1.x - p2.x;\n    var dy = p1.y -p2.y;\n    return Math.sqrt(dx * dx + dy * dy);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/99-hobby/99-01-canvas-letter.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\n\n// ================\n\ninit();\nloop();\n\nfunction init(){\n\n    ctx.textBaseline=\"middle\";\n    ctx.font= 60 + \"px Arial\";\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    var txt=\"YO!\";\n    ctx.fillStyle = '#fff';\n    var textWidth = ctx.measureText(txt);\n    var textLeft = (width - textWidth.width)/2;\n    var textTop = height/2;\n\n\n    ctx.save();\n    ctx.translate(textLeft, textTop);\n    ctx.fillText(txt,0,0);\n    ctx.restore();\n\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/99-hobby/99-02-shader-example.js",
    "content": "// --------------------------\nvar scene, camera, renderer;\nvar vertexShaderString, fragmentShaderString;\nvar character = null;\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\n\n\n// ================\nvar tempCanvas, tempCtx;\n\ncreateCanvas();\ninit();\nloop();\n\nfunction createCanvas(){\n    tempCanvas = document.createElement(\"canvas\");\n    //canvas.width  = width;\n    //canvas.height = height;\n    tempCtx = tempCanvas.getContext(\"2d\");\n\n    // ----------------\n    /*\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n    var txt=\"YO!\";\n    ctx.fillStyle = '#fff';\n    var textWidth = ctx.measureText(txt);\n    var textLeft = (width - textWidth.width)/2;\n    var textTop = height/2;\n\n    ctx.save();\n    ctx.translate(textLeft, textTop);\n    ctx.fillText(txt,0,0);\n    ctx.restore();\n\n    */\n    // ----------------\n    tempCtx.font = \"Bold 40px Arial\";\n    tempCtx.fillStyle = \"rgba(255,0,0,0.95)\";\n    tempCtx.fillText('YO!', 0, 50);\n\n\n}\n\nvar texture1;\n\nfunction init(){\n    scene = new THREE.Scene();\n\n    var VIEW_ANGLE= 45;\n    var ASPECT = width / height;\n    var NEAR = 0.2;\n    var FAR = 1000;\n\n    camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);\n    scene.add(camera);\n    camera.position.set(0, 0, 5);\n    camera.lookAt(scene.position);\n\n    // ---------------\n\n    renderer = new THREE.WebGLRenderer({\n        canvas : canvas,\n        antialias : true,\n        alpha : true\n    });\n    //renderer.setSize(width, height);\n\n    var g = new THREE.PlaneGeometry(1.0, 1.0);\n    var creatureImage = THREE.ImageUtils.loadTexture(\"/image/texture.png\");\n\n    texture1 = new THREE.Texture(tempCanvas);\n    texture1.needsUpdate = true;\n\n    texture1.magFilter = THREE.NearestFilter;\n    creatureImage.magFilter = THREE.NearestFilter;\n\n    var mat = new THREE.ShaderMaterial({\n        uniforms : {\n            color : {type: 'f', value: 0.0},\n            evilCreature : {type: 't', value: texture1}\n        },\n        vertexShader : [\n            \"varying vec2 vUv;\",\n            \"void main(){\",\n            \"vUv = uv;\",\n            \"gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 );\",\n            \"}\"\n        ].join(\"\\n\"),\n        fragmentShader : [\n            \"precision highp float;\",\n            \"varying vec2 vUv;\",\n            \"uniform sampler2D evilCreature;\",\n            \"void main(void){\",\n            \"gl_FragColor = texture2D(evilCreature, vUv);\",\n            \"}\"\n        ].join(\"\\n\"),\n        transparent: true\n    });\n\n\n    character = new THREE.Mesh(g, mat);\n    scene.add(character);\n\n    // --------------------------\n\n    var light = new THREE.PointLight(0xffffff, 1.0);\n    light.position.set( 0.0, 0.0, 0.1 );\n    scene.add(light);\n\n}\n\nfunction loop(){\n    loopCanvas();\n\n\n    renderer.render( scene, camera );\n\n    requestAnimationFrame(loop);\n}\n\n\nfunction loopCanvas(){\n    tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);\n    tempCtx.font = \"Bold 40px Arial\";\n    tempCtx.fillStyle = \"rgba(255,0,0,0.95)\";\n    tempCtx.fillText('YO!', Math.random() * 2 - 1, 50 + Math.random() * 2 - 1);\n\n    texture1.needsUpdate = true;\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;"
  },
  {
    "path": "app/scripts/99-hobby/99-03-circle-drawing.js",
    "content": "/**\n * Created by kenji-special on 10/27/14.\n */\n// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar extraMarker = {\n    yPos : -1/2*window.innerHeight\n};\n\nvar animationCircle = {\n    start : - Math.PI ,\n    end   : - Math.PI\n};\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n\n// ================\n\nvar Flag = function(number, theta, rad){\n    this.setup(number, theta, rad);\n};\n\nFlag.prototype = {\n    isDraw     : false,\n\n    strokeCol  : '#a1a1a1',\n    fillCol    : '#999',\n\n    length     : 50,\n    flagHeight : 25,\n\n    setup : function(number, theta, rad){\n\n        this.number = number;\n\n        this.curTheta = -theta - Math.PI/2;\n\n        var xPos = rad * Math.cos(this.curTheta);\n        var yPos = rad * Math.sin(this.curTheta);\n\n        this.startXPos = this.endXPos = this.flagXPos = xPos;\n        this.startYPos = this.endYPos = this.flagYPos = yPos;\n\n        this.targetXPos = (rad + this.length) * Math.cos(this.curTheta);\n        this.targetYPos = (rad + this.length) * Math.sin(this.curTheta);\n\n        this.targetX1Pos = (rad + this.flagHeight) * Math.cos(this.curTheta);\n        this.targetY1Pos = (rad + this.flagHeight) * Math.sin(this.curTheta);\n\n        // ---------------------------------------------\n\n        this.target1XPos = (rad - 5)  * Math.cos(this.curTheta);\n        this.target1YPos = (rad - 5)  * Math.sin(this.curTheta);\n\n        this.flag1XPos = 40 * Math.cos(this.curTheta + Math.PI/2);\n        this.flag1YPos = 40 * Math.sin(this.curTheta + Math.PI/2);\n\n\n\n        this.flagsPos76\n\n    },\n\n    startAnimation : function(){\n        this.isDraw = true;\n\n        TweenLite.to( this, .3, {endXPos: this.targetXPos, endYPos: this.targetYPos, flagXPos: this.targetX1Pos, flagYPos: this.targetY1Pos, ease : 'Power2.easeOut' });\n    },\n\n    update : function(ctx){\n        if(!this.isDraw) return;\n\n        ctx.strokeStyle = this.strokeCol;\n        ctx.beginPath();\n        ctx.moveTo(this.startXPos, this.startYPos);\n        ctx.lineTo(this.endXPos, this.endYPos);\n        ctx.stroke();\n\n\n        ctx.beginPath();\n\n        ctx.fillStyle = this.fillCol;\n        ctx.beginPath();\n        ctx.moveTo(this.endXPos, this.endYPos);\n        ctx.lineTo(this.endXPos + this.flag1XPos, this.endYPos + this.flag1YPos);\n        ctx.lineTo(this.flagXPos + this.flag1XPos, this.flagYPos + this.flag1YPos);\n        ctx.lineTo( this.flagXPos,  this.flagYPos);\n        ctx.lineTo(this.endXPos, this.endYPos);\n        ctx.closePath();\n\n        ctx.fill();\n\n        ctx.save();\n        ctx.font=\"18px Open Sans\";\n        ctx.fillStyle = \"#fff\";\n        ctx.textAlign=\"center\";\n        ctx.textBaseline = 'middle';\n        ctx.translate( (this.endXPos + this.flagXPos + this.flag1XPos)/2, (this.endYPos + this.flagYPos + this.flag1YPos)/2);\n        ctx.rotate(this.curTheta + Math.PI/2);\n        ctx.fillText(this.number, 0, 0);\n        ctx.restore();\n\n        /*\n        ctx.beginPath();\n        ctx.moveTo(this.startXPos, this.startXPos);\n        ctx.lineTo(this.endXPos, this.endXPos);\n        ctx.stroke();\n\n        ctx.beginPath();\n        ctx.moveTo(this.startYPos, this.startYPos);\n        ctx.lineTo(this.endYPos, this.endYPos);\n        ctx.stroke();*/\n    }\n};\n\nvar sampleWorksNumber = 55;\n\nvar side = 20;\nvar outlineRad = 200;\nvar inlineRad = 190;\nvar flags = [];\n\n// ================\n\ninit();\nloop();\n\n\nfunction init(){\n    TweenLite.to( extraMarker, 1, { yPos : 0, ease : 'Bounce.easeOut', delay: 1});\n    TweenLite.to( animationCircle, 1, { start : 0, end : 2 * Math.PI, ease : 'Power2.easeOut', delay: 1});//, onComplete: circleAnimationDone });\n\n    for(var i = 0;i < sampleWorksNumber; i+= 10){\n        var theta = Math.PI * i / sampleWorksNumber * 2;\n        var flag = new Flag(i,theta, outlineRad );\n\n        flags.push(flag);\n    }\n\n    prevTime = +new Date;\n\n    _.delay(circleAnimationDone, 1500);\n}\n\nfunction circleAnimationDone(){\n\n    for(var i = 0; i < flags.length; i++){\n        flags[i].startAnimation();\n    }\n\n}\n\nfunction loop(){\n    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);\n\n    ctx.save();\n    ctx.translate(window.innerWidth/2, window.innerHeight/2);\n\n    var theta = 0 - Math.PI/2;\n\n    var theta1 = theta - Math.PI/6;\n    var theta2 = theta + Math.PI/6;\n\n    var pt1X = Math.cos(theta) * outlineRad;\n    var pt1Y = Math.sin(theta) * outlineRad;\n\n    var dx1 = side * Math.cos(theta1);\n    var dy1 = side * Math.sin(theta1);\n\n    var dx2 = side * Math.cos(theta2);\n    var dy2 = side * Math.sin(theta2);\n\n\n\n\n    ctx.beginPath();\n    ctx.strokeStyle = '#cccccc';\n    ctx.arc(0, 0, outlineRad, animationCircle.start, animationCircle.end);\n    ctx.stroke();\n    ctx.closePath();\n\n    ctx.beginPath();\n    ctx.fillStyle = '#cccccc';\n    ctx.arc(0, 0, inlineRad, animationCircle.start, animationCircle.end);\n    ctx.fill();\n    ctx.closePath();\n\n\n    // drawing the flag\n\n    for(var i = 0; i < flags.length; i++){\n        flags[i].update(ctx);\n    }\n\n    ctx.save();\n    ctx.translate(0, extraMarker.yPos);\n\n    ctx.beginPath();\n\n    ctx.moveTo(pt1X, pt1Y);\n    ctx.lineTo(pt1X + dx1, pt1Y + dy1);\n    ctx.lineTo(pt1X + dx2, pt1Y + dy2);\n    ctx.lineTo(pt1X, pt1Y);\n    ctx.closePath();\n    ctx.fillStyle = '#3d9ae8';\n    ctx.fill();\n\n    ctx.restore();\n\n    ctx.restore();\n\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/99-hobby/99-04-flag-animation.js",
    "content": "/**\n */\n// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width  = width;\ncanvas.height = height;\n\n// ================\n\n// ================\n\ninit();\nloop();\n\nfunction init(){\n\n    prevTime = +new Date;\n}\n\nfunction loop(){\n    var curTime = +new Date;\n    var duration = (curTime - prevTime)/1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(0, 0, width, height);\n\n\n    requestAnimationFrame(loop);\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/99-hobby/99-05-color-draw.js",
    "content": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canvas.getContext('2d');\nvar sCol = .8, bCol = .8;\nvar colorPaletteArr = [];\nvar isColorSelected;\nvar balls = [];\n\nvar NUM_BALLS = 130,\n    DAMPING = 0.3,\n    GRAVITY = 1,\n    MOUSE_SIZE = 50,\n    SPEED = 1;\nvar TWO_PI = Math.PI * 2;\nvar count = 0;\n\nvar colorCircle;\nvar rainbowBall;\nvar isSelectedColor = true;\nvar wall;\n\nwidth = window.innerWidth;\nheight = window.innerHeight;\n\ncanvas.width = width;\ncanvas.height = height;\n\n\n// ================\nvar Wall = function (left, right, top, bot) {\n    this.left = left;\n    this.right = right;\n    this.top = top;\n    this.bot = bot;\n};\n\nvar Ball = function (x, y, radius, col, wall, isRainbow) {\n\n    this.x = x;\n    this.y = y;\n\n    this.px = x;\n    this.py = y;\n\n    this.fx = 0;\n    this.fy = 0;\n\n    this.col = col;\n\n    this.radius = radius;\n    this.isRainbow = isRainbow;\n};\n\nBall.prototype.setCanvas = function (_canvas) {\n    this.canvas = _canvas;\n    this.isRainbow = true;\n}\n\nBall.prototype.apply_force = function (delta) {\n\n    delta *= delta;\n\n    this.fy += GRAVITY;\n\n    this.x += this.fx * delta;\n    this.y += this.fy * delta;\n\n    this.fx = this.fy = 0;\n};\n\nBall.prototype.verlet = function () {\n\n    var nx = (this.x * 2) - this.px;\n    var ny = (this.y * 2) - this.py;\n\n    this.px = this.x;\n    this.py = this.y;\n\n    this.x = nx;\n    this.y = ny;\n};\n\nBall.prototype.draw = function (ctx) {\n\n    if (this.isRainbow) {\n\n        ctx.save();\n        ctx.translate(this.x, this.y);\n        ctx.drawImage(this.canvas, -this.radius, -this.radius);\n        ctx.restore();\n\n    } else {\n        ctx.beginPath();\n        ctx.fillStyle = this.col;\n        ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);\n        ctx.fill();\n    }\n\n};\n\n\nvar resolve_collisions = function (ip) {\n\n    var i = balls.length;\n\n    while (i--) {\n\n        var ball_1 = balls[i];\n\n\n        var n = balls.length;\n\n        while (n--) {\n\n            if (n == i) continue;\n\n            var ball_2 = balls[n];\n\n            var diff_x = ball_1.x - ball_2.x;\n            var diff_y = ball_1.y - ball_2.y;\n\n            var length = diff_x * diff_x + diff_y * diff_y;\n            var dist = Math.sqrt(length);\n            var real_dist = dist - (ball_1.radius + ball_2.radius);\n\n            if (real_dist < 0) {\n\n                var vel_x1 = ball_1.x - ball_1.px;\n                var vel_y1 = ball_1.y - ball_1.py;\n                var vel_x2 = ball_2.x - ball_2.px;\n                var vel_y2 = ball_2.y - ball_2.py;\n\n                var depth_x = diff_x * (real_dist / dist);\n                var depth_y = diff_y * (real_dist / dist);\n\n                ball_1.x -= depth_x * 0.5;\n                ball_1.y -= depth_y * 0.5;\n\n                ball_2.x += depth_x * 0.5;\n                ball_2.y += depth_y * 0.5;\n\n                if (ip) {\n\n                    var pr1 = DAMPING * (diff_x * vel_x1 + diff_y * vel_y1) / length,\n                        pr2 = DAMPING * (diff_x * vel_x2 + diff_y * vel_y2) / length;\n\n                    vel_x1 += pr2 * diff_x - pr1 * diff_x;\n                    vel_x2 += pr1 * diff_x - pr2 * diff_x;\n\n                    vel_y1 += pr2 * diff_y - pr1 * diff_y;\n                    vel_y2 += pr1 * diff_y - pr2 * diff_y;\n\n                    ball_1.px = ball_1.x - vel_x1;\n                    ball_1.py = ball_1.y - vel_y1;\n\n                    ball_2.px = ball_2.x - vel_x2;\n                    ball_2.py = ball_2.y - vel_y2;\n                }\n            }\n        }\n    }\n};\n\nvar check_walls = function (wall) {\n\n    var i = balls.length;\n\n    while (i--) {\n\n        var ball = balls[i];\n\n        if (ball.x < wall.left + ball.radius) {\n\n            var vel_x = ball.px - ball.x;\n            ball.x = wall.left + ball.radius;\n            ball.px = ball.x - vel_x * DAMPING;\n\n        } else if (ball.x + ball.radius > wall.right) {\n\n            var vel_x = ball.px - ball.x;\n            ball.x = wall.right - ball.radius;\n            ball.px = ball.x - vel_x * DAMPING;\n        }\n\n        if (ball.y + ball.radius > wall.bot) {\n\n            var vel_y = ball.py - ball.y;\n            ball.y = wall.bot - ball.radius;\n            ball.py = ball.y - vel_y * DAMPING;\n        }\n    }\n};\n\n// ================\n\n\nfunction addBall() {\n\n    isColorSelected = false;\n\n    var xPos = width / 2;\n    var yPos = height / 2;\n    var rad = 105;\n    var col = \"#ffffff\";\n    rainbowBall = new Ball(xPos, yPos, rad, col, wall);\n    rainbowBall.setCanvas(colorCircle.rainbowCircle.canvas);\n    //balls.push(ball);\n\n\n    for (var xx = 0; xx < 3; xx++) {\n        var xPos = colorCircle.smallCircles[xx].x + width / 2;\n        var yPos = colorCircle.smallCircles[xx].y + height / 2;\n        var ball = new Ball(xPos, yPos, colorCircle.smallCircles[xx].rad, colorCircle.smallCircles[xx].col, wall);\n        balls.push(ball);\n    }\n\n\n    addOnlyBall();\n\n}\n\nfunction addOnlyBall() {\n\n    for (var num = 0; num < 20; num++) {\n        var xPos = width * (.1 + .8 * Math.random());\n        var yPos = -height * (.1 + .8 * Math.random());\n        var rad = 20 + 30 * Math.random();\n        var randomNum = Math.random() * 3 | 0;\n        var colorStr = colorPaletteArr[randomNum];\n        balls.push(new Ball(xPos, yPos, rad, colorStr, wall));\n    }\n\n}\n\n// ================\nvar SmallCircle = function () {\n    this.velTheta = .04;\n    this.theta = 0;\n\n    this.outsideRad = 100;\n    this.isAnimation = true;\n    this.rad = 10;\n};\n\nSmallCircle.prototype = {\n    update: function () {\n        if (this.isAnimation) this.theta += this.velTheta;\n        if (this.theta < 0) this.theta += Math.PI * 2;\n\n        this.x = this.outsideRad * Math.cos(this.theta);\n        this.y = this.outsideRad * Math.sin(this.theta);\n\n        var val = this.theta / (2 * Math.PI);\n        var color = HSVtoRGB(val, sCol, bCol);\n        this.col = \"rgb(\" + color.r + \", \" + color.g + \", \" + color.b + \")\";\n\n        ctx.save();\n        ctx.fillStyle = this.col;\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI);\n        ctx.fill();\n        ctx.closePath();\n        ctx.restore();\n    },\n\n    stop: function () {\n        this.isAnimation = false;\n    }\n};\n\nvar RainbowCircle = function () {\n    this.rad = 100;\n    this.canvas = document.createElement(\"canvas\");\n    this.canvas.width = 210;\n    this.canvas.height = 210;\n\n    this.ctx = this.canvas.getContext('2d');\n\n    this.ctx.save();\n    this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2);\n\n    var xPos, yPos, nextXPos, yPos;\n    for (var ii = 0; ii < 360; ii = ii + 3) {\n\n        var rate = ii / 360;\n        colorRGB = HSVtoRGB(rate, sCol, bCol);\n\n        colorString = \"rgb(\" + colorRGB.r + \", \" + colorRGB.g + \", \" + colorRGB.b + \")\";\n\n\n        xPos = this.rad * Math.cos(ii / 180 * Math.PI);\n        yPos = this.rad * Math.sin(ii / 180 * Math.PI);\n\n        nextXPos = this.rad * Math.cos((ii + 3) / 180 * Math.PI);\n        nextYPos = this.rad * Math.sin((ii + 3) / 180 * Math.PI);\n\n\n        this.ctx.strokeStyle = colorString;\n        this.ctx.beginPath();\n        this.ctx.moveTo(xPos, yPos);\n        this.ctx.lineTo(nextXPos, nextYPos);\n        this.ctx.stroke();\n    }\n\n    this.ctx.restore();\n};\n\nvar ColorCircle = function (x, y) {\n    this.x = x;\n    this.y = y;\n\n\n    this.rad = 100;\n\n    this.smallCircles = [];\n    var smallCircle = new SmallCircle();\n    this.smallCircles.push(smallCircle);\n\n    this.rainbowCircle = new RainbowCircle();\n};\n\nColorCircle.prototype = {\n    isCircle: true,\n\n    update: function () {\n        var colorRGB, xPos, yPos, nextXPos, nextYPos;\n        var colorString;\n\n        ctx.lineWidth = 2;\n\n        ctx.save();\n        ctx.translate(this.x, this.y);\n\n\n        //console.log(this.rainbowCircle.canvas);\n        ctx.drawImage(this.rainbowCircle.canvas, -this.rainbowCircle.canvas.width / 2, -this.rainbowCircle.canvas.height / 2);\n\n\n        ctx.save();\n        for (ii = 0; ii < this.smallCircles.length; ii++) {\n            this.smallCircles[ii].update()\n        }\n        ctx.restore();\n\n        ctx.restore();\n    },\n\n    addCircle: function () {\n        if (isSelectedColor) {\n            if (this.smallCircles.length < 2) {\n                this.smallCircles[this.smallCircles.length - 1].stop();\n                colorPaletteArr.push(this.smallCircles[this.smallCircles.length - 1].col);\n\n                var smallCircle = new SmallCircle();\n                smallCircle.theta = this.smallCircles[this.smallCircles.length - 1].theta;\n                this.smallCircles.push(smallCircle);\n\n                var smallCircle = new SmallCircle();\n                smallCircle.theta = this.smallCircles[this.smallCircles.length - 1].theta;\n                smallCircle.velTheta = -0.04;\n                this.smallCircles.push(smallCircle);\n\n            } else if (this.smallCircles.length == 3) {\n                this.smallCircles[this.smallCircles.length - 2].stop();\n                this.smallCircles[this.smallCircles.length - 1].stop();\n\n                colorPaletteArr.push(this.smallCircles[this.smallCircles.length - 2].col);\n                colorPaletteArr.push(this.smallCircles[this.smallCircles.length - 1].col);\n\n                addBall();\n\n                isSelectedColor = false;\n            }\n        } else {\n            addOnlyBall();\n        }\n    }\n};\n\n\n// ================\n\n\ninit();\nloop();\n\nfunction init() {\n    colorCircle = new ColorCircle(width / 2, height / 2);\n\n\n    prevTime = +new Date;\n\n    isColorSelected = true;\n\n    wall = new Wall(0, width, -height, height);\n}\n\nfunction loop() {\n    var curTime = +new Date;\n    var duration = (curTime - prevTime) / 1000;\n    prevTime = curTime;\n\n    ctx.fillStyle = '#000000';\n    ctx.fillRect(0, 0, width, height);\n\n    if (isColorSelected) colorCircle.update();\n    else                loopBall();\n\n    ctx.save();\n    var alpha = Math.random() * .1 + .3;\n    ctx.fillStyle = \"rgba(255, 255, 255, \"+ alpha +\")\";\n    ctx.font=\"22px 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',sans-serif\";\n    ctx.fillText(\"CLICK!\", width/2 - 35, height/2 +10);\n    ctx.restore();\n\n    requestAnimationFrame(loop);\n}\n\nfunction loopBall() {\n\n\n    var iter = 3;\n\n    var delta = SPEED / iter;\n\n    while (iter--) {\n\n        var i = balls.length;\n\n        while (i--) {\n\n            balls[i].apply_force(delta);\n            balls[i].verlet();\n        }\n\n        rainbowBall.apply_force(delta);\n        rainbowBall.verlet();\n\n\n        resolve_collisions();\n        check_walls(wall);\n\n        var i = balls.length;\n        while (i--) balls[i].verlet();\n\n        resolve_collisions(1);\n        check_walls(wall);\n\n    }\n\n    for (var i = 0; i < balls.length; i++) {\n        balls[i].draw(ctx);\n    }\n\n    rainbowBall.draw(ctx);\n\n\n}\n\ndocument.addEventListener(\"click\", function (ev) {\n    //alert(\"click\");\n    colorCircle.addCircle();\n});\n\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n"
  },
  {
    "path": "app/scripts/helpers/boilterplate.js",
    "content": "function backingScale(context) {\n    if ('devicePixelRatio' in window) {\n        if (window.devicePixelRatio > 1) {\n            return window.devicePixelRatio;\n        }\n    }\n    return 1;\n}\n\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\nvar width, height, previousTime;\nvar canvas = document.getElementById('c');\nvar ctx    = canvas.getContext('2d');\nvar scaleFactor = backingScale(ctx);\n\nwidth  = window.innerWidth * scaleFactor;\nheight = window.innerHeight * scaleFactor;\n\ncanvas.width  = width;\ncanvas.height = height;\n\ninit();\n\nloop();\n\nfunction init(){\n    previousTime = +new Date;\n    console.log(previousTime);\n}\n\n\nfunction loop(){\n\n\n    requestAnimationFrame(loop);\n}\n\n\nvar Rect = function(x, y, wid, hig){\n\n};\n\nRect.prototype = {\n    update : function(dt){\n\n    }\n};\n\n"
  },
  {
    "path": "app/scripts/helpers/colorConverter.js",
    "content": "function HSVtoRGB(h, s, v) {\n    var r, g, b, i, f, p, q, t;\n    if (h && s === undefined && v === undefined) {\n        s = h.s, v = h.v, h = h.h;\n    }\n    i = Math.floor(h * 6);\n    f = h * 6 - i;\n    p = v * (1 - s);\n    q = v * (1 - f * s);\n    t = v * (1 - (1 - f) * s);\n    switch (i % 6) {\n        case 0: r = v, g = t, b = p; break;\n        case 1: r = q, g = v, b = p; break;\n        case 2: r = p, g = v, b = t; break;\n        case 3: r = p, g = q, b = v; break;\n        case 4: r = t, g = p, b = v; break;\n        case 5: r = v, g = p, b = q; break;\n    }\n\n\n    return {\n        r: Math.floor(r * 255),\n        g: Math.floor(g * 255),\n        b: Math.floor(b * 255)\n    };\n}\n"
  },
  {
    "path": "app/scripts/helpers/keyEvents.js",
    "content": "/**\n * Created by kenji-special on 12/26/14.\n */\n\nvar cancelRequestAnimFrame = ( function() {\n    return window.cancelAnimationFrame          ||\n        window.webkitCancelRequestAnimationFrame    ||\n        window.mozCancelRequestAnimationFrame       ||\n        window.oCancelRequestAnimationFrame     ||\n        window.msCancelRequestAnimationFrame        ||\n        clearTimeout\n} )();\n\n\nvar requestAnimFrame = (function(){\n    return  window.requestAnimationFrame       ||\n        window.webkitRequestAnimationFrame ||\n        window.mozRequestAnimationFrame    ||\n        window.oRequestAnimationFrame      ||\n        window.msRequestAnimationFrame     ||\n        function(/* function */ callback, /* DOMElement */ element){\n            return window.setTimeout(callback, 1000 / 60);\n        };\n})();\n\nvar keyEvent = {};\n_.extend(keyEvent, Backbone.Events);\n\nvar KEY_NUMBER = {\n    ESC : 27\n};\n\nvar ESC_DOWN = \"ESCAPE_DOWN\";\n\nwindow.addEventListener(\"keydown\", function(event){\n    if(KEY_NUMBER.ESC == event.keyCode){\n        keyEvent.trigger(ESC_DOWN);\n    }\n}, false);\n"
  },
  {
    "path": "app/scripts/helpers/svg-parse.js",
    "content": "var l1pt0 = \"M138.1,106.8h-8.5l-2,6.2h-4.5l8.5-24.1h4.6l8.5,24.1h-4.5L138.1,106.8z\";\nvar l1pt1 = \"M133.9,93.1c0,0-0.5,2.4-1,3.7l-2.1,6.5h6.3l-2.1-6.5C134.5,95.5,133.9,93.1,133.9,93.1L133.9,93.1z\";\nvar l2pt0 = \"M151.2,88.9h7.8c2.6,0,3.8,0.2,4.9,0.7c2.4,1.1,3.9,3.4,3.9,6.6c0,2.9-1.5,5.6-4.1,6.6v0.1c0,0,0.3,0.3,0.8,1.2l5,9h-4.9l-4.8-9h-4.2v9h-4.4L151.2,88.9L151.2,88.9z\";\nvar l2pt1 = \"M159.5,100.2c2.3,0,3.8-1.4,3.8-3.8c0-2.3-1-3.7-4.4-3.7h-3.3v7.5L159.5,100.2L159.5,100.2z\";\nvar l3pt0 = \"M177,88.9h8.2c7.4,0,12.3,4.4,12.3,12c0,7.6-4.9,12.1-12.3,12.1H177V88.9z\";\nvar l3pt1 = \"M184.9,109.3c4.9,0,8-2.9,8-8.3c0-5.4-3.2-8.3-8-8.3h-3.6v16.6H184.9z\";\nvar l4    = \"M205.3,106.8c0,0,2.6,2.6,6,2.6c1.8,0,3.5-0.9,3.5-2.9c0-4.3-11.4-3.6-11.4-11c0-4,3.5-7,8.1-7c4.8,0,7.2,2.6,7.2,2.6l-1.9,3.6c0,0-2.3-2.1-5.3-2.1c-2,0-3.6,1.2-3.6,2.9c0,4.3,11.4,3.2,11.4,11c0,3.8-2.9,7.1-8,7.1c-5.4,0-8.3-3.3-8.3-3.3L205.3,106.8z\";\nvar l5    = \"M88.7,88.9l-4,16.7c-0.3,1.4-0.4,2.5-0.4,2.5h-0.1c0,0-0.1-1.2-0.4-2.5l-4.3-16.7h-3.8l-4.4,16.7c-0.4,1.4-0.4,2.5-0.4,2.5h-0.1c0,0-0.1-1.2-0.4-2.5l-2.8-12.5l-2.1,9.1l2.7,10.8h5.1l3.7-14.3c0.4-1.6,0.6-3.2,0.6-3.2h0.1c0,0,0.2,1.6,0.6,3.2l3.7,14.3H87l6.2-24.1L88.7,88.9L88.7,88.9z\";\nvar l6    = \"M115.9,88.9l-4,16.7c-0.3,1.4-0.4,2.5-0.4,2.5h-0.1c0,0-0.1-1.2-0.4-2.5l-4.3-16.7h-3.8l-4.4,16.7c-0.4,1.4-0.4,2.5-0.4,2.5H98c0,0-0.1-1.2-0.4-2.5L94.8,93l-2.1,9.1l2.7,10.9h5.1l3.7-14.3c0.4-1.6,0.6-3.2,0.6-3.2h0.1c0,0,0.2,1.6,0.6,3.2l3.7,14.3h5.1l6.2-24.1H115.9L115.9,88.9z\";\nvar l7    = \"M26,106.8h-8.5l-2,6.2H11l8.5-24.1h4.6l8.5,24.1h-4.5L26,106.8z M21.8,93.1c0,0-0.5,2.4-1,3.7l-2.1,6.5h6.3l-2.1-6.5C22.4,95.5,21.8,93.1,21.8,93.1L21.8,93.1z\";\nvar l8    = \"M56.5,105.6c0.4,1.4,0.4,2.5,0.4,2.5H57c0,0,0.1-1.2,0.4-2.5l4-16.7h4.5L59.7,113h-5.1l-3.7-14.3c-0.4-1.6-0.6-3.2-0.6-3.2h-0.1c0,0-0.2,1.6-0.6,3.2L45.9,113h-5.1l-6-24.1h4.5l3.8,16.7c0.3,1.4,0.4,2.5,0.4,2.5h0.1c0,0,0.1-1.2,0.4-2.5l4.4-16.7h3.8L56.5,105.6z\";\n\n\nvar left = 11;\nvar top  = 88;\nvar width = 215;\nvar height = 26;\n\nfunction parsePathData(pathData)\n{\n    var tokenizer = /([a-z]+)|([+-]?(?:\\d+\\.?\\d*|\\.\\d+))/gi,\n        match,\n        current,\n        commands = [];\n\n    tokenizer.lastIndex = 0;\n    while (match = tokenizer.exec(pathData))\n    {\n        if (match[1])\n        {\n            if (current) commands.push(current);\n            current = [ match[1] ];\n        }\n        else\n        {\n            if (!current) current = [];\n            current.push(match[2]);\n        }\n    }\n    if (current) commands.push(current);\n    return commands;\n}\n\n//var pathData = \"M78.1,10v69.1h0.5L113.4,10h49.9l-45.4,78.7L168.8,190h-53.4l-27.5-62.8l-9.8,15.1V190H31.2V10H78.1z\";\n//var pathData = \"M152.2,10v38.3H92.4v30.8h56v36.8h-56v35.8h62V190H45.5V10H152.2z\";\n//var pathData =   \"M88.9,10l30.3,110.9h0.5V10h43.9v180h-51.4L80.8,78.8h-0.5V190H36.5V10H88.9z\";\n//var pathData = \"M155.9,131.9c0,21.4-4.9,36.4-14.6,45.1c-9.8,8.7-24.2,13-43.2,13c-19.4,0-33.2-4.8-41.5-14.4c-8.3-9.6-12.4-23.7-12.4-42.2v-3.7h41.7v8.7c0,8.4,1.1,14.1,3.4,16.9c2.2,2.8,5.1,4.2,8.6,4.2c3.5,0,6.3-1.4,8.6-4.2c2.2-2.8,3.4-8.4,3.4-16.9V10h46.2V131.9z\";\n//var pathData = \"M123.4,10v180H76.6V10H123.4z\";\n\nvar commands = parsePathData(l8);\n\nvar wid = 215;\nvar hig = 26;\n\n\nvar pts = [];\nvar pt;\nvar prevPt;\nfor(var i = 0; i < commands.length; i++){\n    console.log( commands[i]);\n\n    var text = commands[i][0];\n    if(pts.length) prevPt = pts[pts.length - 1];\n\n    if(/[a-z]/g.test(text)){\n\n\n\n        if(/[v]/.test(text)){\n            console.log(prevPt)\n            var pt = {x: prevPt.x, y : Number(commands[i][1]) + prevPt.y};\n            pts.push(pt);\n        }\n\n        if(/[h]/g.test(text)){\n            var pt = {x: Number(commands[i][1]) + prevPt.x, y : prevPt.y};\n            pts.push(pt);\n        }\n\n        if(/[l]/g.test(text)){\n            var pt = {x: Number(commands[i][1]) + prevPt.x, y : Number(commands[i][2]) +prevPt.y };\n            pts.push(pt);\n        }\n\n        if(/[c]/g.test(text)){\n            var pt = {x: Number(commands[i][5]) + prevPt.x, y : Number(commands[i][6]) +prevPt.y, c1X: Number(commands[i][1]) + prevPt.x, c1Y: Number(commands[i][2]) + prevPt.y, c2X: Number(commands[i][3]) + prevPt.x, c2Y: Number(commands[i][4]) + prevPt.y};\n            pts.push(pt);\n        }\n\n        if(/[s]/g.test(text)){\n            var pt = {x: Number(commands[i][3]) + prevPt.x, y : Number(commands[i][4]) +prevPt.y, c1X: Number(commands[i][1]) + prevPt.x, c1Y: Number(commands[i][2]) + prevPt.y};\n            pts.push(pt);\n        }\n\n    }else{\n\n        if( /[M]/g.test(text) ){\n            pt = {x: Number(commands[i][1]), y: Number(commands[i][2])};\n            pts.push(pt);\n        }\n\n        if(/[V]/.test(text)){\n            var pt = {x: prevPt.x , y : Number(commands[i][1]) };\n            pts.push(pt);\n        }\n\n        if(/[H]/g.test(text)){\n            var pt = {x: Number(commands[i][1]), y : prevPt.y};\n            pts.push(pt);\n        }\n\n        if(/[L]/g.test(text)){\n            var pt = {x: Number(commands[i][1]), y : Number(commands[i][2])};\n            pts.push(pt);\n        }\n\n        if(/[S]/g.test(text)){\n            //var pt = {x: Number(commands[i][1]) + prevPt.x, y : Number(commands[i][2]) +prevPt.y };\n            //pts.push(pt);\n            var pt = {x: Number(commands[i][3]), y : Number(commands[i][4]), c1X: Number(commands[i][1]), c1Y: Number(commands[i][2])};\n            pts.push(pt);\n\n        }\n\n        if(/[C]/g.test(text)){\n            //var pt = {x: Number(commands[i][1]) + prevPt.x, y : Number(commands[i][2]) +prevPt.y };\n            //pts.push(pt);\n            var pt = {x: Number(commands[i][5]), y : Number(commands[i][6]), c1X: Number(commands[i][1]), c1Y: Number(commands[i][2]), c2X: Number(commands[i][3]), c2Y: Number(commands[i][4])};\n            pts.push(pt);\n\n        }\n    }\n}\n\nObject.size = function(obj) {\n    var size = 0, key;\n    for (key in obj) {\n        if (obj.hasOwnProperty(key)) size++;\n    }\n    return size;\n};\n\n\nvar str = \"l\" + kk;\nstr += \"=[ \";\nconsole.log(str);\n\nfor(var i = 0; i < pts.length; i++){\n\n    var number = Object.size(pts[i]);\n    var   curStr;\n\n    if(number == 2){\n        curStr = \"[\" + pts[i].x / 200 + \", \" + pts[i].y / 40 + \"]\";\n    }\n\n    if(number == 6){\n        curStr = \"[\" + pts[i].c1X/200 + \", \" + pts[i].c1Y/40 + \", \" + pts[i].c2X/200 + \", \" + pts[i].c2Y/40 + \",\" +  pts[i].x / 200 + \", \" + pts[i].y / 40  +\"]\";\n    }\n\n    if(number == 4){\n        curStr = \"[\" + pts[i].c1X/200 + \", \" + pts[i].c1Y/40 + \",\" +  pts[i].x / 200 + \", \" + pts[i].y / 40  +\"]\";\n    }\n\n\n    if(i != pts.length - 1) str += curStr + \", \";\n    else                    str += curStr;\n\n}\n\nstr += \" ];\";"
  },
  {
    "path": "app/scripts/main.js",
    "content": "(function(scope) {\n\n    var app = scope.app || {};\n\n    var Rect = app.Rect = function(ctx, x, y){\n        this.ctx = ctx;\n        this.col = '#fff';\n        this.x = x;\n        this.y = y;\n\n        this.side = 30;\n    };\n\n    Rect.prototype = {\n        update : function(){\n\n        }\n    };\n\n\n})(window.__scope__ || window);\n"
  },
  {
    "path": "app/scripts/ref/camera.js",
    "content": "sw = 1000;\nsh = 1000;\nvar dtr = function(v) {return v * Math.PI/180;}\nvar camera = {\n    focus : 700,\n    self : {\n        x : 0,\n        y : 0,\n        z : 0\n    },\n    rotate : {\n        x : 0,\n        y : 0,\n        z : 0\n    },\n    up : {\n        x : 0,\n        y : 1,\n        z : 0\n    },\n    zoom : 1,\n    display : {\n        x : 700/2,\n        y : 700/2,\n        z : 0\n    }\n};\nvar affine = {\n    world : {\n        size : function(p, size) {\n            return {\n                x :\tp.x * size.x,\n                y : p.y * size.y,\n                z : p.z * size.z\n            }\n        },\n        rotate: {\n            x : function(p, rotate) {\n                return {\n                    x : p.x,\n                    y : p.y*Math.cos(dtr(rotate.x)) - p.z*Math.sin(dtr(rotate.x)),\n                    z : p.y*Math.sin(dtr(rotate.x)) + p.z*Math.cos(dtr(rotate.x))\n                }\n            },\n            y : function(p, rotate) {\n                return {\n                    x : p.x*Math.cos(dtr(rotate.y)) + p.z*Math.sin(dtr(rotate.y)),\n                    y : p.y,\n                    z : -p.x*Math.sin(dtr(rotate.y)) + p.z*Math.cos(dtr(rotate.y))\n                }\n            },\n            z : function(p, rotate) {\n                return {\n                    x : p.x*Math.cos(dtr(rotate.z)) - p.y*Math.sin(dtr(rotate.z)),\n                    y : p.x*Math.sin(dtr(rotate.z)) + p.y*Math.cos(dtr(rotate.z)),\n                    z : p.z\n                }\n            }\n        },\n        position : function(p, position) {\n            return {\n                x : p.x + position.x,\n                y : p.y + position.y,\n                z : p.z + position.z\n            }\n        },\n    },\n    view : {\n        point : function(p) {\n            return {\n                x : p.x - camera.self.x,\n                y : p.y - camera.self.y,\n                z : p.z - camera.self.z\n            }\n        },\n        x : function(p) {\n            return {\n                x : p.x,\n                y : p.y*Math.cos(dtr(camera.rotate.x)) - p.z*Math.sin(dtr(camera.rotate.x)),\n                z : p.y*Math.sin(dtr(camera.rotate.x)) + p.z*Math.cos(dtr(camera.rotate.x))\n            }\n        },\n        y : function(p) {\n            return {\n                x : p.x*Math.cos(dtr(camera.rotate.y)) + p.z*Math.sin(dtr(camera.rotate.y)),\n                y : p.y,\n                z : -p.x*Math.sin(dtr(camera.rotate.y)) + p.z*Math.cos(dtr(camera.rotate.y))\n            }\n        },\n        zReversal : function(p) {\n            return {\n                x : p.x,\n                y : p.y,\n                z : -p.z\n            }\n        }\n    },\n    perspective : function(p) {\n        return {\n            x : p.x * ((camera.focus-camera.self.z) / ((camera.focus-camera.self.z) - p.z)) * camera.zoom,\n            y : p.y * ((camera.focus-camera.self.z) / ((camera.focus-camera.self.z) - p.z)) * camera.zoom,\n            z : p.z * ((camera.focus-camera.self.z) / ((camera.focus-camera.self.z) - p.z)) * camera.zoom,\n            p : ((camera.focus) / ((camera.focus) - p.z)) * camera.zoom\n        }\n    },\n    display : function(p, display) {\n        return {\n            x : p.x + display.x,\n            y : p.y + display.y,\n            z : p.z + display.z,\n            p : p.p\n        }\n    },\n    process : function(model, size, rotate, position) {\n        var ret = affine.world.size(model, size);\n        ret = affine.world.rotate.x(ret, rotate);\n        ret = affine.world.rotate.y(ret, rotate);\n        ret = affine.world.rotate.z(ret, rotate);\n        ret = affine.world.position(ret, position);\n        ret = affine.view.point(ret);\n        ret = affine.view.x(ret);\n        ret = affine.view.y(ret);\n        ret = affine.view.zReversal(ret);\n        ret = affine.perspective(ret);\n        ret = affine.display(ret, camera.display);\n        return ret;\n    }\n}\n"
  },
  {
    "path": "app/styles/main.scss",
    "content": "// bower:scss\n// endbower\n\n@import \"compass/reset\";\n@import \"compass/css3\";\n\nbody{\n  background: url(\"../image/pt4.png\");\n}\n\ncanvas{\n  width: 100%;\n  height: 100%;\n}\n\n$containerWidth: 30px;\n$containerHeight: 30px;\n$playStep: $containerHeight / 16;\n\n\n#container {\n  position: absolute;\n  bottom: 30px;\n  left:  30px;\n  width: $containerWidth;\n  height: $containerHeight;\n  text-align: center;\n}\n\n#play, #stop {\n  margin-top: 15px;\n  font-size: 24px;\n  transition: text-shadow 0.2s ease;\n  cursor: pointer;\n\n}\n\n#play {\n\n  display: inline-block;\n}\n\n#button, #stop {\n  display: none;\n}\n\n#button:checked ~ {\n\n  #play {\n    display: none;\n  }\n\n  #stop {\n    display: inline-block;\n  }\n\n  #icon {\n\n    .icon-column {\n\n      .column-inner {\n        animation-play-state: paused;\n      }\n    }\n  }\n}\n\n"
  },
  {
    "path": "app/three-js-shader-sample.html",
    "content": "<!doctype html>\n<!--[if lt IE 7]>\n<html class=\"no-js lt-ie9 lt-ie8 lt-ie7\"> <![endif]-->\n<!--[if IE 7]>\n<html class=\"no-js lt-ie9 lt-ie8\"> <![endif]-->\n<!--[if IE 8]>\n<html class=\"no-js lt-ie9\"> <![endif]-->\n<!--[if gt IE 8]><!-->\n<html class=\"no-js\"> <!--<![endif]-->\n<head>\n    <meta charset=\"utf-8\">\n    <title>201405</title>\n    <meta name=\"description\" content=\"\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <link rel=\"shortcut icon\" href=\"/favicon.ico\">\n    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->\n    <!-- build:css styles/vendor.css -->\n    <!-- bower:css -->\n    <!-- endbower -->\n    <!-- endbuild -->\n    <!-- build:css(.tmp) styles/main.css -->\n    <link rel=\"stylesheet\" href=\"styles/main.css\">\n    <link rel=\"stylesheet\" href=\"//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css\"/>\n    <!-- endbuild -->\n    <!-- build:js scripts/vendor/modernizr.js -->\n    <script src=\"bower_components/modernizr/modernizr.js\"></script>\n    <!-- endbuild -->\n\n    <script id=\"vertexShader\" type=\"x-shader/x-vertex\">\n            varying vec2 vUv;\n\n\t\t\tvoid main()\t{\n\t\t\t    vUv = uv;\n\n\t\t\t\tgl_Position = vec4( position, 1.0 );\n\n\t\t\t}\n\n\t\t</script>\n\n    <script id=\"fragmentShader\" type=\"x-shader/x-fragment\">\n            varying vec2 vUv;\n\t\t\tuniform vec2 resolution;\n\t\t\tuniform float time;\n\t\t\tuniform sampler2D canvasSource;\n\n\t\t\tvoid main()\t{\n\n                vec2 sp = gl_FragCoord.xy / resolution.xy - vec2(0.5, 0.5);\n\n                float col = texture2D(canvasSource, vUv).r;\n                //vec2 sp = vec2(texture2D(canvasSource, gl_FragCoord).r, texture2D(canvasSource, gl_FragCoord).g);\n                vec2 p = (0.8 * 0.8 *sp) * 6.0 - vec2(0.0);\n                vec2 i = p;\n                float c = 1.0;\n\n                float inten = 1.1;\n\n                for(int n = 0; n < 18; n++){\n                    float t = time * (1.0 - (3.0 / float(n + 7)));\n                    i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x));\n\t\t            c += 12.0/length(vec2(p.x / (sin(i.x+t)/inten),p.y / (cos(i.y+t)/inten)));\n                }\n\n                c /= float(40);\n                c = 1.1 - sqrt(c);\n\n\n                gl_FragColor = vec4(vec3(c*c*col) , 1.0) * vec4(0.0, 0.3, 1.0, 1.0);\n\t\t\t}\n\n\t\t</script>\n\n</head>\n\n<body>\n<!--\n    <div id=\"container\">\n        <input id=\"button\" type=\"checkbox\">\n        <label id=\"play\" for=\"button\" class=\"glyphicon glyphicon-volume-up\"></label>\n        <label id=\"stop\" for=\"button\" class=\"glyphicon glyphicon-volume-off\"></label>\n    </div>\n-->\n\n<!--<div id=\"container\"></div>-->\n<canvas id=\"c\"></canvas>\n\n\n<!-- build:js scripts/vendor.js -->\n<!-- bower:js -->\n<script src=\"bower_components/stats.js/build/stats.min.js\"></script>\n<script src=\"bower_components/jquery/dist/jquery.js\"></script>\n<script src=\"bower_components/TweenJS/lib/tweenjs-0.5.1.combined.js\"></script>\n<script src=\"bower_components/greensock/src/uncompressed/TweenMax.js\"></script>\n<script src=\"bower_components/underscore/underscore.js\"></script>\n<script src=\"bower_components/howler.js/howler.js\"></script>\n<script src=\"bower_components/threejs/build/three.min.js\"></script>\n<!--<script src=\"bower_components/angular/angular.js\"></script>-->\n<!-- endbower -->\n<!-- endbuild -->\n\n<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->\n<!--<script>-->\n<!--(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=-->\n<!--function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;-->\n<!--e=o.createElement(i);r=o.getElementsByTagName(i)[0];-->\n<!--e.src='//www.google-analytics.com/analytics.js';-->\n<!--r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));-->\n<!--ga('create','UA-XXXXX-X');ga('send','pageview');-->\n<!--</script>-->\n\n<!-- build:js({app,.tmp}) scripts/main.js -->\n<!--<script src=\"scripts/4-webgl/43-three-js-example.js\"></script>-->\n<!--<script src=\"scripts/4-webgl/2-test-three-js-example.js\"></script>-->\n<script src=\"scripts/4-webgl/50-three-js-with-shader.js\"></script>\n<!-- endbuild -->\n</body>\n</html>\n"
  },
  {
    "path": "bower.json",
    "content": "{\n  \"name\": \"201405\",\n  \"private\": true,\n  \"dependencies\": {\n    \"modernizr\": \"~2.6.2\",\n    \"jquery\": \"~1.11.0\",\n    \"TweenJS\": \"*\",\n    \"greensock\": \"~1.11.7\",\n    \"underscore\": \"~1.6.0\",\n    \"howler.js\": \"~1.1.25\",\n    \"threejs\": \"*\",\n    \"angular\": \"~1.2.25\",\n    \"stats.js\": \"*\",\n    \"dat-gui\": \"~0.5.0\",\n    \"backbone\": \"~1.1.2\"\n  },\n  \"devDependencies\": {}\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"201405\",\n  \"version\": \"0.0.0\",\n  \"dependencies\": {},\n  \"devDependencies\": {\n    \"grunt\": \"~0.4.1\",\n    \"grunt-contrib-copy\": \"~0.4.1\",\n    \"grunt-contrib-concat\": \"~0.3.0\",\n    \"grunt-contrib-uglify\": \"~0.2.0\",\n    \"grunt-contrib-compass\": \"~0.7.0\",\n    \"grunt-contrib-jshint\": \"~0.7.0\",\n    \"grunt-contrib-cssmin\": \"~0.7.0\",\n    \"grunt-contrib-connect\": \"~0.5.0\",\n    \"grunt-contrib-clean\": \"~0.5.0\",\n    \"grunt-contrib-htmlmin\": \"~0.1.3\",\n    \"grunt-bower-install\": \"~1.0.0\",\n    \"grunt-contrib-imagemin\": \"~0.5.0\",\n    \"grunt-contrib-watch\": \"~0.5.2\",\n    \"grunt-rev\": \"~0.1.0\",\n    \"grunt-autoprefixer\": \"~0.5.0\",\n    \"grunt-usemin\": \"~2.0.0\",\n    \"grunt-mocha\": \"~0.4.0\",\n    \"grunt-modernizr\": \"~0.4.0\",\n    \"grunt-newer\": \"~0.6.0\",\n    \"grunt-svgmin\": \"~0.2.0\",\n    \"grunt-concurrent\": \"~0.4.0\",\n    \"load-grunt-tasks\": \"~0.2.0\",\n    \"time-grunt\": \"~0.2.0\",\n    \"jshint-stylish\": \"~0.1.3\"\n  },\n  \"engines\": {\n    \"node\": \">=0.8.0\"\n  }\n}\n"
  },
  {
    "path": "test/index.html",
    "content": "<!doctype html>\n<head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n    <title>Mocha Spec Runner</title>\n    <link rel=\"stylesheet\" href=\"lib/mocha/mocha.css\">\n</head>\n<body>\n    <div id=\"mocha\"></div>\n    <script src=\"lib/mocha/mocha.js\"></script>\n    <script>mocha.setup('bdd')</script>\n    <!-- assertion framework -->\n    <script src=\"lib/chai.js\"></script>\n    <script>var expect = chai.expect</script>\n\n    <!-- include source files here... -->\n\n    <!-- include spec files here... -->\n    <script src=\"spec/test.js\"></script>\n\n    <script>mocha.run()</script>\n</body>\n</html>\n"
  },
  {
    "path": "test/lib/chai.js",
    "content": "!function (name, context, definition) {\n  if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {\n    module.exports = definition();\n  } else if (typeof define === 'function' && typeof define.amd  === 'object') {\n    define(function () {\n      return definition();\n    });\n  } else {\n    context[name] = definition();\n  }\n}('chai', this, function () {\n\n  function require(p) {\n    var path = require.resolve(p)\n      , mod = require.modules[path];\n    if (!mod) throw new Error('failed to require \"' + p + '\"');\n    if (!mod.exports) {\n      mod.exports = {};\n      mod.call(mod.exports, mod, mod.exports, require.relative(path));\n    }\n    return mod.exports;\n  }\n\n  require.modules = {};\n\n  require.resolve = function (path) {\n    var orig = path\n      , reg = path + '.js'\n      , index = path + '/index.js';\n    return require.modules[reg] && reg\n      || require.modules[index] && index\n      || orig;\n  };\n\n  require.register = function (path, fn) {\n    require.modules[path] = fn;\n  };\n\n  require.relative = function (parent) {\n    return function(p){\n      if ('.' != p.charAt(0)) return require(p);\n\n      var path = parent.split('/')\n        , segs = p.split('/');\n      path.pop();\n\n      for (var i = 0; i < segs.length; i++) {\n        var seg = segs[i];\n        if ('..' == seg) path.pop();\n        else if ('.' != seg) path.push(seg);\n      }\n\n      return require(path.join('/'));\n    };\n  };\n\n  require.alias = function (from, to) {\n    var fn = require.modules[from];\n    require.modules[to] = fn;\n  };\n\n\n  require.register(\"chai.js\", function(module, exports, require){\n    /*!\n     * chai\n     * Copyright(c) 2011-2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    var used = []\n      , exports = module.exports = {};\n\n    /*!\n     * Chai version\n     */\n\n    exports.version = '1.4.2';\n\n    /*!\n     * Primary `Assertion` prototype\n     */\n\n    exports.Assertion = require('./chai/assertion');\n\n    /*!\n     * Assertion Error\n     */\n\n    exports.AssertionError = require('./chai/error');\n\n    /*!\n     * Utils for plugins (not exported)\n     */\n\n    var util = require('./chai/utils');\n\n    /**\n     * # .use(function)\n     *\n     * Provides a way to extend the internals of Chai\n     *\n     * @param {Function}\n     * @returns {this} for chaining\n     * @api public\n     */\n\n    exports.use = function (fn) {\n      if (!~used.indexOf(fn)) {\n        fn(this, util);\n        used.push(fn);\n      }\n\n      return this;\n    };\n\n    /*!\n     * Core Assertions\n     */\n\n    var core = require('./chai/core/assertions');\n    exports.use(core);\n\n    /*!\n     * Expect interface\n     */\n\n    var expect = require('./chai/interface/expect');\n    exports.use(expect);\n\n    /*!\n     * Should interface\n     */\n\n    var should = require('./chai/interface/should');\n    exports.use(should);\n\n    /*!\n     * Assert interface\n     */\n\n    var assert = require('./chai/interface/assert');\n    exports.use(assert);\n\n  }); // module: chai.js\n\n  require.register(\"chai/assertion.js\", function(module, exports, require){\n    /*!\n     * chai\n     * http://chaijs.com\n     * Copyright(c) 2011-2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /*!\n     * Module dependencies.\n     */\n\n    var AssertionError = require('./error')\n      , util = require('./utils')\n      , flag = util.flag;\n\n    /*!\n     * Module export.\n     */\n\n    module.exports = Assertion;\n\n\n    /*!\n     * Assertion Constructor\n     *\n     * Creates object for chaining.\n     *\n     * @api private\n     */\n\n    function Assertion (obj, msg, stack) {\n      flag(this, 'ssfi', stack || arguments.callee);\n      flag(this, 'object', obj);\n      flag(this, 'message', msg);\n    }\n\n    /*!\n      * ### Assertion.includeStack\n      *\n      * User configurable property, influences whether stack trace\n      * is included in Assertion error message. Default of false\n      * suppresses stack trace in the error message\n      *\n      *     Assertion.includeStack = true;  // enable stack on error\n      *\n      * @api public\n      */\n\n    Assertion.includeStack = false;\n\n    Assertion.addProperty = function (name, fn) {\n      util.addProperty(this.prototype, name, fn);\n    };\n\n    Assertion.addMethod = function (name, fn) {\n      util.addMethod(this.prototype, name, fn);\n    };\n\n    Assertion.addChainableMethod = function (name, fn, chainingBehavior) {\n      util.addChainableMethod(this.prototype, name, fn, chainingBehavior);\n    };\n\n    Assertion.overwriteProperty = function (name, fn) {\n      util.overwriteProperty(this.prototype, name, fn);\n    };\n\n    Assertion.overwriteMethod = function (name, fn) {\n      util.overwriteMethod(this.prototype, name, fn);\n    };\n\n    /*!\n     * ### .assert(expression, message, negateMessage, expected, actual)\n     *\n     * Executes an expression and check expectations. Throws AssertionError for reporting if test doesn't pass.\n     *\n     * @name assert\n     * @param {Philosophical} expression to be tested\n     * @param {String} message to display if fails\n     * @param {String} negatedMessage to display if negated expression fails\n     * @param {Mixed} expected value (remember to check for negation)\n     * @param {Mixed} actual (optional) will default to `this.obj`\n     * @api private\n     */\n\n    Assertion.prototype.assert = function (expr, msg, negateMsg, expected, _actual, showDiff) {\n      var ok = util.test(this, arguments);\n      if (true !== showDiff) showDiff = false;\n\n      if (!ok) {\n        var msg = util.getMessage(this, arguments)\n          , actual = util.getActual(this, arguments);\n        throw new AssertionError({\n            message: msg\n          , actual: actual\n          , expected: expected\n          , stackStartFunction: (Assertion.includeStack) ? this.assert : flag(this, 'ssfi')\n          , showDiff: showDiff\n        });\n      }\n    };\n\n    /*!\n     * ### ._obj\n     *\n     * Quick reference to stored `actual` value for plugin developers.\n     *\n     * @api private\n     */\n\n    Object.defineProperty(Assertion.prototype, '_obj',\n      { get: function () {\n          return flag(this, 'object');\n        }\n      , set: function (val) {\n          flag(this, 'object', val);\n        }\n    });\n\n  }); // module: chai/assertion.js\n\n  require.register(\"chai/core/assertions.js\", function(module, exports, require){\n    /*!\n     * chai\n     * http://chaijs.com\n     * Copyright(c) 2011-2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    module.exports = function (chai, _) {\n      var Assertion = chai.Assertion\n        , toString = Object.prototype.toString\n        , flag = _.flag;\n\n      /**\n       * ### Language Chains\n       *\n       * The following are provide as chainable getters to\n       * improve the readability of your assertions. They\n       * do not provide an testing capability unless they\n       * have been overwritten by a plugin.\n       *\n       * **Chains**\n       *\n       * - to\n       * - be\n       * - been\n       * - is\n       * - that\n       * - and\n       * - have\n       * - with\n       * - at\n       * - of\n       *\n       * @name language chains\n       * @api public\n       */\n\n      [ 'to', 'be', 'been'\n      , 'is', 'and', 'have'\n      , 'with', 'that', 'at'\n      , 'of' ].forEach(function (chain) {\n        Assertion.addProperty(chain, function () {\n          return this;\n        });\n      });\n\n      /**\n       * ### .not\n       *\n       * Negates any of assertions following in the chain.\n       *\n       *     expect(foo).to.not.equal('bar');\n       *     expect(goodFn).to.not.throw(Error);\n       *     expect({ foo: 'baz' }).to.have.property('foo')\n       *       .and.not.equal('bar');\n       *\n       * @name not\n       * @api public\n       */\n\n      Assertion.addProperty('not', function () {\n        flag(this, 'negate', true);\n      });\n\n      /**\n       * ### .deep\n       *\n       * Sets the `deep` flag, later used by the `equal` and\n       * `property` assertions.\n       *\n       *     expect(foo).to.deep.equal({ bar: 'baz' });\n       *     expect({ foo: { bar: { baz: 'quux' } } })\n       *       .to.have.deep.property('foo.bar.baz', 'quux');\n       *\n       * @name deep\n       * @api public\n       */\n\n      Assertion.addProperty('deep', function () {\n        flag(this, 'deep', true);\n      });\n\n      /**\n       * ### .a(type)\n       *\n       * The `a` and `an` assertions are aliases that can be\n       * used either as language chains or to assert a value's\n       * type (as revealed by `Object.prototype.toString`).\n       *\n       *     // typeof\n       *     expect('test').to.be.a('string');\n       *     expect({ foo: 'bar' }).to.be.an('object');\n       *     expect(null).to.be.a('null');\n       *     expect(undefined).to.be.an('undefined');\n       *\n       *     // language chain\n       *     expect(foo).to.be.an.instanceof(Foo);\n       *\n       * @name a\n       * @alias an\n       * @param {String} type\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      function an(type, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object')\n          , klassStart = type.charAt(0).toUpperCase()\n          , klass = klassStart + type.slice(1)\n          , article = ~[ 'A', 'E', 'I', 'O', 'U' ].indexOf(klassStart) ? 'an ' : 'a ';\n\n        this.assert(\n            '[object ' + klass + ']' === toString.call(obj)\n          , 'expected #{this} to be ' + article + type\n          , 'expected #{this} not to be ' + article + type\n        );\n      }\n\n      Assertion.addChainableMethod('an', an);\n      Assertion.addChainableMethod('a', an);\n\n      /**\n       * ### .include(value)\n       *\n       * The `include` and `contain` assertions can be used as either property\n       * based language chains or as methods to assert the inclusion of an object\n       * in an array or a substring in a string. When used as language chains,\n       * they toggle the `contain` flag for the `keys` assertion.\n       *\n       *     expect([1,2,3]).to.include(2);\n       *     expect('foobar').to.contain('foo');\n       *     expect({ foo: 'bar', hello: 'universe' }).to.include.keys('foo');\n       *\n       * @name include\n       * @alias contain\n       * @param {Object|String|Number} obj\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      function includeChainingBehavior () {\n        flag(this, 'contains', true);\n      }\n\n      function include (val, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object')\n        this.assert(\n            ~obj.indexOf(val)\n          , 'expected #{this} to include ' + _.inspect(val)\n          , 'expected #{this} to not include ' + _.inspect(val));\n      }\n\n      Assertion.addChainableMethod('include', include, includeChainingBehavior);\n      Assertion.addChainableMethod('contain', include, includeChainingBehavior);\n\n      /**\n       * ### .ok\n       *\n       * Asserts that the target is truthy.\n       *\n       *     expect('everthing').to.be.ok;\n       *     expect(1).to.be.ok;\n       *     expect(false).to.not.be.ok;\n       *     expect(undefined).to.not.be.ok;\n       *     expect(null).to.not.be.ok;\n       *\n       * @name ok\n       * @api public\n       */\n\n      Assertion.addProperty('ok', function () {\n        this.assert(\n            flag(this, 'object')\n          , 'expected #{this} to be truthy'\n          , 'expected #{this} to be falsy');\n      });\n\n      /**\n       * ### .true\n       *\n       * Asserts that the target is `true`.\n       *\n       *     expect(true).to.be.true;\n       *     expect(1).to.not.be.true;\n       *\n       * @name true\n       * @api public\n       */\n\n      Assertion.addProperty('true', function () {\n        this.assert(\n            true === flag(this, 'object')\n          , 'expected #{this} to be true'\n          , 'expected #{this} to be false'\n          , this.negate ? false : true\n        );\n      });\n\n      /**\n       * ### .false\n       *\n       * Asserts that the target is `false`.\n       *\n       *     expect(false).to.be.false;\n       *     expect(0).to.not.be.false;\n       *\n       * @name false\n       * @api public\n       */\n\n      Assertion.addProperty('false', function () {\n        this.assert(\n            false === flag(this, 'object')\n          , 'expected #{this} to be false'\n          , 'expected #{this} to be true'\n          , this.negate ? true : false\n        );\n      });\n\n      /**\n       * ### .null\n       *\n       * Asserts that the target is `null`.\n       *\n       *     expect(null).to.be.null;\n       *     expect(undefined).not.to.be.null;\n       *\n       * @name null\n       * @api public\n       */\n\n      Assertion.addProperty('null', function () {\n        this.assert(\n            null === flag(this, 'object')\n          , 'expected #{this} to be null'\n          , 'expected #{this} not to be null'\n        );\n      });\n\n      /**\n       * ### .undefined\n       *\n       * Asserts that the target is `undefined`.\n       *\n       *      expect(undefined).to.be.undefined;\n       *      expect(null).to.not.be.undefined;\n       *\n       * @name undefined\n       * @api public\n       */\n\n      Assertion.addProperty('undefined', function () {\n        this.assert(\n            undefined === flag(this, 'object')\n          , 'expected #{this} to be undefined'\n          , 'expected #{this} not to be undefined'\n        );\n      });\n\n      /**\n       * ### .exist\n       *\n       * Asserts that the target is neither `null` nor `undefined`.\n       *\n       *     var foo = 'hi'\n       *       , bar = null\n       *       , baz;\n       *\n       *     expect(foo).to.exist;\n       *     expect(bar).to.not.exist;\n       *     expect(baz).to.not.exist;\n       *\n       * @name exist\n       * @api public\n       */\n\n      Assertion.addProperty('exist', function () {\n        this.assert(\n            null != flag(this, 'object')\n          , 'expected #{this} to exist'\n          , 'expected #{this} to not exist'\n        );\n      });\n\n\n      /**\n       * ### .empty\n       *\n       * Asserts that the target's length is `0`. For arrays, it checks\n       * the `length` property. For objects, it gets the count of\n       * enumerable keys.\n       *\n       *     expect([]).to.be.empty;\n       *     expect('').to.be.empty;\n       *     expect({}).to.be.empty;\n       *\n       * @name empty\n       * @api public\n       */\n\n      Assertion.addProperty('empty', function () {\n        var obj = flag(this, 'object')\n          , expected = obj;\n\n        if (Array.isArray(obj) || 'string' === typeof object) {\n          expected = obj.length;\n        } else if (typeof obj === 'object') {\n          expected = Object.keys(obj).length;\n        }\n\n        this.assert(\n            !expected\n          , 'expected #{this} to be empty'\n          , 'expected #{this} not to be empty'\n        );\n      });\n\n      /**\n       * ### .arguments\n       *\n       * Asserts that the target is an arguments object.\n       *\n       *     function test () {\n       *       expect(arguments).to.be.arguments;\n       *     }\n       *\n       * @name arguments\n       * @alias Arguments\n       * @api public\n       */\n\n      function checkArguments () {\n        var obj = flag(this, 'object')\n          , type = Object.prototype.toString.call(obj);\n        this.assert(\n            '[object Arguments]' === type\n          , 'expected #{this} to be arguments but got ' + type\n          , 'expected #{this} to not be arguments'\n        );\n      }\n\n      Assertion.addProperty('arguments', checkArguments);\n      Assertion.addProperty('Arguments', checkArguments);\n\n      /**\n       * ### .equal(value)\n       *\n       * Asserts that the target is strictly equal (`===`) to `value`.\n       * Alternately, if the `deep` flag is set, asserts that\n       * the target is deeply equal to `value`.\n       *\n       *     expect('hello').to.equal('hello');\n       *     expect(42).to.equal(42);\n       *     expect(1).to.not.equal(true);\n       *     expect({ foo: 'bar' }).to.not.equal({ foo: 'bar' });\n       *     expect({ foo: 'bar' }).to.deep.equal({ foo: 'bar' });\n       *\n       * @name equal\n       * @alias equals\n       * @alias eq\n       * @alias deep.equal\n       * @param {Mixed} value\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      function assertEqual (val, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object');\n        if (flag(this, 'deep')) {\n          return this.eql(val);\n        } else {\n          this.assert(\n              val === obj\n            , 'expected #{this} to equal #{exp}'\n            , 'expected #{this} to not equal #{exp}'\n            , val\n            , this._obj\n            , true\n          );\n        }\n      }\n\n      Assertion.addMethod('equal', assertEqual);\n      Assertion.addMethod('equals', assertEqual);\n      Assertion.addMethod('eq', assertEqual);\n\n      /**\n       * ### .eql(value)\n       *\n       * Asserts that the target is deeply equal to `value`.\n       *\n       *     expect({ foo: 'bar' }).to.eql({ foo: 'bar' });\n       *     expect([ 1, 2, 3 ]).to.eql([ 1, 2, 3 ]);\n       *\n       * @name eql\n       * @param {Mixed} value\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      Assertion.addMethod('eql', function (obj, msg) {\n        if (msg) flag(this, 'message', msg);\n        this.assert(\n            _.eql(obj, flag(this, 'object'))\n          , 'expected #{this} to deeply equal #{exp}'\n          , 'expected #{this} to not deeply equal #{exp}'\n          , obj\n          , this._obj\n          , true\n        );\n      });\n\n      /**\n       * ### .above(value)\n       *\n       * Asserts that the target is greater than `value`.\n       *\n       *     expect(10).to.be.above(5);\n       *\n       * Can also be used in conjunction with `length` to\n       * assert a minimum length. The benefit being a\n       * more informative error message than if the length\n       * was supplied directly.\n       *\n       *     expect('foo').to.have.length.above(2);\n       *     expect([ 1, 2, 3 ]).to.have.length.above(2);\n       *\n       * @name above\n       * @alias gt\n       * @alias greaterThan\n       * @param {Number} value\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      function assertAbove (n, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object');\n        if (flag(this, 'doLength')) {\n          new Assertion(obj, msg).to.have.property('length');\n          var len = obj.length;\n          this.assert(\n              len > n\n            , 'expected #{this} to have a length above #{exp} but got #{act}'\n            , 'expected #{this} to not have a length above #{exp}'\n            , n\n            , len\n          );\n        } else {\n          this.assert(\n              obj > n\n            , 'expected #{this} to be above ' + n\n            , 'expected #{this} to be at most ' + n\n          );\n        }\n      }\n\n      Assertion.addMethod('above', assertAbove);\n      Assertion.addMethod('gt', assertAbove);\n      Assertion.addMethod('greaterThan', assertAbove);\n\n      /**\n       * ### .least(value)\n       *\n       * Asserts that the target is greater than or equal to `value`.\n       *\n       *     expect(10).to.be.at.least(10);\n       *\n       * Can also be used in conjunction with `length` to\n       * assert a minimum length. The benefit being a\n       * more informative error message than if the length\n       * was supplied directly.\n       *\n       *     expect('foo').to.have.length.of.at.least(2);\n       *     expect([ 1, 2, 3 ]).to.have.length.of.at.least(3);\n       *\n       * @name least\n       * @alias gte\n       * @param {Number} value\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      function assertLeast (n, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object');\n        if (flag(this, 'doLength')) {\n          new Assertion(obj, msg).to.have.property('length');\n          var len = obj.length;\n          this.assert(\n              len >= n\n            , 'expected #{this} to have a length at least #{exp} but got #{act}'\n            , 'expected #{this} to not have a length below #{exp}'\n            , n\n            , len\n          );\n        } else {\n          this.assert(\n              obj >= n\n            , 'expected #{this} to be at least ' + n\n            , 'expected #{this} to be below ' + n\n          );\n        }\n      }\n\n      Assertion.addMethod('least', assertLeast);\n      Assertion.addMethod('gte', assertLeast);\n\n      /**\n       * ### .below(value)\n       *\n       * Asserts that the target is less than `value`.\n       *\n       *     expect(5).to.be.below(10);\n       *\n       * Can also be used in conjunction with `length` to\n       * assert a maximum length. The benefit being a\n       * more informative error message than if the length\n       * was supplied directly.\n       *\n       *     expect('foo').to.have.length.below(4);\n       *     expect([ 1, 2, 3 ]).to.have.length.below(4);\n       *\n       * @name below\n       * @alias lt\n       * @alias lessThan\n       * @param {Number} value\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      function assertBelow (n, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object');\n        if (flag(this, 'doLength')) {\n          new Assertion(obj, msg).to.have.property('length');\n          var len = obj.length;\n          this.assert(\n              len < n\n            , 'expected #{this} to have a length below #{exp} but got #{act}'\n            , 'expected #{this} to not have a length below #{exp}'\n            , n\n            , len\n          );\n        } else {\n          this.assert(\n              obj < n\n            , 'expected #{this} to be below ' + n\n            , 'expected #{this} to be at least ' + n\n          );\n        }\n      }\n\n      Assertion.addMethod('below', assertBelow);\n      Assertion.addMethod('lt', assertBelow);\n      Assertion.addMethod('lessThan', assertBelow);\n\n      /**\n       * ### .most(value)\n       *\n       * Asserts that the target is less than or equal to `value`.\n       *\n       *     expect(5).to.be.at.most(5);\n       *\n       * Can also be used in conjunction with `length` to\n       * assert a maximum length. The benefit being a\n       * more informative error message than if the length\n       * was supplied directly.\n       *\n       *     expect('foo').to.have.length.of.at.most(4);\n       *     expect([ 1, 2, 3 ]).to.have.length.of.at.most(3);\n       *\n       * @name most\n       * @alias lte\n       * @param {Number} value\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      function assertMost (n, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object');\n        if (flag(this, 'doLength')) {\n          new Assertion(obj, msg).to.have.property('length');\n          var len = obj.length;\n          this.assert(\n              len <= n\n            , 'expected #{this} to have a length at most #{exp} but got #{act}'\n            , 'expected #{this} to not have a length above #{exp}'\n            , n\n            , len\n          );\n        } else {\n          this.assert(\n              obj <= n\n            , 'expected #{this} to be at most ' + n\n            , 'expected #{this} to be above ' + n\n          );\n        }\n      }\n\n      Assertion.addMethod('most', assertMost);\n      Assertion.addMethod('lte', assertMost);\n\n      /**\n       * ### .within(start, finish)\n       *\n       * Asserts that the target is within a range.\n       *\n       *     expect(7).to.be.within(5,10);\n       *\n       * Can also be used in conjunction with `length` to\n       * assert a length range. The benefit being a\n       * more informative error message than if the length\n       * was supplied directly.\n       *\n       *     expect('foo').to.have.length.within(2,4);\n       *     expect([ 1, 2, 3 ]).to.have.length.within(2,4);\n       *\n       * @name within\n       * @param {Number} start lowerbound inclusive\n       * @param {Number} finish upperbound inclusive\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      Assertion.addMethod('within', function (start, finish, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object')\n          , range = start + '..' + finish;\n        if (flag(this, 'doLength')) {\n          new Assertion(obj, msg).to.have.property('length');\n          var len = obj.length;\n          this.assert(\n              len >= start && len <= finish\n            , 'expected #{this} to have a length within ' + range\n            , 'expected #{this} to not have a length within ' + range\n          );\n        } else {\n          this.assert(\n              obj >= start && obj <= finish\n            , 'expected #{this} to be within ' + range\n            , 'expected #{this} to not be within ' + range\n          );\n        }\n      });\n\n      /**\n       * ### .instanceof(constructor)\n       *\n       * Asserts that the target is an instance of `constructor`.\n       *\n       *     var Tea = function (name) { this.name = name; }\n       *       , Chai = new Tea('chai');\n       *\n       *     expect(Chai).to.be.an.instanceof(Tea);\n       *     expect([ 1, 2, 3 ]).to.be.instanceof(Array);\n       *\n       * @name instanceof\n       * @param {Constructor} constructor\n       * @param {String} message _optional_\n       * @alias instanceOf\n       * @api public\n       */\n\n      function assertInstanceOf (constructor, msg) {\n        if (msg) flag(this, 'message', msg);\n        var name = _.getName(constructor);\n        this.assert(\n            flag(this, 'object') instanceof constructor\n          , 'expected #{this} to be an instance of ' + name\n          , 'expected #{this} to not be an instance of ' + name\n        );\n      };\n\n      Assertion.addMethod('instanceof', assertInstanceOf);\n      Assertion.addMethod('instanceOf', assertInstanceOf);\n\n      /**\n       * ### .property(name, [value])\n       *\n       * Asserts that the target has a property `name`, optionally asserting that\n       * the value of that property is strictly equal to  `value`.\n       * If the `deep` flag is set, you can use dot- and bracket-notation for deep\n       * references into objects and arrays.\n       *\n       *     // simple referencing\n       *     var obj = { foo: 'bar' };\n       *     expect(obj).to.have.property('foo');\n       *     expect(obj).to.have.property('foo', 'bar');\n       *\n       *     // deep referencing\n       *     var deepObj = {\n       *         green: { tea: 'matcha' }\n       *       , teas: [ 'chai', 'matcha', { tea: 'konacha' } ]\n       *     };\n\n       *     expect(deepObj).to.have.deep.property('green.tea', 'matcha');\n       *     expect(deepObj).to.have.deep.property('teas[1]', 'matcha');\n       *     expect(deepObj).to.have.deep.property('teas[2].tea', 'konacha');\n       *\n       * You can also use an array as the starting point of a `deep.property`\n       * assertion, or traverse nested arrays.\n       *\n       *     var arr = [\n       *         [ 'chai', 'matcha', 'konacha' ]\n       *       , [ { tea: 'chai' }\n       *         , { tea: 'matcha' }\n       *         , { tea: 'konacha' } ]\n       *     ];\n       *\n       *     expect(arr).to.have.deep.property('[0][1]', 'matcha');\n       *     expect(arr).to.have.deep.property('[1][2].tea', 'konacha');\n       *\n       * Furthermore, `property` changes the subject of the assertion\n       * to be the value of that property from the original object. This\n       * permits for further chainable assertions on that property.\n       *\n       *     expect(obj).to.have.property('foo')\n       *       .that.is.a('string');\n       *     expect(deepObj).to.have.property('green')\n       *       .that.is.an('object')\n       *       .that.deep.equals({ tea: 'matcha' });\n       *     expect(deepObj).to.have.property('teas')\n       *       .that.is.an('array')\n       *       .with.deep.property('[2]')\n       *         .that.deep.equals({ tea: 'konacha' });\n       *\n       * @name property\n       * @alias deep.property\n       * @param {String} name\n       * @param {Mixed} value (optional)\n       * @param {String} message _optional_\n       * @returns value of property for chaining\n       * @api public\n       */\n\n      Assertion.addMethod('property', function (name, val, msg) {\n        if (msg) flag(this, 'message', msg);\n\n        var descriptor = flag(this, 'deep') ? 'deep property ' : 'property '\n          , negate = flag(this, 'negate')\n          , obj = flag(this, 'object')\n          , value = flag(this, 'deep')\n            ? _.getPathValue(name, obj)\n            : obj[name];\n\n        if (negate && undefined !== val) {\n          if (undefined === value) {\n            msg = (msg != null) ? msg + ': ' : '';\n            throw new Error(msg + _.inspect(obj) + ' has no ' + descriptor + _.inspect(name));\n          }\n        } else {\n          this.assert(\n              undefined !== value\n            , 'expected #{this} to have a ' + descriptor + _.inspect(name)\n            , 'expected #{this} to not have ' + descriptor + _.inspect(name));\n        }\n\n        if (undefined !== val) {\n          this.assert(\n              val === value\n            , 'expected #{this} to have a ' + descriptor + _.inspect(name) + ' of #{exp}, but got #{act}'\n            , 'expected #{this} to not have a ' + descriptor + _.inspect(name) + ' of #{act}'\n            , val\n            , value\n          );\n        }\n\n        flag(this, 'object', value);\n      });\n\n\n      /**\n       * ### .ownProperty(name)\n       *\n       * Asserts that the target has an own property `name`.\n       *\n       *     expect('test').to.have.ownProperty('length');\n       *\n       * @name ownProperty\n       * @alias haveOwnProperty\n       * @param {String} name\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      function assertOwnProperty (name, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object');\n        this.assert(\n            obj.hasOwnProperty(name)\n          , 'expected #{this} to have own property ' + _.inspect(name)\n          , 'expected #{this} to not have own property ' + _.inspect(name)\n        );\n      }\n\n      Assertion.addMethod('ownProperty', assertOwnProperty);\n      Assertion.addMethod('haveOwnProperty', assertOwnProperty);\n\n      /**\n       * ### .length(value)\n       *\n       * Asserts that the target's `length` property has\n       * the expected value.\n       *\n       *     expect([ 1, 2, 3]).to.have.length(3);\n       *     expect('foobar').to.have.length(6);\n       *\n       * Can also be used as a chain precursor to a value\n       * comparison for the length property.\n       *\n       *     expect('foo').to.have.length.above(2);\n       *     expect([ 1, 2, 3 ]).to.have.length.above(2);\n       *     expect('foo').to.have.length.below(4);\n       *     expect([ 1, 2, 3 ]).to.have.length.below(4);\n       *     expect('foo').to.have.length.within(2,4);\n       *     expect([ 1, 2, 3 ]).to.have.length.within(2,4);\n       *\n       * @name length\n       * @alias lengthOf\n       * @param {Number} length\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      function assertLengthChain () {\n        flag(this, 'doLength', true);\n      }\n\n      function assertLength (n, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object');\n        new Assertion(obj, msg).to.have.property('length');\n        var len = obj.length;\n\n        this.assert(\n            len == n\n          , 'expected #{this} to have a length of #{exp} but got #{act}'\n          , 'expected #{this} to not have a length of #{act}'\n          , n\n          , len\n        );\n      }\n\n      Assertion.addChainableMethod('length', assertLength, assertLengthChain);\n      Assertion.addMethod('lengthOf', assertLength, assertLengthChain);\n\n      /**\n       * ### .match(regexp)\n       *\n       * Asserts that the target matches a regular expression.\n       *\n       *     expect('foobar').to.match(/^foo/);\n       *\n       * @name match\n       * @param {RegExp} RegularExpression\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      Assertion.addMethod('match', function (re, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object');\n        this.assert(\n            re.exec(obj)\n          , 'expected #{this} to match ' + re\n          , 'expected #{this} not to match ' + re\n        );\n      });\n\n      /**\n       * ### .string(string)\n       *\n       * Asserts that the string target contains another string.\n       *\n       *     expect('foobar').to.have.string('bar');\n       *\n       * @name string\n       * @param {String} string\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      Assertion.addMethod('string', function (str, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object');\n        new Assertion(obj, msg).is.a('string');\n\n        this.assert(\n            ~obj.indexOf(str)\n          , 'expected #{this} to contain ' + _.inspect(str)\n          , 'expected #{this} to not contain ' + _.inspect(str)\n        );\n      });\n\n\n      /**\n       * ### .keys(key1, [key2], [...])\n       *\n       * Asserts that the target has exactly the given keys, or\n       * asserts the inclusion of some keys when using the\n       * `include` or `contain` modifiers.\n       *\n       *     expect({ foo: 1, bar: 2 }).to.have.keys(['foo', 'bar']);\n       *     expect({ foo: 1, bar: 2, baz: 3 }).to.contain.keys('foo', 'bar');\n       *\n       * @name keys\n       * @alias key\n       * @param {String...|Array} keys\n       * @api public\n       */\n\n      function assertKeys (keys) {\n        var obj = flag(this, 'object')\n          , str\n          , ok = true;\n\n        keys = keys instanceof Array\n          ? keys\n          : Array.prototype.slice.call(arguments);\n\n        if (!keys.length) throw new Error('keys required');\n\n        var actual = Object.keys(obj)\n          , len = keys.length;\n\n        // Inclusion\n        ok = keys.every(function(key){\n          return ~actual.indexOf(key);\n        });\n\n        // Strict\n        if (!flag(this, 'negate') && !flag(this, 'contains')) {\n          ok = ok && keys.length == actual.length;\n        }\n\n        // Key string\n        if (len > 1) {\n          keys = keys.map(function(key){\n            return _.inspect(key);\n          });\n          var last = keys.pop();\n          str = keys.join(', ') + ', and ' + last;\n        } else {\n          str = _.inspect(keys[0]);\n        }\n\n        // Form\n        str = (len > 1 ? 'keys ' : 'key ') + str;\n\n        // Have / include\n        str = (flag(this, 'contains') ? 'contain ' : 'have ') + str;\n\n        // Assertion\n        this.assert(\n            ok\n          , 'expected #{this} to ' + str\n          , 'expected #{this} to not ' + str\n        );\n      }\n\n      Assertion.addMethod('keys', assertKeys);\n      Assertion.addMethod('key', assertKeys);\n\n      /**\n       * ### .throw(constructor)\n       *\n       * Asserts that the function target will throw a specific error, or specific type of error\n       * (as determined using `instanceof`), optionally with a RegExp or string inclusion test\n       * for the error's message.\n       *\n       *     var err = new ReferenceError('This is a bad function.');\n       *     var fn = function () { throw err; }\n       *     expect(fn).to.throw(ReferenceError);\n       *     expect(fn).to.throw(Error);\n       *     expect(fn).to.throw(/bad function/);\n       *     expect(fn).to.not.throw('good function');\n       *     expect(fn).to.throw(ReferenceError, /bad function/);\n       *     expect(fn).to.throw(err);\n       *     expect(fn).to.not.throw(new RangeError('Out of range.'));\n       *\n       * Please note that when a throw expectation is negated, it will check each\n       * parameter independently, starting with error constructor type. The appropriate way\n       * to check for the existence of a type of error but for a message that does not match\n       * is to use `and`.\n       *\n       *     expect(fn).to.throw(ReferenceError)\n       *        .and.not.throw(/good function/);\n       *\n       * @name throw\n       * @alias throws\n       * @alias Throw\n       * @param {ErrorConstructor} constructor\n       * @param {String|RegExp} expected error message\n       * @param {String} message _optional_\n       * @see https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Error#Error_types\n       * @api public\n       */\n\n      function assertThrows (constructor, errMsg, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object');\n        new Assertion(obj, msg).is.a('function');\n\n        var thrown = false\n          , desiredError = null\n          , name = null\n          , thrownError = null;\n\n        if (arguments.length === 0) {\n          errMsg = null;\n          constructor = null;\n        } else if (constructor && (constructor instanceof RegExp || 'string' === typeof constructor)) {\n          errMsg = constructor;\n          constructor = null;\n        } else if (constructor && constructor instanceof Error) {\n          desiredError = constructor;\n          constructor = null;\n          errMsg = null;\n        } else if (typeof constructor === 'function') {\n          name = (new constructor()).name;\n        } else {\n          constructor = null;\n        }\n\n        try {\n          obj();\n        } catch (err) {\n          // first, check desired error\n          if (desiredError) {\n            this.assert(\n                err === desiredError\n              , 'expected #{this} to throw ' + _.inspect(desiredError) + ' but ' + _.inspect(err) + ' was thrown'\n              , 'expected #{this} to not throw ' + _.inspect(desiredError)\n            );\n            return this;\n          }\n          // next, check constructor\n          if (constructor) {\n            this.assert(\n                err instanceof constructor\n              , 'expected #{this} to throw ' + name + ' but ' + _.inspect(err) + ' was thrown'\n              , 'expected #{this} to not throw ' + name + ' but ' + _.inspect(err) + ' was thrown');\n            if (!errMsg) return this;\n          }\n          // next, check message\n          if (err.message && errMsg && errMsg instanceof RegExp) {\n            this.assert(\n                errMsg.exec(err.message)\n              , 'expected #{this} to throw error matching ' + errMsg + ' but got ' + _.inspect(err.message)\n              , 'expected #{this} to throw error not matching ' + errMsg\n            );\n            return this;\n          } else if (err.message && errMsg && 'string' === typeof errMsg) {\n            this.assert(\n                ~err.message.indexOf(errMsg)\n              , 'expected #{this} to throw error including #{exp} but got #{act}'\n              , 'expected #{this} to throw error not including #{act}'\n              , errMsg\n              , err.message\n            );\n            return this;\n          } else {\n            thrown = true;\n            thrownError = err;\n          }\n        }\n\n        var expectedThrown = name ? name : desiredError ? _.inspect(desiredError) : 'an error';\n        var actuallyGot = ''\n        if (thrown) {\n          actuallyGot = ' but ' + _.inspect(thrownError) + ' was thrown'\n        }\n\n        this.assert(\n            thrown === true\n          , 'expected #{this} to throw ' + expectedThrown + actuallyGot\n          , 'expected #{this} to not throw ' + expectedThrown + actuallyGot\n        );\n      };\n\n      Assertion.addMethod('throw', assertThrows);\n      Assertion.addMethod('throws', assertThrows);\n      Assertion.addMethod('Throw', assertThrows);\n\n      /**\n       * ### .respondTo(method)\n       *\n       * Asserts that the object or class target will respond to a method.\n       *\n       *     Klass.prototype.bar = function(){};\n       *     expect(Klass).to.respondTo('bar');\n       *     expect(obj).to.respondTo('bar');\n       *\n       * To check if a constructor will respond to a static function,\n       * set the `itself` flag.\n       *\n       *    Klass.baz = function(){};\n       *    expect(Klass).itself.to.respondTo('baz');\n       *\n       * @name respondTo\n       * @param {String} method\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      Assertion.addMethod('respondTo', function (method, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object')\n          , itself = flag(this, 'itself')\n          , context = ('function' === typeof obj && !itself)\n            ? obj.prototype[method]\n            : obj[method];\n\n        this.assert(\n            'function' === typeof context\n          , 'expected #{this} to respond to ' + _.inspect(method)\n          , 'expected #{this} to not respond to ' + _.inspect(method)\n        );\n      });\n\n      /**\n       * ### .itself\n       *\n       * Sets the `itself` flag, later used by the `respondTo` assertion.\n       *\n       *    function Foo() {}\n       *    Foo.bar = function() {}\n       *    Foo.prototype.baz = function() {}\n       *\n       *    expect(Foo).itself.to.respondTo('bar');\n       *    expect(Foo).itself.not.to.respondTo('baz');\n       *\n       * @name itself\n       * @api public\n       */\n\n      Assertion.addProperty('itself', function () {\n        flag(this, 'itself', true);\n      });\n\n      /**\n       * ### .satisfy(method)\n       *\n       * Asserts that the target passes a given truth test.\n       *\n       *     expect(1).to.satisfy(function(num) { return num > 0; });\n       *\n       * @name satisfy\n       * @param {Function} matcher\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      Assertion.addMethod('satisfy', function (matcher, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object');\n        this.assert(\n            matcher(obj)\n          , 'expected #{this} to satisfy ' + _.inspect(matcher)\n          , 'expected #{this} to not satisfy' + _.inspect(matcher)\n          , this.negate ? false : true\n          , matcher(obj)\n        );\n      });\n\n      /**\n       * ### .closeTo(expected, delta)\n       *\n       * Asserts that the target is equal `expected`, to within a +/- `delta` range.\n       *\n       *     expect(1.5).to.be.closeTo(1, 0.5);\n       *\n       * @name closeTo\n       * @param {Number} expected\n       * @param {Number} delta\n       * @param {String} message _optional_\n       * @api public\n       */\n\n      Assertion.addMethod('closeTo', function (expected, delta, msg) {\n        if (msg) flag(this, 'message', msg);\n        var obj = flag(this, 'object');\n        this.assert(\n            Math.abs(obj - expected) <= delta\n          , 'expected #{this} to be close to ' + expected + ' +/- ' + delta\n          , 'expected #{this} not to be close to ' + expected + ' +/- ' + delta\n        );\n      });\n\n    };\n\n  }); // module: chai/core/assertions.js\n\n  require.register(\"chai/error.js\", function(module, exports, require){\n    /*!\n     * chai\n     * Copyright(c) 2011-2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /*!\n     * Main export\n     */\n\n    module.exports = AssertionError;\n\n    /**\n     * # AssertionError (constructor)\n     *\n     * Create a new assertion error based on the Javascript\n     * `Error` prototype.\n     *\n     * **Options**\n     * - message\n     * - actual\n     * - expected\n     * - operator\n     * - startStackFunction\n     *\n     * @param {Object} options\n     * @api public\n     */\n\n    function AssertionError (options) {\n      options = options || {};\n      this.message = options.message;\n      this.actual = options.actual;\n      this.expected = options.expected;\n      this.operator = options.operator;\n      this.showDiff = options.showDiff;\n\n      if (options.stackStartFunction && Error.captureStackTrace) {\n        var stackStartFunction = options.stackStartFunction;\n        Error.captureStackTrace(this, stackStartFunction);\n      }\n    }\n\n    /*!\n     * Inherit from Error\n     */\n\n    AssertionError.prototype = Object.create(Error.prototype);\n    AssertionError.prototype.name = 'AssertionError';\n    AssertionError.prototype.constructor = AssertionError;\n\n    /**\n     * # toString()\n     *\n     * Override default to string method\n     */\n\n    AssertionError.prototype.toString = function() {\n      return this.message;\n    };\n\n  }); // module: chai/error.js\n\n  require.register(\"chai/interface/assert.js\", function(module, exports, require){\n    /*!\n     * chai\n     * Copyright(c) 2011-2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n\n    module.exports = function (chai, util) {\n\n      /*!\n       * Chai dependencies.\n       */\n\n      var Assertion = chai.Assertion\n        , flag = util.flag;\n\n      /*!\n       * Module export.\n       */\n\n      /**\n       * ### assert(expression, message)\n       *\n       * Write your own test expressions.\n       *\n       *     assert('foo' !== 'bar', 'foo is not bar');\n       *     assert(Array.isArray([]), 'empty arrays are arrays');\n       *\n       * @param {Mixed} expression to test for truthiness\n       * @param {String} message to display on error\n       * @name assert\n       * @api public\n       */\n\n      var assert = chai.assert = function (express, errmsg) {\n        var test = new Assertion(null);\n        test.assert(\n            express\n          , errmsg\n          , '[ negation message unavailable ]'\n        );\n      };\n\n      /**\n       * ### .fail(actual, expected, [message], [operator])\n       *\n       * Throw a failure. Node.js `assert` module-compatible.\n       *\n       * @name fail\n       * @param {Mixed} actual\n       * @param {Mixed} expected\n       * @param {String} message\n       * @param {String} operator\n       * @api public\n       */\n\n      assert.fail = function (actual, expected, message, operator) {\n        throw new chai.AssertionError({\n            actual: actual\n          , expected: expected\n          , message: message\n          , operator: operator\n          , stackStartFunction: assert.fail\n        });\n      };\n\n      /**\n       * ### .ok(object, [message])\n       *\n       * Asserts that `object` is truthy.\n       *\n       *     assert.ok('everything', 'everything is ok');\n       *     assert.ok(false, 'this will fail');\n       *\n       * @name ok\n       * @param {Mixed} object to test\n       * @param {String} message\n       * @api public\n       */\n\n      assert.ok = function (val, msg) {\n        new Assertion(val, msg).is.ok;\n      };\n\n      /**\n       * ### .equal(actual, expected, [message])\n       *\n       * Asserts non-strict equality (`==`) of `actual` and `expected`.\n       *\n       *     assert.equal(3, '3', '== coerces values to strings');\n       *\n       * @name equal\n       * @param {Mixed} actual\n       * @param {Mixed} expected\n       * @param {String} message\n       * @api public\n       */\n\n      assert.equal = function (act, exp, msg) {\n        var test = new Assertion(act, msg);\n\n        test.assert(\n            exp == flag(test, 'object')\n          , 'expected #{this} to equal #{exp}'\n          , 'expected #{this} to not equal #{act}'\n          , exp\n          , act\n        );\n      };\n\n      /**\n       * ### .notEqual(actual, expected, [message])\n       *\n       * Asserts non-strict inequality (`!=`) of `actual` and `expected`.\n       *\n       *     assert.notEqual(3, 4, 'these numbers are not equal');\n       *\n       * @name notEqual\n       * @param {Mixed} actual\n       * @param {Mixed} expected\n       * @param {String} message\n       * @api public\n       */\n\n      assert.notEqual = function (act, exp, msg) {\n        var test = new Assertion(act, msg);\n\n        test.assert(\n            exp != flag(test, 'object')\n          , 'expected #{this} to not equal #{exp}'\n          , 'expected #{this} to equal #{act}'\n          , exp\n          , act\n        );\n      };\n\n      /**\n       * ### .strictEqual(actual, expected, [message])\n       *\n       * Asserts strict equality (`===`) of `actual` and `expected`.\n       *\n       *     assert.strictEqual(true, true, 'these booleans are strictly equal');\n       *\n       * @name strictEqual\n       * @param {Mixed} actual\n       * @param {Mixed} expected\n       * @param {String} message\n       * @api public\n       */\n\n      assert.strictEqual = function (act, exp, msg) {\n        new Assertion(act, msg).to.equal(exp);\n      };\n\n      /**\n       * ### .notStrictEqual(actual, expected, [message])\n       *\n       * Asserts strict inequality (`!==`) of `actual` and `expected`.\n       *\n       *     assert.notStrictEqual(3, '3', 'no coercion for strict equality');\n       *\n       * @name notStrictEqual\n       * @param {Mixed} actual\n       * @param {Mixed} expected\n       * @param {String} message\n       * @api public\n       */\n\n      assert.notStrictEqual = function (act, exp, msg) {\n        new Assertion(act, msg).to.not.equal(exp);\n      };\n\n      /**\n       * ### .deepEqual(actual, expected, [message])\n       *\n       * Asserts that `actual` is deeply equal to `expected`.\n       *\n       *     assert.deepEqual({ tea: 'green' }, { tea: 'green' });\n       *\n       * @name deepEqual\n       * @param {Mixed} actual\n       * @param {Mixed} expected\n       * @param {String} message\n       * @api public\n       */\n\n      assert.deepEqual = function (act, exp, msg) {\n        new Assertion(act, msg).to.eql(exp);\n      };\n\n      /**\n       * ### .notDeepEqual(actual, expected, [message])\n       *\n       * Assert that `actual` is not deeply equal to `expected`.\n       *\n       *     assert.notDeepEqual({ tea: 'green' }, { tea: 'jasmine' });\n       *\n       * @name notDeepEqual\n       * @param {Mixed} actual\n       * @param {Mixed} expected\n       * @param {String} message\n       * @api public\n       */\n\n      assert.notDeepEqual = function (act, exp, msg) {\n        new Assertion(act, msg).to.not.eql(exp);\n      };\n\n      /**\n       * ### .isTrue(value, [message])\n       *\n       * Asserts that `value` is true.\n       *\n       *     var teaServed = true;\n       *     assert.isTrue(teaServed, 'the tea has been served');\n       *\n       * @name isTrue\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isTrue = function (val, msg) {\n        new Assertion(val, msg).is['true'];\n      };\n\n      /**\n       * ### .isFalse(value, [message])\n       *\n       * Asserts that `value` is false.\n       *\n       *     var teaServed = false;\n       *     assert.isFalse(teaServed, 'no tea yet? hmm...');\n       *\n       * @name isFalse\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isFalse = function (val, msg) {\n        new Assertion(val, msg).is['false'];\n      };\n\n      /**\n       * ### .isNull(value, [message])\n       *\n       * Asserts that `value` is null.\n       *\n       *     assert.isNull(err, 'there was no error');\n       *\n       * @name isNull\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isNull = function (val, msg) {\n        new Assertion(val, msg).to.equal(null);\n      };\n\n      /**\n       * ### .isNotNull(value, [message])\n       *\n       * Asserts that `value` is not null.\n       *\n       *     var tea = 'tasty chai';\n       *     assert.isNotNull(tea, 'great, time for tea!');\n       *\n       * @name isNotNull\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isNotNull = function (val, msg) {\n        new Assertion(val, msg).to.not.equal(null);\n      };\n\n      /**\n       * ### .isUndefined(value, [message])\n       *\n       * Asserts that `value` is `undefined`.\n       *\n       *     var tea;\n       *     assert.isUndefined(tea, 'no tea defined');\n       *\n       * @name isUndefined\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isUndefined = function (val, msg) {\n        new Assertion(val, msg).to.equal(undefined);\n      };\n\n      /**\n       * ### .isDefined(value, [message])\n       *\n       * Asserts that `value` is not `undefined`.\n       *\n       *     var tea = 'cup of chai';\n       *     assert.isDefined(tea, 'tea has been defined');\n       *\n       * @name isUndefined\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isDefined = function (val, msg) {\n        new Assertion(val, msg).to.not.equal(undefined);\n      };\n\n      /**\n       * ### .isFunction(value, [message])\n       *\n       * Asserts that `value` is a function.\n       *\n       *     function serveTea() { return 'cup of tea'; };\n       *     assert.isFunction(serveTea, 'great, we can have tea now');\n       *\n       * @name isFunction\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isFunction = function (val, msg) {\n        new Assertion(val, msg).to.be.a('function');\n      };\n\n      /**\n       * ### .isNotFunction(value, [message])\n       *\n       * Asserts that `value` is _not_ a function.\n       *\n       *     var serveTea = [ 'heat', 'pour', 'sip' ];\n       *     assert.isNotFunction(serveTea, 'great, we have listed the steps');\n       *\n       * @name isNotFunction\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isNotFunction = function (val, msg) {\n        new Assertion(val, msg).to.not.be.a('function');\n      };\n\n      /**\n       * ### .isObject(value, [message])\n       *\n       * Asserts that `value` is an object (as revealed by\n       * `Object.prototype.toString`).\n       *\n       *     var selection = { name: 'Chai', serve: 'with spices' };\n       *     assert.isObject(selection, 'tea selection is an object');\n       *\n       * @name isObject\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isObject = function (val, msg) {\n        new Assertion(val, msg).to.be.a('object');\n      };\n\n      /**\n       * ### .isNotObject(value, [message])\n       *\n       * Asserts that `value` is _not_ an object.\n       *\n       *     var selection = 'chai'\n       *     assert.isObject(selection, 'tea selection is not an object');\n       *     assert.isObject(null, 'null is not an object');\n       *\n       * @name isNotObject\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isNotObject = function (val, msg) {\n        new Assertion(val, msg).to.not.be.a('object');\n      };\n\n      /**\n       * ### .isArray(value, [message])\n       *\n       * Asserts that `value` is an array.\n       *\n       *     var menu = [ 'green', 'chai', 'oolong' ];\n       *     assert.isArray(menu, 'what kind of tea do we want?');\n       *\n       * @name isArray\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isArray = function (val, msg) {\n        new Assertion(val, msg).to.be.an('array');\n      };\n\n      /**\n       * ### .isNotArray(value, [message])\n       *\n       * Asserts that `value` is _not_ an array.\n       *\n       *     var menu = 'green|chai|oolong';\n       *     assert.isNotArray(menu, 'what kind of tea do we want?');\n       *\n       * @name isNotArray\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isNotArray = function (val, msg) {\n        new Assertion(val, msg).to.not.be.an('array');\n      };\n\n      /**\n       * ### .isString(value, [message])\n       *\n       * Asserts that `value` is a string.\n       *\n       *     var teaOrder = 'chai';\n       *     assert.isString(teaOrder, 'order placed');\n       *\n       * @name isString\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isString = function (val, msg) {\n        new Assertion(val, msg).to.be.a('string');\n      };\n\n      /**\n       * ### .isNotString(value, [message])\n       *\n       * Asserts that `value` is _not_ a string.\n       *\n       *     var teaOrder = 4;\n       *     assert.isNotString(teaOrder, 'order placed');\n       *\n       * @name isNotString\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isNotString = function (val, msg) {\n        new Assertion(val, msg).to.not.be.a('string');\n      };\n\n      /**\n       * ### .isNumber(value, [message])\n       *\n       * Asserts that `value` is a number.\n       *\n       *     var cups = 2;\n       *     assert.isNumber(cups, 'how many cups');\n       *\n       * @name isNumber\n       * @param {Number} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isNumber = function (val, msg) {\n        new Assertion(val, msg).to.be.a('number');\n      };\n\n      /**\n       * ### .isNotNumber(value, [message])\n       *\n       * Asserts that `value` is _not_ a number.\n       *\n       *     var cups = '2 cups please';\n       *     assert.isNotNumber(cups, 'how many cups');\n       *\n       * @name isNotNumber\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isNotNumber = function (val, msg) {\n        new Assertion(val, msg).to.not.be.a('number');\n      };\n\n      /**\n       * ### .isBoolean(value, [message])\n       *\n       * Asserts that `value` is a boolean.\n       *\n       *     var teaReady = true\n       *       , teaServed = false;\n       *\n       *     assert.isBoolean(teaReady, 'is the tea ready');\n       *     assert.isBoolean(teaServed, 'has tea been served');\n       *\n       * @name isBoolean\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isBoolean = function (val, msg) {\n        new Assertion(val, msg).to.be.a('boolean');\n      };\n\n      /**\n       * ### .isNotBoolean(value, [message])\n       *\n       * Asserts that `value` is _not_ a boolean.\n       *\n       *     var teaReady = 'yep'\n       *       , teaServed = 'nope';\n       *\n       *     assert.isNotBoolean(teaReady, 'is the tea ready');\n       *     assert.isNotBoolean(teaServed, 'has tea been served');\n       *\n       * @name isNotBoolean\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.isNotBoolean = function (val, msg) {\n        new Assertion(val, msg).to.not.be.a('boolean');\n      };\n\n      /**\n       * ### .typeOf(value, name, [message])\n       *\n       * Asserts that `value`'s type is `name`, as determined by\n       * `Object.prototype.toString`.\n       *\n       *     assert.typeOf({ tea: 'chai' }, 'object', 'we have an object');\n       *     assert.typeOf(['chai', 'jasmine'], 'array', 'we have an array');\n       *     assert.typeOf('tea', 'string', 'we have a string');\n       *     assert.typeOf(/tea/, 'regexp', 'we have a regular expression');\n       *     assert.typeOf(null, 'null', 'we have a null');\n       *     assert.typeOf(undefined, 'undefined', 'we have an undefined');\n       *\n       * @name typeOf\n       * @param {Mixed} value\n       * @param {String} name\n       * @param {String} message\n       * @api public\n       */\n\n      assert.typeOf = function (val, type, msg) {\n        new Assertion(val, msg).to.be.a(type);\n      };\n\n      /**\n       * ### .notTypeOf(value, name, [message])\n       *\n       * Asserts that `value`'s type is _not_ `name`, as determined by\n       * `Object.prototype.toString`.\n       *\n       *     assert.notTypeOf('tea', 'number', 'strings are not numbers');\n       *\n       * @name notTypeOf\n       * @param {Mixed} value\n       * @param {String} typeof name\n       * @param {String} message\n       * @api public\n       */\n\n      assert.notTypeOf = function (val, type, msg) {\n        new Assertion(val, msg).to.not.be.a(type);\n      };\n\n      /**\n       * ### .instanceOf(object, constructor, [message])\n       *\n       * Asserts that `value` is an instance of `constructor`.\n       *\n       *     var Tea = function (name) { this.name = name; }\n       *       , chai = new Tea('chai');\n       *\n       *     assert.instanceOf(chai, Tea, 'chai is an instance of tea');\n       *\n       * @name instanceOf\n       * @param {Object} object\n       * @param {Constructor} constructor\n       * @param {String} message\n       * @api public\n       */\n\n      assert.instanceOf = function (val, type, msg) {\n        new Assertion(val, msg).to.be.instanceOf(type);\n      };\n\n      /**\n       * ### .notInstanceOf(object, constructor, [message])\n       *\n       * Asserts `value` is not an instance of `constructor`.\n       *\n       *     var Tea = function (name) { this.name = name; }\n       *       , chai = new String('chai');\n       *\n       *     assert.notInstanceOf(chai, Tea, 'chai is not an instance of tea');\n       *\n       * @name notInstanceOf\n       * @param {Object} object\n       * @param {Constructor} constructor\n       * @param {String} message\n       * @api public\n       */\n\n      assert.notInstanceOf = function (val, type, msg) {\n        new Assertion(val, msg).to.not.be.instanceOf(type);\n      };\n\n      /**\n       * ### .include(haystack, needle, [message])\n       *\n       * Asserts that `haystack` includes `needle`. Works\n       * for strings and arrays.\n       *\n       *     assert.include('foobar', 'bar', 'foobar contains string \"bar\"');\n       *     assert.include([ 1, 2, 3 ], 3, 'array contains value');\n       *\n       * @name include\n       * @param {Array|String} haystack\n       * @param {Mixed} needle\n       * @param {String} message\n       * @api public\n       */\n\n      assert.include = function (exp, inc, msg) {\n        var obj = new Assertion(exp, msg);\n\n        if (Array.isArray(exp)) {\n          obj.to.include(inc);\n        } else if ('string' === typeof exp) {\n          obj.to.contain.string(inc);\n        }\n      };\n\n      /**\n       * ### .match(value, regexp, [message])\n       *\n       * Asserts that `value` matches the regular expression `regexp`.\n       *\n       *     assert.match('foobar', /^foo/, 'regexp matches');\n       *\n       * @name match\n       * @param {Mixed} value\n       * @param {RegExp} regexp\n       * @param {String} message\n       * @api public\n       */\n\n      assert.match = function (exp, re, msg) {\n        new Assertion(exp, msg).to.match(re);\n      };\n\n      /**\n       * ### .notMatch(value, regexp, [message])\n       *\n       * Asserts that `value` does not match the regular expression `regexp`.\n       *\n       *     assert.notMatch('foobar', /^foo/, 'regexp does not match');\n       *\n       * @name notMatch\n       * @param {Mixed} value\n       * @param {RegExp} regexp\n       * @param {String} message\n       * @api public\n       */\n\n      assert.notMatch = function (exp, re, msg) {\n        new Assertion(exp, msg).to.not.match(re);\n      };\n\n      /**\n       * ### .property(object, property, [message])\n       *\n       * Asserts that `object` has a property named by `property`.\n       *\n       *     assert.property({ tea: { green: 'matcha' }}, 'tea');\n       *\n       * @name property\n       * @param {Object} object\n       * @param {String} property\n       * @param {String} message\n       * @api public\n       */\n\n      assert.property = function (obj, prop, msg) {\n        new Assertion(obj, msg).to.have.property(prop);\n      };\n\n      /**\n       * ### .notProperty(object, property, [message])\n       *\n       * Asserts that `object` does _not_ have a property named by `property`.\n       *\n       *     assert.notProperty({ tea: { green: 'matcha' }}, 'coffee');\n       *\n       * @name notProperty\n       * @param {Object} object\n       * @param {String} property\n       * @param {String} message\n       * @api public\n       */\n\n      assert.notProperty = function (obj, prop, msg) {\n        new Assertion(obj, msg).to.not.have.property(prop);\n      };\n\n      /**\n       * ### .deepProperty(object, property, [message])\n       *\n       * Asserts that `object` has a property named by `property`, which can be a\n       * string using dot- and bracket-notation for deep reference.\n       *\n       *     assert.deepProperty({ tea: { green: 'matcha' }}, 'tea.green');\n       *\n       * @name deepProperty\n       * @param {Object} object\n       * @param {String} property\n       * @param {String} message\n       * @api public\n       */\n\n      assert.deepProperty = function (obj, prop, msg) {\n        new Assertion(obj, msg).to.have.deep.property(prop);\n      };\n\n      /**\n       * ### .notDeepProperty(object, property, [message])\n       *\n       * Asserts that `object` does _not_ have a property named by `property`, which\n       * can be a string using dot- and bracket-notation for deep reference.\n       *\n       *     assert.notDeepProperty({ tea: { green: 'matcha' }}, 'tea.oolong');\n       *\n       * @name notDeepProperty\n       * @param {Object} object\n       * @param {String} property\n       * @param {String} message\n       * @api public\n       */\n\n      assert.notDeepProperty = function (obj, prop, msg) {\n        new Assertion(obj, msg).to.not.have.deep.property(prop);\n      };\n\n      /**\n       * ### .propertyVal(object, property, value, [message])\n       *\n       * Asserts that `object` has a property named by `property` with value given\n       * by `value`.\n       *\n       *     assert.propertyVal({ tea: 'is good' }, 'tea', 'is good');\n       *\n       * @name propertyVal\n       * @param {Object} object\n       * @param {String} property\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.propertyVal = function (obj, prop, val, msg) {\n        new Assertion(obj, msg).to.have.property(prop, val);\n      };\n\n      /**\n       * ### .propertyNotVal(object, property, value, [message])\n       *\n       * Asserts that `object` has a property named by `property`, but with a value\n       * different from that given by `value`.\n       *\n       *     assert.propertyNotVal({ tea: 'is good' }, 'tea', 'is bad');\n       *\n       * @name propertyNotVal\n       * @param {Object} object\n       * @param {String} property\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.propertyNotVal = function (obj, prop, val, msg) {\n        new Assertion(obj, msg).to.not.have.property(prop, val);\n      };\n\n      /**\n       * ### .deepPropertyVal(object, property, value, [message])\n       *\n       * Asserts that `object` has a property named by `property` with value given\n       * by `value`. `property` can use dot- and bracket-notation for deep\n       * reference.\n       *\n       *     assert.deepPropertyVal({ tea: { green: 'matcha' }}, 'tea.green', 'matcha');\n       *\n       * @name deepPropertyVal\n       * @param {Object} object\n       * @param {String} property\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.deepPropertyVal = function (obj, prop, val, msg) {\n        new Assertion(obj, msg).to.have.deep.property(prop, val);\n      };\n\n      /**\n       * ### .deepPropertyNotVal(object, property, value, [message])\n       *\n       * Asserts that `object` has a property named by `property`, but with a value\n       * different from that given by `value`. `property` can use dot- and\n       * bracket-notation for deep reference.\n       *\n       *     assert.deepPropertyNotVal({ tea: { green: 'matcha' }}, 'tea.green', 'konacha');\n       *\n       * @name deepPropertyNotVal\n       * @param {Object} object\n       * @param {String} property\n       * @param {Mixed} value\n       * @param {String} message\n       * @api public\n       */\n\n      assert.deepPropertyNotVal = function (obj, prop, val, msg) {\n        new Assertion(obj, msg).to.not.have.deep.property(prop, val);\n      };\n\n      /**\n       * ### .lengthOf(object, length, [message])\n       *\n       * Asserts that `object` has a `length` property with the expected value.\n       *\n       *     assert.lengthOf([1,2,3], 3, 'array has length of 3');\n       *     assert.lengthOf('foobar', 5, 'string has length of 6');\n       *\n       * @name lengthOf\n       * @param {Mixed} object\n       * @param {Number} length\n       * @param {String} message\n       * @api public\n       */\n\n      assert.lengthOf = function (exp, len, msg) {\n        new Assertion(exp, msg).to.have.length(len);\n      };\n\n      /**\n       * ### .throws(function, [constructor/string/regexp], [string/regexp], [message])\n       *\n       * Asserts that `function` will throw an error that is an instance of\n       * `constructor`, or alternately that it will throw an error with message\n       * matching `regexp`.\n       *\n       *     assert.throw(fn, 'function throws a reference error');\n       *     assert.throw(fn, /function throws a reference error/);\n       *     assert.throw(fn, ReferenceError);\n       *     assert.throw(fn, ReferenceError, 'function throws a reference error');\n       *     assert.throw(fn, ReferenceError, /function throws a reference error/);\n       *\n       * @name throws\n       * @alias throw\n       * @alias Throw\n       * @param {Function} function\n       * @param {ErrorConstructor} constructor\n       * @param {RegExp} regexp\n       * @param {String} message\n       * @see https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Error#Error_types\n       * @api public\n       */\n\n      assert.Throw = function (fn, errt, errs, msg) {\n        if ('string' === typeof errt || errt instanceof RegExp) {\n          errs = errt;\n          errt = null;\n        }\n\n        new Assertion(fn, msg).to.Throw(errt, errs);\n      };\n\n      /**\n       * ### .doesNotThrow(function, [constructor/regexp], [message])\n       *\n       * Asserts that `function` will _not_ throw an error that is an instance of\n       * `constructor`, or alternately that it will not throw an error with message\n       * matching `regexp`.\n       *\n       *     assert.doesNotThrow(fn, Error, 'function does not throw');\n       *\n       * @name doesNotThrow\n       * @param {Function} function\n       * @param {ErrorConstructor} constructor\n       * @param {RegExp} regexp\n       * @param {String} message\n       * @see https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Error#Error_types\n       * @api public\n       */\n\n      assert.doesNotThrow = function (fn, type, msg) {\n        if ('string' === typeof type) {\n          msg = type;\n          type = null;\n        }\n\n        new Assertion(fn, msg).to.not.Throw(type);\n      };\n\n      /**\n       * ### .operator(val1, operator, val2, [message])\n       *\n       * Compares two values using `operator`.\n       *\n       *     assert.operator(1, '<', 2, 'everything is ok');\n       *     assert.operator(1, '>', 2, 'this will fail');\n       *\n       * @name operator\n       * @param {Mixed} val1\n       * @param {String} operator\n       * @param {Mixed} val2\n       * @param {String} message\n       * @api public\n       */\n\n      assert.operator = function (val, operator, val2, msg) {\n        if (!~['==', '===', '>', '>=', '<', '<=', '!=', '!=='].indexOf(operator)) {\n          throw new Error('Invalid operator \"' + operator + '\"');\n        }\n        var test = new Assertion(eval(val + operator + val2), msg);\n        test.assert(\n            true === flag(test, 'object')\n          , 'expected ' + util.inspect(val) + ' to be ' + operator + ' ' + util.inspect(val2)\n          , 'expected ' + util.inspect(val) + ' to not be ' + operator + ' ' + util.inspect(val2) );\n      };\n\n      /**\n       * ### .closeTo(actual, expected, delta, [message])\n       *\n       * Asserts that the target is equal `expected`, to within a +/- `delta` range.\n       *\n       *     assert.closeTo(1.5, 1, 0.5, 'numbers are close');\n       *\n       * @name closeTo\n       * @param {Number} actual\n       * @param {Number} expected\n       * @param {Number} delta\n       * @param {String} message\n       * @api public\n       */\n\n      assert.closeTo = function (act, exp, delta, msg) {\n        new Assertion(act, msg).to.be.closeTo(exp, delta);\n      };\n\n      /*!\n       * Undocumented / untested\n       */\n\n      assert.ifError = function (val, msg) {\n        new Assertion(val, msg).to.not.be.ok;\n      };\n\n      /*!\n       * Aliases.\n       */\n\n      (function alias(name, as){\n        assert[as] = assert[name];\n        return alias;\n      })\n      ('Throw', 'throw')\n      ('Throw', 'throws');\n    };\n\n  }); // module: chai/interface/assert.js\n\n  require.register(\"chai/interface/expect.js\", function(module, exports, require){\n    /*!\n     * chai\n     * Copyright(c) 2011-2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    module.exports = function (chai, util) {\n      chai.expect = function (val, message) {\n        return new chai.Assertion(val, message);\n      };\n    };\n\n\n  }); // module: chai/interface/expect.js\n\n  require.register(\"chai/interface/should.js\", function(module, exports, require){\n    /*!\n     * chai\n     * Copyright(c) 2011-2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    module.exports = function (chai, util) {\n      var Assertion = chai.Assertion;\n\n      function loadShould () {\n        // modify Object.prototype to have `should`\n        Object.defineProperty(Object.prototype, 'should',\n          {\n            set: function (value) {\n              // See https://github.com/chaijs/chai/issues/86: this makes\n              // `whatever.should = someValue` actually set `someValue`, which is\n              // especially useful for `global.should = require('chai').should()`.\n              //\n              // Note that we have to use [[DefineProperty]] instead of [[Put]]\n              // since otherwise we would trigger this very setter!\n              Object.defineProperty(this, 'should', {\n                value: value,\n                enumerable: true,\n                configurable: true,\n                writable: true\n              });\n            }\n          , get: function(){\n              if (this instanceof String || this instanceof Number) {\n                return new Assertion(this.constructor(this));\n              } else if (this instanceof Boolean) {\n                return new Assertion(this == true);\n              }\n              return new Assertion(this);\n            }\n          , configurable: true\n        });\n\n        var should = {};\n\n        should.equal = function (val1, val2, msg) {\n          new Assertion(val1, msg).to.equal(val2);\n        };\n\n        should.Throw = function (fn, errt, errs, msg) {\n          new Assertion(fn, msg).to.Throw(errt, errs);\n        };\n\n        should.exist = function (val, msg) {\n          new Assertion(val, msg).to.exist;\n        }\n\n        // negation\n        should.not = {}\n\n        should.not.equal = function (val1, val2, msg) {\n          new Assertion(val1, msg).to.not.equal(val2);\n        };\n\n        should.not.Throw = function (fn, errt, errs, msg) {\n          new Assertion(fn, msg).to.not.Throw(errt, errs);\n        };\n\n        should.not.exist = function (val, msg) {\n          new Assertion(val, msg).to.not.exist;\n        }\n\n        should['throw'] = should['Throw'];\n        should.not['throw'] = should.not['Throw'];\n\n        return should;\n      };\n\n      chai.should = loadShould;\n      chai.Should = loadShould;\n    };\n\n  }); // module: chai/interface/should.js\n\n  require.register(\"chai/utils/addChainableMethod.js\", function(module, exports, require){\n    /*!\n     * Chai - addChainingMethod utility\n     * Copyright(c) 2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /*!\n     * Module dependencies\n     */\n\n    var transferFlags = require('./transferFlags');\n\n    /**\n     * ### addChainableMethod (ctx, name, method, chainingBehavior)\n     *\n     * Adds a method to an object, such that the method can also be chained.\n     *\n     *     utils.addChainableMethod(chai.Assertion.prototype, 'foo', function (str) {\n     *       var obj = utils.flag(this, 'object');\n     *       new chai.Assertion(obj).to.be.equal(str);\n     *     });\n     *\n     * Can also be accessed directly from `chai.Assertion`.\n     *\n     *     chai.Assertion.addChainableMethod('foo', fn, chainingBehavior);\n     *\n     * The result can then be used as both a method assertion, executing both `method` and\n     * `chainingBehavior`, or as a language chain, which only executes `chainingBehavior`.\n     *\n     *     expect(fooStr).to.be.foo('bar');\n     *     expect(fooStr).to.be.foo.equal('foo');\n     *\n     * @param {Object} ctx object to which the method is added\n     * @param {String} name of method to add\n     * @param {Function} method function to be used for `name`, when called\n     * @param {Function} chainingBehavior function to be called every time the property is accessed\n     * @name addChainableMethod\n     * @api public\n     */\n\n    module.exports = function (ctx, name, method, chainingBehavior) {\n      if (typeof chainingBehavior !== 'function')\n        chainingBehavior = function () { };\n\n      Object.defineProperty(ctx, name,\n        { get: function () {\n            chainingBehavior.call(this);\n\n            var assert = function () {\n              var result = method.apply(this, arguments);\n              return result === undefined ? this : result;\n            };\n\n            // Re-enumerate every time to better accomodate plugins.\n            var asserterNames = Object.getOwnPropertyNames(ctx);\n            asserterNames.forEach(function (asserterName) {\n              var pd = Object.getOwnPropertyDescriptor(ctx, asserterName)\n                , functionProtoPD = Object.getOwnPropertyDescriptor(Function.prototype, asserterName);\n              // Avoid trying to overwrite things that we can't, like `length` and `arguments`.\n              if (functionProtoPD && !functionProtoPD.configurable) return;\n              if (asserterName === 'arguments') return; // @see chaijs/chai/issues/69\n              Object.defineProperty(assert, asserterName, pd);\n            });\n\n            transferFlags(this, assert);\n            return assert;\n          }\n        , configurable: true\n      });\n    };\n\n  }); // module: chai/utils/addChainableMethod.js\n\n  require.register(\"chai/utils/addMethod.js\", function(module, exports, require){\n    /*!\n     * Chai - addMethod utility\n     * Copyright(c) 2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /**\n     * ### .addMethod (ctx, name, method)\n     *\n     * Adds a method to the prototype of an object.\n     *\n     *     utils.addMethod(chai.Assertion.prototype, 'foo', function (str) {\n     *       var obj = utils.flag(this, 'object');\n     *       new chai.Assertion(obj).to.be.equal(str);\n     *     });\n     *\n     * Can also be accessed directly from `chai.Assertion`.\n     *\n     *     chai.Assertion.addMethod('foo', fn);\n     *\n     * Then can be used as any other assertion.\n     *\n     *     expect(fooStr).to.be.foo('bar');\n     *\n     * @param {Object} ctx object to which the method is added\n     * @param {String} name of method to add\n     * @param {Function} method function to be used for name\n     * @name addMethod\n     * @api public\n     */\n\n    module.exports = function (ctx, name, method) {\n      ctx[name] = function () {\n        var result = method.apply(this, arguments);\n        return result === undefined ? this : result;\n      };\n    };\n\n  }); // module: chai/utils/addMethod.js\n\n  require.register(\"chai/utils/addProperty.js\", function(module, exports, require){\n    /*!\n     * Chai - addProperty utility\n     * Copyright(c) 2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /**\n     * ### addProperty (ctx, name, getter)\n     *\n     * Adds a property to the prototype of an object.\n     *\n     *     utils.addProperty(chai.Assertion.prototype, 'foo', function () {\n     *       var obj = utils.flag(this, 'object');\n     *       new chai.Assertion(obj).to.be.instanceof(Foo);\n     *     });\n     *\n     * Can also be accessed directly from `chai.Assertion`.\n     *\n     *     chai.Assertion.addProperty('foo', fn);\n     *\n     * Then can be used as any other assertion.\n     *\n     *     expect(myFoo).to.be.foo;\n     *\n     * @param {Object} ctx object to which the property is added\n     * @param {String} name of property to add\n     * @param {Function} getter function to be used for name\n     * @name addProperty\n     * @api public\n     */\n\n    module.exports = function (ctx, name, getter) {\n      Object.defineProperty(ctx, name,\n        { get: function () {\n            var result = getter.call(this);\n            return result === undefined ? this : result;\n          }\n        , configurable: true\n      });\n    };\n\n  }); // module: chai/utils/addProperty.js\n\n  require.register(\"chai/utils/eql.js\", function(module, exports, require){\n    // This is (almost) directly from Node.js assert\n    // https://github.com/joyent/node/blob/f8c335d0caf47f16d31413f89aa28eda3878e3aa/lib/assert.js\n\n    module.exports = _deepEqual;\n\n    // for the browser\n    var Buffer;\n    try {\n      Buffer = require('buffer').Buffer;\n    } catch (ex) {\n      Buffer = {\n        isBuffer: function () { return false; }\n      };\n    }\n\n    function _deepEqual(actual, expected, memos) {\n\n      // 7.1. All identical values are equivalent, as determined by ===.\n      if (actual === expected) {\n        return true;\n\n      } else if (Buffer.isBuffer(actual) && Buffer.isBuffer(expected)) {\n        if (actual.length != expected.length) return false;\n\n        for (var i = 0; i < actual.length; i++) {\n          if (actual[i] !== expected[i]) return false;\n        }\n\n        return true;\n\n      // 7.2. If the expected value is a Date object, the actual value is\n      // equivalent if it is also a Date object that refers to the same time.\n      } else if (actual instanceof Date && expected instanceof Date) {\n        return actual.getTime() === expected.getTime();\n\n      // 7.3. Other pairs that do not both pass typeof value == 'object',\n      // equivalence is determined by ==.\n      } else if (typeof actual != 'object' && typeof expected != 'object') {\n        return actual === expected;\n\n      // 7.4. For all other Object pairs, including Array objects, equivalence is\n      // determined by having the same number of owned properties (as verified\n      // with Object.prototype.hasOwnProperty.call), the same set of keys\n      // (although not necessarily the same order), equivalent values for every\n      // corresponding key, and an identical 'prototype' property. Note: this\n      // accounts for both named and indexed properties on Arrays.\n      } else {\n        return objEquiv(actual, expected, memos);\n      }\n    }\n\n    function isUndefinedOrNull(value) {\n      return value === null || value === undefined;\n    }\n\n    function isArguments(object) {\n      return Object.prototype.toString.call(object) == '[object Arguments]';\n    }\n\n    function objEquiv(a, b, memos) {\n      if (isUndefinedOrNull(a) || isUndefinedOrNull(b))\n        return false;\n\n      // an identical 'prototype' property.\n      if (a.prototype !== b.prototype) return false;\n\n      // check if we have already compared a and b\n      var i;\n      if (memos) {\n        for(i = 0; i < memos.length; i++) {\n          if ((memos[i][0] === a && memos[i][1] === b) ||\n              (memos[i][0] === b && memos[i][1] === a))\n            return true;\n        }\n      } else {\n        memos = [];\n      }\n\n      //~~~I've managed to break Object.keys through screwy arguments passing.\n      //   Converting to array solves the problem.\n      if (isArguments(a)) {\n        if (!isArguments(b)) {\n          return false;\n        }\n        a = pSlice.call(a);\n        b = pSlice.call(b);\n        return _deepEqual(a, b, memos);\n      }\n      try {\n        var ka = Object.keys(a),\n            kb = Object.keys(b),\n            key;\n      } catch (e) {//happens when one is a string literal and the other isn't\n        return false;\n      }\n\n      // having the same number of owned properties (keys incorporates\n      // hasOwnProperty)\n      if (ka.length != kb.length)\n        return false;\n\n      //the same set of keys (although not necessarily the same order),\n      ka.sort();\n      kb.sort();\n      //~~~cheap key test\n      for (i = ka.length - 1; i >= 0; i--) {\n        if (ka[i] != kb[i])\n          return false;\n      }\n\n      // remember objects we have compared to guard against circular references\n      memos.push([ a, b ]);\n\n      //equivalent values for every corresponding key, and\n      //~~~possibly expensive deep test\n      for (i = ka.length - 1; i >= 0; i--) {\n        key = ka[i];\n        if (!_deepEqual(a[key], b[key], memos)) return false;\n      }\n\n      return true;\n    }\n\n  }); // module: chai/utils/eql.js\n\n  require.register(\"chai/utils/flag.js\", function(module, exports, require){\n    /*!\n     * Chai - flag utility\n     * Copyright(c) 2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /**\n     * ### flag(object ,key, [value])\n     *\n     * Get or set a flag value on an object. If a\n     * value is provided it will be set, else it will\n     * return the currently set value or `undefined` if\n     * the value is not set.\n     *\n     *     utils.flag(this, 'foo', 'bar'); // setter\n     *     utils.flag(this, 'foo'); // getter, returns `bar`\n     *\n     * @param {Object} object (constructed Assertion\n     * @param {String} key\n     * @param {Mixed} value (optional)\n     * @name flag\n     * @api private\n     */\n\n    module.exports = function (obj, key, value) {\n      var flags = obj.__flags || (obj.__flags = Object.create(null));\n      if (arguments.length === 3) {\n        flags[key] = value;\n      } else {\n        return flags[key];\n      }\n    };\n\n  }); // module: chai/utils/flag.js\n\n  require.register(\"chai/utils/getActual.js\", function(module, exports, require){\n    /*!\n     * Chai - getActual utility\n     * Copyright(c) 2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /**\n     * # getActual(object, [actual])\n     *\n     * Returns the `actual` value for an Assertion\n     *\n     * @param {Object} object (constructed Assertion)\n     * @param {Arguments} chai.Assertion.prototype.assert arguments\n     */\n\n    module.exports = function (obj, args) {\n      var actual = args[4];\n      return 'undefined' !== typeof actual ? actual : obj._obj;\n    };\n\n  }); // module: chai/utils/getActual.js\n\n  require.register(\"chai/utils/getMessage.js\", function(module, exports, require){\n    /*!\n     * Chai - message composition utility\n     * Copyright(c) 2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /*!\n     * Module dependancies\n     */\n\n    var flag = require('./flag')\n      , getActual = require('./getActual')\n      , inspect = require('./inspect')\n      , objDisplay = require('./objDisplay');\n\n    /**\n     * ### .getMessage(object, message, negateMessage)\n     *\n     * Construct the error message based on flags\n     * and template tags. Template tags will return\n     * a stringified inspection of the object referenced.\n     *\n     * Messsage template tags:\n     * - `#{this}` current asserted object\n     * - `#{act}` actual value\n     * - `#{exp}` expected value\n     *\n     * @param {Object} object (constructed Assertion)\n     * @param {Arguments} chai.Assertion.prototype.assert arguments\n     * @name getMessage\n     * @api public\n     */\n\n    module.exports = function (obj, args) {\n      var negate = flag(obj, 'negate')\n        , val = flag(obj, 'object')\n        , expected = args[3]\n        , actual = getActual(obj, args)\n        , msg = negate ? args[2] : args[1]\n        , flagMsg = flag(obj, 'message');\n\n      msg = msg || '';\n      msg = msg\n        .replace(/#{this}/g, objDisplay(val))\n        .replace(/#{act}/g, objDisplay(actual))\n        .replace(/#{exp}/g, objDisplay(expected));\n\n      return flagMsg ? flagMsg + ': ' + msg : msg;\n    };\n\n  }); // module: chai/utils/getMessage.js\n\n  require.register(\"chai/utils/getName.js\", function(module, exports, require){\n    /*!\n     * Chai - getName utility\n     * Copyright(c) 2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /**\n     * # getName(func)\n     *\n     * Gets the name of a function, in a cross-browser way.\n     *\n     * @param {Function} a function (usually a constructor)\n     */\n\n    module.exports = function (func) {\n      if (func.name) return func.name;\n\n      var match = /^\\s?function ([^(]*)\\(/.exec(func);\n      return match && match[1] ? match[1] : \"\";\n    };\n\n  }); // module: chai/utils/getName.js\n\n  require.register(\"chai/utils/getPathValue.js\", function(module, exports, require){\n    /*!\n     * Chai - getPathValue utility\n     * Copyright(c) 2012 Jake Luer <jake@alogicalparadox.com>\n     * @see https://github.com/logicalparadox/filtr\n     * MIT Licensed\n     */\n\n    /**\n     * ### .getPathValue(path, object)\n     *\n     * This allows the retrieval of values in an\n     * object given a string path.\n     *\n     *     var obj = {\n     *         prop1: {\n     *             arr: ['a', 'b', 'c']\n     *           , str: 'Hello'\n     *         }\n     *       , prop2: {\n     *             arr: [ { nested: 'Universe' } ]\n     *           , str: 'Hello again!'\n     *         }\n     *     }\n     *\n     * The following would be the results.\n     *\n     *     getPathValue('prop1.str', obj); // Hello\n     *     getPathValue('prop1.att[2]', obj); // b\n     *     getPathValue('prop2.arr[0].nested', obj); // Universe\n     *\n     * @param {String} path\n     * @param {Object} object\n     * @returns {Object} value or `undefined`\n     * @name getPathValue\n     * @api public\n     */\n\n    var getPathValue = module.exports = function (path, obj) {\n      var parsed = parsePath(path);\n      return _getPathValue(parsed, obj);\n    };\n\n    /*!\n     * ## parsePath(path)\n     *\n     * Helper function used to parse string object\n     * paths. Use in conjunction with `_getPathValue`.\n     *\n     *      var parsed = parsePath('myobject.property.subprop');\n     *\n     * ### Paths:\n     *\n     * * Can be as near infinitely deep and nested\n     * * Arrays are also valid using the formal `myobject.document[3].property`.\n     *\n     * @param {String} path\n     * @returns {Object} parsed\n     * @api private\n     */\n\n    function parsePath (path) {\n      var str = path.replace(/\\[/g, '.[')\n        , parts = str.match(/(\\\\\\.|[^.]+?)+/g);\n      return parts.map(function (value) {\n        var re = /\\[(\\d+)\\]$/\n          , mArr = re.exec(value)\n        if (mArr) return { i: parseFloat(mArr[1]) };\n        else return { p: value };\n      });\n    };\n\n    /*!\n     * ## _getPathValue(parsed, obj)\n     *\n     * Helper companion function for `.parsePath` that returns\n     * the value located at the parsed address.\n     *\n     *      var value = getPathValue(parsed, obj);\n     *\n     * @param {Object} parsed definition from `parsePath`.\n     * @param {Object} object to search against\n     * @returns {Object|Undefined} value\n     * @api private\n     */\n\n    function _getPathValue (parsed, obj) {\n      var tmp = obj\n        , res;\n      for (var i = 0, l = parsed.length; i < l; i++) {\n        var part = parsed[i];\n        if (tmp) {\n          if ('undefined' !== typeof part.p)\n            tmp = tmp[part.p];\n          else if ('undefined' !== typeof part.i)\n            tmp = tmp[part.i];\n          if (i == (l - 1)) res = tmp;\n        } else {\n          res = undefined;\n        }\n      }\n      return res;\n    };\n\n  }); // module: chai/utils/getPathValue.js\n\n  require.register(\"chai/utils/index.js\", function(module, exports, require){\n    /*!\n     * chai\n     * Copyright(c) 2011 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /*!\n     * Main exports\n     */\n\n    var exports = module.exports = {};\n\n    /*!\n     * test utility\n     */\n\n    exports.test = require('./test');\n\n    /*!\n     * message utility\n     */\n\n    exports.getMessage = require('./getMessage');\n\n    /*!\n     * actual utility\n     */\n\n    exports.getActual = require('./getActual');\n\n    /*!\n     * Inspect util\n     */\n\n    exports.inspect = require('./inspect');\n\n    /*!\n     * Object Display util\n     */\n\n    exports.objDisplay = require('./objDisplay');\n\n    /*!\n     * Flag utility\n     */\n\n    exports.flag = require('./flag');\n\n    /*!\n     * Flag transferring utility\n     */\n\n    exports.transferFlags = require('./transferFlags');\n\n    /*!\n     * Deep equal utility\n     */\n\n    exports.eql = require('./eql');\n\n    /*!\n     * Deep path value\n     */\n\n    exports.getPathValue = require('./getPathValue');\n\n    /*!\n     * Function name\n     */\n\n    exports.getName = require('./getName');\n\n    /*!\n     * add Property\n     */\n\n    exports.addProperty = require('./addProperty');\n\n    /*!\n     * add Method\n     */\n\n    exports.addMethod = require('./addMethod');\n\n    /*!\n     * overwrite Property\n     */\n\n    exports.overwriteProperty = require('./overwriteProperty');\n\n    /*!\n     * overwrite Method\n     */\n\n    exports.overwriteMethod = require('./overwriteMethod');\n\n    /*!\n     * Add a chainable method\n     */\n\n    exports.addChainableMethod = require('./addChainableMethod');\n\n\n  }); // module: chai/utils/index.js\n\n  require.register(\"chai/utils/inspect.js\", function(module, exports, require){\n    // This is (almost) directly from Node.js utils\n    // https://github.com/joyent/node/blob/f8c335d0caf47f16d31413f89aa28eda3878e3aa/lib/util.js\n\n    var getName = require('./getName');\n\n    module.exports = inspect;\n\n    /**\n     * Echos the value of a value. Trys to print the value out\n     * in the best way possible given the different types.\n     *\n     * @param {Object} obj The object to print out.\n     * @param {Boolean} showHidden Flag that shows hidden (not enumerable)\n     *    properties of objects.\n     * @param {Number} depth Depth in which to descend in object. Default is 2.\n     * @param {Boolean} colors Flag to turn on ANSI escape codes to color the\n     *    output. Default is false (no coloring).\n     */\n    function inspect(obj, showHidden, depth, colors) {\n      var ctx = {\n        showHidden: showHidden,\n        seen: [],\n        stylize: function (str) { return str; }\n      };\n      return formatValue(ctx, obj, (typeof depth === 'undefined' ? 2 : depth));\n    }\n\n    // https://gist.github.com/1044128/\n    var getOuterHTML = function(element) {\n      if ('outerHTML' in element) return element.outerHTML;\n      var ns = \"http://www.w3.org/1999/xhtml\";\n      var container = document.createElementNS(ns, '_');\n      var elemProto = (window.HTMLElement || window.Element).prototype;\n      var xmlSerializer = new XMLSerializer();\n      var html;\n      if (document.xmlVersion) {\n        return xmlSerializer.serializeToString(element);\n      } else {\n        container.appendChild(element.cloneNode(false));\n        html = container.innerHTML.replace('><', '>' + element.innerHTML + '<');\n        container.innerHTML = '';\n        return html;\n      }\n    };\n      \n    // Returns true if object is a DOM element.\n    var isDOMElement = function (object) {\n      if (typeof HTMLElement === 'object') {\n        return object instanceof HTMLElement;\n      } else {\n        return object &&\n          typeof object === 'object' &&\n          object.nodeType === 1 &&\n          typeof object.nodeName === 'string';\n      }\n    };\n\n    function formatValue(ctx, value, recurseTimes) {\n      // Provide a hook for user-specified inspect functions.\n      // Check that value is an object with an inspect function on it\n      if (value && typeof value.inspect === 'function' &&\n          // Filter out the util module, it's inspect function is special\n          value.inspect !== exports.inspect &&\n          // Also filter out any prototype objects using the circular check.\n          !(value.constructor && value.constructor.prototype === value)) {\n        return value.inspect(recurseTimes);\n      }\n\n      // Primitive types cannot have properties\n      var primitive = formatPrimitive(ctx, value);\n      if (primitive) {\n        return primitive;\n      }\n\n      // If it's DOM elem, get outer HTML.\n      if (isDOMElement(value)) {\n        return getOuterHTML(value);\n      }\n\n      // Look up the keys of the object.\n      var visibleKeys = Object.keys(value);\n      var keys = ctx.showHidden ? Object.getOwnPropertyNames(value) : visibleKeys;\n\n      // Some type of object without properties can be shortcutted.\n      // In IE, errors have a single `stack` property, or if they are vanilla `Error`,\n      // a `stack` plus `description` property; ignore those for consistency.\n      if (keys.length === 0 || (isError(value) && (\n          (keys.length === 1 && keys[0] === 'stack') ||\n          (keys.length === 2 && keys[0] === 'description' && keys[1] === 'stack')\n         ))) {\n        if (typeof value === 'function') {\n          var name = getName(value);\n          var nameSuffix = name ? ': ' + name : '';\n          return ctx.stylize('[Function' + nameSuffix + ']', 'special');\n        }\n        if (isRegExp(value)) {\n          return ctx.stylize(RegExp.prototype.toString.call(value), 'regexp');\n        }\n        if (isDate(value)) {\n          return ctx.stylize(Date.prototype.toUTCString.call(value), 'date');\n        }\n        if (isError(value)) {\n          return formatError(value);\n        }\n      }\n\n      var base = '', array = false, braces = ['{', '}'];\n\n      // Make Array say that they are Array\n      if (isArray(value)) {\n        array = true;\n        braces = ['[', ']'];\n      }\n\n      // Make functions say that they are functions\n      if (typeof value === 'function') {\n        var name = getName(value);\n        var nameSuffix = name ? ': ' + name : '';\n        base = ' [Function' + nameSuffix + ']';\n      }\n\n      // Make RegExps say that they are RegExps\n      if (isRegExp(value)) {\n        base = ' ' + RegExp.prototype.toString.call(value);\n      }\n\n      // Make dates with properties first say the date\n      if (isDate(value)) {\n        base = ' ' + Date.prototype.toUTCString.call(value);\n      }\n\n      // Make error with message first say the error\n      if (isError(value)) {\n        return formatError(value);\n      }\n\n      if (keys.length === 0 && (!array || value.length == 0)) {\n        return braces[0] + base + braces[1];\n      }\n\n      if (recurseTimes < 0) {\n        if (isRegExp(value)) {\n          return ctx.stylize(RegExp.prototype.toString.call(value), 'regexp');\n        } else {\n          return ctx.stylize('[Object]', 'special');\n        }\n      }\n\n      ctx.seen.push(value);\n\n      var output;\n      if (array) {\n        output = formatArray(ctx, value, recurseTimes, visibleKeys, keys);\n      } else {\n        output = keys.map(function(key) {\n          return formatProperty(ctx, value, recurseTimes, visibleKeys, key, array);\n        });\n      }\n\n      ctx.seen.pop();\n\n      return reduceToSingleString(output, base, braces);\n    }\n\n\n    function formatPrimitive(ctx, value) {\n      switch (typeof value) {\n        case 'undefined':\n          return ctx.stylize('undefined', 'undefined');\n\n        case 'string':\n          var simple = '\\'' + JSON.stringify(value).replace(/^\"|\"$/g, '')\n                                                   .replace(/'/g, \"\\\\'\")\n                                                   .replace(/\\\\\"/g, '\"') + '\\'';\n          return ctx.stylize(simple, 'string');\n\n        case 'number':\n          return ctx.stylize('' + value, 'number');\n\n        case 'boolean':\n          return ctx.stylize('' + value, 'boolean');\n      }\n      // For some reason typeof null is \"object\", so special case here.\n      if (value === null) {\n        return ctx.stylize('null', 'null');\n      }\n    }\n\n\n    function formatError(value) {\n      return '[' + Error.prototype.toString.call(value) + ']';\n    }\n\n\n    function formatArray(ctx, value, recurseTimes, visibleKeys, keys) {\n      var output = [];\n      for (var i = 0, l = value.length; i < l; ++i) {\n        if (Object.prototype.hasOwnProperty.call(value, String(i))) {\n          output.push(formatProperty(ctx, value, recurseTimes, visibleKeys,\n              String(i), true));\n        } else {\n          output.push('');\n        }\n      }\n      keys.forEach(function(key) {\n        if (!key.match(/^\\d+$/)) {\n          output.push(formatProperty(ctx, value, recurseTimes, visibleKeys,\n              key, true));\n        }\n      });\n      return output;\n    }\n\n\n    function formatProperty(ctx, value, recurseTimes, visibleKeys, key, array) {\n      var name, str;\n      if (value.__lookupGetter__) {\n        if (value.__lookupGetter__(key)) {\n          if (value.__lookupSetter__(key)) {\n            str = ctx.stylize('[Getter/Setter]', 'special');\n          } else {\n            str = ctx.stylize('[Getter]', 'special');\n          }\n        } else {\n          if (value.__lookupSetter__(key)) {\n            str = ctx.stylize('[Setter]', 'special');\n          }\n        }\n      }\n      if (visibleKeys.indexOf(key) < 0) {\n        name = '[' + key + ']';\n      }\n      if (!str) {\n        if (ctx.seen.indexOf(value[key]) < 0) {\n          if (recurseTimes === null) {\n            str = formatValue(ctx, value[key], null);\n          } else {\n            str = formatValue(ctx, value[key], recurseTimes - 1);\n          }\n          if (str.indexOf('\\n') > -1) {\n            if (array) {\n              str = str.split('\\n').map(function(line) {\n                return '  ' + line;\n              }).join('\\n').substr(2);\n            } else {\n              str = '\\n' + str.split('\\n').map(function(line) {\n                return '   ' + line;\n              }).join('\\n');\n            }\n          }\n        } else {\n          str = ctx.stylize('[Circular]', 'special');\n        }\n      }\n      if (typeof name === 'undefined') {\n        if (array && key.match(/^\\d+$/)) {\n          return str;\n        }\n        name = JSON.stringify('' + key);\n        if (name.match(/^\"([a-zA-Z_][a-zA-Z_0-9]*)\"$/)) {\n          name = name.substr(1, name.length - 2);\n          name = ctx.stylize(name, 'name');\n        } else {\n          name = name.replace(/'/g, \"\\\\'\")\n                     .replace(/\\\\\"/g, '\"')\n                     .replace(/(^\"|\"$)/g, \"'\");\n          name = ctx.stylize(name, 'string');\n        }\n      }\n\n      return name + ': ' + str;\n    }\n\n\n    function reduceToSingleString(output, base, braces) {\n      var numLinesEst = 0;\n      var length = output.reduce(function(prev, cur) {\n        numLinesEst++;\n        if (cur.indexOf('\\n') >= 0) numLinesEst++;\n        return prev + cur.length + 1;\n      }, 0);\n\n      if (length > 60) {\n        return braces[0] +\n               (base === '' ? '' : base + '\\n ') +\n               ' ' +\n               output.join(',\\n  ') +\n               ' ' +\n               braces[1];\n      }\n\n      return braces[0] + base + ' ' + output.join(', ') + ' ' + braces[1];\n    }\n\n    function isArray(ar) {\n      return Array.isArray(ar) ||\n             (typeof ar === 'object' && objectToString(ar) === '[object Array]');\n    }\n\n    function isRegExp(re) {\n      return typeof re === 'object' && objectToString(re) === '[object RegExp]';\n    }\n\n    function isDate(d) {\n      return typeof d === 'object' && objectToString(d) === '[object Date]';\n    }\n\n    function isError(e) {\n      return typeof e === 'object' && objectToString(e) === '[object Error]';\n    }\n\n    function objectToString(o) {\n      return Object.prototype.toString.call(o);\n    }\n\n  }); // module: chai/utils/inspect.js\n\n  require.register(\"chai/utils/objDisplay.js\", function(module, exports, require){\n    /*!\n     * Chai - flag utility\n     * Copyright(c) 2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /*!\n     * Module dependancies\n     */\n\n    var inspect = require('./inspect');\n\n    /**\n     * ### .objDisplay (object)\n     *\n     * Determines if an object or an array matches\n     * criteria to be inspected in-line for error\n     * messages or should be truncated.\n     *\n     * @param {Mixed} javascript object to inspect\n     * @name objDisplay\n     * @api public\n     */\n\n    module.exports = function (obj) {\n      var str = inspect(obj)\n        , type = Object.prototype.toString.call(obj);\n\n      if (str.length >= 40) {\n        if (type === '[object Array]') {\n          return '[ Array(' + obj.length + ') ]';\n        } else if (type === '[object Object]') {\n          var keys = Object.keys(obj)\n            , kstr = keys.length > 2\n              ? keys.splice(0, 2).join(', ') + ', ...'\n              : keys.join(', ');\n          return '{ Object (' + kstr + ') }';\n        } else {\n          return str;\n        }\n      } else {\n        return str;\n      }\n    };\n\n  }); // module: chai/utils/objDisplay.js\n\n  require.register(\"chai/utils/overwriteMethod.js\", function(module, exports, require){\n    /*!\n     * Chai - overwriteMethod utility\n     * Copyright(c) 2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /**\n     * ### overwriteMethod (ctx, name, fn)\n     *\n     * Overwites an already existing method and provides\n     * access to previous function. Must return function\n     * to be used for name.\n     *\n     *     utils.overwriteMethod(chai.Assertion.prototype, 'equal', function (_super) {\n     *       return function (str) {\n     *         var obj = utils.flag(this, 'object');\n     *         if (obj instanceof Foo) {\n     *           new chai.Assertion(obj.value).to.equal(str);\n     *         } else {\n     *           _super.apply(this, arguments);\n     *         }\n     *       }\n     *     });\n     *\n     * Can also be accessed directly from `chai.Assertion`.\n     *\n     *     chai.Assertion.overwriteMethod('foo', fn);\n     *\n     * Then can be used as any other assertion.\n     *\n     *     expect(myFoo).to.equal('bar');\n     *\n     * @param {Object} ctx object whose method is to be overwritten\n     * @param {String} name of method to overwrite\n     * @param {Function} method function that returns a function to be used for name\n     * @name overwriteMethod\n     * @api public\n     */\n\n    module.exports = function (ctx, name, method) {\n      var _method = ctx[name]\n        , _super = function () { return this; };\n\n      if (_method && 'function' === typeof _method)\n        _super = _method;\n\n      ctx[name] = function () {\n        var result = method(_super).apply(this, arguments);\n        return result === undefined ? this : result;\n      }\n    };\n\n  }); // module: chai/utils/overwriteMethod.js\n\n  require.register(\"chai/utils/overwriteProperty.js\", function(module, exports, require){\n    /*!\n     * Chai - overwriteProperty utility\n     * Copyright(c) 2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /**\n     * ### overwriteProperty (ctx, name, fn)\n     *\n     * Overwites an already existing property getter and provides\n     * access to previous value. Must return function to use as getter.\n     *\n     *     utils.overwriteProperty(chai.Assertion.prototype, 'ok', function (_super) {\n     *       return function () {\n     *         var obj = utils.flag(this, 'object');\n     *         if (obj instanceof Foo) {\n     *           new chai.Assertion(obj.name).to.equal('bar');\n     *         } else {\n     *           _super.call(this);\n     *         }\n     *       }\n     *     });\n     *\n     *\n     * Can also be accessed directly from `chai.Assertion`.\n     *\n     *     chai.Assertion.overwriteProperty('foo', fn);\n     *\n     * Then can be used as any other assertion.\n     *\n     *     expect(myFoo).to.be.ok;\n     *\n     * @param {Object} ctx object whose property is to be overwritten\n     * @param {String} name of property to overwrite\n     * @param {Function} getter function that returns a getter function to be used for name\n     * @name overwriteProperty\n     * @api public\n     */\n\n    module.exports = function (ctx, name, getter) {\n      var _get = Object.getOwnPropertyDescriptor(ctx, name)\n        , _super = function () {};\n\n      if (_get && 'function' === typeof _get.get)\n        _super = _get.get\n\n      Object.defineProperty(ctx, name,\n        { get: function () {\n            var result = getter(_super).call(this);\n            return result === undefined ? this : result;\n          }\n        , configurable: true\n      });\n    };\n\n  }); // module: chai/utils/overwriteProperty.js\n\n  require.register(\"chai/utils/test.js\", function(module, exports, require){\n    /*!\n     * Chai - test utility\n     * Copyright(c) 2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /*!\n     * Module dependancies\n     */\n\n    var flag = require('./flag');\n\n    /**\n     * # test(object, expression)\n     *\n     * Test and object for expression.\n     *\n     * @param {Object} object (constructed Assertion)\n     * @param {Arguments} chai.Assertion.prototype.assert arguments\n     */\n\n    module.exports = function (obj, args) {\n      var negate = flag(obj, 'negate')\n        , expr = args[0];\n      return negate ? !expr : expr;\n    };\n\n  }); // module: chai/utils/test.js\n\n  require.register(\"chai/utils/transferFlags.js\", function(module, exports, require){\n    /*!\n     * Chai - transferFlags utility\n     * Copyright(c) 2012 Jake Luer <jake@alogicalparadox.com>\n     * MIT Licensed\n     */\n\n    /**\n     * ### transferFlags(assertion, object, includeAll = true)\n     *\n     * Transfer all the flags for `assertion` to `object`. If\n     * `includeAll` is set to `false`, then the base Chai\n     * assertion flags (namely `object`, `ssfi`, and `message`)\n     * will not be transferred.\n     *\n     *\n     *     var newAssertion = new Assertion();\n     *     utils.transferFlags(assertion, newAssertion);\n     *\n     *     var anotherAsseriton = new Assertion(myObj);\n     *     utils.transferFlags(assertion, anotherAssertion, false);\n     *\n     * @param {Assertion} assertion the assertion to transfer the flags from\n     * @param {Object} object the object to transfer the flags too; usually a new assertion\n     * @param {Boolean} includeAll\n     * @name getAllFlags\n     * @api private\n     */\n\n    module.exports = function (assertion, object, includeAll) {\n      var flags = assertion.__flags || (assertion.__flags = Object.create(null));\n\n      if (!object.__flags) {\n        object.__flags = Object.create(null);\n      }\n\n      includeAll = arguments.length === 3 ? includeAll : true;\n\n      for (var flag in flags) {\n        if (includeAll ||\n            (flag !== 'object' && flag !== 'ssfi' && flag != 'message')) {\n          object.__flags[flag] = flags[flag];\n        }\n      }\n    };\n\n  }); // module: chai/utils/transferFlags.js\n\n  require.alias(\"./chai.js\", \"chai\");\n\n  return require('chai');\n});"
  },
  {
    "path": "test/lib/expect.js",
    "content": "/*!\n * chai\n * Copyright(c) 2011-2012 Jake Luer <jake@alogicalparadox.com>\n * MIT Licensed\n */\n\nmodule.exports = function (chai, util) {\n  chai.expect = function (val, message) {\n    return new chai.Assertion(val, message);\n  };\n};\n\n"
  },
  {
    "path": "test/lib/mocha/mocha.css",
    "content": "@charset \"utf-8\";\n\nbody {\n  font: 20px/1.5 \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  padding: 60px 50px;\n}\n\n#mocha ul, #mocha li {\n  margin: 0;\n  padding: 0;\n}\n\n#mocha ul {\n  list-style: none;\n}\n\n#mocha h1, #mocha h2 {\n  margin: 0;\n}\n\n#mocha h1 {\n  margin-top: 15px;\n  font-size: 1em;\n  font-weight: 200;\n}\n\n#mocha h1 a {\n  text-decoration: none;\n  color: inherit;\n}\n\n#mocha h1 a:hover {\n  text-decoration: underline;\n}\n\n#mocha .suite .suite h1 {\n  margin-top: 0;\n  font-size: .8em;\n}\n\n.hidden {\n  display: none;\n}\n\n#mocha h2 {\n  font-size: 12px;\n  font-weight: normal;\n  cursor: pointer;\n}\n\n#mocha .suite {\n  margin-left: 15px;\n}\n\n#mocha .test {\n  margin-left: 15px;\n  overflow: hidden;\n}\n\n#mocha .test.pending:hover h2::after {\n  content: '(pending)';\n  font-family: arial;\n}\n\n#mocha .test.pass.medium .duration {\n  background: #C09853;\n}\n\n#mocha .test.pass.slow .duration {\n  background: #B94A48;\n}\n\n#mocha .test.pass::before {\n  content: '✓';\n  font-size: 12px;\n  display: block;\n  float: left;\n  margin-right: 5px;\n  color: #00d6b2;\n}\n\n#mocha .test.pass .duration {\n  font-size: 9px;\n  margin-left: 5px;\n  padding: 2px 5px;\n  color: white;\n  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);\n  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);\n  box-shadow: inset 0 1px 1px rgba(0,0,0,.2);\n  -webkit-border-radius: 5px;\n  -moz-border-radius: 5px;\n  -ms-border-radius: 5px;\n  -o-border-radius: 5px;\n  border-radius: 5px;\n}\n\n#mocha .test.pass.fast .duration {\n  display: none;\n}\n\n#mocha .test.pending {\n  color: #0b97c4;\n}\n\n#mocha .test.pending::before {\n  content: '◦';\n  color: #0b97c4;\n}\n\n#mocha .test.fail {\n  color: #c00;\n}\n\n#mocha .test.fail pre {\n  color: black;\n}\n\n#mocha .test.fail::before {\n  content: '✖';\n  font-size: 12px;\n  display: block;\n  float: left;\n  margin-right: 5px;\n  color: #c00;\n}\n\n#mocha .test pre.error {\n  color: #c00;\n  max-height: 300px;\n  overflow: auto;\n}\n\n#mocha .test pre {\n  display: block;\n  float: left;\n  clear: left;\n  font: 12px/1.5 monaco, monospace;\n  margin: 5px;\n  padding: 15px;\n  border: 1px solid #eee;\n  border-bottom-color: #ddd;\n  -webkit-border-radius: 3px;\n  -webkit-box-shadow: 0 1px 3px #eee;\n  -moz-border-radius: 3px;\n  -moz-box-shadow: 0 1px 3px #eee;\n}\n\n#mocha .test h2 {\n  position: relative;\n}\n\n#mocha .test a.replay {\n  position: absolute;\n  top: 3px;\n  right: 0;\n  text-decoration: none;\n  vertical-align: middle;\n  display: block;\n  width: 15px;\n  height: 15px;\n  line-height: 15px;\n  text-align: center;\n  background: #eee;\n  font-size: 15px;\n  -moz-border-radius: 15px;\n  border-radius: 15px;\n  -webkit-transition: opacity 200ms;\n  -moz-transition: opacity 200ms;\n  transition: opacity 200ms;\n  opacity: 0.3;\n  color: #888;\n}\n\n#mocha .test:hover a.replay {\n  opacity: 1;\n}\n\n#mocha-report.pass .test.fail {\n  display: none;\n}\n\n#mocha-report.fail .test.pass {\n  display: none;\n}\n\n#mocha-error {\n  color: #c00;\n  font-size: 1.5  em;\n  font-weight: 100;\n  letter-spacing: 1px;\n}\n\n#mocha-stats {\n  position: fixed;\n  top: 15px;\n  right: 10px;\n  font-size: 12px;\n  margin: 0;\n  color: #888;\n}\n\n#mocha-stats .progress {\n  float: right;\n  padding-top: 0;\n}\n\n#mocha-stats em {\n  color: black;\n}\n\n#mocha-stats a {\n  text-decoration: none;\n  color: inherit;\n}\n\n#mocha-stats a:hover {\n  border-bottom: 1px solid #eee;\n}\n\n#mocha-stats li {\n  display: inline-block;\n  margin: 0 5px;\n  list-style: none;\n  padding-top: 11px;\n}\n\ncode .comment { color: #ddd }\ncode .init { color: #2F6FAD }\ncode .string { color: #5890AD }\ncode .keyword { color: #8A6343 }\ncode .number { color: #2F6FAD }\n"
  },
  {
    "path": "test/lib/mocha/mocha.js",
    "content": ";(function(){\n\n\n// CommonJS require()\n\nfunction require(p){\n    var path = require.resolve(p)\n      , mod = require.modules[path];\n    if (!mod) throw new Error('failed to require \"' + p + '\"');\n    if (!mod.exports) {\n      mod.exports = {};\n      mod.call(mod.exports, mod, mod.exports, require.relative(path));\n    }\n    return mod.exports;\n  }\n\nrequire.modules = {};\n\nrequire.resolve = function (path){\n    var orig = path\n      , reg = path + '.js'\n      , index = path + '/index.js';\n    return require.modules[reg] && reg\n      || require.modules[index] && index\n      || orig;\n  };\n\nrequire.register = function (path, fn){\n    require.modules[path] = fn;\n  };\n\nrequire.relative = function (parent) {\n    return function(p){\n      if ('.' != p.charAt(0)) return require(p);\n      \n      var path = parent.split('/')\n        , segs = p.split('/');\n      path.pop();\n      \n      for (var i = 0; i < segs.length; i++) {\n        var seg = segs[i];\n        if ('..' == seg) path.pop();\n        else if ('.' != seg) path.push(seg);\n      }\n\n      return require(path.join('/'));\n    };\n  };\n\n\nrequire.register(\"browser/debug.js\", function(module, exports, require){\n\nmodule.exports = function(type){\n  return function(){\n    \n  }\n};\n}); // module: browser/debug.js\n\nrequire.register(\"browser/diff.js\", function(module, exports, require){\n/* See license.txt for terms of usage */\n\n/*\n * Text diff implementation.\n * \n * This library supports the following APIS:\n * JsDiff.diffChars: Character by character diff\n * JsDiff.diffWords: Word (as defined by \\b regex) diff which ignores whitespace\n * JsDiff.diffLines: Line based diff\n * \n * JsDiff.diffCss: Diff targeted at CSS content\n * \n * These methods are based on the implementation proposed in\n * \"An O(ND) Difference Algorithm and its Variations\" (Myers, 1986).\n * http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.4.6927\n */\nvar JsDiff = (function() {\n  function clonePath(path) {\n    return { newPos: path.newPos, components: path.components.slice(0) };\n  }\n  function removeEmpty(array) {\n    var ret = [];\n    for (var i = 0; i < array.length; i++) {\n      if (array[i]) {\n        ret.push(array[i]);\n      }\n    }\n    return ret;\n  }\n  function escapeHTML(s) {\n    var n = s;\n    n = n.replace(/&/g, \"&amp;\");\n    n = n.replace(/</g, \"&lt;\");\n    n = n.replace(/>/g, \"&gt;\");\n    n = n.replace(/\"/g, \"&quot;\");\n\n    return n;\n  }\n\n\n  var fbDiff = function(ignoreWhitespace) {\n    this.ignoreWhitespace = ignoreWhitespace;\n  };\n  fbDiff.prototype = {\n      diff: function(oldString, newString) {\n        // Handle the identity case (this is due to unrolling editLength == 0\n        if (newString == oldString) {\n          return [{ value: newString }];\n        }\n        if (!newString) {\n          return [{ value: oldString, removed: true }];\n        }\n        if (!oldString) {\n          return [{ value: newString, added: true }];\n        }\n\n        newString = this.tokenize(newString);\n        oldString = this.tokenize(oldString);\n\n        var newLen = newString.length, oldLen = oldString.length;\n        var maxEditLength = newLen + oldLen;\n        var bestPath = [{ newPos: -1, components: [] }];\n\n        // Seed editLength = 0\n        var oldPos = this.extractCommon(bestPath[0], newString, oldString, 0);\n        if (bestPath[0].newPos+1 >= newLen && oldPos+1 >= oldLen) {\n          return bestPath[0].components;\n        }\n\n        for (var editLength = 1; editLength <= maxEditLength; editLength++) {\n          for (var diagonalPath = -1*editLength; diagonalPath <= editLength; diagonalPath+=2) {\n            var basePath;\n            var addPath = bestPath[diagonalPath-1],\n                removePath = bestPath[diagonalPath+1];\n            oldPos = (removePath ? removePath.newPos : 0) - diagonalPath;\n            if (addPath) {\n              // No one else is going to attempt to use this value, clear it\n              bestPath[diagonalPath-1] = undefined;\n            }\n\n            var canAdd = addPath && addPath.newPos+1 < newLen;\n            var canRemove = removePath && 0 <= oldPos && oldPos < oldLen;\n            if (!canAdd && !canRemove) {\n              bestPath[diagonalPath] = undefined;\n              continue;\n            }\n\n            // Select the diagonal that we want to branch from. We select the prior\n            // path whose position in the new string is the farthest from the origin\n            // and does not pass the bounds of the diff graph\n            if (!canAdd || (canRemove && addPath.newPos < removePath.newPos)) {\n              basePath = clonePath(removePath);\n              this.pushComponent(basePath.components, oldString[oldPos], undefined, true);\n            } else {\n              basePath = clonePath(addPath);\n              basePath.newPos++;\n              this.pushComponent(basePath.components, newString[basePath.newPos], true, undefined);\n            }\n\n            var oldPos = this.extractCommon(basePath, newString, oldString, diagonalPath);\n\n            if (basePath.newPos+1 >= newLen && oldPos+1 >= oldLen) {\n              return basePath.components;\n            } else {\n              bestPath[diagonalPath] = basePath;\n            }\n          }\n        }\n      },\n\n      pushComponent: function(components, value, added, removed) {\n        var last = components[components.length-1];\n        if (last && last.added === added && last.removed === removed) {\n          // We need to clone here as the component clone operation is just\n          // as shallow array clone\n          components[components.length-1] =\n            {value: this.join(last.value, value), added: added, removed: removed };\n        } else {\n          components.push({value: value, added: added, removed: removed });\n        }\n      },\n      extractCommon: function(basePath, newString, oldString, diagonalPath) {\n        var newLen = newString.length,\n            oldLen = oldString.length,\n            newPos = basePath.newPos,\n            oldPos = newPos - diagonalPath;\n        while (newPos+1 < newLen && oldPos+1 < oldLen && this.equals(newString[newPos+1], oldString[oldPos+1])) {\n          newPos++;\n          oldPos++;\n          \n          this.pushComponent(basePath.components, newString[newPos], undefined, undefined);\n        }\n        basePath.newPos = newPos;\n        return oldPos;\n      },\n\n      equals: function(left, right) {\n        var reWhitespace = /\\S/;\n        if (this.ignoreWhitespace && !reWhitespace.test(left) && !reWhitespace.test(right)) {\n          return true;\n        } else {\n          return left == right;\n        }\n      },\n      join: function(left, right) {\n        return left + right;\n      },\n      tokenize: function(value) {\n        return value;\n      }\n  };\n  \n  var CharDiff = new fbDiff();\n  \n  var WordDiff = new fbDiff(true);\n  WordDiff.tokenize = function(value) {\n    return removeEmpty(value.split(/(\\s+|\\b)/));\n  };\n  \n  var CssDiff = new fbDiff(true);\n  CssDiff.tokenize = function(value) {\n    return removeEmpty(value.split(/([{}:;,]|\\s+)/));\n  };\n  \n  var LineDiff = new fbDiff();\n  LineDiff.tokenize = function(value) {\n    return value.split(/^/m);\n  };\n  \n  return {\n    diffChars: function(oldStr, newStr) { return CharDiff.diff(oldStr, newStr); },\n    diffWords: function(oldStr, newStr) { return WordDiff.diff(oldStr, newStr); },\n    diffLines: function(oldStr, newStr) { return LineDiff.diff(oldStr, newStr); },\n\n    diffCss: function(oldStr, newStr) { return CssDiff.diff(oldStr, newStr); },\n\n    createPatch: function(fileName, oldStr, newStr, oldHeader, newHeader) {\n      var ret = [];\n\n      ret.push(\"Index: \" + fileName);\n      ret.push(\"===================================================================\");\n      ret.push(\"--- \" + fileName + (typeof oldHeader === \"undefined\" ? \"\" : \"\\t\" + oldHeader));\n      ret.push(\"+++ \" + fileName + (typeof newHeader === \"undefined\" ? \"\" : \"\\t\" + newHeader));\n\n      var diff = LineDiff.diff(oldStr, newStr);\n      if (!diff[diff.length-1].value) {\n        diff.pop();   // Remove trailing newline add\n      }\n      diff.push({value: \"\", lines: []});   // Append an empty value to make cleanup easier\n\n      function contextLines(lines) {\n        return lines.map(function(entry) { return ' ' + entry; });\n      }\n      function eofNL(curRange, i, current) {\n        var last = diff[diff.length-2],\n            isLast = i === diff.length-2,\n            isLastOfType = i === diff.length-3 && (current.added === !last.added || current.removed === !last.removed);\n\n        // Figure out if this is the last line for the given file and missing NL\n        if (!/\\n$/.test(current.value) && (isLast || isLastOfType)) {\n          curRange.push('\\\\ No newline at end of file');\n        }\n      }\n\n      var oldRangeStart = 0, newRangeStart = 0, curRange = [],\n          oldLine = 1, newLine = 1;\n      for (var i = 0; i < diff.length; i++) {\n        var current = diff[i],\n            lines = current.lines || current.value.replace(/\\n$/, \"\").split(\"\\n\");\n        current.lines = lines;\n\n        if (current.added || current.removed) {\n          if (!oldRangeStart) {\n            var prev = diff[i-1];\n            oldRangeStart = oldLine;\n            newRangeStart = newLine;\n            \n            if (prev) {\n              curRange = contextLines(prev.lines.slice(-4));\n              oldRangeStart -= curRange.length;\n              newRangeStart -= curRange.length;\n            }\n          }\n          curRange.push.apply(curRange, lines.map(function(entry) { return (current.added?\"+\":\"-\") + entry; }));\n          eofNL(curRange, i, current);\n\n          if (current.added) {\n            newLine += lines.length;\n          } else {\n            oldLine += lines.length;\n          }\n        } else {\n          if (oldRangeStart) {\n            // Close out any changes that have been output (or join overlapping)\n            if (lines.length <= 8 && i < diff.length-2) {\n              // Overlapping\n              curRange.push.apply(curRange, contextLines(lines));\n            } else {\n              // end the range and output\n              var contextSize = Math.min(lines.length, 4);\n              ret.push(\n                  \"@@ -\" + oldRangeStart + \",\" + (oldLine-oldRangeStart+contextSize)\n                  + \" +\" + newRangeStart + \",\" + (newLine-newRangeStart+contextSize)\n                  + \" @@\");\n              ret.push.apply(ret, curRange);\n              ret.push.apply(ret, contextLines(lines.slice(0, contextSize)));\n              if (lines.length <= 4) {\n                eofNL(ret, i, current);\n              }\n\n              oldRangeStart = 0;  newRangeStart = 0; curRange = [];\n            }\n          }\n          oldLine += lines.length;\n          newLine += lines.length;\n        }\n      }\n\n      return ret.join('\\n') + '\\n';\n    },\n\n    convertChangesToXML: function(changes){\n      var ret = [];\n      for ( var i = 0; i < changes.length; i++) {\n        var change = changes[i];\n        if (change.added) {\n          ret.push(\"<ins>\");\n        } else if (change.removed) {\n          ret.push(\"<del>\");\n        }\n\n        ret.push(escapeHTML(change.value));\n\n        if (change.added) {\n          ret.push(\"</ins>\");\n        } else if (change.removed) {\n          ret.push(\"</del>\");\n        }\n      }\n      return ret.join(\"\");\n    }\n  };\n})();\n\nif (typeof module !== \"undefined\") {\n    module.exports = JsDiff;\n}\n\n}); // module: browser/diff.js\n\nrequire.register(\"browser/events.js\", function(module, exports, require){\n\n/**\n * Module exports.\n */\n\nexports.EventEmitter = EventEmitter;\n\n/**\n * Check if `obj` is an array.\n */\n\nfunction isArray(obj) {\n  return '[object Array]' == {}.toString.call(obj);\n}\n\n/**\n * Event emitter constructor.\n *\n * @api public\n */\n\nfunction EventEmitter(){};\n\n/**\n * Adds a listener.\n *\n * @api public\n */\n\nEventEmitter.prototype.on = function (name, fn) {\n  if (!this.$events) {\n    this.$events = {};\n  }\n\n  if (!this.$events[name]) {\n    this.$events[name] = fn;\n  } else if (isArray(this.$events[name])) {\n    this.$events[name].push(fn);\n  } else {\n    this.$events[name] = [this.$events[name], fn];\n  }\n\n  return this;\n};\n\nEventEmitter.prototype.addListener = EventEmitter.prototype.on;\n\n/**\n * Adds a volatile listener.\n *\n * @api public\n */\n\nEventEmitter.prototype.once = function (name, fn) {\n  var self = this;\n\n  function on () {\n    self.removeListener(name, on);\n    fn.apply(this, arguments);\n  };\n\n  on.listener = fn;\n  this.on(name, on);\n\n  return this;\n};\n\n/**\n * Removes a listener.\n *\n * @api public\n */\n\nEventEmitter.prototype.removeListener = function (name, fn) {\n  if (this.$events && this.$events[name]) {\n    var list = this.$events[name];\n\n    if (isArray(list)) {\n      var pos = -1;\n\n      for (var i = 0, l = list.length; i < l; i++) {\n        if (list[i] === fn || (list[i].listener && list[i].listener === fn)) {\n          pos = i;\n          break;\n        }\n      }\n\n      if (pos < 0) {\n        return this;\n      }\n\n      list.splice(pos, 1);\n\n      if (!list.length) {\n        delete this.$events[name];\n      }\n    } else if (list === fn || (list.listener && list.listener === fn)) {\n      delete this.$events[name];\n    }\n  }\n\n  return this;\n};\n\n/**\n * Removes all listeners for an event.\n *\n * @api public\n */\n\nEventEmitter.prototype.removeAllListeners = function (name) {\n  if (name === undefined) {\n    this.$events = {};\n    return this;\n  }\n\n  if (this.$events && this.$events[name]) {\n    this.$events[name] = null;\n  }\n\n  return this;\n};\n\n/**\n * Gets all listeners for a certain event.\n *\n * @api public\n */\n\nEventEmitter.prototype.listeners = function (name) {\n  if (!this.$events) {\n    this.$events = {};\n  }\n\n  if (!this.$events[name]) {\n    this.$events[name] = [];\n  }\n\n  if (!isArray(this.$events[name])) {\n    this.$events[name] = [this.$events[name]];\n  }\n\n  return this.$events[name];\n};\n\n/**\n * Emits an event.\n *\n * @api public\n */\n\nEventEmitter.prototype.emit = function (name) {\n  if (!this.$events) {\n    return false;\n  }\n\n  var handler = this.$events[name];\n\n  if (!handler) {\n    return false;\n  }\n\n  var args = [].slice.call(arguments, 1);\n\n  if ('function' == typeof handler) {\n    handler.apply(this, args);\n  } else if (isArray(handler)) {\n    var listeners = handler.slice();\n\n    for (var i = 0, l = listeners.length; i < l; i++) {\n      listeners[i].apply(this, args);\n    }\n  } else {\n    return false;\n  }\n\n  return true;\n};\n}); // module: browser/events.js\n\nrequire.register(\"browser/fs.js\", function(module, exports, require){\n\n}); // module: browser/fs.js\n\nrequire.register(\"browser/path.js\", function(module, exports, require){\n\n}); // module: browser/path.js\n\nrequire.register(\"browser/progress.js\", function(module, exports, require){\n\n/**\n * Expose `Progress`.\n */\n\nmodule.exports = Progress;\n\n/**\n * Initialize a new `Progress` indicator.\n */\n\nfunction Progress() {\n  this.percent = 0;\n  this.size(0);\n  this.fontSize(11);\n  this.font('helvetica, arial, sans-serif');\n}\n\n/**\n * Set progress size to `n`.\n *\n * @param {Number} n\n * @return {Progress} for chaining\n * @api public\n */\n\nProgress.prototype.size = function(n){\n  this._size = n;\n  return this;\n};\n\n/**\n * Set text to `str`.\n *\n * @param {String} str\n * @return {Progress} for chaining\n * @api public\n */\n\nProgress.prototype.text = function(str){\n  this._text = str;\n  return this;\n};\n\n/**\n * Set font size to `n`.\n *\n * @param {Number} n\n * @return {Progress} for chaining\n * @api public\n */\n\nProgress.prototype.fontSize = function(n){\n  this._fontSize = n;\n  return this;\n};\n\n/**\n * Set font `family`.\n *\n * @param {String} family\n * @return {Progress} for chaining\n */\n\nProgress.prototype.font = function(family){\n  this._font = family;\n  return this;\n};\n\n/**\n * Update percentage to `n`.\n *\n * @param {Number} n\n * @return {Progress} for chaining\n */\n\nProgress.prototype.update = function(n){\n  this.percent = n;\n  return this;\n};\n\n/**\n * Draw on `ctx`.\n *\n * @param {CanvasRenderingContext2d} ctx\n * @return {Progress} for chaining\n */\n\nProgress.prototype.draw = function(ctx){\n  var percent = Math.min(this.percent, 100)\n    , size = this._size\n    , half = size / 2\n    , x = half\n    , y = half\n    , rad = half - 1\n    , fontSize = this._fontSize;\n\n  ctx.font = fontSize + 'px ' + this._font;\n\n  var angle = Math.PI * 2 * (percent / 100);\n  ctx.clearRect(0, 0, size, size);\n\n  // outer circle\n  ctx.strokeStyle = '#9f9f9f';\n  ctx.beginPath();\n  ctx.arc(x, y, rad, 0, angle, false);\n  ctx.stroke();\n\n  // inner circle\n  ctx.strokeStyle = '#eee';\n  ctx.beginPath();\n  ctx.arc(x, y, rad - 1, 0, angle, true);\n  ctx.stroke();\n\n  // text\n  var text = this._text || (percent | 0) + '%'\n    , w = ctx.measureText(text).width;\n\n  ctx.fillText(\n      text\n    , x - w / 2 + 1\n    , y + fontSize / 2 - 1);\n\n  return this;\n};\n\n}); // module: browser/progress.js\n\nrequire.register(\"browser/tty.js\", function(module, exports, require){\n\nexports.isatty = function(){\n  return true;\n};\n\nexports.getWindowSize = function(){\n  return [window.innerHeight, window.innerWidth];\n};\n}); // module: browser/tty.js\n\nrequire.register(\"context.js\", function(module, exports, require){\n\n/**\n * Expose `Context`.\n */\n\nmodule.exports = Context;\n\n/**\n * Initialize a new `Context`.\n *\n * @api private\n */\n\nfunction Context(){}\n\n/**\n * Set or get the context `Runnable` to `runnable`.\n *\n * @param {Runnable} runnable\n * @return {Context}\n * @api private\n */\n\nContext.prototype.runnable = function(runnable){\n  if (0 == arguments.length) return this._runnable;\n  this.test = this._runnable = runnable;\n  return this;\n};\n\n/**\n * Set test timeout `ms`.\n *\n * @param {Number} ms\n * @return {Context} self\n * @api private\n */\n\nContext.prototype.timeout = function(ms){\n  this.runnable().timeout(ms);\n  return this;\n};\n\n/**\n * Set test slowness threshold `ms`.\n *\n * @param {Number} ms\n * @return {Context} self\n * @api private\n */\n\nContext.prototype.slow = function(ms){\n  this.runnable().slow(ms);\n  return this;\n};\n\n/**\n * Inspect the context void of `._runnable`.\n *\n * @return {String}\n * @api private\n */\n\nContext.prototype.inspect = function(){\n  return JSON.stringify(this, function(key, val){\n    if ('_runnable' == key) return;\n    if ('test' == key) return;\n    return val;\n  }, 2);\n};\n\n}); // module: context.js\n\nrequire.register(\"hook.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Runnable = require('./runnable');\n\n/**\n * Expose `Hook`.\n */\n\nmodule.exports = Hook;\n\n/**\n * Initialize a new `Hook` with the given `title` and callback `fn`.\n *\n * @param {String} title\n * @param {Function} fn\n * @api private\n */\n\nfunction Hook(title, fn) {\n  Runnable.call(this, title, fn);\n  this.type = 'hook';\n}\n\n/**\n * Inherit from `Runnable.prototype`.\n */\n\nfunction F(){};\nF.prototype = Runnable.prototype;\nHook.prototype = new F;\nHook.prototype.constructor = Hook;\n\n\n/**\n * Get or set the test `err`.\n *\n * @param {Error} err\n * @return {Error}\n * @api public\n */\n\nHook.prototype.error = function(err){\n  if (0 == arguments.length) {\n    var err = this._error;\n    this._error = null;\n    return err;\n  }\n\n  this._error = err;\n};\n\n\n}); // module: hook.js\n\nrequire.register(\"interfaces/bdd.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Suite = require('../suite')\n  , Test = require('../test');\n\n/**\n * BDD-style interface:\n * \n *      describe('Array', function(){\n *        describe('#indexOf()', function(){\n *          it('should return -1 when not present', function(){\n *\n *          });\n *\n *          it('should return the index when present', function(){\n *\n *          });\n *        });\n *      });\n * \n */\n\nmodule.exports = function(suite){\n  var suites = [suite];\n\n  suite.on('pre-require', function(context, file, mocha){\n\n    /**\n     * Execute before running tests.\n     */\n\n    context.before = function(fn){\n      suites[0].beforeAll(fn);\n    };\n\n    /**\n     * Execute after running tests.\n     */\n\n    context.after = function(fn){\n      suites[0].afterAll(fn);\n    };\n\n    /**\n     * Execute before each test case.\n     */\n\n    context.beforeEach = function(fn){\n      suites[0].beforeEach(fn);\n    };\n\n    /**\n     * Execute after each test case.\n     */\n\n    context.afterEach = function(fn){\n      suites[0].afterEach(fn);\n    };\n\n    /**\n     * Describe a \"suite\" with the given `title`\n     * and callback `fn` containing nested suites\n     * and/or tests.\n     */\n  \n    context.describe = context.context = function(title, fn){\n      var suite = Suite.create(suites[0], title);\n      suites.unshift(suite);\n      fn.call(suite);\n      suites.shift();\n      return suite;\n    };\n\n    /**\n     * Pending describe.\n     */\n\n    context.xdescribe =\n    context.xcontext =\n    context.describe.skip = function(title, fn){\n      var suite = Suite.create(suites[0], title);\n      suite.pending = true;\n      suites.unshift(suite);\n      fn.call(suite);\n      suites.shift();\n    };\n\n    /**\n     * Exclusive suite.\n     */\n\n    context.describe.only = function(title, fn){\n      var suite = context.describe(title, fn);\n      mocha.grep(suite.fullTitle());\n    };\n\n    /**\n     * Describe a specification or test-case\n     * with the given `title` and callback `fn`\n     * acting as a thunk.\n     */\n\n    context.it = context.specify = function(title, fn){\n      var suite = suites[0];\n      if (suite.pending) var fn = null;\n      var test = new Test(title, fn);\n      suite.addTest(test);\n      return test;\n    };\n\n    /**\n     * Exclusive test-case.\n     */\n\n    context.it.only = function(title, fn){\n      var test = context.it(title, fn);\n      mocha.grep(test.fullTitle());\n    };\n\n    /**\n     * Pending test case.\n     */\n\n    context.xit =\n    context.xspecify =\n    context.it.skip = function(title){\n      context.it(title);\n    };\n  });\n};\n\n}); // module: interfaces/bdd.js\n\nrequire.register(\"interfaces/exports.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Suite = require('../suite')\n  , Test = require('../test');\n\n/**\n * TDD-style interface:\n * \n *     exports.Array = {\n *       '#indexOf()': {\n *         'should return -1 when the value is not present': function(){\n *           \n *         },\n *\n *         'should return the correct index when the value is present': function(){\n *           \n *         }\n *       }\n *     };\n * \n */\n\nmodule.exports = function(suite){\n  var suites = [suite];\n\n  suite.on('require', visit);\n\n  function visit(obj) {\n    var suite;\n    for (var key in obj) {\n      if ('function' == typeof obj[key]) {\n        var fn = obj[key];\n        switch (key) {\n          case 'before':\n            suites[0].beforeAll(fn);\n            break;\n          case 'after':\n            suites[0].afterAll(fn);\n            break;\n          case 'beforeEach':\n            suites[0].beforeEach(fn);\n            break;\n          case 'afterEach':\n            suites[0].afterEach(fn);\n            break;\n          default:\n            suites[0].addTest(new Test(key, fn));\n        }\n      } else {\n        var suite = Suite.create(suites[0], key);\n        suites.unshift(suite);\n        visit(obj[key]);\n        suites.shift();\n      }\n    }\n  }\n};\n}); // module: interfaces/exports.js\n\nrequire.register(\"interfaces/index.js\", function(module, exports, require){\n\nexports.bdd = require('./bdd');\nexports.tdd = require('./tdd');\nexports.qunit = require('./qunit');\nexports.exports = require('./exports');\n\n}); // module: interfaces/index.js\n\nrequire.register(\"interfaces/qunit.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Suite = require('../suite')\n  , Test = require('../test');\n\n/**\n * QUnit-style interface:\n * \n *     suite('Array');\n *     \n *     test('#length', function(){\n *       var arr = [1,2,3];\n *       ok(arr.length == 3);\n *     });\n *     \n *     test('#indexOf()', function(){\n *       var arr = [1,2,3];\n *       ok(arr.indexOf(1) == 0);\n *       ok(arr.indexOf(2) == 1);\n *       ok(arr.indexOf(3) == 2);\n *     });\n *     \n *     suite('String');\n *     \n *     test('#length', function(){\n *       ok('foo'.length == 3);\n *     });\n * \n */\n\nmodule.exports = function(suite){\n  var suites = [suite];\n\n  suite.on('pre-require', function(context){\n\n    /**\n     * Execute before running tests.\n     */\n\n    context.before = function(fn){\n      suites[0].beforeAll(fn);\n    };\n\n    /**\n     * Execute after running tests.\n     */\n\n    context.after = function(fn){\n      suites[0].afterAll(fn);\n    };\n\n    /**\n     * Execute before each test case.\n     */\n\n    context.beforeEach = function(fn){\n      suites[0].beforeEach(fn);\n    };\n\n    /**\n     * Execute after each test case.\n     */\n\n    context.afterEach = function(fn){\n      suites[0].afterEach(fn);\n    };\n\n    /**\n     * Describe a \"suite\" with the given `title`.\n     */\n  \n    context.suite = function(title){\n      if (suites.length > 1) suites.shift();\n      var suite = Suite.create(suites[0], title);\n      suites.unshift(suite);\n    };\n\n    /**\n     * Describe a specification or test-case\n     * with the given `title` and callback `fn`\n     * acting as a thunk.\n     */\n\n    context.test = function(title, fn){\n      suites[0].addTest(new Test(title, fn));\n    };\n  });\n};\n\n}); // module: interfaces/qunit.js\n\nrequire.register(\"interfaces/tdd.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Suite = require('../suite')\n  , Test = require('../test');\n\n/**\n * TDD-style interface:\n *\n *      suite('Array', function(){\n *        suite('#indexOf()', function(){\n *          suiteSetup(function(){\n *\n *          });\n *          \n *          test('should return -1 when not present', function(){\n *\n *          });\n *\n *          test('should return the index when present', function(){\n *\n *          });\n *\n *          suiteTeardown(function(){\n *\n *          });\n *        });\n *      });\n *\n */\n\nmodule.exports = function(suite){\n  var suites = [suite];\n\n  suite.on('pre-require', function(context, file, mocha){\n\n    /**\n     * Execute before each test case.\n     */\n\n    context.setup = function(fn){\n      suites[0].beforeEach(fn);\n    };\n\n    /**\n     * Execute after each test case.\n     */\n\n    context.teardown = function(fn){\n      suites[0].afterEach(fn);\n    };\n\n    /**\n     * Execute before the suite.\n     */\n\n    context.suiteSetup = function(fn){\n      suites[0].beforeAll(fn);\n    };\n\n    /**\n     * Execute after the suite.\n     */\n\n    context.suiteTeardown = function(fn){\n      suites[0].afterAll(fn);\n    };\n\n    /**\n     * Describe a \"suite\" with the given `title`\n     * and callback `fn` containing nested suites\n     * and/or tests.\n     */\n\n    context.suite = function(title, fn){\n      var suite = Suite.create(suites[0], title);\n      suites.unshift(suite);\n      fn.call(suite);\n      suites.shift();\n      return suite;\n    };\n\n    /**\n     * Exclusive test-case.\n     */\n\n    context.suite.only = function(title, fn){\n      var suite = context.suite(title, fn);\n      mocha.grep(suite.fullTitle());\n    };\n\n    /**\n     * Describe a specification or test-case\n     * with the given `title` and callback `fn`\n     * acting as a thunk.\n     */\n\n    context.test = function(title, fn){\n      var test = new Test(title, fn);\n      suites[0].addTest(test);\n      return test;\n    };\n\n    /**\n     * Exclusive test-case.\n     */\n\n    context.test.only = function(title, fn){\n      var test = context.test(title, fn);\n      mocha.grep(test.fullTitle());\n    };\n\n    /**\n     * Pending test case.\n     */\n\n    context.test.skip = function(title){\n      context.test(title);\n    };\n  });\n};\n\n}); // module: interfaces/tdd.js\n\nrequire.register(\"mocha.js\", function(module, exports, require){\n/*!\n * mocha\n * Copyright(c) 2011 TJ Holowaychuk <tj@vision-media.ca>\n * MIT Licensed\n */\n\n/**\n * Module dependencies.\n */\n\nvar path = require('browser/path')\n  , utils = require('./utils');\n\n/**\n * Expose `Mocha`.\n */\n\nexports = module.exports = Mocha;\n\n/**\n * Expose internals.\n */\n\nexports.utils = utils;\nexports.interfaces = require('./interfaces');\nexports.reporters = require('./reporters');\nexports.Runnable = require('./runnable');\nexports.Context = require('./context');\nexports.Runner = require('./runner');\nexports.Suite = require('./suite');\nexports.Hook = require('./hook');\nexports.Test = require('./test');\n\n/**\n * Return image `name` path.\n *\n * @param {String} name\n * @return {String}\n * @api private\n */\n\nfunction image(name) {\n  return __dirname + '/../images/' + name + '.png';\n}\n\n/**\n * Setup mocha with `options`.\n *\n * Options:\n *\n *   - `ui` name \"bdd\", \"tdd\", \"exports\" etc\n *   - `reporter` reporter instance, defaults to `mocha.reporters.Dot`\n *   - `globals` array of accepted globals\n *   - `timeout` timeout in milliseconds\n *   - `bail` bail on the first test failure\n *   - `slow` milliseconds to wait before considering a test slow\n *   - `ignoreLeaks` ignore global leaks\n *   - `grep` string or regexp to filter tests with\n *\n * @param {Object} options\n * @api public\n */\n\nfunction Mocha(options) {\n  options = options || {};\n  this.files = [];\n  this.options = options;\n  this.grep(options.grep);\n  this.suite = new exports.Suite('', new exports.Context);\n  this.ui(options.ui);\n  this.bail(options.bail);\n  this.reporter(options.reporter);\n  if (options.timeout) this.timeout(options.timeout);\n  if (options.slow) this.slow(options.slow);\n}\n\n/**\n * Enable or disable bailing on the first failure.\n *\n * @param {Boolean} [bail]\n * @api public\n */\n\nMocha.prototype.bail = function(bail){\n  if (null == bail) bail = true;\n  this.suite.bail(bail);\n  return this;\n};\n\n/**\n * Add test `file`.\n *\n * @param {String} file\n * @api public\n */\n\nMocha.prototype.addFile = function(file){\n  this.files.push(file);\n  return this;\n};\n\n/**\n * Set reporter to `reporter`, defaults to \"dot\".\n *\n * @param {String|Function} reporter name or constructor\n * @api public\n */\n\nMocha.prototype.reporter = function(reporter){\n  if ('function' == typeof reporter) {\n    this._reporter = reporter;\n  } else {\n    reporter = reporter || 'dot';\n    try {\n      this._reporter = require('./reporters/' + reporter);\n    } catch (err) {\n      this._reporter = require(reporter);\n    }\n    if (!this._reporter) throw new Error('invalid reporter \"' + reporter + '\"');\n  }\n  return this;\n};\n\n/**\n * Set test UI `name`, defaults to \"bdd\".\n *\n * @param {String} bdd\n * @api public\n */\n\nMocha.prototype.ui = function(name){\n  name = name || 'bdd';\n  this._ui = exports.interfaces[name];\n  if (!this._ui) throw new Error('invalid interface \"' + name + '\"');\n  this._ui = this._ui(this.suite);\n  return this;\n};\n\n/**\n * Load registered files.\n *\n * @api private\n */\n\nMocha.prototype.loadFiles = function(fn){\n  var self = this;\n  var suite = this.suite;\n  var pending = this.files.length;\n  this.files.forEach(function(file){\n    file = path.resolve(file);\n    suite.emit('pre-require', global, file, self);\n    suite.emit('require', require(file), file, self);\n    suite.emit('post-require', global, file, self);\n    --pending || (fn && fn());\n  });\n};\n\n/**\n * Enable growl support.\n *\n * @api private\n */\n\nMocha.prototype._growl = function(runner, reporter) {\n  var notify = require('growl');\n\n  runner.on('end', function(){\n    var stats = reporter.stats;\n    if (stats.failures) {\n      var msg = stats.failures + ' of ' + runner.total + ' tests failed';\n      notify(msg, { name: 'mocha', title: 'Failed', image: image('error') });\n    } else {\n      notify(stats.passes + ' tests passed in ' + stats.duration + 'ms', {\n          name: 'mocha'\n        , title: 'Passed'\n        , image: image('ok')\n      });\n    }\n  });\n};\n\n/**\n * Add regexp to grep, if `re` is a string it is escaped.\n *\n * @param {RegExp|String} re\n * @return {Mocha}\n * @api public\n */\n\nMocha.prototype.grep = function(re){\n  this.options.grep = 'string' == typeof re\n    ? new RegExp(utils.escapeRegexp(re))\n    : re;\n  return this;\n};\n\n/**\n * Invert `.grep()` matches.\n *\n * @return {Mocha}\n * @api public\n */\n\nMocha.prototype.invert = function(){\n  this.options.invert = true;\n  return this;\n};\n\n/**\n * Ignore global leaks.\n *\n * @return {Mocha}\n * @api public\n */\n\nMocha.prototype.ignoreLeaks = function(){\n  this.options.ignoreLeaks = true;\n  return this;\n};\n\n/**\n * Enable global leak checking.\n *\n * @return {Mocha}\n * @api public\n */\n\nMocha.prototype.checkLeaks = function(){\n  this.options.ignoreLeaks = false;\n  return this;\n};\n\n/**\n * Enable growl support.\n *\n * @return {Mocha}\n * @api public\n */\n\nMocha.prototype.growl = function(){\n  this.options.growl = true;\n  return this;\n};\n\n/**\n * Ignore `globals` array or string.\n *\n * @param {Array|String} globals\n * @return {Mocha}\n * @api public\n */\n\nMocha.prototype.globals = function(globals){\n  this.options.globals = (this.options.globals || []).concat(globals);\n  return this;\n};\n\n/**\n * Set the timeout in milliseconds.\n *\n * @param {Number} timeout\n * @return {Mocha}\n * @api public\n */\n\nMocha.prototype.timeout = function(timeout){\n  this.suite.timeout(timeout);\n  return this;\n};\n\n/**\n * Set slowness threshold in milliseconds.\n *\n * @param {Number} slow\n * @return {Mocha}\n * @api public\n */\n\nMocha.prototype.slow = function(slow){\n  this.suite.slow(slow);\n  return this;\n};\n\n/**\n * Makes all tests async (accepting a callback)\n *\n * @return {Mocha}\n * @api public\n */\n\nMocha.prototype.asyncOnly = function(){\n  this.options.asyncOnly = true;\n  return this;\n};\n\n/**\n * Run tests and invoke `fn()` when complete.\n *\n * @param {Function} fn\n * @return {Runner}\n * @api public\n */\n\nMocha.prototype.run = function(fn){\n  if (this.files.length) this.loadFiles();\n  var suite = this.suite;\n  var options = this.options;\n  var runner = new exports.Runner(suite);\n  var reporter = new this._reporter(runner);\n  runner.ignoreLeaks = options.ignoreLeaks;\n  runner.asyncOnly = options.asyncOnly;\n  if (options.grep) runner.grep(options.grep, options.invert);\n  if (options.globals) runner.globals(options.globals);\n  if (options.growl) this._growl(runner, reporter);\n  return runner.run(fn);\n};\n\n}); // module: mocha.js\n\nrequire.register(\"ms.js\", function(module, exports, require){\n\n/**\n * Helpers.\n */\n\nvar s = 1000;\nvar m = s * 60;\nvar h = m * 60;\nvar d = h * 24;\n\n/**\n * Parse or format the given `val`.\n *\n * @param {String|Number} val\n * @return {String|Number}\n * @api public\n */\n\nmodule.exports = function(val){\n  if ('string' == typeof val) return parse(val);\n  return format(val);\n}\n\n/**\n * Parse the given `str` and return milliseconds.\n *\n * @param {String} str\n * @return {Number}\n * @api private\n */\n\nfunction parse(str) {\n  var m = /^((?:\\d+)?\\.?\\d+) *(ms|seconds?|s|minutes?|m|hours?|h|days?|d|years?|y)?$/i.exec(str);\n  if (!m) return;\n  var n = parseFloat(m[1]);\n  var type = (m[2] || 'ms').toLowerCase();\n  switch (type) {\n    case 'years':\n    case 'year':\n    case 'y':\n      return n * 31557600000;\n    case 'days':\n    case 'day':\n    case 'd':\n      return n * 86400000;\n    case 'hours':\n    case 'hour':\n    case 'h':\n      return n * 3600000;\n    case 'minutes':\n    case 'minute':\n    case 'm':\n      return n * 60000;\n    case 'seconds':\n    case 'second':\n    case 's':\n      return n * 1000;\n    case 'ms':\n      return n;\n  }\n}\n\n/**\n * Format the given `ms`.\n *\n * @param {Number} ms\n * @return {String}\n * @api public\n */\n\nfunction format(ms) {\n  if (ms == d) return Math.round(ms / d) + ' day';\n  if (ms > d) return Math.round(ms / d) + ' days';\n  if (ms == h) return Math.round(ms / h) + ' hour';\n  if (ms > h) return Math.round(ms / h) + ' hours';\n  if (ms == m) return Math.round(ms / m) + ' minute';\n  if (ms > m) return Math.round(ms / m) + ' minutes';\n  if (ms == s) return Math.round(ms / s) + ' second';\n  if (ms > s) return Math.round(ms / s) + ' seconds';\n  return ms + ' ms';\n}\n}); // module: ms.js\n\nrequire.register(\"reporters/base.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar tty = require('browser/tty')\n  , diff = require('browser/diff')\n  , ms = require('../ms');\n\n/**\n * Save timer references to avoid Sinon interfering (see GH-237).\n */\n\nvar Date = global.Date\n  , setTimeout = global.setTimeout\n  , setInterval = global.setInterval\n  , clearTimeout = global.clearTimeout\n  , clearInterval = global.clearInterval;\n\n/**\n * Check if both stdio streams are associated with a tty.\n */\n\nvar isatty = tty.isatty(1) && tty.isatty(2);\n\n/**\n * Expose `Base`.\n */\n\nexports = module.exports = Base;\n\n/**\n * Enable coloring by default.\n */\n\nexports.useColors = isatty;\n\n/**\n * Default color map.\n */\n\nexports.colors = {\n    'pass': 90\n  , 'fail': 31\n  , 'bright pass': 92\n  , 'bright fail': 91\n  , 'bright yellow': 93\n  , 'pending': 36\n  , 'suite': 0\n  , 'error title': 0\n  , 'error message': 31\n  , 'error stack': 90\n  , 'checkmark': 32\n  , 'fast': 90\n  , 'medium': 33\n  , 'slow': 31\n  , 'green': 32\n  , 'light': 90\n  , 'diff gutter': 90\n  , 'diff added': 42\n  , 'diff removed': 41\n};\n\n/**\n * Default symbol map.\n */\n \nexports.symbols = {\n  ok: '✓',\n  err: '✖',\n  dot: '․'\n};\n\n// With node.js on Windows: use symbols available in terminal default fonts\nif ('win32' == process.platform) {\n  exports.symbols.ok = '\\u221A';\n  exports.symbols.err = '\\u00D7';\n  exports.symbols.dot = '.';\n}\n\n/**\n * Color `str` with the given `type`,\n * allowing colors to be disabled,\n * as well as user-defined color\n * schemes.\n *\n * @param {String} type\n * @param {String} str\n * @return {String}\n * @api private\n */\n\nvar color = exports.color = function(type, str) {\n  if (!exports.useColors) return str;\n  return '\\u001b[' + exports.colors[type] + 'm' + str + '\\u001b[0m';\n};\n\n/**\n * Expose term window size, with some\n * defaults for when stderr is not a tty.\n */\n\nexports.window = {\n  width: isatty\n    ? process.stdout.getWindowSize\n      ? process.stdout.getWindowSize(1)[0]\n      : tty.getWindowSize()[1]\n    : 75\n};\n\n/**\n * Expose some basic cursor interactions\n * that are common among reporters.\n */\n\nexports.cursor = {\n  hide: function(){\n    process.stdout.write('\\u001b[?25l');\n  },\n\n  show: function(){\n    process.stdout.write('\\u001b[?25h');\n  },\n\n  deleteLine: function(){\n    process.stdout.write('\\u001b[2K');\n  },\n\n  beginningOfLine: function(){\n    process.stdout.write('\\u001b[0G');\n  },\n\n  CR: function(){\n    exports.cursor.deleteLine();\n    exports.cursor.beginningOfLine();\n  }\n};\n\n/**\n * Outut the given `failures` as a list.\n *\n * @param {Array} failures\n * @api public\n */\n\nexports.list = function(failures){\n  console.error();\n  failures.forEach(function(test, i){\n    // format\n    var fmt = color('error title', '  %s) %s:\\n')\n      + color('error message', '     %s')\n      + color('error stack', '\\n%s\\n');\n\n    // msg\n    var err = test.err\n      , message = err.message || ''\n      , stack = err.stack || message\n      , index = stack.indexOf(message) + message.length\n      , msg = stack.slice(0, index)\n      , actual = err.actual\n      , expected = err.expected\n      , escape = true;\n\n    // explicitly show diff\n    if (err.showDiff) {\n      escape = false;\n      err.actual = actual = JSON.stringify(actual, null, 2);\n      err.expected = expected = JSON.stringify(expected, null, 2);\n    }\n\n    // actual / expected diff\n    if ('string' == typeof actual && 'string' == typeof expected) {\n      var len = Math.max(actual.length, expected.length);\n\n      if (len < 20) msg = errorDiff(err, 'Chars', escape);\n      else msg = errorDiff(err, 'Words', escape);\n\n      // linenos\n      var lines = msg.split('\\n');\n      if (lines.length > 4) {\n        var width = String(lines.length).length;\n        msg = lines.map(function(str, i){\n          return pad(++i, width) + ' |' + ' ' + str;\n        }).join('\\n');\n      }\n\n      // legend\n      msg = '\\n'\n        + color('diff removed', 'actual')\n        + ' '\n        + color('diff added', 'expected')\n        + '\\n\\n'\n        + msg\n        + '\\n';\n\n      // indent\n      msg = msg.replace(/^/gm, '      ');\n\n      fmt = color('error title', '  %s) %s:\\n%s')\n        + color('error stack', '\\n%s\\n');\n    }\n\n    // indent stack trace without msg\n    stack = stack.slice(index ? index + 1 : index)\n      .replace(/^/gm, '  ');\n\n    console.error(fmt, (i + 1), test.fullTitle(), msg, stack);\n  });\n};\n\n/**\n * Initialize a new `Base` reporter.\n *\n * All other reporters generally\n * inherit from this reporter, providing\n * stats such as test duration, number\n * of tests passed / failed etc.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction Base(runner) {\n  var self = this\n    , stats = this.stats = { suites: 0, tests: 0, passes: 0, pending: 0, failures: 0 }\n    , failures = this.failures = [];\n\n  if (!runner) return;\n  this.runner = runner;\n\n  runner.stats = stats;\n\n  runner.on('start', function(){\n    stats.start = new Date;\n  });\n\n  runner.on('suite', function(suite){\n    stats.suites = stats.suites || 0;\n    suite.root || stats.suites++;\n  });\n\n  runner.on('test end', function(test){\n    stats.tests = stats.tests || 0;\n    stats.tests++;\n  });\n\n  runner.on('pass', function(test){\n    stats.passes = stats.passes || 0;\n\n    var medium = test.slow() / 2;\n    test.speed = test.duration > test.slow()\n      ? 'slow'\n      : test.duration > medium\n        ? 'medium'\n        : 'fast';\n\n    stats.passes++;\n  });\n\n  runner.on('fail', function(test, err){\n    stats.failures = stats.failures || 0;\n    stats.failures++;\n    test.err = err;\n    failures.push(test);\n  });\n\n  runner.on('end', function(){\n    stats.end = new Date;\n    stats.duration = new Date - stats.start;\n  });\n\n  runner.on('pending', function(){\n    stats.pending++;\n  });\n}\n\n/**\n * Output common epilogue used by many of\n * the bundled reporters.\n *\n * @api public\n */\n\nBase.prototype.epilogue = function(){\n  var stats = this.stats\n    , fmt\n    , tests;\n\n  console.log();\n\n  function pluralize(n) {\n    return 1 == n ? 'test' : 'tests';\n  }\n\n  // failure\n  if (stats.failures) {\n    fmt = color('bright fail', '  ' + exports.symbols.err)\n      + color('fail', ' %d of %d %s failed')\n      + color('light', ':')\n\n    console.error(fmt,\n      stats.failures,\n      this.runner.total,\n      pluralize(this.runner.total));\n\n    Base.list(this.failures);\n    console.error();\n    return;\n  }\n\n  // pass\n  fmt = color('bright pass', ' ')\n    + color('green', ' %d %s complete')\n    + color('light', ' (%s)');\n\n  console.log(fmt,\n    stats.tests || 0,\n    pluralize(stats.tests),\n    ms(stats.duration));\n\n  // pending\n  if (stats.pending) {\n    fmt = color('pending', ' ')\n      + color('pending', ' %d %s pending');\n\n    console.log(fmt, stats.pending, pluralize(stats.pending));\n  }\n\n  console.log();\n};\n\n/**\n * Pad the given `str` to `len`.\n *\n * @param {String} str\n * @param {String} len\n * @return {String}\n * @api private\n */\n\nfunction pad(str, len) {\n  str = String(str);\n  return Array(len - str.length + 1).join(' ') + str;\n}\n\n/**\n * Return a character diff for `err`.\n *\n * @param {Error} err\n * @return {String}\n * @api private\n */\n\nfunction errorDiff(err, type, escape) {\n  return diff['diff' + type](err.actual, err.expected).map(function(str){\n    if (escape) {\n      str.value = str.value\n        .replace(/\\t/g, '<tab>')\n        .replace(/\\r/g, '<CR>')\n        .replace(/\\n/g, '<LF>\\n');\n    }\n    if (str.added) return colorLines('diff added', str.value);\n    if (str.removed) return colorLines('diff removed', str.value);\n    return str.value;\n  }).join('');\n}\n\n/**\n * Color lines for `str`, using the color `name`.\n *\n * @param {String} name\n * @param {String} str\n * @return {String}\n * @api private\n */\n\nfunction colorLines(name, str) {\n  return str.split('\\n').map(function(str){\n    return color(name, str);\n  }).join('\\n');\n}\n\n}); // module: reporters/base.js\n\nrequire.register(\"reporters/doc.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base')\n  , utils = require('../utils');\n\n/**\n * Expose `Doc`.\n */\n\nexports = module.exports = Doc;\n\n/**\n * Initialize a new `Doc` reporter.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction Doc(runner) {\n  Base.call(this, runner);\n\n  var self = this\n    , stats = this.stats\n    , total = runner.total\n    , indents = 2;\n\n  function indent() {\n    return Array(indents).join('  ');\n  }\n\n  runner.on('suite', function(suite){\n    if (suite.root) return;\n    ++indents;\n    console.log('%s<section class=\"suite\">', indent());\n    ++indents;\n    console.log('%s<h1>%s</h1>', indent(), utils.escape(suite.title));\n    console.log('%s<dl>', indent());\n  });\n\n  runner.on('suite end', function(suite){\n    if (suite.root) return;\n    console.log('%s</dl>', indent());\n    --indents;\n    console.log('%s</section>', indent());\n    --indents;\n  });\n\n  runner.on('pass', function(test){\n    console.log('%s  <dt>%s</dt>', indent(), utils.escape(test.title));\n    var code = utils.escape(utils.clean(test.fn.toString()));\n    console.log('%s  <dd><pre><code>%s</code></pre></dd>', indent(), code);\n  });\n}\n\n}); // module: reporters/doc.js\n\nrequire.register(\"reporters/dot.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base')\n  , color = Base.color;\n\n/**\n * Expose `Dot`.\n */\n\nexports = module.exports = Dot;\n\n/**\n * Initialize a new `Dot` matrix test reporter.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction Dot(runner) {\n  Base.call(this, runner);\n\n  var self = this\n    , stats = this.stats\n    , width = Base.window.width * .75 | 0\n    , n = 0;\n\n  runner.on('start', function(){\n    process.stdout.write('\\n  ');\n  });\n\n  runner.on('pending', function(test){\n    process.stdout.write(color('pending', Base.symbols.dot));\n  });\n\n  runner.on('pass', function(test){\n    if (++n % width == 0) process.stdout.write('\\n  ');\n    if ('slow' == test.speed) {\n      process.stdout.write(color('bright yellow', Base.symbols.dot));\n    } else {\n      process.stdout.write(color(test.speed, Base.symbols.dot));\n    }\n  });\n\n  runner.on('fail', function(test, err){\n    if (++n % width == 0) process.stdout.write('\\n  ');\n    process.stdout.write(color('fail', Base.symbols.dot));\n  });\n\n  runner.on('end', function(){\n    console.log();\n    self.epilogue();\n  });\n}\n\n/**\n * Inherit from `Base.prototype`.\n */\n\nfunction F(){};\nF.prototype = Base.prototype;\nDot.prototype = new F;\nDot.prototype.constructor = Dot;\n\n}); // module: reporters/dot.js\n\nrequire.register(\"reporters/html-cov.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar JSONCov = require('./json-cov')\n  , fs = require('browser/fs');\n\n/**\n * Expose `HTMLCov`.\n */\n\nexports = module.exports = HTMLCov;\n\n/**\n * Initialize a new `JsCoverage` reporter.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction HTMLCov(runner) {\n  var jade = require('jade')\n    , file = __dirname + '/templates/coverage.jade'\n    , str = fs.readFileSync(file, 'utf8')\n    , fn = jade.compile(str, { filename: file })\n    , self = this;\n\n  JSONCov.call(this, runner, false);\n\n  runner.on('end', function(){\n    process.stdout.write(fn({\n        cov: self.cov\n      , coverageClass: coverageClass\n    }));\n  });\n}\n\n/**\n * Return coverage class for `n`.\n *\n * @return {String}\n * @api private\n */\n\nfunction coverageClass(n) {\n  if (n >= 75) return 'high';\n  if (n >= 50) return 'medium';\n  if (n >= 25) return 'low';\n  return 'terrible';\n}\n}); // module: reporters/html-cov.js\n\nrequire.register(\"reporters/html.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base')\n  , utils = require('../utils')\n  , Progress = require('../browser/progress')\n  , escape = utils.escape;\n\n/**\n * Save timer references to avoid Sinon interfering (see GH-237).\n */\n\nvar Date = global.Date\n  , setTimeout = global.setTimeout\n  , setInterval = global.setInterval\n  , clearTimeout = global.clearTimeout\n  , clearInterval = global.clearInterval;\n\n/**\n * Expose `Doc`.\n */\n\nexports = module.exports = HTML;\n\n/**\n * Stats template.\n */\n\nvar statsTemplate = '<ul id=\"mocha-stats\">'\n  + '<li class=\"progress\"><canvas width=\"40\" height=\"40\"></canvas></li>'\n  + '<li class=\"passes\"><a href=\"#\">passes:</a> <em>0</em></li>'\n  + '<li class=\"failures\"><a href=\"#\">failures:</a> <em>0</em></li>'\n  + '<li class=\"duration\">duration: <em>0</em>s</li>'\n  + '</ul>';\n\n/**\n * Initialize a new `Doc` reporter.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction HTML(runner, root) {\n  Base.call(this, runner);\n\n  var self = this\n    , stats = this.stats\n    , total = runner.total\n    , stat = fragment(statsTemplate)\n    , items = stat.getElementsByTagName('li')\n    , passes = items[1].getElementsByTagName('em')[0]\n    , passesLink = items[1].getElementsByTagName('a')[0]\n    , failures = items[2].getElementsByTagName('em')[0]\n    , failuresLink = items[2].getElementsByTagName('a')[0]\n    , duration = items[3].getElementsByTagName('em')[0]\n    , canvas = stat.getElementsByTagName('canvas')[0]\n    , report = fragment('<ul id=\"mocha-report\"></ul>')\n    , stack = [report]\n    , progress\n    , ctx\n\n  root = root || document.getElementById('mocha');\n\n  if (canvas.getContext) {\n    var ratio = window.devicePixelRatio || 1;\n    canvas.style.width = canvas.width;\n    canvas.style.height = canvas.height;\n    canvas.width *= ratio;\n    canvas.height *= ratio;\n    ctx = canvas.getContext('2d');\n    ctx.scale(ratio, ratio);\n    progress = new Progress;\n  }\n\n  if (!root) return error('#mocha div missing, add it to your document');\n\n  // pass toggle\n  on(passesLink, 'click', function(){\n    unhide();\n    var name = /pass/.test(report.className) ? '' : ' pass';\n    report.className = report.className.replace(/fail|pass/g, '') + name;\n    if (report.className.trim()) hideSuitesWithout('test pass');\n  });\n\n  // failure toggle\n  on(failuresLink, 'click', function(){\n    unhide();\n    var name = /fail/.test(report.className) ? '' : ' fail';\n    report.className = report.className.replace(/fail|pass/g, '') + name;\n    if (report.className.trim()) hideSuitesWithout('test fail');\n  });\n\n  root.appendChild(stat);\n  root.appendChild(report);\n\n  if (progress) progress.size(40);\n\n  runner.on('suite', function(suite){\n    if (suite.root) return;\n\n    // suite\n    var url = '?grep=' + encodeURIComponent(suite.fullTitle());\n    var el = fragment('<li class=\"suite\"><h1><a href=\"%s\">%s</a></h1></li>', url, escape(suite.title));\n\n    // container\n    stack[0].appendChild(el);\n    stack.unshift(document.createElement('ul'));\n    el.appendChild(stack[0]);\n  });\n\n  runner.on('suite end', function(suite){\n    if (suite.root) return;\n    stack.shift();\n  });\n\n  runner.on('fail', function(test, err){\n    if ('hook' == test.type) runner.emit('test end', test);\n  });\n\n  runner.on('test end', function(test){\n    window.scrollTo(0, document.body.scrollHeight);\n\n    // TODO: add to stats\n    var percent = stats.tests / this.total * 100 | 0;\n    if (progress) progress.update(percent).draw(ctx);\n\n    // update stats\n    var ms = new Date - stats.start;\n    text(passes, stats.passes);\n    text(failures, stats.failures);\n    text(duration, (ms / 1000).toFixed(2));\n\n    // test\n    if ('passed' == test.state) {\n      var el = fragment('<li class=\"test pass %e\"><h2>%e<span class=\"duration\">%ems</span> <a href=\"?grep=%e\" class=\"replay\">‣</a></h2></li>', test.speed, test.title, test.duration, encodeURIComponent(test.fullTitle()));\n    } else if (test.pending) {\n      var el = fragment('<li class=\"test pass pending\"><h2>%e</h2></li>', test.title);\n    } else {\n      var el = fragment('<li class=\"test fail\"><h2>%e <a href=\"?grep=%e\" class=\"replay\">‣</a></h2></li>', test.title, encodeURIComponent(test.fullTitle()));\n      var str = test.err.stack || test.err.toString();\n\n      // FF / Opera do not add the message\n      if (!~str.indexOf(test.err.message)) {\n        str = test.err.message + '\\n' + str;\n      }\n\n      // <=IE7 stringifies to [Object Error]. Since it can be overloaded, we\n      // check for the result of the stringifying.\n      if ('[object Error]' == str) str = test.err.message;\n\n      // Safari doesn't give you a stack. Let's at least provide a source line.\n      if (!test.err.stack && test.err.sourceURL && test.err.line !== undefined) {\n        str += \"\\n(\" + test.err.sourceURL + \":\" + test.err.line + \")\";\n      }\n\n      el.appendChild(fragment('<pre class=\"error\">%e</pre>', str));\n    }\n\n    // toggle code\n    // TODO: defer\n    if (!test.pending) {\n      var h2 = el.getElementsByTagName('h2')[0];\n\n      on(h2, 'click', function(){\n        pre.style.display = 'none' == pre.style.display\n          ? 'block'\n          : 'none';\n      });\n\n      var pre = fragment('<pre><code>%e</code></pre>', utils.clean(test.fn.toString()));\n      el.appendChild(pre);\n      pre.style.display = 'none';\n    }\n\n    // Don't call .appendChild if #mocha-report was already .shift()'ed off the stack.\n    if (stack[0]) stack[0].appendChild(el);\n  });\n}\n\n/**\n * Display error `msg`.\n */\n\nfunction error(msg) {\n  document.body.appendChild(fragment('<div id=\"mocha-error\">%s</div>', msg));\n}\n\n/**\n * Return a DOM fragment from `html`.\n */\n\nfunction fragment(html) {\n  var args = arguments\n    , div = document.createElement('div')\n    , i = 1;\n\n  div.innerHTML = html.replace(/%([se])/g, function(_, type){\n    switch (type) {\n      case 's': return String(args[i++]);\n      case 'e': return escape(args[i++]);\n    }\n  });\n\n  return div.firstChild;\n}\n\n/**\n * Check for suites that do not have elements\n * with `classname`, and hide them.\n */\n\nfunction hideSuitesWithout(classname) {\n  var suites = document.getElementsByClassName('suite');\n  for (var i = 0; i < suites.length; i++) {\n    var els = suites[i].getElementsByClassName(classname);\n    if (0 == els.length) suites[i].className += ' hidden';\n  }\n}\n\n/**\n * Unhide .hidden suites.\n */\n\nfunction unhide() {\n  var els = document.getElementsByClassName('suite hidden');\n  for (var i = 0; i < els.length; ++i) {\n    els[i].className = els[i].className.replace('suite hidden', 'suite');\n  }\n}\n\n/**\n * Set `el` text to `str`.\n */\n\nfunction text(el, str) {\n  if (el.textContent) {\n    el.textContent = str;\n  } else {\n    el.innerText = str;\n  }\n}\n\n/**\n * Listen on `event` with callback `fn`.\n */\n\nfunction on(el, event, fn) {\n  if (el.addEventListener) {\n    el.addEventListener(event, fn, false);\n  } else {\n    el.attachEvent('on' + event, fn);\n  }\n}\n\n}); // module: reporters/html.js\n\nrequire.register(\"reporters/index.js\", function(module, exports, require){\n\nexports.Base = require('./base');\nexports.Dot = require('./dot');\nexports.Doc = require('./doc');\nexports.TAP = require('./tap');\nexports.JSON = require('./json');\nexports.HTML = require('./html');\nexports.List = require('./list');\nexports.Min = require('./min');\nexports.Spec = require('./spec');\nexports.Nyan = require('./nyan');\nexports.XUnit = require('./xunit');\nexports.Markdown = require('./markdown');\nexports.Progress = require('./progress');\nexports.Landing = require('./landing');\nexports.JSONCov = require('./json-cov');\nexports.HTMLCov = require('./html-cov');\nexports.JSONStream = require('./json-stream');\nexports.Teamcity = require('./teamcity');\n\n}); // module: reporters/index.js\n\nrequire.register(\"reporters/json-cov.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base');\n\n/**\n * Expose `JSONCov`.\n */\n\nexports = module.exports = JSONCov;\n\n/**\n * Initialize a new `JsCoverage` reporter.\n *\n * @param {Runner} runner\n * @param {Boolean} output\n * @api public\n */\n\nfunction JSONCov(runner, output) {\n  var self = this\n    , output = 1 == arguments.length ? true : output;\n\n  Base.call(this, runner);\n\n  var tests = []\n    , failures = []\n    , passes = [];\n\n  runner.on('test end', function(test){\n    tests.push(test);\n  });\n\n  runner.on('pass', function(test){\n    passes.push(test);\n  });\n\n  runner.on('fail', function(test){\n    failures.push(test);\n  });\n\n  runner.on('end', function(){\n    var cov = global._$jscoverage || {};\n    var result = self.cov = map(cov);\n    result.stats = self.stats;\n    result.tests = tests.map(clean);\n    result.failures = failures.map(clean);\n    result.passes = passes.map(clean);\n    if (!output) return;\n    process.stdout.write(JSON.stringify(result, null, 2 ));\n  });\n}\n\n/**\n * Map jscoverage data to a JSON structure\n * suitable for reporting.\n *\n * @param {Object} cov\n * @return {Object}\n * @api private\n */\n\nfunction map(cov) {\n  var ret = {\n      instrumentation: 'node-jscoverage'\n    , sloc: 0\n    , hits: 0\n    , misses: 0\n    , coverage: 0\n    , files: []\n  };\n\n  for (var filename in cov) {\n    var data = coverage(filename, cov[filename]);\n    ret.files.push(data);\n    ret.hits += data.hits;\n    ret.misses += data.misses;\n    ret.sloc += data.sloc;\n  }\n\n  ret.files.sort(function(a, b) {\n    return a.filename.localeCompare(b.filename);\n  });\n\n  if (ret.sloc > 0) {\n    ret.coverage = (ret.hits / ret.sloc) * 100;\n  }\n\n  return ret;\n};\n\n/**\n * Map jscoverage data for a single source file\n * to a JSON structure suitable for reporting.\n *\n * @param {String} filename name of the source file\n * @param {Object} data jscoverage coverage data\n * @return {Object}\n * @api private\n */\n\nfunction coverage(filename, data) {\n  var ret = {\n    filename: filename,\n    coverage: 0,\n    hits: 0,\n    misses: 0,\n    sloc: 0,\n    source: {}\n  };\n\n  data.source.forEach(function(line, num){\n    num++;\n\n    if (data[num] === 0) {\n      ret.misses++;\n      ret.sloc++;\n    } else if (data[num] !== undefined) {\n      ret.hits++;\n      ret.sloc++;\n    }\n\n    ret.source[num] = {\n        source: line\n      , coverage: data[num] === undefined\n        ? ''\n        : data[num]\n    };\n  });\n\n  ret.coverage = ret.hits / ret.sloc * 100;\n\n  return ret;\n}\n\n/**\n * Return a plain-object representation of `test`\n * free of cyclic properties etc.\n *\n * @param {Object} test\n * @return {Object}\n * @api private\n */\n\nfunction clean(test) {\n  return {\n      title: test.title\n    , fullTitle: test.fullTitle()\n    , duration: test.duration\n  }\n}\n\n}); // module: reporters/json-cov.js\n\nrequire.register(\"reporters/json-stream.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base')\n  , color = Base.color;\n\n/**\n * Expose `List`.\n */\n\nexports = module.exports = List;\n\n/**\n * Initialize a new `List` test reporter.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction List(runner) {\n  Base.call(this, runner);\n\n  var self = this\n    , stats = this.stats\n    , total = runner.total;\n\n  runner.on('start', function(){\n    console.log(JSON.stringify(['start', { total: total }]));\n  });\n\n  runner.on('pass', function(test){\n    console.log(JSON.stringify(['pass', clean(test)]));\n  });\n\n  runner.on('fail', function(test, err){\n    console.log(JSON.stringify(['fail', clean(test)]));\n  });\n\n  runner.on('end', function(){\n    process.stdout.write(JSON.stringify(['end', self.stats]));\n  });\n}\n\n/**\n * Return a plain-object representation of `test`\n * free of cyclic properties etc.\n *\n * @param {Object} test\n * @return {Object}\n * @api private\n */\n\nfunction clean(test) {\n  return {\n      title: test.title\n    , fullTitle: test.fullTitle()\n    , duration: test.duration\n  }\n}\n}); // module: reporters/json-stream.js\n\nrequire.register(\"reporters/json.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base')\n  , cursor = Base.cursor\n  , color = Base.color;\n\n/**\n * Expose `JSON`.\n */\n\nexports = module.exports = JSONReporter;\n\n/**\n * Initialize a new `JSON` reporter.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction JSONReporter(runner) {\n  var self = this;\n  Base.call(this, runner);\n\n  var tests = []\n    , failures = []\n    , passes = [];\n\n  runner.on('test end', function(test){\n    tests.push(test);\n  });\n\n  runner.on('pass', function(test){\n    passes.push(test);\n  });\n\n  runner.on('fail', function(test){\n    failures.push(test);\n  });\n\n  runner.on('end', function(){\n    var obj = {\n        stats: self.stats\n      , tests: tests.map(clean)\n      , failures: failures.map(clean)\n      , passes: passes.map(clean)\n    };\n\n    process.stdout.write(JSON.stringify(obj, null, 2));\n  });\n}\n\n/**\n * Return a plain-object representation of `test`\n * free of cyclic properties etc.\n *\n * @param {Object} test\n * @return {Object}\n * @api private\n */\n\nfunction clean(test) {\n  return {\n      title: test.title\n    , fullTitle: test.fullTitle()\n    , duration: test.duration\n  }\n}\n}); // module: reporters/json.js\n\nrequire.register(\"reporters/landing.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base')\n  , cursor = Base.cursor\n  , color = Base.color;\n\n/**\n * Expose `Landing`.\n */\n\nexports = module.exports = Landing;\n\n/**\n * Airplane color.\n */\n\nBase.colors.plane = 0;\n\n/**\n * Airplane crash color.\n */\n\nBase.colors['plane crash'] = 31;\n\n/**\n * Runway color.\n */\n\nBase.colors.runway = 90;\n\n/**\n * Initialize a new `Landing` reporter.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction Landing(runner) {\n  Base.call(this, runner);\n\n  var self = this\n    , stats = this.stats\n    , width = Base.window.width * .75 | 0\n    , total = runner.total\n    , stream = process.stdout\n    , plane = color('plane', '✈')\n    , crashed = -1\n    , n = 0;\n\n  function runway() {\n    var buf = Array(width).join('-');\n    return '  ' + color('runway', buf);\n  }\n\n  runner.on('start', function(){\n    stream.write('\\n  ');\n    cursor.hide();\n  });\n\n  runner.on('test end', function(test){\n    // check if the plane crashed\n    var col = -1 == crashed\n      ? width * ++n / total | 0\n      : crashed;\n\n    // show the crash\n    if ('failed' == test.state) {\n      plane = color('plane crash', '✈');\n      crashed = col;\n    }\n\n    // render landing strip\n    stream.write('\\u001b[4F\\n\\n');\n    stream.write(runway());\n    stream.write('\\n  ');\n    stream.write(color('runway', Array(col).join('⋅')));\n    stream.write(plane)\n    stream.write(color('runway', Array(width - col).join('⋅') + '\\n'));\n    stream.write(runway());\n    stream.write('\\u001b[0m');\n  });\n\n  runner.on('end', function(){\n    cursor.show();\n    console.log();\n    self.epilogue();\n  });\n}\n\n/**\n * Inherit from `Base.prototype`.\n */\n\nfunction F(){};\nF.prototype = Base.prototype;\nLanding.prototype = new F;\nLanding.prototype.constructor = Landing;\n\n}); // module: reporters/landing.js\n\nrequire.register(\"reporters/list.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base')\n  , cursor = Base.cursor\n  , color = Base.color;\n\n/**\n * Expose `List`.\n */\n\nexports = module.exports = List;\n\n/**\n * Initialize a new `List` test reporter.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction List(runner) {\n  Base.call(this, runner);\n\n  var self = this\n    , stats = this.stats\n    , n = 0;\n\n  runner.on('start', function(){\n    console.log();\n  });\n\n  runner.on('test', function(test){\n    process.stdout.write(color('pass', '    ' + test.fullTitle() + ': '));\n  });\n\n  runner.on('pending', function(test){\n    var fmt = color('checkmark', '  -')\n      + color('pending', ' %s');\n    console.log(fmt, test.fullTitle());\n  });\n\n  runner.on('pass', function(test){\n    var fmt = color('checkmark', '  '+Base.symbols.dot)\n      + color('pass', ' %s: ')\n      + color(test.speed, '%dms');\n    cursor.CR();\n    console.log(fmt, test.fullTitle(), test.duration);\n  });\n\n  runner.on('fail', function(test, err){\n    cursor.CR();\n    console.log(color('fail', '  %d) %s'), ++n, test.fullTitle());\n  });\n\n  runner.on('end', self.epilogue.bind(self));\n}\n\n/**\n * Inherit from `Base.prototype`.\n */\n\nfunction F(){};\nF.prototype = Base.prototype;\nList.prototype = new F;\nList.prototype.constructor = List;\n\n\n}); // module: reporters/list.js\n\nrequire.register(\"reporters/markdown.js\", function(module, exports, require){\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base')\n  , utils = require('../utils');\n\n/**\n * Expose `Markdown`.\n */\n\nexports = module.exports = Markdown;\n\n/**\n * Initialize a new `Markdown` reporter.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction Markdown(runner) {\n  Base.call(this, runner);\n\n  var self = this\n    , stats = this.stats\n    , level = 0\n    , buf = '';\n\n  function title(str) {\n    return Array(level).join('#') + ' ' + str;\n  }\n\n  function indent() {\n    return Array(level).join('  ');\n  }\n\n  function mapTOC(suite, obj) {\n    var ret = obj;\n    obj = obj[suite.title] = obj[suite.title] || { suite: suite };\n    suite.suites.forEach(function(suite){\n      mapTOC(suite, obj);\n    });\n    return ret;\n  }\n\n  function stringifyTOC(obj, level) {\n    ++level;\n    var buf = '';\n    var link;\n    for (var key in obj) {\n      if ('suite' == key) continue;\n      if (key) link = ' - [' + key + '](#' + utils.slug(obj[key].suite.fullTitle()) + ')\\n';\n      if (key) buf += Array(level).join('  ') + link;\n      buf += stringifyTOC(obj[key], level);\n    }\n    --level;\n    return buf;\n  }\n\n  function generateTOC(suite) {\n    var obj = mapTOC(suite, {});\n    return stringifyTOC(obj, 0);\n  }\n\n  generateTOC(runner.suite);\n\n  runner.on('suite', function(suite){\n    ++level;\n    var slug = utils.slug(suite.fullTitle());\n    buf += '<a name=\"' + slug + '\"></a>' + '\\n';\n    buf += title(suite.title) + '\\n';\n  });\n\n  runner.on('suite end', function(suite){\n    --level;\n  });\n\n  runner.on('pass', function(test){\n    var code = utils.clean(test.fn.toString());\n    buf += test.title + '.\\n';\n    buf += '\\n```js\\n';\n    buf += code + '\\n';\n    buf += '```\\n\\n';\n  });\n\n  runner.on('end', function(){\n    process.stdout.write('# TOC\\n');\n    process.stdout.write(generateTOC(runner.suite));\n    process.stdout.write(buf);\n  });\n}\n}); // module: reporters/markdown.js\n\nrequire.register(\"reporters/min.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base');\n\n/**\n * Expose `Min`.\n */\n\nexports = module.exports = Min;\n\n/**\n * Initialize a new `Min` minimal test reporter (best used with --watch).\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction Min(runner) {\n  Base.call(this, runner);\n  \n  runner.on('start', function(){\n    // clear screen\n    process.stdout.write('\\u001b[2J');\n    // set cursor position\n    process.stdout.write('\\u001b[1;3H');\n  });\n\n  runner.on('end', this.epilogue.bind(this));\n}\n\n/**\n * Inherit from `Base.prototype`.\n */\n\nfunction F(){};\nF.prototype = Base.prototype;\nMin.prototype = new F;\nMin.prototype.constructor = Min;\n\n}); // module: reporters/min.js\n\nrequire.register(\"reporters/nyan.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base')\n  , color = Base.color;\n\n/**\n * Expose `Dot`.\n */\n\nexports = module.exports = NyanCat;\n\n/**\n * Initialize a new `Dot` matrix test reporter.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction NyanCat(runner) {\n  Base.call(this, runner);\n\n  var self = this\n    , stats = this.stats\n    , width = Base.window.width * .75 | 0\n    , rainbowColors = this.rainbowColors = self.generateColors()\n    , colorIndex = this.colorIndex = 0\n    , numerOfLines = this.numberOfLines = 4\n    , trajectories = this.trajectories = [[], [], [], []]\n    , nyanCatWidth = this.nyanCatWidth = 11\n    , trajectoryWidthMax = this.trajectoryWidthMax = (width - nyanCatWidth)\n    , scoreboardWidth = this.scoreboardWidth = 5\n    , tick = this.tick = 0\n    , n = 0;\n\n  runner.on('start', function(){\n    Base.cursor.hide();\n    self.draw('start');\n  });\n\n  runner.on('pending', function(test){\n    self.draw('pending');\n  });\n\n  runner.on('pass', function(test){\n    self.draw('pass');\n  });\n\n  runner.on('fail', function(test, err){\n    self.draw('fail');\n  });\n\n  runner.on('end', function(){\n    Base.cursor.show();\n    for (var i = 0; i < self.numberOfLines; i++) write('\\n');\n    self.epilogue();\n  });\n}\n\n/**\n * Draw the nyan cat with runner `status`.\n *\n * @param {String} status\n * @api private\n */\n\nNyanCat.prototype.draw = function(status){\n  this.appendRainbow();\n  this.drawScoreboard();\n  this.drawRainbow();\n  this.drawNyanCat(status);\n  this.tick = !this.tick;\n};\n\n/**\n * Draw the \"scoreboard\" showing the number\n * of passes, failures and pending tests.\n *\n * @api private\n */\n\nNyanCat.prototype.drawScoreboard = function(){\n  var stats = this.stats;\n  var colors = Base.colors;\n\n  function draw(color, n) {\n    write(' ');\n    write('\\u001b[' + color + 'm' + n + '\\u001b[0m');\n    write('\\n');\n  }\n\n  draw(colors.green, stats.passes);\n  draw(colors.fail, stats.failures);\n  draw(colors.pending, stats.pending);\n  write('\\n');\n\n  this.cursorUp(this.numberOfLines);\n};\n\n/**\n * Append the rainbow.\n *\n * @api private\n */\n\nNyanCat.prototype.appendRainbow = function(){\n  var segment = this.tick ? '_' : '-';\n  var rainbowified = this.rainbowify(segment);\n\n  for (var index = 0; index < this.numberOfLines; index++) {\n    var trajectory = this.trajectories[index];\n    if (trajectory.length >= this.trajectoryWidthMax) trajectory.shift();\n    trajectory.push(rainbowified);\n  }\n};\n\n/**\n * Draw the rainbow.\n *\n * @api private\n */\n\nNyanCat.prototype.drawRainbow = function(){\n  var self = this;\n\n  this.trajectories.forEach(function(line, index) {\n    write('\\u001b[' + self.scoreboardWidth + 'C');\n    write(line.join(''));\n    write('\\n');\n  });\n\n  this.cursorUp(this.numberOfLines);\n};\n\n/**\n * Draw the nyan cat with `status`.\n *\n * @param {String} status\n * @api private\n */\n\nNyanCat.prototype.drawNyanCat = function(status) {\n  var self = this;\n  var startWidth = this.scoreboardWidth + this.trajectories[0].length;\n\n  [0, 1, 2, 3].forEach(function(index) {\n    write('\\u001b[' + startWidth + 'C');\n\n    switch (index) {\n      case 0:\n        write('_,------,');\n        write('\\n');\n        break;\n      case 1:\n        var padding = self.tick ? '  ' : '   ';\n        write('_|' + padding + '/\\\\_/\\\\ ');\n        write('\\n');\n        break;\n      case 2:\n        var padding = self.tick ? '_' : '__';\n        var tail = self.tick ? '~' : '^';\n        var face;\n        switch (status) {\n          case 'pass':\n            face = '( ^ .^)';\n            break;\n          case 'fail':\n            face = '( o .o)';\n            break;\n          default:\n            face = '( - .-)';\n        }\n        write(tail + '|' + padding + face + ' ');\n        write('\\n');\n        break;\n      case 3:\n        var padding = self.tick ? ' ' : '  ';\n        write(padding + '\"\"  \"\" ');\n        write('\\n');\n        break;\n    }\n  });\n\n  this.cursorUp(this.numberOfLines);\n};\n\n/**\n * Move cursor up `n`.\n *\n * @param {Number} n\n * @api private\n */\n\nNyanCat.prototype.cursorUp = function(n) {\n  write('\\u001b[' + n + 'A');\n};\n\n/**\n * Move cursor down `n`.\n *\n * @param {Number} n\n * @api private\n */\n\nNyanCat.prototype.cursorDown = function(n) {\n  write('\\u001b[' + n + 'B');\n};\n\n/**\n * Generate rainbow colors.\n *\n * @return {Array}\n * @api private\n */\n\nNyanCat.prototype.generateColors = function(){\n  var colors = [];\n\n  for (var i = 0; i < (6 * 7); i++) {\n    var pi3 = Math.floor(Math.PI / 3);\n    var n = (i * (1.0 / 6));\n    var r = Math.floor(3 * Math.sin(n) + 3);\n    var g = Math.floor(3 * Math.sin(n + 2 * pi3) + 3);\n    var b = Math.floor(3 * Math.sin(n + 4 * pi3) + 3);\n    colors.push(36 * r + 6 * g + b + 16);\n  }\n\n  return colors;\n};\n\n/**\n * Apply rainbow to the given `str`.\n *\n * @param {String} str\n * @return {String}\n * @api private\n */\n\nNyanCat.prototype.rainbowify = function(str){\n  var color = this.rainbowColors[this.colorIndex % this.rainbowColors.length];\n  this.colorIndex += 1;\n  return '\\u001b[38;5;' + color + 'm' + str + '\\u001b[0m';\n};\n\n/**\n * Stdout helper.\n */\n\nfunction write(string) {\n  process.stdout.write(string);\n}\n\n/**\n * Inherit from `Base.prototype`.\n */\n\nfunction F(){};\nF.prototype = Base.prototype;\nNyanCat.prototype = new F;\nNyanCat.prototype.constructor = NyanCat;\n\n\n}); // module: reporters/nyan.js\n\nrequire.register(\"reporters/progress.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base')\n  , cursor = Base.cursor\n  , color = Base.color;\n\n/**\n * Expose `Progress`.\n */\n\nexports = module.exports = Progress;\n\n/**\n * General progress bar color.\n */\n\nBase.colors.progress = 90;\n\n/**\n * Initialize a new `Progress` bar test reporter.\n *\n * @param {Runner} runner\n * @param {Object} options\n * @api public\n */\n\nfunction Progress(runner, options) {\n  Base.call(this, runner);\n\n  var self = this\n    , options = options || {}\n    , stats = this.stats\n    , width = Base.window.width * .50 | 0\n    , total = runner.total\n    , complete = 0\n    , max = Math.max;\n\n  // default chars\n  options.open = options.open || '[';\n  options.complete = options.complete || '▬';\n  options.incomplete = options.incomplete || Base.symbols.dot;\n  options.close = options.close || ']';\n  options.verbose = false;\n\n  // tests started\n  runner.on('start', function(){\n    console.log();\n    cursor.hide();\n  });\n\n  // tests complete\n  runner.on('test end', function(){\n    complete++;\n    var incomplete = total - complete\n      , percent = complete / total\n      , n = width * percent | 0\n      , i = width - n;\n\n    cursor.CR();\n    process.stdout.write('\\u001b[J');\n    process.stdout.write(color('progress', '  ' + options.open));\n    process.stdout.write(Array(n).join(options.complete));\n    process.stdout.write(Array(i).join(options.incomplete));\n    process.stdout.write(color('progress', options.close));\n    if (options.verbose) {\n      process.stdout.write(color('progress', ' ' + complete + ' of ' + total));\n    }\n  });\n\n  // tests are complete, output some stats\n  // and the failures if any\n  runner.on('end', function(){\n    cursor.show();\n    console.log();\n    self.epilogue();\n  });\n}\n\n/**\n * Inherit from `Base.prototype`.\n */\n\nfunction F(){};\nF.prototype = Base.prototype;\nProgress.prototype = new F;\nProgress.prototype.constructor = Progress;\n\n\n}); // module: reporters/progress.js\n\nrequire.register(\"reporters/spec.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base')\n  , cursor = Base.cursor\n  , color = Base.color;\n\n/**\n * Expose `Spec`.\n */\n\nexports = module.exports = Spec;\n\n/**\n * Initialize a new `Spec` test reporter.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction Spec(runner) {\n  Base.call(this, runner);\n\n  var self = this\n    , stats = this.stats\n    , indents = 0\n    , n = 0;\n\n  function indent() {\n    return Array(indents).join('  ')\n  }\n\n  runner.on('start', function(){\n    console.log();\n  });\n\n  runner.on('suite', function(suite){\n    ++indents;\n    console.log(color('suite', '%s%s'), indent(), suite.title);\n  });\n\n  runner.on('suite end', function(suite){\n    --indents;\n    if (1 == indents) console.log();\n  });\n\n  runner.on('test', function(test){\n    process.stdout.write(indent() + color('pass', '  ◦ ' + test.title + ': '));\n  });\n\n  runner.on('pending', function(test){\n    var fmt = indent() + color('pending', '  - %s');\n    console.log(fmt, test.title);\n  });\n\n  runner.on('pass', function(test){\n    if ('fast' == test.speed) {\n      var fmt = indent()\n        + color('checkmark', '  ' + Base.symbols.ok)\n        + color('pass', ' %s ');\n      cursor.CR();\n      console.log(fmt, test.title);\n    } else {\n      var fmt = indent()\n        + color('checkmark', '  ' + Base.symbols.ok)\n        + color('pass', ' %s ')\n        + color(test.speed, '(%dms)');\n      cursor.CR();\n      console.log(fmt, test.title, test.duration);\n    }\n  });\n\n  runner.on('fail', function(test, err){\n    cursor.CR();\n    console.log(indent() + color('fail', '  %d) %s'), ++n, test.title);\n  });\n\n  runner.on('end', self.epilogue.bind(self));\n}\n\n/**\n * Inherit from `Base.prototype`.\n */\n\nfunction F(){};\nF.prototype = Base.prototype;\nSpec.prototype = new F;\nSpec.prototype.constructor = Spec;\n\n\n}); // module: reporters/spec.js\n\nrequire.register(\"reporters/tap.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base')\n  , cursor = Base.cursor\n  , color = Base.color;\n\n/**\n * Expose `TAP`.\n */\n\nexports = module.exports = TAP;\n\n/**\n * Initialize a new `TAP` reporter.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction TAP(runner) {\n  Base.call(this, runner);\n\n  var self = this\n    , stats = this.stats\n    , n = 1\n    , passes = 0\n    , failures = 0;\n\n  runner.on('start', function(){\n    var total = runner.grepTotal(runner.suite);\n    console.log('%d..%d', 1, total);\n  });\n\n  runner.on('test end', function(){\n    ++n;\n  });\n\n  runner.on('pending', function(test){\n    console.log('ok %d %s # SKIP -', n, title(test));\n  });\n\n  runner.on('pass', function(test){\n    passes++;\n    console.log('ok %d %s', n, title(test));\n  });\n\n  runner.on('fail', function(test, err){\n    failures++;\n    console.log('not ok %d %s', n, title(test));\n    if (err.stack) console.log(err.stack.replace(/^/gm, '  '));\n  });\n\n  runner.on('end', function(){\n    console.log('# tests ' + (passes + failures));\n    console.log('# pass ' + passes);\n    console.log('# fail ' + failures);\n  });\n}\n\n/**\n * Return a TAP-safe title of `test`\n *\n * @param {Object} test\n * @return {String}\n * @api private\n */\n\nfunction title(test) {\n  return test.fullTitle().replace(/#/g, '');\n}\n\n}); // module: reporters/tap.js\n\nrequire.register(\"reporters/teamcity.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base');\n\n/**\n * Expose `Teamcity`.\n */\n\nexports = module.exports = Teamcity;\n\n/**\n * Initialize a new `Teamcity` reporter.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction Teamcity(runner) {\n  Base.call(this, runner);\n  var stats = this.stats;\n\n  runner.on('start', function() {\n    console.log(\"##teamcity[testSuiteStarted name='mocha.suite']\");\n  });\n\n  runner.on('test', function(test) {\n    console.log(\"##teamcity[testStarted name='\" + escape(test.fullTitle()) + \"']\");\n  });\n\n  runner.on('fail', function(test, err) {\n    console.log(\"##teamcity[testFailed name='\" + escape(test.fullTitle()) + \"' message='\" + escape(err.message) + \"']\");\n  });\n\n  runner.on('pending', function(test) {\n    console.log(\"##teamcity[testIgnored name='\" + escape(test.fullTitle()) + \"' message='pending']\");\n  });\n\n  runner.on('test end', function(test) {\n    console.log(\"##teamcity[testFinished name='\" + escape(test.fullTitle()) + \"' duration='\" + test.duration + \"']\");\n  });\n\n  runner.on('end', function() {\n    console.log(\"##teamcity[testSuiteFinished name='mocha.suite' duration='\" + stats.duration + \"']\");\n  });\n}\n\n/**\n * Escape the given `str`.\n */\n\nfunction escape(str) {\n  return str\n    .replace(/\\|/g, \"||\")\n    .replace(/\\n/g, \"|n\")\n    .replace(/\\r/g, \"|r\")\n    .replace(/\\[/g, \"|[\")\n    .replace(/\\]/g, \"|]\")\n    .replace(/\\u0085/g, \"|x\")\n    .replace(/\\u2028/g, \"|l\")\n    .replace(/\\u2029/g, \"|p\")\n    .replace(/'/g, \"|'\");\n}\n\n}); // module: reporters/teamcity.js\n\nrequire.register(\"reporters/xunit.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Base = require('./base')\n  , utils = require('../utils')\n  , escape = utils.escape;\n\n/**\n * Save timer references to avoid Sinon interfering (see GH-237).\n */\n\nvar Date = global.Date\n  , setTimeout = global.setTimeout\n  , setInterval = global.setInterval\n  , clearTimeout = global.clearTimeout\n  , clearInterval = global.clearInterval;\n\n/**\n * Expose `XUnit`.\n */\n\nexports = module.exports = XUnit;\n\n/**\n * Initialize a new `XUnit` reporter.\n *\n * @param {Runner} runner\n * @api public\n */\n\nfunction XUnit(runner) {\n  Base.call(this, runner);\n  var stats = this.stats\n    , tests = []\n    , self = this;\n\n  runner.on('pass', function(test){\n    tests.push(test);\n  });\n  \n  runner.on('fail', function(test){\n    tests.push(test);\n  });\n\n  runner.on('end', function(){\n    console.log(tag('testsuite', {\n        name: 'Mocha Tests'\n      , tests: stats.tests\n      , failures: stats.failures\n      , errors: stats.failures\n      , skip: stats.tests - stats.failures - stats.passes\n      , timestamp: (new Date).toUTCString()\n      , time: stats.duration / 1000\n    }, false));\n\n    tests.forEach(test);\n    console.log('</testsuite>');    \n  });\n}\n\n/**\n * Inherit from `Base.prototype`.\n */\n\nfunction F(){};\nF.prototype = Base.prototype;\nXUnit.prototype = new F;\nXUnit.prototype.constructor = XUnit;\n\n\n/**\n * Output tag for the given `test.`\n */\n\nfunction test(test) {\n  var attrs = {\n      classname: test.parent.fullTitle()\n    , name: test.title\n    , time: test.duration / 1000\n  };\n\n  if ('failed' == test.state) {\n    var err = test.err;\n    attrs.message = escape(err.message);\n    console.log(tag('testcase', attrs, false, tag('failure', attrs, false, cdata(err.stack))));\n  } else if (test.pending) {\n    console.log(tag('testcase', attrs, false, tag('skipped', {}, true)));\n  } else {\n    console.log(tag('testcase', attrs, true) );\n  }\n}\n\n/**\n * HTML tag helper.\n */\n\nfunction tag(name, attrs, close, content) {\n  var end = close ? '/>' : '>'\n    , pairs = []\n    , tag;\n\n  for (var key in attrs) {\n    pairs.push(key + '=\"' + escape(attrs[key]) + '\"');\n  }\n\n  tag = '<' + name + (pairs.length ? ' ' + pairs.join(' ') : '') + end;\n  if (content) tag += content + '</' + name + end;\n  return tag;\n}\n\n/**\n * Return cdata escaped CDATA `str`.\n */\n\nfunction cdata(str) {\n  return '<![CDATA[' + escape(str) + ']]>';\n}\n\n}); // module: reporters/xunit.js\n\nrequire.register(\"runnable.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar EventEmitter = require('browser/events').EventEmitter\n  , debug = require('browser/debug')('mocha:runnable')\n  , milliseconds = require('./ms');\n\n/**\n * Save timer references to avoid Sinon interfering (see GH-237).\n */\n\nvar Date = global.Date\n  , setTimeout = global.setTimeout\n  , setInterval = global.setInterval\n  , clearTimeout = global.clearTimeout\n  , clearInterval = global.clearInterval;\n\n/**\n * Object#toString().\n */\n\nvar toString = Object.prototype.toString;\n\n/**\n * Expose `Runnable`.\n */\n\nmodule.exports = Runnable;\n\n/**\n * Initialize a new `Runnable` with the given `title` and callback `fn`.\n *\n * @param {String} title\n * @param {Function} fn\n * @api private\n */\n\nfunction Runnable(title, fn) {\n  this.title = title;\n  this.fn = fn;\n  this.async = fn && fn.length;\n  this.sync = ! this.async;\n  this._timeout = 2000;\n  this._slow = 75;\n  this.timedOut = false;\n}\n\n/**\n * Inherit from `EventEmitter.prototype`.\n */\n\nfunction F(){};\nF.prototype = EventEmitter.prototype;\nRunnable.prototype = new F;\nRunnable.prototype.constructor = Runnable;\n\n\n/**\n * Set & get timeout `ms`.\n *\n * @param {Number|String} ms\n * @return {Runnable|Number} ms or self\n * @api private\n */\n\nRunnable.prototype.timeout = function(ms){\n  if (0 == arguments.length) return this._timeout;\n  if ('string' == typeof ms) ms = milliseconds(ms);\n  debug('timeout %d', ms);\n  this._timeout = ms;\n  if (this.timer) this.resetTimeout();\n  return this;\n};\n\n/**\n * Set & get slow `ms`.\n *\n * @param {Number|String} ms\n * @return {Runnable|Number} ms or self\n * @api private\n */\n\nRunnable.prototype.slow = function(ms){\n  if (0 === arguments.length) return this._slow;\n  if ('string' == typeof ms) ms = milliseconds(ms);\n  debug('timeout %d', ms);\n  this._slow = ms;\n  return this;\n};\n\n/**\n * Return the full title generated by recursively\n * concatenating the parent's full title.\n *\n * @return {String}\n * @api public\n */\n\nRunnable.prototype.fullTitle = function(){\n  return this.parent.fullTitle() + ' ' + this.title;\n};\n\n/**\n * Clear the timeout.\n *\n * @api private\n */\n\nRunnable.prototype.clearTimeout = function(){\n  clearTimeout(this.timer);\n};\n\n/**\n * Inspect the runnable void of private properties.\n *\n * @return {String}\n * @api private\n */\n\nRunnable.prototype.inspect = function(){\n  return JSON.stringify(this, function(key, val){\n    if ('_' == key[0]) return;\n    if ('parent' == key) return '#<Suite>';\n    if ('ctx' == key) return '#<Context>';\n    return val;\n  }, 2);\n};\n\n/**\n * Reset the timeout.\n *\n * @api private\n */\n\nRunnable.prototype.resetTimeout = function(){\n  var self = this\n    , ms = this.timeout();\n\n  this.clearTimeout();\n  if (ms) {\n    this.timer = setTimeout(function(){\n      self.callback(new Error('timeout of ' + ms + 'ms exceeded'));\n      self.timedOut = true;\n    }, ms);\n  }\n};\n\n/**\n * Run the test and invoke `fn(err)`.\n *\n * @param {Function} fn\n * @api private\n */\n\nRunnable.prototype.run = function(fn){\n  var self = this\n    , ms = this.timeout()\n    , start = new Date\n    , ctx = this.ctx\n    , finished\n    , emitted;\n\n  if (ctx) ctx.runnable(this);\n\n  // timeout\n  if (this.async) {\n    if (ms) {\n      this.timer = setTimeout(function(){\n        done(new Error('timeout of ' + ms + 'ms exceeded'));\n        self.timedOut = true;\n      }, ms);\n    }\n  }\n\n  // called multiple times\n  function multiple(err) {\n    if (emitted) return;\n    emitted = true;\n    self.emit('error', err || new Error('done() called multiple times'));\n  }\n\n  // finished\n  function done(err) {\n    if (self.timedOut) return;\n    if (finished) return multiple(err);\n    self.clearTimeout();\n    self.duration = new Date - start;\n    finished = true;\n    fn(err);\n  }\n\n  // for .resetTimeout()\n  this.callback = done;\n\n  // async\n  if (this.async) {\n    try {\n      this.fn.call(ctx, function(err){\n        if (err instanceof Error || toString.call(err) === \"[object Error]\") return done(err);\n        if (null != err) return done(new Error('done() invoked with non-Error: ' + err));\n        done();\n      });\n    } catch (err) {\n      done(err);\n    }\n    return;\n  }\n\n  if (this.asyncOnly) {\n    return done(new Error('--async-only option in use without declaring `done()`'));\n  }\n\n  // sync\n  try {\n    if (!this.pending) this.fn.call(ctx);\n    this.duration = new Date - start;\n    fn();\n  } catch (err) {\n    fn(err);\n  }\n};\n\n}); // module: runnable.js\n\nrequire.register(\"runner.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar EventEmitter = require('browser/events').EventEmitter\n  , debug = require('browser/debug')('mocha:runner')\n  , Test = require('./test')\n  , utils = require('./utils')\n  , filter = utils.filter\n  , keys = utils.keys\n  , noop = function(){};\n\n/**\n * Non-enumerable globals.\n */\n\nvar globals = [\n  'setTimeout',\n  'clearTimeout',\n  'setInterval',\n  'clearInterval',\n  'XMLHttpRequest',\n  'Date'\n];\n\n/**\n * Expose `Runner`.\n */\n\nmodule.exports = Runner;\n\n/**\n * Initialize a `Runner` for the given `suite`.\n *\n * Events:\n *\n *   - `start`  execution started\n *   - `end`  execution complete\n *   - `suite`  (suite) test suite execution started\n *   - `suite end`  (suite) all tests (and sub-suites) have finished\n *   - `test`  (test) test execution started\n *   - `test end`  (test) test completed\n *   - `hook`  (hook) hook execution started\n *   - `hook end`  (hook) hook complete\n *   - `pass`  (test) test passed\n *   - `fail`  (test, err) test failed\n *\n * @api public\n */\n\nfunction Runner(suite) {\n  var self = this;\n  this._globals = [];\n  this.suite = suite;\n  this.total = suite.total();\n  this.failures = 0;\n  this.on('test end', function(test){ self.checkGlobals(test); });\n  this.on('hook end', function(hook){ self.checkGlobals(hook); });\n  this.grep(/.*/);\n  this.globals(this.globalProps().concat(['errno']));\n}\n\n/**\n * Inherit from `EventEmitter.prototype`.\n */\n\nfunction F(){};\nF.prototype = EventEmitter.prototype;\nRunner.prototype = new F;\nRunner.prototype.constructor = Runner;\n\n\n/**\n * Run tests with full titles matching `re`. Updates runner.total\n * with number of tests matched.\n *\n * @param {RegExp} re\n * @param {Boolean} invert\n * @return {Runner} for chaining\n * @api public\n */\n\nRunner.prototype.grep = function(re, invert){\n  debug('grep %s', re);\n  this._grep = re;\n  this._invert = invert;\n  this.total = this.grepTotal(this.suite);\n  return this;\n};\n\n/**\n * Returns the number of tests matching the grep search for the\n * given suite.\n *\n * @param {Suite} suite\n * @return {Number}\n * @api public\n */\n\nRunner.prototype.grepTotal = function(suite) {\n  var self = this;\n  var total = 0;\n\n  suite.eachTest(function(test){\n    var match = self._grep.test(test.fullTitle());\n    if (self._invert) match = !match;\n    if (match) total++;\n  });\n\n  return total;\n};\n\n/**\n * Return a list of global properties.\n *\n * @return {Array}\n * @api private\n */\n\nRunner.prototype.globalProps = function() {\n  var props = utils.keys(global);\n\n  // non-enumerables\n  for (var i = 0; i < globals.length; ++i) {\n    if (~utils.indexOf(props, globals[i])) continue;\n    props.push(globals[i]);\n  }\n\n  return props;\n};\n\n/**\n * Allow the given `arr` of globals.\n *\n * @param {Array} arr\n * @return {Runner} for chaining\n * @api public\n */\n\nRunner.prototype.globals = function(arr){\n  if (0 == arguments.length) return this._globals;\n  debug('globals %j', arr);\n  utils.forEach(arr, function(arr){\n    this._globals.push(arr);\n  }, this);\n  return this;\n};\n\n/**\n * Check for global variable leaks.\n *\n * @api private\n */\n\nRunner.prototype.checkGlobals = function(test){\n  if (this.ignoreLeaks) return;\n  var ok = this._globals;\n  var globals = this.globalProps();\n  var isNode = process.kill;\n  var leaks;\n\n  // check length - 2 ('errno' and 'location' globals)\n  if (isNode && 1 == ok.length - globals.length) return\n  else if (2 == ok.length - globals.length) return;\n\n  leaks = filterLeaks(ok, globals);\n  this._globals = this._globals.concat(leaks);\n\n  if (leaks.length > 1) {\n    this.fail(test, new Error('global leaks detected: ' + leaks.join(', ') + ''));\n  } else if (leaks.length) {\n    this.fail(test, new Error('global leak detected: ' + leaks[0]));\n  }\n};\n\n/**\n * Fail the given `test`.\n *\n * @param {Test} test\n * @param {Error} err\n * @api private\n */\n\nRunner.prototype.fail = function(test, err){\n  ++this.failures;\n  test.state = 'failed';\n\n  if ('string' == typeof err) {\n    err = new Error('the string \"' + err + '\" was thrown, throw an Error :)');\n  }\n  \n  this.emit('fail', test, err);\n};\n\n/**\n * Fail the given `hook` with `err`.\n *\n * Hook failures (currently) hard-end due\n * to that fact that a failing hook will\n * surely cause subsequent tests to fail,\n * causing jumbled reporting.\n *\n * @param {Hook} hook\n * @param {Error} err\n * @api private\n */\n\nRunner.prototype.failHook = function(hook, err){\n  this.fail(hook, err);\n  this.emit('end');\n};\n\n/**\n * Run hook `name` callbacks and then invoke `fn()`.\n *\n * @param {String} name\n * @param {Function} function\n * @api private\n */\n\nRunner.prototype.hook = function(name, fn){\n  var suite = this.suite\n    , hooks = suite['_' + name]\n    , self = this\n    , timer;\n\n  function next(i) {\n    var hook = hooks[i];\n    if (!hook) return fn();\n    self.currentRunnable = hook;\n\n    self.emit('hook', hook);\n\n    hook.on('error', function(err){\n      self.failHook(hook, err);\n    });\n\n    hook.run(function(err){\n      hook.removeAllListeners('error');\n      var testError = hook.error();\n      if (testError) self.fail(self.test, testError);\n      if (err) return self.failHook(hook, err);\n      self.emit('hook end', hook);\n      next(++i);\n    });\n  }\n\n  process.nextTick(function(){\n    next(0);\n  });\n};\n\n/**\n * Run hook `name` for the given array of `suites`\n * in order, and callback `fn(err)`.\n *\n * @param {String} name\n * @param {Array} suites\n * @param {Function} fn\n * @api private\n */\n\nRunner.prototype.hooks = function(name, suites, fn){\n  var self = this\n    , orig = this.suite;\n\n  function next(suite) {\n    self.suite = suite;\n\n    if (!suite) {\n      self.suite = orig;\n      return fn();\n    }\n\n    self.hook(name, function(err){\n      if (err) {\n        self.suite = orig;\n        return fn(err);\n      }\n\n      next(suites.pop());\n    });\n  }\n\n  next(suites.pop());\n};\n\n/**\n * Run hooks from the top level down.\n *\n * @param {String} name\n * @param {Function} fn\n * @api private\n */\n\nRunner.prototype.hookUp = function(name, fn){\n  var suites = [this.suite].concat(this.parents()).reverse();\n  this.hooks(name, suites, fn);\n};\n\n/**\n * Run hooks from the bottom up.\n *\n * @param {String} name\n * @param {Function} fn\n * @api private\n */\n\nRunner.prototype.hookDown = function(name, fn){\n  var suites = [this.suite].concat(this.parents());\n  this.hooks(name, suites, fn);\n};\n\n/**\n * Return an array of parent Suites from\n * closest to furthest.\n *\n * @return {Array}\n * @api private\n */\n\nRunner.prototype.parents = function(){\n  var suite = this.suite\n    , suites = [];\n  while (suite = suite.parent) suites.push(suite);\n  return suites;\n};\n\n/**\n * Run the current test and callback `fn(err)`.\n *\n * @param {Function} fn\n * @api private\n */\n\nRunner.prototype.runTest = function(fn){\n  var test = this.test\n    , self = this;\n\n  if (this.asyncOnly) test.asyncOnly = true;\n\n  try {\n    test.on('error', function(err){\n      self.fail(test, err);\n    });\n    test.run(fn);\n  } catch (err) {\n    fn(err);\n  }\n};\n\n/**\n * Run tests in the given `suite` and invoke\n * the callback `fn()` when complete.\n *\n * @param {Suite} suite\n * @param {Function} fn\n * @api private\n */\n\nRunner.prototype.runTests = function(suite, fn){\n  var self = this\n    , tests = suite.tests.slice()\n    , test;\n\n  function next(err) {\n    // if we bail after first err\n    if (self.failures && suite._bail) return fn();\n\n    // next test\n    test = tests.shift();\n\n    // all done\n    if (!test) return fn();\n\n    // grep\n    var match = self._grep.test(test.fullTitle());\n    if (self._invert) match = !match;\n    if (!match) return next();\n\n    // pending\n    if (test.pending) {\n      self.emit('pending', test);\n      self.emit('test end', test);\n      return next();\n    }\n\n    // execute test and hook(s)\n    self.emit('test', self.test = test);\n    self.hookDown('beforeEach', function(){\n      self.currentRunnable = self.test;\n      self.runTest(function(err){\n        test = self.test;\n\n        if (err) {\n          self.fail(test, err);\n          self.emit('test end', test);\n          return self.hookUp('afterEach', next);\n        }\n\n        test.state = 'passed';\n        self.emit('pass', test);\n        self.emit('test end', test);\n        self.hookUp('afterEach', next);\n      });\n    });\n  }\n\n  this.next = next;\n  next();\n};\n\n/**\n * Run the given `suite` and invoke the\n * callback `fn()` when complete.\n *\n * @param {Suite} suite\n * @param {Function} fn\n * @api private\n */\n\nRunner.prototype.runSuite = function(suite, fn){\n  var total = this.grepTotal(suite)\n    , self = this\n    , i = 0;\n\n  debug('run suite %s', suite.fullTitle());\n\n  if (!total) return fn();\n\n  this.emit('suite', this.suite = suite);\n\n  function next() {\n    var curr = suite.suites[i++];\n    if (!curr) return done();\n    self.runSuite(curr, next);\n  }\n\n  function done() {\n    self.suite = suite;\n    self.hook('afterAll', function(){\n      self.emit('suite end', suite);\n      fn();\n    });\n  }\n\n  this.hook('beforeAll', function(){\n    self.runTests(suite, next);\n  });\n};\n\n/**\n * Handle uncaught exceptions.\n *\n * @param {Error} err\n * @api private\n */\n\nRunner.prototype.uncaught = function(err){\n  debug('uncaught exception %s', err.message);\n  var runnable = this.currentRunnable;\n  if (!runnable || 'failed' == runnable.state) return;\n  runnable.clearTimeout();\n  err.uncaught = true;\n  this.fail(runnable, err);\n\n  // recover from test\n  if ('test' == runnable.type) {\n    this.emit('test end', runnable);\n    this.hookUp('afterEach', this.next);\n    return;\n  }\n\n  // bail on hooks\n  this.emit('end');\n};\n\n/**\n * Run the root suite and invoke `fn(failures)`\n * on completion.\n *\n * @param {Function} fn\n * @return {Runner} for chaining\n * @api public\n */\n\nRunner.prototype.run = function(fn){\n  var self = this\n    , fn = fn || function(){};\n\n  debug('start');\n\n  // callback\n  this.on('end', function(){\n    debug('end');\n    process.removeListener('uncaughtException', function(err){\n      self.uncaught(err);\n    });\n    fn(self.failures);\n  });\n\n  // run suites\n  this.emit('start');\n  this.runSuite(this.suite, function(){\n    debug('finished running');\n    self.emit('end');\n  });\n\n  // uncaught exception\n  process.on('uncaughtException', function(err){\n    self.uncaught(err);\n  });\n\n  return this;\n};\n\n/**\n * Filter leaks with the given globals flagged as `ok`.\n *\n * @param {Array} ok\n * @param {Array} globals\n * @return {Array}\n * @api private\n */\n\nfunction filterLeaks(ok, globals) {\n  return filter(globals, function(key){\n    var matched = filter(ok, function(ok){\n      if (~ok.indexOf('*')) return 0 == key.indexOf(ok.split('*')[0]);\n      // Opera and IE expose global variables for HTML element IDs (issue #243)\n      if (/^mocha-/.test(key)) return true;\n      return key == ok;\n    });\n    return matched.length == 0 && (!global.navigator || 'onerror' !== key);\n  });\n}\n\n}); // module: runner.js\n\nrequire.register(\"suite.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar EventEmitter = require('browser/events').EventEmitter\n  , debug = require('browser/debug')('mocha:suite')\n  , milliseconds = require('./ms')\n  , utils = require('./utils')\n  , Hook = require('./hook');\n\n/**\n * Expose `Suite`.\n */\n\nexports = module.exports = Suite;\n\n/**\n * Create a new `Suite` with the given `title`\n * and parent `Suite`. When a suite with the\n * same title is already present, that suite\n * is returned to provide nicer reporter\n * and more flexible meta-testing.\n *\n * @param {Suite} parent\n * @param {String} title\n * @return {Suite}\n * @api public\n */\n\nexports.create = function(parent, title){\n  var suite = new Suite(title, parent.ctx);\n  suite.parent = parent;\n  if (parent.pending) suite.pending = true;\n  title = suite.fullTitle();\n  parent.addSuite(suite);\n  return suite;\n};\n\n/**\n * Initialize a new `Suite` with the given\n * `title` and `ctx`.\n *\n * @param {String} title\n * @param {Context} ctx\n * @api private\n */\n\nfunction Suite(title, ctx) {\n  this.title = title;\n  this.ctx = ctx;\n  this.suites = [];\n  this.tests = [];\n  this.pending = false;\n  this._beforeEach = [];\n  this._beforeAll = [];\n  this._afterEach = [];\n  this._afterAll = [];\n  this.root = !title;\n  this._timeout = 2000;\n  this._slow = 75;\n  this._bail = false;\n}\n\n/**\n * Inherit from `EventEmitter.prototype`.\n */\n\nfunction F(){};\nF.prototype = EventEmitter.prototype;\nSuite.prototype = new F;\nSuite.prototype.constructor = Suite;\n\n\n/**\n * Return a clone of this `Suite`.\n *\n * @return {Suite}\n * @api private\n */\n\nSuite.prototype.clone = function(){\n  var suite = new Suite(this.title);\n  debug('clone');\n  suite.ctx = this.ctx;\n  suite.timeout(this.timeout());\n  suite.slow(this.slow());\n  suite.bail(this.bail());\n  return suite;\n};\n\n/**\n * Set timeout `ms` or short-hand such as \"2s\".\n *\n * @param {Number|String} ms\n * @return {Suite|Number} for chaining\n * @api private\n */\n\nSuite.prototype.timeout = function(ms){\n  if (0 == arguments.length) return this._timeout;\n  if ('string' == typeof ms) ms = milliseconds(ms);\n  debug('timeout %d', ms);\n  this._timeout = parseInt(ms, 10);\n  return this;\n};\n\n/**\n * Set slow `ms` or short-hand such as \"2s\".\n *\n * @param {Number|String} ms\n * @return {Suite|Number} for chaining\n * @api private\n */\n\nSuite.prototype.slow = function(ms){\n  if (0 === arguments.length) return this._slow;\n  if ('string' == typeof ms) ms = milliseconds(ms);\n  debug('slow %d', ms);\n  this._slow = ms;\n  return this;\n};\n\n/**\n * Sets whether to bail after first error.\n *\n * @parma {Boolean} bail\n * @return {Suite|Number} for chaining\n * @api private\n */\n\nSuite.prototype.bail = function(bail){\n  if (0 == arguments.length) return this._bail;\n  debug('bail %s', bail);\n  this._bail = bail;\n  return this;\n};\n\n/**\n * Run `fn(test[, done])` before running tests.\n *\n * @param {Function} fn\n * @return {Suite} for chaining\n * @api private\n */\n\nSuite.prototype.beforeAll = function(fn){\n  if (this.pending) return this;\n  var hook = new Hook('\"before all\" hook', fn);\n  hook.parent = this;\n  hook.timeout(this.timeout());\n  hook.slow(this.slow());\n  hook.ctx = this.ctx;\n  this._beforeAll.push(hook);\n  this.emit('beforeAll', hook);\n  return this;\n};\n\n/**\n * Run `fn(test[, done])` after running tests.\n *\n * @param {Function} fn\n * @return {Suite} for chaining\n * @api private\n */\n\nSuite.prototype.afterAll = function(fn){\n  if (this.pending) return this;\n  var hook = new Hook('\"after all\" hook', fn);\n  hook.parent = this;\n  hook.timeout(this.timeout());\n  hook.slow(this.slow());\n  hook.ctx = this.ctx;\n  this._afterAll.push(hook);\n  this.emit('afterAll', hook);\n  return this;\n};\n\n/**\n * Run `fn(test[, done])` before each test case.\n *\n * @param {Function} fn\n * @return {Suite} for chaining\n * @api private\n */\n\nSuite.prototype.beforeEach = function(fn){\n  if (this.pending) return this;\n  var hook = new Hook('\"before each\" hook', fn);\n  hook.parent = this;\n  hook.timeout(this.timeout());\n  hook.slow(this.slow());\n  hook.ctx = this.ctx;\n  this._beforeEach.push(hook);\n  this.emit('beforeEach', hook);\n  return this;\n};\n\n/**\n * Run `fn(test[, done])` after each test case.\n *\n * @param {Function} fn\n * @return {Suite} for chaining\n * @api private\n */\n\nSuite.prototype.afterEach = function(fn){\n  if (this.pending) return this;\n  var hook = new Hook('\"after each\" hook', fn);\n  hook.parent = this;\n  hook.timeout(this.timeout());\n  hook.slow(this.slow());\n  hook.ctx = this.ctx;\n  this._afterEach.push(hook);\n  this.emit('afterEach', hook);\n  return this;\n};\n\n/**\n * Add a test `suite`.\n *\n * @param {Suite} suite\n * @return {Suite} for chaining\n * @api private\n */\n\nSuite.prototype.addSuite = function(suite){\n  suite.parent = this;\n  suite.timeout(this.timeout());\n  suite.slow(this.slow());\n  suite.bail(this.bail());\n  this.suites.push(suite);\n  this.emit('suite', suite);\n  return this;\n};\n\n/**\n * Add a `test` to this suite.\n *\n * @param {Test} test\n * @return {Suite} for chaining\n * @api private\n */\n\nSuite.prototype.addTest = function(test){\n  test.parent = this;\n  test.timeout(this.timeout());\n  test.slow(this.slow());\n  test.ctx = this.ctx;\n  this.tests.push(test);\n  this.emit('test', test);\n  return this;\n};\n\n/**\n * Return the full title generated by recursively\n * concatenating the parent's full title.\n *\n * @return {String}\n * @api public\n */\n\nSuite.prototype.fullTitle = function(){\n  if (this.parent) {\n    var full = this.parent.fullTitle();\n    if (full) return full + ' ' + this.title;\n  }\n  return this.title;\n};\n\n/**\n * Return the total number of tests.\n *\n * @return {Number}\n * @api public\n */\n\nSuite.prototype.total = function(){\n  return utils.reduce(this.suites, function(sum, suite){\n    return sum + suite.total();\n  }, 0) + this.tests.length;\n};\n\n/**\n * Iterates through each suite recursively to find\n * all tests. Applies a function in the format\n * `fn(test)`.\n *\n * @param {Function} fn\n * @return {Suite}\n * @api private\n */\n\nSuite.prototype.eachTest = function(fn){\n  utils.forEach(this.tests, fn);\n  utils.forEach(this.suites, function(suite){\n    suite.eachTest(fn);\n  });\n  return this;\n};\n\n}); // module: suite.js\n\nrequire.register(\"test.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar Runnable = require('./runnable');\n\n/**\n * Expose `Test`.\n */\n\nmodule.exports = Test;\n\n/**\n * Initialize a new `Test` with the given `title` and callback `fn`.\n *\n * @param {String} title\n * @param {Function} fn\n * @api private\n */\n\nfunction Test(title, fn) {\n  Runnable.call(this, title, fn);\n  this.pending = !fn;\n  this.type = 'test';\n}\n\n/**\n * Inherit from `Runnable.prototype`.\n */\n\nfunction F(){};\nF.prototype = Runnable.prototype;\nTest.prototype = new F;\nTest.prototype.constructor = Test;\n\n\n}); // module: test.js\n\nrequire.register(\"utils.js\", function(module, exports, require){\n\n/**\n * Module dependencies.\n */\n\nvar fs = require('browser/fs')\n  , path = require('browser/path')\n  , join = path.join\n  , debug = require('browser/debug')('mocha:watch');\n\n/**\n * Ignored directories.\n */\n\nvar ignore = ['node_modules', '.git'];\n\n/**\n * Escape special characters in the given string of html.\n *\n * @param  {String} html\n * @return {String}\n * @api private\n */\n\nexports.escape = function(html){\n  return String(html)\n    .replace(/&/g, '&amp;')\n    .replace(/\"/g, '&quot;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;');\n};\n\n/**\n * Array#forEach (<=IE8)\n *\n * @param {Array} array\n * @param {Function} fn\n * @param {Object} scope\n * @api private\n */\n\nexports.forEach = function(arr, fn, scope){\n  for (var i = 0, l = arr.length; i < l; i++)\n    fn.call(scope, arr[i], i);\n};\n\n/**\n * Array#indexOf (<=IE8)\n *\n * @parma {Array} arr\n * @param {Object} obj to find index of\n * @param {Number} start\n * @api private\n */\n\nexports.indexOf = function(arr, obj, start){\n  for (var i = start || 0, l = arr.length; i < l; i++) {\n    if (arr[i] === obj)\n      return i;\n  }\n  return -1;\n};\n\n/**\n * Array#reduce (<=IE8)\n * \n * @param {Array} array\n * @param {Function} fn\n * @param {Object} initial value\n * @api private\n */\n\nexports.reduce = function(arr, fn, val){\n  var rval = val;\n\n  for (var i = 0, l = arr.length; i < l; i++) {\n    rval = fn(rval, arr[i], i, arr);\n  }\n\n  return rval;\n};\n\n/**\n * Array#filter (<=IE8)\n *\n * @param {Array} array\n * @param {Function} fn\n * @api private\n */\n\nexports.filter = function(arr, fn){\n  var ret = [];\n\n  for (var i = 0, l = arr.length; i < l; i++) {\n    var val = arr[i];\n    if (fn(val, i, arr)) ret.push(val);\n  }\n\n  return ret;\n};\n\n/**\n * Object.keys (<=IE8)\n *\n * @param {Object} obj\n * @return {Array} keys\n * @api private\n */\n\nexports.keys = Object.keys || function(obj) {\n  var keys = []\n    , has = Object.prototype.hasOwnProperty // for `window` on <=IE8\n\n  for (var key in obj) {\n    if (has.call(obj, key)) {\n      keys.push(key);\n    }\n  }\n\n  return keys;\n};\n\n/**\n * Watch the given `files` for changes\n * and invoke `fn(file)` on modification.\n *\n * @param {Array} files\n * @param {Function} fn\n * @api private\n */\n\nexports.watch = function(files, fn){\n  var options = { interval: 100 };\n  files.forEach(function(file){\n    debug('file %s', file);\n    fs.watchFile(file, options, function(curr, prev){\n      if (prev.mtime < curr.mtime) fn(file);\n    });\n  });\n};\n\n/**\n * Ignored files.\n */\n\nfunction ignored(path){\n  return !~ignore.indexOf(path);\n}\n\n/**\n * Lookup files in the given `dir`.\n *\n * @return {Array}\n * @api private\n */\n\nexports.files = function(dir, ret){\n  ret = ret || [];\n\n  fs.readdirSync(dir)\n  .filter(ignored)\n  .forEach(function(path){\n    path = join(dir, path);\n    if (fs.statSync(path).isDirectory()) {\n      exports.files(path, ret);\n    } else if (path.match(/\\.(js|coffee)$/)) {\n      ret.push(path);\n    }\n  });\n\n  return ret;\n};\n\n/**\n * Compute a slug from the given `str`.\n *\n * @param {String} str\n * @return {String}\n * @api private\n */\n\nexports.slug = function(str){\n  return str\n    .toLowerCase()\n    .replace(/ +/g, '-')\n    .replace(/[^-\\w]/g, '');\n};\n\n/**\n * Strip the function definition from `str`,\n * and re-indent for pre whitespace.\n */\n\nexports.clean = function(str) {\n  str = str\n    .replace(/^function *\\(.*\\) *{/, '')\n    .replace(/\\s+\\}$/, '');\n\n  var spaces = str.match(/^\\n?( *)/)[1].length\n    , re = new RegExp('^ {' + spaces + '}', 'gm');\n\n  str = str.replace(re, '');\n\n  return exports.trim(str);\n};\n\n/**\n * Escape regular expression characters in `str`.\n *\n * @param {String} str\n * @return {String}\n * @api private\n */\n\nexports.escapeRegexp = function(str){\n  return str.replace(/[-\\\\^$*+?.()|[\\]{}]/g, \"\\\\$&\");\n};\n\n/**\n * Trim the given `str`.\n *\n * @param {String} str\n * @return {String}\n * @api private\n */\n\nexports.trim = function(str){\n  return str.replace(/^\\s+|\\s+$/g, '');\n};\n\n/**\n * Parse the given `qs`.\n *\n * @param {String} qs\n * @return {Object}\n * @api private\n */\n\nexports.parseQuery = function(qs){\n  return exports.reduce(qs.replace('?', '').split('&'), function(obj, pair){\n    var i = pair.indexOf('=')\n      , key = pair.slice(0, i)\n      , val = pair.slice(++i);\n\n    obj[key] = decodeURIComponent(val);\n    return obj;\n  }, {});\n};\n\n/**\n * Highlight the given string of `js`.\n *\n * @param {String} js\n * @return {String}\n * @api private\n */\n\nfunction highlight(js) {\n  return js\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\\/\\/(.*)/gm, '<span class=\"comment\">//$1</span>')\n    .replace(/('.*?')/gm, '<span class=\"string\">$1</span>')\n    .replace(/(\\d+\\.\\d+)/gm, '<span class=\"number\">$1</span>')\n    .replace(/(\\d+)/gm, '<span class=\"number\">$1</span>')\n    .replace(/\\bnew *(\\w+)/gm, '<span class=\"keyword\">new</span> <span class=\"init\">$1</span>')\n    .replace(/\\b(function|new|throw|return|var|if|else)\\b/gm, '<span class=\"keyword\">$1</span>')\n}\n\n/**\n * Highlight the contents of tag `name`.\n *\n * @param {String} name\n * @api private\n */\n\nexports.highlightTags = function(name) {\n  var code = document.getElementsByTagName(name);\n  for (var i = 0, len = code.length; i < len; ++i) {\n    code[i].innerHTML = highlight(code[i].innerHTML);\n  }\n};\n\n}); // module: utils.js\n/**\n * Node shims.\n *\n * These are meant only to allow\n * mocha.js to run untouched, not\n * to allow running node code in\n * the browser.\n */\n\nprocess = {};\nprocess.exit = function(status){};\nprocess.stdout = {};\nglobal = window;\n\n/**\n * next tick implementation.\n */\n\nprocess.nextTick = (function(){\n  // postMessage behaves badly on IE8\n  if (window.ActiveXObject || !window.postMessage) {\n    return function(fn){ fn() };\n  }\n\n  // based on setZeroTimeout by David Baron\n  // - http://dbaron.org/log/20100309-faster-timeouts\n  var timeouts = []\n    , name = 'mocha-zero-timeout'\n\n  window.addEventListener('message', function(e){\n    if (e.source == window && e.data == name) {\n      if (e.stopPropagation) e.stopPropagation();\n      if (timeouts.length) timeouts.shift()();\n    }\n  }, true);\n\n  return function(fn){\n    timeouts.push(fn);\n    window.postMessage(name, '*');\n  }\n})();\n\n/**\n * Remove uncaughtException listener.\n */\n\nprocess.removeListener = function(e){\n  if ('uncaughtException' == e) {\n    window.onerror = null;\n  }\n};\n\n/**\n * Implements uncaughtException listener.\n */\n\nprocess.on = function(e, fn){\n  if ('uncaughtException' == e) {\n    window.onerror = function(err, url, line){\n      fn(new Error(err + ' (' + url + ':' + line + ')'));\n    };\n  }\n};\n\n// boot\n;(function(){\n\n  /**\n   * Expose mocha.\n   */\n\n  var Mocha = window.Mocha = require('mocha'),\n      mocha = window.mocha = new Mocha({ reporter: 'html' });\n\n  /**\n   * Override ui to ensure that the ui functions are initialized.\n   * Normally this would happen in Mocha.prototype.loadFiles.\n   */\n\n  mocha.ui = function(ui){\n    Mocha.prototype.ui.call(this, ui);\n    this.suite.emit('pre-require', window, null, this);\n    return this;\n  };\n\n  /**\n   * Setup mocha with the given setting options.\n   */\n\n  mocha.setup = function(opts){\n    if ('string' == typeof opts) opts = { ui: opts };\n    for (var opt in opts) this[opt](opts[opt]);\n    return this;\n  };\n\n  /**\n   * Run mocha, returning the Runner.\n   */\n\n  mocha.run = function(fn){\n    var options = mocha.options;\n    mocha.globals('location');\n\n    var query = Mocha.utils.parseQuery(window.location.search || '');\n    if (query.grep) mocha.grep(query.grep);\n    if (query.invert) mocha.invert();\n\n    return Mocha.prototype.run.call(mocha, function(){\n      Mocha.utils.highlightTags('code');\n      if (fn) fn();\n    });\n  };\n})();\n})();"
  },
  {
    "path": "test/spec/test.js",
    "content": "/*global describe, it */\n'use strict';\n(function () {\n    describe('Give it some context', function () {\n        describe('maybe a bit more context here', function () {\n            it('should run here few assertions', function () {\n\n            });\n        });\n    });\n})();\n"
  }
]