Animation of SVG object collections [ Interactive live surface. Constructor Functions ]

Enroll My Course for full lessons with detailed code commentary:
Interactive Web Animation [ JavaScript SVG CSS & Canvas ]
www.udemy.com/...
Another Course : Creative Web Animation with GSAP
www.udemy.com/...
Here I will introduce you to an example of the material presented in my new course: Interactive Web Animation [ JavaScript SVG CSS & Canvas ]. Where you can learn how to create advanced web animations
Source:
[creating SVG primitives]:
codepen.io/Ale...
Sensitive surface (JavaScript constructor [animation of SVG primitives]):
codepen.io/Ale...
Lecture Description:
Introduction to Constructor Functions in Interactive Web Animation
In this lesson, we will explore the functions of constructors in JavaScript to create and manipulate SVG primitives. You will learn how to use constructor functions to generate arrays of objects, position them interactively, and modify their colors and sizes. Although object initializers are an alternative available from JavaScript version 1.2, our focus will be on constructors, complemented by some mathematical techniques.
Example 1: Interactive Colored Circles
The first example involves creating multicolored circles that follow the cursor. You'll learn to:
Set up a simple HTML structure with an empty SVG container.
Implement a constructor function for creating SVG circles.
Use the this keyword to assign properties to objects within the constructor function.
Develop a draw method to render the circles using the SVG container.
Utilize event listeners to position circles at the cursor location and apply random colors via the randColor function.
Example 2: Interactive Array of SVG Objects
Building on the first example, the second example introduces an array of SVG objects that interact with the mouse cursor. Key components include:
Setting up HTML with style settings, a JavaScript file link, and an SVG container.
Using the constructor function and a random color generator to create the initial surface of multicolored SVG circles.
Implementing interactive binding to the mouse cursor and keyboard keys to modify the appearance of the surface.
Experimenting with two color management systems: HSLA and RGB.
This example also highlights performance considerations, such as managing processor load and optimizing code for interactive animations.
Key Concepts
Constructor Functions: Learn how to create objects with properties and methods using constructor functions.
Event Listeners: Implement interactive features that respond to cursor movements and key presses.
Color Management: Explore different color models (HSLA and RGB) to dynamically change the colors of SVG elements.
Performance Optimization: Understand the impact of code and hardware on the performance of interactive animations.
By the end of this lesson, you will have a solid understanding of how to use constructor functions to create dynamic and interactive SVG animations. The next lesson will delve into the captivating world of using masks in animations.