9.15: 2D Arrays in JavaScript - p5.js Tutorial

Поделиться
HTML-код
  • Опубликовано: 7 сен 2024
  • In this JavaScript Tutorial, I cover two-dimensional (2D) arrays in JavaScript. I demonstrate how to create, initialize, and use the arrays with nested for loops.
    Support this channel on Patreon: / codingtrain
    Send me your questions and coding challenges!: github.com/Cod...
    Contact: / shiffman
    Links discussed in this video:
    Dan's 2D Array in Processing tutorial: www.processing...
    Source Code for the Video Lessons: github.com/Cod...
    p5.js: p5js.org/
    Processing: processing.org
    For More JavaScript Tutorials: • 9: Additional Topics -...
    Help us caption & translate this video!
    amara.org/v/RS64/
    📄 Code of Conduct: github.com/Cod...

Комментарии • 78

  • @smoky_sam
    @smoky_sam 5 лет назад +77

    I like the fact you aren't afraid to show where u made mistakes or got confused. Good explanation.

  • @realcygnus
    @realcygnus 7 лет назад +3

    directly from the P5 included Examples, you can make a 2D array very much just like as in c, as follows;
    arr = []; in globals (as per usual), then just:
    for (var c = 0; c < cols; c++) {
    arr[c] = []; //ah ha !!!
    for(var r = 0; r < rows; r++) {
    arr[c][r] = random(255);
    }//4r
    }//4c
    seems you can declare it empty with arr = [[],[]]; but you need line 2 anyway. works like a champ !

  • @maxlesin3876
    @maxlesin3876 2 года назад +1

    I will never stop thanking you for this knowledge.

  • @lucasjacinto8440
    @lucasjacinto8440 3 года назад +6

    Thank you so much dude these two dimensional arrays were giving me trouble.

  • @iphyzll1091
    @iphyzll1091 7 лет назад +19

    You are so positive and helpful, i love your tutorials ! Please keep it up, thanks ! :)

  • @flopasen
    @flopasen 2 года назад +1

    i'm learning this stuff right now for a little project and really appreciate being shown the primitive things and ideas for a function

  • @shreddymetal
    @shreddymetal 8 лет назад +2

    I've seen people use these weird 2 dimensional arrays before and I never knew it was a common thing, thanks for this!

    • @TheCodingTrain
      @TheCodingTrain  8 лет назад +1

      thanks!

    • @danbo967
      @danbo967 7 лет назад +2

      They are pretty common in a lot of areas like database (array of posts has an array of comments). If you work with JSON you will find 2D arrays all the time. When doing game development you use 2D arrays for positioning objects. Each array in the array of positions stores [x,y] sometimes [x,y,z]. Those are a few cases that I remember right now. But they are all over the place.

  • @GabrielDalposso
    @GabrielDalposso 4 года назад +3

    THANK YOU SO MUCH, I WAS SO LOST WITHOUT THIS

  • @taljune142010
    @taljune142010 5 лет назад +1

    Thanks a lot Daniel!
    this is the only workable method for multidimensional array.
    It works for 3 dimensions as well.

  • @Zachucks
    @Zachucks 4 года назад +1

    The Coding Train lost his train of thought lol! New fav channel btw, very good teacher and nice charisma!

  • @mirankamal5431
    @mirankamal5431 8 лет назад +28

    You the best.

  • @johnn4314
    @johnn4314 6 лет назад +3

    Very solid educator

  • @nicholarucitadhamma6000
    @nicholarucitadhamma6000 2 года назад

    I want to give a suggestion. Tho I'm 2 years late😅 But if you want to reopen a tab you closed, you could open your web browser and press Shift+Ctrl+T it should work. If it doesn't then, well I don't know.

  • @Popviz
    @Popviz 7 лет назад +5

    Dan, i want to be able to fill with a specific color in the 2d array as opposed to a random one. How do i identify and fill a square with a specific colour? Thanks :-)

  • @NooblantisDistrict
    @NooblantisDistrict 2 года назад

    2022 and still saving lives✌😂

  • @shakyafernando3312
    @shakyafernando3312 5 лет назад +2

    How do you target each individual box on the grid? (for example: if need to colour a specific box red)

  • @FredoCorleone
    @FredoCorleone 6 лет назад +9

    Cols and rows are conceptually inverted, isn't it?

    • @TheCodingTrain
      @TheCodingTrain  6 лет назад +2

      It's a good point. I've always done [cols][rows] b/c of being so used to (x,y) but the more I teach about matrices the more I see the convention of rows x cols. This is a recent discussion: github.com/processing/processing-docs/issues/676

  • @younesbav0up316
    @younesbav0up316 2 года назад

    that was so helpful and you made fun to watch

  • @Es.me44
    @Es.me44 6 лет назад +2

    You can use console.table(arr);

  • @mathis-meth4229
    @mathis-meth4229 Год назад

    he feels like paul gilbert(guitarist) of programming

  • @TheChodex
    @TheChodex 6 лет назад

    I think i will stick with making array[width*height] and then just using array[ y * array_width + x] formula :P Seems like less of a hassle :P

  • @kreendurron
    @kreendurron 7 лет назад +4

    Daniel can you re-visit this topic in future videos?

  • @WistrelChianti
    @WistrelChianti 2 года назад

    thanks! That helped!

  • @oskar1504
    @oskar1504 4 года назад

    I "hoped" i learn something new and realized i already using 2d arrays without knowing about this as an used method.

  • @martinkubat9193
    @martinkubat9193 3 года назад

    Thanks. Perfect explanation. I missed step array[i] = [] in my code, used array[i][k] = x instead right away and it didn't work out. It's weird you can't initialize size of array in JS

  • @melodyhynes9904
    @melodyhynes9904 5 лет назад

    So, say a 40x40 array of 0's and 1's to decide if content is locked or not (if 1 unlock content if 0 lock content) is there a better way to do this in terms of efficiency ? Say you call the array 'journals' and check the entire array for 1's and 0's to see if the corresponding place in the timelin (canvas drawn interactive timeline that shows the journals obtained) Is unlocked

  • @codeandfood
    @codeandfood 5 лет назад +1

    'Command + Shift + T' on MAC will open your last closed tab :)

  • @cap-advaith
    @cap-advaith 4 года назад +1

    hey dan is it like [row][column]............but u were saying [column][row].....why is that

  • @Sleep_Attenuation
    @Sleep_Attenuation 2 года назад

    you are amazing

  • @Korsasnoraven
    @Korsasnoraven 4 года назад

    Thanks so much for the video!!

  • @noelearlwatson2724
    @noelearlwatson2724 8 лет назад +3

    Nice video

  • @d_06snehalprajapati90
    @d_06snehalprajapati90 Год назад

    Good explanation....>3

  • @rorothegoatboat
    @rorothegoatboat 2 года назад

    didn't get the same result, random is not a function error is what i get

  • @Blindstick1
    @Blindstick1 3 года назад

    Thank you!

  • @Halo4envivo
    @Halo4envivo 7 лет назад +3

    the source code for this tutorial is not on github, can you put it again? or tell me where is it, if it actually is on github but i didn't see it, please

  • @danaililiev1404
    @danaililiev1404 5 лет назад

    thnx so much solved my problem

  • @angladephil
    @angladephil 6 лет назад

    Hello. What if Idon't know in advance what number of cols and rows I will need ?

  • @peterrempel2458
    @peterrempel2458 3 года назад

    Thank you very much. It makes me satisfy to see, that an profi say what I'm thinking the last days and hours of learning: These f*#! moredimensual arrays confuse me :)

  • @pittyconor2489
    @pittyconor2489 5 лет назад

    Blocks[i] = []; i did this but it says
    Uncaught TypeError: Cannot set property '0' of undefined (sketch: line 61)

  • @klevisimeri607
    @klevisimeri607 2 года назад

    Love you

  • @Samuelfodao
    @Samuelfodao 8 лет назад +2

    AMAZINGGG!!!

  • @dzhellenicpoetry
    @dzhellenicpoetry 8 лет назад

    Nice! Thank you!

  • @cap-advaith
    @cap-advaith 4 года назад +1

    hey dan could u slow down a little bit a tiny bit ........because my video slow down button is not working......:-)

  • @TheAliakbarazad
    @TheAliakbarazad 5 лет назад

    You Sir are pure goodness!!

  • @saipanda893
    @saipanda893 6 лет назад +1

    What shortcut key you use for remove the comment into code ?

  • @snigdharahman1480
    @snigdharahman1480 2 года назад

    Sir can you teach me pointers * or guide me to a good like with your qualitY. I struggle with it a low

  • @Metal565
    @Metal565 8 лет назад

    Thanks Dan, is there going to be a video on objects in 2D array?

    • @TheCodingTrain
      @TheCodingTrain  8 лет назад +1

      Great idea for a follow up, feel free to suggest! github.com/CodingRainbow/Rainbow-Topics/issues/100

  • @lastskynet4346
    @lastskynet4346 5 лет назад

    code line 8 ----> 10 Error detected
    i = rows
    j = cols
    for every cols of rows

  • @calderarox
    @calderarox 8 лет назад

    can you make a video about collision AABB and how to react to it?

    • @TheCodingTrain
      @TheCodingTrain  8 лет назад +1

      Feel free to suggest: github.com/CodingRainbow/Rainbow-Topics/issues

  • @tomvos3317
    @tomvos3317 7 лет назад +1

    but the real question is: can you make a 3D array?
    seriously, can you make one? im interested :P

    • @TheCodingTrain
      @TheCodingTrain  7 лет назад +2

      Yes, any dimension is possible, they are really just arrays of arrays.

    • @tomvos3317
      @tomvos3317 7 лет назад +1

      The Coding Train So in theory you van make An 123456789D array if I'm right :P
      BTW, I love your tutorials! They are really helpful, and they have got me into p5.js, which I never heard of until I saw your video's!

  • @gardeningandcooking5145
    @gardeningandcooking5145 6 лет назад

    would you willing to write a js for me? I have been looking for someone who can do a small job for my website.

  • @goldthumb
    @goldthumb Год назад

    You, I mean "me", have to learn fundamental things before you start building your own stuff in a reasonable speed. 2D array is fundamental.

  • @chancewoosley3165
    @chancewoosley3165 4 года назад

    i love you

  • @latorious9489
    @latorious9489 4 года назад

    Python is just so much more simple Method: arr = [[random.randint(0, 1) for y in range(Rows)] for x in range(Cols)]

  • @abhishekkattimani1302
    @abhishekkattimani1302 5 лет назад

    Sir could you make the java video tutorial series right from basics.. please please..

  • @Alebtong1
    @Alebtong1 7 лет назад +1

    I am confused

  • @WILPOLLOCK
    @WILPOLLOCK 2 года назад

    Your whiteboard is crooked. It's hurting my brain... 🤣

  • @valentinab.742
    @valentinab.742 3 года назад

    hi! where i can find the code?

  • @RigelNarcissus
    @RigelNarcissus 8 лет назад

    let make2Darr = function(r, c) { return new Array(c).fill([]).map(e => new Array(r)); }
    ;)

    • @TheCodingTrain
      @TheCodingTrain  8 лет назад +1

      oh wow, mind blown. github.com/CodingRainbow/Rainbow-Topics/issues/100

  • @Human_Evolution-
    @Human_Evolution- 2 года назад

    Too sporadic.. Screens zooming all over.

  • @lucanghuang8201
    @lucanghuang8201 2 года назад

    First time I watched this...very confusing.

  • @bourbon3587
    @bourbon3587 2 года назад

    I just losing my concentration because of laughing(over ),shaking of hands and body