Scroll Down to get the courseGet The Course

Mastering Web Animation with Canvas [ JavaScript CSS HTML ] | Discount Coupon for Udemy Course

Development Web Development Creative Coding (code art)

$9.99 $84.9988% off

Price expires 1 year ago

Learn Web Animation with Canvas. Creative Coding [ code art ] by using vanilla JavaScript and Mathematical Magic | Discount Coupon for Udemy Course

4.11

(8 ratings)

93 students

Created by:

Alexandr Tyurin

Last updated 11/2022Course Language EnglishCourse Caption EnglishCourse Length 02:53:33 to be exact 10413 seconds!Number of Lectures 39

This course includes:

3 hours hours of on-demand video
1 article
Full lifetime access
Access on mobile and TV
Certificate of completion
10 additional resources

Do you want to improve your front-end developer skills? You have the opportunity to expand your coding portfolio and attract the attention of employers!Do you want to learn how to create interactive web animations? Perhaps you are already familiar with Canvas animation and want to deepen and expand this knowledge? Are you looking for interesting animation effects and optical illusions? You have chosen the right course!This tutorial uses the classic academic teaching model. At the beginning of the lessons, theoretical information is presented, followed by practical web animation examples that consolidate new knowledge. The aim of this course is to show the completeness and variety of animation techniques using Canvas.The structure of the graphic design of the course:in the upper right part - the title of the chapter;in the upper left part - the number of the lesson in the current chapter [Example: “Lesson 1”];in the upper middle part - the name of the lesson or the next topic of the current lesson;on the right side of the screen - a board with theoretical information;on the left side of the screen - Visual studio code editor with examples illustrating the theoryat the bottom of the screen - additional auxiliary information .All lessons in this course are available for viewing in 1080p quality [view lessons in maximum quality whenever possible.]In this course, you will find many interesting javascript animation examples with code. You can work and experiment on your own. To do this, you need to download the file called 'Code' attached to the first lesson of the first chapter. It contains a link to a collection of examples from this course in the online Codepen editor.SEO part:Do you want to take your front-end developer skills to the next level? With this course, you can expand your coding portfolio and impress potential employers with advanced web animations.In this tutorial, you'll learn how to create captivating animation effects and optical illusions using Canvas animation with vanilla JavaScript. The course follows a classic academic teaching model, starting with theoretical information and gradually introducing practical examples to consolidate your knowledge.The course design features the chapter title, lesson number, and lesson topic in the upper left, right, and middle parts of the screen, respectively. On the right side of the screen, you'll find a board with theoretical information, while the left side displays a Visual Studio code editor with examples that illustrate the theory. Additional auxiliary information is located at the bottom of the screen.All lessons are available in 1080p quality, so make sure to view them in maximum quality whenever possible. Throughout the course, you'll find many interesting JavaScript animation examples with code that you can work on and experiment with on your own.To get started, download the 'Code' file attached to the first lesson of the first chapter, which contains a link to a collection of examples from this course in the online Codepen editor.By the end of this course, you'll have a comprehensive understanding of animation techniques using Canvas and be able to create visually stunning web animations with ease.Keywords for SEO optimization: Mastering Web Animation, Advanced Web Animation, Dynamic Web Animation, Progressive Web Animation, Canvas Animation, JavaScript Animation, Front-End Development, Creative Coding, Code Art, Optical Illusions, Next-Level Web Animation, Visual Effects.Who this course is for:everyone who is interested in web animationJavaScript developerswebsite designersfrontend developersUX/UI designersfor people who collect a unique library of knowledge in order to have access to it from anywhere in the worldcreative people interested in learning new things

Course Content:

Sections are minimized for better readability, click the section title to view the course content

8 Lectures | 40:51

HTML Canvas element [Introduction]. Part1
06:07
1. The purpose of Canvas. Syntax. Basic settings.
2. object creation
3. Canvas initialization. Methods getElementById(), querySelector().
4. Access to the drawing context. Context types, getContext() method.
5. fillRect(), fillStyle methods.
6. Interactive binding to the mouse cursor.
7. HSLA color model. Fade effect
HTML Canvas element [Introduction]. Part2
03:19
1. Canvas cleanup methods.
2. Flexible interactive binding of several animation objects to the mouse cursor.
3. Assigning hsla colors to an array of objects.
4. Building an animation engine based on requestAnimationFrame().
HTML Canvas element [Introduction]. Part3
05:48
Using classes in web animation.
1. Purpose and structure of classes.
2. Class constructor.
3. update() method.
4. The life cycle of animation objects.
5. Animation object motion algorithm and its decomposition.
6. 'load' event
Canvas & Web Audio API [Audio Visualizer]. Part1
05:10
1. Basic html document settings for the project.
2. The 'audio' element. Purpose, use.
3. 'input' element. Purpose, use.
4. 'onchange' event
5. 'AudioContext' interface
6. The properties of the object to create the animation.
Canvas & Web Audio API [Audio Visualizer]. Part2
04:13
1. 'loadAudio()' method
2. FileReader interface
3. 'readAsDataURL()' method
4. Web Audio API: audio nodes, inputs and outputs, audio routing graph
5. audio initialization [part 1]
Canvas & Web Audio API [Audio Visualizer]. Part3
05:05
1. Audio initialization [part 2]
2. 'Uint8Array()' method
3. Building the first type of Audio Visualizer
4. The first version of the audio visualizer
Canvas & Web Audio API [Audio Visualizer]. Part4
04:09
1. Errors are related to the established connections between audio nodes and their elimination using the WeakMap object.
2. Setting up the first version of the audio visualizer.
Canvas & Web Audio API [Audio Visualizer]. Part5
07:00
1. Frequency audio test.
2. The second kind of audiovisualizer [based on the analysis of one of the set of frequencies].
3. Changes in transformation matrix.
4. Third kind of audiovisualizer.

28 Lectures | 02:00:15

Illusion of 3D [ Shadow & Light ]. Part1
02:00
Creating the illusion of a three-dimensional ball
- Basic project settings
Illusion of 3D [ Shadow & Light ]. Part2
05:50
1. The function of working with light and shadows
2. Method for creating a radial gradient createRadialGradient()
3. Shadow: color, blur, offset
4. Interactivity
Linear gradient animation. Par1
02:00
1. Demo: linear gradient animation.
2. Basic html document settings.
Linear gradient animation. Par2
02:13
1. Properties of the animation object.
2. canvas initialization method.
Linear gradient animation. Par3
04:23
1. createLinearGradient() method.
2. Explanatory drawing for animation.
3. Method determining the position of objects.
Linear gradient animation. Par4
03:32
1. Animation logic.
2. setInterval(), clearInterval() methods.
3. Adding Events.
Interactive sprite animation. Part1
01:37
1. Prologue
2. Basic html document settings
Interactive sprite animation. Part2
03:47
1. Introduction to sprite sheets
2. Scenario overview
3. Object properties
4. Initialization
5. Sprite sheet loading
Interactive sprite animation. Part3
06:28
1. Creating a class to simplify the implementation of animation objects
2. Class constructor
3. 'update()' method
4. Movement methods to the right and to the left
5. Events
6. Epilogue
SVG vs Canvas [ Sensitive Surface ]. Part1
04:35
1. Formulation of the problem
2. Basic html document settings
3. Object properties
4. Initialization
SVG vs Canvas [ Sensitive Surface ]. Part2
03:45
1. The method of drawing the current circle according to the given coordinates and radius.
2. Interactive connection of the surface with the position of the mouse cursor.
SVG vs Canvas [ Sensitive Surface ]. Part3
02:36
1. Surface appearance configurator.
2. Testing canvas and SVG variants.
Clip() method [ Magnifier ]. Part1
02:33
1. Formulation of the problem.
2. Basic html document settings.
3. Object properties.
4. Initialization Method.
5. loadImg() object method [loading and rendering an image].
Clip() method [ Magnifier ]. Part2
05:30
1. Object method draw(x, y).
2. Animation logic.
3. Graphic explanation.
4. Way to set 1 method for multiple events.
5. Interactivity.
6. Scaling.
Drawing text. Part1
03:12
1. Formulation of the problem.
2. Basic html document settings.
3. Object properties.
4. Initialization method.
Drawing text. Part2
03:40
1. Preparing data for drawing.
2. Explanatory drawing [part 1]
Drawing text. Part3
04:11
1. methods to draw text: fillText(), strokeText() [syntax, options]
2. Explanatory drawing [part 2]
3. Events
Fractals. Tree modeling [ L-systems ]. Part1
04:14
1. Fractals. General information. Classification
2. Geometric fractals. L-systems.
3. Basic html document settings.
4. Object properties.
5. Initialization method.
Fractals. Tree modeling [ L-systems ]. Part2
06:05
1. Principles of constructing L-systems.
2. The drawTree() method of the object.
3. Explanatory drawing.
4. Events.
5. Interactivity and calling the main method of building a tree.
Fractals. Tree modeling [ L-systems ]. Part3
06:44
1. Setting the appearance of the tree.
2. Shadows
Interactive fractal [ Mandala ]. Part1
04:24
1. Basic html setup.
2. Object properties.
3. Initialization
Interactive fractal [ Mandala ]. Part2
06:46
1. Basic construction method drawMandala().
2. Explanatory drawing.
3. Configuration Options.
Interactive fractal [ Mandala ]. Part3
05:44
1. main() call method.
2. automatic and interactive animation modes.
3. events.
4. fine tuning.
Pixel canvas manipulation [ImageData object]. Part1
01:35
1. Introduction.
2. Demonstration of animation configurations.
Pixel canvas manipulation [ImageData object]. Part2
03:44
1. Basic html document settings
2. Element accepting data from user 'input'
3. Object properties
Pixel canvas manipulation [ImageData object]. Part2
04:47
1. Main object call function.
2. Initialization method.
3. drawImage() method.
4. getImageData() method.
5. 'The canvas was corrupted by data from different sources' error and how to fix it.
6. FileReader interface, readAsDataURL() method.
Pixel canvas manipulation [ImageData object]. Part4
06:57
1. ImageData object.
2. sRGB color space.
3. Сolor inversion.
4. 'data' property, array with pixel information [Uint8ClampedArray]
5. Formula for calculating the ordinal number of an element in an array of pixel data.
Pixel canvas manipulation [ImageData object]. Part5
07:23
1. Building the 'Pixel' class.
2. Constructor, properties.
3. object's draw() method.
4. update() class method.
5. pixel position recalculation formula and its decomposition.
6. Changing the configuration.

3 Lectures | 12:27

4.11

(8 course ratings)

0/8

1/8

6/8

JOIN OUR WHATSAPP GROUP TO GET LATEST COUPON AS SOON AS UPDATED

JOIN WHATSAPP

JOIN OUR TELEGRAM CHANNEL TO GET LATEST COUPON

JOIN TELEGRAM

JOIN OUR FACEBOOK GROUP TO GET LATEST COUPON

JOIN FACEBOOK

Get The Course

If you like to get inspired by great web projects, you should check out Made with Javascript. If you have a project that you wish to share with the world, feel free to submit your project on Made with Javascript Club website.