1.1 What is a Vector? - The Nature of Code

Sdílet
Vložit
  • čas přidán 5. 08. 2024
  • Welcome to Nature of Code Chapter 1: Vectors! What is a vector? How do they work in p5.js? These questions will all be answered in this first section of this series on p5.Vector. Code: thecodingtrain.com/tracks/the...
    🚀 Watch this video ad-free on Nebula nebula.tv/videos/the-coding-t...
    🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
    🎥 Previous video: • How to Graph Perlin No...
    🎥 Next video: • 1.2 Vector Math - The ...
    🎥 All videos: • The Nature of Code
    References:
    🔗 The Nature of Code Vectors: natureofcode.com/book/chapter...
    Videos:
    🎥 Coding Challenge 52 - Random Walker: • Random Walker in p5.js...
    🎥 Classes in JavaScript with ES6: • 6.2: Classes in JavaSc...
    Timestamps:
    0:00 Welcome to Chapter 1!
    1:08 Scalars have magnitude
    2:09 Vectors have magnitude and direction
    3:40 Thinking of (x,y) as a vector
    9:03 createVector()
    9:34 Add vectors to the random walker code
    11:35 Create a Walker object
    14:00 Next up: start adding the foundation for a physics engine
    Editing by Mathieu Blanchette
    Animations by Jason Heglund
    Music from Epidemic Sound
    🚂 Website: thecodingtrain.com/
    👾 Share Your Creation! thecodingtrain.com/guides/pas...
    🚩 Suggest Topics: github.com/CodingTrain/Sugges...
    💡 GitHub: github.com/CodingTrain
    💬 Discord: thecodingtrain.com/discord
    ✪ Nebula: go.nebula.tv/codingtrain
    💖 Membership: czcams.com/users/thecodingtrainjoin
    🛒 Store: standard.tv/codingtrain
    🖋️ Twitter: / thecodingtrain
    📸 Instagram: / the.coding.train
    🎥 Coding Challenges: • Coding Challenges
    🎥 Intro to Programming: • Start learning here!
    🔗 p5.js: p5js.org
    🔗 p5.js Web Editor: editor.p5js.org/
    🔗 Processing: processing.org
    📄 Code of Conduct: github.com/CodingTrain/Code-o...
    This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
    #forbeginners #javascript #p5js

Komentáře • 131

  • @jl_woodworks
    @jl_woodworks Před 4 lety +230

    I admire your enthusiasm, Daniel. You are a great educator.

  • @marioecg
    @marioecg Před 4 lety +15

    I am so glad you are taking time to remake these series Dan. Thank you!

  • @Trasgoooo
    @Trasgoooo Před rokem +6

    This is fascinating. I was never interested in physics when I was a kid but this is so exciting, you're a great teacher, Daniel!

  • @Metacious
    @Metacious Před 4 lety +9

    No matter how much I study vectors, understanding the what and why is always welcome

  • @plamenyankov2182
    @plamenyankov2182 Před 4 lety +4

    I've just bought your book The Nature of Code and I am planning to eat it from cover to cover while I am taking Computational Mathematics and Programming 2 at university. Thank you man you are the best!

  • @diegoferreira3444
    @diegoferreira3444 Před 4 lety +6

    I'm Glad you still make these vídeos, they're super helpful, thats a real teacher for you

  • @lilyanezlibenmeradi7291
    @lilyanezlibenmeradi7291 Před 3 lety +4

    I am just so happy you exist, for so many reasons!!
    Thank you for the knowledge you are sharing and the enthusiasm you are spreading. ❤️

  • @Brunoenribeiro
    @Brunoenribeiro Před 2 lety +3

    The definitive series to start learning computer graphics. Wish I had classes like these before!

  • @AhmadAlMutawa_abunoor
    @AhmadAlMutawa_abunoor Před 4 lety +3

    You are the reason why I am passionate about coding. I hope I can be as passionate as you are... Keep up the good work.

  • @merajjahir2602
    @merajjahir2602 Před 3 lety

    i have been learning from you for quite some time , what i love is when you are talking about some topic and along the way you seem to have videos about a closely related topic . and when i am watching that video you have another video about another closely related topic .

  • @AK56fire
    @AK56fire Před 2 lety +2

    All your videos are fun to watch.
    Thanks for making them. I learn a lot from them.

  • @SameBasicRiff
    @SameBasicRiff Před 4 lety

    I always go back to your intro videos because I love your explanations. Thank you!

  • @RomanPillai
    @RomanPillai Před 4 lety +111

    This is Bob Ross of the 21st century but a techie instead

  • @seancpp
    @seancpp Před 4 lety

    Love the explanation. Very clear.
    When I was younger I found it helpful to conceptualize vectors AS an actual point, but with math functions to extract the information about direction, magnitude, distance, etc
    Because when I was trying to take my algebra knowledge of a vector and apply it to programming, it ended up looking like:
    struct Vec2d {
    float magnitude;
    float direction;
    };
    But luckily my mentor at the time set me straight quickly.
    But since I was learning the concepts of OOP and encapsulation, the idea of a Point having encapsulated behaviors for distance, direction, etc just made more sense naturally.
    Maybe a useful insight for any teachers of younger people.
    Edit: Kate Gregory has a great talk about this at one of her CPPCon keynotes. People naturally understand objects-teach objectly

  • @VenomSwitch
    @VenomSwitch Před 4 lety +7

    I've been using Processing and 5js for almost a year and I can't even explain how good a teacher you are, if only you did all computing topics such Software engineering and data science. You'd make university a breeze for 90% of students!

    • @user-zu6ts5fb6g
      @user-zu6ts5fb6g Před 4 lety +1

      Yes, but i would argue that most professors, if they had a lot of freetime (e.g. as a youtuber), would be equally as good at teaching. stress is a big factor.

    • @VenomSwitch
      @VenomSwitch Před 4 lety +1

      @@user-zu6ts5fb6g True, however someone reading from a slideshow he made 4 years ago isn't really worth paying £9000/yr for lol.
      That being said, I do have some great tutors aswell!!

  • @Awahrani31
    @Awahrani31 Před 4 lety +15

    Could you do like a data structures course ? Btw I love your channel and your work.

  • @BurninAss
    @BurninAss Před 4 lety

    just gotta love your enthusiasm for teaching

  • @bel-gk-a2304
    @bel-gk-a2304 Před 4 lety

    Your video helps me understand not only programming, but also expand my knowledge of the English language!)))) Amazing! Thank you much from Russia!

  • @ciceroaraujo5183
    @ciceroaraujo5183 Před 4 lety

    Your energy is a whole other level.

  • @krccmsitp2884
    @krccmsitp2884 Před rokem +1

    Thanks for the introduction to and explanation of vectors. 👍 Back in school I didn't understand it 😵, but through your video I finally could. 😁

  • @devsutong
    @devsutong Před 4 lety +1

    wowww very interesting! waiting for the next video!!

  • @LIGHTRAYMultimedia
    @LIGHTRAYMultimedia Před 4 lety

    You are the best teacher, ever!, Congratulations!

  • @gokulb9221
    @gokulb9221 Před 4 lety +2

    I don't know why I came to this video.. But it was really interesting to know the concept in depth.. I don't even know javascript yet but stayed till the end of the video ♥️ Literally never enjoyed a coding video this much♥️♥️💯

  • @jordimantilla5218
    @jordimantilla5218 Před 2 lety

    loving the way you teach

  • @srijanpaul
    @srijanpaul Před 4 lety +1

    Happy to hear this series is being redone ! Love your channel Dan

  • @sairaj6875
    @sairaj6875 Před 3 lety

    Just want to let you know that you are an awesome teacher.

  • @RodrigoNishino
    @RodrigoNishino Před 2 lety

    Dude... that swaeter is just amazing

  • @nouuane377
    @nouuane377 Před 4 lety

    You are so happy teaching us

  • @robodev6033
    @robodev6033 Před 2 lety

    This is the ideal math teacher that every one need.

  • @amirulidzham3686
    @amirulidzham3686 Před 4 lety

    Watching your video while experiencing detention. Love your video. Nail your style. Need theory and code

  • @greyrabbit2157
    @greyrabbit2157 Před 4 lety +1

    u deserve a lot more attention.

  • @elyaizen
    @elyaizen Před 4 lety +2

    Gawd Dan I love you! ❤❤

  • @rupinderjeetsingh2657
    @rupinderjeetsingh2657 Před 4 lety +1

    Best teacher ever

  • @VanosTurbo
    @VanosTurbo Před 4 lety

    Looking forward to future videos

  • @dzaki4559
    @dzaki4559 Před 3 lety

    Very intuitive explanation, thanks

  • @seyedmortezakamali2597

    learning in quarantine with the best teacher ever
    math class always was boring for me but you made it fun

  • @Daniel-th3dh
    @Daniel-th3dh Před 4 lety

    WOW! great video!

  • @SYNAPSEdwl
    @SYNAPSEdwl Před 4 lety

    💕 Many thanks for your great job 💕

  • @_c_y_ko3150
    @_c_y_ko3150 Před 4 lety

    Dude makes the world a better place : )

  • @manty9831
    @manty9831 Před 4 lety +2

    That was extremely helpful lesson. Thanks for all of your work!

  • @florinalozinca8055
    @florinalozinca8055 Před 3 lety

    whenever i see that bubble class my mind goes to "what does it mean to be a bubble?!" :))) anyways, thank you so much for all the fun classes. i think i watched everything you posted on p5 and now i'm having a rewatch :D

  • @alifrizki9845
    @alifrizki9845 Před 4 lety +2

    Thanks dan to make the book free to read. it makes math less scarier to learn.

  • @michelangelo3330
    @michelangelo3330 Před 4 lety +1

    I'm from Italy and I just bought your book "The nature of Code". I hope to follow this playlist, cause i'm studying Computer Science for Software development in Italy, so I'm so interested... You are a great educator!!!

    • @leo848
      @leo848 Před 4 lety +1

      You're from Italy? aRe u in quarantine right now?

    • @michelangelo3330
      @michelangelo3330 Před 4 lety +1

      @@leo848 i live in a region where quarantine has not yet been arranged. But I'm avoiding leaving home so I'm quiet ... I spend time programming and netflix hahaha

  • @wexer82
    @wexer82 Před 4 lety +1

    Thank you.

  • @culturapoliticaycomputador9999

    Joder Danny es el mejor, Saludos Hermano.

  • @60pluscrazy
    @60pluscrazy Před 2 lety

    Excellent 👌

  • @reefu
    @reefu Před rokem

    It’s important to note that lists of numbers and arrows in space are BOTH vectors, neither are more fundamental than the other. A vector is really a super abstract idea, they are any set of objects which satisfy a certain collection of properties. It just so happens that arrows in space and lists of numbers both satisfy the necessary properties to be called a vector, and so they are both the same thing.

  • @lank_asif
    @lank_asif Před 4 lety

    Ya still got it homie!!

  • @JoePetrakovich
    @JoePetrakovich Před 3 lety

    you teach so damn good!!!! ty

  • @ahmedhassanahmedhassan6495

    Hoş geldiniz hocam.

  • @marilu0007
    @marilu0007 Před 3 lety

    love it, I want to be like you one day!!!!!

  • @doshi050050
    @doshi050050 Před 4 lety

    Thanks, really intresting (:

  • @Kaivuri8D
    @Kaivuri8D Před 4 lety

    This is so great. Looking forward seeing this whole serie

  • @nicholasmarino670
    @nicholasmarino670 Před 4 lety

    love it

  • @Mirko_ddd
    @Mirko_ddd Před 4 lety +1

    *this dot* song. I missed it so much ♥️

  • @suryaatrish
    @suryaatrish Před 4 lety

    The way you teach us is funny, amazing and mesmerizing. The explanation you give is just awesome. And thanks for the free to read book. It really helps. ♥️

  • @gregfletcher2360
    @gregfletcher2360 Před 4 lety

    Coding Train == ❤️

  • @neillunavat
    @neillunavat Před 3 lety

    You finally redid all the videos Dan. Hopefully we'll get to hear the "I'll magically edit these videos afterwards" statement. 😃

  • @Luftbubblan
    @Luftbubblan Před 4 lety

    Very nice. Was doing pretty much the same thing as @11:00 couple of days ago, would been perfect to see this video then hehe.
    I wanted to rand movement using vector in C++ and took the same approach as you did here but turned out it had to be a bit different(Couldn't solve it without looking it up :/ ).
    pos.x=2*(float)rand()/(float)RAND_MAX -1;
    And same for y.

  • @smartmob4568
    @smartmob4568 Před 4 lety

    U r awesome maaaaan

  • @bjoern.molinari
    @bjoern.molinari Před 4 lety

    Always a pleasure to watch your explanations. A lot of value. top. thanks for your work!

  • @robinwulz1404
    @robinwulz1404 Před 4 lety +1

    Please, have some love from Germany

  • @dusterleuchten5800
    @dusterleuchten5800 Před 4 lety

    Will there be a chapter about state machines? I missed that in your old Book

  • @brucewernick6542
    @brucewernick6542 Před 4 lety

    Using vectors and drawing from your random walk and particle system examples, I have an idea for another code example. Simulate the spread of a virus, including options for the effect of lockdown. I quite like the idea of the reducing the alpha value as the walker ages.

  • @andrewyoung222
    @andrewyoung222 Před 3 lety

    Is there a way to save our creations as svg files for editing in graphics packages?

  • @chanasiegel2706
    @chanasiegel2706 Před 4 lety +1

    Who would dislike this?
    😮

  • @user_16309
    @user_16309 Před 4 lety +5

    Please explain your video indexing scheme. I see this one, for example, begins with 1.1. All your videos are numbered, yet for the life of me, I can't make sense of this. Please point me to or make a video on what we are to make of this and how it's relevant to your content. Thank you very much.

    • @barongello
      @barongello Před 4 lety +2

      Well, not Daniel, but:
      Usually, teaching series like this one has the form: X.Y.Z. Where X is the chapter (like Vectors on this one), Y is the video inside this chapter (like introduction, summing, subtracting, rotating, etc.) and Z stands for the video part (when it has more than one part, like first we do basic things, then we improve, add colors, etc.)
      Coding Challenges are "spare" videos on specific topics, started trying to code stuff with given time and then evolved to doing interesting things. The Coding Challenges are just sequential numbered #123 and sometimes it has two or more parts (thus #123.1 and #123.2)
      Correct me anyone if I am also misunderstood x)

    • @TheCodingTrain
      @TheCodingTrain  Před 4 lety +1

      You can also check the navigation at thecodingtrain.com/ which hopefully will help a bit.

  • @phookadude
    @phookadude Před 4 lety

    Not sure but aren't the 2 versions of the program not the same? If you use random adds to x and y then your new positions will be square relative to the origin. So +3 to both x and y will get you a 45 degree angle with a length of ~4.2. Whereas with actual vectors a 45 degree angle with a length of 3 will be a length of 3.

  • @abumohsenpour
    @abumohsenpour Před rokem +1

    12:15 this dot song

  • @tsary_8561
    @tsary_8561 Před 6 měsíci

    Why did you use this.pos instead of pos in the attributes?

  • @mustafasalih5328
    @mustafasalih5328 Před 4 lety

    Hi dan🌈 do a video about finding the index of item in an array that the sum of its left side equals to the sum of its right side 🦄

  • @VVGRestoration
    @VVGRestoration Před 2 lety

    What about glenz vectors?

  • @mariovelez578
    @mariovelez578 Před 4 lety

    You said we are going to be creating a simple physics engine. Are you going to be going over the Separating Axis Theorem?

  • @lordoffatcats
    @lordoffatcats Před 4 lety

    how do I use processing with the atom text editor?

    • @stealth3002
      @stealth3002 Před 4 lety

      He's using p5js, the javascript version of processing, and running it on a webpage.
      If you want to use processing I found a way to use it as a java library on stack overflow(stackoverflow.com/questions/21309851/use-processing-in-java-application). Then you can just use atom to editor your java project and run it using command line.

  • @soejrd24978
    @soejrd24978 Před 4 lety +1

    Yess! I hope I can make my girlfriend learn JavaScript through P5, keep at it!

  • @jumpsplat120
    @jumpsplat120 Před 4 lety

    Here's the thing that I don't understand; if the magnitude is the "hypotenuse", then it would seem that the magnitude of a vector is intrinsically tied to the x and y position. There would be no way to increase the length, or magnitude, of the vector without also changing the x and y components. Is there something that I'm misunderstanding?

    • @omga_3459
      @omga_3459 Před rokem

      I think he meant that you can move the vector without affecting the magnitude. For x and y component you need to substract the final X to the inital X (the same for y) values, so that you can move your vector and keep its magnitude. hope it will make sense.

  • @ThatOneStuff
    @ThatOneStuff Před 3 lety

    dat fav scalar tho

  • @RahulGuha-lq8bo
    @RahulGuha-lq8bo Před 4 lety

    Sir maybe the co ordinates would be (3,4)

  • @sebastianjossang3007
    @sebastianjossang3007 Před 4 lety

    How can i send a file i made to Dan?

  • @patrickmayer9218
    @patrickmayer9218 Před rokem

    *Physics vectors are important for game dev because velocity is how game objects move.
    *P5 Vectors store X and Y components rather than direction and magnitude.
    *var varName = createVector(xComponent, yComponent) to create vector obj

  • @miraliseyyedisahebari177
    @miraliseyyedisahebari177 Před 3 měsíci

    2:38 Ok I'm ggonna watch the rest of the video with my mom

  • @nick5625
    @nick5625 Před 4 lety

    ill take whatever he is taking ;D

  • @liorschenk4122
    @liorschenk4122 Před 8 měsíci

    okay but how many dimensionals did Dan record before getting cut off at 2:34 😂

  • @mohamadnaser2697
    @mohamadnaser2697 Před 4 lety +1

    sir, thank you for this amazing video but I wish more procassing videos so pelace do it

    • @dopefish86
      @dopefish86 Před 4 lety +1

      he did the same thing in Processing years ago. see here czcams.com/users/shiffmanplaylists?view=50&sort=dd&shelf_id=6 most helpful and enjoyable lessons i've ever seen :)
      he's redoing this in p5 js now, so probably there's not many processing videos in the near future ;)

  • @toastyPredicament
    @toastyPredicament Před 2 lety

    return this.inspired
    == TRUE

  • @sleep3017
    @sleep3017 Před 4 lety

    this.dot this.dot this.dot the this.dot song!!! yay!!

  • @necaton
    @necaton Před 4 lety +1

    You're only explaining the very basics about vectors. A second video about vectors would be great.

    • @mariovelez578
      @mariovelez578 Před 4 lety +1

      This is only the first episode. I'm sure he'll go over dot product and cross priduct

  • @Eltopshottah
    @Eltopshottah Před 4 lety

    10:38 puts head down in defeat because i know im not going to do that :c

  • @markusmulholland
    @markusmulholland Před 3 lety

    Shout out to everyone who watched the Processing originals.

  • @pascalpetzold2562
    @pascalpetzold2562 Před 4 lety

    Hi from Germany

  • @iluvyunie
    @iluvyunie Před 4 lety

    This came at such a good time for me.
    Int main()
    {
    String You = "gem"
    return

  • @FiveFishAudio
    @FiveFishAudio Před 2 lety

    What's our vector, Victor?

  • @CcrcOoo
    @CcrcOoo Před 4 lety +4

    Hey Coding Train !! That you make it’s so very interesting, but I am a French People and... I don’t understand that you speak . In your other video, I see that subtitles on your other video . Can you put too on this video of nature of Code please for people French like me . Thank you very much I’m sorry if my English is bad or not

    • @TheCodingTrain
      @TheCodingTrain  Před 4 lety +3

      Merci! je vais essayer!

    • @CcrcOoo
      @CcrcOoo Před 4 lety +1

      The Coding Train ok Thank you very much 😊

  • @imharishsambasivam
    @imharishsambasivam Před 4 lety +2

    That 1 dislike😤

  • @yuzhao5883
    @yuzhao5883 Před 4 lety +1

    why you look more handsome than before haha

  • @kipchickensout
    @kipchickensout Před 2 lety

    The fact I predicted he'd write 6

  • @MisterX2212
    @MisterX2212 Před 4 lety +1

    Please, add italian sub 😭

  • @GabrelaAmarela
    @GabrelaAmarela Před 4 lety

    amo ne

  • @garfield4629
    @garfield4629 Před 2 lety

    There’s gotta be one guy that gets Dans IP address and measure the distance between them

  • @rezaz7167
    @rezaz7167 Před 4 lety

    This dot 🤣🤣🤣