Learn Creative Coding: Fractals

[@Frankslaboratory]

EXTENDED class with object oriented code structure and ❄FRACTAL RAIN ❄effect as the final project: www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB

[@Radu]

Really cool. You are probably spending more time to polish these things than anyone else on KZbin! :-) Keep it up!

[@Frankslaboratory]

Thank you Radu, it means a lot coming from the master programmer like you

[@Frankslaboratory]

EXTENDED class with object oriented code structure and ❄FRACTAL RAIN ❄effect as the final project www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB

[@vimallama5981]

Dear Franks Laboratory. will you please create tutorials of how to outline each color area. I have tried many option but could not success.

[@Frankslaboratory]

@@vimallama5981 Hi Vimal, you would have to be more specific, if each area is a shape you can just outline them using strokeStyle property. I don't fully understand what you are trying to achieve

[@compilejs110]

Sir you are amazing. You deserve 1million subs. I will like your video so you reach more people.

[@nerofear12]

Done my friend!!! I have subscribed to skillshare…

[@mdAhnafTahmid]

@@Frankslaboratory watched your course. Masterpiece as always

[@GoodheadOffical]

After 10 minutes I can tell this video worth more than w3c’s material about it. Thx and good job!

[@phoenixxofficial]

Amazing content as usual! Your tutorials are always so comprehensive and well edited - thanks for the knowledge and great videos haha 🙌🏽👑

[@Frankslaboratory]

Hi Phoenix, thank you for your kind feedback, I'm learning how to make the step by step process in my tutorials easy to follow.

[@audiodrocher]

Game devs are the best. Thanks 😊

[@Frankslaboratory]

Glad you think so :D

[@AnimeThings_]

JavaScript side scoller game part - 3 with super power please make a video on it I have been very excited about that

[@Frankslaboratory]

I am making it now

[@holoarcade]

I love your channel! Could you also make classes with p5js? :)

[@sagar-tt4ub]

Always good to see a video from you, Frank. I always think that I am good at generative art, then you drop a video and ground me 😂

[@Frankslaboratory]

Hi Sagar, glad to hear I managed to surprise you. I think you are good at gen art, but there are so many techniques and so many things to learn there will always be something new for us

[@sagar-tt4ub]

@@Frankslaboratory There indeed are a lot of things to learn, hence I keep visiting your channel regularly. Even a lot of my friends watch you. I kept bugging them to watch till they agreed, now they are hooked :p

[@programer115]

wow how perfect, how do you play with the codes, how i wish i knew 10% of what you know, congratulations professor, with your videos i see that there is no limit in programming.

[@Frankslaboratory]

Hi Alessandro, it's easier if you take it step by step, eventually you will get there if that's what you want. Good luck with your coding studies!

[@programer115]

@@Frankslaboratory yes I'm taking it slow one step at a time, but always studying more each day, thank you

[@diamondkingx6281]

That's art right there!

[@Frankslaboratory]

Yay, glad you think so

[@user-lt9md7mw1m]

When it comes to js and js gaming there are few people and you're probably the best, but I was only able to find 1 ok video on a multiplayer snake game

[@user-lt9md7mw1m]

There's one thing that imo would elevate your tutorials to extra godlike level would be multiplayer games. Like quiz game or simplified moba in a browser would be super popular, please!

[@Frankslaboratory]

Thank you for your suggestions, I will look into multiplayer games when I have some free time

[@user-lt9md7mw1m]

@@Frankslaboratory mvp

[@문멩멩]

Really nice!!!

[@Frankslaboratory]

Thank you! :)

[@shaikhsanuar5339]

Thanks for such awesome Crash course for beginners 😍

[@avinashdas1013]

Oh dear. You crazy man. You broke me. It’s nuts.

[@Frankslaboratory]

hahahaha. Hi Avinash, hope you're doing well :D

[@parthasarathiarjunan2690]

Great knowledge share Frank. Could you do a separate video about your development and environment setup? with the plugins and extension used?. Thanks a lot.

[@Frankslaboratory]

Hi Parthasarathi, I might make a video about my setup, good idea, it's actually very simple, I use Google Chrome browser and VS code editor with live server plugin for auto reloads

[@pasblin]

Great tutorial, would it be possible for you to upload a tutorial on the basics of grouping and moving elements, resizing elements with mouse events, dragging and dropping one element into another etc?

[@Frankslaboratory]

Hi Aznarez, I'll add it to my list, let's see if I find a project where these techniques fit well

[@chlbri]

Amazing

[@Frankslaboratory]

Thanks Charles

[@e-sportsorganization8082]

nice, plan for weekend set! :)

[@Frankslaboratory]

Have fun! :)

[@isabelmorel2225]

THANK YOU!!! this tutorial is REALLY COOL!!!!!

[@Frankslaboratory]

Hi Isabel, glad you found some value!

[@arroneisen8646]

Content is excellent and engaging. Please slow down your rate of coding; it is too fast for a beginner

[@agustinlavalla8892]

Really Awesome!

[@adiyn_]

vsc has WYSIWYG ?

[@robertobenedit]

WoooooooooooooooooooooooooooooooooooooooooW!

[@Frankslaboratory]

Hi Roberto! :)

[@kaosgaming3269]

Might be a dumb question how do you get the view on the right ? sorry new to all of this. And is Visual studio code correct to use ?

[@Frankslaboratory]

Hi. Its just VS code with live server plugin and on the right I have Google Chrome. I clip the unnecessary parts of browser window with my video editing software to reduce distractions

[@WEBSTART-LIVE]

Фантастика!

[@Frankslaboratory]

Thank you ❤️

[@shaikhsanuar5339]

Wonderful!

[@Frankslaboratory]

Thanks Shaikh

[@pierre-louisdrevon2213]

Very good as always!

[@Frankslaboratory]

Hi Pierre. Thank you

[@samiwebdev]

nice to have a new video a gain from you 😍

[@Frankslaboratory]

Hi Sami 😍

[@samiwebdev]

@@Frankslaboratory Hi Frank 😍 May i give a suggestion ? how about a tutorial to build a analog clock with canvas. this will help watchers to have fully understand of rotation and positioning in Canvas.

[@Frankslaboratory]

@@samiwebdev I like the idea, I fully explore rotation in the first part of this video, would be easy to use that for an analog clock project. Will add it on my list!

[@mikerossouw2124]

Enjoyable and informative as usual. The only problem I have is that my drawing operations seem to be in the wrong order - the first branch is stacked above the child branches which are stacked above their child branches. So detail (specifically shadow detail) is lost. I cant get my head around why the first branch isnt drawn first. Anyhow if you have any suggestions I would be grateful. Keep up the good work.

[@Frankslaboratory]

Hi Mike. I would have to see your code. You can show me on Twitter. KZbin usually auto blocks comments that have links. If you set global composite operation to destination over you swap drawing layers but it will also move shadows on top which is something you probably don't want

[@mikerossouw2124]

@@Frankslaboratory Thank you for the response. Unfortunately not on twitter. Can I send it to your business email? Sorry if this is all inconvenient.

[@Frankslaboratory]

Sure. I will check my email when I'm home. I'm on my phone now

[@mikerossouw2124]

​@@Frankslaboratory I hope all the viewers/subscribers realise that as well as being a very good tutor - you are also a very helpful and decent chap. Thank you for taking the time to help me with my code. Not many would have made the effort. Keep up the good work.

[@Frankslaboratory]

@@mikerossouw2124 Thank you for your kind words Mike, much appreciated

[@bargeosch6427]

Great video. learned alot.

[@Frankslaboratory]

Glad you found some value, thank you for letting me know

[@youcube291]

Super

[@Frankslaboratory]

Thanks

[@youcube291]

Sir you are javascript king

[@youcube291]

I want to learn with you

[@karandangol132]

Souce code plz

[@sallylauper8222]

15:26 "scale also adds up..." actually I think it multiplies up.

[@Frankslaboratory]

Hi Sally. It depends what you mean by multiplies. Thanks for pointing this out I will spend more time on how scale works the next time I use it

[@prometheusli101]

Sir, If i dont set ctx.fillRect(0,0,*,*), And changed to other value like ctx.fillRect(50,50,*,*), The rect can't rotate by origin, why？

[@Frankslaboratory]

Hi Prometheus, I don't understand your question, what do the stars mean? Are you not filling width and height of the rectangle? Show me the entire code block

[@prometheusli101]

@@Frankslaboratory yes, stars is mean width and height, if i set (0,0,width,height),rectangle is rotate around the point (0,0),but if i change it to other value like (50,50),it's not rotate around the point(50,50).

[@Frankslaboratory]

@@prometheusli101 We use translate method to move rotation centre point around so ctx.translate(50,50); will make it rotate from that point as long as initial x and y of that rectangle is set to 0 0 so ctx.fillRect(0,0,w, h); Values passed to translate method move rotation centre point, values passed as x and y to fillRect change where the rectangle starts in relation to point 0 0 on canvas. Point 0 0 on canvas is top left corner or moved around by translate method.

[@Frankslaboratory]

so if you want the rectangle to rotate around it's own centre set it's original x and y as minus half it's width and height like this ctx.fillRect(-size/2, -size/2, size, size)

[@prometheusli101]

​@@Frankslaboratory i had already seen translate method in your video, i just confuse why translate(50,50) not the same as change to ctx.fillRect(50 ,50 , width, height) when i rotate the rect

[@muratdumlutr]

👋

[@Frankslaboratory]

Hi Murat

[@jeffreycraig318]

PЯӨMӨƧM

[@Knechtspieler]

its to much for my brain.

[@fadikhaleel2092]

amazing

[@Frankslaboratory]

Thank you Fadi

[@adempaul8951]

Wow, all design arts are beautiful. And nice video for learning art from js thanks.

[@Frankslaboratory]

Thank you Adem, I'm glad you like it, it was a fun coding experiments session for me :D

[@evangeloskolimitras5276]

Very cool channel. Any plans for webgl(no libs) content?

[@Frankslaboratory]

Hi Evangelos, yes I will do some webgl with no libraries, need to spend more time with it to find the best beginner friendly techniques

[@phoenixxofficial]

Franks lab vs webgl is going to be mind blowing haha can't wait

[@jeteloriaga]

The only course one needs to take to draw by code - especially if one is already good with relevant math! Thanks so much, you are my hero! There is something I had been trying to solve on my own and voila you gave me the solution here! More power!

[@JNET_Reloaded]

wheres link to the code you used?

[@skydragon929]

Really good job, and thank you very much! would you kind enough to teach us how to dynamically create a puzzle (10x10) with any user selected image?

[@NoobOp-p9g]

Bro I am very confused in this keywords😢😢

[@Frankslaboratory]

It is confusing at first, basically 'this' means the object you are inside of. I would recommend doing a complete beginner friendly object oriented JavaScript course, before diving into more complex projects like this one.

[@gabrielalbino7712]

Love videos showing creative ways of generating patterns

[@Frankslaboratory]

Hi Gabriel, there are probably 10 000s of different patterns that can be done with this codebase, by making just minor tweaks. I had fun with my experiments :D

[@niyagentleman8143]

hello ! was wandering HOW CAN WE AUTOMATE the bezier curves animation! ^^

[@Frankslaboratory]

Hi, there are many ways to do that, probably I would just create animation loop and request animation frame, then use deltaTime technique to create a periodic update of values, I use that in many other tutorials

[@niyagentleman8143]

@@Frankslaboratory ^^

[@deathdefier45]

Thank you so much frank, you're a hero for sharing such beautiful knowledge, I hope to be like you someday and help many people like you have.

[@thierryninziza9729]

Hi Franks, thanks alot for your videos. Can you please, if possible, in the nxt video show us how we can save/export canvas as GIF. Thanks in advance

[@shaharlevi8966]

I finished successfully :), I liked this Canvas Draw Cool Effect

[@brian12463]

Which IDE did you use in this video?

[@Frankslaboratory]

VS Code

[@rdawo6408]

Oh! My! God! Is this a gold mine?

[@mdAhnafTahmid]

Saved your class in skillshare. Will watch later❤️

[@VeereshPatel15]

where i can find code

[@Frankslaboratory]

If you want the code I can send it on Twitter, but I make 3 separate effects here, I only kept code for the last final effect

[@MDIMRANHOSSEN-n8x]

nice

[@Frankslaboratory]

Thanks

[@Stufe2]

I ove it! Thank you!

[@elProdigio]

What is the name of the intro song? Thanks!

[@Frankslaboratory]

Hi. I paid an artist to produce this song for me. It's a custom EDM piece

[@elProdigio]

@@Frankslaboratory it's awesome!

[@shaikhsanuar5339]

Wonderful 😳

[@sunrise_7878]

Hi Frank. Thank you so much for this tutorial. I'm a bit stuck with the for loop, I only get one of the sides.. if I delete the positive branch then it shows the negative branch and if I delete the negative branch, it shows me the positive branch. But it does not give me both. Could you please help me out. Take care

[@Frankslaboratory]

Hi Sunette. It's a typo somewhere in your code. You have to make sure the code is the same as mine. Sometimes typos are hard to spot. If you want the final source code to compare you can message me on Twitter

[@tamildevtutorial]

How to create private properties in ES6 classes?

[@Frankslaboratory]

class Name { #privateProperty; constructor(){ this.#privateProperty = 1; } #privateMethod(){ ... } } I usually use this syntax, I used private class features in multiple recent tutorials

[@sauvignonblanc5086]

Like! Please record a tutorial on how to make stock chart* on canvas)

[@Frankslaboratory]

Good idea, will look into this topic

[@sallylauper8222]

If this is creative coding for "beginners," I'm scared to see what advanced creative computing looks like!

[@Frankslaboratory]

Hi Sally. Advanced creative coding would be things like pixel manipulation effects, 3d webgl etc. It can get much more complex than 2d fractal. This one has no complex math. Did you find this video hard to follow? Which part

[@sallylauper8222]

@@Frankslaboratory No I don't find it hard to to follow (except I make alot of spelling mistakes like "filrect" instead of "fillRect" etc. which take me a long time to correct because while VSCode has good autocomplete, It also doesn't flag "errors" like spelling "fillRect" wrong.) but then I cut my teeth on JavaScript with one of your other creative graphix videos. Right now I'm coding along to the video( making spirals right now), about half way thru, 'cuz I'm taking a long time to tweak the variables 'n stuff. There's a big box of goodies inside ctx. What I meant by my comment is that there's so much you can do with "simple" 2D graphix.

[@RedEyedJedi]

This man is the canvas master!!!

[@Frankslaboratory]

I try my best, hahaha

[@cavemancodeman9519]

Looking good man, me likey.

[@Frankslaboratory]

Glad you like ! :)

[@sojuthomas7727]

Hi Frank, How are you? Long time since I commented ❤️

[@Frankslaboratory]

Hi Soju, yea it's been a while since we spoke, good to see you here, hope you're well ❤️

[@sojuthomas7727]

@@Frankslaboratory I am good, Thankyou

[@zumi7135]

this is awesome!

[@Frankslaboratory]

Glad you like 😊😊

[@he4-f2e]

Great👏

[@Frankslaboratory]

Thank you :)