Showing preview only (764K chars total). Download the full file or copy to clipboard to get everything.
Repository: kenjiSpecial/100day-canvas-bootcamp-training
Branch: master
Commit: ad10e045958d
Files: 108
Total size: 725.3 KB
Directory structure:
gitextract_de7fdsmn/
├── .bowerrc
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .jshintrc
├── Gruntfile.js
├── README.md
├── app/
│ ├── .htaccess
│ ├── 404.html
│ ├── gl-html/
│ │ ├── gl00.html
│ │ ├── gl01.html
│ │ ├── gl57.html
│ │ ├── three58.html
│ │ └── three64.html
│ ├── gl-index.html
│ ├── index.html
│ ├── json/
│ │ └── awwwrd.js
│ ├── robots.txt
│ ├── scripts/
│ │ ├── 0-components/
│ │ │ ├── boilerplate.js
│ │ │ ├── data.js
│ │ │ ├── output.js
│ │ │ └── path.js
│ │ ├── 1-illusion-of-life/
│ │ │ ├── 1-squash.js
│ │ │ ├── 10-animation.js
│ │ │ ├── 11-animation-2.js
│ │ │ ├── 12-secondary-action.js
│ │ │ ├── 13-secondary-action.js
│ │ │ ├── 14-undefined.js
│ │ │ ├── 15-undefined.js
│ │ │ ├── 16-undefined.js
│ │ │ ├── 17-undefined.js
│ │ │ ├── 18-undefined.js
│ │ │ ├── 19-undefined.js
│ │ │ ├── 2-squash.js
│ │ │ ├── 20-undefined.js
│ │ │ ├── 21-undefined.js
│ │ │ ├── 22-sine-cos.js
│ │ │ ├── 22-undefined.js
│ │ │ ├── 23-undefined.js
│ │ │ ├── 3-stage.js
│ │ │ ├── 4-anticipation.js
│ │ │ ├── 5-pose-to-pos.js
│ │ │ ├── 6-pose-to-pose.js
│ │ │ ├── 7-pose-to-pose.js
│ │ │ ├── 8-arcs.js
│ │ │ └── 9-arcs.js
│ │ ├── 2-numbers/
│ │ │ ├── 24-number0.js
│ │ │ └── 25-number0.js
│ │ ├── 3-algorithm/
│ │ │ ├── -1-43-undefined-botsu.js
│ │ │ ├── 33-bubble-sort.js
│ │ │ ├── 34-search.js
│ │ │ ├── 35-undefined.js
│ │ │ ├── 36-undefined.js
│ │ │ ├── 37-undefined.js
│ │ │ ├── 38-undefined.js
│ │ │ ├── 39-undefined.js
│ │ │ ├── 40-undefined.js
│ │ │ ├── 41-undefined.js
│ │ │ └── 42-undefined.js
│ │ ├── 4-webgl/
│ │ │ ├── 0-test-three-js-example.js
│ │ │ ├── 1-test-three-js-example.js
│ │ │ ├── 2-test-three-js-example.js
│ │ │ ├── 48-three-js-shader.js
│ │ │ ├── 49-three-js.js
│ │ │ ├── 50-three-js-with-shader.js
│ │ │ ├── 55-gl.js
│ │ │ ├── 56-gl.js
│ │ │ ├── 57-gl.js
│ │ │ ├── 58-three-js.js
│ │ │ ├── 64-three-js.js
│ │ │ ├── 99-00-gl-learning.js
│ │ │ └── vendors/
│ │ │ └── minMatrix.js
│ │ ├── 5-loop/
│ │ │ ├── 43-loop.js
│ │ │ ├── 44-loop.js
│ │ │ ├── 45-loop.js
│ │ │ ├── 46-loop.js
│ │ │ ├── 47-loop.js
│ │ │ └── 51-loop.js
│ │ ├── 6-letters/
│ │ │ ├── 52-letters.js
│ │ │ ├── 53-letters.js
│ │ │ └── 54-letter.js
│ │ ├── 99-hobby/
│ │ │ ├── 26-undefined.js
│ │ │ ├── 27-simple-boid.js
│ │ │ ├── 28-02-combination.js
│ │ │ ├── 28-combination.js
│ │ │ ├── 30-mouse-boid.js
│ │ │ ├── 32-boid-collection.js
│ │ │ ├── 99-01-canvas-letter.js
│ │ │ ├── 99-02-shader-example.js
│ │ │ ├── 99-03-circle-drawing.js
│ │ │ ├── 99-04-flag-animation.js
│ │ │ └── 99-05-color-draw.js
│ │ ├── helpers/
│ │ │ ├── boilterplate.js
│ │ │ ├── colorConverter.js
│ │ │ ├── keyEvents.js
│ │ │ └── svg-parse.js
│ │ ├── main.js
│ │ └── ref/
│ │ └── camera.js
│ ├── styles/
│ │ └── main.scss
│ └── three-js-shader-sample.html
├── bower.json
├── package.json
└── test/
├── index.html
├── lib/
│ ├── chai.js
│ ├── expect.js
│ └── mocha/
│ ├── mocha.css
│ └── mocha.js
└── spec/
└── test.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .bowerrc
================================================
{
"directory": "app/bower_components"
}
================================================
FILE: .editorconfig
================================================
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 4
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .gitattributes
================================================
* text=auto
================================================
FILE: .gitignore
================================================
node_modules
dist
.tmp
.sass-cache
app/bower_components
test/bower_components
================================================
FILE: .jshintrc
================================================
{
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 4,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"undef": true,
"unused": true,
"strict": true,
"trailing": true,
"smarttabs": true,
"jquery": true
}
================================================
FILE: Gruntfile.js
================================================
// Generated on 2014-05-01 using generator-webapp 0.4.8
'use strict';
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'
module.exports = function (grunt) {
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
config: {
// Configurable paths
app: 'app',
dist: 'dist'
},
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['bowerInstall']
},
gruntfile: {
files: ['Gruntfile.js']
},
compass: {
files: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer']
},
styles: {
files: ['<%= config.app %>/styles/{,*/}*.css'],
tasks: ['newer:copy:styles', 'autoprefixer']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
]
}
},
// The actual grunt server settings
connect: {
options: {
port: 9000,
livereload: 35729,
// Change this to '0.0.0.0' to access the server from outside
hostname: '0.0.0.0'
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= config.app %>'
]
}
},
test: {
options: {
port: 9001,
base: [
'.tmp',
'test',
'<%= config.app %>'
]
}
},
dist: {
options: {
open: true,
base: '<%= config.dist %>',
livereload: false
}
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= config.dist %>/*',
'!<%= config.dist %>/.git*'
]
}]
},
server: '.tmp'
},
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: [
'Gruntfile.js',
'<%= config.app %>/scripts/{,*/}*.js',
'!<%= config.app %>/scripts/vendor/*',
'test/spec/{,*/}*.js'
]
},
// Mocha testing framework configuration options
mocha: {
all: {
options: {
run: true,
urls: ['http://<%= connect.test.options.hostname %>:<%= connect.test.options.port %>/index.html']
}
}
},
// Compiles Sass to CSS and generates necessary files if requested
compass: {
options: {
sassDir: '<%= config.app %>/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/images/generated',
imagesDir: '<%= config.app %>/images',
javascriptsDir: '<%= config.app %>/scripts',
fontsDir: '<%= config.app %>/styles/fonts',
importPath: '<%= config.app %>/bower_components',
httpImagesPath: '/images',
httpGeneratedImagesPath: '/images/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false,
assetCacheBuster: false
},
dist: {
options: {
generatedImagesDir: '<%= config.dist %>/images/generated'
}
},
server: {
options: {
debugInfo: true
}
}
},
// Add vendor prefixed styles
autoprefixer: {
options: {
browsers: ['last 1 version']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
// Automatically inject Bower components into the HTML file
bowerInstall: {
app: {
src: ['<%= config.app %>/index.html'],
ignorePath: '<%= config.app %>/',
exclude: ['<%= config.app %>/bower_components/bootstrap-sass/vendor/assets/javascripts/bootstrap.js']
},
sass: {
src: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: '<%= config.app %>/bower_components/'
}
},
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= config.dist %>/scripts/{,*/}*.js',
'<%= config.dist %>/styles/{,*/}*.css',
'<%= config.dist %>/images/{,*/}*.*',
'<%= config.dist %>/styles/fonts/{,*/}*.*',
'<%= config.dist %>/*.{ico,png}'
]
}
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
options: {
dest: '<%= config.dist %>'
},
html: '<%= config.app %>/index.html'
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: ['<%= config.dist %>', '<%= config.dist %>/images']
},
html: ['<%= config.dist %>/{,*/}*.html'],
css: ['<%= config.dist %>/styles/{,*/}*.css']
},
// The following *-min tasks produce minified files in the dist folder
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/}*.{gif,jpeg,jpg,png}',
dest: '<%= config.dist %>/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/}*.svg',
dest: '<%= config.dist %>/images'
}]
}
},
htmlmin: {
dist: {
options: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeCommentsFromCDATA: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
removeRedundantAttributes: true,
useShortDoctype: true
},
files: [{
expand: true,
cwd: '<%= config.dist %>',
src: '{,*/}*.html',
dest: '<%= config.dist %>'
}]
}
},
// By default, your `index.html`'s <!-- Usemin block --> will take care of
// minification. These next options are pre-configured if you do not wish
// to use the Usemin blocks.
// cssmin: {
// dist: {
// files: {
// '<%= config.dist %>/styles/main.css': [
// '.tmp/styles/{,*/}*.css',
// '<%= config.app %>/styles/{,*/}*.css'
// ]
// }
// }
// },
// uglify: {
// dist: {
// files: {
// '<%= config.dist %>/scripts/scripts.js': [
// '<%= config.dist %>/scripts/scripts.js'
// ]
// }
// }
// },
// concat: {
// dist: {}
// },
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= config.app %>',
dest: '<%= config.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'images/{,*/}*.webp',
'{,*/}*.html',
'styles/fonts/{,*/}*.*'
]
}]
},
styles: {
expand: true,
dot: true,
cwd: '<%= config.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
// Generates a custom Modernizr build that includes only the tests you
// reference in your app
modernizr: {
devFile: '<%= config.app %>/bower_components/modernizr/modernizr.js',
outputFile: '<%= config.dist %>/scripts/vendor/modernizr.js',
files: [
'<%= config.dist %>/scripts/{,*/}*.js',
'<%= config.dist %>/styles/{,*/}*.css',
'!<%= config.dist %>/scripts/vendor/*'
],
uglify: true
},
// Run some tasks in parallel to speed up build process
concurrent: {
server: [
'compass:server',
'copy:styles'
],
test: [
'copy:styles'
],
dist: [
'compass',
'copy:styles',
'imagemin',
'svgmin'
]
}
});
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'concurrent:server',
'autoprefixer',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('server', function (target) {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run([target ? ('serve:' + target) : 'serve']);
});
grunt.registerTask('test', function (target) {
if (target !== 'watch') {
grunt.task.run([
'clean:server',
'concurrent:test',
'autoprefixer'
]);
}
grunt.task.run([
'connect:test',
'mocha'
]);
});
grunt.registerTask('build', [
'clean:dist',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'cssmin',
'uglify',
'copy:dist',
'modernizr',
'rev',
'usemin',
'htmlmin'
]);
grunt.registerTask('default', [
'newer:jshint',
'test',
'build'
]);
};
================================================
FILE: README.md
================================================
100day-canvas-bootcamp-training
===============================
### PROJECT URL: [http://codepen.io/kenjiSpecial/](http://codepen.io/kenjiSpecial/)
This is my project for create one canvas animation work until I finish 100 work.
All codes for js which are for animation works are at app/script.
Hopefuly I want to create a small work every day, but sometime it takes a few day to make it.
## Demos and Codes.
### common file:
html : [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)
### Day 1 - Day 10
- 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)
- 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)
- 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)
- 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)
- 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)
- 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)
- 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)
- 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)
- 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)
- 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)
### Day 11 - Day 20
- Day11. [animation](http://codepen.io/kenjiSpecial/pen/xEIwr) | [js code](http://codepen.io/kenjiSpecial/pen/xEIwr)
- 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)
- 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)
- 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)
- 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)
- 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)
- 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)
- 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)
- 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)
- 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)
### Day 21 - Day 30
- 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)
- 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)
- 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)
- 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)
- 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)
- Day26. [undefined](http://codepen.io/kenjiSpecial/pen/ysChe)
- 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)
- Day28. [undefined](http://codepen.io/kenjiSpecial/pen/yLFwi)
- 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)
- Day30. [boid animation](http://codepen.io/kenjiSpecial/pen/efgzI) | js code
### Day 31 - Day 40
- 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)
- 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)
- 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)
- Day34. [undefined](http://codepen.io/kenjiSpecial/pen/qBbEv)
- Day35. [undefined](http://codepen.io/kenjiSpecial/pen/ulBCG)
- Day35. [undefined](http://codepen.io/kenjiSpecial/pen/bzGkJ)
- Day36. [undefined](http://codepen.io/kenjiSpecial/pen/vrfuJ)
- Day37. [undefined](http://codepen.io/kenjiSpecial/pen/qimgz)
- Day38. [Loop](http://codepen.io/kenjiSpecial/pen/vIHFG)
- Day39. [Loop](http://codepen.io/kenjiSpecial/pen/FlcaB)
- Day40. [Loop](http://codepen.io/kenjiSpecial/pen/enrbq)
### Day 41 - Day 50
- Day41. [Loop](http://codepen.io/kenjiSpecial/pen/agGIs)
- Day42. [Loop](http://codepen.io/kenjiSpecial/pen/AwJjt)
- Day43. [Loop](http://codepen.io/kenjiSpecial/pen/saAjL)
- Day44. [Clock with gray scott model.](http://codepen.io/kenjiSpecial/pen/AExmF)
- Day45. [Loop](http://codepen.io/kenjiSpecial/pen/DpCjF)
- Day46. [undefined](http://codepen.io/kenjiSpecial/pen/FpvCj)
- Day47. [Clock with shader](http://codepen.io/kenjiSpecial/pen/IFCzK)
- Day48. [undefined](http://codepen.io/kenjiSpecial/pen/pwIdm)
- Day49. [Typography Animation.](http://codepen.io/kenjiSpecial/pen/JqGdE)
- Day50. [awwwards logo animation.](http://codepen.io/kenjiSpecial/pen/GsLwn)
### Day 51 - Day 60
- Day51. [Color](http://codepen.io/kenjiSpecial/pen/azOXEa)
- Day52. [Image Slider](http://codepen.io/kenjiSpecial/pen/EaVxdx)
- Day53. [Image Gallery.](http://codepen.io/kenjiSpecial/pen/YPyyVq)
- Day54. [WebGL Particle Animation.](http://codepen.io/kenjiSpecial/pen/vELOrM)
- Day55. [WebGL Particle Animation#2.](http://codepen.io/kenjiSpecial/pen/yyeaKm)
- Day56. [WebGL Particle Animation#3.](http://codepen.io/kenjiSpecial/pen/zxrRZz)
- Day57. [Hello with three.js.](http://codepen.io/kenjiSpecial/pen/jEWorO)
- Day58. [Particle Clock.](http://codepen.io/kenjiSpecial/pen/gbrvpK)
- Day59. [WebGL Particle Animation#4.](http://codepen.io/kenjiSpecial/pen/EaKLyB)
- Day60. [WebGL Animation.](http://codepen.io/kenjiSpecial/pen/WbwJZy)
### Day 60 - Day 70
- Day61. [Particle Animation](http://codepen.io/kenjiSpecial/pen/ogzdxO)
- Day62. [Shader experience](http://codepen.io/kenjiSpecial/pen/ByWxGy)
- Day63. [Shader experience](http://codepen.io/kenjiSpecial/pen/YPyyVq)
#### Referrence
- [http://the12principles.tumblr.com/](http://the12principles.tumblr.com/)
- [http://fyprocessing.tumblr.com/](http://fyprocessing.tumblr.com/)
- [http://centolodigiani.tumblr.com/](http://centolodigiani.tumblr.com/)
- [http://beesandbombs.tumblr.com/](http://beesandbombs.tumblr.com/)
- [https://github.com/edankwan/PerspectiveTransform.js](https://github.com/edankwan/PerspectiveTransform.js)
##### WEBGL
- [https://github.com/tombye/3d-testground](https://github.com/tombye/3d-testground)
- [https://github.com/mrdoob/webgl-blendfunctions](https://github.com/mrdoob/webgl-blendfunctions)
- [https://github.com/KhronosGroup/WebGL](https://github.com/KhronosGroup/WebGL)
- [https://github.com/greggman/webgl-fundamentals](https://github.com/greggman/webgl-fundamentals)
- [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/)
================================================
FILE: app/.htaccess
================================================
# Apache Server Configs v2.2.0 | MIT License
# https://github.com/h5bp/server-configs-apache
# (!) Using `.htaccess` files slows down Apache, therefore, if you have access
# to the main server config file (usually called `httpd.conf`), you should add
# this logic there: http://httpd.apache.org/docs/current/howto/htaccess.html.
# ##############################################################################
# # CROSS-ORIGIN RESOURCE SHARING (CORS) #
# ##############################################################################
# ------------------------------------------------------------------------------
# | Cross-domain AJAX requests |
# ------------------------------------------------------------------------------
# Allow cross-origin AJAX requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/
# <IfModule mod_headers.c>
# Header set Access-Control-Allow-Origin "*"
# </IfModule>
# ------------------------------------------------------------------------------
# | CORS-enabled images |
# ------------------------------------------------------------------------------
# Send the CORS header for images when browsers request it.
# https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
# http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
<FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS
</FilesMatch>
</IfModule>
</IfModule>
# ------------------------------------------------------------------------------
# | Web fonts access |
# ------------------------------------------------------------------------------
# Allow access to web fonts from all domains.
<IfModule mod_headers.c>
<FilesMatch "\.(eot|otf|tt[cf]|woff)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
# ##############################################################################
# # ERRORS #
# ##############################################################################
# ------------------------------------------------------------------------------
# | 404 error prevention for non-existing redirected folders |
# ------------------------------------------------------------------------------
# Prevent Apache from returning a 404 error as the result of a rewrite
# when the directory with the same name does not exist.
# http://httpd.apache.org/docs/current/content-negotiation.html#multiviews
# http://www.webmasterworld.com/apache/3808792.htm
Options -MultiViews
# ------------------------------------------------------------------------------
# | Custom error messages / pages |
# ------------------------------------------------------------------------------
# Customize what Apache returns to the client in case of an error.
# http://httpd.apache.org/docs/current/mod/core.html#errordocument
ErrorDocument 404 /404.html
# ##############################################################################
# # INTERNET EXPLORER #
# ##############################################################################
# ------------------------------------------------------------------------------
# | Better website experience |
# ------------------------------------------------------------------------------
# Force Internet Explorer to render pages in the highest available mode
# in the various cases when it may not.
# http://hsivonen.iki.fi/doctype/ie-mode.pdf
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=edge"
# `mod_headers` cannot match based on the content-type, however, this
# header should be send only for HTML pages and not for the other resources
<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)$">
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>
# ------------------------------------------------------------------------------
# | Cookie setting from iframes |
# ------------------------------------------------------------------------------
# Allow cookies to be set from iframes in Internet Explorer.
# http://msdn.microsoft.com/en-us/library/ms537343.aspx
# http://www.w3.org/TR/2000/CR-P3P-20001215/
# <IfModule mod_headers.c>
# Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
# </IfModule>
# ##############################################################################
# # MIME TYPES AND ENCODING #
# ##############################################################################
# ------------------------------------------------------------------------------
# | Proper MIME types for all files |
# ------------------------------------------------------------------------------
<IfModule mod_mime.c>
# Audio
AddType audio/mp4 m4a f4a f4b
AddType audio/ogg oga ogg opus
# Data interchange
AddType application/json json map
AddType application/ld+json jsonld
# JavaScript
# Normalize to standard type.
# http://tools.ietf.org/html/rfc4329#section-7.2
AddType application/javascript js
# Video
AddType video/mp4 f4v f4p m4v mp4
AddType video/ogg ogv
AddType video/webm webm
AddType video/x-flv flv
# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot
# Browsers usually ignore the font MIME types and simply sniff the bytes
# to figure out the font type.
# http://mimesniff.spec.whatwg.org/#matching-a-font-type-pattern
# Chrome however, shows a warning if any other MIME types are used for
# the following fonts.
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf
# Make SVGZ fonts work on the iPad.
# https://twitter.com/FontSquirrel/status/14855840545
AddType image/svg+xml svgz
AddEncoding gzip svgz
# Other
AddType application/octet-stream safariextz
AddType application/x-chrome-extension crx
AddType application/x-opera-extension oex
AddType application/x-web-app-manifest+json webapp
AddType application/x-xpinstall xpi
AddType application/xml atom rdf rss xml
AddType image/webp webp
AddType image/x-icon cur
AddType text/cache-manifest appcache manifest
AddType text/vtt vtt
AddType text/x-component htc
AddType text/x-vcard vcf
</IfModule>
# ------------------------------------------------------------------------------
# | UTF-8 encoding |
# ------------------------------------------------------------------------------
# Use UTF-8 encoding for anything served as `text/html` or `text/plain`.
AddDefaultCharset utf-8
# Force UTF-8 for certain file formats.
<IfModule mod_mime.c>
AddCharset utf-8 .atom .css .js .json .jsonld .rss .vtt .webapp .xml
</IfModule>
# ##############################################################################
# # URL REWRITES #
# ##############################################################################
# ------------------------------------------------------------------------------
# | Rewrite engine |
# ------------------------------------------------------------------------------
# Turn on the rewrite engine and enable the `FollowSymLinks` option (this is
# necessary in order for the following directives to work).
# If your web host doesn't allow the `FollowSymlinks` option, you may need to
# comment it out and use `Options +SymLinksIfOwnerMatch`, but be aware of the
# performance impact.
# http://httpd.apache.org/docs/current/misc/perf-tuning.html#symlinks
# Also, some cloud hosting services require `RewriteBase` to be set.
# http://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-mod-rewrite-not-working-on-my-site
<IfModule mod_rewrite.c>
Options +FollowSymlinks
# Options +SymLinksIfOwnerMatch
RewriteEngine On
# RewriteBase /
</IfModule>
# ------------------------------------------------------------------------------
# | Suppressing / Forcing the `www.` at the beginning of URLs |
# ------------------------------------------------------------------------------
# The same content should never be available under two different URLs,
# especially not with and without `www.` at the beginning. This can cause
# SEO problems (duplicate content), and therefore, you should choose one
# of the alternatives and redirect the other one.
# By default `Option 1` (no `www.`) is activated.
# http://no-www.org/faq.php?q=class_b
# If you would prefer to use `Option 2`, just comment out all the lines
# from `Option 1` and uncomment the ones from `Option 2`.
# IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME!
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# Option 1: rewrite www.example.com → example.com
<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# Option 2: rewrite example.com → www.example.com
# Be aware that the following might not be a good idea if you use "real"
# subdomains for certain parts of your website.
# <IfModule mod_rewrite.c>
# RewriteCond %{HTTPS} !=on
# RewriteCond %{HTTP_HOST} !^www\. [NC]
# RewriteCond %{SERVER_ADDR} !=127.0.0.1
# RewriteCond %{SERVER_ADDR} !=::1
# RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# </IfModule>
# ##############################################################################
# # SECURITY #
# ##############################################################################
# ------------------------------------------------------------------------------
# | Clickjacking |
# ------------------------------------------------------------------------------
# Protect website against clickjacking.
# The example below sends the `X-Frame-Options` response header with the value
# `DENY`, informing browsers not to display the web page content in any frame.
# This might not be the best setting for everyone. You should read about the
# other two possible values for `X-Frame-Options`: `SAMEORIGIN` & `ALLOW-FROM`.
# http://tools.ietf.org/html/rfc7034#section-2.1
# Keep in mind that while you could send the `X-Frame-Options` header for all
# of your site’s pages, this has the potential downside that it forbids even
# non-malicious framing of your content (e.g.: when users visit your site using
# a Google Image Search results page).
# Nonetheless, you should ensure that you send the `X-Frame-Options` header for
# all pages that allow a user to make a state changing operation (e.g: pages
# that contain one-click purchase links, checkout or bank-transfer confirmation
# pages, pages that make permanent configuration changes, etc.).
# Sending the `X-Frame-Options` header can also protect your website against
# more than just clickjacking attacks: https://cure53.de/xfo-clickjacking.pdf.
# http://tools.ietf.org/html/rfc7034
# http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx
# https://www.owasp.org/index.php/Clickjacking
# <IfModule mod_headers.c>
# Header set X-Frame-Options "DENY"
# <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)$">
# Header unset X-Frame-Options
# </FilesMatch>
# </IfModule>
# ------------------------------------------------------------------------------
# | Content Security Policy (CSP) |
# ------------------------------------------------------------------------------
# Mitigate the risk of cross-site scripting and other content-injection attacks.
# This can be done by setting a `Content Security Policy` which whitelists
# trusted sources of content for your website.
# The example header below allows ONLY scripts that are loaded from the current
# site's origin (no inline scripts, no CDN, etc). This almost certainly won't
# work as-is for your site!
# For more details on how to craft a reasonable policy for your site, read:
# http://html5rocks.com/en/tutorials/security/content-security-policy (or the
# specification: http://w3.org/TR/CSP). Also, to make things easier, you can
# use an online CSP header generator such as: http://cspisawesome.com/.
# <IfModule mod_headers.c>
# Header set Content-Security-Policy "script-src 'self'; object-src 'self'"
# <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)$">
# Header unset Content-Security-Policy
# </FilesMatch>
# </IfModule>
# ------------------------------------------------------------------------------
# | File access |
# ------------------------------------------------------------------------------
# Block access to directories without a default document.
# You should leave the following uncommented, as you shouldn't allow anyone to
# surf through every directory on your server (which may includes rather private
# places such as the CMS's directories).
<IfModule mod_autoindex.c>
Options -Indexes
</IfModule>
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# Block access to hidden files and directories.
# This includes directories used by version control systems such as Git and SVN.
<IfModule mod_rewrite.c>
RewriteCond %{SCRIPT_FILENAME} -d [OR]
RewriteCond %{SCRIPT_FILENAME} -f
RewriteRule "(^|/)\." - [F]
</IfModule>
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# Block access to files that can expose sensitive information.
# By default, block access to backup and source files that may be left by some
# text editors and can pose a security risk when anyone has access to them.
# http://feross.org/cmsploit/
# IMPORTANT: Update the `<FilesMatch>` regular expression from below to include
# any files that might end up on your production server and can expose sensitive
# information about your website. These files may include: configuration files,
# files that contain metadata about the project (e.g.: project dependencies),
# build scripts, etc..
<FilesMatch "(^#.*#|\.(bak|config|dist|fla|in[ci]|log|psd|sh|sql|sw[op])|~)$">
# Apache < 2.3
<IfModule !mod_authz_core.c>
Order allow,deny
Deny from all
Satisfy All
</IfModule>
# Apache ≥ 2.3
<IfModule mod_authz_core.c>
Require all denied
</IfModule>
</FilesMatch>
# ------------------------------------------------------------------------------
# | Reducing MIME-type security risks |
# ------------------------------------------------------------------------------
# Prevent some browsers from MIME-sniffing the response.
# This reduces exposure to drive-by download attacks and should be enable
# especially if the web server is serving user uploaded content, content
# that could potentially be treated by the browser as executable.
# http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-v-comprehensive-protection.aspx
# http://msdn.microsoft.com/en-us/library/ie/gg622941.aspx
# http://mimesniff.spec.whatwg.org/
# <IfModule mod_headers.c>
# Header set X-Content-Type-Options "nosniff"
# </IfModule>
# ------------------------------------------------------------------------------
# | Reflected Cross-Site Scripting (XSS) attacks |
# ------------------------------------------------------------------------------
# (1) Try to re-enable the Cross-Site Scripting (XSS) filter built into the
# most recent web browsers.
#
# The filter is usually enabled by default, but in some cases it may be
# disabled by the user. However, in Internet Explorer for example, it can
# be re-enabled just by sending the `X-XSS-Protection` header with the
# value of `1`.
#
# (2) Prevent web browsers from rendering the web page if a potential reflected
# (a.k.a non-persistent) XSS attack is detected by the filter.
#
# By default, if the filter is enabled and browsers detect a reflected
# XSS attack, they will attempt to block the attack by making the smallest
# possible modifications to the returned web page.
#
# Unfortunately, in some browsers (e.g.: Internet Explorer), this default
# behavior may allow the XSS filter to be exploited, thereby, it's better
# to tell browsers to prevent the rendering of the page altogether, instead
# of attempting to modify it.
#
# http://hackademix.net/2009/11/21/ies-xss-filter-creates-xss-vulnerabilities
#
# IMPORTANT: Do not rely on the XSS filter to prevent XSS attacks! Ensure that
# you are taking all possible measures to prevent XSS attacks, the most obvious
# being: validating and sanitizing your site's inputs.
#
# http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-iv-the-xss-filter.aspx
# http://blogs.msdn.com/b/ieinternals/archive/2011/01/31/controlling-the-internet-explorer-xss-filter-with-the-x-xss-protection-http-header.aspx
# https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29
# <IfModule mod_headers.c>
# # (1) (2)
# Header set X-XSS-Protection "1; mode=block"
# <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)$">
# Header unset X-XSS-Protection
# </FilesMatch>
# </IfModule>
# ------------------------------------------------------------------------------
# | Secure Sockets Layer (SSL) |
# ------------------------------------------------------------------------------
# Rewrite secure requests properly in order to prevent SSL certificate warnings.
# E.g.: prevent `https://www.example.com` when your certificate only allows
# `https://secure.example.com`.
# <IfModule mod_rewrite.c>
# RewriteCond %{SERVER_PORT} !^443
# RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L]
# </IfModule>
# ------------------------------------------------------------------------------
# | HTTP Strict Transport Security (HSTS) |
# ------------------------------------------------------------------------------
# Force client-side SSL redirection.
# If a user types `example.com` in his browser, the above rule will redirect
# him to the secure version of the site. That still leaves a window of
# opportunity (the initial HTTP connection) for an attacker to downgrade or
# redirect the request.
# The following header ensures that browser will ONLY connect to your server
# via HTTPS, regardless of what the users type in the address bar.
# http://tools.ietf.org/html/draft-ietf-websec-strict-transport-sec-14#section-6.1
# http://www.html5rocks.com/en/tutorials/security/transport-layer-security/
# IMPORTANT: Remove the `includeSubDomains` optional directive if the subdomains
# are not using HTTPS.
# <IfModule mod_headers.c>
# Header set Strict-Transport-Security "max-age=16070400; includeSubDomains"
# </IfModule>
# ------------------------------------------------------------------------------
# | Server software information |
# ------------------------------------------------------------------------------
# Avoid displaying the exact Apache version number, the description of the
# generic OS-type and the information about Apache's compiled-in modules.
# ADD THIS DIRECTIVE IN THE `httpd.conf` AS IT WILL NOT WORK IN THE `.htaccess`!
# ServerTokens Prod
# ##############################################################################
# # WEB PERFORMANCE #
# ##############################################################################
# ------------------------------------------------------------------------------
# | Compression |
# ------------------------------------------------------------------------------
<IfModule mod_deflate.c>
# Force compression for mangled headers.
# http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
# Compress all output labeled with one of the following MIME-types
# (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
# and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
# as `AddOutputFilterByType` is still in the core directives).
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/ld+json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/x-web-app-manifest+json \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>
</IfModule>
# ------------------------------------------------------------------------------
# | Content transformations |
# ------------------------------------------------------------------------------
# Prevent mobile network providers from modifying the website's content.
# http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9.5.
# <IfModule mod_headers.c>
# Header set Cache-Control "no-transform"
# </IfModule>
# ------------------------------------------------------------------------------
# | ETags |
# ------------------------------------------------------------------------------
# Remove `ETags` as resources are sent with far-future expires headers.
# http://developer.yahoo.com/performance/rules.html#etags.
# `FileETag None` doesn't work in all cases.
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag None
# ------------------------------------------------------------------------------
# | Expires headers |
# ------------------------------------------------------------------------------
# The following expires headers are set pretty far in the future. If you
# don't control versioning with filename-based cache busting, consider
# lowering the cache time for resources such as style sheets and JavaScript
# files to something like one week.
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 year"
# Data interchange
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/ld+json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
# Favicon (cannot be renamed!) and cursor images
ExpiresByType image/x-icon "access plus 1 week"
# HTML components (HTCs)
ExpiresByType text/x-component "access plus 1 month"
# HTML
ExpiresByType text/html "access plus 0 seconds"
# JavaScript
ExpiresByType application/javascript "access plus 1 year"
# Manifest files
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Media
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# Web feeds
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
# Web fonts
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
</IfModule>
# ------------------------------------------------------------------------------
# | Filename-based cache busting |
# ------------------------------------------------------------------------------
# If you're not using a build process to manage your filename version revving,
# you might want to consider enabling the following directives to route all
# requests such as `/css/style.12345.css` to `/css/style.css`.
# To understand why this is important and a better idea than `*.css?v231`, read:
# http://stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring
# <IfModule mod_rewrite.c>
# RewriteCond %{REQUEST_FILENAME} !-f
# RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpe?g|gif)$ $1.$3 [L]
# </IfModule>
# ------------------------------------------------------------------------------
# | File concatenation |
# ------------------------------------------------------------------------------
# Allow concatenation from within specific style sheets and JavaScript files.
# e.g.:
#
# If you have the following content in a file
#
# <!--#include file="libs/jquery.js" -->
# <!--#include file="plugins/jquery.timer.js" -->
#
# Apache will replace it with the content from the specified files.
# <IfModule mod_include.c>
# <FilesMatch "\.combined\.js$">
# Options +Includes
# AddOutputFilterByType INCLUDES application/javascript application/json
# SetOutputFilter INCLUDES
# </FilesMatch>
# <FilesMatch "\.combined\.css$">
# Options +Includes
# AddOutputFilterByType INCLUDES text/css
# SetOutputFilter INCLUDES
# </FilesMatch>
# </IfModule>
================================================
FILE: app/404.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Not Found :(</title>
<style>
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
html {
padding: 30px 10px;
font-size: 20px;
line-height: 1.4;
color: #737373;
background: #f0f0f0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html,
input {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
max-width: 500px;
_width: 500px;
padding: 30px 20px 50px;
border: 1px solid #b3b3b3;
border-radius: 4px;
margin: 0 auto;
box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;
background: #fcfcfc;
}
h1 {
margin: 0 10px;
font-size: 50px;
text-align: center;
}
h1 span {
color: #bbb;
}
h3 {
margin: 1.5em 0 0.5em;
}
p {
margin: 1em 0;
}
ul {
padding: 0 0 0 40px;
margin: 1em 0;
}
.container {
max-width: 380px;
_width: 380px;
margin: 0 auto;
}
/* google search */
#goog-fixurl ul {
list-style: none;
padding: 0;
margin: 0;
}
#goog-fixurl form {
margin: 0;
}
#goog-wm-qt,
#goog-wm-sb {
border: 1px solid #bbb;
font-size: 16px;
line-height: normal;
vertical-align: top;
color: #444;
border-radius: 2px;
}
#goog-wm-qt {
width: 220px;
height: 20px;
padding: 5px;
margin: 5px 10px 0 0;
box-shadow: inset 0 1px 1px #ccc;
}
#goog-wm-sb {
display: inline-block;
height: 32px;
padding: 0 10px;
margin: 5px 0 0;
white-space: nowrap;
cursor: pointer;
background-color: #f5f5f5;
background-image: -webkit-linear-gradient(rgba(255,255,255,0), #f1f1f1);
background-image: -moz-linear-gradient(rgba(255,255,255,0), #f1f1f1);
background-image: -ms-linear-gradient(rgba(255,255,255,0), #f1f1f1);
background-image: -o-linear-gradient(rgba(255,255,255,0), #f1f1f1);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
*overflow: visible;
*display: inline;
*zoom: 1;
}
#goog-wm-sb:hover,
#goog-wm-sb:focus {
border-color: #aaa;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #f8f8f8;
}
#goog-wm-qt:hover,
#goog-wm-qt:focus {
border-color: #105cb6;
outline: 0;
color: #222;
}
input::-moz-focus-inner {
padding: 0;
border: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Not found <span>:(</span></h1>
<p>Sorry, but the page you were trying to view does not exist.</p>
<p>It looks like this was the result of either:</p>
<ul>
<li>a mistyped address</li>
<li>an out-of-date link</li>
</ul>
<script>
var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),GOOG_FIXURL_SITE = location.host;
</script>
<script src="//linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
</div>
</body>
</html>
================================================
FILE: app/gl-html/gl00.html
================================================
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles/main.css">
<title></title>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
void main(void) {
gl_FragColor = vec4(0.4, 0.6, 0.75, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 vertexPosition;
uniform mat4 modelViewMatrix;
uniform mat4 perspectiveMatrix;
void main(void) {
gl_Position = perspectiveMatrix * modelViewMatrix * vec4( vertexPosition, 1.0);
}
</script>
</head>
<canvas id="c"></canvas>
<body>
<script src="../scripts/4-webgl/55-gl.js"></script>
</body>
</html>
================================================
FILE: app/gl-html/gl01.html
================================================
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles/main.css">
<title></title>
<script src="../bower_components/dat-gui/build/dat.gui.js"></script>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
void main(void) {
gl_FragColor = vec4(0.4, 0.6, 0.75, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 vertexPosition;
uniform mat4 modelViewMatrix;
uniform mat4 perspectiveMatrix;
void main(void) {
gl_Position = perspectiveMatrix * modelViewMatrix * vec4( vertexPosition, 1.0);
}
</script>
</head>
<canvas id="c"></canvas>
<body>
<script src="../scripts/4-webgl/56-gl.js"></script>
</body>
</html>
================================================
FILE: app/gl-html/gl57.html
================================================
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
//attribute vec2 a_position;
varying vec4 vColor;
void main(void) {
gl_FragColor = vec4(vColor);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
//attribute vec3 vertexPosition;
attribute vec2 a_position;
attribute vec4 a_color;
varying vec4 vColor;
uniform vec2 u_resolution;
void main(void) {
vColor = a_color;
vec2 curPosition = a_position + u_resolution/2.0;
vec2 zeroToOne = curPosition / u_resolution;
vec2 zeroToTwo = zeroToOne * 2.0;
vec2 clipSpace = zeroToTwo - 1.0;
gl_Position = vec4(clipSpace, 0, 1);
}
</script>
</head>
<body>
<canvas id="c"></canvas>
<script src="../scripts/4-webgl/57-gl.js"></script>
</body>
</html>
================================================
FILE: app/gl-html/three58.html
================================================
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>== three58 ==</title>
<link rel="stylesheet" href="../styles/main.css">
<script src="../bower_components/underscore/underscore.js"></script>
<script src="../bower_components/backbone/backbone.js"></script>
</head>
<body>
<canvas id="c"></canvas>
<script src="../scripts/helpers/keyEvents.js"></script>
<script src="../bower_components/threejs/build/three.min.js"></script>
<script src="../scripts/4-webgl/58-three-js.js"></script>
</body>
</html>
================================================
FILE: app/gl-html/three64.html
================================================
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Three.js</title>
<style>
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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}
</style>
</head>
<body>
<script src="../bower_components/threejs/build/three.min.js"></script>
<script src="../scripts/4-webgl/64-three-js.js"></script>
</body>
</html>
================================================
FILE: app/gl-index.html
================================================
<html>
<head>
<title>WebGL TEST</title>
<script src="scripts/7-gl/vendors/minMatrix.js" type="text/javascript"></script>
<script id="vs" type="x-shader/x-vertex">
attribute vec3 position;
uniform mat4 mvpMatrix;
void main(void){
gl_Position = mvpMatrix * vec4(position, 1.0);
}
</script>
<script id="fs" type="x-shader/x-fragment">
void main(void){
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script src="scripts/7-gl/99-00-gl-learning.js" type="text/javascript"></script>
</html>
================================================
FILE: app/index.html
================================================
<!doctype html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>201405</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<!--
<div id="container">
<input id="button" type="checkbox">
<label id="play" for="button" class="glyphicon glyphicon-volume-up"></label>
<label id="stop" for="button" class="glyphicon glyphicon-volume-off"></label>
</div>
-->
<canvas id="c"></canvas>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/TweenJS/lib/tweenjs-0.5.1.combined.js"></script>
<script src="bower_components/greensock/src/uncompressed/TweenMax.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/howler.js/howler.js"></script>
<script src="bower_components/threejs/build/three.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/dat-gui/build/dat.gui.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--<script>-->
<!--(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=-->
<!--function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;-->
<!--e=o.createElement(i);r=o.getElementsByTagName(i)[0];-->
<!--e.src='//www.google-analytics.com/analytics.js';-->
<!--r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));-->
<!--ga('create','UA-XXXXX-X');ga('send','pageview');-->
<!--</script>-->
<!-- build:js({app,.tmp}) scripts/main.js -->
<!--<script src="scripts/4-webgl/43-three-js-example.js"></script>-->
<!--<script src="scripts/4-webgl/2-test-three-js-example.js"></script>-->
<!--<script src="scripts/6-letters/53-letters.js"></script>-->
<!--<script src="scripts/helpers/svg-parse.js"></script>-->
<!--<script src="scripts/6-letters/54-letter.js"></script>-->
<!--<script src="scripts/99-hobby/99-03-circle-drawing.js"></script>-->
<script src="scripts/helpers/colorConverter.js"></script>
<script src="scripts/99-hobby/99-05-color-draw.js"></script>
<!-- endbuild -->
</body>
</html>
================================================
FILE: app/json/awwwrd.js
================================================
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] ] ;
var 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] ];
var 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] ];
var 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] ] ;
var 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] ] ;
var 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] ];
var 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] ];
var 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] ];
var 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] ];
var 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] ];
var 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] ];
================================================
FILE: app/robots.txt
================================================
# robotstxt.org/
User-agent: *
================================================
FILE: app/scripts/0-components/boilerplate.js
================================================
// --------------------------
var width, height, prevTime;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
// ================
// ================
init();
loop();
function init(){
prevTime = +new Date;
}
function loop(){
var curTime = +new Date;
var duration = (curTime - prevTime)/1000;
prevTime = curTime;
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
requestAnimationFrame(loop);
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
================================================
FILE: app/scripts/0-components/output.js
================================================
================================================
FILE: app/scripts/0-components/path.js
================================================
// =============
function forEach(array, fn){
for(var i = 0; i< array.length; i++){
fn(array[i]);
}
}
// =============
var fs = require('fs');
var thClonedArr = [];
var 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";
var thArr = th.split(/[A-Z]/);
forEach(thArr, function(val){
thClonedArr.push(val);
});
// console.log(thClonedArr);
//
var outputArr = [];
outputArr.push([]);
forEach(thClonedArr, function(val){
if(val.search(/[a-y]/) > 0){
var count = 0;
var textArr = val.split(/[a-y]/);
var firstVal;
forEach(textArr, function(val){
val = val.replace(/-/g, ',-');
if(count === 0){
outputArr[outputArr.length - 1].push(val);
var ptArr = val.split(/,/);
firstArr = ptArr;
}else{
var ptArr = val.split(/,/);
var hosei = ptArr.length % 2;
var ptTemArr = [];
for(var ii = hosei; ii < ptArr.length; ii+= 2){
var ptX = parseFloat(ptArr[ii + 0]) + parseFloat(firstArr[0]);
var ptY = parseFloat(ptArr[ii + 1]) + parseFloat(firstArr[1]);
ptTemArr.push(ptX);
ptTemArr.push(ptY);
}
firstArr = [ptArr[ptArr.length - 2], ptArr[ptArr.length - 1]];
var pointText = "";
var pointCnt = 0;
forEach( ptTemArr, function(val){
if(pointCnt == 0){
pointText += String(val);
}else{
pointText += ',' + String(val);
}
pointCnt++;
});
outputArr[outputArr.length - 1].push(pointText);
}
count++;
});
}else{
if(val.search(/z/) > 0){
var text = val.split(/z/);
outputArr[outputArr.length - 1].push(text[0]);
outputArr.push([]);
}else{
//console.log(val);
if(val.length > 0){
outputArr[outputArr.length - 1].push(val);
}
}
}
});
console.log(outputArr);
var '[['
for(var ii = 0; ii < outputArr.length; ii++){
var pathArr = outputArr[ii];
if(pathArr.length > 0){
for(var j = 0; j
}
}
fs.open('./data.js', 'w', function(err, fd) {
if(err) throw err;
var buf = new Buffer(thArr);
fs.write(fd, buf, 0, buf.length, null, function(err, written, buffer) {
if(err) throw err;
console.log(err, written, buffer);
fs.close(fd, function() {
console.log('Done');
});
});
});
================================================
FILE: app/scripts/1-illusion-of-life/1-squash.js
================================================
function backingScale(context) {
if ('devicePixelRatio' in window) {
if (window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
}
return 1;
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var Rect = function( ctx, x, y, wid, hig ){
this.ctx = ctx;
this.x = x - wid/2;
this.y = y;
this.wid = wid;
this.hig = hig;
this.vel = 100;
};
Rect.prototype = {
update : function(dt){
this.y += this.vel * dt;
},
draw : function(){
this.ctx.beginPath();
this.ctx.fillStyle = '#fff';
this.ctx.fillRect(this.x, this.y, this.wid, this.hig);
this.ctx.closePath();
}
};
// ---------------
var Rect1 = function(ctx, x, y, wid, hig){
Rect.call(this, ctx, x, y, wid, hig);
this.vel = 20;
this.acl = 100;
};
Rect1.prototype = Object.create(Rect.prototype);
Rect1.prototype = {
update : function(dt){
this.vel += this.acl * dt;
Rect.prototype.update.call(this, dt);
},
draw : function(){
Rect.prototype.draw.call(this);
}
};
// ---------------
var Rect2 = function(ctx, x, y, wid, hig){
Rect.call(this, ctx, x, y, wid, hig);
};
Rect2.prototype = Object.create(Rect.prototype);
var width, height, previousTime;
var rect, rect1;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var scaleFactor = backingScale(ctx);
width = window.innerWidth * scaleFactor;
height = window.innerHeight * scaleFactor;
canvas.width = width;
canvas.height = height;
init();
loop();
function init(){
previousTime = +new Date;
rect = new Rect( ctx, width/2 - 200, 0, 100, 100);
rect1 = new Rect1( ctx, width/2 - 50, 0, 100, 100);
}
function loop(){
var curTime = +new Date;
var dt = (curTime - previousTime) / 1000;
this.ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
rect.update(dt);
rect.draw();
rect1.update(dt);
rect1.draw();
previousTime = curTime;
requestAnimationFrame(loop);
}
================================================
FILE: app/scripts/1-illusion-of-life/10-animation.js
================================================
function backingScale(context) {
if ('devicePixelRatio' in window) {
if (window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
}
return 1;
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var width, height, previousTime;
var side1, side2;
var side1Wid, side1Hig;
var rect;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var scaleFactor = backingScale(ctx);
width = window.innerWidth * scaleFactor;
height = window.innerHeight * scaleFactor;
side1 = 100;
side2 = 180;
var sideHig = 10 * scaleFactor;
var duration1 = .8;
var duration2 = .6;
canvas.width = width;
canvas.height = height;
var Rect = function(ctx){
this.ctx = ctx;
this.col = '#fff';
this.width = this.baseWidth = 15 * scaleFactor;
this.penWidth = 14.5 * scaleFactor;
this.height = 100 * scaleFactor;
this.pt1 = {x : width / 2, y: height};
this.pt2 = {x : width / 2, y: height - this.height};
this.anchorPt = {x : width /2, y: (this.pt1.y + this.pt2.y) / 2};
this.anchorTheta1 = 0;
this.anchorTheta2 = 0;
};
Rect.prototype = {
div : -2,
val : 0,
update : function(){
this.anchorTheta1 += 0.1;
if(this.pt2.y <= 0){ this.div = 2;
}
if(this.pt2.y >= height - 100*scaleFactor){ this.div = -2;
}
this.pt2.y += this.div;
this.width = this.baseWidth + this.penWidth * Math.sin(this.anchorTheta1);
this.val -= this.div / 2;
this.pt2.x = width / 2 - 30 * scaleFactor * Math.cos(this.anchorTheta1);
this.anchorPt.x = width / 2 + (50 + this.val) * scaleFactor * Math.cos(this.anchorTheta1);
this.anchorPt.y = (this.pt1.y + this.pt2.y) / 2;
},
draw : function(){
this.ctx.fillStyle = this.col;
this.ctx.beginPath();
this.ctx.moveTo(this.pt1.x - this.width / 2, this.pt1.y);
this.ctx.quadraticCurveTo(this.anchorPt.x - this.width / 2, this.anchorPt.y, this.pt2.x - this.width / 2, this.pt2.y);
this.ctx.lineTo(this.pt2.x + this.width / 2, this.pt2.y);
this.ctx.quadraticCurveTo(this.anchorPt.x + this.width / 2, this.anchorPt.y, this.pt1.x + this.width / 2, this.pt1.y);
this.ctx.fill();
this.ctx.closePath();
},
debugDraw : function(){
this.ctx.strokeStyle = this.col;
this.ctx.beginPath();
this.ctx.moveTo(this.pt1.x, this.pt1.y);
this.ctx.quadraticCurveTo(this.anchorPt.x, this.anchorPt.y, this.pt2.x, this.pt2.y);
this.ctx.stroke();
this.ctx.closePath();
}
};
var rect;
init();
loop();
function init(){
rect = new Rect(ctx);
}
function loop(){
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
rect.update();
rect.draw();
requestAnimationFrame(loop);
}
================================================
FILE: app/scripts/1-illusion-of-life/11-animation-2.js
================================================
function backingScale(context) {
if ('devicePixelRatio' in window) {
if (window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
}
return 1;
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
// --------------------------
var Rect = function(ctx, x, y, i){
this.color = '#fff';
this.ctx = ctx;
this.side = 200;
this.x = this.originX = x - this.side/2;
this.y = this.originY = y - this.side/2;
if(i % 2 == 0) this.rad = 170;
else this.rad = 90;
};
Rect.prototype = {
sec : 0,
rad : 100 + 200 * Math.random(),
update : function(){
this.sec += .1;
this.x = this.originX + this.rad * Math.cos(this.sec);
if(this.x > width) this.x = -this.side;
this.ctx.strokeStyle = this.color;
this.ctx.strokeRect(this.x, this.y, this.side, this.side);
}
};
var Point = function(x1, y1, x2, y2){
this.status = 'triangle';
this.point = {
'circle' : {x : x1, y: y1},
'triangle' : {x : x2, y: y2}
};
};
Point.prototype = {
get : function(){
return this.point[this.status]
}
};
var Shape = function(ctx, x, y, rad){
this.ctx = ctx;
this.x = x;
this.y = y;
this.rad = rad;
this.pointArr = [];
this.num = 120;
var triangle = this.num / 3;
var circlePtArr = [
{x : this.rad * Math.cos(0), y: this.rad * Math.sin(0) },
{x : this.rad * Math.cos(2/3*Math.PI), y: this.rad * Math.sin(2/3*Math.PI) },
{x : this.rad * Math.cos(4/3*Math.PI), y: this.rad * Math.sin(4/3*Math.PI) }
];
for(var i = 0; i < this.num; i++){
// circle
var ptX = this.rad * Math.cos(i / this.num * Math.PI * 2);
var ptY = this.rad * Math.sin(i / this.num * Math.PI * 2);
// triangle
var triangleNum1 = parseInt(i / triangle);
var triangleNum2 = (triangleNum1 + 1) % 3;
var circleI = i % triangle;
var ptTriX = circlePtArr[triangleNum1].x * (1 - circleI / triangle) + circlePtArr[triangleNum2].x * (0 + circleI / triangle);
var ptTriY = circlePtArr[triangleNum1].y * (1 - circleI / triangle) + circlePtArr[triangleNum2].y * (0 + circleI / triangle);
var pt = new Point(ptX, ptY, ptTriX, ptTriY);
this.pointArr[i] = pt;
}
};
Shape.prototype = {
vel:8,
update : function(rectArr){
this.x += this.vel;
if(this.x > width + 100) this.x = - 100;
// update
// this.x - this.rad -- this.x + this.rad
for(var i = 0; i < this.num; i++){
this.pointArr[i].status = 'circle';
}
for(var j = 0; j < rectArr.length; j++){
var rect = rectArr[j];
for(var i = 0; i < this.num; i++){
var ptX = this.pointArr[i]['point']['circle'].x + this.x;
if(ptX > (rect.x) && ptX < (rect.x + rect.side) ) this.pointArr[i].status = 'triangle';
//else this.pointArr[i].status = 'circle';
}
}
// draw
this.ctx.save();
this.ctx.beginPath();
this.ctx.translate(this.x, this.y);
this.ctx.moveTo(this.pointArr[0].get().x, this.pointArr[0].get().y);
for(var i = 1; i < this.num; i++){
this.ctx.lineTo(this.pointArr[i].get().x, this.pointArr[i].get().y);
}
this.ctx.lineTo(this.pointArr[0].get().x, this.pointArr[0].get().y);
this.ctx.fillStyle = '#fff';
this.ctx.stroke();
this.ctx.closePath();
this.ctx.restore();
}
};
// --------------------------
var width, height, previousTime;
var side1, side2;
var side1Wid, side1Hig;
var rect, rectArr = [];
var shape, shapeArr = [];
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var scaleFactor = backingScale(ctx);
width = window.innerWidth;
height = window.innerHeight;
side1 = 100;
side2 = 180;
var sideHig = 10 * scaleFactor;
var duration1 = .8;
var duration2 = .6;
canvas.width = width;
canvas.height = height;
init();
loop();
function init(){
for(var i = 0; i < 3; i++){
rect = new Rect(ctx, width/2 + 300 * i - 300, height/2, i);
rectArr.push(rect);
}
for(var i = 0;i < 8; i++){
shape = new Shape(ctx, width/2, height/2, 8 + 12 * i);
shapeArr.push(shape);
}
}
function loop(){
//ctx.clearRect(0, 0, width, height);
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
for(var i in rectArr){
rect = rectArr[i];
rect.update();
}
//console.log('shape update');
for(var i in shapeArr){
shape = shapeArr[i];
shape.update(rectArr);
}
//console.log('shape update');
requestAnimationFrame(loop);
}
================================================
FILE: app/scripts/1-illusion-of-life/12-secondary-action.js
================================================
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
// --------------------------
var Pt = function(theta){
this.rad = side;
this.theta = theta;
};
Pt.prototype = {
setTheta : function(val){
this.futureTheta = val;
TweenLite.to(this,.5, { theta : val, ease: Power3.easeInOut});
}
}
Object.defineProperty(Pt.prototype, 'theta', {
get : function(){
return this._theta;
},
set : function(val){
this._theta = val;
this.x = this.rad * Math.cos(this._theta);
this.y = this.rad * Math.sin(this._theta);
}
});
var Shape = function(ctx, x, y){
_.bindAll(this, 'add');
this.x = x;
this.y = y;
this.ctx = ctx;
this.col = '#fff';
this.triArr = [];
this.shapeType = {
3 : [[0, 1, 2]],
4 : [[0, 1, 2], [3, 1, 2]]
};
for(var i = 0; i < this.triNum; i++){
var pt = new Pt( i / this.triNum * 2 * Math.PI );
this.triArr.push(pt);
}
setInterval(this.add, 600);
};
Shape.prototype = {
triNum : 2,
inc : 1,
theta : 0,
add : function(){
// clone pt
if(this.triArr.length > 12) this.inc = -1;
if(this.triArr.length < 3) this.inc = 1;
if(this.inc == 1){
var clonedPt = new Pt(this.triArr[this.triArr.length - 1].theta);
this.triArr.push(clonedPt);
for(var i in this.triArr){
this.triArr[i].setTheta(2 * Math.PI * i / this.triArr.length);
}
}else{
for(var i in this.triArr){
this.triArr[i].setTheta(2 * Math.PI * i / (this.triArr.length -1));
}
var self = this;
setTimeout(function(){
self.triArr.shift();
}, 400 );
}
var val = this.theta + 1/3 * Math.PI;
TweenLite.to(this,.3, { theta : val});
},
update : function(){
this.ctx.save();
this.ctx.translate(this.x, this.y);
this.ctx.rotate(this.theta);
this.ctx.strokeStyle = this.col;
for(var i in this.triArr){
var pt1 = this.triArr[i]
for(var j = i; j < this.triArr.length; j++){
var pt2 = this.triArr[j];
this.ctx.beginPath();
this.ctx.moveTo(pt1.x, pt1.y);
this.ctx.lineTo(pt2.x, pt2.y);
this.ctx.stroke();
this.ctx.closePath();
}
}
this.ctx.restore();
}
};
// --------------------------
var width, height, previousTime;
var side1, side2;
var shape;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var side;
width = window.innerWidth;
height = window.innerHeight;
side = Math.min(width, height) * .45;
canvas.width = width;
canvas.height = height;
init();
loop();
function init(){
shape = new Shape(ctx, width/2, height/2);
}
function loop(){
//ctx.clearRect(0, 0, width, height);
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
shape.update();
requestAnimationFrame(loop);
}
================================================
FILE: app/scripts/1-illusion-of-life/13-secondary-action.js
================================================
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
// --------------------------
var Pt = function(rad, theta){
this.rad = rad;
this.theta = theta;
};
Pt.prototype = {
setTheta : function(val){
this.futureTheta = val;
TweenLite.to(this,.5, { theta : val, ease: Elastic.easeInOut});
},
}
Object.defineProperty(Pt.prototype, 'theta', {
get : function(){
return this._theta;
},
set : function(val){
this._theta = val;
this.x = this.rad * Math.cos(this._theta);
this.y = this.rad * Math.sin(this._theta);
}
});
var Rect = function(ctx, x, y){
_.bindAll(this, 'rotationComplete');
this.x = this.originX = x;
this.y = y;
//console.log(this.x, this.y);
this.transX = 0;
this.side = 60;
this.halfSide = this.side / 2 * -1;
this.ctx = ctx;
this.col = '#fff';
this.rotate = 0;
this.thetaArr = [0, Math.PI, Math.PI * 5 / 4, Math.PI * 3 / 2];
this.ptArr =[
new Pt(0, 0),
new Pt(this.side, Math.PI),
new Pt(this.side * Math.sqrt(2), Math.PI * (5/4)),
new Pt(this.side, Math.PI * (3/2)),
];
this.rotation();
};
Rect.prototype = {
rotation : function(){
this.rotate = Math.PI/2;
for(var i = 0; i < this.ptArr.length; i++){
var pt = this.ptArr[i];
var theta = this.thetaArr[i];
TweenLite.to(pt, 1, { theta : (theta + this.rotate)});
}
TweenLite.to(this, 1, { x : (this.originX - 60), onComplete : this.rotationComplete});
},
rotationComplete : function(){
this.ptArr =[
new Pt(0, 0),
new Pt(this.side, Math.PI),
new Pt(this.side * Math.sqrt(2), Math.PI * (5/4)),
new Pt(this.side, Math.PI * (3/2)),
];
this.x = this.originX;
this.rotation();
},
update : function(){
this.ctx.save();
this.ctx.translate(this.x + this.side /2, this.y + this.side /2);
this.ctx.beginPath();
this.ctx.strokeStyle = this.col;
this.ctx.moveTo(this.ptArr[0].x, this.ptArr[0].y);
for(var i = 0; i < this.ptArr.length; i++ ){
var number = (i + 1) % this.ptArr.length;
this.ctx.lineTo(this.ptArr[number].x, this.ptArr[number].y);
}
this.ctx.stroke();
this.ctx.closePath();
this.ctx.restore();
}
};
var RectTop1 = function(ctx, x, y, rect){
_.bindAll(this, 'rotationComplete');
this.x = this.originX = x;
this.y = y;
this.side = 60;
this.baseRect = rect;
this.ctx = ctx;
this.col = '#fff';
this.rotate = 0;
this.thetaArr = [0, Math.PI * 3 / 2, Math.PI * 7 / 4, Math.PI * 2];
this.ptArr =[
new Pt(0, 0),
new Pt(this.side, Math.PI* (3/2)),
new Pt(this.side * Math.sqrt(2), Math.PI * (7/4)),
new Pt(this.side, Math.PI * 2),
];
this.rotation();
};
RectTop1.prototype = {
rotation : function(){
this.rotate = -Math.PI/2;
for(var i = 0; i < this.ptArr.length; i++){
var pt = this.ptArr[i];
var theta = this.thetaArr[i];
TweenLite.to(pt, 1, { theta : (theta + this.rotate)});
}
TweenLite.to(this, 1, { x : (this.originX ), onComplete : this.rotationComplete});
},
rotationComplete : function(){
this.ptArr =[
new Pt(0, 0),
new Pt(this.side, Math.PI* (3/2)),
new Pt(this.side * Math.sqrt(2), Math.PI * (7/4)),
new Pt(this.side, Math.PI * 2),
];
this.x = this.originX;
this.rotation();
},
update : function(){
this.ctx.save();
//this.ctx.translate(this.x + this.baseRect.ptArr[2].x - this.side/2, this.y + this.baseRect.ptArr[2].y + this.side/2);
this.x = this.baseRect.x + this.baseRect.ptArr[2].x + this.side / 2;
this.y = this.baseRect.y + this.baseRect.ptArr[2].y + this.side/2;
this.ctx.translate( this.x, this.y);
this.ctx.beginPath();
this.ctx.strokeStyle = this.col;
this.ctx.moveTo(this.ptArr[0].x, this.ptArr[0].y);
for(var i = 0; i < this.ptArr.length; i++ ){
var number = (i + 1) % this.ptArr.length;
this.ctx.lineTo(this.ptArr[number].x, this.ptArr[number].y);
}
this.ctx.stroke();
this.ctx.closePath();
this.ctx.restore();
}
};
var RectTop2 = function(ctx, x, y, rect){
_.bindAll(this, 'rotationComplete');
this.x = this.originX = x;
this.y = y;
this.side = 60;
this.baseRect = rect;
this.ctx = ctx;
this.col = '#fff';
this.rotate = 0;
this.thetaArr = [0, Math.PI, Math.PI * 5 / 4, Math.PI * 3 / 2];
this.ptArr =[
new Pt(0, 0),
new Pt(this.side, Math.PI),
new Pt(this.side * Math.sqrt(2), Math.PI * (5/4)),
new Pt(this.side, Math.PI * (3/2)),
];
this.rotation();
};
RectTop2.prototype = {
rotation : function(){
this.rotate = Math.PI/2;
for(var i = 0; i < this.ptArr.length; i++){
var pt = this.ptArr[i];
var theta = this.thetaArr[i];
TweenLite.to(pt, 1, { theta : (theta + this.rotate)});
}
TweenLite.to(this, 1, { x : (this.originX ), onComplete : this.rotationComplete});
},
rotationComplete : function(){
this.ptArr =[
new Pt(0, 0),
new Pt(this.side, Math.PI),
new Pt(this.side * Math.sqrt(2), Math.PI * (5/4)),
new Pt(this.side, Math.PI * (3/2)),
];
this.x = this.originX;
this.rotation();
},
update : function(){
this.ctx.save();
this.x = this.baseRect.x + this.baseRect.ptArr[2].x;
this.y = this.baseRect.y + this.baseRect.ptArr[2].y;
this.ctx.translate( this.x, this.y );
this.ctx.beginPath();
this.ctx.strokeStyle = this.col;
this.ctx.moveTo(this.ptArr[0].x, this.ptArr[0].y);
for(var i = 0; i < this.ptArr.length; i++ ){
var number = (i + 1) % this.ptArr.length;
this.ctx.lineTo(this.ptArr[number].x, this.ptArr[number].y);
}
this.ctx.stroke();
this.ctx.closePath();
this.ctx.restore();
}
};
var Road = function(ctx, x, y){
var line;
var lineWidth = 20;
var lineWidthMargin = 10;
this.ctx = ctx;
this.width = window.innerWidth;
this.x = x;
this.y = y;
this.lineArr = [];
this.mask = {x: - this.num /2 * (lineWidth + lineWidthMargin), width: this.num * (lineWidth + lineWidthMargin)}
for(var i = 0; i <= this.num; i++){
line = new Line(this.ctx, (lineWidth + lineWidthMargin) * (i - this.num/2), 0, lineWidth, {minX: this.mask.x, maxX: this.mask.x + this.mask.width})
this.lineArr.push(line);
}
};
Road.prototype = {
num : 20,
lineArr : null,
update : function(){
this.ctx.save();
this.ctx.translate(this.x, this.y);
for(var i = 0; i < this.lineArr.length; i++){
this.lineArr[i].update();
}
var grd = this.ctx.createLinearGradient(this.mask.x * 2, 0, this.mask.width, 0);
grd.addColorStop(0.25, 'rgba(51, 51, 51, 1)');
grd.addColorStop(0.3, 'rgba(51, 51, 51, 0)');
grd.addColorStop(0.5, 'rgba(51, 51, 51, 0)');
grd.addColorStop(0.7, 'rgba(51, 51, 51, 0)');
grd.addColorStop(0.75, 'rgba(51, 51, 51, 1)');
this.ctx.fillStyle = grd;
this.ctx.fillRect(-this.x, -15, this.width, 30);
this.ctx.restore();
}
};
var Line = function(ctx, x, y, width, range){
this.x = x;
this.range = range;
this.ctx = ctx;
this.col = '#fff';
this.width = width;
this.prevTime = + new Date;
};
Line.prototype = {
update : function(){
this.x -= 1;
if(this.x < this.range.minX) this.x = this.range.maxX;
this.ctx.strokeStyle = this.col;
this.ctx.beginPath();
this.ctx.moveTo(this.x - this.width / 2, 0);
this.ctx.lineTo(this.x + this.width / 2, 0);
this.ctx.stroke();
this.ctx.closePath();
}
};
// --------------------------
var width, height, previousTime;
var side1, side2;
var rect, rectTop1, rectTop2, side, road;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
side = Math.min(width, height) / 8;
canvas.width = width;
canvas.height = height;
init();
loop();
function init(){
rect = new Rect(ctx, width / 2, height *.9);
rectTop1 = new RectTop1(ctx, width/2, height*.9, rect);
rectTop2 = new RectTop2(ctx, width/2, height*.9, rectTop1);
road = new Road(ctx, width/2, height *.9 + 30 + 2);
}
function loop(){
//ctx.clearRect(0, 0, width, height);
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
rect.update();
rectTop1.update();
rectTop2.update();
road.update();
requestAnimationFrame(loop);
}
================================================
FILE: app/scripts/1-illusion-of-life/14-undefined.js
================================================
// --------------------------
var Pt = function(x, y){
this.x = x;
this.y = y;
};
var Line = function(ctx, pt1, pt2, pt3, pt4, i){
_.bindAll(this, 'changeAnimation1', 'changeAnimation1Complete', 'changeAnimation2', 'changeAnimation2Complete');
this.curPt1 = new Pt(pt1.x, pt1.y);
this.curPt2 = new Pt(pt2.x, pt2.y);
this.col = 'rgba(255, 255, 255, .3)';
this.ctx = ctx;
this.pt1 = pt1;
this.pt2 = pt2;
this.pt3 = pt3;
this.pt4 = pt4;
//this.duration = i/ 20 * .3 + .2;
this.duration = .5;
this.wait = (.8 - this.duration) * 1000;
setTimeout(this.changeAnimation1, 500);
};
Line.prototype = {
changeAnimation1 : function(){
TweenLite.to(this.curPt1, this.duration, { x : (this.pt3.x ), onComplete : this.changeAnimation1Complete, ease: Power3.easeInOut});
TweenLite.to(this.curPt2, this.duration, { y : (this.pt4.y ), ease: Power3.easeInOut});
},
changeAnimation1Complete : function(){
setTimeout(this.changeAnimation2, this.wait);
},
changeAnimation2 : function(){
TweenLite.to(this.curPt1, this.duration, { x : (this.pt1.x ), onComplete : this.changeAnimation2Complete, ease: Power3.easeInOut});
TweenLite.to(this.curPt2, this.duration, { y : (this.pt2.y ), ease: Power3.easeInOut});
},
changeAnimation2Complete : function(){
setTimeout(this.changeAnimation1, this.wait);
},
update : function(){
this.ctx.strokeStyle = this.col;
this.ctx.beginPath();
this.ctx.moveTo(this.curPt1.x, this.curPt1.y);
this.ctx.lineTo(this.curPt2.x, this.curPt2.y);
this.ctx.stroke();
this.ctx.closePath();
}
};
var side = 100;
var RightRect = function(ctx, x, y){
var ptX, ptY, pt1, pt2, pt3, pt4 ,line, i;
this.ctx = ctx;
this.x = x;
this.y = y;
this.lineArr = [];
for(var j = 0; i < 4; i++){
}
// ---------
for(var i = 0; i < this.num; i++){
ptX = (i) / (this.num-1) * side;
ptY = (i) / (this.num-1) * side;
pt1 = new Pt( 0, -side);
pt2 = new Pt( side, -side);
pt3 = new Pt( ptX, -side);
pt4 = new Pt( 0, ptY -side);
line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);
this.lineArr.push(line);
}
for(var i = 0; i < this.num; i++){
ptX = (i) / (this.num-1) * side;
ptY = (i) / (this.num-1) * side;
pt1 = new Pt( side, -side);
pt2 = new Pt( side, side-side);
pt3 = new Pt( ptX, -side);
pt4 = new Pt( 0, ptY-side);
line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);
this.lineArr.push(line);
}
// ---------
for(var i = 0; i < this.num; i++){
ptX = (i) / (this.num-1) * side;
ptY = (i) / (this.num-1) * side;
pt1 = new Pt( 0, side);
pt2 = new Pt( side, side);
pt3 = new Pt( ptX, side);
pt4 = new Pt( 0, -ptY + side);
line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);
this.lineArr.push(line);
}
for(var i = 0; i < this.num; i++){
ptX = (i) / (this.num-1) * side;
ptY = (i) / (this.num-1) * side;
pt1 = new Pt( side, side);
pt2 = new Pt( side, 0);
pt3 = new Pt( side - ptX, side);
pt4 = new Pt( side, ptY);
line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);
this.lineArr.push(line);
}
// ---------
for(var i = 0; i < this.num; i++){
ptX = (i) / (this.num-1) * side * -1;
ptY = (i) / (this.num-1) * side;
pt1 = new Pt( 0, -side);
pt2 = new Pt( -side, -side);
pt3 = new Pt( ptX, -side);
pt4 = new Pt( 0, ptY -side);
line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);
this.lineArr.push(line);
}
for(var i = 0; i < this.num; i++){
ptX = (i) / (this.num-1) * side * -1;
ptY = (i) / (this.num-1) * side;
pt1 = new Pt( -side, -side);
pt2 = new Pt( -side, side-side);
pt3 = new Pt( ptX, -side);
pt4 = new Pt( 0, ptY-side);
line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);
this.lineArr.push(line);
}
// ----------
for(var i = 0; i < this.num; i++){
ptX = (i) / (this.num-1) * side * -1;
ptY = (i) / (this.num-1) * side;
pt1 = new Pt( 0, side);
pt2 = new Pt( -side, side);
pt3 = new Pt( ptX, side);
pt4 = new Pt( 0, -ptY + side);
line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);
this.lineArr.push(line);
}
for(var i = 0; i < this.num; i++){
ptX = (i) / (this.num-1) * side;
ptY = (i) / (this.num-1) * side;
pt1 = new Pt( -side, side);
pt2 = new Pt( -side, 0);
pt3 = new Pt( ptX - side, side);
pt4 = new Pt( 0, ptY);
line = new Line(this.ctx, pt1, pt2, pt3, pt4, i);
this.lineArr.push(line);
}
};
RightRect.prototype = {
num : 20,
update : function(){
this.ctx.save();
this.ctx.translate(this.x, this.y);
for(var i = 0; i < this.lineArr.length; i++){
var line = this.lineArr[i];
line.update();
}
this.ctx.restore();
}
};
// --------------------------
var width, height, previousTime;
var side1, side2;
var rightRect;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
init();
loop();
function init(){
rightRect = new RightRect( ctx, width/2, height/2 );
}
function loop(){
//ctx.clearRect(0, 0, width, height);
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
rightRect.update();
requestAnimationFrame(loop);
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
================================================
FILE: app/scripts/1-illusion-of-life/15-undefined.js
================================================
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var col = '#fff';
var Circle = function( ctx, x, y, rad ){
this.ctx = ctx;
this.x = x;
this.y = y;
this.rad = rad;
};
Circle.prototype = {
update : function(){
this.ctx.fillStyle = col;
this.ctx.beginPath();
this.ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);
this.ctx.fill();
this.ctx.closePath();
}
};
var DynamicCircle = function(ctx, x, y, rad, dis){
this.shuuki = .3;
this.dis = dis;
this.vel = dis / this.shuuki;
this.duration = 0;
this.shinpuku = rad * 3;
this.originY = y;
Circle.call(this, ctx, x, y, rad/2);
};
DynamicCircle.prototype = Object.create(Circle.prototype);
DynamicCircle.prototype = {
update : function(dt, shapeArr){
this.duration += dt;
var times = parseInt(this.duration / (this.shuuki * 2))
this.x = this.x + this.vel * dt;
if(this.x >= maxX){
var dis = this.x - maxX;
this.x = minX + dis - this.dis;
}
var globalAlpha = 1;
if(this.x >= (maxX-this.dis) ){
globalAlpha = (maxX - this.x )/ this.dis
if(globalAlpha < 0) globalAlpha = 0;
}
this.y = -1 * Math.cos(this.duration / this.shuuki * Math.PI ) * this.shinpuku + this.originY;
var circleNumber = (times * 2 + 1) % shapeArr.length;
var shapeRatio = (this.duration - times * this.shuuki * 2) * Math.PI * 2;
if(shapeRatio > Math.PI) shapeRatio = Math.PI;
shapeArr[circleNumber].y = this.rad * 4 *Math.sin(shapeRatio);
this.ctx.save();
this.ctx.globalAlpha = globalAlpha;
Circle.prototype.update.call(this);
this.ctx.restore();
}
};
var DynamicCircle2= function(ctx, x, y, rad, dis){
this.shuuki = .3;
this.dis = dis;
this.vel = -1 * dis / this.shuuki;
this.duration = 0;
this.shinpuku = rad * 3;
this.originY = y;
Circle.call(this, ctx, x, y, rad/2);
};
DynamicCircle2.prototype = Object.create(Circle.prototype);
DynamicCircle2.prototype = {
update : function(dt, shapeArr){
this.duration += dt;
var times = parseInt(this.duration / (this.shuuki * 2))
this.x = this.x + this.vel * dt;
this.y = 1 * Math.cos(this.duration / this.shuuki * Math.PI ) * this.shinpuku + this.originY;
// if(this.x >= maxX){
// var dis = this.x - maxX;
// this.x = minX + dis - this.dis;
// }
if(this.x <= minX){
var dis = minX - this.x;
this.x = maxX - dis + this.dis;
}
var globalAlpha = 1;
if(this.x <= (minX+this.dis) ){
globalAlpha = (this.x - minX )/ this.dis;
if(globalAlpha < 0) globalAlpha = 0;
}
//
//
var circleNumber = (times * 2 ) % shapeArr.length;
circleNumber = shapeArr.length - 2 - circleNumber;
if(circleNumber < 0) circleNumber =shapeArr.length + circleNumber;
var shapeRatio = (this.duration - times * this.shuuki * 2) * Math.PI * 2;
if(shapeRatio > Math.PI) shapeRatio = Math.PI;
shapeArr[circleNumber].y = this.rad * 4 *Math.sin(shapeRatio) * -1;
//
this.ctx.save();
this.ctx.globalAlpha = globalAlpha;
Circle.prototype.update.call(this);
this.ctx.restore();
}
};
var Rect = function( ctx, x, y, rad ){
this.ctx = ctx;
this.x = x;
this.y = y;
this.rad = rad * 2;
};
Rect.prototype = {
update : function(){
this.ctx.fillStyle = col;
this.ctx.beginPath();
this.ctx.fillRect(this.x - this.rad/2, this.y - this.rad/2, this.rad, this.rad);
this.ctx.closePath();
}
};
// --------------------------
var width, height, previousTime;
var side1, side2;
var colNum = 19;
var shapeArr = [];
var dynamicCircle, dynamicCircle2;
var prevTime;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
var minX = 1/(colNum + 1) * width - .5*width;
var maxX = colNum/(colNum + 1) * width - .5*width;
init();
loop();
function init(){
var shape;
var xPos;
var yPos = 0;
var rad = parseInt(width / colNum / 2 * .6);
var dis = 1/(colNum+1) * width;
var rectX;
for(var i = 0; i < colNum; i++){
xPos = ((i + 1) / (colNum + 1) -.5) * width;
if(i % 2 == 0) {
shape = new Rect(ctx, xPos, yPos, rad );
}else{
shape = new Circle(ctx, xPos, yPos, rad );
}
shapeArr.push(shape);
}
dynamicCircle = new DynamicCircle(ctx, minX, yPos - rad * 3, rad, dis);
dynamicCircle2= new DynamicCircle2(ctx, maxX, yPos + rad * 3, rad, dis);
prevTime = +new Date;
}
function loop(){
var curTime = +new Date;
var duration = (curTime - prevTime)/1000;
prevTime = curTime;
//ctx.clearRect(0, 0, width, height);
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
ctx.save();
ctx.translate(width/2, height/2);
for(var i in shapeArr){
var shape = shapeArr[i];
shape.update();
}
dynamicCircle.update(duration, shapeArr);
dynamicCircle2.update(duration, shapeArr);
ctx.restore();
requestAnimationFrame(loop);
}
================================================
FILE: app/scripts/1-illusion-of-life/16-undefined.js
================================================
// --------------------------
var width, height, prevTime;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
// ================
var apple = [
[5, 5, 5, 5, 5, 5, 5, 5, 5, 5 , 4, 3, 2 ,1],
[5, 5, 5, 5, 5, 5, 5, 5, 5, 4 , 3, 2, 1],
[5, 5, 5, 5, 5, 5, 5, 5, 4, 2 , 1],
[5, 5, 5, 5, 5, 5, 5, 5, 3, 1],
[5, 5, 5, 5, 5, 5, 5, 4, 2, 1],
[5, 5, 5, 5, 5, 5, 5, 3, 2, 1],
[5, 5, 5, 5, 5, 5, 5, 3, 2, 1],
[5, 5, 5, 5, 5, 5, 5, 3, 2, 1],
[5, 5, 5, 5, 5, 5, 5, 3, 2, 1],
[5, 5, 5, 5, 5, 5, 5, 3, 2, 1],
// ============= ===================
[5, 5, 5, 5, 5, 5, 5, 3, 2, 1],
[5, 5, 5, 5, 5, 5, 5, 3, 2, 1],
[5, 5, 5, 5, 5, 5, 5, 4, 3, 2, 1],
[5, 5, 5, 5, 5, 5, 5, 5, 4, 3, 2, 1],
[5, 5, 5, 5, 5, 5, 5, 5, 4, 3, 2, 1],
[5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 2, 1],
[5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 3, 2, 1],
[5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 3, 2, 1],
[5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 3, 1],
[5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 3, 2, 1],
// ============= ===================
[5, 4, 3, 3, 3, 3, 3, 4, 5, 5, 4, 3, 2, 1],
[4, 3, 2, 2, 2, 2, 2, 3, 4, 5, 4, 3, 2, 1],
[2, 1, 0, 0, 0, 1, 2, 3, 4, 5, 4, 3, 2, 1],
[0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 4, 3, 2, 1],
[0, 0, 0, 0, 0, 1, 3, 4, 4, 5, 4, 2, 1],
[0, 0, 0, 0, 0, 2, 3, 4, 5, 4, 3, 1],
[0, 0, 0, 0, 0, 2, 3, 4, 5, 4, 3, 1],
[0, 0, 0, 0, 1, 2, 4, 5, 5, 4, 3, 1],
[0, 0, 0, 1, 3, 4, 5, 5, 4, 3, 1],
[0, 0, 1, 3, 4, 5, 5, 5, 4, 3, 1],
// ============= ===================
[0, 1, 3, 4, 5, 5, 5, 5, 4, 3, 1],
[1, 3, 4, 5, 5, 5, 5, 4, 3, 1],
[2, 4, 5, 5, 5, 5, 5, 4, 3, 1],
[4, 5, 5, 5, 5, 5, 5, 4, 3, 1],
[5, 5, 5, 5, 5, 5, 5, 4, 3, 1],
[5, 5, 5, 5, 5, 5, 5, 4, 3, 1],
[5, 5, 5, 5, 5, 5, 5, 4, 3, 1],
[5, 5, 5, 5, 5, 5, 5, 4, 3, 1],
[5, 5, 5, 5, 5, 5, 5, 5, 4, 3, 1],
[5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 2],
// =========== ===============
[5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 2],
[5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 2],
[5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 3, 1],
];
var rectWidth = 860;
var rectHeight = 476;
var Apple = function(ctx, x, y){
_.bindAll(this, 'updateTile');
//this.bgRect = new BgRect(ctx, x, y);
this.ctx = ctx;
this.tiles = new Tiles(ctx);
//setTimeout(this.showBg, 300);
setTimeout(this.updateTile, 1000);
};
Apple.prototype = {
updateTile : function(){
this.tiles.changeSize();
},
update : function(){
this.tiles.update();
this.ctx.fillStyle = '#fff';
this.ctx.font = "24px sans-serif";
this.ctx.fillText('Is it in June 2nd?', width/2 - 90, height/2 + 200)
}
};
var Tiles = function(ctx){
this.tileArr = [];
var margin = 2;
for(var i = 0; i < 43; i++){
this.tileArr[i] = [];
var visualArr = apple[i];
for(var j = 0; j < 24; j++){
var number = visualArr[j] ? visualArr[j] : 0;
var tile = new Tile(ctx, i * 20 + 10 - rectWidth/2, j * 20 + 10 - rectHeight/2, number, i, j);
this.tileArr[i].push(tile);
}
}
};
Tiles.prototype = {
changeSize : function(){
for(var i in this.tileArr){
var tileArr = this.tileArr[i];
for(var j in tileArr){
tileArr[j].changeSize();
}
}
},
update : function(){
for(var i in this.tileArr){
var tileArr = this.tileArr[i];
for(var j in tileArr){
tileArr[j].update();
}
}
}
};
var Tile = function(ctx, x, y, number, i, j){
_.bindAll(this, 'onCompleteAnimation', 'changeSize');
this.xId = i;
this.yId = j;
this.ctx = ctx;
this.x = x;
this.y = y;
this.number = number;
this.firstWidth = this.side = 21;
this.secondWidth = 16;
this.grd = this.ctx.createLinearGradient( -rectWidth/2-this.x, 0, rectWidth, 0);
this.grd.addColorStop(0, 'rgba(181, 240, 83, 1)');
this.grd.addColorStop(0.15, 'rgba(0, 215, 171, 1)');
this.grd.addColorStop(0.3, 'rgba(151, 69, 219, 1)');
this.grd.addColorStop(0.40, 'rgba(254, 91, 81, 1)');
this.grd.addColorStop(0.5, 'rgba(255, 216, 59, 1)');
};
Tile.prototype = {
animationDuration :.3,
anchor : 0,
update : function(){
this.ctx.save();
this.ctx.translate(this.x + width/2, this.y + height/2);
this.ctx.fillStyle = this.grd;
this.ctx.beginPath();
this.ctx.moveTo(-this.side/2 + this.anchor, -this.side/2);
this.ctx.lineTo(this.side/2 - this.anchor, -this.side/2);
this.ctx.quadraticCurveTo(this.side/2, -this.side/2, this.side/2, this.anchor - this.side/2);
this.ctx.lineTo(this.side/2, this.side/2- this.anchor);
this.ctx.quadraticCurveTo(this.side/2, this.side/2, this.side/2 - this.anchor, this.side/2);
this.ctx.lineTo(- this.side/2 + this.anchor, this.side/2);
this.ctx.quadraticCurveTo(-this.side/2, this.side/2, -this.side/2, this.side/2 - this.anchor);
this.ctx.lineTo(-this.side/2, -this.side/2 + this.anchor);
this.ctx.quadraticCurveTo(-this.side/2, -this.side/2, -this.side/2 + this.anchor, -this.side/2);
this.ctx.fill();
this.ctx.closePath();
this.ctx.restore();
},
delay : 0,
changeSize : function(){
TweenLite.to(this, this.animationDuration, {side : 16, anchor: 4, onComplete: this.onCompleteAnimation, delay: this.delay});
},
restart : function(){
if(this.number > 0){
TweenLite.to(this, this.animationDuration, {side : 0, anchor: 0 });
}
this.delay = 1;
TweenLite.to(this, this.animationDuration, {side : 21, delay: 2, onComplete: this.changeSize });
},
onCompleteAnimation : function(){
var self = this;
setTimeout(function(){
self.restart();
},3000);
var sid, anch;
switch (this.number){
case 0:
sid = 0; anch = 0;
break;
case 1:
sid = 2, anch = .5;
break;
case 2:
sid = 4, anch = 1;
break;
case 3:
sid = 8, anch = 2;
break;
case 4:
sid = 12, anch = 3;
break;
case 5:
return;
break;
}
TweenLite.to(this, this.animationDuration * 3, {side : sid, anchor: anch, delay:.5 });
}
};
// ================
var apple;
init();
loop();
function init(){
apple = new Apple(ctx, width/2, height/2);
prevTime = +new Date;
}
function loop(){
var curTime = +new Date;
var duration = (curTime - prevTime)/1000;
prevTime = curTime;
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, width, height);
apple.update(duration);
requestAnimationFrame(loop);
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
================================================
FILE: app/scripts/1-illusion-of-life/17-undefined.js
================================================
// --------------------------
var width, height, prevTime;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
// ================
sw = 1000;
sh = 1000;
var dtr = function(v) {return v * Math.PI/180;}
var camera = {
focus : 10,
self : {
x : 0,
y : 0,
z : 0
},
rotate : {
x : 0,
y : 0,
z : 0
},
up : {
x : 0,
y : 1,
z : 0
},
zoom : 1,
display : {
x : width/2,
y : height/2,
z : 0
}
};
var Circles = function(ctx){
var circle;
this.circles = [];
var side = 300;
for(var x = 0; x < this.sideNum; x++){
for(var y = 0; y < this.sideNum; y++){
if(x % 3 == 0 && y % 3 == 0) circle = new Rect(ctx, side * (x - this.sideNum/2), side * (y - this.sideNum/2))
else circle = new Circle(ctx, side * (x - this.sideNum/2), side * (y - this.sideNum/2))
this.circles.push(circle);
}
}
};
Circles.prototype = {
sideNum : 24,
t : 0,
update : function(){
this.t += .01;
camera.focus = 50 - 40 * Math.cos(this.t);
for(var i in this.circles){
this.circles[i].update();
}
}
};
var Circle = function(ctx, x, y){
this.ctx = ctx;
this.x = x;
this.y = y;
this.z = -100;
this.rad =100;
this.col = '#fff';
};
Circle.prototype = {
update : function(){
this.ctx.fillStyle = '#fff';
var scale = ((camera.focus-camera.self.z) / ((camera.focus-camera.self.z) - this.z))* camera.zoom;
var xPos = this.x * scale;
var yPos = this.y * scale;
var rad = this.rad * scale;
this.ctx.save();
this.ctx.translate(camera.display.x, camera.display.y);
this.ctx.beginPath();
this.ctx.arc(xPos, yPos, rad, 0, 2 * Math.PI, false);
this.ctx.fill();
this.ctx.closePath();
this.ctx.restore();
}
};
var Rect = function(ctx, x, y){
this.ctx = ctx;
this.x = x;
this.y = y;
this.z = -100;
this.rad =100;
this.col = '#fff';
};
Rect.prototype = {
update : function(){
this.ctx.fillStyle = '#fff';
var scale = ((camera.focus-camera.self.z) / ((camera.focus-camera.self.z) - this.z))* camera.zoom;
var xPos = this.x * scale;
var yPos = this.y * scale;
var rad = this.rad * scale;
this.ctx.save();
this.ctx.translate(camera.display.x, camera.display.y);
this.ctx.beginPath();
this.ctx.fillRect(xPos - rad, yPos -rad , rad * 2, rad * 2);
this.ctx.closePath();
this.ctx.restore();
}
};
// ================
var circles;
init();
loop();
function init(){
circles = new Circles(ctx);
prevTime = +new Date;
}
function loop(){
var curTime = +new Date;
var duration = (curTime - prevTime)/1000;
prevTime = curTime;
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
circles.update();
requestAnimationFrame(loop);
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
================================================
FILE: app/scripts/1-illusion-of-life/18-undefined.js
================================================
// --------------------------
var width, height, prevTime;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var isSoundPlay = true;
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
// ================
var dtr = function(v) {return v * Math.PI/180;}
var camera = {
focus : 100,
self : {
x : 0,
y : 0,
z : 0
},
rotate : {
x : 0,
y : 0,
z : 0
},
up : {
x : 0,
y : 1,
z : 0
},
zoom : 1,
display : {
x : width/2,
y : height/2,
z : 0
}
};
var Point = function(x, y, z){
this.x = x;
this.y = y;
this.z = z;
};
var Shape = function(ctx, z){
_.bindAll(this, 'updateRotation', 'onTweenComplete');
this.normalPtArr = this.ptArr = [];
this.ctx = ctx;
this.x = 0;
this.y = 0;
this.z = z;
this.theta = Math.PI / 2;
var side = this.side = 200;
this.sideNum = 3;
// 200 200
// ---------- ----------
// \ / | |
// \ / | |
// \ / | |
// \ / | |
// \/ ----------
// triangle
var angle = function(number){
return (number - 2) / Math.PI / number / 2
};
this.sideList = {
3 : side / Math.cos(angle(3)),
4 : side / Math.cos(angle(4)),
5 : side / Math.cos(angle(5)),
6 : side / Math.cos(angle(6))
};
var gosa=0;
switch(this.sideNum){
case 3:
gosa = -90 / 180 * Math.PI;
break;
}
for(var i = 0; i < this.sideNum; i++){
var theta = i / this.sideNum * 2 * Math.PI;
var pt = new Point( this.sideList[this.sideNum] * Math.cos(theta + gosa), this.sideList[this.sideNum] * Math.sin(theta + gosa), 0);
this.normalPtArr.push(pt);
}
this.translateZ = this.originTranslateZ = this.sideList[this.sideNum];
this.theta = Math.PI/2;
var self = this;
this.count = 0;
this.sideNum = 0;
setTimeout(function(){
self.updateRotation(0);
} , 1000);
};
Shape.prototype = {
updateRotation : function(){
this.count++;
if(this.count % 2 == 0) TweenLite.to(this, .5, {theta: Math.PI/2, translateZ: this.originTranslateZ, onComplete: this.onTweenComplete});
else{
TweenLite.to(this, .5, {theta: 0, translateZ: 0});
setTimeout(this.updateRotation, 600);
}
},
onTweenComplete : function(){
this.sideNum = (this.sideNum + 1) % 4;
var sideNum = this.sideNum + 3;
var rad = this.sideList[sideNum];
var gosa=0;
switch(sideNum){
case 3:
gosa = -90 / 180 * Math.PI;
break;
case 4:
gosa = 45 / 180 * Math.PI;
break;
}
this.normalPtArr = [];
for(var i = 0; i < sideNum; i++){
var theta = i / sideNum * 2 * Math.PI;
var pt = new Point( rad * Math.cos(theta + gosa), rad * Math.sin(theta + gosa), 0);
this.normalPtArr.push(pt);
}
this.translateZ = this.originTranslateZ = rad * Math.cos( Math.PI / (sideNum * 2) );
this.theta = Math.PI/2;
this.updateRotation();
},
duration : 0,
update : function(dt){
this.duration += dt;
this.ctx.fillStyle = '#fff';
this.ctx.strokeStyle = '#fff';
var side = this.side * scale;
this.ctx.save();
this.ctx.translate(camera.display.x, camera.display.y);
this.ctx.rotate(this.duration/3);
this.ctx.beginPath();
for(var i = 0; i < this.ptArr.length; i++){
var pt = this.ptArr[i];
var scale = ((camera.focus-camera.self.z) / ((camera.focus-camera.self.z) - pt.z))* camera.zoom;
var xPos = pt.x * scale;
var yPos = pt.y * scale;
if(i == 0){
this.ctx.moveTo(xPos, yPos);
}else{
this.ctx.lineTo(xPos, yPos);
}
}
this.ctx.closePath();
this.ctx.fill();
this.ctx.stroke();
this.ctx.restore();
}
};
Object.defineProperty(Shape.prototype, 'theta', {
get : function(){
return this._theta;
},
set : function(val){
this._theta = val;
this.ptArr = [];
for(var i = 0; i < this.normalPtArr.length; i++){
var normalPt = this.normalPtArr[i];
var rotateX = normalPt.x;
var rotateY = Math.cos(val) * normalPt.y - Math.sin(val) * normalPt.z;
var rotateZ = Math.sin(val) * normalPt.y + Math.cos(val) * normalPt.z;
var rotatePt = new Point(rotateX, rotateY, rotateZ - this.translateZ);
this.ptArr.push(rotatePt);
}
}
});
// ================
init();
loop();
var shape;
function init(){
prevTime = +new Date;
shape = new Shape(ctx, 1000);
}
function loop(){
var curTime = +new Date;
var duration = (curTime - prevTime)/1000;
prevTime = curTime;
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
shape.update(duration);
requestAnimationFrame(loop);
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
================================================
FILE: app/scripts/1-illusion-of-life/19-undefined.js
================================================
// --------------------------
var width, height, prevTime;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
// ================
var Point = function(x, y){
this.x = x;
this.y = y;
}
var Circle = function(ctx, x, y, rad, val){
this.ctx = ctx;
this.rad = rad;
this.pt = new Point(x, y);
this.isFill = val;
};
Circle.prototype = {
col : 'rgba(0, 0, 0, 0)',
update : function(){
this.ctx.beginPath();
this.ctx.arc(this.pt.x, this.pt.y, this.rad, 0, 2 * Math.PI, false);
if(this.isFill){
this.ctx.fillStyle = this.col;
this.ctx.fill();
}else{
this.ctx.strokeStyle = this.col;
this.ctx.stroke();
}
this.ctx.closePath();
}
};
var SmallCircle = function(i, ctx, bigRad, theta, rad ){
this.type = i % 2;
this.bigRad = bigRad;
this.theta = theta;
this.count = 0;
if(i % 2 == 0) {
this.vel = this.originalVel = 0.01;
this.fure = 0.02;
this.countVel = 0.02;
this.col = 'rgba(0, 0, 0, 0)';
}else{
this.vel = this.originalVel = 0.02;
this.fure = 0.01;
this.countVel = 0.01;
this.col = 'rgba(0, 0, 0, 0)';
}
var x = this.bigRad * Math.cos(this.theta);
var y = this.bigRad * Math.sin(this.theta);
Circle.call(this, ctx, x, y, rad, true);
};
SmallCircle.prototype = Object.create(Circle.prototype);
SmallCircle.prototype = {
velocityTheta : 0,
update : function(){
this.count++;
this.vel = this.originalVel + this.fure * Math.cos(this.count * this.countVel);
this.theta += this.vel;
this.pt.x = this.bigRad * Math.cos(this.theta);
this.pt.y = this.bigRad * Math.sin(this.theta);
Circle.prototype.update.call(this);
}
};
var AnimationCircle = function(smallCircle, curRad){
this.parentCircle = smallCircle;
this.minRad = -200;
this.maxRad = 200;
this.curRad = curRad;
var x = this.curRad * Math.cos(this.parentCircle);
var y = this.curRad * Math.sin(this.parentCircle);
this.type = this.parentCircle.type;
if(this.type % 2 == 0) this.col = '#999';
else this.col = '#fff';
this.vel = .5;
Circle.call(this, smallCircle.ctx, x, y, smallCircle.rad/3, true);
};
AnimationCircle.prototype = Object.create(Circle.prototype);
AnimationCircle.prototype = {
update : function(){
this.curRad -= this.vel;
if(this.curRad < this.minRad){
//this.curRad = this.curRad + (this.minRad -this.curRad);
this.vel = -.5
}
if(this.curRad > this.maxRad){
//this.curRad = this.curRad - (this.maxRad -this.curRad);
this.vel = .5;
}
this.pt.x = this.curRad * Math.cos(this.parentCircle.theta);
this.pt.y = this.curRad * Math.sin(this.parentCircle.theta);
Circle.prototype.update.call(this);
}
};
var MainCircle = function(ctx, x, y){
this.ctx = ctx;
this.point = new Point(x, y);
this.bigCircle = new Circle(ctx, 0, 0, this.rad, false);
this.circleArr = [];
this.animCircleArr = [];
for(var i = 0; i < this.circleNum; i++){
var theta = i / this.circleNum * Math.PI * 2;
var circle = new SmallCircle( i, ctx, this.rad, theta, this.smallRad);
this.circleArr.push(circle);
for(var j = 0; j < 11; j++){
var animCircle = new AnimationCircle(circle, -j * 40 + 200);
this.animCircleArr.push(animCircle);
}
}
};
MainCircle.prototype = {
rad : 200,
smallRad : 8,
circleArr : null,
circleNum : 24,
count : 0,
update : function(){
this.count = this.count + 0.01;
this.val = Math.sin(this.count) * .5 + Math.sin(this.count/2) * .3 + 1;
this.ctx.save();
this.ctx.translate(this.point.x, this.point.y);
this.ctx.scale(this.val, this.val)
this.bigCircle.update();
for(var i = 0; i < this.circleArr.length; i++){
this.circleArr[i].update();
}
for(i = 0; i < this.animCircleArr.length; i++){
this.animCircleArr[i].update();
}
this.ctx.restore();
}
};
// ================
var mainCircle;
init();
loop();
function init(){
mainCircle = new MainCircle(ctx, width/2, height/2);
prevTime = +new Date;
}
function loop(){
var curTime = +new Date;
var duration = (curTime - prevTime)/1000;
prevTime = curTime;
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
mainCircle.update();
requestAnimationFrame(loop);
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
================================================
FILE: app/scripts/1-illusion-of-life/2-squash.js
================================================
function backingScale(context) {
if ('devicePixelRatio' in window) {
if (window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
}
return 1;
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var Rect = function( ctx, x, y, wid, hig ){
this.ctx = ctx;
this.x = x;
this.y = y;
this.wid = wid;
this.hig = hig;
this.vel = 100;
};
Rect.prototype = {
draw : function(){
this.ctx.beginPath();
this.ctx.fillStyle = '#fff';
this.ctx.save();
this.ctx.translate(this.x, this.y);
this.ctx.fillRect(- this.wid / 2, -this.hig, this.wid, this.hig);
this.ctx.closePath();
this.ctx.restore();
}
};
// ---------------
var width, height, previousTime;
var side1, side2;
var rect, rect1, rect2;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var scaleFactor = backingScale(ctx);
width = window.innerWidth * scaleFactor;
height = window.innerHeight * scaleFactor;
side1 = 100;
side2 = 180;
var duration1 = .8;
var duration2 = .6;
canvas.width = width;
canvas.height = height;
init();
function init(){
previousTime = +new Date;
rect1 = new Rect( ctx, width/2 - 200, height, side1, 50);
rect = new Rect( ctx, width/2, 0, side1, 200);
rect2 = new Rect( ctx, width/2 + 200, height, side1, 50);
TweenLite.to(rect, duration1, { y : height, onComplete: onTween1Complete, onUpdate: onTween1Update });
TweenLite.to(rect, duration2, { wid: side2, hig: 50, delay: .2});
TweenLite.to(rect1, duration1, { y : 200});
TweenLite.to(rect1, duration2, { wid: side1, hig:200});
TweenLite.to(rect2, duration1, { y : 200 });
TweenLite.to(rect2, duration2, { wid: side1, hig: 200});
}
function onTween1Update(){
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
rect.draw();
rect1.draw();
rect2.draw();
}
function onTween1Complete(){
TweenLite.to(rect, duration1, { y : 200, onComplete: onTween2Complete, onUpdate: onTween1Update, delay:.2});
TweenLite.to(rect, duration2, { wid: side1, hig: 200, delay: .2});
TweenLite.to(rect1, duration1, { y : height, delay:.2});
TweenLite.to(rect1, duration2, { wid: side2, hig:50, delay:.4});
TweenLite.to(rect2, duration1, { y : height, delay:.2 });
TweenLite.to(rect2, duration2, { wid: side2, hig: 50, delay:.4});
}
function onTween2Complete(){
TweenLite.to(rect, duration1, { y : height, onComplete: onTween1Complete, onUpdate: onTween1Update, delay:.2 });
TweenLite.to(rect, duration2, { wid: side2, hig: 50, delay:.4});
TweenLite.to(rect1, duration1, { y : 200, delay:.2});
TweenLite.to(rect1, duration2, { wid: side1, hig:200, delay:.2});
TweenLite.to(rect2, duration1, { y : 200, delay:.2 });
TweenLite.to(rect2, duration2, { wid: side1, hig: 200, delay:.2});
}
================================================
FILE: app/scripts/1-illusion-of-life/20-undefined.js
================================================
// --------------------------
var width, height, prevTime;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
// ================
var Point = function( x, y){
this.x = x;
this.y = y;
}
var Circle = function( ctx, pt){
this.ctx = ctx;
this.pt = pt;
};
Circle.prototype = {
fillCol : '#333',
strokeCol : '#fff',
rad : 2,
update : function(){
this.ctx.fillStyle = this.fillCol;
this.ctx.strokeStyle = this.strokeCol;
this.ctx.beginPath();
this.ctx.arc(this.pt.x, this.pt.y, this.rad, 0, 2 * Math.PI, false);
this.ctx.stroke();
this.ctx.fill();
this.ctx.closePath();
}
};
var Shape = function( ctx, x, y){
this.ctx = ctx;
this.center = new Point(x, y);
this.line = new Line(ctx);
this.circleArr = [];
this.circleArr.push(new Circle(ctx, this.line.startPt));
this.circleArr.push(new Circle(ctx, this.line.endPt));
var self = this;
setTimeout(function(){
self.add();
}, 800);
};
Shape.prototype = {
circleArr : null,
count : 0,
angle : 0,
add : function(){
this.line.addPt();
this.circleArr.push(new Circle(this.ctx, this.line.ptArr[this.line.ptArr.length - 1]));
var self = this;
this.count++;
if(this.count > 8){
setTimeout(function(){
self.shrink();
}, 2000);
}else{
setTimeout(function(){
self.add();
}, 800);
}
},
init : function(){
this.count = 0;
this.line.init();
this.circleArr = [];
this.circleArr.push(new Circle(ctx, this.line.startPt));
this.circleArr.push(new Circle(ctx, this.line.endPt));
var self = this;
this.line.animate();
setTimeout(function(){
self.add();
}, 1600);
},
shrink : function(){
this.line.shrink();
var self = this;
setTimeout(function(){
self.init();
}, 1000);
},
update : function(){
this.angle += 0.01;
this.ctx.save();
this.ctx.translate(this.center.x, this.center.y);
this.ctx.rotate(this.angle);
this.line.update();
for(var i in this.circleArr){
this.circleArr[i].update();
}
this.ctx.restore();
}
};
// ------
var Line = function(ctx){
this.ctx = ctx;
this.startPt = new Point( 0, 0);
this.endPt = new Point( 0, 0);
this.ptArr = [];
var self = this;
setTimeout(function(){
self.animate();
}, 300);
};
Line.prototype = {
col : '#fff',
animateDuration :.5,
side : 100,
ptArr : null,
init : function(){
this.side = 100;
this.ptArr = [];
},
addPt : function(){
var pt = new Point(this.startPt.x, this.startPt.y);
this.ptArr.push(pt);
var sum = this.ptArr.length + 2;
this.side += 10;
for(var i = 0; i < sum; i++){
var theta = i / sum * 2 * Math.PI;
var x = Math.cos(theta) * this.side;
var y = Math.sin(theta) * this.side;
switch (i){
case 0:
TweenLite.to(this.startPt, this.animateDuration, {x : x, y: y});
break;
case 1:
TweenLite.to(this.endPt, this.animateDuration, {x : x, y: y});
break;
default :
TweenLite.to(this.ptArr[i - 2], this.animateDuration, {x : x, y: y});
}
}
},
shrink : function(){
var sum = this.ptArr.length + 2;
for(var i = 0; i < sum; i++){
switch (i){
case 0:
TweenLite.to(this.startPt, this.animateDuration, {x : 0, y: 0});
break;
case 1:
TweenLite.to(this.endPt, this.animateDuration, {x : 0, y: 0});
break;
default :
TweenLite.to(this.ptArr[i - 2], this.animateDuration, {x : 0, y: 0});
}
}
},
animate : function(){
TweenLite.to(this.startPt, this.animateDuration, {x : this.side});
TweenLite.to(this.endPt, this.animateDuration, {x : -this.side});
},
update : function(){
this.ctx.beginPath();
this.ctx.strokeStyle = this.col;
this.ctx.moveTo(this.endPt.x, this.endPt.y);
if(this.ptArr.length > 0){
for(var i = 0; i < this.ptArr.length; i++){
this.ctx.lineTo(this.ptArr[i].x, this.ptArr[i].y);
}
}
this.ctx.lineTo(this.startPt.x, this.startPt.y);
this.ctx.lineTo(this.endPt.x, this.endPt.y);
this.ctx.stroke();
this.ctx.closePath();
}
}
// ================
var shape;
init();
loop();
function init(){
shape = new Shape(ctx, width/2, height/2);
prevTime = +new Date;
}
function loop(){
var curTime = +new Date;
var duration = (curTime - prevTime)/1000;
prevTime = curTime;
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
shape.update();
requestAnimationFrame(loop);
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
================================================
FILE: app/scripts/1-illusion-of-life/21-undefined.js
================================================
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame
// ---------------------
var width, height, prevTime;
var mousePos;
var particleAnimation;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
// ---------------------
var Point = function(x, y){
this.x = this.origX = x;
this.y = this.origY = y;
};
var AnimationPoint = function(ctx, x, y){
this.ctx = ctx;
this.x = this.origX = x;
this.y = this.origY = y;
this.isDraw = true;
};
AnimationPoint.prototype = {
rad1 : height/2 * .9,
theta1 : 0,
rad2 : 100,
theta2 : 0,
rad : 3,
update : function(){
this.theta1 += .04 * Math.random();
this.theta2 += Math.random() * .02;
this.x = this.origX + this.rad2 * Math.cos(this.theta2);
this.y = this.origY + this.rad1 * Math.sin(this.theta1);
if(this.isDraw) this.draw();
},
draw : function(){
this.ctx.beginPath();
this.ctx.fillStyle = '#000';
this.ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);
this.ctx.fill();
this.ctx.closePath();
}
};
var AnimationPoint2 = function(ctx, x, y){
this.ctx = ctx;
this.x = this.origX = x;
this.y = this.origY = y;
this.isDraw = true;
};
AnimationPoint2.prototype = {
rad1 : width/2 * .9,
theta1 : 0,
rad2 : 200,
theta2 : 0,
rad : 3,
update : function(){
this.theta1 += .04 * Math.random();
this.theta2 += Math.random() * .02;
this.x = this.origX + this.rad1 * Math.cos(this.theta1) ;
this.y = this.origY + this.rad2 * Math.sin(this.theta2);
if(this.isDraw) this.draw();
},
draw : function(){
this.ctx.beginPath();
this.ctx.fillStyle = '#000';
this.ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);
this.ctx.fill();
this.ctx.closePath();
}
};
var Particle = function(ctx, x, y){
this.ctx = ctx;
this.x = x;
this.y = y;
this.vel = new Point(0, 0);
}
Particle.prototype = {
k : .95,
col : '#fff',
update : function( dt, particleAnimation){
var acl
if(!this.isRandom) acl = particleAnimation.getPosition(this.x, this.y);
else acl = this.random;
this.vel.x += acl.x * dt;
this.vel.y += acl.y * dt;
this.vel.x *= this.k;
this.vel.y *= this.k;
this.x += this.vel.x * dt;
this.y += this.vel.y * dt;
if(this.x < 0) this.x = width;
if(this.x > width) this.x = 0;
if(this.y < 0) this.y = height;
if(this.y > height)this.y = 0;
var col = parseInt(255 * this.x / width);
this.ctx.beginPath();
this.ctx.fillStyle = 'hsl(' + col + ', 100%, 70%)';
this.ctx.arc(this.x, this.y, 1, 0, 2*Math.PI, false);
this.ctx.fill();
this.ctx.closePath();
},
randomStart : function(){
this.isRandom = true;
this.random = {x : 5000 * (Math.random() - .5), y: 5000 * (Math.random() - .5)};
},
randomStop : function(){
this.isRandom = false;
}
}
var Particles = function(ctx){
_.bindAll(this, 'interval');
this.ctx = ctx;
this.arr = [];
for(var i = 0; i < this.num; i++){
var particle = new Particle(ctx, width * Math.random(), height * Math.random());
this.arr.push(particle);
}
this.interval();
setInterval(this.interval, 4000);
}
Particles.prototype = {
num : 1000,
update : function(dt, particleAnimation){
for(var i = 0; i < this.num; i++){
this.arr[i].update(dt, particleAnimation);
}
},
interval : function(){
for(var i = 0; i < this.num; i++){
this.arr[i].randomStart();
}
var self = this;
setTimeout(function(){
self.randomStop();
}, 500);
},
randomStop : function(){
for(var i = 0; i < this.num; i++){
this.arr[i].randomStop();
}
}
};
var ParticleAnimation = function(ctx){
this.ctx = ctx;
this.gridWid = width / (this.gridNums - 1);
this.gridHig = height / (this.gridNums - 1);
this.range = this.gridWid * 3;
this.points = [];
for(var _x = 0; _x < this.gridNums; _x++){
for(var _y = 0; _y < this.gridNums; _y++){
var posX, posY, particle;
posX = this.gridWid * _x + this.gridWid/2; posY = this.gridHig * _y + this.gridHig/2;
particle = new Point(posX, posY)
this.points.push(particle);
}
}
this.animationPt = new AnimationPoint(this.ctx, width/2, height/2);
this.animationPt2 = new AnimationPoint2(this.ctx, width/2, height/2);
this.isDraw = true;
};
ParticleAnimation.prototype = {
gridNums : 21,
points : [],
isDraw : false,
speed : 800,
update : function(){
this.animationPt.update();
this.animationPt2.update();
for(var i = 0; i < this.points.length; i++){
var dx, dy, distance;
var pointX1, pointY1, pointX2, pointY2;
var pointX, pointY;
var pt = this.points[i];
dx = this.animationPt.x - pt.x;
dy = this.animationPt.y - pt.y;
distance = Math.sqrt(dx * dx + dy * dy);
pt.x = (pt.x - (dx / distance) * (this.range / distance) * this.speed) - ((pt.x - pt.origX) / 2);
pt.y = (pt.y - (dy / distance) * (this.range / distance) * this.speed) - ((pt.y - pt.origY) / 2);
}
for(var i = 0; i < this.points.length; i++){
var dx, dy, distance;
var pointX1, pointY1, pointX2, pointY2;
var pointX, pointY;
var pt = this.points[i];
dx = this.animationPt2.x - pt.x;
dy = this.animationPt2.y - pt.y;
distance = Math.sqrt(dx * dx + dy * dy);
pt.x = (pt.x - (dx / distance) * (this.range / distance) * this.speed) - ((pt.x - pt.origX) / 2);
pt.y = (pt.y - (dy / distance) * (this.range / distance) * this.speed) - ((pt.y - pt.origY) / 2);
}
// --------------
if(this.isDraw) this.draw();
},
getPosition : function(x, y){
var xPos = parseInt(x / this.gridWid);
var yPos = parseInt(y / this.gridHig);
var arrayNum = xPos + yPos * this.gridNums;
var point = this.points[arrayNum];
var vector = {x : point.x - point.origX, y: point.y - point.origY};
return vector;
},
draw : function(){
this.ctx.strokeStyle = 'rgba(0, 0, 0, .1)';
for(var i = 0; i < this.points.length; i++){
var pt = this.points[i];
var dx = (pt.x - pt.origX)/20;
var dy = (pt.y - pt.origY)/20;
this.ctx.beginPath();
this.ctx.moveTo(pt.origX + dx, pt.origY + dy);
this.ctx.lineTo(pt.origX, pt.origY);
this.ctx.stroke();
this.ctx.closePath();
}
}
};
// ---------------------
var particles;
init();
loop();
function init(){
particles = new Particles(ctx);
particleAnimation = new ParticleAnimation(ctx);
prevTime = +new Date;
}
function loop(){
var curTime = +new Date;
var duration = (curTime - prevTime)/1000;
prevTime = curTime;
var alp = .15 + .1 * Math.cos(curTime * .01);
ctx.fillStyle = 'rgba( 60, 60, 60,' + alp + ')';
ctx.fillRect(0, 0, width, height);
particleAnimation.update();
particles.update(duration, particleAnimation);
requestAnimationFrame(loop);
}
canvas.addEventListener("mousemove", function (evt) {
mousePos = {x: evt.clientX, y: evt.clientY};
}, false);
================================================
FILE: app/scripts/1-illusion-of-life/22-sine-cos.js
================================================
// --------------------------
var width, height, prevTime;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
// ================
var Point = function(theta){
this.theta = theta | 0;
};
Point.prototype = {
rad : 10,
_theta : null,
};
Object.defineProperty(Point.prototype, 'theta', {
get : function(){
return this._theta;
},
set : function(val){
this._theta = val;
this.x = this.rad * Math.cos(this._theta);
this.y = this.rad * Math.sin(this._theta);
}
});
var Line = function(ctx, x, y){
this.ctx = ctx;
this.x = x;
this.y = y;
this.theta = 0;
this.startPt = new Point(this.theta);
this.endPt = new Point((this.theta + Math.PI));
};
Line.prototype = {
strokeCol : '#fff',
update : function(){
this.ctx.save();
this.ctx.translate(this.x, this.y);
this.ctx.beginPath();
this.ctx.fillStyle = this.strokeCol;
this.ctx.moveTo(this.startPt.x, this.startPt.y);
this.ctx.lineTo(this.endPt.x, this.endPt.y);
this.ctx.stroke();
this.ctx.closePath();
this.ctx.restore();
}
};
var LineCollection = function(ctx){
this.ctx = ctx;
this.widNum = parseInt(width / (Point.rad * 2)) + 1;
this.higNum = parseInt(height / (Point.rad * 2)) + 1;
this.lineArr = [];
for(var i = 0; i < this.widNum; i++){
var lineArr = [];
var x = Point.rad * ( 1 + 2 * i);
for(var j = 0;j < this.higNum; j++){
var y = Point.rad * (1 + 2 * j);
var line = new Line(this.ctx, x, y);
lineArr.push(line);
}
this.lineArr.push(lineArr);
}
};
LineCollection.prototype = {
lineArr: null,
widNum : null,
higNum : null,
}
// ================
init();
loop();
function init(){
prevTime = +new Date;
}
function loop(){
var curTime = +new Date;
var duration = (curTime - prevTime)/1000;
prevTime = curTime;
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
requestAnimationFrame(loop);
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
================================================
FILE: app/scripts/1-illusion-of-life/22-undefined.js
================================================
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame
// ---------------------
/**
* Created with JetBrains WebStorm.
* User: kenjisaito
* Date: 12/14/12
* Time: 3:41 PM
* To change this template use File | Settings | File Templates.
*/
var Circle = function(rad, centerPoint){
this.rad = rad;
this.centerPoint = centerPoint;
};
//define the point class
var DelaunayDataSet = function( vertex, context){
this.vertex = vertex;
this.context = context;
this.fillTriangleColor = "rgba(30, 30, 30, .2)";
this.fillTriangleCheck = false;
this.strokeTriangleColor = "rgba( 200, 200, 200, .05)";
this.strokeTriangleCheck = true;
};
DelaunayDataSet.prototype.addPoints = function(ptArr){
for(var i = 0; i < ptArr.length; i++){
this.vertex.push(ptArr[i]);
}
};
DelaunayDataSet.prototype.drawTriangle = function(){
for (var i = 0; i < this.triangleVertexNumber.length; i += 3) {
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){
this.context.beginPath();
// console.log(this.triangleVertexNumber[i]);
this.context.moveTo(this.vertex[this.triangleVertexNumber[i]].x, this.vertex[this.triangleVertexNumber[i]].y);
// console.log(this.triangleVertexNumber[i + 1]);
this.context.lineTo(this.vertex[this.triangleVertexNumber[i + 1]].x, this.vertex[this.triangleVertexNumber[i + 1]].y);
// console.log(this.triangleVertexNumber[i + 2]);
this.context.lineTo(this.vertex[this.triangleVertexNumber[i + 2]].x, this.vertex[this.triangleVertexNumber[i + 2]].y);
this.context.lineTo(this.vertex[this.triangleVertexNumber[i]].x, this.vertex[this.triangleVertexNumber[i]].y);
if (this.fillTriangleCheck) {
this.context.fillStyle = this.fillTriangleColor;
this.context.fill();
}
if (this.strokeTriangleCheck) {
this.context.strokeStyle = this.strokeTriangleColor;
this.context.stroke();
}
this.context.closePath();
}
}
};
DelaunayDataSet.prototype.update = function(){
var vertexNumber = this.vertex.length;
this.triangleVertexNumber = [ 0, 1, 2];
this.circumCircles = [];
var firstCircle = calculationCircle( this.vertex[0], this.vertex[1], this.vertex[2]);
this.circumCircles.push(firstCircle);
for(var i = 3; i < vertexNumber; i++){
calTriangles(this, i);
if(i > 3){
removeTriangle(this, i);
}
}
};
// define the method which is very useful
function distanceBetweenPoints(pt1, pt2){
var dx = pt2.x - pt1.x;
var dy = pt2.y - pt1.y;
return Math.sqrt(dx * dx + dy * dy);
}
function distanceBetweenPointAndCircle(pt, circle){
var dx = pt.x - circle.centerPoint.x;
var dy = pt.y - circle.centerPoint.y;
return Math.sqrt(dx * dx + dy * dy);
}
function judgeBetweenDistance(_pt, _circle) {
var dis = distanceBetweenPointAndCircle(_pt, _circle);
var circleJudge = false;
if (dis < _circle.rad) {
circleJudge = true;
}
return circleJudge;
}
//this is the process of 3 ( separating of the triangles, add the circum circles, and deleting the extra triangle
function calTriangles( _delaunayDataSet, num){
var newNumber = num;
var pt = _delaunayDataSet.vertex[newNumber];
var tempVertexNumber = [];
var tempCircles = [];
var tempNumbers =[];
for(var i = 0; i < _delaunayDataSet.circumCircles.length; i++){
// console.log("i: " + i);
if(judgeBetweenDistance(pt, _delaunayDataSet.circumCircles[i])){
tempNumbers.push(i);
var selectingNum01 = _delaunayDataSet.triangleVertexNumber[3 * i];
var selectingNum02 = _delaunayDataSet.triangleVertexNumber[3 * i + 1];
var selectingNum03 = _delaunayDataSet.triangleVertexNumber[3 * i + 2];
// push the number to pointNumbers array
tempVertexNumber.push(selectingNum01);
tempVertexNumber.push(selectingNum02);
tempVertexNumber.push(newNumber);
tempVertexNumber.push(selectingNum02);
tempVertexNumber.push(selectingNum03);
tempVertexNumber.push(newNumber);
tempVertexNumber.push(selectingNum03);
tempVertexNumber.push(selectingNum01);
tempVertexNumber.push(newNumber);
var ct01circle1 = calculationCircle( _delaunayDataSet.vertex[selectingNum01], _delaunayDataSet.vertex[selectingNum02], _delaunayDataSet.vertex[newNumber]);
var ct01circle2 = calculationCircle( _delaunayDataSet.vertex[selectingNum02], _delaunayDataSet.vertex[selectingNum03], _delaunayDataSet.vertex[newNumber]);
var ct01circle3 = calculationCircle( _delaunayDataSet.vertex[selectingNum03], _delaunayDataSet.vertex[selectingNum01], _delaunayDataSet.vertex[newNumber]);
tempCircles.push(ct01circle1);
tempCircles.push(ct01circle2);
tempCircles.push(ct01circle3);
}
}
for(i = 0; i < tempVertexNumber.length; i++){
_delaunayDataSet.triangleVertexNumber.push(tempVertexNumber[i]);
}
for(i = 0; i < tempCircles.length; i++){
_delaunayDataSet.circumCircles.push(tempCircles[i]);
}
for (i = 0; i < tempNumbers.length; i++) {
var num = tempNumbers[i] - i;
var slicedObjectPtNumbers;
var slicedCircles;
if (num == 0) {
slicedObjectPtNumbers = _delaunayDataSet.triangleVertexNumber.slice(3);
slicedCircles = _delaunayDataSet.circumCircles.slice(1);
} else {
var slicedObjectPtNumberBefore = _delaunayDataSet.triangleVertexNumber.slice(0, 3 * num);
var slicedObjectPtNumberAfter = _delaunayDataSet.triangleVertexNumber.slice(3 * num + 3);
slicedObjectPtNumbers = slicedObjectPtNumberBefore.concat(slicedObjectPtNumberAfter);
var slicedCircleBefore = _delaunayDataSet.circumCircles.slice(0, num);
var slicedCircleAfter = _delaunayDataSet.circumCircles.slice(1 + num);
slicedCircles = slicedCircleBefore.concat(slicedCircleAfter);
}
_delaunayDataSet.triangleVertexNumber = slicedObjectPtNumbers;
_delaunayDataSet.circumCircles = slicedCircles;
}
}
function calculationCircle(pt01, pt02, pt03) {
var x1 = pt01.x;
var y1 = pt01.y;
var x2 = pt02.x;
var y2 = pt02.y;
var x3 = pt03.x;
var y3 = pt03.y;
var c = 2.0 * ((x2 - x1) * (y3 - y1) - (y2 - y1) * (x3 - x1));
var tempX = ((y3 - y1) * (x2 * x2 - x1 * x1 + y2 * y2 - y1 * y1) + (y1 - y2) * (x3 * x3 - x1 * x1 + y3 * y3 - y1 * y1)) / c;
var tempY = ((x1 - x3) * (x2 * x2 - x1 * x1 + y2 * y2 - y1 * y1) + (x2 - x1) * (x3 * x3 - x1 * x1 + y3 * y3 - y1 * y1)) / c;
var tempPt = new Point(tempX, tempY);
var tempRad = Math.sqrt(Math.pow(tempX - x1, 2) + Math.pow(tempY - y1, 2));
return new Circle(tempRad, tempPt);
}
function removeTriangle( _delaunayDataSet, tempVertexNum){
var circumcircleArrays = _delaunayDataSet.circumCircles;
var ommitCircumCircleNumbers = [];
for( var i = 0; i < circumcircleArrays.length;i++){
var vertexNum01 = _delaunayDataSet.triangleVertexNumber[i * 3];
var vertexNum02 = _delaunayDataSet.triangleVertexNumber[i * 3 + 1];
var vertexNum03 = _delaunayDataSet.triangleVertexNumber[i * 3 + 2];
for(var num = 0; num < tempVertexNum; num++){
if(num != vertexNum01 && num != vertexNum02 && num != vertexNum03){
if(judgeBetweenDistance(_delaunayDataSet.vertex[num], circumcircleArrays[i])){
ommitCircumCircleNumbers.push(i);
break;
}
}
}
}
//omit
var tempCircumCircleArray = [];
var tempTriagneNumberArray = [];
for( i = 0; i < circumcircleArrays.length; i++){
for(var j = 0; j < ommitCircumCircleNumbers.length; j++){
if(ommitCircumCircleNumbers[j] == i){
break;
}
}
if(j == ommitCircumCircleNumbers.length){
tempTriagneNumberArray.push( _delaunayDataSet.triangleVertexNumber[3 * i]);
tempTriagneNumberArray.push( _delaunayDataSet.triangleVertexNumber[3 * i + 1]);
tempTriagneNumberArray.push( _delaunayDataSet.triangleVertexNumber[3 * i + 2]);
tempCircumCircleArray.push( _delaunayDataSet.circumCircles[i]);
}
}
// console.log("tempTriagneNumberArray.length: " + tempTriagneNumberArray.length);
_delaunayDataSet.triangleVertexNumber = [];
for( i = 0; i < tempTriagneNumberArray.length; i++){
_delaunayDataSet.triangleVertexNumber[i] = tempTriagneNumberArray[i];
}
_delaunayDataSet.circumCircles = [];
for( i = 0; i < tempCircumCircleArray.length; i++){
_delaunayDataSet.circumCircles[i] = tempCircumCircleArray[i];
}
}
function initTriangle(context, recWid, recHig, recTop, recLeft){
var vertex = [];
var bigRad = Math.sqrt(Math.pow(recWid, 2) + Math.pow(recHig, 2)) / 2;
var bigCirclePos = new Point(recWid / 2 + recLeft, recHig / 2 + recTop);
vertex.push(new Point(bigCirclePos.x - Math.sqrt(3) * bigRad, bigCirclePos.y - bigRad));
vertex.push(new Point(bigCirclePos.x + Math.sqrt(3) * bigRad, bigCirclePos.y - bigRad));
vertex.push(new Point(bigCirclePos.x, bigCirclePos.y + bigRad * 2));
var tempPt;
tempPt = new Point(0, 0);
vertex.push(tempPt);
tempPt = new Point( width, 0);
vertex.push(tempPt);
tempPt = new Point(0, height);
vertex.push(tempPt);
tempPt = new Point( width, height);
vertex.push(tempPt);
// setting DelaunayDataSet with the vertex.
return new DelaunayDataSet( vertex, context);
}
var width, height, prevTime;
var mousePos;
var particleAnimation;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
// ---------------------
var Point = function(x, y){
this.x = this.origX = x;
this.y = this.origY = y;
};
var AnimationPoint = function(ctx, x, y){
this.ctx = ctx;
this.x = this.origX = x;
this.y = this.origY = y;
this.isDraw = false;
};
AnimationPoint.prototype = {
rad1 : height/2 * .9,
theta1 : 0,
rad2 : 100,
theta2 : 0,
rad : 3,
update : function(){
this.theta1 += .04 * Math.random();
this.theta2 += Math.random() * .02;
this.x = this.origX + this.rad2 * Math.cos(this.theta2);
this.y = this.origY + this.rad1 * Math.sin(this.theta1);
if(this.isDraw) this.draw();
},
draw : function(){
this.ctx.beginPath();
this.ctx.fillStyle = '#000';
this.ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);
this.ctx.fill();
this.ctx.closePath();
}
};
var AnimationPoint2 = function(ctx, x, y){
this.ctx = ctx;
this.x = this.origX = x;
this.y = this.origY = y;
this.isDraw = false;
};
AnimationPoint2.prototype = {
rad1 : width/2 * .9,
theta1 : 0,
rad2 : 200,
theta2 : 0,
rad : 3,
update : function(){
this.theta1 += .04 * Math.random();
this.theta2 += Math.random() * .02;
this.x = this.origX + this.rad1 * Math.cos(this.theta1) ;
this.y = this.origY + this.rad2 * Math.sin(this.theta2);
if(this.isDraw) this.draw();
},
draw : function(){
this.ctx.beginPath();
this.ctx.fillStyle = '#000';
this.ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);
this.ctx.fill();
this.ctx.closePath();
}
};
var Particle = function(ctx, x, y){
this.ctx = ctx;
this.x = x;
this.y = y;
this.vel = new Point(0, 0);
}
Particle.prototype = {
k : .95,
col : '#fff',
update : function( dt, particleAnimation){
var acl
if(!this.isRandom) acl = particleAnimation.getPosition(this.x, this.y);
else acl = this.random;
this.vel.x += acl.x * dt;
this.vel.y += acl.y * dt;
this.vel.x *= this.k;
this.vel.y *= this.k;
this.x += this.vel.x * dt;
this.y += this.vel.y * dt;
if(this.x < 0) this.x = width;
if(this.x > width) this.x = 0;
if(this.y < 0) this.y = height;
if(this.y > height)this.y = 0;
var col = parseInt(255 * this.x / width);
this.ctx.beginPath();
this.ctx.fillStyle = 'hsl(' + col + ', 100%, 70%)';
this.ctx.arc(this.x, this.y, 1, 0, 2*Math.PI, false);
this.ctx.fill();
this.ctx.closePath();
},
randomStart : function(){
this.isRandom = true;
this.random = {x : 5000 * (Math.random() - .5), y: 5000 * (Math.random() - .5)};
},
randomStop : function(){
this.isRandom = false;
}
};
var Particles = function(ctx){
_.bindAll(this, 'interval');
this.ctx = ctx;
this.arr = [];
for(var i = 0; i < this.num; i++){
var particle = new Particle(ctx, width/2, height /2);
this.arr.push(particle);
}
this.interval();
setInterval(this.interval, 4000);
};
Particles.prototype = {
num : 100,
update : function(dt, particleAnimation){
for(var i = 0; i < this.num; i++){
this.arr[i].update(dt, particleAnimation);
}
},
interval : function(){
for(var i = 0; i < this.num; i++){
this.arr[i].randomStart();
}
var self = this;
setTimeout(function(){
self.randomStop();
}, 500);
},
randomStop : function(){
for(var i = 0; i < this.num; i++){
this.arr[i].randomStop();
}
}
};
var ParticleAnimation = function(ctx){
this.ctx = ctx;
this.gridWid = width / (this.gridNums - 1);
this.gridHig = height / (this.gridNums - 1);
this.range = this.gridWid * 3;
this.points = [];
for(var _x = 0; _x < this.gridNums; _x++){
for(var _y = 0; _y < this.gridNums; _y++){
var posX, posY, particle;
posX = this.gridWid * _x + this.gridWid/2; posY = this.gridHig * _y + this.gridHig/2;
particle = new Point(posX, posY)
this.points.push(particle);
}
}
this.animationPt = new AnimationPoint(this.ctx, width/2, height/2);
this.animationPt2 = new AnimationPoint2(this.ctx, width/2, height/2);
};
ParticleAnimation.prototype = {
gridNums : 11,
points : [],
isDraw : false,
speed : 800,
update : function(){
this.animationPt.update();
this.animationPt2.update();
for(var i = 0; i < this.points.length; i++){
var dx, dy, distance;
var pointX1, pointY1, pointX2, pointY2;
var pointX, pointY;
var pt = this.points[i];
dx = this.animationPt.x - pt.x;
dy = this.animationPt.y - pt.y;
distance = Math.sqrt(dx * dx + dy * dy);
pt.x = (pt.x - (dx / distance) * (this.range / distance) * this.speed) - ((pt.x - pt.origX) / 2);
pt.y = (pt.y - (dy / distance) * (this.range / distance) * this.speed) - ((pt.y - pt.origY) / 2);
}
for(var i = 0; i < this.points.length; i++){
var dx, dy, distance;
var pointX1, pointY1, pointX2, pointY2;
var pointX, pointY;
var pt = this.points[i];
dx = this.animationPt2.x - pt.x;
dy = this.animationPt2.y - pt.y;
distance = Math.sqrt(dx * dx + dy * dy);
pt.x = (pt.x - (dx / distance) * (this.range / distance) * this.speed) - ((pt.x - pt.origX) / 2);
pt.y = (pt.y - (dy / distance) * (this.range / distance) * this.speed) - ((pt.y - pt.origY) / 2);
}
if(mousePos){
for(var i = 0; i < this.points.length; i++){
var dx, dy, distance;
var pointX1, pointY1, pointX2, pointY2;
var pointX, pointY;
var pt = this.points[i];
dx = mousePos.x - pt.x;
dy = mousePos.y - pt.y;
distance = Math.sqrt(dx * dx + dy * dy);
pt.x = (pt.x - (dx / distance) * (this.range / distance) * this.speed * 5) - ((pt.x - pt.origX) / 2);
pt.y = (pt.y - (dy / distance) * (this.range / distance) * this.speed * 5) - ((pt.y - pt.origY) / 2);
}
}
// --------------
if(this.isDraw) this.draw();
},
getPosition : function(x, y){
var xPos = parseInt(x / this.gridWid);
var yPos = parseInt(y / this.gridHig);
var arrayNum = xPos + yPos * this.gridNums;
var point = this.points[arrayNum];
var vector = {x : point.x - point.origX, y: point.y - point.origY};
return vector;
},
draw : function(){
this.ctx.strokeStyle = 'rgba(0, 0, 0, .1)';
for(var i = 0; i < this.points.length; i++){
var pt = this.points[i];
var dx = (pt.x - pt.origX)/20;
var dy = (pt.y - pt.origY)/20;
this.ctx.beginPath();
this.ctx.moveTo(pt.origX + dx, pt.origY + dy);
this.ctx.lineTo(pt.origX, pt.origY);
this.ctx.stroke();
this.ctx.closePath();
}
}
};
// ---------------------
var delaunay;
var particles;
init();
loop();
function init(){
delaunay = initTriangle(ctx, width, height, 0, 0);
particles = new Particles(ctx);
ctx.fillStyle = 'rgba( 60, 60, 60,.5)';
ctx.fillRect(0, 0, width, height);
particleAnimation = new ParticleAnimation(ctx);
delaunay.addPoints(particles.arr);
prevTime = +new Date;
}
function loop(){
var curTime = +new Date;
var duration = (curTime - prevTime)/1000;
prevTime = curTime;
var alp = .15 + .1 * Math.cos(curTime * .01);
ctx.fillStyle = 'rgba( 60, 60, 60,' + alp + ')';
ctx.fillRect(0, 0, width, height);
particleAnimation.update();
particles.update(duration, particleAnimation);
delaunay.update();
delaunay.drawTriangle();
requestAnimationFrame(loop);
}
canvas.addEventListener("mousemove", function (evt) {
mousePos = {x: evt.clientX, y: evt.clientY};
}, false);
================================================
FILE: app/scripts/1-illusion-of-life/23-undefined.js
================================================
// --------------------------
var width, height, prevTime;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
// ================
var Shape = function( ctx, x, y){
this.ctx = ctx;
this.x = x;
this.y = y;
this.circlrRawArr = [];
var minRad = 30;
var maxRad = Math.min(width, height) / 2 * .9;
for(var i = 0; i < this.circlrRawNum; i++){
var theta = 2 * Math.PI * i / this.circlrRawNum;
var circleRaw = new CircleRaw( ctx, minRad, maxRad, theta);
this.circlrRawArr.push(circleRaw);
}
};
Shape.prototype = {
circlrRawArr : null,
circlrRawNum : 60,
update : function(){
this.ctx.save();
this.ctx.translate(this.x, this.y);
for(var i = 0; i < this.circlrRawNum; i++){
var circleRaw = this.circlrRawArr[i];
circleRaw.update();
}
this.ctx.restore();
}
};
var CircleRaw = function( ctx, minRad, maxRad, theta){
var difRad;
this.ctx = ctx;
this.rad = {min : minRad, max: maxRad};
difRad = (maxRad - minRad);
this.theta = theta;
this.circleArr = [];
for(var i = 0; i < this.rawNum; i++){
var rate = i / this.rawNum;
var curRad = difRad * rate + minRad;
var circle = new Circle( this.ctx, this.theta, curRad, maxRad);
this.circleArr.push(circle);
}
this.count = theta;
}
CircleRaw.prototype = {
rate : 0,
rawNum : 20,
count : 0,
update : function(){
this.count += 0.04;
for( var i = 0; i < this.rawNum; i++){
var circle = this.circleArr[i];
circle.update(this.count);
}
}
}
var Circle = function( ctx, theta, minRad, maxRad ){
this.ctx = ctx;
this.theta = theta;
this.curRad = minRad;
this.minRad = minRad;
this.maxRad = maxRad;
this.difRad = (this.maxRad - this.minRad);
};
Circle.prototype = {
col : '#fff',
rad : 2,
update : function(count){
var rate = ( 1 + Math.sin(count))/2 * .8;
// var otherRate = (1 + Math.cos(count * 2))/2;
// var otherRate2 = (1 + Math.sin(count * 4))/2;
var rad = this.difRad * rate + this.minRad;
var xPos = rad * Math.cos(this.theta);
var yPos = rad * Math.sin(this.theta);
var col = parseInt(100 + 155 * rate);
this.ctx.beginPath();
this.ctx.fillStyle = 'rgb( ' + col + ', ' + col + ', ' + col + ')';
this.ctx.arc( xPos, yPos, this.rad, 0, 2 * Math.PI, false);
this.ctx.fill();
this.ctx.closePath();
}
};
// ================
var shape;
init();
loop();
function init(){
shape = new Shape( ctx, width/2, height/2);
prevTime = +new Date;
}
function loop(){
var curTime = +new Date;
var duration = (curTime - prevTime)/1000;
prevTime = curTime;
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
shape.update();
requestAnimationFrame(loop);
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
================================================
FILE: app/scripts/1-illusion-of-life/3-stage.js
================================================
function backingScale(context) {
if ('devicePixelRatio' in window) {
if (window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
}
return 1;
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var width, height, previousTime;
var side1, side2;
var rect, rect1, rect2;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var scaleFactor = backingScale(ctx);
var Rect = function( ctx, i, x ){
var self = this;
this.ctx = ctx;
this.x = x;
this.y = 0;
this.i = i;
this.y2 = window.innerHeight* scaleFactor - i * this.height3;
this.height2 = this.y2 *0.8;
this.wid = this.width1;
this.hig = this.height1;
setTimeout(function(){
self.verticalAnimation();
}, 500 * this.i);
};
Rect.prototype = {
color : '#fff',
width1 : 50* scaleFactor,
width2 : 90* scaleFactor,
height1 : 50* scaleFactor,
height2 : null,
height3 : 30* scaleFactor,
rad1 : 80 * scaleFactor,
rad2 : 105 * scaleFactor,
y2: null,
duration1 : 0.4,
duration2 : 0.3,
duration3 : 0.2,
lineRate1 : 0,
lineRate2 : 0,
isStage : false,
reset : function(){
if(this.color == '#fff') this.color = '#333';
else this.color = '#fff';
var self = this;
this.y = 0;
this.y2 = window.innerHeight* scaleFactor - this.i * this.height3;
this.height2 = this.y2 *0.8;
this.wid = this.width1;
this.hig = this.height1;
setTimeout(function(){
self.verticalAnimation();
}, 400 * this.i);
},
verticalAnimation : function(){
var self = this;
this.lineRate1 = 0;
this.lineRate2 = 0;
TweenLite.to(this, this.duration1, {hig: this.height2, y: this.height2, ease: Power2.easeIn});
TweenLite.to(this, this.duration2, {y: this.y2, delay: this.duration1 });
TweenLite.to(this, this.duration2, {wid: this.width2, hig : this.height3, delay: this.duration1 });
TweenLite.to(this, this.duration3, {lineRate1 : 1, delay: this.duration1 + this.duration2, ease: Power3.easeInOut });
TweenLite.to(this, this.duration3, {lineRate2 : 1, delay: this.duration1 + this.duration2, ease: Power3.easeOut });
setTimeout(function(){
self.isStage = true;
}, (this.duration1 + this.duration2) * 1000 );
setTimeout(function(){
self.isStage = false;
}, (this.duration1 + this.duration2 + this.duration3) * 1000 );
},
draw : function(){
this.ctx.beginPath();
this.ctx.fillStyle = this.color;
this.ctx.lineWidth = 3;
this.ctx.save();
this.ctx.translate(this.x, this.y);
this.ctx.fillRect(- this.wid / 2, -this.hig, this.wid, this.hig);
this.ctx.closePath();
if(this.isStage){
for(var ii = 0; ii < 7; ii++){
var theta = (190 + 25 * ii)/180 * Math.PI;
var rad1 = (this.rad2 - this.rad1) * this.lineRate1 + this.rad1;
var rad2 = (this.rad2 - this.rad1) * this.lineRate2 + this.rad1;
var x1 = Math.cos(theta) * rad1;
var y1 = Math.sin(theta) * rad1;
var x2 = Math.cos(theta) * rad2;
var y2 = Math.sin(theta) * rad2;
this.ctx.strokeStyle = '#999';
this.ctx.beginPath();
this.ctx.moveTo(x1, y1);
this.ctx.lineTo(x2, y2);
this.ctx.stroke();
this.ctx.closePath();
}
}
this.ctx.restore();
}
};
// ---------------
width = window.innerWidth * scaleFactor;
height = window.innerHeight * scaleFactor;
side1 = 100;
side2 = 180;
var duration1 = .8;
var duration2 = .6;
canvas.width = width;
canvas.height = height;
var isReset = false;
var resetColor = '#333';
var rectWidth = 90 * scaleFactor;
var rects = [];
var rectNumber = parseInt(window.innerHeight / 30) + 1;
init();
loop();
function init(){
for(var i = 0; i < rectNumber; i++){
var rectangle = new Rect( ctx, i, width/2);
rects.push(rectangle);
}
setTimeout(function(){
reset()
}, 500 * rectNumber + 500);
}
function reset(){
isReset = true;
if(resetColor == '#fff') resetColor = '#333';
else resetColor = '#fff';
for(var i = 0; i < rectNumber; i++){
rects[i].reset();
}
setTimeout(function(){
reset()
}, 500 * rectNumber + 1000);
}
function loop(){
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
if(isReset){
ctx.fillStyle = resetColor;
ctx.fillRect((width - rectWidth)/2, 0, rectWidth, height);
}
for(var i = 0; i < rectNumber; i++){
rects[i].draw();
}
requestAnimationFrame(loop);
}
================================================
FILE: app/scripts/1-illusion-of-life/4-anticipation.js
================================================
function backingScale(context) {
if ('devicePixelRatio' in window) {
if (window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
}
return 1;
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var width, height, previousTime;
var side1, side2;
var rect, rect1, rect2;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var scaleFactor = backingScale(ctx);
var Rect = function( ctx, i, x ){
var self = this;
this.ctx = ctx;
this.x = x;
this.y = 0;
this.i = i;
this.originX = x;
this.wid = this.width1;
this.hig = this.height1;
if((i % 2) == 0 ){
setTimeout(function(){
self.anticipationAnimation();
}, 7 * 1000 * this.duration1);
}else{
this.anticipationAnimation();
}
};
Rect.prototype = {
color : '#aaa',
x : null,
y : null,
width1 : 10 * scaleFactor,
width2 : 5 * scaleFactor,
width3 : window.innerWidth / 10 * scaleFactor,
height1 : window.innerHeight* scaleFactor,
originX : null,
y2: null,
duration1 : 0.3,
duration2 : 0.3,
duration3 : 0.3,
lineRate1 : 0,
lineRate2 : 0,
isStage : false,
reset : function(){
if(this.color == '#fff') this.color = '#333';
else this.color = '#fff';
var self = this;
this.y = 0;
this.y2 = window.innerHeight* scaleFactor - this.i * this.height3;
this.height2 = this.y2 *0.8;
this.wid = this.width1;
this.hig = this.height1;
},
anticipationAnimation : function(){
var scaleX1 = 20 * scaleFactor;
var scaleX2 = 20 * scaleFactor;
var scaleX3 = 60 * scaleFactor;
this.originX = this.x;
if(this.originX < 0){
this.x = window.innerWidth * scaleFactor - this.originX;
this.originX = this.x;
}
TweenLite.to(this, this.duration1, { x: this.originX - scaleX1, ease: Power3.easeInOut });
TweenLite.to(this, this.duration1, { x: this.originX + scaleX1, delay: this.duration1, ease: Power3.easeInOut});
TweenLite.to(this, this.duration2, { x: this.originX - scaleX2, delay: this.duration1 * 2, ease: Power3.easeInOut});
TweenLite.to(this, this.duration3, { x: this.originX + scaleX3, delay: this.duration1 * 2 + this.duration2, ease: Power3.easeInOut});
TweenLite.to(this, this.duration3, { wid: this.width2, x: this.originX + scaleX3 + (this.width1 - this.width2)/2 ,delay: this.duration1 * 4});
TweenLite.to(this, this.duration3, { wid: this.width3, x: this.originX + scaleX3 + (this.width1 - this.width3)/2 ,delay: this.duration1 * 5, ease: Power3.easeInOut});
TweenLite.to(this, this.duration3, { wid: this.width1, x: this.originX + scaleX3 + (this.width1 - this.width3) ,delay: this.duration1 * 6, ease: Power3.easeInOut});
var self = this;
setTimeout(function(){
self.anticipationAnimation();
}, this.duration1 * 14 * 1000);
},
verticalAnimation : function(){
var self = this;
this.lineRate1 = 0;
this.lineRate2 = 0;
TweenLite.to(this, this.duration1, {hig: this.height2, y: this.height2, ease: Power2.easeIn});
TweenLite.to(this, this.duration2, {y: this.y2, delay: this.duration1 });
TweenLite.to(this, this.duration2, {wid: this.width2, hig : this.height3, delay: this.duration1 });
TweenLite.to(this, this.duration3, {lineRate1 : 1, delay: this.duration1 + this.duration2, ease: Power3.easeInOut });
TweenLite.to(this, this.duration3, {lineRate2 : 1, delay: this.duration1 + this.duration2, ease: Power3.easeOut });
setTimeout(function(){
self.isStage = true;
}, (this.duration1 + this.duration2) * 1000 );
setTimeout(function(){
self.isStage = false;
}, (this.duration1 + this.duration2 + this.duration3) * 1000 );
},
draw : function(){
this.ctx.beginPath();
this.ctx.fillStyle = this.color;
this.ctx.lineWidth = 3;
this.ctx.save();
this.ctx.translate(this.x, this.y);
this.ctx.fillRect(- this.wid / 2, 0, this.wid, this.hig);
this.ctx.closePath();
if(this.isStage){
for(var ii = 0; ii < 7; ii++){
var theta = (190 + 25 * ii)/180 * Math.PI;
var rad1 = (this.rad2 - this.rad1) * this.lineRate1 + this.rad1;
var rad2 = (this.rad2 - this.rad1) * this.lineRate2 + this.rad1;
var x1 = Math.cos(theta) * rad1;
var y1 = Math.sin(theta) * rad1;
var x2 = Math.cos(theta) * rad2;
var y2 = Math.sin(theta) * rad2;
this.ctx.strokeStyle = '#999';
this.ctx.beginPath();
this.ctx.moveTo(x1, y1);
this.ctx.lineTo(x2, y2);
this.ctx.stroke();
this.ctx.closePath();
}
}
this.ctx.restore();
}
};
// ---------------
width = window.innerWidth * scaleFactor;
height = window.innerHeight * scaleFactor;
side1 = 100;
side2 = 180;
var duration1 = .8;
var duration2 = .6;
canvas.width = width;
canvas.height = height;
var rectangle;
var isReset = false;
var resetColor = '#333';
var rectWidth = 90 * scaleFactor;
var rects = [];
var rectNumber = parseInt(window.innerHeight / 30) + 1;
var num = 40;
init();
loop();
function init(){
for(var i = 0; i < num; i++){
rectangle = new Rect( ctx, i, width * (i + 1) / (num + 1));
rects.push(rectangle);
}
}
function loop(){
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
for(var i = 0; i < num; i++){
rects[i].draw();
}
requestAnimationFrame(loop);
}
================================================
FILE: app/scripts/1-illusion-of-life/5-pose-to-pos.js
================================================
function backingScale(context) {
if ('devicePixelRatio' in window) {
if (window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
}
return 1;
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var width, height, previousTime;
var side1, side2;
var rect, rect1, rect2;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var scaleFactor = backingScale(ctx);
var Form = function( ctx, x, y, rad ){
_.bindAll(this, 'onUpdateTween', 'onCompleteTween');
this.ctx = ctx;
this.x = x;
this.y = y;
this.rad = rad;
this.triangle();
this.rect();
this.circle();
this.formType = {
'triangle' : this.trianglePts,
'rectangle' : this.rectanglePts,
'circle' : this.circlePts
};
this.curType = 'circle';
for(var i = 0; i < this.ptNumber; i++){
this.pts[i] = {x: this.x, y: this.y}
}
};
Form.prototype = {
color : '#fff',
ptNumber : 120,
pts : [],
oldPts : [],
trianglePts : [],
rectanglePts : [],
circlePts : [],
rate : 0,
transform : function(toType){
this.rate = 0;
this.toType = toType;
TweenLite.to(this,.6, { rate: 1, ease: Power2.easeInOut, onComplete: this.onCompleteTween, onUpdate: this.onUpdateTween });
},
onUpdateTween : function(){
for(var i = 0;i < this.ptNumber; i++){
this.pts[i].x = ( 1- this.rate) * this.formType[this.curType][i].x + this.rate * this.formType[this.toType][i].x;
this.pts[i].y = ( 1- this.rate) * this.formType[this.curType][i].y + this.rate * this.formType[this.toType][i].y;
}
},
onCompleteTween : function(){
for(var i = 0;i < this.ptNumber; i++){
this.pts[i].x = this.formType[this.toType][i].x;
this.pts[i].y = this.formType[this.toType][i].y;
}
this.curType = this.toType;
},
triangle : function(){
var x, y, rate, pt;
var pt0 = { x : this.rad * Math.cos(30 / 180 * Math.PI), y : this.rad * Math.sin(30 / 180 * Math.PI)};
var pt1 = { x : this.rad * Math.cos(150 / 180 * Math.PI), y : this.rad * Math.sin(150 / 180 * Math.PI)};
var pt2 = { x : this.rad * Math.cos(270 / 180 * Math.PI), y : this.rad * Math.sin(270/ 180 * Math.PI)};
for(var i = 0; i < this.ptNumber; i++){
if(i < this.ptNumber / 6){
rate = .5 + i / (this.ptNumber / 6) * .5;
x = pt0.x * (1 - rate) + pt1.x * rate;
y = pt0.y * (1 - rate) + pt1.y * rate;
}else if(i >= this.ptNumber /6 && i < this.ptNumber / 2){
rate = (i - this.ptNumber/6) / (this.ptNumber / 3);
x = pt1.x * (1 - rate) + pt2.x * rate;
y = pt1.y * (1 - rate) + pt2.y * rate;
}else if(i >= this.ptNumber /2 && i < this.ptNumber * 5 /6){
rate = (i - this.ptNumber/2) / (this.ptNumber / 3);
x = pt2.x * (1 - rate) + pt0.x * rate;
y = pt2.y * (1 - rate) + pt0.y * rate;
}else{
rate = (i - this.ptNumber * 5/6) / (this.ptNumber / 3);
x = pt0.x * (1 - rate) + pt1.x * rate;
y = pt0.y * (1 - rate) + pt1.y * rate;
}
pt = {x : x + this.x, y: y + this.y};
this.trianglePts.push(pt);
}
},
rect : function(){
var theta, pt;
var side = this.rad * Math.cos(45 / 180 * Math.PI);
for(var i = 0; i < this.ptNumber; i++){
if(i < this.ptNumber / 8){
pt = {x : side , y : side * i / (this.ptNumber / 8) };
}else if(i >= this.ptNumber/8 && i < this.ptNumber * 3 / 8){
pt = {x : side - side * (i - this.ptNumber / 8) / (this.ptNumber / 8), y : side };
}else if( i >= this.ptNumber * 3 / 8 && i < this.ptNumber * 5 / 8) {
pt = {x : -side , y : side - side * (i - 3 * this.ptNumber / 8) / (this.ptNumber / 8) };
}else if( i >= this.ptNumber * 5 / 8 && i < this.ptNumber * 7 / 8) {
pt = {x :-side + side * (i - 5 * this.ptNumber / 8) / (this.ptNumber / 8), y: -side};
}else{
pt = {x : side, y : -side + side * (i - 7 * this.ptNumber / 8) / (this.ptNumber / 8)};
}
pt.x += this.x;
pt.y += this.y;
this.rectanglePts.push(pt);
}
},
circle : function(){
var theta, pt;
this.nextPts = [];
for(var i = 0; i < this.ptNumber; i++){
theta = i / this.ptNumber * 2 * Math.PI;
pt = {x : this.rad * Math.cos(theta) + this.x, y : this.rad * Math.sin(theta) + this.y};
this.circlePts[i] = pt;
}
},
draw : function(){
this.ctx.fillStyle = this.color;
this.ctx.beginPath();
this.ctx.moveTo(this.pts[0].x, this.pts[0].y);
for(var i = 1; i < this.pts.length; i++){
this.ctx.lineTo(this.pts[i].x, this.pts[i].y);
}
this.ctx.fill();
this.ctx.closePath();
},
};
// ---------------
width = window.innerWidth * scaleFactor;
height = window.innerHeight * scaleFactor;
side1 = 100;
side2 = 180;
var duration1 = .8;
var duration2 = .6;
var types = ['triangle','rectangle', 'circle'];
canvas.width = width;
canvas.height = height;
var form;
init();
loop();
function init(){
form = new Form(ctx, width / 2, height / 2, Math.sqrt( width* width /20+ height * height / 20));
var nextType = form.curType;
while(nextType == form.curType){
nextType = types[parseInt(types.length * Math.random())];
}
console.log(nextType);
form.transform(nextType);
setInterval(function(){
var nextType = form.curType;
while(nextType == form.curType){
nextType = types[parseInt(types.length * Math.random())];
}
form.transform(nextType);
}, 800);
}
function loop(){
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);
form.draw();
requestAnimationFrame(loop);
}
================================================
FILE: app/scripts/1-illusion-of-life/6-pose-to-pose.js
================================================
function backingScale(context) {
if ('devicePixelRatio' in window) {
if (window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
}
return 1;
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var width, height, previousTime;
var side1, side2;
var rect, rect1, rect2;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var scaleFactor = backingScale(ctx);
var Forms = function(ctx, x, y){
_.bindAll(this, 'onUpdateInitTween', 'onCompleteInitTween', 'onUpdateIncrementTween', 'onCompleteIncrementTween', 'increment');
this.MAX_RAD = Math.min(window.innerWidth / 3, window.innerHeight / 3);
this.ctx = ctx;
this.x = x;
this.y = y;
this.currentNumber = 0;
this.pointNumber = 288 * 3;
this.numberArr = [1, 4, 9, 16];
this.isTransfrom = false;
this.initialize();
this.pts = [];
//types = ['triangle','rectangle', 'circle'];
this.formType = {
'triangle' : this.trianglePts,
'rectangle' : this.rectanglePts,
'circle' : this.circlePts
};
this.currentType = ['circle'];
for(var i = 0; i < this.pointNumber; i++){
this.pts[i] = {x: this.x, y: this.y}
};
};
Forms.prototype = {
color : '#fff',
trianglePts : [],
rectanglePts : [],
circlePts : [],
initialize : function(){
this.initializeCircle();
this.initializeAnimation();
},
initializeCircle : function(){
var side, number, pointNumber, rad, centerPoint;
var points, theta, pt;
var arr = this.numberArr;
for(var i = 0; i < arr.length; i++){
number = this.numberArr[i];
side = Math.sqrt(arr[i]);
rad = this.MAX_RAD / side;
pointNumber = this.pointNumber / side;
// 1 2 3 4
points = [];
console.log(this.x);
console.log(side);
for(var x = 0; x < side; x++){
for(var y = 0; y < side; y++){
var center = (side - 1)/ 2;
centerPoint = { x : this.x + 2 * rad * (x - center), y : this.y + 2 * rad * (y - center) };
for(var j = 0; j < (this.pointNumber / number); j++){
theta = j / (this.pointNumber / number) * 2 * Math.PI;
pt = {x : rad * Math.cos(theta) + centerPoint.x, y : rad * Math.sin(theta) + centerPoint.y};
points.push(pt);
}
}
}
this.circlePts.push(points);
}
},
initializeAnimation : function(){
this.rate = 01
this.toType = 'circle';
TweenLite.to(this,.6, { rate: 0, ease: Power2.easeInOut, onComplete: this.onCompleteInitTween, onUpdate: this.onUpdateInitTween });
},
onUpdateInitTween : function(){
for(var i = 0;i < this.pointNumber; i++){
this.pts[i].x = (1-this.rate) * this.formType[this.toType][this.currentNumber][i].x + (this.rate) * this.x;
this.pts[i].y = (1-this.rate) * this.formType[this.toType][this.currentNumber][i].y + (this.rate) * this.y;
}
},
onCompleteInitTween : function(){
for(var i = 0;i < this.pointNumber; i++){
this.pts[i].x = this.formType[this.toType][this.currentNumber][i].x;
this.pts[i].y = this.formType[this.toType][this.currentNumber][i].y;
}
this.curType = this.toType;
var self = this;
setTimeout(function(){
self.increment();
}, 300);
},
increment : function(){
this.currentNumber = (this.currentNumber + 1) % this.numberArr.length ;
this.isTransfrom = true;
this.rate = 0;
TweenLite.to(this, .6, { rate: 1, ease: Power2.easeInOut, onComplete: this.onCompleteIncrementTween, onUpdate: this.onUpdateIncrementTween });
},
onUpdateIncrementTween : function(){
var prevNumber = this.currentNumber - 1;
if(prevNumber < 0) prevNumber += this.numberArr.length;
for(var i = 0;i < this.pointNumber; i++){
this.pts[i].x = this.rate * this.formType[this.toType][this.currentNumber][i].x + (1 - this.rate) * this.formType[this.toType][prevNumber][i].x;
this.pts[i].y = this.rate * this.formType[this.toType][this.currentNumber][i].y + (1 - this.rate) * this.formType[this.toType][prevNumber][i].y;
}
},
onCompleteIncrementTween : function(){
this.isTransfrom = false;
for(var i = 0;i < this.pointNumber; i++){
this.pts[i].x = this.formType[this.toType][this.currentNumber][i].x;
this.pts[i].y = this.formType[this.toType][this.currentNumber][i].y;
}
TweenLite.to(this, .6, { rate: 0, ease: Power2.
gitextract_de7fdsmn/
├── .bowerrc
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .jshintrc
├── Gruntfile.js
├── README.md
├── app/
│ ├── .htaccess
│ ├── 404.html
│ ├── gl-html/
│ │ ├── gl00.html
│ │ ├── gl01.html
│ │ ├── gl57.html
│ │ ├── three58.html
│ │ └── three64.html
│ ├── gl-index.html
│ ├── index.html
│ ├── json/
│ │ └── awwwrd.js
│ ├── robots.txt
│ ├── scripts/
│ │ ├── 0-components/
│ │ │ ├── boilerplate.js
│ │ │ ├── data.js
│ │ │ ├── output.js
│ │ │ └── path.js
│ │ ├── 1-illusion-of-life/
│ │ │ ├── 1-squash.js
│ │ │ ├── 10-animation.js
│ │ │ ├── 11-animation-2.js
│ │ │ ├── 12-secondary-action.js
│ │ │ ├── 13-secondary-action.js
│ │ │ ├── 14-undefined.js
│ │ │ ├── 15-undefined.js
│ │ │ ├── 16-undefined.js
│ │ │ ├── 17-undefined.js
│ │ │ ├── 18-undefined.js
│ │ │ ├── 19-undefined.js
│ │ │ ├── 2-squash.js
│ │ │ ├── 20-undefined.js
│ │ │ ├── 21-undefined.js
│ │ │ ├── 22-sine-cos.js
│ │ │ ├── 22-undefined.js
│ │ │ ├── 23-undefined.js
│ │ │ ├── 3-stage.js
│ │ │ ├── 4-anticipation.js
│ │ │ ├── 5-pose-to-pos.js
│ │ │ ├── 6-pose-to-pose.js
│ │ │ ├── 7-pose-to-pose.js
│ │ │ ├── 8-arcs.js
│ │ │ └── 9-arcs.js
│ │ ├── 2-numbers/
│ │ │ ├── 24-number0.js
│ │ │ └── 25-number0.js
│ │ ├── 3-algorithm/
│ │ │ ├── -1-43-undefined-botsu.js
│ │ │ ├── 33-bubble-sort.js
│ │ │ ├── 34-search.js
│ │ │ ├── 35-undefined.js
│ │ │ ├── 36-undefined.js
│ │ │ ├── 37-undefined.js
│ │ │ ├── 38-undefined.js
│ │ │ ├── 39-undefined.js
│ │ │ ├── 40-undefined.js
│ │ │ ├── 41-undefined.js
│ │ │ └── 42-undefined.js
│ │ ├── 4-webgl/
│ │ │ ├── 0-test-three-js-example.js
│ │ │ ├── 1-test-three-js-example.js
│ │ │ ├── 2-test-three-js-example.js
│ │ │ ├── 48-three-js-shader.js
│ │ │ ├── 49-three-js.js
│ │ │ ├── 50-three-js-with-shader.js
│ │ │ ├── 55-gl.js
│ │ │ ├── 56-gl.js
│ │ │ ├── 57-gl.js
│ │ │ ├── 58-three-js.js
│ │ │ ├── 64-three-js.js
│ │ │ ├── 99-00-gl-learning.js
│ │ │ └── vendors/
│ │ │ └── minMatrix.js
│ │ ├── 5-loop/
│ │ │ ├── 43-loop.js
│ │ │ ├── 44-loop.js
│ │ │ ├── 45-loop.js
│ │ │ ├── 46-loop.js
│ │ │ ├── 47-loop.js
│ │ │ └── 51-loop.js
│ │ ├── 6-letters/
│ │ │ ├── 52-letters.js
│ │ │ ├── 53-letters.js
│ │ │ └── 54-letter.js
│ │ ├── 99-hobby/
│ │ │ ├── 26-undefined.js
│ │ │ ├── 27-simple-boid.js
│ │ │ ├── 28-02-combination.js
│ │ │ ├── 28-combination.js
│ │ │ ├── 30-mouse-boid.js
│ │ │ ├── 32-boid-collection.js
│ │ │ ├── 99-01-canvas-letter.js
│ │ │ ├── 99-02-shader-example.js
│ │ │ ├── 99-03-circle-drawing.js
│ │ │ ├── 99-04-flag-animation.js
│ │ │ └── 99-05-color-draw.js
│ │ ├── helpers/
│ │ │ ├── boilterplate.js
│ │ │ ├── colorConverter.js
│ │ │ ├── keyEvents.js
│ │ │ └── svg-parse.js
│ │ ├── main.js
│ │ └── ref/
│ │ └── camera.js
│ ├── styles/
│ │ └── main.scss
│ └── three-js-shader-sample.html
├── bower.json
├── package.json
└── test/
├── index.html
├── lib/
│ ├── chai.js
│ ├── expect.js
│ └── mocha/
│ ├── mocha.css
│ └── mocha.js
└── spec/
└── test.js
SYMBOL INDEX (395 symbols across 77 files)
FILE: app/scripts/0-components/boilerplate.js
function init (line 20) | function init(){
function loop (line 25) | function loop(){
FILE: app/scripts/0-components/path.js
function forEach (line 4) | function forEach(array, fn){
FILE: app/scripts/1-illusion-of-life/1-squash.js
function backingScale (line 1) | function backingScale(context) {
function init (line 85) | function init(){
function loop (line 93) | function loop(){
FILE: app/scripts/1-illusion-of-life/10-animation.js
function backingScale (line 1) | function backingScale(context) {
function init (line 100) | function init(){
function loop (line 104) | function loop(){
FILE: app/scripts/1-illusion-of-life/11-animation-2.js
function backingScale (line 1) | function backingScale(context) {
function init (line 177) | function init(){
function loop (line 192) | function loop(){
FILE: app/scripts/1-illusion-of-life/12-secondary-action.js
function init (line 146) | function init(){
function loop (line 150) | function loop(){
FILE: app/scripts/1-illusion-of-life/13-secondary-action.js
function init (line 352) | function init(){
function loop (line 360) | function loop(){
FILE: app/scripts/1-illusion-of-life/14-undefined.js
function init (line 221) | function init(){
function loop (line 225) | function loop(){
FILE: app/scripts/1-illusion-of-life/15-undefined.js
function init (line 188) | function init(){
function loop (line 218) | function loop(){
FILE: app/scripts/1-illusion-of-life/16-undefined.js
function init (line 251) | function init(){
function loop (line 256) | function loop(){
FILE: app/scripts/1-illusion-of-life/17-undefined.js
function init (line 153) | function init(){
function loop (line 159) | function loop(){
FILE: app/scripts/1-illusion-of-life/18-undefined.js
function init (line 227) | function init(){
function loop (line 233) | function loop(){
FILE: app/scripts/1-illusion-of-life/19-undefined.js
function init (line 194) | function init(){
function loop (line 199) | function loop(){
FILE: app/scripts/1-illusion-of-life/2-squash.js
function backingScale (line 1) | function backingScale(context) {
function init (line 62) | function init(){
function onTween1Update (line 79) | function onTween1Update(){
function onTween1Complete (line 88) | function onTween1Complete(){
function onTween2Complete (line 99) | function onTween2Complete(){
FILE: app/scripts/1-illusion-of-life/20-undefined.js
function init (line 222) | function init(){
function loop (line 228) | function loop(){
FILE: app/scripts/1-illusion-of-life/21-undefined.js
function init (line 299) | function init(){
function loop (line 305) | function loop(){
FILE: app/scripts/1-illusion-of-life/22-sine-cos.js
function init (line 101) | function init(){
function loop (line 106) | function loop(){
FILE: app/scripts/1-illusion-of-life/22-undefined.js
function distanceBetweenPoints (line 90) | function distanceBetweenPoints(pt1, pt2){
function distanceBetweenPointAndCircle (line 97) | function distanceBetweenPointAndCircle(pt, circle){
function judgeBetweenDistance (line 104) | function judgeBetweenDistance(_pt, _circle) {
function calTriangles (line 116) | function calTriangles( _delaunayDataSet, num){
function calculationCircle (line 189) | function calculationCircle(pt01, pt02, pt03) {
function removeTriangle (line 210) | function removeTriangle( _delaunayDataSet, tempVertexNum){
function initTriangle (line 268) | function initTriangle(context, recWid, recHig, recTop, recLeft){
function init (line 603) | function init(){
function loop (line 616) | function loop(){
FILE: app/scripts/1-illusion-of-life/23-undefined.js
function init (line 125) | function init(){
function loop (line 131) | function loop(){
FILE: app/scripts/1-illusion-of-life/3-stage.js
function backingScale (line 1) | function backingScale(context) {
function init (line 168) | function init(){
function reset (line 180) | function reset(){
function loop (line 196) | function loop(){
FILE: app/scripts/1-illusion-of-life/4-anticipation.js
function backingScale (line 1) | function backingScale(context) {
function init (line 201) | function init(){
function loop (line 210) | function loop(){
FILE: app/scripts/1-illusion-of-life/5-pose-to-pos.js
function backingScale (line 1) | function backingScale(context) {
function init (line 202) | function init(){
function loop (line 226) | function loop(){
FILE: app/scripts/1-illusion-of-life/6-pose-to-pose.js
function backingScale (line 1) | function backingScale(context) {
function init (line 240) | function init(){
function loop (line 247) | function loop(){
FILE: app/scripts/1-illusion-of-life/7-pose-to-pose.js
function backingScale (line 1) | function backingScale(context) {
function init (line 265) | function init(){
function loop (line 289) | function loop(){
FILE: app/scripts/1-illusion-of-life/8-arcs.js
function backingScale (line 1) | function backingScale(context) {
function init (line 120) | function init(){
function loop (line 136) | function loop(){
FILE: app/scripts/1-illusion-of-life/9-arcs.js
function backingScale (line 1) | function backingScale(context) {
function init (line 161) | function init(){
function loop (line 174) | function loop(){
FILE: app/scripts/2-numbers/24-number0.js
function init (line 240) | function init(){
function loop (line 250) | function loop(){
FILE: app/scripts/2-numbers/25-number0.js
function init (line 36) | function init(){
function loop (line 42) | function loop(){
FILE: app/scripts/3-algorithm/-1-43-undefined-botsu.js
function init (line 189) | function init(){
function loop (line 205) | function loop(){
FILE: app/scripts/3-algorithm/33-bubble-sort.js
function init (line 185) | function init(){
function loop (line 194) | function loop(){
FILE: app/scripts/3-algorithm/34-search.js
function init (line 170) | function init(){
function loop (line 181) | function loop(){
FILE: app/scripts/3-algorithm/35-undefined.js
function init (line 295) | function init(){
function loop (line 302) | function loop(){
function soundLoop (line 314) | function soundLoop(){
FILE: app/scripts/3-algorithm/36-undefined.js
function init (line 271) | function init(){
function loop (line 277) | function loop(){
function soundLoop (line 284) | function soundLoop(){
FILE: app/scripts/3-algorithm/37-undefined.js
function init (line 99) | function init(){
function loop (line 106) | function loop(){
function soundLoop (line 113) | function soundLoop(){
FILE: app/scripts/3-algorithm/38-undefined.js
function init (line 138) | function init(){
function loop (line 148) | function loop(){
function clear (line 162) | function clear(){
FILE: app/scripts/3-algorithm/39-undefined.js
function init (line 333) | function init(){
function loop (line 342) | function loop(){
function timer (line 368) | function timer(){
function movement (line 375) | function movement(){
FILE: app/scripts/3-algorithm/40-undefined.js
function init (line 32) | function init(){
function timer (line 55) | function timer(){
function loop (line 64) | function loop(){
FILE: app/scripts/3-algorithm/41-undefined.js
function init (line 74) | function init(){
function loop (line 83) | function loop(){
FILE: app/scripts/3-algorithm/42-undefined.js
function init (line 239) | function init(){
function loop (line 245) | function loop(){
FILE: app/scripts/4-webgl/0-test-three-js-example.js
function init (line 16) | function init() {
function onWindowResize (line 91) | function onWindowResize() {
function animate (line 102) | function animate() {
function render (line 111) | function render() {
FILE: app/scripts/4-webgl/1-test-three-js-example.js
function init (line 14) | function init() {
function onWindowResize (line 192) | function onWindowResize() {
function animate (line 203) | function animate() {
function render (line 213) | function render() {
FILE: app/scripts/4-webgl/2-test-three-js-example.js
function init (line 16) | function init() {
function onWindowResize (line 122) | function onWindowResize() {
function onDocumentMouseMove (line 134) | function onDocumentMouseMove( event ) {
function animate (line 143) | function animate() {
function render (line 152) | function render() {
FILE: app/scripts/4-webgl/48-three-js-shader.js
function init (line 119) | function init() {
function updateClear (line 306) | function updateClear(){
function updateScott (line 312) | function updateScott(){
function setCanvasTexture (line 327) | function setCanvasTexture(){
function setText (line 334) | function setText(){
function loop (line 376) | function loop(time) {
FILE: app/scripts/4-webgl/49-three-js.js
function init (line 128) | function init(){
function loop (line 149) | function loop(){
FILE: app/scripts/4-webgl/50-three-js-with-shader.js
function onComplete1 (line 31) | function onComplete1(){
function onComplete2 (line 35) | function onComplete2(){
function init (line 47) | function init(){
function loop (line 84) | function loop(){
function setText (line 93) | function setText(){
function setCanvasTexture (line 175) | function setCanvasTexture(){
FILE: app/scripts/4-webgl/55-gl.js
function backingScale (line 4) | function backingScale(context) {
function Target (line 41) | function Target(rad){
function loadScene (line 66) | function loadScene() {
function animate (line 200) | function animate() {
function drawScene (line 206) | function drawScene() {
function setup (line 222) | function setup() {
function draw (line 227) | function draw() {
function setup00 (line 247) | function setup00() {
function draw00 (line 294) | function draw00(){
function timer (line 338) | function timer() {
FILE: app/scripts/4-webgl/56-gl.js
function backingScale (line 4) | function backingScale(context) {
function Target (line 42) | function Target(rad){
function onChangeTimer (line 120) | function onChangeTimer(){
function backTimer (line 133) | function backTimer(){
function loadScene (line 192) | function loadScene() {
function animate (line 326) | function animate() {
function drawScene (line 332) | function drawScene() {
function setup (line 348) | function setup() {
function draw (line 355) | function draw() {
function setup00 (line 375) | function setup00() {
function draw00 (line 420) | function draw00(){
function timer (line 463) | function timer() {
FILE: app/scripts/4-webgl/57-gl.js
function loadScene (line 32) | function loadScene() {
function animate (line 160) | function animate() {
function drawScene (line 166) | function drawScene() {
function setup (line 187) | function setup() {
function draw (line 275) | function draw() {
function timer (line 339) | function timer() {
FILE: app/scripts/4-webgl/58-three-js.js
function init (line 17) | function init() {
function animate (line 45) | function animate() {
function onEscapeDonwHandler (line 66) | function onEscapeDonwHandler(){
FILE: app/scripts/4-webgl/64-three-js.js
function init (line 24) | function init() {
function onWindowResize (line 120) | function onWindowResize() {
function onDocumentMouseDown (line 134) | function onDocumentMouseDown(event) {
function onDocumentMouseMove (line 147) | function onDocumentMouseMove(event) {
function onDocumentMouseUp (line 155) | function onDocumentMouseUp(event) {
function onDocumentMouseOut (line 163) | function onDocumentMouseOut(event) {
function onDocumentTouchStart (line 171) | function onDocumentTouchStart(event) {
function onDocumentTouchMove (line 184) | function onDocumentTouchMove(event) {
function animate (line 199) | function animate() {
function render (line 212) | function render() {
function randomGenerator (line 218) | function randomGenerator(){
FILE: app/scripts/4-webgl/99-00-gl-learning.js
function create_shader (line 83) | function create_shader(id){
function create_program (line 128) | function create_program(vs, fs){
function create_vbo (line 155) | function create_vbo(data){
FILE: app/scripts/4-webgl/vendors/minMatrix.js
function matIV (line 7) | function matIV(){
FILE: app/scripts/5-loop/43-loop.js
function init (line 200) | function init(){
function addNew (line 222) | function addNew(){
function onUpdateResetHandler (line 271) | function onUpdateResetHandler(){
function onCompleteResetHandler (line 278) | function onCompleteResetHandler(){
function loop (line 288) | function loop() {
function normalLoop (line 296) | function normalLoop(){
function resetLoop (line 345) | function resetLoop(){
FILE: app/scripts/5-loop/44-loop.js
function init (line 124) | function init(){
function loop (line 130) | function loop(){
FILE: app/scripts/5-loop/45-loop.js
function init (line 380) | function init() {
function loop (line 384) | function loop() {
FILE: app/scripts/5-loop/46-loop.js
function init (line 192) | function init(){
function loop (line 211) | function loop(){
FILE: app/scripts/5-loop/47-loop.js
function init (line 280) | function init(){
function loop (line 286) | function loop(){
FILE: app/scripts/5-loop/51-loop.js
function init (line 267) | function init(){
function timer (line 273) | function timer(){
function loop (line 278) | function loop(){
FILE: app/scripts/6-letters/52-letters.js
function init (line 107) | function init(){
function loop (line 119) | function loop(){
function timer (line 161) | function timer(){
function onUpdateTweenHandler (line 168) | function onUpdateTweenHandler(){
function onCompleteTwennHandler (line 179) | function onCompleteTwennHandler(){
FILE: app/scripts/6-letters/53-letters.js
function init (line 144) | function init(){
function loop (line 157) | function loop(){
function timer (line 201) | function timer(){
function onUpdateTweenHandler (line 208) | function onUpdateTweenHandler(){
function onCompleteTwennHandler (line 219) | function onCompleteTwennHandler(){
FILE: app/scripts/6-letters/54-letter.js
function init (line 313) | function init() {
function loop (line 321) | function loop() {
function timer (line 376) | function timer() {
function onUpdateTweenHandler (line 383) | function onUpdateTweenHandler() {
function onCompleteTwennHandler (line 394) | function onCompleteTwennHandler() {
FILE: app/scripts/99-hobby/26-undefined.js
function init (line 122) | function init(){
function createPattern (line 131) | function createPattern(){
function updatePattern (line 153) | function updatePattern(dt){
function loop (line 174) | function loop(){
FILE: app/scripts/99-hobby/27-simple-boid.js
function init (line 57) | function init(){
function onRandomChange (line 69) | function onRandomChange(){
function loop (line 89) | function loop(){
function rule1 (line 170) | function rule1(index){
function rule2 (line 188) | function rule2(index){
function rule3 (line 198) | function rule3(index){
function getDistance (line 214) | function getDistance(p1, p2){
FILE: app/scripts/99-hobby/28-02-combination.js
function Particle (line 9) | function Particle(x, y) {
function Particles (line 92) | function Particles(particles, context) {
function getMousePos (line 118) | function getMousePos(canvas, evt) {
function init (line 157) | function init() {
function loop (line 185) | function loop(){
function rule1 (line 245) | function rule1(index){
function rule2 (line 263) | function rule2(index){
function rule3 (line 273) | function rule3(index){
function getDistance (line 289) | function getDistance(p1, p2){
FILE: app/scripts/99-hobby/28-combination.js
function init (line 484) | function init(){
function loop (line 492) | function loop(){
FILE: app/scripts/99-hobby/30-mouse-boid.js
function onLoad (line 66) | function onLoad(){
function init (line 76) | function init(){
function loop (line 82) | function loop(){
function showText (line 146) | function showText(){
function removeText (line 157) | function removeText(){
function loopText (line 169) | function loopText(){
function fillText (line 198) | function fillText(){
function onMouseMove (line 204) | function onMouseMove(event){
function rule1 (line 238) | function rule1(index){
function rule2 (line 256) | function rule2(index){
function rule3 (line 266) | function rule3(index){
function getDistance (line 282) | function getDistance(p1, p2){
FILE: app/scripts/99-hobby/32-boid-collection.js
function init (line 65) | function init(){
function shuffle (line 105) | function shuffle(){
function loop (line 155) | function loop(){
function rule1 (line 250) | function rule1(index1, index2){
function rule2 (line 270) | function rule2(index1, index2){
function rule3 (line 284) | function rule3(index1, index2){
function getDistance (line 303) | function getDistance(p1, p2){
FILE: app/scripts/99-hobby/99-01-canvas-letter.js
function init (line 20) | function init(){
function loop (line 26) | function loop(){
FILE: app/scripts/99-hobby/99-02-shader-example.js
function createCanvas (line 25) | function createCanvas(){
function init (line 59) | function init(){
function loop (line 125) | function loop(){
function loopCanvas (line 135) | function loopCanvas(){
FILE: app/scripts/99-hobby/99-03-circle-drawing.js
function init (line 137) | function init(){
function circleAnimationDone (line 153) | function circleAnimationDone(){
function loop (line 161) | function loop(){
FILE: app/scripts/99-hobby/99-04-flag-animation.js
function init (line 22) | function init(){
function loop (line 27) | function loop(){
FILE: app/scripts/99-hobby/99-05-color-draw.js
function addBall (line 199) | function addBall() {
function addOnlyBall (line 224) | function addOnlyBall() {
function init (line 389) | function init() {
function loop (line 400) | function loop() {
function loopBall (line 421) | function loopBall() {
FILE: app/scripts/helpers/boilterplate.js
function backingScale (line 1) | function backingScale(context) {
function init (line 27) | function init(){
function loop (line 33) | function loop(){
FILE: app/scripts/helpers/colorConverter.js
function HSVtoRGB (line 1) | function HSVtoRGB(h, s, v) {
FILE: app/scripts/helpers/svg-parse.js
function parsePathData (line 19) | function parsePathData(pathData)
FILE: test/lib/chai.js
function require (line 13) | function require(p) {
function Assertion (line 177) | function Assertion (obj, msg, stack) {
function an (line 373) | function an(type, msg) {
function includeChainingBehavior (line 409) | function includeChainingBehavior () {
function include (line 413) | function include (val, msg) {
function checkArguments (line 601) | function checkArguments () {
function assertEqual (line 636) | function assertEqual (val, msg) {
function assertAbove (line 706) | function assertAbove (n, msg) {
function assertLeast (line 754) | function assertLeast (n, msg) {
function assertBelow (line 802) | function assertBelow (n, msg) {
function assertMost (line 850) | function assertMost (n, msg) {
function assertInstanceOf (line 936) | function assertInstanceOf (constructor, msg) {
function assertOwnProperty (line 1058) | function assertOwnProperty (name, msg) {
function assertLengthChain (line 1097) | function assertLengthChain () {
function assertLength (line 1101) | function assertLength (n, msg) {
function assertKeys (line 1184) | function assertKeys (keys) {
function assertThrows (line 1271) | function assertThrows (constructor, errMsg, msg) {
function AssertionError (line 1496) | function AssertionError (options) {
function loadShould (line 2546) | function loadShould () {
function _deepEqual (line 2791) | function _deepEqual(actual, expected, memos) {
function isUndefinedOrNull (line 2827) | function isUndefinedOrNull(value) {
function isArguments (line 2831) | function isArguments(object) {
function objEquiv (line 2835) | function objEquiv(a, b, memos) {
function parsePath (line 3098) | function parsePath (path) {
function _getPathValue (line 3123) | function _getPathValue (parsed, obj) {
function inspect (line 3268) | function inspect(obj, showHidden, depth, colors) {
function formatValue (line 3307) | function formatValue(ctx, value, recurseTimes) {
function formatPrimitive (line 3415) | function formatPrimitive(ctx, value) {
function formatError (line 3439) | function formatError(value) {
function formatArray (line 3444) | function formatArray(ctx, value, recurseTimes, visibleKeys, keys) {
function formatProperty (line 3464) | function formatProperty(ctx, value, recurseTimes, visibleKeys, key, arra...
function reduceToSingleString (line 3524) | function reduceToSingleString(output, base, braces) {
function isArray (line 3544) | function isArray(ar) {
function isRegExp (line 3549) | function isRegExp(re) {
function isDate (line 3553) | function isDate(d) {
function isError (line 3557) | function isError(e) {
function objectToString (line 3561) | function objectToString(o) {
FILE: test/lib/mocha/mocha.js
function require (line 6) | function require(p){
function clonePath (line 78) | function clonePath(path) {
function removeEmpty (line 81) | function removeEmpty(array) {
function escapeHTML (line 90) | function escapeHTML(s) {
function contextLines (line 251) | function contextLines(lines) {
function eofNL (line 254) | function eofNL(curRange, i, current) {
function isArray (line 363) | function isArray(obj) {
function EventEmitter (line 373) | function EventEmitter(){}
function on (line 408) | function on () {
function Progress (line 552) | function Progress() {
function Context (line 694) | function Context(){}
function Hook (line 775) | function Hook(title, fn) {
function F (line 784) | function F(){}
function visit (line 979) | function visit(obj) {
function image (line 1284) | function image(name) {
function Mocha (line 1306) | function Mocha(options) {
function parse (line 1594) | function parse(str) {
function format (line 1633) | function format(ms) {
function Base (line 1869) | function Base(runner) {
function pluralize (line 1937) | function pluralize(n) {
function pad (line 1987) | function pad(str, len) {
function errorDiff (line 2000) | function errorDiff(err, type, escape) {
function colorLines (line 2023) | function colorLines(name, str) {
function Doc (line 2053) | function Doc(runner) {
function Dot (line 2113) | function Dot(runner) {
function F (line 2153) | function F(){}
function HTMLCov (line 2182) | function HTMLCov(runner) {
function coverageClass (line 2206) | function coverageClass(n) {
function HTML (line 2259) | function HTML(runner, root) {
function error (line 2400) | function error(msg) {
function fragment (line 2408) | function fragment(html) {
function hideSuitesWithout (line 2428) | function hideSuitesWithout(classname) {
function unhide (line 2440) | function unhide() {
function text (line 2451) | function text(el, str) {
function on (line 2463) | function on(el, event, fn) {
function JSONCov (line 2518) | function JSONCov(runner, output) {
function map (line 2561) | function map(cov) {
function coverage (line 2600) | function coverage(filename, data) {
function clean (line 2643) | function clean(test) {
function List (line 2675) | function List(runner) {
function clean (line 2708) | function clean(test) {
function JSONReporter (line 2740) | function JSONReporter(runner) {
function clean (line 2781) | function clean(test) {
function Landing (line 2831) | function Landing(runner) {
function F (line 2887) | function F(){}
function List (line 2917) | function List(runner) {
function F (line 2958) | function F(){}
function Markdown (line 2987) | function Markdown(runner) {
function Min (line 3081) | function Min(runner) {
function F (line 3098) | function F(){}
function NyanCat (line 3127) | function NyanCat(runner) {
function draw (line 3193) | function draw(color, n) {
function write (line 3356) | function write(string) {
function F (line 3364) | function F(){}
function Progress (line 3402) | function Progress(runner, options) {
function F (line 3458) | function F(){}
function Spec (line 3489) | function Spec(runner) {
function F (line 3553) | function F(){}
function TAP (line 3584) | function TAP(runner) {
function title (line 3632) | function title(test) {
function Teamcity (line 3659) | function Teamcity(runner) {
function escape (line 3692) | function escape(str) {
function XUnit (line 3740) | function XUnit(runner) {
function F (line 3774) | function F(){}
function test (line 3784) | function test(test) {
function tag (line 3806) | function tag(name, attrs, close, content) {
function cdata (line 3824) | function cdata(str) {
function Runnable (line 3870) | function Runnable(title, fn) {
function F (line 3884) | function F(){}
function multiple (line 4008) | function multiple(err) {
function done (line 4015) | function done(err) {
function Runner (line 4109) | function Runner(suite) {
function F (line 4125) | function F(){}
function next (line 4285) | function next(i) {
function next (line 4325) | function next(suite) {
function next (line 4424) | function next(err) {
function next (line 4491) | function next() {
function done (line 4497) | function done() {
function filterLeaks (line 4584) | function filterLeaks(ok, globals) {
function Suite (line 4647) | function Suite(title, ctx) {
function F (line 4667) | function F(){}
function Test (line 4924) | function Test(title, fn) {
function F (line 4934) | function F(){}
function ignored (line 5088) | function ignored(path){
function highlight (line 5200) | function highlight(js) {
Condensed preview — 108 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (782K chars).
[
{
"path": ".bowerrc",
"chars": 44,
"preview": "{\n \"directory\": \"app/bower_components\"\n}\n"
},
{
"path": ".editorconfig",
"chars": 415,
"preview": "# EditorConfig helps developers define and maintain consistent\n# coding styles between different editors and IDEs\n# edit"
},
{
"path": ".gitattributes",
"chars": 11,
"preview": "* text=auto"
},
{
"path": ".gitignore",
"chars": 78,
"preview": "node_modules\ndist\n.tmp\n.sass-cache\napp/bower_components\ntest/bower_components\n"
},
{
"path": ".jshintrc",
"chars": 391,
"preview": "{\n \"node\": true,\n \"browser\": true,\n \"esnext\": true,\n \"bitwise\": true,\n \"camelcase\": true,\n \"curly\": tr"
},
{
"path": "Gruntfile.js",
"chars": 12214,
"preview": "// Generated on 2014-05-01 using generator-webapp 0.4.8\n'use strict';\n\n// # Globbing\n// for performance reasons we're on"
},
{
"path": "README.md",
"chars": 10116,
"preview": "100day-canvas-bootcamp-training\n===============================\n### PROJECT URL: [http://codepen.io/kenjiSpecial/](http:"
},
{
"path": "app/.htaccess",
"chars": 29841,
"preview": "# Apache Server Configs v2.2.0 | MIT License\n# https://github.com/h5bp/server-configs-apache\n\n# (!) Using `.htaccess` fi"
},
{
"path": "app/404.html",
"chars": 4459,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>Page Not Found :(</title>\n "
},
{
"path": "app/gl-html/gl00.html",
"chars": 741,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n <meta charset=\"UTF-8\">\n <link rel=\"stylesheet\" href=\"../styles/main.css\">"
},
{
"path": "app/gl-html/gl01.html",
"chars": 817,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n <meta charset=\"UTF-8\">\n <link rel=\"stylesheet\" href=\"../styles/main.css\">"
},
{
"path": "app/gl-html/gl57.html",
"chars": 976,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n <meta charset=\"UTF-8\">\n <title></title>\n\n\n <script id=\"shader-fs\" type"
},
{
"path": "app/gl-html/three58.html",
"chars": 537,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n <meta charset=\"UTF-8\">\n <title>== three58 ==</title>\n <link rel=\"style"
},
{
"path": "app/gl-html/three64.html",
"chars": 1117,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n <meta charset=\"UTF-8\">\n <title>Three.js</title>\n <style>\n /* Er"
},
{
"path": "app/gl-index.html",
"chars": 593,
"preview": "<html>\n<head>\n <title>WebGL TEST</title>\n\n <script src=\"scripts/7-gl/vendors/minMatrix.js\" type=\"text/javascript\">"
},
{
"path": "app/index.html",
"chars": 3282,
"preview": "<!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-"
},
{
"path": "app/json/awwwrd.js",
"chars": 6014,
"preview": "var l1Pt0 = [ [0.6905, 0.534], [0.648, 0.534], [0.638, 0.565], [0.6154999999999999, 0.565], [0.6579999999999999, 0.4445]"
},
{
"path": "app/robots.txt",
"chars": 32,
"preview": "# robotstxt.org/\n\nUser-agent: *\n"
},
{
"path": "app/scripts/0-components/boilerplate.js",
"chars": 742,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/0-components/output.js",
"chars": 0,
"preview": ""
},
{
"path": "app/scripts/0-components/path.js",
"chars": 3053,
"preview": "// =============\n\n\nfunction forEach(array, fn){\n for(var i = 0; i< array.length; i++){\n fn(array[i]);\n }\n}\n"
},
{
"path": "app/scripts/1-illusion-of-life/1-squash.js",
"chars": 2177,
"preview": "function backingScale(context) {\n if ('devicePixelRatio' in window) {\n if (window.devicePixelRatio > 1) {\n "
},
{
"path": "app/scripts/1-illusion-of-life/10-animation.js",
"chars": 2950,
"preview": "function backingScale(context) {\n if ('devicePixelRatio' in window) {\n if (window.devicePixelRatio > 1) {\n "
},
{
"path": "app/scripts/1-illusion-of-life/11-animation-2.js",
"chars": 5006,
"preview": "function backingScale(context) {\n if ('devicePixelRatio' in window) {\n if (window.devicePixelRatio > 1) {\n "
},
{
"path": "app/scripts/1-illusion-of-life/12-secondary-action.js",
"chars": 3233,
"preview": "\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestA"
},
{
"path": "app/scripts/1-illusion-of-life/13-secondary-action.js",
"chars": 9194,
"preview": "\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestA"
},
{
"path": "app/scripts/1-illusion-of-life/14-undefined.js",
"chars": 6020,
"preview": "\n\n\n// --------------------------\nvar Pt = function(x, y){\n this.x = x;\n this.y = y;\n};\n\nvar Line = function(ctx, p"
},
{
"path": "app/scripts/1-illusion-of-life/15-undefined.js",
"chars": 5527,
"preview": "window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAn"
},
{
"path": "app/scripts/1-illusion-of-life/16-undefined.js",
"chars": 7345,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/1-illusion-of-life/17-undefined.js",
"chars": 3376,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/1-illusion-of-life/18-undefined.js",
"chars": 5367,
"preview": "\n// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = can"
},
{
"path": "app/scripts/1-illusion-of-life/19-undefined.js",
"chars": 4969,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/1-illusion-of-life/2-squash.js",
"chars": 3007,
"preview": "function backingScale(context) {\n if ('devicePixelRatio' in window) {\n if (window.devicePixelRatio > 1) {\n "
},
{
"path": "app/scripts/1-illusion-of-life/20-undefined.js",
"chars": 5581,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/1-illusion-of-life/21-undefined.js",
"chars": 8015,
"preview": "window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAn"
},
{
"path": "app/scripts/1-illusion-of-life/22-sine-cos.js",
"chars": 2390,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/1-illusion-of-life/22-undefined.js",
"chars": 18943,
"preview": "window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAn"
},
{
"path": "app/scripts/1-illusion-of-life/23-undefined.js",
"chars": 3287,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/1-illusion-of-life/3-stage.js",
"chars": 5041,
"preview": "function backingScale(context) {\n if ('devicePixelRatio' in window) {\n if (window.devicePixelRatio > 1) {\n "
},
{
"path": "app/scripts/1-illusion-of-life/4-anticipation.js",
"chars": 5995,
"preview": "function backingScale(context) {\n if ('devicePixelRatio' in window) {\n if (window.devicePixelRatio > 1) {\n "
},
{
"path": "app/scripts/1-illusion-of-life/5-pose-to-pos.js",
"chars": 6294,
"preview": "function backingScale(context) {\n if ('devicePixelRatio' in window) {\n if (window.devicePixelRatio > 1) {\n "
},
{
"path": "app/scripts/1-illusion-of-life/6-pose-to-pose.js",
"chars": 6972,
"preview": "function backingScale(context) {\n if ('devicePixelRatio' in window) {\n if (window.devicePixelRatio > 1) {\n "
},
{
"path": "app/scripts/1-illusion-of-life/7-pose-to-pose.js",
"chars": 7898,
"preview": "function backingScale(context) {\n if ('devicePixelRatio' in window) {\n if (window.devicePixelRatio > 1) {\n "
},
{
"path": "app/scripts/1-illusion-of-life/8-arcs.js",
"chars": 3219,
"preview": "function backingScale(context) {\n if ('devicePixelRatio' in window) {\n if (window.devicePixelRatio > 1) {\n "
},
{
"path": "app/scripts/1-illusion-of-life/9-arcs.js",
"chars": 5525,
"preview": "function backingScale(context) {\n if ('devicePixelRatio' in window) {\n if (window.devicePixelRatio > 1) {\n "
},
{
"path": "app/scripts/2-numbers/24-number0.js",
"chars": 6091,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/2-numbers/25-number0.js",
"chars": 1094,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/3-algorithm/-1-43-undefined-botsu.js",
"chars": 6294,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/3-algorithm/33-bubble-sort.js",
"chars": 4657,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/3-algorithm/34-search.js",
"chars": 4793,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/3-algorithm/35-undefined.js",
"chars": 9443,
"preview": "// --------------------------\n\nvar width, height, prevTime, rad;\nvar sound220, sound440, sound880;\nvar isBlack = true;\nv"
},
{
"path": "app/scripts/3-algorithm/36-undefined.js",
"chars": 7794,
"preview": "// --------------------------\n\nvar width, height, prevTime, rad;\nvar sound220, sound440, sound880;\nvar isBlack = true;\nv"
},
{
"path": "app/scripts/3-algorithm/37-undefined.js",
"chars": 3191,
"preview": "// --------------------------\n\nvar width, height, prevTime, rad;\nvar sound220, sound440, sound880;\nvar isBlack = true;\nv"
},
{
"path": "app/scripts/3-algorithm/38-undefined.js",
"chars": 3798,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar side, rad;\nvar canvas = document.getElementById('c');\nva"
},
{
"path": "app/scripts/3-algorithm/39-undefined.js",
"chars": 9308,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar virtualWidth, virtualHeight, virtualLeft, virtualRight;\n"
},
{
"path": "app/scripts/3-algorithm/40-undefined.js",
"chars": 1971,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/3-algorithm/41-undefined.js",
"chars": 2557,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/3-algorithm/42-undefined.js",
"chars": 6662,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/4-webgl/0-test-three-js-example.js",
"chars": 2513,
"preview": "/**\n *\n * Created by kenji-special on 9/22/14.\n */\n//if ( ! Detector.webgl ) Detector.addGetWebGLMessage();\n\nvar contain"
},
{
"path": "app/scripts/4-webgl/1-test-three-js-example.js",
"chars": 5651,
"preview": "\nvar container, stats;\n\nvar camera, scene, renderer;\n\nvar mesh, parent_node;\nvar line;\n\nvar radius, segments, material, "
},
{
"path": "app/scripts/4-webgl/2-test-three-js-example.js",
"chars": 4121,
"preview": "var container, stats;\nvar camera, scene, renderer;\nvar group;\nvar mouseX = 0, mouseY = 0;\n\nvar windowHalfX = window.inne"
},
{
"path": "app/scripts/4-webgl/48-three-js-shader.js",
"chars": 11870,
"preview": "var scene, camera, renderer;\nvar vertexShaderString, fragmentShaderString;\nvar character = null;\n\nvar width, height, pre"
},
{
"path": "app/scripts/4-webgl/49-three-js.js",
"chars": 4718,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar angularSpeed;\nvar renderer, camera, scene, plane;\nvar ap"
},
{
"path": "app/scripts/4-webgl/50-three-js-with-shader.js",
"chars": 4955,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar velArr;\nvar xPosArr;\n\n "
},
{
"path": "app/scripts/4-webgl/55-gl.js",
"chars": 9453,
"preview": "\nwindow.onload = loadScene;\n\nfunction backingScale(context) {\n if ('devicePixelRatio' in window) {\n if (window"
},
{
"path": "app/scripts/4-webgl/56-gl.js",
"chars": 12656,
"preview": "\nwindow.onload = loadScene;\n\nfunction backingScale(context) {\n if ('devicePixelRatio' in window) {\n if (window"
},
{
"path": "app/scripts/4-webgl/57-gl.js",
"chars": 8862,
"preview": "window.onload = loadScene;\n\nvar canvas, gl,\n ratio,\n vertices,\n velocities,\n freqArr,\n cw,\n ch,\n co"
},
{
"path": "app/scripts/4-webgl/58-three-js.js",
"chars": 1790,
"preview": "/**\n * Created by kenji-special on 12/26/14.\n */\n\nvar scene, camera, renderer;\nvar geometry, material, mesh;\nvar prevSec"
},
{
"path": "app/scripts/4-webgl/64-three-js.js",
"chars": 5500,
"preview": "var container, stats;\n\nvar camera, scene, renderer;\nvar sqLength = 80;\nvar yy = 0;\n\nvar group;\nvar meshArr = [];\n\nvar ta"
},
{
"path": "app/scripts/4-webgl/99-00-gl-learning.js",
"chars": 3639,
"preview": "// canvasエレメントを取得\nvar c = document.getElementById('canvas');\nc.width = 300;\nc.height = 300;\n\n// webglコンテキストを取得\nvar gl = "
},
{
"path": "app/scripts/4-webgl/vendors/minMatrix.js",
"chars": 7793,
"preview": "// ------------------------------------------------------------------------------------------------\n// minMatrix.js\n// v"
},
{
"path": "app/scripts/5-loop/43-loop.js",
"chars": 7764,
"preview": "// --------------------------\nvar NUM_BALLS = 130,\n DAMPING = 0.3,\n GRAVITY = 1,\n MOUSE_SIZE = 50,\n SPEED = "
},
{
"path": "app/scripts/5-loop/44-loop.js",
"chars": 3603,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/5-loop/45-loop.js",
"chars": 9196,
"preview": "// --------------------------\nvar TWO_PI = Math.PI * 2;\nvar NUM_BALLS = 130,\n DAMPING = 0.8,\n GRAVITY = 1.5,\n M"
},
{
"path": "app/scripts/5-loop/46-loop.js",
"chars": 5449,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar halfWidth;\nvar canvas = document.getElementById('c');\nva"
},
{
"path": "app/scripts/5-loop/47-loop.js",
"chars": 7111,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/5-loop/51-loop.js",
"chars": 6426,
"preview": "// --------------------------\n\nvar app;\nvar fK;\nvar width, height, prevTime;\nvar halfWidth, halfHeight;\n\nvar canvas = do"
},
{
"path": "app/scripts/6-letters/52-letters.js",
"chars": 8238,
"preview": "// k\nvar kArr = [ [0.39049999999999996, 0.05], [0.39049999999999996, 0.39549999999999996], [0.39299999999999996, 0.39549"
},
{
"path": "app/scripts/6-letters/53-letters.js",
"chars": 9012,
"preview": "// k\nvar kArr = [ [0.39049999999999996, 0.05], [0.39049999999999996, 0.39549999999999996], [0.39299999999999996, 0.39549"
},
{
"path": "app/scripts/6-letters/54-letter.js",
"chars": 12970,
"preview": "var l1Pt0 = [\n [0.6905, 0.534],\n [0.648, 0.534],\n [0.638, 0.565],\n [0.6154999999999999, 0.565],\n [0.65799"
},
{
"path": "app/scripts/99-hobby/26-undefined.js",
"chars": 4153,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar pattern;\nvar canvas = document.getElementById('c');\nvar "
},
{
"path": "app/scripts/99-hobby/27-simple-boid.js",
"chars": 4900,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/99-hobby/28-02-combination.js",
"chars": 7111,
"preview": "window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAn"
},
{
"path": "app/scripts/99-hobby/28-combination.js",
"chars": 12499,
"preview": "\nwindow.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestA"
},
{
"path": "app/scripts/99-hobby/30-mouse-boid.js",
"chars": 5621,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/99-hobby/32-boid-collection.js",
"chars": 6694,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/99-hobby/99-01-canvas-letter.js",
"chars": 1046,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canv"
},
{
"path": "app/scripts/99-hobby/99-02-shader-example.js",
"chars": 3439,
"preview": "// --------------------------\nvar scene, camera, renderer;\nvar vertexShaderString, fragmentShaderString;\nvar character ="
},
{
"path": "app/scripts/99-hobby/99-03-circle-drawing.js",
"chars": 5593,
"preview": "/**\n * Created by kenji-special on 10/27/14.\n */\n// --------------------------\n\nvar width, height, prevTime;\nvar canvas "
},
{
"path": "app/scripts/99-hobby/99-04-flag-animation.js",
"chars": 751,
"preview": "/**\n */\n// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx "
},
{
"path": "app/scripts/99-hobby/99-05-color-draw.js",
"chars": 11039,
"preview": "// --------------------------\n\nvar width, height, prevTime;\nvar canvas = document.getElementById('c');\nvar ctx = canvas."
},
{
"path": "app/scripts/helpers/boilterplate.js",
"chars": 903,
"preview": "function backingScale(context) {\n if ('devicePixelRatio' in window) {\n if (window.devicePixelRatio > 1) {\n "
},
{
"path": "app/scripts/helpers/colorConverter.js",
"chars": 686,
"preview": "function HSVtoRGB(h, s, v) {\n var r, g, b, i, f, p, q, t;\n if (h && s === undefined && v === undefined) {\n "
},
{
"path": "app/scripts/helpers/keyEvents.js",
"chars": 1077,
"preview": "/**\n * Created by kenji-special on 12/26/14.\n */\n\nvar cancelRequestAnimFrame = ( function() {\n return window.cancelAn"
},
{
"path": "app/scripts/helpers/svg-parse.js",
"chars": 6618,
"preview": "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."
},
{
"path": "app/scripts/main.js",
"chars": 327,
"preview": "(function(scope) {\n\n var app = scope.app || {};\n\n var Rect = app.Rect = function(ctx, x, y){\n this.ctx = ct"
},
{
"path": "app/scripts/ref/camera.js",
"chars": 3864,
"preview": "sw = 1000;\nsh = 1000;\nvar dtr = function(v) {return v * Math.PI/180;}\nvar camera = {\n focus : 700,\n self : {\n "
},
{
"path": "app/styles/main.scss",
"chars": 792,
"preview": "// bower:scss\n// endbower\n\n@import \"compass/reset\";\n@import \"compass/css3\";\n\nbody{\n background: url(\"../image/pt4.png\")"
},
{
"path": "app/three-js-shader-sample.html",
"chars": 4055,
"preview": "<!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-"
},
{
"path": "bower.json",
"chars": 365,
"preview": "{\n \"name\": \"201405\",\n \"private\": true,\n \"dependencies\": {\n \"modernizr\": \"~2.6.2\",\n \"jquery\": \"~1.11.0\",\n \"Tw"
},
{
"path": "package.json",
"chars": 957,
"preview": "{\n \"name\": \"201405\",\n \"version\": \"0.0.0\",\n \"dependencies\": {},\n \"devDependencies\": {\n \"grunt\": \"~0.4.1\",\n \"gru"
},
{
"path": "test/index.html",
"chars": 632,
"preview": "<!doctype html>\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n "
},
{
"path": "test/lib/chai.js",
"chars": 110818,
"preview": "!function (name, context, definition) {\n if (typeof require === 'function' && typeof exports === 'object' && typeof mod"
},
{
"path": "test/lib/expect.js",
"chars": 233,
"preview": "/*!\n * chai\n * Copyright(c) 2011-2012 Jake Luer <jake@alogicalparadox.com>\n * MIT Licensed\n */\n\nmodule.exports = functio"
},
{
"path": "test/lib/mocha/mocha.css",
"chars": 3548,
"preview": "@charset \"utf-8\";\n\nbody {\n font: 20px/1.5 \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n padding: 60px 50px;\n}\n\n#moc"
},
{
"path": "test/lib/mocha/mocha.js",
"chars": 111002,
"preview": ";(function(){\n\n\n// CommonJS require()\n\nfunction require(p){\n var path = require.resolve(p)\n , mod = require.modu"
},
{
"path": "test/spec/test.js",
"chars": 275,
"preview": "/*global describe, it */\n'use strict';\n(function () {\n describe('Give it some context', function () {\n describ"
}
]
// ... and 1 more files (download for full content)
About this extraction
This page contains the full source code of the kenjiSpecial/100day-canvas-bootcamp-training GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 108 files (725.3 KB), approximately 210.0k tokens, and a symbol index with 395 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.