Coding Challenge #10.1: Maze Generator with p5.js - Part 1

Поділитися
Вставка
  • Опубліковано 28 вер 2024

КОМЕНТАРІ • 232

  • @DePistolero
    @DePistolero 7 років тому +148

    5 seconds into the video, liked, 6 seconds, subscribed, 7 seconds noticed the amount of the videos suggested on the right... Where have you been all my life :) ?? Thank you.

    • @schneeekind
      @schneeekind 7 років тому +5

      DePistolero yea same here

  • @RedsBoneStuff
    @RedsBoneStuff 7 років тому +13

    I really like the fact that you generate a maze where with actual walls for walls, rather than one with squares for walls.

  • @WoodyPembs
    @WoodyPembs 6 років тому +7

    Your video (its the first one I've seen) is really helping wake up my 'programming brain'. I used to write code pretty much as easily as writing a shopping list, but that was thirty years ago! I've set myself the task of creating a dungeon game and been thinking about maze generation. Books are fine but your clear presentation style (particularly the shared thought processes) are getting my head back into gear better than hours of reading have done. Thanks!

  • @Danicker
    @Danicker 7 років тому +62

    16 minutes and he creates a gird... Jks it would take me 16 minutes to get the line to be white. You are very talented!

    • @TheCodingTrain
      @TheCodingTrain  7 років тому +13

      haha, thank you!

    • @ImMimicute
      @ImMimicute 7 років тому +1

      Danicker I think I'd give up and pull out a crayon before I made it to 16 minutes

    • @tcchan14
      @tcchan14 7 років тому

      1 hour and he finish the challenge. For me, I use about two days

    • @calebsherman886
      @calebsherman886 6 років тому

      I would take 2 days, and about 30 times referencing this video.

  • @Insanesurf
    @Insanesurf 7 років тому +29

    Haha I almost died when you went "top, middle, right, wait...", despite having done the silly song trying to remember the correct order xD. Great videos BTW, subscribed.

  • @RifqiPriyo
    @RifqiPriyo 8 років тому +24

    "top, right, bottom, left" is what you'll use in CSS shorthands (like padding, border, and margin). 😁

    • @TheCodingTrain
      @TheCodingTrain  8 років тому +6

      +Muhammad Rifqi Priyo Susanto aha! Good point!!

    • @LegendaryFartMaster
      @LegendaryFartMaster 5 років тому +1

      @@TheCodingTrain I like to remember it as NESW, Never Eat Sea Weed

    • @flamingowrangler
      @flamingowrangler 3 роки тому

      @@LegendaryFartMaster 1984

    • @DavidBauer38
      @DavidBauer38 2 роки тому

      The “top right bottom left” seemed to be giving him a bit of TRouBLe!

  • @badnessofhour
    @badnessofhour 6 років тому +77

    this is a mazing video. =)

    • @TheCodingTrain
      @TheCodingTrain  6 років тому +8

      😂

    • @blinzi69
      @blinzi69 6 років тому +2

      that comment is highly undertated! :-)

    • @lowbunny7
      @lowbunny7 5 років тому +2

      Ugh... puns will be the end (not really) of me!

  • @khineaindray
    @khineaindray 5 років тому +2

    Your video did really help me. I wish I would have watched this first before finding in somewhere else. And the way you explain was amazing and it's easy to understand. Thank you so much.

  • @jorensminats5605
    @jorensminats5605 8 років тому +2

    I love these Coding Challenges, I don't know how to code, but It's still very fun to watch!

  • @BlueDayReborn
    @BlueDayReborn 7 років тому +12

    Subbed, you sir are the most amazing programming mentor! Thanks!

  • @toxicsnails
    @toxicsnails 5 років тому +4

    I’ve always taught my students to remember TROUBLE when writing top, right, bottom, left (TRBL)

  • @smileforworldmotivationcha7144
    @smileforworldmotivationcha7144 2 роки тому

    I love the way you are too excited to explain things. Thanks so much

  • @LucasOliveira-dj6gg
    @LucasOliveira-dj6gg 6 років тому +145

    THE BOB ROSS OF CODING

    • @martinnieva8484
      @martinnieva8484 5 років тому +3

      That's called "Bisqwit"

    • @porx
      @porx 5 років тому +7

      let human = bobRoss;
      function bobRossToCodingTrain(input) {
      input -= afro;
      input += glasses;
      input.beard *= 0.5;
      return input;
      }
      human = bobRossToCodingTrain(human);

    • @bobingstern4448
      @bobingstern4448 3 роки тому

      @@porx yes

    • @ImJiom
      @ImJiom 6 місяців тому

      more like the richard simmons of coding

  • @Josh01363
    @Josh01363 4 роки тому +1

    I’m doing maze generation and pathfinding for my college coursework and ur vids are helping a lot even though I’m doing mine in a different language

    • @esrako
      @esrako 2 роки тому

      hey! in which language did you create the maze?

  • @cyral_u
    @cyral_u 7 років тому +2

    Your problem solving skills are mind blowing

  • @SkyenNovaA
    @SkyenNovaA 5 років тому +1

    A simple and fun way to explain maze generation, thanks!

  • @SyemaAilia
    @SyemaAilia 5 років тому +6

    This guy makes me literally laugh out loud

  • @milkyroad9593
    @milkyroad9593 7 років тому +1

    Hey Daniel. Greetings from Germany. I love your videos. Programming + humor. "We're getting somewhere - eventually" hahaha. Keep doing your videos please.

  • @mightyleguan1451
    @mightyleguan1451 7 років тому +1

    I really love your videos and I am currently following along the Intelligence and Learning playlist. The only thing I am afraid of is that by watching more of your videos I might start making the *this.* mistake more often. :D

  • @yashashav_dk3766
    @yashashav_dk3766 5 років тому

    Mr Coding Train, I love your enthusiasm.

  • @NeilRoy
    @NeilRoy 5 років тому

    Depth First is nice if you want long passages. I want to use one for a more interesting game with many branching hallways, so I found Prim's Randomized to be the best for that. In one implementation I had my program choose which algorithm at random, and then generate the maze, which was kind of interesting and gave more variety. In my own program I wanted to generate a sort of "3D" Text maze. But an interesting use for these I recently found was generating a random platform game! Which I thought was a very kewl use for maze generation. It's making me think of different uses. I was surprised at how easy these are to understand and implement.

  • @piyushmajgawali1611
    @piyushmajgawali1611 5 років тому

    p5 js is so easy to use
    went to the web editor,followed the video,made sense
    Thanks

  • @DrSpooglemon
    @DrSpooglemon 4 роки тому

    If you make local 'w' and 'h' variables then you can pass those in as line argumants and it make it look neater without the need for whitespace;
    line(x, y, w, y);
    line(x, h, w, h);
    line(x, y, x, h);
    line(w, y, w, h);

  • @av3stube480
    @av3stube480 6 років тому

    I HAVE this kind of thing, but it's not a problem, it eliminates the possible bugs steaming from nit understanding what you wrote because it was too packed up.

  • @theredstormer8078
    @theredstormer8078 4 роки тому

    Very helpful. I am in the process of making a 3d maze generator for Minecraft to confuse people on a server trying to traverse an underground base and I'm hoping this can be translated into 3d then sliced into various images so I can convert those into schematics in-game.

  • @condor07uk
    @condor07uk 7 років тому

    altough i am much of a php guy, your videos are helping me learn oop concept which is still a mistery to me.
    btw you should turn the volume of your vids down little more since i can still barely hear you

  • @pedro.fontoura
    @pedro.fontoura 4 місяці тому

    Using both this and the ray tracing algorithms, I made a 2D micro mouse simulator.
    Your (first and basic) goal is to program the mouse to wander the maze, avoid hitting the walls and getting stuck.
    That is NOT a simple task.
    You can explore many algorithms: maze solving, self-driving (AI, robotics, ...).

  • @tzq33tdq
    @tzq33tdq 8 років тому

    I'd use vars for each corner like tl (top left), br (bottom right)

  • @bennybrouwer
    @bennybrouwer 7 років тому

    After having programmed so many bouncing balls in all the introductory courses, I have the feeling that now the fun begins. Compliments for interesting and challeging lessons.

  • @AA-em3lw
    @AA-em3lw 2 роки тому

    Thanks for another great video, I have OCD too :P

  • @aylictal
    @aylictal 5 років тому +3

    why wouldn't you use an object instead of an array for this.walls? that way you wouldn't have to keep remembering which walls correlate to which values.
    this.walls = {
    top: true,
    right: true,
    bottom: true,
    left: true
    }
    this.show = function(){
    if (this.walls.top){ //draw top wall}
    //etc
    }

  • @benhardsim8629
    @benhardsim8629 3 роки тому

    You could make the top,right, bottom,left boolean value inside an object instead of array, that would be more readable

    • @mrevson74
      @mrevson74 Рік тому

      Or indexes.
      TOP=0, RIGHT=1, BOTTOM=2, LEFT=3.
      Then do if(walls[TOP]) {......}

  • @InsectInPixel
    @InsectInPixel 8 років тому

    Hi Daniel,I LOVE the way you teach code! You make it fun. You should teach kids. I have a quick question. Each Square has four lines. So looking at the grid, there are two lines because squares are connected to one another. correct? ( with the exception of the squares around the perimeter of the grid ) You will probably go over details in the next video.

    • @TheCodingTrain
      @TheCodingTrain  8 років тому +1

      +InsectInPixel If I understand correctly, yes that is right! Even though each cell as 4 lines associated with it, each line overlaps exactly with the lines of its neighbors and therefore you just see what appears to be a grid.

  • @vbcoachwasi
    @vbcoachwasi 4 роки тому

    I love your style!!

  • @jasdeepsinghgrover2470
    @jasdeepsinghgrover2470 7 років тому

    top right bottom left is a big trouble to remember so just remember trouble as in trbl ... top right bottom left

  • @rainbowcemetery
    @rainbowcemetery 8 років тому

    i made an olde timey random maze game a while back, though i only gave cells the potential for a south and east wall. if that's better or worse that having all 4 i don't really know :o

  • @aryamaangoswamy179
    @aryamaangoswamy179 5 років тому +1

    Clockwise from top would've made it easier to memorize.

  • @waltercisneros9535
    @waltercisneros9535 4 роки тому

    12:10 nope, I like my identation the way you have it as well.

  • @caljohn1475
    @caljohn1475 2 роки тому

    Thanks!

  • @iceboy5418
    @iceboy5418 7 років тому

    How I found you? I don't know
    How much I love your vids? Very much

  • @Jono_1987
    @Jono_1987 7 років тому

    I did the song and dance with you now I feel great!

  • @PaulGoux
    @PaulGoux 5 років тому

    If anyone is interested in a hexagonal maze, here is an example based on this code. it has other functionality too such as mouse interaction.
    Uses multiple tiles to create the maze rather than just one.
    Can toggle tiles on and off by clicking, or by dragging.
    Could be useful if you wanted to make a game like civ.
    editor.p5js.org/paulgoux/sketches/eiY8BkMUm
    Ps I know you recommended the contributions page, but I don't understand how to share things there. :/

  • @juniordev4190
    @juniordev4190 7 років тому

    Its just giving me serious trouble(TRBL) : Top Right Bottom Left :D

  • @mementomori5580
    @mementomori5580 7 років тому +2

    If you want extensive information about mazes and maze algorithms (but basically no code), here is a site that might interest you: www.astrolog.org/labyrnth/algrithm.htm

  • @ambientsoda106
    @ambientsoda106 3 роки тому

    Hey would you do a challenge on creating a program that can create and run a function using ai? Meaning you dont write the function yourself in the definition area

  • @atrumluminarium
    @atrumluminarium 7 років тому

    Ever considered coding one that can generate circular/hexagonal mazes?

  • @ACS20596
    @ACS20596 5 років тому

    I am interested in creating a first person maze survival app, and would appreciate any advice towards that goal!

  • @7Argeus
    @7Argeus 7 років тому

    Hi you're videos are great and im going through every single one just seeing how you approach these problems and what kind of stuff you can do with code, i was wondering if you would be able to suggest a good program to download for free preferably or a program to buy if i must do so, if so i would greatly appreciate it, and also do you have any recommendations for beginners? Like a good starting point, im doing engineering now at the moment and i love my C++ program im doing, we currently use eclipse in class, will that work for this sort of stuff or no? Also would you be able to do a video on creating a game of chess maybe? thanks again keep up the great videos

  • @tamaskisely
    @tamaskisely 4 роки тому

    I am still saying top right bottom left... When should I stop? It's getting really awkward...

  • @Tracy7689
    @Tracy7689 4 роки тому

    Is there a way to make a 3D maze with this? I’m not so good with coding, but I think if there were 6 walls it might work in 3D.

  • @firstname4337
    @firstname4337 7 років тому +4

    editor = atom.io/

  • @ACS20596
    @ACS20596 5 років тому

    For mine, both 'grid' and 'this' are not red. Could that be why my screen isnt showing what you have?

    • @ACS20596
      @ACS20596 5 років тому

      nevermind! Thanks for the lesson

  • @robdallachiesa
    @robdallachiesa 6 років тому

    I like this topic

  • @guyr989
    @guyr989 7 років тому +1

    so...top right bottom left?

  • @sillysock1508
    @sillysock1508 5 років тому

    Can u make it like a town layout like a maze with many paths thru it please and like there is more than one exit and entrance if u can try and or do this I would be amazed and so thankful and happy

  • @ImBananas4
    @ImBananas4 7 років тому +1

    Wouldn't it be easier to just draw the bottom and right of each cell? this way all of the cells complete each others and you only need to remove the wall from one cell since your way they are all overlapping. Not sure if you need to remove 2 times the same line because of that

  • @yejunlee1058
    @yejunlee1058 Рік тому

    How do i do the same thing in react.js?

  • @bl_nkspac_9650
    @bl_nkspac_9650 6 років тому

    This man, has too much things on his brain and even his mouth can't handle it, but somehow.. i'm totally okay with him stuttering😂

  • @TheCecobent
    @TheCecobent 6 років тому +1

    Question: Why aren't you creating "Cell" class, instead you are using "Cell" function?
    Help me out guys if you can.

    • @Lep_19
      @Lep_19 3 роки тому

      This is perhaps too late to help, but the two things are functionally very similar. If I'm not mistaken, though, classes didn't really exist in JavaScript prior to ES6 syntax, so the function method was the way objects like Cell were made without them.

  • @rahulbera454
    @rahulbera454 5 років тому

    Thanks a lot for this !! Can you please tell how to solve this maze ?

    • @mrmugame
      @mrmugame 5 років тому

      You can use the A* algorythm He Made a Video abou it

  • @dhrumilchavda2585
    @dhrumilchavda2585 4 роки тому

    how did I work the same way with python

  • @denisschulz3814
    @denisschulz3814 7 років тому

    floor() is not working for me... any ideas why?

  • @brucewernick6542
    @brucewernick6542 4 роки тому

    I followed your maze videos using standard HTML5 and VSCode (not p5). There is a small glitch that is a bit confusing.
    With my canvas width attribute at 400, I use the following to get the width in my JavaScript:
    var width = canvas.scrollWidth;
    But, strangely, the width is 399 (1 pixel less)!
    The scrollWidth is used in W3Schools and seems to be a common way to get an element width. Even more strange is that my same code gets the correct width of 400 in the W3Schools TryIt editor.
    What could be happening here?

    • @brucewernick6542
      @brucewernick6542 4 роки тому

      I did some more searching. Turns out there are many ways to get an element size.
      scrollWidth
      getBoundingClientRect()
      offsetWidth
      clientWidth
      Problem is, they are not consistent.
      I'm leaning towards using offsetWidth
      .

  • @erkoriley23
    @erkoriley23 7 років тому

    Do you show somewhere how you set up Atom for these coding challenges?

    • @TheCodingTrain
      @TheCodingTrain  7 років тому

      A little bit here: ua-cam.com/video/d3OcFexe9Ik/v-deo.html

    • @erkoriley23
      @erkoriley23 7 років тому

      Awesome! Great videos btw.

  • @onelaoschannel3079
    @onelaoschannel3079 2 роки тому

    I need to add ball to intersection of cell

  • @tnsaturday
    @tnsaturday 5 років тому

    4:25, sketch.js, line 10
    Where are the width and height variables come from? We've never defined them, yet we use them.

    • @lbgstzockt8493
      @lbgstzockt8493 4 роки тому +1

      width and height refer to the dimensions of the canvas in pixels, its not a variable but more of a state, its like asking javascript "yo how wide is my canvas"

    • @JorgeGonzalez-cs2io
      @JorgeGonzalez-cs2io 4 роки тому

      @@lbgstzockt8493 thank you

    • @angelcaru
      @angelcaru 2 роки тому

      p5.js

  • @Andreas_Mann
    @Andreas_Mann 7 років тому

    you dont need some weird rhythmic song to remember the order. its just clockwise dude ^^
    i am starting to work with the SFML lib in c++. will it be sufficient to create this project? if not, what would you recommend?
    fun video as always!

  • @suxo
    @suxo 8 років тому

    Hi Daniel, the github repository link is broken. cheers

  • @vishesh8746
    @vishesh8746 7 років тому

    you are inspiring

  • @jdevilgamerdrjuciyfruit1348
    @jdevilgamerdrjuciyfruit1348 7 років тому

    Wtf when I run it the google page won't show anything

  • @wouter11234
    @wouter11234 8 років тому

    Wait I always thought rows was in the width and columns in the height..?

    • @TheCodingTrain
      @TheCodingTrain  8 років тому +1

      +TheWGBbroz Yes, columns go up and down and rows go across, but if you think about, say, multiple rows they are stacked on top of each other along the y-axis.

  • @ricardochirinos1382
    @ricardochirinos1382 7 років тому

    Where can I find the code?

  • @Nate-gi7no
    @Nate-gi7no 7 років тому

    Why not use an object for the walls? walls.top_right is a lot more verbose than having to memorize your array format

  • @ikeeluall3796
    @ikeeluall3796 7 років тому

    im reallt confused as to when he is using "this." in his functions, google hasnt provided much help, anyone have a good explanation?

    • @spaghettiking653
      @spaghettiking653 6 років тому

      ikeeluall3
      this. means that it's referring to itself or its own variable, so, for example, this.Var means that it calls for its own local variable, and this.Show calls the function Show for itself.

  • @Xnoob545
    @Xnoob545 5 років тому

    Bottop
    Is that bottom or top?

  • @lennartlindell7044
    @lennartlindell7044 5 років тому

    At about 13.25 : How to do the square dance. ;)

  • @samuelcoelho5267
    @samuelcoelho5267 7 років тому

    I have gotten to 11:13 in the video, and my code already has an error. I have tried so much to fix it, but I can't find away. For some reasons, the left and the right walls of each cell do not show up. Has something changed in p5.js, or am I just doing it wrong?
    My code: pastebin.com/RMH6pp5a

  • @oibwankenobi
    @oibwankenobi 7 років тому

    can you do it for C language plz?

  • @ihatethesensors
    @ihatethesensors 6 років тому

    Dude, your videos are awesome!

  • @Fenix.x00
    @Fenix.x00 8 років тому

    I'm having trouble converting this to Java. Anybody have a conversion or tips on what to do? (I learned some JavaScript, HTML, etc. but I was primarily taught Java)

    • @TheCodingTrain
      @TheCodingTrain  8 років тому

      If you want to file an issue I'll get to making a port: github.com/CodingRainbow/Rainbow-Code/issues

    • @yummi9954
      @yummi9954 8 років тому +1

      Bárbara Almeida used these tutorials to create this www.openprocessing.org/sketch/357551/. It's a different grid but it should help.

    • @Fenix.x00
      @Fenix.x00 8 років тому

      +yummi thanks

    • @joonasilvonen2301
      @joonasilvonen2301 7 років тому

      I recently made a maze generating/solving program as an university project in java so if you are still interested feel free to check it out. github.com/joonasil/labyrintin-ratkaisija All of the comments and documentations are in finnish but the code and program is in english.

    • @Fenix.x00
      @Fenix.x00 7 років тому

      Joonas Ilvonen that's awesome, thanks so much

  • @suhaalhamadani7327
    @suhaalhamadani7327 4 роки тому

    OMG I ALL WAYS TRY TO DO A CHALLENGE BUT IT NEVER WORKS D:

  • @ANBAT
    @ANBAT 7 років тому

    You should make mario

  • @matteoZattera
    @matteoZattera 5 років тому

    15:59 ahahha

  • @seanthebean99
    @seanthebean99 7 років тому

    Is there a reason you didn't use this syntax?
    this.walls = {
    top:true,
    right:true,
    bottom:true,
    left:true
    };

    • @TheCodingTrain
      @TheCodingTrain  7 років тому

      +Sean TheBean that's a good improvement thank you!

    • @seanthebean99
      @seanthebean99 7 років тому +2

      Daniel Shiffman It involves less ritual chanting "Top, right , bottom, left, top, right, bottom, left..."

    • @adamcbuckley
      @adamcbuckley 7 років тому +2

      I'm having TRouBLe remembering that order... :-)

    • @seanthebean99
      @seanthebean99 7 років тому

      Ok, that's amazing.

  • @RogerKeulen
    @RogerKeulen 7 років тому

    A-maze-ing.....

  • @simbobcrafts4843
    @simbobcrafts4843 7 років тому

    Did you always find maths easy to learn?

  • @tripmooo
    @tripmooo 2 роки тому

    ok

  • @suhaalhamadani7327
    @suhaalhamadani7327 4 роки тому

    please reply

  • @TwitchNotWB
    @TwitchNotWB 7 років тому

    Who are the 10 idiots that disliked the video?!

  • @KDChenStudio
    @KDChenStudio 7 років тому +24

    Man, i feel so much fun following the way how you approach the solution.

  • @TheMinecraftMan11100
    @TheMinecraftMan11100 7 років тому +23

    While I primarily code in Java, I've been drawn to these because you're just so energetic! You always describe what you're doing so well, but I was wondering if you could do a series on Java programming? I'm inexperienced with coding in general, and I've been using your videos to learn. Thank you!

    • @TheCodingTrain
      @TheCodingTrain  7 років тому +11

      Check out all my Processing + Nature of Code videos, those are all processing.org which is Java.

  • @muhammaduzair2863
    @muhammaduzair2863 3 роки тому +2

    From the future here!
    This is f**ing good man!
    Honestly your way of teaching is fabulous.

  • @NicholasWautier
    @NicholasWautier 7 років тому +9

    Commenting your code can help with those memorization issues you're having ;) Seriously though, great video! Thanks for not editing out your mistakes... It helps to see others going through those kind of issues!

  • @ShowMeSomeCode
    @ShowMeSomeCode 7 років тому +2

    Amazing Daniel!
    I uploaded a music reactive particle system in my channel inspired on your tutorial! Thank you for sharing knowledge with us.

  • @josepuga5529
    @josepuga5529 6 років тому +1

    Why the cell do you name the row "j" and the col "i" and not "r" and "c"?. Bad habit.

  • @thomasruck4139
    @thomasruck4139 6 років тому +1

    I built a java program in Processing a few months back creating randomized mazes, at this time I wasn't considering algorithms in the code, just breaking the problem down and solving it one step at a time. I am really curious to figure out now what sort of algorithm I have created. All my mazes are solvable. When small a little predictable, when larger totally fun to try and solve.

  • @LoPhatKao
    @LoPhatKao 2 роки тому

    11:09 makes me wonder how long you've been brewing up the April Fools 2022 video

  • @ctbram0627
    @ctbram0627 4 місяці тому

    make the maze then make an A* program to find the shortest path out of it?

  • @mikitoon1
    @mikitoon1 7 років тому +1

    Im gay

  • @pdsmart
    @pdsmart 2 роки тому +1

    I am SO like you. LOL. I LOVE to have things to line up!! I swear, I need to write my OWN formatter for Visual Studio.

    • @TheCodingTrain
      @TheCodingTrain  2 роки тому

      Hah, thanks for the comment and the support!!

    • @SarasamirSarasor
      @SarasamirSarasor 4 місяці тому

      Thank lots , this maze generator related to reinforcement learning (neural network)​??plz tell me@@TheCodingTrain