Learn Creative Coding: Line & Path Effects

Рет қаралды 16,044

Күн бұрын

Step by step tutorial from drawing a simple shape to a fully animated generative art piece! Do you want to master Front End Web Development this year? Then this tutorial is for you! :) We will go from important fundamentals to digital art, let me show you the real power of vanilla JavaScript in this creative coding crash course for beginners!
Today we will build:
Procedurally generated lines | Rainbow lightning storm effect | Chaos scribbles effect
🎨 EXTENDED class with BONUS lessons and more creative coding experiments, full source code from multiple different stages, learn how to create image flow fields and animate smooth color transitions.
🎨 Udemy: www.udemy.com/course/creative...
🎨 Skillshare (free 1 month trial):
www.skillshare.com/en/r/profi...
Project files:
Image for createPattern method: www.frankslaboratory.co.uk/do...
📚 What to watch next?: • Learn Creative Coding:...
📚 Full playlist: • Flow Fields
Beginner friendly warm-up class you can watch before this video: • Learn Creative Coding:...
⭐️Tutorial Contents ⭐️
00:00 Intro
00:34 HTML5 & CSS3 setup
01:14 JavaScript setup
03:17 How to draw rectangles
04:37 How to draw lines
07:44 Object oriented programming
13:05 Dynamic colors with HSL
14:52 Randomised line art
18:13 Drawing multi segmented lines
21:25 Animating lines
25:15 Rainbow Lightning Storm effect
31:23 HTML5 Canvas Linear Gradient Tutorial
33:43 HTML5 Canvas Radial Gradient Tutorial
34:46 Create a pattern with HTML5 Canvas
38:52 How to make a shadow in HTML canvas
39:59 Using trigonometry to animate HTML5 canvas
43:20 Chaos Scribbles effect
We will experiment with our drawings and modify them using
🎨 createLinearGradient
🎨 createRadialGradient
🎨 createPattern
All of that with no frameworks and no libraries using just vanilla JavaScript, HTML5 canvas element and object oriented programming. I will explain every line of code step by step as we build our interactive animated project. Let's make art with code and learn JavaScript and front end web development in the process.
More beginner friendly creative coding with vanilla JavaScript & HTML canvas:
• Front End Web Developm...
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory

Пікірлер: 61

@Frankslaboratory Жыл бұрын

🎨 EXTENDED class with BONUS lessons and more creative coding experiments, full source code from multiple different stages, learn how to create image flow fields and animate smooth color transitions. 🎨 Udemy: www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A 🎨 Skillshare (free 1 month trial): www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on

@Frankslaboratory Жыл бұрын

Do you want to learn how to make IMAGE flow field or dynamic TEXT flow field? Working on an advanced class now.

@hugovazquez2 Жыл бұрын

Me encanta tu contenido! saludos desde Mexico.

@Radu Жыл бұрын

You use basic things in so creative ways :-) always excited to see the outcome!

@Frankslaboratory Жыл бұрын

Thank you Radu

@zeaycool7461 Жыл бұрын

You to Radu, both of you use vanilla JS for your teaching that's helps a lot . You two are my fav instructor when comes to creative JavaScript try to suggest some books on Creative and Generative Technology . Love from India.

@time4062 Жыл бұрын

I was waiting for your video

@Fredgast6 Жыл бұрын

those first flow fields look really good, looking forward to seeing the course

@Frankslaboratory Жыл бұрын

I like flow fields, they are easy to make and the results can be impressive

@leoprone1 Ай бұрын

Tremendo video! muchas gracias!

@nasimajosefi Жыл бұрын

Thank you, every video of you is GOLD, please upload the advanced class as soon as possible.

@Frankslaboratory Жыл бұрын

Hi Nasima, glad you found some value. Advanced class will explain a traditional flow field technique as well as how to make particles flow around a shape

@lookupverazhou8599 Жыл бұрын

Literal genius. I will have to come back to this at another time.

@Frankslaboratory Жыл бұрын

Glad you like it

@MikelNaUsaCom Жыл бұрын

the programming concept you are referencing at about 12:15 is called coupling and cohesion. Putting the parameters in the constructor encapsulates the class and reduces the external coupling making the class more cohesive. Increasing these properties of the code in this increases the readability and reusability, while reducing the likelihood of errors. Thanks, ~Mike

@Frankslaboratory Жыл бұрын

Hi Mike, thank you for mentioning that, very useful comment

@ushakiran8549 Жыл бұрын

You blew me away with your explanation, sir! Keep up the great work.

@Frankslaboratory Жыл бұрын

Thank you for your kind feedback, much appreciated

@berkipekoglu Жыл бұрын

Awesome! Thank you!

@Frankslaboratory Жыл бұрын

Hi Berk. I'm here to help! :)

@regibyte Жыл бұрын

I love your content man! please give us more! It's so relaxing to follow along, I know a bit about canvas and you make it super fun to practice

@Frankslaboratory Жыл бұрын

I will try to release videos more often this year :)

@regibyte Жыл бұрын

@@Frankslaboratory Thank you for putting so much effort into your work! we all appreciate everything you do sir ❤

@therealpepeu 7 ай бұрын

Ridiculously good videos! :OD

@user-tc8yl3wd5i Жыл бұрын

this course very interesting and funny👍 Canvas learners can easily follow along. thank you!

@paulthomas1052 Жыл бұрын

Thanks - another excellent tutorial. 👋

@Frankslaboratory Жыл бұрын

Thanks Paul!

@javifontalva7752 Жыл бұрын

ANOOOooo!!! Yeeeessss!!!

@Frankslaboratory Жыл бұрын

Glad you are excited Javi :D

@viravongtong3644 Жыл бұрын

OOOOOOH THANK YOU that is what i am workin on ure the best

@Frankslaboratory Жыл бұрын

Glad you found some value Vira

@mister_i_3708 Жыл бұрын

About curves. Exists abstract type of curves, named roulette. All curves are generated with help of circle. Hypocycloid, epicycloid, cyclogon (I didn't find way to generate cyclogon curve, know the way to find only "x" value), catenary etc. UPD: And a lot of different spirals are represented with formulas.

@Frankslaboratory Жыл бұрын

You are right, I want to explore more techniques to draw spirals, will look into this, thanks for the tip

@ekomukanga893 Жыл бұрын

Another epic one 😎💯🔥🔥🔥.

@Frankslaboratory Жыл бұрын

Hi Ekom! Thanks

@sagniamsalu2330 Жыл бұрын

It is supperb1 Thanks a lot for your good works. I hope you can delve in to multi player game development in the future. Thanks a lot once more again.

@Frankslaboratory Жыл бұрын

Hi Sagni, I will start with 2 player on a single computer games, as I haven't even covered that yet.

@AZHARakaGoat Жыл бұрын

🔥🔥🔥

@Frankslaboratory Жыл бұрын

@messaoudilotfi4383 Жыл бұрын

Great good luck brother

@Frankslaboratory Жыл бұрын

Thank you

@Intellectualmind4 Жыл бұрын

Good work

@Frankslaboratory Жыл бұрын

Thanks Dipesh

@mattsavage3258 Жыл бұрын

I prefer to kick off requestAnimationFrame loop by calling requestAnimationFrame(animate), instead of animate() directly. Also, I put the call to requestAnimationFrame() on the first line of animate(), unless I logic within animate that requires conditional call to the next animate().

@Frankslaboratory 11 ай бұрын

Thanks for this tip Matt, this is good, I will do it like that next time

@404-UsernameNotFound Жыл бұрын

I really like your teaching style. How you go over the basic conpepts at first, then refine the code to the more complex styles. One thing I recently learned in VSCode that I wanted to share is how to quickly copy lines like you did at 32:35. After you finish typing the line you want to copy, with your cursor still on the line (no need to highlight the line), you can use `Shift` + `Alt` + `DownArrow` on your keyboard, and it will copy the entire line down. Cheers 🍻

@Frankslaboratory Жыл бұрын

Hi Steve, I didn't know it, I will add it to my list of VSCode keyboard shortcuts and I will start using it. thank you for a useful tip! Also thanks for your kind feedback

@soumadip_skyy_banerjee Жыл бұрын

Thank u so much! Love ur accent, where are u originally from?

@Frankslaboratory Жыл бұрын

Hi Soumadip, nice to meet you. I'm from Prague, Czech Republic, I've lived in a UK for a very long time so my accents is a mix of everything :D

@felipe1876 Жыл бұрын

Hello, comment reader. Knowledge check question: Why the maxLength must be >= 2?

@javifontalva7752 Жыл бұрын

Have you got any book recommendation to master canvas html5?

@Frankslaboratory Жыл бұрын

Hi Javi, there probably are good books about canvas, but I learned what I know from online JavaScript courses, online documentation and dissecting other peoples code :D If you find a good book please let me know, I would be interested to read it as well

@time4062 Жыл бұрын

I am wonder if we can make classic space 🚀 plan fight 2d play in js

@Frankslaboratory Жыл бұрын

I'm not familiar with that game, will try to Google it

@time4062 Жыл бұрын

Share flow field video

@Frankslaboratory Жыл бұрын

I'm just finishing editing it. It's almost ready

@time4062 Жыл бұрын

@@Frankslaboratory you are so nice artist bro

@AZHARakaGoat Жыл бұрын

This part 44:00