ASCII Art with Vanilla JavaScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 ต.ค. 2024

ความคิดเห็น • 211

  • @evaristocuesta
    @evaristocuesta 3 ปีที่แล้ว +26

    It's a pleasure to collaborate with a great programmer and teacher like you!!

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +4

      You taught me much more than I taught you, thanks Evaristo ❤

    • @Radu
      @Radu 3 ปีที่แล้ว +2

      Nice. Thank you both! I now know how to make private attributes :-) Didn't know they were a thing in JavaScript!

    • @PixelatedBrain7
      @PixelatedBrain7 3 ปีที่แล้ว

      @@Frankslaboratory hey frank you learning c# or any other programming language?

    • @devjorjis2083
      @devjorjis2083 2 ปีที่แล้ว

      yeeeeeeeeeeeeeeaaaaaah 😍

  • @Frankslaboratory
    @Frankslaboratory  3 ปีที่แล้ว +53

    Hi creative people, do you want more tutorials on pixel particle effects?

    • @_GOUTHAM
      @_GOUTHAM 3 ปีที่แล้ว +2

      yes

    • @Xyzzzz307
      @Xyzzzz307 3 ปีที่แล้ว

      The pixel effects are what have haunted me the most. I'm still unable to figure out these. But I'm trying :)
      One more video for me would be just to indicate what all I'm missing.
      Your Channel Your Rules :)

    • @sakshamgunj6991
      @sakshamgunj6991 3 ปีที่แล้ว

      Yes offcourse!

    • @CoderFromMathura
      @CoderFromMathura 3 ปีที่แล้ว

      Sure sir, u r just so amazing

    • @DannyHille
      @DannyHille 3 ปีที่แล้ว +1

      Yes pixels and particles are always fun :-)

  • @chefbennyj
    @chefbennyj 3 ปีที่แล้ว +3

    Wow! Frank and other top shelf tutorial! You're one of the best there is!

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      Thank you Benjamin, very kind to say that ❤

  • @mdhossen7082
    @mdhossen7082 3 ปีที่แล้ว +1

    awsome design efect

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      Glad you like it. I made many more. Tutorials coming soon

  • @nicklansbury3166
    @nicklansbury3166 3 ปีที่แล้ว +2

    Another Fun Friday! Thanks, as always

  • @worldofstrings
    @worldofstrings ปีที่แล้ว

    Thanks a lot Frank for enlarging the text. Now I can watch your teachings on my cellphone device. No one can simplify it any better.

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

      I try to make the code as large as possible in my recent classes, thank you for reminding me that it's useful, I always try to follow feedback

  • @piersonlippard2911
    @piersonlippard2911 3 ปีที่แล้ว +1

    Happy Friday Frank, OMG....this effect takes me back to my childhood. Great tutorial, thanks Frank. Have a fantastic weekend.

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      Hi Pierson! I'm always up for some over the top, old school, tacky animations, it's my specialty ahaha. Have a great weekend :)

    • @piersonlippard2911
      @piersonlippard2911 3 ปีที่แล้ว

      @@Frankslaboratory Frank, thank you again. I am learning so much from your very clear and in depth explanations. I loved both the CORS topic as well as the built in privacy encapsulation within a class explanation. Looking forward to your next tutorial.

  • @Mainman0011
    @Mainman0011 3 ปีที่แล้ว +3

    Oo nice improvement on the code structure man, great stuffs! :)

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      Thanks Johnathan, I had a lot of help with the code this time, I'm also a student of JavaScript :)

  • @jeenitprajapati3449
    @jeenitprajapati3449 3 ปีที่แล้ว +1

    Wow! Pixel effect is great, Thanks so much Sir Frank.

  • @rishabhgautam4925
    @rishabhgautam4925 2 ปีที่แล้ว

    Thats the reason why i am get into coding❤️❤️❤️❤️ thankyou so kuch “frank laboratory “

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

      Hi Rishabh, glad you found some value ♥️

  • @cheesypizzajokes
    @cheesypizzajokes ปีที่แล้ว

    Thank you! Great introduction to Canvas API as an intermediate programmer

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

      This video is a bit more advanced then my other projects, anything with pixel data gets a bit algorithm heavy, glad you like it

    • @cheesypizzajokes
      @cheesypizzajokes ปีที่แล้ว

      @@Frankslaboratory Ah, really? That's great to hear from you, personally found 90% of it very intuitive, including the areas you mentioned viewers might have trouble understanding. Love the way you went about explaining nested fors, public vs private classes, etc.

  • @canman7773
    @canman7773 3 ปีที่แล้ว +3

    Another great tutorial as always!

  • @MaximusRGZ
    @MaximusRGZ 2 ปีที่แล้ว +1

    I have to say that this is an amazing channel, thanks for all your work Frank

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

      Raúl! Nice to meet you, glad you found my video useful

  • @kevintremerel2619
    @kevintremerel2619 2 ปีที่แล้ว

    Hi Franks, you make my skill grow up and i really appriciate all your works ! ! So i really wanna thanks you ;)
    From Sout- France !

    • @Frankslaboratory
      @Frankslaboratory  2 ปีที่แล้ว

      Hi Kevin, nice to meet you. Thank you for taking the time to leave the feedback, makes me happy to hear you are growing your coding skillset. Greetings to France :)

  • @jeesjans9676
    @jeesjans9676 3 ปีที่แล้ว

    Also, i’ve been following you for the last year and you’ve been improving extremely well, great job. I need to pick up my motivation back been taking a break for the last few months…

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      Thank you for such a nice feedback, sometimes it's hard to find motivation I know, I also struggle with it sometimes. I hope you feel inspired soon :)

  • @StarkRaveness
    @StarkRaveness ปีที่แล้ว

    Hi Frank, thank so much for these tutorials, not only are they awesome but you are able to articulate what is going on very well. Thanks from New Zealand :)

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

      Hi Jeremy, greetings from London to New Zealand. Thank you for taking the time to let me know your feedback

  • @peoplearecool8766
    @peoplearecool8766 3 ปีที่แล้ว +1

    Hi Frank, nice tutorial as always.. keep up the good work.

  • @aylictal
    @aylictal 3 ปีที่แล้ว +3

    @Franks Laboratory instead of event "change" change it to event listener "input". Doing this allows users to visually see it as they slide the bar, making it animate without having to release and is a very beautiful effect for your viewers.

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      Hi, thanks for the tip, just tested it and it does work better :D I made a note and will use input event in the future, thank you for sharing

    • @zentaxnetwork1198
      @zentaxnetwork1198 3 ปีที่แล้ว

      thank you thats a pretty neat effect :D

  • @adrn4418
    @adrn4418 3 ปีที่แล้ว +1

    Love your channel! I am working on HTML5 game and in some cases i feel like i need to improve my skills, and your tutorials are perfect for me! Thanks for sharing your experience with canvas :)

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      Thank you for your nice feedback. There is always much to learn and better way to code something but at certain point when you know all the available tools it becomes much easier

  • @b166er4
    @b166er4 3 หลายเดือนก่อน

    Geat job, i didnt know that you can make this.effect without threejs and shaders.... THX, i ll be back ;)

  • @sertansantos3032
    @sertansantos3032 2 ปีที่แล้ว

    Thank you so much, will use this on my online socket io game

    • @Frankslaboratory
      @Frankslaboratory  2 ปีที่แล้ว +1

      Hi Sertan, good luck with your project!

  • @sagar-tt4ub
    @sagar-tt4ub 3 ปีที่แล้ว

    You're back with another great tutorial, Frank. Sorry, I have been busy with work, lately. But I've always loved your channel, Frank. I always learn new stuff. Keep up with the good work

    • @Frankslaboratory
      @Frankslaboratory  2 ปีที่แล้ว +1

      Hi Sagar, I missed this comment, nice to see a comment from you, thank you for your support

  • @ra1games79
    @ra1games79 3 ปีที่แล้ว +1

    I like this video so much! Thank you for your content :)

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      Really? Thank you, I'm happy to hear that :)

    • @ra1games79
      @ra1games79 3 ปีที่แล้ว

      @@Frankslaboratory Yes, thank you! Maybe you should try to make a mini "photoshop" browser application with some cool effects. With all respect and kindness! :)

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      @@ra1games79 I really like this idea. In my previous video I showed a drawing application I made years ago with paint brushes. Maybe I could make one focused more on image manipulation as well

  • @ayanluap
    @ayanluap 3 ปีที่แล้ว

    Finally!! found a great channel that teaches great stuff. Keep creating this type of amazing content sir!!!

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      Ayan! Nice to meet you, good to have you here

  • @creativewanderers7638
    @creativewanderers7638 3 ปีที่แล้ว

    Hey Frank..all your tutorials are just amazing..iam revisiting all of it again and again to be more creative..also i and my friend started creating canvas games..thankyou so much for all this free stuff..but we have a request for you, can you please also show how to make a canvas project responsive..we are now struggling with that ..please help dear Frank.Best creative teacher ever🥰🥰

    • @Frankslaboratory
      @Frankslaboratory  2 ปีที่แล้ว

      Hi, thank you for such a kind feedback. Yes responsive aspect is very important and I will focus on it more in the future courses

  • @avi12
    @avi12 3 ปีที่แล้ว +1

    It's worth mentioning that you should always host the image on your network, for 2 reasons:
    1. Converting an image to base64 will produce a string that weighs 1/3 more than the original image size
    2. By using a file that contains the data of the image, it can be cachable, unlike base64 which cannot be cached

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +2

      Hi Avi, these are great points and I agree. I think people who know how to set up a server will be able to replace my base64 string and still follow the tutorial, and beginners can just use base64 and consider this tutorial a coding exercise, at least that was my thinking while recording. I never noticed the difference in size, thank you for bringing that up.

    • @avi12
      @avi12 3 ปีที่แล้ว

      ​@@Frankslaboratory It's not only for folks who set up a server but any kind of website
      Even a website that serves static files can benefit from serving images as files

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +2

      @@avi12 true, it wont work with any web hosted image though, it needs specific server settings, otherwise getImageData operation will get blocked by CORS

  • @kautukdwivedi
    @kautukdwivedi 3 ปีที่แล้ว

    Wait is over
    Here he comes again with another great content.

  • @andriikliuiko4233
    @andriikliuiko4233 3 ปีที่แล้ว

    Oh gush. This channel is so underrated.

  • @jamescao2008
    @jamescao2008 3 ปีที่แล้ว

    The image is of two dimensions to viewers. To free the image data from restricting authorization it has been converted to a string of one dimension on the memory.
    To help understating the code, one can think of the image data constructing a three dimensional cubic whose axes of coordinate are denoted by X, Y, Z. The Z is vertical to XY plane towords inner.
    For image, the x value goes from left to right, y from top to bottom, and z holds 4 values of RGBA for each pixel. Each pixel is defined by the locations of x, y and value of z(RGBA) which is the thickness of the cubic.

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      Hi James, thank you for sharing this, this really helps me to visualise what's going on, love it

  • @PossumMedic
    @PossumMedic 2 ปีที่แล้ว +1

    Another great tutorial thank you so much! 😃 🙌‍
    I haven't made the full side scroller yet but I'm using all these lessons to make a "Roll20" clone that has the missing features that me and my dad need for the table top RPG we play together! 🥰
    SUGGESTION: one thing that I think would really help beginners is to including some debug footage.
    For example at 28:36 you called the variable "#converToSymbol" instead of "#convertToSymbol" but by 32:32 the error has been fixed.
    I know it's tempting to gloss over these parts to make the vid more polished but when I was an absolute beginner these things would throw me for a loop and I'd have to move on to another tutorial if I couldn't find a solution in the comments.
    Debugging is such an important skill that most tutorials just leave out. If you feel that including these parts would be boring or make the videos too long maybe an entire video on debugging tips and tricks (that you could point to in your other videos) would be a good solution.
    Again thank you so much these videos have been a huge help! Having practical examples of how to write and use relevant code is so important for my learning style! 🙌‍ I do your tutorials then think "OH! I could use this here!" and go back and update my old projects! 😃
    EDIT: I commented too early 😑 you do have some at the end! 😂 I think more of that would be great for beginners!

  • @LePhenixGD
    @LePhenixGD ปีที่แล้ว

    Amazing tutorial!

  • @soniablanche5672
    @soniablanche5672 2 ปีที่แล้ว

    converting 2d array to 1d array is done the same way, it's (columnIndex * width) + rowIndex, in our case we have to skip 4 indexes because 1 pixel takes 4 values

  • @frankie_goestohollywood
    @frankie_goestohollywood 2 ปีที่แล้ว

    Your tutorials are the best!!!! Thank you so much 🙂

  • @e-sportsorganization8082
    @e-sportsorganization8082 2 ปีที่แล้ว

    fabulous

  • @anhtuanpham3325
    @anhtuanpham3325 2 ปีที่แล้ว

    Amazing video. Thanks a lot!

  • @venetiria
    @venetiria ปีที่แล้ว

    you are an awesome teacher

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +1

      Thank you for your kind feedback, much appreciated

  • @marufhasan21
    @marufhasan21 3 ปีที่แล้ว

    You have a nice choice of thumbnails!

  • @tiennguyentran9358
    @tiennguyentran9358 2 ปีที่แล้ว

    *thank you so much for this tutorial*

  • @boristherin4104
    @boristherin4104 3 ปีที่แล้ว

    nice nice nice ^^ am full of idea with that tuto

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      Hi Boris, awesome, great to hear you feel inspired

  • @havefun5519
    @havefun5519 2 ปีที่แล้ว

    cool video.

  • @Viezieg
    @Viezieg ปีที่แล้ว

    great tutorial as always ! now how could i move each pixel ?

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว

      I released a class on how to move pixels around as individual particles last month

    • @Viezieg
      @Viezieg ปีที่แล้ว

      @@Frankslaboratory oh cool ! thx so much, ill check it rn

  • @chrizzzly_hh
    @chrizzzly_hh 3 ปีที่แล้ว

    Nice tutorial :)
    Some minor recommendations would be to use literal strings for better readability.
    One little thing I wasn't sure about is the average color. It's only reading the first pixel in each cell, which doesn't really mean the average though, or did I miss something?

    • @Frankslaboratory
      @Frankslaboratory  2 ปีที่แล้ว +1

      Hi, yes you are right, I only take the left top pixel from each cell, there is a simple way to average out each cell, I didn't think it was necessary in this case since the end result would look almost identical.

    • @marcinborkowicz2557
      @marcinborkowicz2557 2 ปีที่แล้ว

      Hi, Frank and chrizZzly !
      I had the same impression, Frank samples only one pixel out of entire segment. I'm not really sure, is it safe to assume that a single pixel from a top-left corner of a rectangular pixel area would represent well enought an entire segment avarage color. Maybe with such small images it is fair enought, but when the size of an image grows and the size of a segment shrinks, I would expect some artifacts.
      And yes - this is pure academic conversation:) Great tutorial anyway!

  • @joeNonos
    @joeNonos ปีที่แล้ว

    Hi,
    Image is converted into a shade of gray, pixelated and with a correspondence table, we convert a gray with a letter, this conversion table is done by measuring the black density of a character.
    Am I in the right?
    I don't understand the order of the substitution letters inside the function convertToSymbol
    Anyway, thank you for your excellent work.

  • @samiwebdev
    @samiwebdev 3 ปีที่แล้ว +1

    You are the best man

  • @Knechtspieler
    @Knechtspieler 2 ปีที่แล้ว

    im actually speechless

  • @patsh4596
    @patsh4596 2 ปีที่แล้ว

    Thanks for your tutorial. Can I ask if you can share info on how to interact with those particles with mouse move event? Thanks a lot.

    • @Frankslaboratory
      @Frankslaboratory  2 ปีที่แล้ว +1

      Hi, it depends what type of interaction you are looking for, if it's something simple such as changing colour and font size when near mouse, or something a bit more complex like pushing particles around. It could be combined with my 'Image into interactive particles' tutorial to push them around, but it would need a lot of code restructuring. I might make a course on that, would be a cool effect

    • @patsh4596
      @patsh4596 2 ปีที่แล้ว

      @@Frankslaboratory Thanks for your reply. You're right. Converting image to particles and combining pixels Effects with mouse move event, like pushing particles around. That will be more interesting. Look forward to your new tutorial. You're my hero.

  • @NileshDadheech
    @NileshDadheech 3 ปีที่แล้ว

    Amazing sir 💓😊🔥

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      Thanks Nilesh, congratulations on reaching 3k subscribers on your channel!

  • @sakshamgunj6991
    @sakshamgunj6991 3 ปีที่แล้ว +2

    Bro this is lit!

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      Really? Thank you Saksham ❤

    • @sakshamgunj6991
      @sakshamgunj6991 3 ปีที่แล้ว +1

      @@Frankslaboratory
      Oh! Bro no need to thank .
      Recently i started following you and i am really surprised by ur frontend skill..
      And bro plz.. increase the consistency of videos 🙂

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      @@sakshamgunj6991 Consistency can have multiple meanings, for me consistency means quality, not frequency. I can't do more videos and keep the quality up, I have a full time job :D Your frontend skills are also impressive, thank you Saksham

    • @sakshamgunj6991
      @sakshamgunj6991 3 ปีที่แล้ว

      @@Frankslaboratory oh! But yeah seriously quality of videos is damn good! And nice to hear, you have a full time job. Keep up man

  • @comoyun
    @comoyun 3 ปีที่แล้ว

    👍👍👍👍👍👍👍👍

  • @jeesjans9676
    @jeesjans9676 3 ปีที่แล้ว

    Hey Frank, love the video’s. Any chance you can make a small tutorial series on super mario bros game? Like goomba’s moving with collision etc

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      Hi Jees, I'm working on a side scroller tutorial, it will be similar gameplay to Mario, still adding more features and adjusting code, I will make multiple games inspired by Mario eventually, it's my favourite classic game genre :D

    • @jeesjans9676
      @jeesjans9676 3 ปีที่แล้ว

      @@Frankslaboratory Very nice to hear man looking forward to the mini series, it is what a lot of people miss on youtube l, your explaining skills are on point

    • @jeesjans9676
      @jeesjans9676 3 ปีที่แล้ว

      @@Frankslaboratory It would be great because you already handled game engine, sprite animation and simple collision detection

  • @someoneawesome2240
    @someoneawesome2240 2 ปีที่แล้ว

    U BEST!!!

  • @Xyzzzz307
    @Xyzzzz307 3 ปีที่แล้ว +1

    Sir, I wish you would have told about the 'Word Wrap' at 6:47 before. I've been suffering since weeks.

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      Word wrap is important, I'm glad you know it now, it makes life easier :)

    • @Xyzzzz307
      @Xyzzzz307 3 ปีที่แล้ว

      @@Frankslaboratory
      A whole lot easier. I tried changing the image in a project it took me forever to delete the previous base64 🤣🤣

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      @@Xyzzzz307 Oh noo, I'm sorry, that must have been impossibly hard :D You can click at the beginning and then shift + click the end and it will select all the code between these two points

    • @Xyzzzz307
      @Xyzzzz307 3 ปีที่แล้ว

      @@Frankslaboratory
      Thank you Sir 😊

  • @unveil7762
    @unveil7762 3 ปีที่แล้ว

    1st than you. 2nd what the name of the game with the space worm… i was playing it a loooot of years ago….!!! Please reply …

  • @swedishpsychopath8795
    @swedishpsychopath8795 7 หลายเดือนก่อน +1

    How do you set up your browser to auto-refresh when you change the source code?

    • @Frankslaboratory
      @Frankslaboratory  7 หลายเดือนก่อน +1

      VS code with Live server plugin

  • @r-i-ch
    @r-i-ch 3 ปีที่แล้ว

    🤯🤯🤯

  • @alexandergiraldo36
    @alexandergiraldo36 3 ปีที่แล้ว

    hello, could you make a video explaining how to save the animation in canvas to webm or gif format. thanks.

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      Hi Alexander, to export gif is possible, exporting video format is much more complicated, you need to write encoders, I usually just record my browser animation with OBS Studio screen recorder and then use any video editor to trim it and save as mp4 or gif, quick and easy

  • @rishabhgautam4925
    @rishabhgautam4925 2 ปีที่แล้ว

    I am jealous to share with my friend 😏

  • @dmaberlin
    @dmaberlin ปีที่แล้ว

    The fact that you do not have repositories with these projects is your thing? So that people write the code themselves and do not copy?)

    • @Frankslaboratory
      @Frankslaboratory  ปีที่แล้ว +1

      Hi Dima, I include code with extended Udemy classes, on TH-cam it has negative effect on my videos, if you want code for something I can send it over

  • @dreadsturbation
    @dreadsturbation 3 หลายเดือนก่อน

    Can anyone help me? My page just stays loading (the image isn't even failing to load-it's just not doing anything). Some URLs will work (but then the rest of the code doesn't play ball for some reason), so I'm fairly sure it's a problem with the image data type. I have been copying the base64 code with the recommended site, which seems to load up the image fine when not combined with the other code. How do I fix?!

  • @tcgvsocg1458
    @tcgvsocg1458 3 ปีที่แล้ว

    First time i see you video can you please show how to make level one of" street of rage" but from scratch to the very end of the level
    thx a lot for your anwser

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      Hi Jayce, I would love to make a game inspired by street of rage, I will do it, adding it on my to do list

    • @tcgvsocg1458
      @tcgvsocg1458 3 ปีที่แล้ว

      @@Frankslaboratory thx a lot i really enjoy real time from scratch first level

  • @cpr9pg8jez
    @cpr9pg8jez 3 ปีที่แล้ว

    Hey, would making a Chart with canvas possible as a tutorial since you have good experience as a canvas coder?

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      Hi Jay, do you mean some kind of data visualisation like pie charts and bar charts? Interesting, I might do that yea

  • @johnniegilkerson4724
    @johnniegilkerson4724 2 ปีที่แล้ว

    Very nice project, Instead of ascii characters I used emojies.

  • @claudeiflores5929
    @claudeiflores5929 2 ปีที่แล้ว

    effects the avengers

  • @CoderFromMathura
    @CoderFromMathura 3 ปีที่แล้ว +2

    pls sir make a video on 2d shotting game like contra or mario

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +2

      Yes! I will do that, most likely more than one. I really like that idea

    • @CoderFromMathura
      @CoderFromMathura 3 ปีที่แล้ว +1

      @@Frankslaboratory thank you so much sir

  • @Ahm3dAshour
    @Ahm3dAshour 3 ปีที่แล้ว

    I had adhd please can you recommend js course basic to bom to dom and project

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      Hi, I linked some Udemy courses that I like in the video description.

  • @nicklansbury3166
    @nicklansbury3166 3 ปีที่แล้ว

    Hi 'Frank'. I wanted to drop a little comment to say 'Hi' as you haven't been here for around 3 weeks. I hope all is well with you. Knowing you, you're probably busy creating more high-quality content for the rest of us.

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      Hi Nick. Nice to see a message from you. I had to return to office work, no more working from.home so I have less time but new video is ready will release it tomorrow probably. Hope you've been well 🙏

  • @RaquePlays
    @RaquePlays 3 ปีที่แล้ว

    i want to know how to find like ehat to use in j.s on situation where i am a absolute beginner with j.s

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      Hi Himanshu, how are you. Sorry can you rephrase that, not sure what you mean

  • @kabirjyotibakshi3547
    @kabirjyotibakshi3547 3 ปีที่แล้ว

    Can you make soft bodies in canvas 2d?

  • @wcdeich4
    @wcdeich4 3 ปีที่แล้ว

    Is there a way to create a button to download the animation as an AVI or MPEG video?

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      Anything is possible but to output video formats you need encoding algorithms, that's a lot of code or libraries involved. You can have it auto play in browser and export it as a series of images, that's much easier.

    • @wcdeich4
      @wcdeich4 3 ปีที่แล้ว

      @@Frankslaboratory Cool :) I'm trying to learn more JavaScript & that seems like an incredible challenge, but would be a great accomplishment if I could get it to work :)

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      @@wcdeich4 Some things can be challenging yea, I'm also learning new things every day, so many possibilities these days

  • @aiortairaan5458
    @aiortairaan5458 ปีที่แล้ว

    please provide source code of this extremely interesting project.

  • @zhifuxi8252
    @zhifuxi8252 3 ปีที่แล้ว +1

    这个太牛逼了

  • @surajd8414
    @surajd8414 2 ปีที่แล้ว

    is it clickable?

  • @sandworm9528
    @sandworm9528 ปีที่แล้ว

    Amazing!!! Except for OOP... Ew

  • @bytenol
    @bytenol 3 ปีที่แล้ว +1

    Frank is always looking straight like a bot

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +2

      Are you saying I look stiff on camera? It's true, my camera delivery is horrible haha. I'm a nerd, not comfortable on video ahaha

    • @bytenol
      @bytenol 3 ปีที่แล้ว +1

      @@Frankslaboratory we're not going to be here if it's horrible lol 😀. Just saying the first thing that comes to my mind when watching your video "The A.I guy is here"

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      @@bytenol hahaha, I need to take camera delivery classes or something :D

  • @kirlmboss6352
    @kirlmboss6352 3 ปีที่แล้ว

    can you tell me how much math do you know?

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว

      Hi Kirim, I'm not very good with math, but when you know the code and navigate in it well, it's easy to Google simple algorithms and insert them into your JS to achieve all different kinds of effects. I'll speak more about this soon in future video

  • @skarbazalam4284
    @skarbazalam4284 3 ปีที่แล้ว

    just going to watch your video bro then tell you hows that

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      Hi, technique I use today is a bit more advanced, but it can be used to achieve really cool particle effects as well, not sure if people like more complex stuff like this, experimenting :D

  • @The_Super_Musician
    @The_Super_Musician ปีที่แล้ว

    SOURCE CODE PLEASE

  • @StellarWeb008
    @StellarWeb008 3 ปีที่แล้ว

    Private class fields look wierd

  • @thechoosen4240
    @thechoosen4240 8 หลายเดือนก่อน

    Good job bro, JESUS IS COMING BACK VERY SOON;WATCH AND PREPARE

  • @CristianAlexandruRadu
    @CristianAlexandruRadu 2 ปีที่แล้ว

    done this, it's great

  • @DannyHille
    @DannyHille 3 ปีที่แล้ว +1

    You do not need to pass width and height in the constructor, you can get a reference to canvas from the context, so you can set: this.#width=ctx.canvs.width;

    • @DannyHille
      @DannyHille 3 ปีที่แล้ว +1

      btw: I love your videos!!!

    • @Frankslaboratory
      @Frankslaboratory  3 ปีที่แล้ว +1

      @@DannyHille Hi Danny, thank you for the tip, I made a note and will use it next time

  • @itsnobledean9450
    @itsnobledean9450 ปีที่แล้ว

    how can he say clean code and object oriented programming in the same sentence? functional programming is clean. definitely not oop

  • @anilrai1299
    @anilrai1299 ปีที่แล้ว

    Mannnn where was your channel this whole time 🥶 I’m overwhelmed by the quality of your content and confused where to start from 🫨

  • @unknown-bx8my
    @unknown-bx8my 3 ปีที่แล้ว

    👍👍👍👍👍