Learn Creative Coding: Image Effects

🎓 Continue Learning (Creative Coding Courses)
🌀 Next Level Flow Fields https://www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A
🪄 Advanced Text & Particle Effects https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01
⚛️ Pixels, Particles & Physics https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E
🌿 Fun with Fractals https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB

Learn how to control images, slice them into pieces and unleash a series of different interactive animated effects.

DISCOVER creative coding techniques that will take your projects to the next level and practice HTML, CSS & JavaScript at the same time.

We want to really UNDERSTAND so there will be NO frameworks and NO libraries. We will write everything line by line using vanilla JavaScript and Object Oriented Programming. We will explain every line of code to make sure, we have a COMPLETE CONTROL over the effects.

Have you decided that this year you want to become really good at JavaScript and need a set of fun, visual and memorable projects to learn and practice on?
Have fun!

⭐️Today we will build a series or effects that DEFORM, ASSEMBLE & BREAK IMAGES apart in different ways: ⭐️
00:00 Image manipulation effects masterclass
00:42 HTML, CSS & JavaScript setup
02:08 How to organise anything into a grid
08:33 How to draw, crop and slice images with JavaScript
12:38 How to animate images with JavaScript
🎨 "SLICE & DICE" EFFECTS on images 🎨
14:25 Mouse interactivity
16:15 How to find the distance between two points
19:17 Getting direction from point A to point B
24:08 Motion physics formula (friction, easing)
🖼️ "ASSEMBLE" EFFECTS on images 🖼️
30:14 Moving the cells around
33:08 Performance optimizations
🎭 CREATIVE CODING EXPERIMENTS 🎭
34:41 Cell index, animation delay and more..

💪 BEGINNER CHALLENGE: Play with the values I showed you in the video and come up with a new unique effect, something that I didn't do in the video.

🏋️ ADVANCED CHALLENGE: Can you come up with your own mathematical pattern to assemble the image in a unique way?

What's next?
Try some of these more advanced effect using the same physics formula we learned today:
Particle Images https://youtu.be/vAJEHf92tV0
Particle Text https://youtu.be/2F2t1RJoGt8

Get Skillshare FREE for 1 month:
https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on

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

Видео Learn Creative Coding: Image Effects канала Franks laboratory