HTML canvas animation using vanilla JavaScript

Last time we learned to draw basic shapes on the HTML canvas using JavaScript. In this tutorial we practice some Object Oriented Programming concepts and animate a simple scene using vanilla JavaScript. We mimic 3D by moving objects that appear towards the back slower than those in front (parallax). New, different looking objects appear from the right... forever.

In this Visual Web Development (VWD) course we study algorithms by implementing and visualizing them in the browser. We use HTML5 Canvas and JavaScript for: interactive applications, image processing, machine learning and games. We limit the use of external libraries so that we understand how things really work.

The final objective this year is to build an augmented reality piano app that allows you to play on a virtual piano. Hand movements will be recognized in real-time from a webcam stream.

Lecture 3: this video

Full playlist:

The course was taught once before but with very different objectives inspired by the Marvel cinematic universe (Dr. Strange and Spiderman):

Codename: View from a... moving train? Or a landing plane... or something :-)

#vwd #visualwebdevelopment #canvasanimation

[Radu]

Seems like the questions are muted for some reason :-(
Luckily it's clear what the question was from my reply! :-)
Do you like animation? Please like this video if you learned something new today :-)

[unknown-bxmy]

Parallax:
User think that the scene is moving
In fact, we move everything😅😅.

I was busy when you streaming sorry.
Thank you😊.