Particle Experiments: Liquid Effects

Liquid effect is an important technique for every creative coder. Let's explore how to apply it and how to control which shapes get liquified and which stay intact, to allow for unique visual combinations. Let's explore creative coding for beginners with HTML, CSS and vanilla JavaScript. Have fun!
Want to build this effect FROM SCRATCH? Follow these steps with me:
Step 1: • Learn Creative Coding:...
Step 2: • Particle Physics in Ja...
Step 3: this video ( • Particle Experiments: ... )
Particle systems masterclass FULL PLAYLIST: • Particle Effects Maste...
Download STARTER CODE: www.frankslaboratory.co.uk/do...
codepen.io/franksLaboratory/p...
(if you can't download the files, try to use a different browser or VPN to change your country)
Create beautiful particle systems with HTML5, CSS3 and plain vanilla JavaScript, no frameworks and no libraries. Understanding how the code works will allow us to transform this codebase into multiple very different effects. Let's explore the basic techniques and then take them to the limits in this particle effects crash course.
If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪
www.udemy.com/course/learn-cr...
www.udemy.com/course/learn-ga...
www.udemy.com/course/creative...
www.udemy.com/course/build-an...
www.udemy.com/course/learn-ht...
www.udemy.com/course/remake-r...
www.udemy.com/course/learn-ht...
Get Skillshare FREE for 1 month: ‍🎓
www.skillshare.com/en/r/profi...
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

[@Radu]

This is a great idea. Would never have thought to get the effect like that.

[@lexart1]

Vynikající. Jako vždy. Díky.

[@Frankslaboratory]

To rad slysim :D

[@hackerman3511]

Man, your tutorials make me feel like a real hacker. I have been making games for around three years now, and have tried a variety of game engines, but I am now taking a break from those engines, because of what has happened recently in the Game Industry. I really look forward to improving in JavaScript(P.S: I am learning a 69 hour course on JavaScript). I would like to thank you for suggesting Game Programming Patterns in one of your videos--I can see you used it's knowledge well! Cheers!

[@smicolon]

as always very informative

[@Frankslaboratory]

Glad you found some value!

[@aravindvv2276]

Hola Frank the magician 🤩 long time no see 😍 can see the videos are still top-notch ❤️ didnt expect anything less from you 💪

[@Frankslaboratory]

Hi Aravind, good to see you. It's been a while

[@aravindvv2276]

❤️

[@AZHARakaGoat]

NYC I have a question Can u make a game like "death pipe" (just simple version) It's harder for me

[@jvoynar5826]

Convection? const convectionFactor = 0.01; this.vy += (this.y < this.effect.height / 2) ? convectionFactor : -convectionFactor; What a cool journey!

[@YakoBlast]

Cool

[@evil_core3029]

Your tutorials are extremely cool and you are already a master of canvas 2D game development, would you mind to start any tutorials with libraries like pixijs or others?

[@Frankslaboratory]

Hi, I could do libraries, but it's more fun to code it from scratch for me. Everything that these libraries can do can be done with vanilla JavaScript

[@forgottenaquarium2879]

Amazing 😍

[@Frankslaboratory]

Glad you think so

[@kevinbittner5069]

Hi Frank. I have a question. I be been trying to make an effect similar to this but haven't quite been able to figure it out. First I wanted to be able to change the color of only the particles I interact with. the second effect I wanted to try was the lines connecting the points. If there is 3 or more I would like the area inside these lines to be colored based on the a mix of the line colors and fade based on the distance variable so the closer the 3 points are the brighter the color and fade all the way to the when they disconnect I want the color area to stop. Any hints?

[@Frankslaboratory]

Hi. The first thing is very easy. We already have a code block where we push particles away if they are inside the interaction area. You can do anything with the particles in there. Inflate them. Recolor them etc. The second effect will need a more complex solution probably. I've never tried an effect like that. Will look into it and do a tutorial on it if I get some nice results. Try to Google 'Delaunay triangulation creative coding' and look though some images, to see if that's something similar to what you are trying to achieve.

[@kevinbittner5069]

@@Frankslaboratory Thanks for the reply. I will keep trying with the colors part. I checked out the 'Delaunay triangulation' you mentioned. That isn't quite the effect I was talking about still very cool. How I was introduced to this type of effect it was called Plexus. If you google "Animated Plexus Backgrounds" you'll see a few with the filling feature I mentioned. This effect has been one of my all time favorites. I have one in particular that I use as a stream background that looks incredible. I could upload it to a google drive or something if it would help you understand the effect better. My explanation may not do it justice. It does however fit in really well with what you are already doing. Thought I'd mention it.

[@M4rt1nX]

Hi Frank, what are your thoughts now that there is a huge controversy regarding a certain game engine? When I embarked on this journey, I was thinking about affordability because seme engines are very system demanding.

[@Frankslaboratory]

I would probably not choose Unity if I was starting a new project. I'm not an expert on this topic though there are more qualified people on KZbin to discuss this

[@zohaibqurban7386]

nice

[@Frankslaboratory]

Thanks Zohaib