VID 28 - NOISE ART - Learn JavaScript with Creative Coding - fun, colorful and free!

VID 28 [Lesson 08 - Controls] - Dr Abstract teaches JavaScript with the following topics:
0:00 - intro to creative coding video 28
0:18 - making art with noise!
0:24 - noise examples
0:45 - noise description - it is an equation with inputs
1:10 - moving along the equation
1:20 - how zoomed in we are in the equation
1:52 - example of zooming in and out - how many bumps we see
2:34 - blobs - we can add more dimensions to noise
2:47 - a cross section across mountains
3:04 - conventional view of noise - little specks
3:48 - getting started with a template (minimal today)
4:23 - the plan - apply noise to a tile and animate in a Ticker
5:07 - making the Tile of white Rectangle objects - on dark background
5:42 - centerReg - and discussion of registration and scaling
6:30 - seeing the tile in Browser
6:40 - making a Noise object and discussion of seeds
7:16 - making the same mountain based on a single little seed!
7:46 - looping to apply noise equation to each rectangle in the tile
8:22 - collect the index number so we can move along the noise equation
8:38 - setting the scale of the rectangles
8:54 - the noise equation - simplex (open source) vs perlin (closed)
9:12 - 2D equation - two numbers - "where" and "zoom"
10:10 - seeing the result - the height is between -1 and 1
10:28 - amplifying the noise
10:46 - zooming in on noise equation for smooth line
11:25 - we want to see the equation move!!!
11:34 - testing the seed number before we see it move
11:56 - seeing a zoomed out view with a specific seed
12:15 - refreshing, we see the same pattern - until we change the seed
12:54 - changing -1 to 1 results to 0 to 1 (add 1 and divide by 2)
14:20 - oops - we needed to centerReg the Rectangles!!
15:10 - view of 0-1 range - nice!
15:57 - separating the code into multiple lines
16:51 - separating out the values we will dynamically change
17:44 - applying a base value (min starting scale)
18:28 - how do we know to do all this? Experience...
19:17 - discussion of using a dial or slider to change values
19:40 - exploring the bounds of the numbers - what change does
20:28 - the range of x will dictate how fast we move
21:05 - how much we are zoomed in
22:20 - we have a starting range - discussion of proportion (mapping)
23:18 - making a MotionController
23:52 - adding a Circle to see where the MotionController is operating
24:48 - moving the circle with mousemove
25:22 - using the x and y of the circle to control the noise
26:22 - using a Ticker to constantly change
27:15 - demonstrating the x value changing
27:35 - converting range of 0-stageW to our desired ranges
29:10 - the proportion / mapping equation
29:30 - the ZIM Proportion class
30:17 - converting the circle's x with the proportion object
30:58 - seeing the results of the conversion
30:48 - using the conversion to control the noise!
32:05 - copying the Proportion for the y
32:45 - summary of the noise code so far!
33:05 - testing it in the Browser
33:22 - ooo - smooth motion
33:36 - too much jiggly - and a bit too quick!
33:56 - making adjustments
35:08 - tuning results and removing the circle for the target
36:05 - full screen final version!
36:24 - ending video - do da doo
36:40 - a few videos left! Come join us at Slack, examples, etc.

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.

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

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