Tue. Dec 10th, 2019

Host your Website

Read and learn

FatCow Web Hosting $1.00/mo* Trust your web hosting to the #1 web host provider, GoDaddy!

VID 24 – Learn JavaScript with Creative Coding – fun, colorful and free!

2 min read



VID 24 [Lesson 08 – Controls] – Dr Abstract teaches JavaScript on the Canvas with the following topics:
0:12 – summary of lessons so far
0:38 – intro to the Ticker!
1:19 – grabbing the template
1:38 – ready to code!
1:51 – Ticker.add() and static methods – Math class
2:30 – Ticker description – frames per second
3:12 – adding a function to the Ticker
3:28 – timeout, interval, loop and Ticker comparison
4:58 – showing console log from a Ticker
5:18 – animating a Circle in a Ticker
5:42 – using +, +=, ++, -=
7:09 – adding bounds to motion animation
8:48 – watching ball bounce!
9:00 – making circle follow the mouse – frame.mouseX
9:33 – making movement smoother with damping
10:46 – ZIM Damp class and converting with the damp object
11:30 – seeing the damping – smooth!
11:42 – slowing down the damping from .1 to .01
12:35 – moving and damping in the y as well!
13:13 – something broken at 13:13
13:34 – working again!
13:38 – leaving a trail that follows the mouse
15:19 – seeing the trail
15:38 – setting the alpha lower
16:00 – discussion of redrawing circles – blitting description
17:06 – animating the tail to go away
15:50 – removing the circle when the animation is done (call)
18:34 – seeing the animation out
19:23 – experimenting with the settings to make art!
19:51 – results of creative coding!
20:14 – animating color – object literal format reminder
21:00 – adjusting colors
21:43 – final mouse follow example
22:03 – MotionController – var a variety of control
23:35 – mousedown, mousemove, keydown
24:56 – examples of MotionController – Butterfly
25:51 – controlling a ZIM Pen with the pressmove
26:26 – making a Pen
26:40 – ZIM controls work on existing display objects
27:42 – seeing the Pen work!
28:02 – seeing the Gen-Pen example – splatter, city, grass, etc.
28:44 – working with layers in Gen-Pen
29:25 – Gen Art on ZIM banner page
29:47 – conclusion and looking forward!
30:29 – outro video made with SoundWave controls

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

Copyright © All rights reserved. | Newsphere by AF themes.