VID 25 - SPRITES - Learn JavaScript with Creative Coding - fun, colorful and free!
Channel: ZIM LEARN
Date: 17/11/2019

VID 25 [Lesson 08 - Controls] - Dr Abstract teaches JavaScript with the following topics:
0:00 - intro to creative coding video 25
0:16 - lesson review 
0:48 - intro to Sprite, Dynamo, Scroller, and Accelerator 
1:47 - grabbing a template 
2:25 - bring in assets with Asset List tool! 
3:20 - warning about ES6 and IE - use a tool like Babel
4:15 - using CTRL and arrow key in Atom to move line up and down
4:25 - looking at the assets 
4:40 - a SpriteSheet - images in a graphic for animation
5:03 - a look at JSON, Texture Packer, animation information
5:44 - types of SpriteSheets - regular spacing does not need JSON 
6:28 - exporting to EaselJS (CreateJS) from TexturePacker 
6:48 - describing JSON - JavaScript Object Notation 
7:30 - ZIMON - to store any ZIM Object as a string!
8:38 - JSON stringify() and parse()
9:04 - loading assets and path into Frame 
9:30 - showing an asset - copy and paste names! 
10:15 - asset showing in Browser
10:26 - adding asset to a Scroller with a speed 
11:02 - asset scrolling on screen - and explanation 
11:54 - changing the speed of the scroller 
12:06 - making all the scrollers 
13:26 - adjusting heights and size of Frame 
14:45 - all the scrollers working! 
15:11 - adding a Sprite
17:00 - running the sprite 
17:15 - running an animation at a label
17:34 - looping the sprite 
18:00 - moving sprite and changing layer 
18:26 - sprite looking good! 
18:36 - changing the sprite speed with time 
19:41 - adding sprite to Dynamo to adjust speed dynamically! 
21:48 - percentSpeed discussion for Dynamo and Scroller 
22:13 - an Accelerator can dynamically change the percentSpeed 
22:24 - moving backwards - reversible and flip 
23:40 - adding everything to an Accelerator
24:03 - using an Array [ ] to pass objects to the accelerator 
24:50 - adding statements to array and switch to commas 
25:08 - using CTRL select for multiple editing in Atom 
25:50 - playing scene at 100 percent in accelerator  
26:02 - the magic... changing the speed of the whole scene 
27:11 - discussion of how to change speed based on mouse 
27:38 - Proportion, ProportionDamp, JavaScript map() 
28:28 - MotionController to control speed! 
31:02 - the results of the MotionController - cool! 
31:23 - registration point issue 
31:48 - adjusting speed of MotionController to flip better 
32:41 - yay - nice speed change - all is good! 
35:02 - switching to a keydown motion (or a gamePad)
35:50 - results of using keyboard! 
34:00 - summary - comparison to other frameworks 
34:57 - creative coding with gaming aspects! 
35:27 - oo oo - the end video 
35:43 - singing da da ba doo around the world 

The Learn JavaScript with Creative Coding is a video series to help left brain and right brain learners explore the wonders of programming using the fun, colorful and friendly HTML Canvas and ZIM.  Dr Abstract is a Canadian New Media Awards winner for Programmer and Educator of the Year.  He will teach the basics of programming in JavaScript from the ground up so welcome designers, artists, engineers, developers, and all.

The video lessons are supported by ZIM Skool at https://zimjs.com/skool and make an excellent introduction to code at a high school and college levels or for the #100DaysofCode movement and workshop organizations like #CanadaLearningCode.  Younger students can go to https://zimjs.com/kids.  

We hope you share these lessons with friends, family, work colleagues and any aspiring creators!  Cheers, please subscribe, share on social media and give the videos a like if you have likes to give.  You are welcome to join us at https://zimjs.com/slack/ to ask questions, discuss code and share examples.

Thanks to BigTRBL - DJ at Shaolin in Hamilton for the intro tune!

Cheers from #LearnJavaScript with #CreativeCoding and #DrAbstract founder of #ZIMjs