Javascript AnimationJS + Canvas = <3

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!!!

Introduction

Hello, My Name Is: Gregory Starrwww.gstarr-ltd.comwww.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)

Introduction

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

...

Introduction

All That work was done in Adobe Flash!

I know, I know, flash is evil, nothing ever became of flash….

Or did it?

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...

Topics

1. Introduction (done)2. Goals of this conversation3. 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

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.

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...

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

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?

Ok, you get it...

So, lets get to it..

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.

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.

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...

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...

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?)

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.

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.

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 :-)

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/CanvasRenderingContext2DOr 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.

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

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...

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

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

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.

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...

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 :-)

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/

Q & A

First Answer: No we aren’t going to make a first person shooter today!

Email me: greg@starrit.iowww.starrit.io