Published 3/2023
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 2.62 GB | Duration: 2h 50m

From basic shapes to beautiful animated flow fields
What you'll learn
Draw with code and create 5 unique animation projects for your creative coding portfolio
Learn how to animate shapes and particle systems
Explore creative coding techniques, from simple to more advanced
Practice jаvascript and front-end web development on fun, memorable & visual projects
Requirements
Basic knowledge of HTML, CSS and jаvascript is required to get the maximum value
Description
Making beautiful things with code can be easy if you take it step by step. Let's explore creative coding and discover what can be done by combining different drawing and animation techniques.Knowledge is power. That's why we will use just basic programming principles—functions, arrays, and for-loops—and plain vanilla jаvascript, no frameworks and no libraries. I will explain every line of code as we create multiple animated projects. Being able to fully understand how the code works will allow us to gain complete control over the code, and we can make it do whatever we want it to.Let me show you how to draw a simple line, animate it, and then turn it into more and more complex effects as we add more techniques to our creative coding toolkit, one by one. Discover the secrets of creative coding today. The biggest secret is that it's actually much easier than you think to create complex, beautiful animations. You just have to take it step by step. Everything makes sense if you break the process down into individual parts.Section 1:In the first beginner-friendly block, we will learn how to draw shapes on canvas and how to animate them, turning them into animated spirals, rainbow lightning bolts, and random scribbles.Sections 2, 3, and 4If you already understand the basics of drawing on an HTML canvas, you can skip directly to Section 2, where I start the main course project from scratch. We will create an animated flow field, experiment with it, and make it bend around text and images.Have fun!
Overview
Section 1: Introduction
Lecture 1 Introduction
Section 2: Beginner projects
Lecture 2 HTML & CSS setup
Lecture 3 jаvascript setup
Lecture 4 How to draw rectangles
Lecture 5 How to draw lines
Lecture 6 Object oriented programming
Lecture 7 Dynamic colors with HSL
Lecture 8 Randomized line art
Lecture 9 Drawing multi-segmented lines
Lecture 10 Animating lines
Lecture 11 Rainbow lightning storm effect
Lecture 12 Linear gradients
Lecture 13 Radial gradients
Lecture 14 How to fill shapes with a pattern
Lecture 15 Improve your effects with shadows
Lecture 16 Trigonometry
Lecture 17 Chaos scribbles effect
Section 3: Flow Fields
Lecture 18 What is a flow field
Lecture 19 HTML canvas setup
Lecture 20 Drawing shapes on canvas
Lecture 21 Object oriented programming in jаvascript
Lecture 22 Drawing particle systems
Lecture 23 Animating particle systems
Lecture 24 Drawing lines and trails
Lecture 25 Motion patterns with trigonometry
Lecture 26 Creating a vector field
Lecture 27 How to create a flow field
Lecture 28 Flow field experiments
Lecture 29 Grid and debug mode
Lecture 30 Randomized colors
Lecture 31 Responsive design
Lecture 32 Experimenting with flow field patterns
Section 4: Text Flow Fields
Lecture 33 Drawing Text
Lecture 34 Understanding pixel data
Lecture 35 Handling pixel data
Lecture 36 Converting colors into angles
Lecture 37 Flow & gradients
Lecture 38 Tips, tricks & experiments
Section 5: Image Flow Fields
Lecture 39 Image flow fields explained
Lecture 40 Color manipulation tricks
Section 6: Bonus section
Lecture 41 What's next?
Beginner jаvascript developers who want fun projects to practice and learn to code with,Any programmers interested in creative coding and animation
Screenshots