Published 3/2023MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHzLanguage: 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 javascript and front-end web development on fun, memorable & visual projects

Requirements

Basic knowledge of HTML, CSS and javascript 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 javascript, 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 bner-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, expent with it, and make it bend around text and images.Have fun!

Overview

Section 1: Introduction

Lecture 1 Introduction

Section 2: Bner projects

Lecture 2 HTML & CSS setup

Lecture 3 javascript 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-snted 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 javascript

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 expents

Lecture 29 Grid and debug mode

Lecture 30 Randomized colors

Lecture 31 Responsive design

Lecture 32 Expenting 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 & expents

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?

Bner javascript developers who want fun projects to practice and learn to code with,Any programmers interested in creative coding and animation

HomePage:

gfxtra__Creative_C.part1.rar.html

gfxtra__Creative_C.part2.rar.html

gfxtra__Creative_C.part3.rar.html