Introduction To Javascript Animation With Oop (2022)

Making an interactive code animation in JavaScript (like the one in Sci-Fi movies).

What you'll learn

You WILL build an iconic animation, just like the one in movies! No experience needed.

You WILL understand OOP JavaScript like you have coded for ever!

You WILL want to get more monitors to run your animation on them!

You WILL understand how HTML5 canvas works with JavaScript in Real-Time

You WILL understand key concepts of Object-Oriented Programming in JavaScript

You WILL get familiarized with the most basic Git operations for Source Control

You WILL be able to utilize vanilla JavaScript for real-time operations

Requirements

No programming experience needed. You will learn everything you need to know.

Description

This course will teach, step-by-step, how to create a cool interactive code rain animation, just like the one featured in one of the most iconic movies, that runs on any current web browser! In addition to being cool and fun, your animation can be customized and configured on-the-fly, so that you can get creative and have a good time while learning how to use Object-Oriented Programming in JavaScript and the HTML5 Canvas.Anyone can jump into this! Just be aware that we will be programming our animation with code, which means that everything is created from a text editor and we won't be using a video editing software to achieve this. You will be introduced to Object-Oriented Programming concepts throughout the course, although we will be focusing on how to apply them in JavaScript.This course was developed to follow standard development practices (with version control) that you would find in the real-world, so there's some mild (maybe close to heavy) source control integration into the workflow and the course itself for any programmers looking to get more experience on working with Git, as source control is a very important skill to have when working in teams or even on your own projects.We will be covering (or at least brushing) some very interesting topics in JavaScript, like:ObjectsClassesEvents and Event ListenersPackagesConsuming resources from a Content Delivery Network (CDN)Scopes[Emulating] Access Modifiers in ClassesLamda ExpressionsData ContainersExecution ContextDocument Object Model in HTML and JSExceptionsData type checks in vanilla JavaScript (without TypeScript)The JavaScript consoleAdditionally, we will be covering the following:Source ControlWorking with a repositoryCommittingBranchingComparing ChangesMergingReviewing a repository historyDynamic HTML (HTML + CSS + JS)File SystemHow to setup a static websiteViewing local files through a web browser without a serverDebugging JavaScriptOutput meaningful error messagesUsing built-in developer toolsInteracting in real-time with JavaScript run-timeEverything will be coded from scratch, except for the animation frame controller to programmatically compute and draw our animation into an HTML5 Canvas.By the end of this course you will have a pretty solid understanding on how you can create interactive animations by just using JavaScript and the HTML5 canvas.

Overview

Section 1: Setting Things Up

Lecture 1 Setting Up Visual Studio Code

Lecture 2 Setting Up Git for Windows

Lecture 3 Setting Up The Course Repository

Lecture 4 Setting Up User Files

Section 2: Setup HTML File

Lecture 5 Skills Disclousure

Lecture 6 Switching To "main" Branch

Lecture 7 Defining A Doctype

Lecture 8 Setting User Information In A Git Repo

Lecture 9 Basic Structure In An HTML Document

Lecture 10 Incremental Committing in Source Control

Lecture 11 Viewing A Local HTML File

Section 3: Add StrbrJs

Lecture 12 Adding Logic

Lecture 13 Referencing "main.js"

Lecture 14 Referencing NPM package @fjbo-net/strbr

Lecture 15 Using Reference Branches

Section 4: Define Classes

Lecture 16 Branching In Git

Lecture 17 Introduction To Classes In JavaScript

Lecture 18 Using Template Literals

Lecture 19 Refactoring And Merging

Lecture 20 Defining Classes For Project

Section 5: Delimiting Scopes

Lecture 21 Introduction To Scopes

Lecture 22 Encapsulation

Lecture 23 Refactoring

Lecture 24 Exposing To Outer Scopes

Section 6: Connecting CodeRain To The DOM (Document Object Model)

Lecture 25 Setting Up The Branch

Lecture 26 Private Properties

Lecture 27 Comments

Lecture 28 Loading Configuration

Lecture 29 Defining An Initialize Method

Lecture 30 Introduction To The Document Object Model

Lecture 31 Override Methods

Lecture 32 What "this" Is

Lecture 33 Lambdas

Lecture 34 Querying The DOM

Lecture 35 Modifying The DOM

Lecture 36 Connecting Logic Into The DOM

Lecture 37 Merging Our Changes

Section 7: Drawing To The Canvas

Lecture 38 Setting Up The Branch

Lecture 39 Implementing The Draw Method

Lecture 40 Extracting A Method

Lecture 41 Drawing A Rectangle

Lecture 42 Automating Rendering

Section 8: Drawing A Glyph

Lecture 43 Setting Up The Branch

Lecture 44 Adding Basic Logic To Glyph

Lecture 45 Validating A Canvas Context

Lecture 46 Actually Drawing The Glyph

Lecture 47 Setting A Random Opacity

Lecture 48 Generating A Random Character

Lecture 49 Validating The Position

Lecture 50 Simplifying Readability

Lecture 51 Merging Our Changes

Section 9: Drawing A Drop

Lecture 52 Setting Up The Branch

Lecture 53 Implementing Initial Methods

Lecture 54 Rendering The Drop

Lecture 55 Adding Drops

Lecture 56 Merging Our Changes

Section 10: Animating Glyphs

Lecture 57 Setting Up The Branch

Lecture 58 Keeping Track Of Ticks

Lecture 59 Spawning New Characters

Lecture 60 Merging Our Changes

Section 11: Animating Drops

Lecture 61 Setting Up The Branch

Lecture 62 Adding Size Parameter

Lecture 63 Updating The Drop State

Lecture 64 Resetting The Drop State

Lecture 65 Merging Our Changes

Section 12: Adding More Drops

Lecture 66 Setting Up The Branch

Lecture 67 Adding Logic To Add Drops

Lecture 68 Managing Drop Speed

Lecture 69 Merging Our Changes

Section 13: Managing Drops

Lecture 70 Setting Up The Branch

Lecture 71 Support Adding A Specific Number Of Drops

Lecture 72 Keeping Track Of Drop Indexes

Lecture 73 Updating The Drop Configuration

Lecture 74 Detecting Font Size Changes

Lecture 75 Merging Our Changes

Section 14: Improving Responsiveness

Lecture 76 Setting Up The Branch

Lecture 77 Support Mobile Devices

Lecture 78 Fixing A Bug

Lecture 79 Fixing Other Bugs

Lecture 80 Merging Our Changes

People with no programming experience that would like to get an insight on how to program animations in JavaScript,Intermediate front-end developers that want to expand their skills on JavaScript,Beginner JavaScript programmers,Intermediate JavaScript programmers