zhakui / 100day-canvas-bootcamp-training

Repository for my codepen project.

100day-canvas-bootcamp-training

PROJECT URL: 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 | scss : main.scss

Day 1 - Day 10

• Day1. rect animation | js code
• Day2. squash & strech| js code
• Day3. squash & stretch + staging | js code
• Day4. squash & stretch + anticipation | js code
• Day5. Pose to Pose. | js code
• Day6. Pose to Pose. | js code
• Day7. Pose to Pose. | js code
• Day8. just skect it. | js code
• Day9. arc | js code
• Day10. Just sketch. | js code

Day 11 - Day 20

• Day11. animation | js code
• Day12. animation | js code
• Day13. secondary action | js code
• Day14. undefined | js code
• Day15. undefined | js code
• Day16. June 2? | js code
• Day17. undefined | js code
• Day18. undefined | js code
• Day19. undefined | js code
• Day20. undefined | js code

Day 21 - Day 30

• Day21. undefined | js code
• Day22. undefined | js code
• Day23. undefined | js code
• Day24. undefined | js code
• Day25. undefined | js code
• Day26. undefined
• Day27. undefined | js code
• Day28. undefined
• Day29. Combination | js code
• Day30. boid animation | js code

Day 31 - Day 40

• Day31. Move Mouse | js code
• Day32. Colorful boids. | js code
• Day33. undefined | js code
• Day34. undefined
• Day35. undefined
• Day35. undefined
• Day36. undefined
• Day37. undefined
• Day38. Loop
• Day39. Loop
• Day40. Loop

Day 41 - Day 50

• Day41. Loop
• Day42. Loop
• Day43. Loop
• Day44. Clock with gray scott model.
• Day45. Loop
• Day46. undefined
• Day47. Clock with shader
• Day48. undefined
• Day49. Typography Animation.
• Day50. awwwards logo animation.

Day 51 - Day 60

• Day51. Color
• Day52. Image Slider
• Day53. Image Gallery.
• Day54. WebGL Particle Animation.
• Day55. WebGL Particle Animation#2.
• Day56. WebGL Particle Animation#3.
• Day57. Hello with three.js.
• Day58. Particle Clock.
• Day59. WebGL Particle Animation#4.
• Day60. WebGL Animation.

Day 60 - Day 70

• Day61. Particle Animation
• Day62. Shader experience
• Day63. Shader experience

Referrence

• http://the12principles.tumblr.com/
• http://fyprocessing.tumblr.com/
• http://centolodigiani.tumblr.com/
• http://beesandbombs.tumblr.com/
• https://github.com/edankwan/PerspectiveTransform.js

WEBGL

• https://github.com/tombye/3d-testground
• https://github.com/mrdoob/webgl-blendfunctions
• https://github.com/KhronosGroup/WebGL
• https://github.com/greggman/webgl-fundamentals
• http://www.rozengain.com/blog/2010/02/22/beginning-webgl-step-by-step-tutorial/