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 KZread! :-) Keep it up!

@Frankslaboratory

2 жыл бұрын

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!

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

@Frankslaboratory

2 жыл бұрын

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.

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

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.

Saved your class in skillshare. Will watch later❤️

Wow this tutorial is REALLY awesome. I understood the basic of HTML canvas and was able to make my own fractal patterns after this tutorial. Thanks a lot!

@Frankslaboratory

2 жыл бұрын

Hi Hye, glad to hear you managed to make your own fractal shapes, congratulations on completing this class !

Love videos showing creative ways of generating patterns

@Frankslaboratory

2 жыл бұрын

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

Thanks for such awesome Crash course for beginners 😍

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

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

@Frankslaboratory

2 жыл бұрын

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

I ove it! Thank you!

Really Awesome!

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

@Frankslaboratory

Жыл бұрын

Hi Isabel, glad you found some value!

That's art right there!

@Frankslaboratory

2 жыл бұрын

Yay, glad you think so

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

This man is the canvas master!!!

@Frankslaboratory

Жыл бұрын

I try my best, hahaha

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?

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

Very good as always!

@Frankslaboratory

2 жыл бұрын

Hi Pierre. Thank you

nice, plan for weekend set! :)

@Frankslaboratory

2 жыл бұрын

Have fun! :)

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

2 жыл бұрын

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

2 жыл бұрын

@@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

Фантастика!

@Frankslaboratory

2 жыл бұрын

Thank you ❤️

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

Really nice!!!

@Frankslaboratory

2 жыл бұрын

Thank you! :)

Wonderful 😳

Game devs are the best. Thanks 😊

@Frankslaboratory

Ай бұрын

Glad you think so :D

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

@Frankslaboratory

2 жыл бұрын

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

Wonderful!

@Frankslaboratory

2 жыл бұрын

Thanks Shaikh

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

2 жыл бұрын

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

this is awesome!

@Frankslaboratory

2 жыл бұрын

Glad you like 😊😊

Looking good man, me likey.

@Frankslaboratory

2 жыл бұрын

Glad you like ! :)

Great video. learned alot.

@Frankslaboratory

2 жыл бұрын

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

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

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

@Frankslaboratory

2 жыл бұрын

I am making it now

Amazing

@Frankslaboratory

2 жыл бұрын

Thanks Charles

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

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

2 жыл бұрын

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

2 жыл бұрын

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

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

@Frankslaboratory

2 жыл бұрын

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

2 жыл бұрын

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

WoooooooooooooooooooooooooooooooooooooooooW!

@Frankslaboratory

2 жыл бұрын

Hi Roberto! :)

Great👏

@Frankslaboratory

2 жыл бұрын

Thank you :)

nice to have a new video a gain from you 😍

@Frankslaboratory

2 жыл бұрын

Hi Sami 😍

@samiwebdev

2 жыл бұрын

@@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

2 жыл бұрын

@@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!

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

2 жыл бұрын

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

@user-lt9md7mw1m

2 жыл бұрын

@@Frankslaboratory mvp

amazing

@Frankslaboratory

2 жыл бұрын

Thank you Fadi

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

@Frankslaboratory

2 жыл бұрын

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 ?

@Frankslaboratory

2 жыл бұрын

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

@Frankslaboratory

2 жыл бұрын

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

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

wheres link to the code you used?

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 ^^

Which IDE did you use in this video?

@Frankslaboratory

5 ай бұрын

VS Code

vsc has WYSIWYG ?

nice

@Frankslaboratory

9 ай бұрын

Thanks

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

2 жыл бұрын

Hi Mike. I would have to see your code. You can show me on Twitter. KZread 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

2 жыл бұрын

@@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

2 жыл бұрын

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

@mikerossouw2124

2 жыл бұрын

​@@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

2 жыл бұрын

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

How to create private properties in ES6 classes?

@Frankslaboratory

2 жыл бұрын

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

Super

@Frankslaboratory

Жыл бұрын

Thanks

@youcube291

Жыл бұрын

Sir you are javascript king

@youcube291

Жыл бұрын

I want to learn with you

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

2 жыл бұрын

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

2 жыл бұрын

@@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

2 жыл бұрын

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

@nerofear12

2 жыл бұрын

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

@mdAhnafTahmid

2 жыл бұрын

@@Frankslaboratory watched your course. Masterpiece as always

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

@Frankslaboratory

2 жыл бұрын

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

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

@Frankslaboratory

2 жыл бұрын

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

@sojuthomas7727

2 жыл бұрын

@@Frankslaboratory I am good, Thankyou

What is the name of the intro song? Thanks!

@Frankslaboratory

2 жыл бұрын

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

@elProdigio

2 жыл бұрын

@@Frankslaboratory it's awesome!

Souce code plz

where i can find code

@Frankslaboratory

2 жыл бұрын

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

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

2 жыл бұрын

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

2 жыл бұрын

@@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

2 жыл бұрын

@@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

2 жыл бұрын

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

2 жыл бұрын

​@@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!

@Frankslaboratory

2 жыл бұрын

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

2 жыл бұрын

@@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.

👋

@Frankslaboratory

Жыл бұрын

Hi Murat

PЯӨMӨƧM

Bro I am very confused in this keywords😢😢

@Frankslaboratory

10 ай бұрын

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.

its to much for my brain.