How and why to use javascript to draw and animate with html5 canvas. Some links to GSAP, Pixijs and Createjs libs

1. Javascript Animation
JS + Canvas = <3

2. Introduction
Welcome to BocaJS! If you just walked in, this
talk is on Animation in Javascript applied to
canvas (and a little more)!
Thanks for having me guys! You Rock!
Keeping Knowledge Free!!!

3. Introduction
Hello, My Name Is:
Gregory Starr
www.gstarr-ltd.com
www.STARRit.io
I do:
● Make Art(All Kinds traditional and digital)
● Produce Code( Baby, I got what you neeeed)
● Love Music(Produce and Spin EDM)

4. Introduction
Street Cred:
===================================
FriendFinder.com (Adult communication Division).
Yahoo.com :-) (Maps Division) (maps.yahoo.com).
ISO.com (Real Estate evaluation).
Currently: Do Interesting things.
...

5. Introduction
All That work was done in Adobe Flash!
I know, I know, flash is evil, nothing ever
became of flash….
Or did it?

6. Introduction
RIA: Rich Internet Applications
That’s what I specialize in. Bringing richness to
the world of internet application development.
Lets, checkout the topics we will cover today...

7. Topics
1. Introduction (done)
2. Goals of this conversation
3. References: Who Uses animation?
4. Why is animation valuable.
5. Animation in javascript Breakdown (10,000 Ft).
6. What exactly is the canvas & what is it to animate in it.
7. Lets talk Structure….
8. Frameworks? Yea we got those!
9. Setting up for animation in OOP(ish).
10.Tying in other players from our playground.
11.CGooing Forward in js (Because someone is going to ask about it :)
12.Q&A

8. Goals of this conversation
1. Have a conversation about animation and some of its uses in js.
2. Provide a better understanding of canvas and how to use it.
3. Some of the ways to animate in canvas using javascript.
4. Setting up complex objects for animation (OOP oriented).
5. Integrating JS animation with other client side technologies/frameworks.

9. References: Who Uses animation?
Everyone!
● CSS, JQUERY, Angular, React, etc...
● Google, Microsoft, Mozilla, & Apple, etc...
● Your mother may have sprinkled some on your easter
meal and you didn’t know it...

10. Why is animation valuable.
At first glance, Animation has no equateable
value in a business sense. However, animation
is a tool that has the ability to mostly closely
convey ideas, emotions, intentions etc. in a
manner that is best suitable for human
consumption. VISUALLY

11. Why is animation valuable.
The most acutely attuned and relied upon sense that
mankind uses is the sense of sight.
Animation provides a visual language that our brain
naturally interprets understands.
That’s why we upgraded to from books to youtube, right?

12. Ok, you get it...
So, lets get to it..

13. Animation in JS Basics (10,000 Ft).
Animation in javascript at the lowest level relies
on setInterval and setTimeout and their clearing
counterparts to make calls to object functions
passed to them.
At each specified interval the function is called
and values are changed.

14. Animation in JS Basics (10,000 Ft).
Since animation is change in a property over
time, setInterval and setTimeout are the
workhorses.
Because this is POJO you can apply this
concept to any obj, property, attr that you have
access to in JS.

15. Animation in JS Basics (10,000 Ft).
With that in mind, that’s why they added
animation into CSS…
But that’s not why why we are here…
We are trying to animate inside the canvas,
so...

16. What exactly is the canvas &
what is it to animate in it.
Quote from MSDN:
“Officially a canvas is "a resolution-dependent bitmap canvas which can be used for
rendering graphs, game graphics, or other visual images on the fly". In layman's terms,
the canvas is a new element in HTML5, which allows you to draw graphics using
JavaScript. It can be used to render text, images, graphs, rectangles, lines gradients
and other effects dynamically. Drawing on the canvas is via the canvas 2D API.”
I’m Sorry, I’m not sure I heard that right...

17. What exactly is the canvas &
what is it to animate in it.
Resolution-Dependent = Bad (What about responsiveness, I get
that out of the box already with css)
Bitmap canvas = Bad (You mean it’s always renders as a bitmap?)

18. What exactly is the canvas &
what is it to animate in it.
The canvas can be thought of
much more like your laptop or
desktop monitor.
Much the same as applications
control the output that ended up
being “The Website Is Down” from
Youtube on you monitor a while
back.
Javascript can be used to
statefully control the output of
the canvas.

19. What exactly is the canvas &
what is it to animate in it.
This is good because just like back-in-da-day with evil ole’ Flash we
had no crazy, controlling, restrictive, mis-behaving things like The
DOM.
Layout did, EXACTLY what our code told it to.
Canvas provides us that same freedom.

20. What exactly is the canvas &
what is it to animate in it.
You want to make it rain?
No Sweat: It's Raining
Need interactive fireworks:
To easy: Boom!
So You have complete control over everything.
(Examples were searched from codepen, Not my work :-)

21. What exactly is the canvas &
what is it to animate in it.
So, at a low level we can draw and animate inside the canvas using
the canvas2D api.
Link: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
Or search for, you guessed it:> Canvas2d API
Canvas2D is an amazing piece work done by a few companies you may have heard of,
Mozilla, Adobe, Microsoft and Google. It was based on Adobe’s Flash Player C api’s and
built to run in SpiderMonkey (Mozilla’s javascript engine implemented in C) and other
browser js engines.
Alot of the drawing and animating api’s are very very close to the flash player api’s from
a few years ago.

22. Frameworks? Yea we got those!
● There is no one framework to rule them all. As usual, if
you’re looking for a golden hammer… Go build it and let
me borrow it please.
● They all focus on solving a similar goal… Animation
● Go through and use codepen and try them out… find
one that fits for you…
I like a little suite called CreateJS

23. Frameworks? Yea we got those!
It’s all about structure, and if you are looking for quick
setup, low overhead, logical orginaization that can scale
and be performant. Check it out.
I have worked with Grant and a couple of his ppl and they
have always delivered top quality code and experience in
an open source manner to the development community.
I respect that! Plus it’s free...

24. Frameworks? Yea we got those!
So before we go to code, A note on Framewerx….
● Pixijs - Best I’ve seen
● GSAP - Big Dog on the block: But you gotta pay for the
goods
● Velocioty - Replacement for jQuery .animate
● Web Animation API Specification (Go Ahead and bow…
it’s that juicy, and native to the browser… ooooooh)
● A simple search of github will reveal more

25. Lets talk Structure….
So like any good application there has to be
structure for control, logic flow, and IMO my
own sanity.
This is no different… ok Well it’s a little different

26. Lets talk Structure….
The way it’s different is in the inheritance. This
may sound obvious but alot of people miss the
benefit/effects inheritance has on how we can
animate.

27. Lets talk Structure….
It’s all about Thinking ahead and knowing what
you want to control, and how you need to
control it.
So maybe I’m a control freak… Don’t judge me
Sample? Ok.. Freeze for code break...

28. Tying in other players from our playground.
It’s easy to play with others in your sandbox!
● jQuery
● Angular
● FB React -- > Love what’s happening here
btw, even though I don’t endorse your
children being on facebook if under 21 :-)

29. Going further: Some resources =>
● https://developers.google.com/web/fundamentals/look-and-
feel/animations/css-vs-javascript?hl=en
● http://davidwalsh.name/css-js-animation
● A great article http://www.smashingmagazine.com/2014/11/18/the-state-of-
animation-2014/
● http://www.schillmania.com/content/projects/javascript-animation-1/
● https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey
● http://createjs.com/Home
● http://www.pixijs.com/

30. Q & A
First Answer: No we aren’t going to
make a first person shooter today!
Email me: greg@starrit.io
www.starrit.io