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
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!
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 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
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
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
@@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
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.
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
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!
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.
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
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 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.
@@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!
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
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
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
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
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.
Hi Mike. I would have to see your code. You can show me on Twitter. CZcams 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
@@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.
class Name { #privateProperty; constructor(){ this.#privateProperty = 1; } #privateMethod(){ ... } } I usually use this syntax, I used private class features in multiple recent tutorials
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
@@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).
@@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.
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)
@@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
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
@@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.
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.
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
Really cool. You are probably spending more time to polish these things than anyone else on CZcams! :-)
Keep it up!
Thank you Radu, it means a lot coming from the master programmer like you
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!
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
Dear Franks Laboratory. will you please create tutorials of how to outline each color area. I have tried many option but could not success.
@@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
Sir you are amazing. You deserve 1million subs. I will like your video so you reach more people.
Done my friend!!!
I have subscribed to skillshare…
@@Frankslaboratory watched your course. Masterpiece as always
After 10 minutes I can tell this video worth more than w3c’s material about it.
Thx and good job!
Amazing content as usual! Your tutorials are always so comprehensive and well edited - thanks for the knowledge and great videos haha 🙌🏽👑
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.
Wow, all design arts are beautiful. And nice video for learning art from js thanks.
Thank you Adem, I'm glad you like it, it was a fun coding experiments session for me :D
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.
Game devs are the best. Thanks 😊
Glad you think so :D
I finished successfully :), I liked this Canvas Draw Cool Effect
Saved your class in skillshare. Will watch later❤️
Love videos showing creative ways of generating patterns
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
JavaScript side scoller game part - 3 with super power please make a video on it I have been very excited about that
I am making it now
Oh! My! God!
Is this a gold mine?
That's art right there!
Yay, glad you think so
This man is the canvas master!!!
I try my best, hahaha
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 😂
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
@@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
Oh dear. You crazy man. You broke me. It’s nuts.
hahahaha. Hi Avinash, hope you're doing well :D
Really nice!!!
Thank you! :)
Thanks for such awesome Crash course for beginners 😍
I love your channel! Could you also make classes with p5js? :)
Amazing
Thanks Charles
Really Awesome!
Фантастика!
Thank you ❤️
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.
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!
@@Frankslaboratory yes I'm taking it slow one step at a time, but always studying more each day, thank you
I ove it! Thank you!
THANK YOU!!! this tutorial is REALLY COOL!!!!!
Hi Isabel, glad you found some value!
Wonderful 😳
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
Wonderful!
Thanks Shaikh
nice, plan for weekend set! :)
Have fun! :)
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
WoooooooooooooooooooooooooooooooooooooooooW!
Hi Roberto! :)
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!
Thank you for your suggestions, I will look into multiplayer games when I have some free time
@@Frankslaboratory mvp
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.
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
Very cool channel. Any plans for webgl(no libs) content?
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
Franks lab vs webgl is going to be mind blowing haha can't wait
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?
Hi Aznarez, I'll add it to my list, let's see if I find a project where these techniques fit well
Looking good man, me likey.
Glad you like ! :)
Very good as always!
Hi Pierre. Thank you
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?
this is awesome!
Glad you like 😊😊
nice
Thanks
Great👏
Thank you :)
wheres link to the code you used?
vsc has WYSIWYG ?
Great video. learned alot.
Glad you found some value, thank you for letting me know
nice to have a new video a gain from you 😍
Hi Sami 😍
@@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.
@@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!
Content is excellent and engaging. Please slow down your rate of coding; it is too fast for a beginner
Super
Thanks
Sir you are javascript king
I want to learn with you
amazing
Thank you Fadi
hello ! was wandering HOW CAN WE AUTOMATE the bezier curves animation! ^^
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
@@Frankslaboratory ^^
Like! Please record a tutorial on how to make stock chart* on canvas)
Good idea, will look into this topic
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 ?
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
Which IDE did you use in this video?
VS Code
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
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
Souce code plz
15:26 "scale also adds up..." actually I think it multiplies up.
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
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.
Hi Mike. I would have to see your code. You can show me on Twitter. CZcams 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
@@Frankslaboratory Thank you for the response. Unfortunately not on twitter. Can I send it to your business email? Sorry if this is all inconvenient.
Sure. I will check my email when I'm home. I'm on my phone now
@@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.
@@mikerossouw2124 Thank you for your kind words Mike, much appreciated
where i can find code
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
How to create private properties in ES6 classes?
class Name {
#privateProperty;
constructor(){
this.#privateProperty = 1;
}
#privateMethod(){
...
}
}
I usually use this syntax, I used private class features in multiple recent tutorials
What is the name of the intro song? Thanks!
Hi. I paid an artist to produce this song for me. It's a custom EDM piece
@@Frankslaboratory it's awesome!
Hi Frank, How are you? Long time since I commented ❤️
Hi Soju, yea it's been a while since we spoke, good to see you here, hope you're well ❤️
@@Frankslaboratory I am good, Thankyou
👋
Hi Murat
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？
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
@@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).
@@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.
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)
@@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
If this is creative coding for "beginners," I'm scared to see what advanced creative computing looks like!
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
@@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.
Bro I am very confused in this keywords😢😢
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.
PЯӨMӨƧM
its to much for my brain.