Live Stream #173: Rubik's Cube and Quicksort Visualization

hello good morning and welcome to the coding train it is a Wednesday it is 10:30 in the morning here in New York City and I am your host Dan Schiffman live here on my YouTube thing that apparently is what I'm doing with my life oh one portion of my life that is at least so I'm really excited to be here I was not here last Wednesday last Wednesday was spring break at New York University where I work it's my day job and actually where I am broadcasting from right now so I missed last Wednesday but I'm here again this Wednesday and for the foreseeable future for the next month or two Wednesday mornings eastern time will be the time of the coding trade so what are you watching you're watching a person me Dan Shipman who comes live on the internet to code stuff and I am really excited about what I'm going to do today because I have a new obsession I even have this oh no wrong key I even have this set up here which is that I my son I have two children a daughter who's seven and a son who is 10 and my son has recently gotten into learning to solve Rubik's Cube and we've mostly been working with the 2x2 Rubik's Cube which seems like that's the starting point like wouldn't that be easier than 3x3 I find that 2 by du cube but I have learned I need to solve a 3x3 rubik's cube i started trying this over the weekends probably saturday or sunday I think my record time there's like 25 minutes or something and I even still have to refer to a little cheat sheet or some algorithms that I've written down but I would like to get better at this I'm really enjoying it I can't believe that I'm 45 and I never picked up really a Rubik's Cube until home last weekend because it's clearly the kind of thing that I'm into so I don't worry I'm not gonna sit here and try to solve the cube live although some of you might actually enjoy watching that what I am going to do is try to program a simulation of the cube in processing in 3d so I'm going to create a 3x3 grid of box objects each with different faces and each of face is having a different color and then I'm gonna have to figure out how do I apply these rotations and move the pieces around I really would like to eventually make a coding challenge about solving the cube itself but first I think it's actually going to be quite a difficult thing to just make the cube simulation in the first place so that's that's the main topic of today I'm just looking in the chat here let me pull up oh I'm I don't have the slack channel so I'm gonna open up my slack job so if you're wondering it's often referred to as a slack channel the slack channel if you would like to become a member of the coding train or joined via patreon you will get a slack invite the other reason why I bring that up is because I am working on I am working on a new playlist of content called data and eight working with data and api's in JavaScript and I have actually recorded video tutorials for all of this content so far one a the fetch function I've got a parsing a CSV file making a line chart with chart touch yes jazz those videos will be coming out sometime soon but I've decided actually for this new experiment I'm recording these not during the live stream so I'm kind of doing double-duty here actually we did this on Monday and so another benefit of signing up to be a member or patreon as I will share you share with you this content a little earlier as I'm kind of putting it together because there's a bit more post production which is really unlike me but thanks to the talents of coding terrain editor extraordinaire Mattia we're doing some more post production stuff with this content so a lot of it is actually just with me on the green screen talking about concepts and then we animate stuff after the fact I kind of want to show you two of the examples I don't actually mmm if bear with me for a second [Music] all right I want to show you the examples so this is one of the examples that I'm going to be walking through how to do in this tutorial this is a an SS snake is mentioning code bullet which I will reference definitely this is global average world temperatures from compiled by NASA the Goddard Institute for Space Studies ss I forgot what that stands for GIS s GISS you know I was right Goddard super Space Studies this is global Earth temperatures from 1880 to 2018 graphed parsing a CSV using chart touch a s and then the other example which is quite similar things that I've done before is this is the location of the international space station in latitude and longitude on top of a map built with a map is coming from leaflet touch a s and if I program this correctly it should be moving well maybe there's a bug in my code I haven't made this video tutorial yet but the goal of this example is to have it refresh and move all right so that's coming I'm working on that stuff if you want to follow along with the examples and the sort of syllabus for this playlist all of that is here a shout-out thank you to Joey Cayley who is helping prepare materials for this second and third module of this course that I'm gonna publish a one you got starting to use node and databases and stuff like that so it's gonna be exciting all right now now what am I to know something else that's new coding train welcomes a new sponsor for today's a live stream and by sponsor I actually mean a sponsor not my joke about h2o thank you to brilliant org you can I think if I you can sign up for free at brilliant org slash coding train and also as a benefit for if you want to buy premium access the first 200 subscribers who sign up will get 20% off so I'm going to come back and talk about brilliant org a little bit later it's a really amazing website to practice and learn a lot of math and science stuff so many things that I do on this channel there are and actually I was in looking at it over the last few days I was like oh there's a whole module on there unsorted algorithms remember that live stream I had a month or two ago where I did the quicksort and I totally failed and you might not notice that no published video ever came out about the quicksort well that's because it didn't work out but I'm gonna try that again today in addition to the Rubik's Cube I'm gonna try doing the quicksort I was reminded by it by looking at brilliant org and reading their tutorials and quizzes about the quicksort got my head thinking about it I figured it out and I think I'm ready to code it today so I'll come back to that my plan is start with the Rubik's Cube take a break do the quicksort I'll say I'll give you a chance to sign up for brilliant org during that time and then I will come back and finish the rubik's cube all in the next two hours what could possibly go wrong nothing could possibly go wrong I have papers today I have papers with me I have my algorithms I have some information about brilliant org to help me remember the things that I want to say about it and here we go all right oh but before I do any of that let me do what I like to do as my opening segment here on the coding train which is look at stuff that you all have made so my most recent video that have been published the edited versions of the livestreams were all about the number pi pi day so I did this video about counting the digits of pi through colliding blocks and this was all based on the work of three blue one brown eye the Leibnitz formula which is an infinite series fractions that you can use to approximate PI I did a video on that and this other weird video about counting the number of iterations at a certain point in the complex plane in the Mandelbrot set and arriving at the digits of pi so people have submitted their own versions of these no one has submitted a Mandelbrot community contribution yet so you could be the first you watching this right now could be the first person to submit but I'm let's take a look at look at the pie de collisions and the Leibnitz formula ones so here we go let's look I'm just gonna kind of click through these so we can see them this one is fast p5 implementation by matei Adria I remember mattei was in the chat giving me lots of advice so I think what matei so we can see you okay we got we approximated three with a mass of 1 let's try 100 we should get 31 there we go 10,000 we should get 314 I'm missing the clack-clack we want the clack so we can see this works now I I would have to dig into the code and I would recommend that you do this - I think if I recall correctly that there are some optimizations in this particular code that that make it run faster you notice the mine really slowed down Chuck to a halt once I got to a certain number of digits okay thank you for that let's look next at Oh processing versus was big decibel by Daniel mmm sheath Mon interesting I think I'll skip that one because it's in processing and I can't easily run it animation without using PI huh what's that so this is the same oh I like this so this is nice to be able to visualize the actual velocity values and many people point out you should read the comments on my video as many people pointed out you don't need this animation at all it's all just about exchanging the velocities and so you could actually do this counting calculation without without the animation and then I remember this one I'm very excited to show you pi collisions visualizing optics by Anurag Hazra so this one is really wonderful because in the three blue one Brown video series and the third part grant references how you can make a calculation of the number of collisions based on a ray of light bouncing in this slice of pie so to speak and nuraghe visualizes this in this one so you can see this we don't we can see this is representing the array of light and each bounce so we got well I don't know what just happened there oh yeah we've got three one four one four collisions I don't know what that number is and so that's cool so I can let me add two more two more zeros to get 1 million oh we have the clock I didn't hear the clock before you gotta love that so beautiful all right okay so that's great and the source code is right here I love how people are adding interface elements let's take a look at the liveness ones there are a bunch of these we see another one by Anurag here my interactive version of the Leibniz formula for pi by Sahil Khattar cat coyote and I I'm I've really got to work on something someone if you ought to be an amazing tool I should have people when they submit their coding challenges to also like submit a little audio file of than pronouncing their name because I don't like mispronouncing people's names and oh this is nice so this is a much nicer design of the page you can scroll Scroll in to zoom in and out on the graph I'm not sure how that works exactly you can change the speed and we can see the source code here restart with a button I love that wonderful and I just love you know the beautiful digit pie right there great work but display the average of the last two iteration so this is a really smart way of doing it because the average of the last two iterations right it's the approximation is also always oscillating around around the number pie itself so we can see this is a nice we can see how by looking at the average of the last two oscillations the last two values that's really are sort of more pure approximation of the number pi okay and I think we've got one more two more to look at another by Anurag we did some clever different ways of visualizing the theories what I love these woo I'm having something like Fourier flashbacks here beautiful work and the circle display I haven't looked at this one Oh interesting oh look at this what is going on here is this some kind of this just show this is maybe showing me what the digits are three one four oh I love that so nice a visualization idea about how to represent the number pi or at least the current approximation and where it's off by colored circles great work that's a very creative idea okay all right so now look at me I'm so like organized today I'm gonna do I'm gonna I'm gonna open up processing I'm going to find my way into the chat here okay and alright so sorry I'm looking at the chat let me get set up here [Music] don't wanna mess it up because I want to be able to have business a reference so high-tech today [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Music] oh I didn't realize that I didn't realize that code bullet I know I've seen the code bullet video on solving a Rubik's oh no this is it this this must be the video that I watched right I know I'm confusing myself I don't think I think that code bullets video doesn't so here's what record scratch this is what I'm interested is a thought experiment could I use neuro evolution could I take the current configuration of a Rubik's Cube and have its its configuration be the inputs to a neural network and then the move there's really only certain number of moves forward you know forward clockwise counterclockwise backward kept boys counterclockwise up clockwise counterclockwise bottom kind of clockwise right clockwise counterclockwise left clockwise counterclockwise how many is that six there's really only certain um six times two 12 whatever no yeah something like that anyway the point is could I use a neural network to decide what move based on the current configuration now this would typically be solved with reinforcement learning some type of policy reward system and there's actually I quit Google search last night I found a paper for someone who had solved Rubik's Cube using a neural network and reinforcement learning and the reward system was based on actually starting from the solve cube and trying to like find a configuration backwards similar to where you currently were but I I would be interested in trying the neuro evolution technique to just basically like make a bazillion random neural networks and see how they do after a certain amount of time the question is how do I evaluate how close they got to the final solution and I think I could do that in some ways I like counting the number of the number of pieces that are in the correct place that could be a score so I'm interested in trying to do that but before I can even do that I need to just make a Rubik's Cube simulation so I'm not doing any of the AI stuff today if I'll be happy if I can see the Rubik's Cube on the screen and I can apply like at least like one move to it that's kind of my goal for today the middle move yeah it's the middle move a move like so because the middle move if I do this this is this discussion was coming up the other day if I'm so bad at this if I do this ah that was like the middle counterclockwise but isn't that the same as bottom clockwise top clockwise so really the middle is just a two other moves in sequence yeah yeah you can score the progress okay thank you so the people so if you have ideas for this let's talk about it so I'm going to get started I'm gonna use processing I've got my cube and I think I'm just gonna begin put the Rubik's Cube on top of green paper turn on chroma key and then you can only show the Rubik's Cube ooh that is a clever idea I will consider that in future coding train episodes and pretend that I'm solving it aha that was completely faked by the way welcome to a coding challenge on the coding train Rubik's Cube so we try that again what would be like what's I'm gonna get my sequence down aha so that was fake um welcome to who he was already solved welcome to Cody challenge on the Kota Train Rubik's cubes so today a while back in April 30th 2018 Neil's Webb suggested a Rubik's Cube solver using a neural network by the way this is the greenside it's not the white side see okay and I'm really interested in this and I actually picked up a Rubik's Cube over the weekend I've been learning to solve it it takes me at least a half an hour but I do do it I don't have to watch a video while I'm doing it I did have to watch a bunch of videos to figure it out I'm getting off topic and but I really want to explore this idea what types of AI machine learning algorithms can I apply to solve a Rubik's Cube this will be interesting to try at some point on the channel but there's a lot of steps I need to get to before I can get there so what I'm going to start with today is just actually creating a Rubik's Cube simulation Simon Tiger also posted an issue showing all the different kinds of Rubik's cubes configurations that are out there apparently there's this 28 by 28 by 28 one I have some of these at home they're super fun to play with anyway but so and so let me close all this stuff out I should also reference code bullet code bullet is a YouTube channel that has many different coding exciting adventurous topics and code bullet has a video using a particular algorithm to solve a rubik's cube then makes a giant rubik's cube so if you want to get the 16 minute version of everything that's gonna take me the next 700 days to figure out in one video and be entertained I would definitely recommend the code bullet one alright so closing that out I'm gonna start here in processing I'm gonna hit save and call this Rubik's I don't know Rubik's Cube why not put it on the desktop what's my first step processing if you're not familiar is a Java based development environment for creative coding images animations all sorts of stuff I use it a lot on my channel I'm pretty sure that's what code bullet used for for his Rubik's Cube I'm gonna add the set up and draw functions I'm gonna add a window that's 400 by 400 and I'm gonna put in P 3d so P 3d I definitely need to use a 3d render because I'm gonna represent the Rubik's cube in three dimensions so what do I need let's make I have an idea let's make a I'm gonna call let's make a class called box I'm gonna call each one of these little little cubes inside the larger cube each cell of this 3x3 grid I'm just gonna call it a box and so I need a constructor and I need to know where is it well this I need to know its index in some type of like maybe multi-dimensional array but for drawing and I really just need to know where it is in the virtual 3d space so let's when I create it let's give it an X a Y and a Z and then also I need a sort of side length so I don't know whether I need the full side length or a half length that's kind of like a big swing it's good to come up but let's just assume right now that I initialize it with a full side length and then I'll use a P vector a vector object for the position and a float for that side length let's just call that side I'll call that length and I use an underscore here to make this a different variable name so now I'm just a position is a new P vector XY Z and the this needs a semicolon here and the length is equal to this so then I'm gonna I'm gonna write a function called show and I'm just here I'm gonna say push matrix which saves the transformation states pop matrix which restores the transformation state oh my god what's a transformation state you might be asking so I'll what it is what I need to do is I need to say translate to position x position Y position Z this is basically positioning what I'm about to draw this box with this length at this position and I'm feeling people who are watching this live in the chat are telling me this isn't gonna work because I need to color this different face spaces differently I'll get there I mean I have to get there at some point but let me just use the processing box function which will just put a box right there so in order for each boxes translation to not affect the others that's what push matrix and pop matrix does and I'll put something in this video's description two more about matrix transformations if that is new topic for you alright let's just say fill 255 stroke zero stroke weight eight and then I have this box class so now I need to make a cube object it's not really cube are you gonna make it a right now I couldn't make a cube class I probably should but just for simplicity right now let me make a three dimensional array four rows columns and what's the other one I don't know if you have a third one it's the the z-axis I suppose and this is going to be let me make a variable called like dim four dimensions because in theory if I do this right we could just change that one variable I have a much bigger q equals new box which is dimensions dimensions by dimensions by dimensions then I'm going to say I'm going to do a triple nested loop with i IJ K IJ K IJ K IJ K and then I am going to say cube index i j k is a new box at some x y&z with some side length okay so how do I this out if this is going to be at zero zero zero this is going to be at 1 0 zero if I go down here I'll be at like 1 1 zero back maybe the last row anyway you get the idea it's like a grid but with another dimension I think I'm doing this right so but I need a side length let's just make that up right now length is let's say it's 10 so the X would be length times I though and the Y would be length and I might have my axes wrong but whatever I call XY and z axis whatever they're all just different axes ijk and so I'm going to say box X Box Y box Z I'm ex y z and then length and then I mean there's no way this is right like how could I possibly get oh I need another curly bracket and then now if I grab this for a loop and I put it in draw but all I say now is cube ijk so I almost want to keep these in another array that's just a one-dimensional array for simplicity but let's see how this goes hey look that's kind of like the rubik's cube ething up there in the corner so one thing I want to do I definitely want to do is I want to add well I want to first give it a background background 200 like 1 I'd use my number 51 and then I probably want the side lengths to be much bigger and let's just run this again you can see oh it's sort of up there and I think I need a larger space here so I need to position it in the center so I can actually see it and there's a variety of ways of to do that I could just translate to the center but I'm gonna use a library I think I haven't installed import library I don't this is great I'm using a library called PZ cam and I'm going to hit install peezy cam for a processing easy camera is a way a library that allows you to very quickly get a mouse camera interaction where I can spin around a three scene in processing I've used it in other videos before so I think if I just say PZ cam cam and then if I say something like cam equals nu P Z PZ thank you - Jonathan Feinberg who created this library PC cam this and I forget this is something to do with like how sumed out or zoomed in it is Oh import I need to import the library which I can do automatically like this import library PC cam was it there and I just didn't see there ah there we go look look thank you know there's a lot more to do here but look at this that kind of looks like a ruby see now it's rotating around its little like corner there I want it to rotate around the center so what I need to do is I need to have an offset and the offset is going to be half of the full width so the full width is dimensions times length and then if I divide that by two so if I then subtract out the offset that should give me our nice little cube no that's not right Oh because but here I think this is my like off by I think the Box function is probably using the half width but then that'll be off now no that that's not right Oh what have I done I think I have this off by dividing by two I think about this we look at the box function okay I'm looking at I'm looking at the box function dimension of the box in the X dimension dimension of the box so it doesn't really say whether it's half or full width I can assume it's full width that would be the processing way Oh No yeah no dimensions times length divided by 2 why did that not work they're called I'm being told by the way these are called cubies 4x4 what did I miss here box is made from the corner oh the box is made from the core know that the each one I think box is made from the center right I mean it looks like it's off by just this amount but this doesn't make any sense time is it by the way yeah so that's right why why hold on if this is zero this is 10 and this is 20 it could be like this or it could be like this right where this is 0 10 20 so here I take dimensions which is 3 times length which is 10 which equals 30 divided by 2 is 15 0 10 20 by 2 is 15 so if I offset everything by 15 then in this case it is at negative 15 just like here and then negative and then negative 5 and then oh yeah that's wrong and then so it must be drawn from the corner the box is drawn from the corner and then if but I thought it was drawn like this in which case it would be at negative 15 would be the middle and this would be perfect oh but that's zero there oh yeah I need to shift it over because I want the because it's odd maybe yeah because it's not an even number remove length is there a box mode Center you're removing it as if it were drawn from the corner yeah exactly which would be right I'm moving it as if it were drawn from the corner it's actually drawn from the center okay thank you all right here all right here's the issue I actually just made a little diagram if the box these are just two dimensional rectangles were drawn from the corner like they are in rectangles but 2d rectangles in processing this would work because I'm just shifting everything over and the middle one is but their axes the middle one is now placed in the center because I'm shifting over by the total width is 30 I'm shifting over by 15 we've got half here half there but they're not they're actually drawn from the center so by shifting them over I end up with the first two on one side and the other so I actually need to shift it I need I need I'm there's that there's a half of a length that's incorrect so there's probably a smarter way to fix this formula but right now I'm just gonna add another half length here and/or the offset actually that's that silly I should really add it in the offset so length divided by 2 plus this and now we should have oh no - and you shift it over but it's in the offset is the offset is a little bit less dimensions minus 1 that's the issue hold on everybody this is so silly change this to 0.5 and this is actually dimensions minus 1 times length and then half of that and now we should have it there we go there's my Rubik's Cube in the center all right and I'm being told by the way that these are called ruby's so I'm gonna change that class QB QB + QB QB + QB so step one is complete but as you'll see if we look at this whoops if we if we look at this Rubik's Cube each face has a different color there are only six colors there's white red well two white on the top yellow on the bottom and then red blue orange and green so let me make let me make an array with those colors I think what I can do is just say there's a data type in processing called color it's actually just an integer and I'm going to let's come up with an order I'm gonna say top bottom I don't know if this is a good order to do but top bottom I'm gonna think of the top as always white so top bottom and then right left front back right left front back and I know there's like actual rubik's cube notation and I'm probably getting that a little bit up I think it's actually not top out if it's up down up down right left front back so let's try that so the colors are four up is white and I'll do that in hex down is yellow what's yellow does anybody know the hex colors for all of the Rubik's Cube use the right hand rule for the order what's that bottom is white okay I mean bottom is white up down right left B F up down okay god I've got kuber's in the audience here yellow is up down is white wait so the up this is yellow this is down Matt - I think we can edit this part out we'll just I'll just come back to it red okay wait hold on so if up is yellow down is white right is green left is blue whoops and front is front is red and back is orange Wow orange orange is just like less green something like that I probably do this new int well I don't have enough just missing do I need the new end thing or will it be fine let's break this up okay up down the colors are not represented correctly white up green front okay white up green front is I'm being told oh there's video very serious about that Rubik's Cube stuff by the way as a bonus anybody sticks around to the end of the livestream I'm hope scramble this and try to solve it that'll sure be very entertaining and very embarrassing wait is top green is front okay so white oh and this should be top bottom I don't want to say top or bottom up or down I'm gonna say up and down so top is white down is yellow so then front right left back a front front back so front is then green back is blue right is red and left is left is orange is that orange I don't know up and down okay what is bottom people are very upset about whether white is the top or the bottom alright let's let's phone a friend no strawpoll I don't like this one white is on a cube on a cube white is top bottom and then create pole alright everybody there you go which is it I will emerge or ax T will rule here FF a500 is good for orange thank you FF a500 I can always change this later that's what's great about programming up yellow down Y ok well Simon I've Simon is generally the voice of reason here so people are really this is almost like which which programming language is better a kind of discussion results for votes it stop Simon is really specifically saying it's the well the bottom can't be orange if the top is yellow Oh down ob is back down is right yeah yeah so confusing ok all right I'm gonna keep going I will I will change it later if need be let me see if I can show this draw pull link there you go check Wikipedia alright alright boy not really losing time here Rubik well sort of drawn here with white on the top but does that mean it's the top in when you're if you're like solving it by the way this would be interesting to just show it this way right back up down left right yes I know all this I know all this you know all this alright I have to give up here it really doesn't matter for the purpose of what I'm doing I'm gonna have white be the top for right now when I'm gonna check the results yeah very close but I'm gonna use white as the top for right now just for right now we can always change it okay all right I've returned and I've now finished off this array wait let me let me do that again or head back I finished off this array with the colors in the order of up and I know there's some disagreement as to whether yellow is the top or white is the top I can sort that out later but for right now I'm gonna say white is the top Green is the front so white is the top yellow the Bob but green is the front blue is the black blue them over time here okay okay I'm back I finished off the colors for this array and I'm using the order up down right left front back and I am just right now using the convention as white being on the top and I know there's some different ways of looking at the cube you can think of yellow as the top and white is the bottom but I'm gonna use yellow at the top and green as the front so I have these colors so how do I then apply these colors to the different faces of these little cubes it's like that's like the greatest thing I learned today so unfortunately I will not be able to use this box function anymore however I can use my own begin shape and shape so what I really want to do is I want to instead of what I really want to do is instead of all right one side sometimes when I lose my momentum I can't get it back what I want to do is instead of just using the Box function to draw the full three-dimensional QB I just need to use quads I can use four quads I can you probably just rectangle function or different things but I could do one qualta more than four I need to do six one quad another quad another quad another quad and another quad now of course if we look at the actual cube itself each of these corner pieces you can only see three phases the middle piece you can only see one the I figure out what these are called corner middle whatever these other pieces in the middle on the top you can only see two faces but I'm just gonna do all the faces for each QB we can we can we can optimize later if need be so let's just do one so in other words if I say begin shape quads then I can create the vert and then let me just say the R equals length divided by two so now I'm going to take that side length and divide it by two because I want to set the vertices offset from the center negative R plus R negative R plus R so I should be able to do for the first one vertex a negative negative R negative R zero and I'm gonna keep the Z at zero for this first one and then so let me just diagram this right if this is what I'm doing this is you know negative 1 negative 1 this is 1 negative 1 this is 1 1 and this is a negative 1 1 so basically I just need to set all of these vertices to draw that quad and the negative RR it was our negative r r r- r r and now if we run this we should see whoa what did I just do so first of all oh you know what I'm doing I'm still drawing the box yeah take out that box thank you very much and there we go we can see a mite and we can see now I have just those front faces so all I need to do is do exactly the same thing I just need to do six of these so with different with different axes so if I put 0 0 0 0 0 0 0 0 and take that basically take the 0 off of the Z now I have got oh wait a second this is not right it's kind of interesting though how because now I actually wanna whoa I forgot that PZ cam does this oh what did I do wrong here create a function that draws a quad by passing a normal vector oh that's a good idea this is some messy code yeah yes it is welcome this didn't work because if I'm translating to the center oh oh I'm so silly this isn't zero this is either at negative R this is one side and then this same face so come at this one out would be at R right these don't cross the center of each little QB they go along the edges so the Z has to be so now we can see now this is right because it's a 3x3 cube it looks like why is there four but these are these are the front and back or the left and right or the top and bottom ever you want to consider it and so now if I do this with negative R of course of course and then the same thing with positive all right there's six faces there we go now I have my Rubik's Cube but without the left or right or the top or bottom I've told you what the orientation is so but the y-axis basically needs to be fixed so this is Z being fixed this first one was Z being fixed this one is X being fixed so I'm going to say Z Z fixed X fixed and now I need to do one that's why fixed and that is going to be so this one I copied what did I copy I copied Z fixed so all I need to do is fix Y so negative or negative are negative R a heart our R and then this should be negative r- r r- r r r- r r and same thing here negative our negative r r- r r r- r r look there it is again there's our cube but all different faces so I have no idea let's just make a total guess here what if I say just for this so let me do let me do a fill in all of these fill 255 fill 255 fill 255 fill 255 I fill 255 fill 255 so now they're all white but I can say I remember have my colors and what I'm actually gonna do let's make some there's thing let's make some variables that just keep these let's do top well let's do up well these are key words in these are key words in processing let's do them all three letters up is zero down is one I just want to like keep track of these constants final that is that a thing I don't know I don't know how Java works there's probably gonna innumerable down right left front and back this might I mean this is sort of unnecessary but let's do that so now up down right left front back so in theory I want to say fill if this is the top I've no idea if it is whatever the top is fill colors top up up yes that's the top it's facing whoa oh yeah it's why I shouldn't big white is the first one fill colors are already white down all right let's find where that is this is gonna be on the bottom no it's facing us but that's fine because the way I drew it this is really the top over here I think so that's fine I mean the point is I just have to be consistent colors so this would be if Y is fixed if Y is fixed we're doing oh no what if Zia fixed these fixed its front and back so behind is back this of course this is front and then if Y is fixed it's not really fixed then we have top um that's that's actually bottom and then this would be and it's down this is up boy this is taking a crazy amount of tie I can't believe how much time this is day cake and this everybody the Chad I'm sure it's going crazy with better solutions to this X this is left and this is right all right let's see oh hold on let's look here oh whoops not using enum can somebody tell me how to use n um maybe in the slack channel I'll fix that because I actually don't know how to use a none okay all right let's take a look now and I get the orientation the same white and then oh oh but this is mirrored right oh no no it's fine wait ah yo I can hold it anyway oh okay I can hold it any way I want yes okay white green orange is there I hope I can't I can't I can't figure it I can't look at it this way with the view all right it didn't work that's not gonna work for me do I have it off all right let me look all right let me check this I have white green red orange yellow blue red and orange are in the wrong place red and orange are in the wrong place so did I get did I left is red so left left should actually be in the way if if green is the front these are actually wrong so so actually actually drawing it is correct I just have the color swapped incorrectly here so this should be orange on the left and red should be here on the right let's take a look one more time and now I think if if I put this here you can kind of see right now I'm looking at it on the green I'm looking if I bring this down it's green if I go this way it's it's blue that doesn't work all right all right let me try this one more time and if I look at I'm looking at green and with with yellow on the top fine white on the bottom orange red and blue okay so my Rubik's Cube here is mirroring and I think my y-axis is flipped so all of you who want to yellow to be on the top congratulations you win all right everyone I'm not by any means oh did I have this on there the whole time I move the win let me let's do this one more time for much is editing purposes later let's check it here we go well I mean debug mode for no reason so okay okay let's check it here we go all right so I'm looking at green with yellow next to it so I'm now holding it the same way green with yellow next to it so if I go orange red white and on the back blue alright so this is the actual configuration of the standard Rubik's Cube I have it now this video is not over the next thing I need to do is figure out how to do this and so I can scramble it up and do and apply rotations to it um okay I'm going to add the enum enum colors how do I do it I'll also say the nice thing is for those of you what J love to be on the top looks like I drew it with my y-axis flip so everybody wins I'm using white as the top in my variables but when we see it yellow appears on the top so excellent I feel like I am being lied to how many times has this happened before live acting there's only one movement that needs to be coded oh that's interesting refactor time my green is green screened yeah all right well I'm gonna be taking my a break and doing my quicksort make this multi part yeah I think this but this probably should be multi part yeah I will figure that out later but yeah let's let's assume this is gonna be multi parts so I am going to what sides that should be black oh yeah I'll deal with that later I'm gonna just let there be extra colors in there all right how do I do 'inna I have to look up how to do you know I don't know how you know Java Java oh just like this that's so easy oh what's wrong with me no but if de color public enum color public enum directions but they'll do side okay before I wrap up this first part let's see he let me at least it's very painful apparently for a lot of people to watch this that I'm not using enums enums are not something that I'm used to I found the Java documentation page about what enum is it's a special datatype that enables a variable to be a set of predefined constants so which is really exactly what I'm doing here but in a much more sort of like awkward manual way so instead I should be able to say enum I could call it like side and then I can just say up how do I let me look at this syntax yeah and then I just put the public enums I don't need public in processing because processing assumes everything that's public so I'm gonna do up down right left front back just like that and then I can delete these and I should have exactly the same no oh it's inner everything's an inner class is that gonna be a problem can I have an enum that's an inner class did I just okay I just know what I do wrong how do use enums oh I see I see I see yeah okay okay okay so unfortunately I forgot that because processing simplifies your Java code and makes everything and wraps everything in one class I can't put an enum inside of a class so what what I can do is I could make another tab called side Java and then this would be class side I think and then I could say enum I'll just call it like face mmm QB I'll call it face and then I also this will allow me to I think it might I might just use then the actual full words left front and and back so now I should be able to say anywhere I'm using these I should be will say side back like this side front side down side up the reason why its syntax highlighting up and down is those are global constants in processing for dealing with the arrow keys which is why I was calling it upp instead of spelling up upp side left and side right no face face face oh no no I just do this like this can I convert from side to int I'm so lost public so it's making it yeah no semicolon but how do i I want it to be the integer value to look up in the array this is why I don't need to cast to end oh that's so annoying color gets int you stack overflow up equals zero now console.log values of side remove the semicolon downcast attune in yeah but I don't want this is like defeating the whole purpose of doing this if I have to cast it to an int there like it doesn't Kant doesn't let me anyway import side up equals Oh look yeah it has to be yeah all right I'm gonna not put this in the video right now I will come back I I need to be mindful of time here and so someone's gonna give interface and interface Oh ordinal I can do ordinal okay yeah I feel like I'm defeating the purpose of I'm defeating the purpose of using enum okay yes time to pivot okay so Matthew I'm gonna do a wrap-up and we'll do this in multiple parts I think I don't love the multi-part thing but I think that'll this Rubik's Cube thing is gonna be such a long project that I think I should so I have now drawn the Rubik's Cube I have a mate some of you happy who think that the top is yellow because the top is yellow here cuz I drew at the y-axis flipped even though it says top is white in my code who knows I'll figure that out later something that would really improve this would be using enums enumerables instead of these lists of constants it's a little tricky to do that in processing because of the way that processing wraps Java maybe I'll fix that up when I refactor this later but but in the next video I'm gonna work on actually trying to figure out how to do a rotation how to turn and move the stuff around and actually have all the data move as well so that I could shuffle the rubik's cube so if at least in this first part if I can now then make the moves then I could do another part where I could shuffle it and then play the shuffle back and reverse to make it look like it's big solved that'll be fun so if you want to try try your own say one thing that's another thing that's really missing here is that you'll notice on an actual Rubik's Cube that the the just the faces that you can't see are actually colored black whereas once I start rotating these all those other colors are actually there internally and in fact there's like a cube in the center you'll never see it has the colors on it in mind but you know dye a no I think I think I think I've done enough see you in the next video I think I've done enough I will see you in the next video alright everyone so I its 11:40 I've got about an hour and a half here we'll see if I get to the third part III envisioned this live stream is in three parts first doing what I just did second quicksort and third and third up applying the rotations to the Rubik's Cube so I am now going to work on don't leave don't leave there's Lauer's more to go you could you could go I mean no one's required to stay but give me a second I'm gonna pull up my job [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] okay so as I mentioned I'm welcoming a new sponsor to today's livestream brilliant org I'll put up the banner up here on the top I will give you a few minutes after I do this coding challenge to sign up please go to brilliant org slash coding train to sign up for free if you're interested in the premium access the first 200 subscribers who sign up through that URL will get 20% off I suppose I don't know how many people are watching right now but if more than 200 maybe it's nope all of you go sign up I guess first-come first-serve there but what I wanted to show you so there's a couple things that I really have been enjoying about brilliant recently so brilliant is a website where you can practice and learn all sorts of different whoops of course of course my camera goes off during my talking about the sponsor so it has a daily problems in math science computer science lots of interactive topics and lessons so it's a nice companion to if you like watching the coding train it's not a person talking to you but it's actual interactive puzzles and quizzes and questions with lots of explanations so for example I don't know the other day I was playing around with doing the there was a probability daily challenge that I tried and I worked out the solution in JavaScript so lots of other people will work out the solution in pencil and paper but one of the things that I really struggle with these days is coming up with ideas for coding challenges and I get a lot of great suggestions from the audience I figure I pull stuff from my teaching here but I'm finding that brilliant org is a really great place for me to discover some new ideas of things that I want to try in particular if I go under practice and look under computer science there's a whole section frizzle there's hosting on artificial neural network so I'm very excited to dig into but there's a whole section on algorithms in particular courting and I was like oh and you can see this checkmark here because I did it this morning so I did it this morning because I was like oh I tried that on the channel I couldn't figure it out so I went through the quiz and the explanations and now we're gonna see what are the fruits of me trying to learn and remind myself about quicksort from brilliant I will say that merge sort probably makes sense to learn and practice with before quicksort but the merge sort I don't really know how to visualize that and I think I have an idea of how to do the quicksort so what I'm gonna do right now is actually I'm gonna take I need to get some water so I'm gonna take a short break and I'm gonna be like 5 minutes or less when I come back I'm gonna do my quicksort coding challenge and in the meantime if you have five minutes now and you this also supports the work that I'm doing and you can sign up for free at brilliant org slash coding train and once again if you're interested in premium access you can the first to under subscribes get 20% off all right so I'm going to just switch to some music and I'll be back in five minutes five minutes you [Music] you I'm really good at this sponsorship attack I'm sorry my bike with you and now it's back on I noticed here that Simon actually who coding trained viewers Simon I mentioned that there are things that are worth mentioning about brilliant that he likes daily problems the eight principles different quizzes chapters and courses and there's also a gift memberships so one of the things that this sponsorship is allowing me is to not not monetize the livestream with YouTube ads so if you like that if that's nice for you and you want to help me out a little bit by giving it a try go sign up at brilliant org slash coding trained and I will be back in just one minute you [Music] you oh boy I really I didn't realize that the music cuz I could hear the music and i reconfigured that page to have the banner but unfortunately apparently the music wasn't working so sorry about that everybody I've really you can see that I have some work to do interpretive high up doing so well today with this livestream my professional set up here but I'm just doing my best bare with me everybody thank you brilliant thank you for reminding me about the quicksort algorithm please go and sign up and now I'm gonna get back to coding but actually I think what I'm going to do is I was going to do this in processing but I think what I would like to do people requesting to this dot song let me actually do this in p5 I think I'd like to do the quicksort in p5 and I will explain why momentarily so hold on people were requesting to this song here you go I always forget to do this this star this star this star this star song never forget the Vista or somebody composed that song from able if I couldn't get this done in the amount of time quicksort okay okay all right okay [Music] and then I need to open up the code and the camera of course goes off what is going on here all right so what I just want to get I'm gonna start from the bubble sort code that's why I'm just getting this sort of setup I'm not sure why that was focuses was visualizing it why is this J Global variable as well it shouldn't be minimize this and now I can get at this and I was doing something just because I wanted to I wanted to visualize it slightly differently can validly okay and then we make this 800 by 200 and make this that's weird looking there we go so bright can I make the page is that not how CSS works body oh no : there we go that's not exactly right but whatever okay well that's enough and then let me set the frame rate okay all right everybody here we are we are ready to go I'm going to explain the quicksort algorithm I'm going to implement it I'm going to visualize it and I'm gonna visualize it oh you can't see me I'm gonna visualize it in two different ways and I think maybe let me write up here quicksort with some rainbows and like a couple hearts and a couple stars and a little smiley face okay that looks good oh you can't see my hearts on the top that's fine there we go okay all right so now I have the code here which you can see three-one three-one three-one thank you thank you okay coding rainbow flashback okay here we go everybody oh don't worry I'm still gonna there's still time with so much to do look hopefully I'm gonna be able to do my it takes me a half an hour to solve the Rubik's Cube I like the swapping elements yes that's a really nice idea Harpreet oh but I might try that we'll see hello welcome to a coding challenge quicksort visualization now you might remember a coding challenge what was it okay hello welcome to coding challenge quicksort visualization now you might remember coding challenge number I forgot one 14 bubble sort visualization where I visualized the bubble sort a sorting algorithm to take an array of numbers and put them in order from lowest to biggest smallest to biggest lowest to highest who knows put them in order it could be alphabetical order you could sort things by all sorts of metrics the bubble sort is a wonderful simple relatively simple algorithm to implement but it has a big flaw it is it's let's start over let's see as I want to have the quicksort Wikipedia page I just started to go down the Big O notation ooh look at this I like this visualization well this is way better than what mine's gonna be worst case and then so bubble sort o N squared quadratic right not exponential huh hello and welcome to a coding challenge quicksort visualization what you're seeing here are the results of my previous sorting visualization challenge where I did the bubble sort now the bubble sort is a really nice sorting algorithm to start with it's it's pretty easy to relatively easy to implement with just some four loops but it's very inefficient and it's super inefficient because it is an algorithm that takes on average Oh Big O being a weten Oh the blender Oh here standing for Big O notation or the order the magnitude of how long a particular algorithm takes based on how many elements of that algorithm there are so with an array of n elements the bubble sort is typically takes o N squared so the more elements but the magnitude of how long it takes to solve to sort that that or a increases quadratically now the quicksort algorithm is on average a Big O n log n algorithm and now maybe at the end they'll come back to like unpack why is this but this is much faster than this and there are many other sorting algorithms they get to them all someday there's more just Birds or sword and keep sword and radix sort and all sorts of other ones and I'm kind of jumping ahead here to maybe a more advanced one quicksort but what are the things I love about the quicksort is its divide and conquer approach that requires recursion so I've done a lot of things with recursion on this channel before more more in computer graphics or drawing a fractal tree or some other type of recursive pattern but here we're gonna see a recursive function a function that calls itself alright so what else do I need to look at nothing really all right so here I have the JavaScript code with that has the bubble sort implemented here and now I want to change to try the quicksort if you're looking I think I should just stay at the board so let me describe and try to diagram out the quicksort algorithm as best as I can from memory before I go and try to code it so there are really two there's two important functions that I need to write one I'm just gonna call quicksort and another I'm gonna call partition and these are not names I've made up these are the sort of classic terminology for this particular algorithm so let's say that I have some array the array has some amount of numbers in it 3 9 2 4 7 I don't know if I put that in a good order for demonstration purposes but let's see so the idea of a quicksort is to first the idea of the quicksort is to first apply the algorithm to a given array so I'm going to call the quicksort function on a given array that's what this is here and I need to specify what part of the array I want to apply this quicksort algorithm to I want to go from some start to end I really should have looked at the algorithm before I started this I'm like literally just drink this from memory so I know that I want to go from start to end and then I need to pick the pivot and I need to put everything yeah I need to just put everything on one side one side or the other and then I call partition our partition is what does that partition is what moves yeah yeah okay right let me just look at the Wikipedia page we just look at the Wikipedia page to remind myself yes exactly start and end oh right and then I partition and I get back the middle point and quicksort again okay right of course of course of course thank you very much Internet where was I here this is gonna be on the code okay I guess it's usually called low and high but I'm going to use start net so let me actually let me start this explanation over again cuz I realized I kind of I'm thinking about it in a slightly different way that makes more sense okay all right all right let me try to describe the quicksort algorithm as best as I can before I start implementing the code so first of all let's just say we have an array and I'll just make a really small array right now just I don't know 1 2 3 4 5 elements in it 7 - 6 5 4 alright so this is my array and I'm the idea here is I'm going to write some function and I'm gonna call that function quicksort now this function is going to expect being passed into it some array and then it also requires the idea of the quicksort say I wouldn't apply this algorithm the quicksort to some part of the array and we're gonna recursively subdivided subdivided subdivide the array of sorting different parts of it so the whole thing is sorted it's like magic but when we're starting what's going to get passed in is index 0 and 1 2 3 and index 4 so the first time I call quicksort I'm gonna say sort the array from 0 to 4 now one thing though that I'm going to want to check the whole point this is gonna be a recursive algorithm so the big thing is like start has to be before end right so the array is going to recursively get sub divided and subdivided so at some point if start and end are in the same spot that's what I'm done so that's going to be the first step here if I think I could just say if start is greater than or equal to end something like return that's going to get me out of it all right but here's here's the the key the idea of the quicksort is basically to say I want to do a step which is called partition and I need to pick some part of the array that is called a pivot so I'm gonna make a nice sort of easy way to pick that so I'll just have the pivot be the end spot and the idea is I want to take everything that is less than the pivot value and put it on one side of the array and everything that is greater on the other side of the array so if I were to do that with this I would I could just visually see I'm gonna get a two the two is the only thing less than the four and then the four is going to go here and then the other things are going to be on the other side like seven six five so it does they don't have to be sorted seven six five so this is what I'm doing I'm taking this pivot putting it in essentially the center so does the middle of the array and then everything that's less goes on one side everything that's more goes on the other side so this partition function where I give it the array the start I think I still give it the start and the end and then also the pivot right what I then want this function to return is an index value the index value of where the pivot ended up and actually I think I don't have to do this too can always use the pivot point as the end so I'll figure that out as I code it but it's better stay with me here so in this case what this actually ends up returning is the index one because what I then can do is I could say hey now that I got that index of where that pivot is I want to just quick sort so I'm going to recursively call quicksort on that array from start to that index minus one and then and also quicksort this is dividing and conquering from that array from index plus one to end so basically these are the steps we get we start with the array we fight we pick an arbitrary pivot we put everything on one side or the other and we figure out where that that pivot ended up and then we just quicksort the both sides and those will put something know this then this is done because it only has one element left so start an Ender in the same so we'll return this one we'll pick five as the pivot and then it will become five seven six because everything is on one side seventy-six are bigger than five so this is then done and then this thing gets quick sorted six becomes the pivot so seven goes on the side and we're left with two four five six seven roof so maybe my diagramming and explaining isn't the greatest and we also have to write the partition function I mean that's the hole how do we do this partitioning but let's start I think now let's take let's go over to the code and start writing it in our code where's my where is the cap to my marker where is the Captain America they somehow have lost the captain my marker I guess I'm gonna live without finding the captain my marker right now how can i serious it's so weird you know what I have other markers so I will just borrow a cap from one of these other markers because some of these are probably dead anyway okay oh shut up being the bumbling absent-minded person that I am look there's the cap to the marker it's on the back of the marker okay let me let me get to writing the code all right um and okay so I'm writing the code now let me cycle the camera okay all right so all right so previously this bubblesort example is designed to visualize the sorting process happening so what I'm going to do is actually take the bubble sort out and just leave the just leave the drawing of the array and I'm going to need this swap function so so the swap function something I'm gonna use and me alright so here I am with my code I'm previous I'm going to remove the bubble sort and I'm just gonna leave the drawing of the array and I'll take out this frame rate five thing for right now I'll leave that in there and now if I go and refresh we should see there it is every time i refresh I'm looking at the array of random values unsorted so the first thing I want to do is just see kind of get the sorting to work and then I'll figure out visualizing it is I guess the interesting part here in some ways but let's get it to work first so the idea right we need to write a function called quicksort it's going to receive an array and a start and an end and I said if start is greater than or equal to end then just return like jump out of there otherwise I need to get this pivot index where I'm going to partition partition the array from start to end so I want to call this partition function I mean this is really ironic they haven't explained the partition that's really where the algorithm is happening but I want to run partition and I definitely don't need to pass in an extra argument because I'm always going to use the end point as that pivot so that's fine and it index is going to come back and then what I want to do is say quicksort that array from start to index minus one and quicks is quick story quicksort stork quicksort quicksort that array from index +1 to end so this is the basic idea of the recursive algorithm divide and conquer divide and conquer and I'm gonna call the the array I'm gonna with I'm gonna call it first with values and go from 0 to values not lengths now do I want to say values at length minus 1 probably so I'll figure that out as we go because the last element is not the length it's the length minus 1 okay so now of course we really have this just so this is the idea now we have to figure out partition okay let's come back over here all right so let's figure out partition now remember we have this array which was I think it was I mean I can use any numbers here for two seven six five or something like that I don't remember let's say this is the array and so the start is zero the end is 0 1 2 3 4 is index 4 so what I want to do to partition this is first I need the pivot value so the pivot value is going to be this 5 it's going to be the number that's at the end then I need to start counting and I'll use I as a counter I need to start with I at 0 and basically what I need to do is say like a is 4 so sorry it's confusing because I have the index numbers here 4 and 0 let me get rid of those is 5 less than 4 no it's not so 4 is gonna need to be on the that side of it Oh 4 was I'm confusing myself because I'm using different values than when I had before so let me just start over okay because it's an extra point of confusion one more time explanation what are we where we at 12:20 LifeFlight could be worse okay we go alright let's work out that partition function so let's make up another array that is five elements in it - five four nine three let's make this six no I really want like a good alright let's let's talk about that partition function the partition function is really where everything happens I may be good array of just five elements nine two four six five okay I think this is good so when I call a partition right the first time we call partition we call it the array from start to end zero one two three four so from zero to four so the first thing that I want to do is I need to pick that I need to pick some pivot value then even put everything on the left or right side on the left side or the right side whether it's less than or greater than so the easy way to do this is since I can always just pick the last spot so the pivot is going to equal in this case five then what I want to do is iterate from zero all the way to three I want to look at every single one of these elements and compare them to five because if they're less they should go on the left side if they're greater they should go on the right side so we're gonna start with I equals zero and I is going to go all the way up to you know the length of this array and actually n minus one and we're gonna compare so nine is greater than five ooh so nine should be on the right-hand side of five so guess what we do if that's the case swap so we take five and put it here and put knight ways that right hold on I [Music] forget which five was here no no nine was here yeah then we're gonna swap yes that's exactly what we're doing let me just make sure let me just look at the algorithm again to make sure I'm getting it right right if I is low Oh actually we need to go from we're not we're going through all of them this is what I forgot we need like the pivot index that's like actually so I should call that index we've got to figure out where that pivot index is going to land and only if we swap do we increment the index yeah okay I need one more index yeah so I'm going to check and iterate and check I'm gonna check every one of these elements against five if it's greater then I'll put it on the other side of five if it's less then I'll put it on this side of five I'm gonna check every one of these elements from zero to n n minus one and if the element is greater than the pivot than five it should be on the right side if it's less than it should be on the left side but there's nothing I actually need another index I need kind of the pivot index because five this pivot is gonna end up somewhere and that's what gets returned from the partition function partition function that's the thing that I need to subdivide the array so actually let me call this J and let me call or actually I'll keep this as I so many different ways you could do this and let me just have another variable that's called a P index for a like pivot the pivot value let me keep this as I and then I'm just gonna have another variable which I'm just gonna which I'm going to call index so this is really the pivot index this is the pivot value okay so nine is nine greater than five oh it is so I'm gonna check if the array index I is greater than the pivot then what I need to do swap this is where I need to swap so I have a swap function from my bubble sort algorithm and what swap does is it just swaps these two elements so five goes over here and then I increment well if I'm swapping I also move that pivot index up by one so the pivot min index moves up by one and I moves up by one so now I'm checking two is to greater than five no it is not so I do not swap and I do not move the pivot index the pivot index is still staying here but now I go to here is for greater than five no it is not so I do not swap and I do not move the pivot index so I'm here now but I goes up now I'm here this is the last one you need to check is six greater than five oh it is six is greater than five so I swap wait a sec no something's wrong am i swapping if there should I be swapping when they're less than because six shouldn't end up there what am i swapping with I'm so confused oh if it's less than pivot right right right right not greater then of course I always get this stuff wrong right it's not bad [Music] alright let's just do this out and then I'm going to explain it again right so if the pivot is 5 is is 5 less than is 5 yeah he's 9 less than 5 no so leave it there he's to less than 5 but what if 9 is less than 5 and swap and move it this is why am i confusing myself here all right let's just try let's just play it out the way that it says on Wikipedia this is the pivot is 5 is 9 less than 5 no don't do anything is 2 less than 5 yes Swamp is 4 less than 5 okay oh so now the pivot is here because I didn't move I didn't move the pivot index or actually the pivot index starts at 0 so now the pivot index is here now I'm going to check here is 4 less than 5 it is so swap with I and ok where the pivot index yeah so swap this doesn't seem right what am i doing and this moves here and then 6 what have I done I've done something I'm really obviously wrong make 9 pivot first it's funny I'm implemented this so many times and I'm just looking at this again let me just look at this pivot value is the high part of the array the this is the pivot index what I'm calling index that's the low part we start from a low if the array if that spot is less than the pivot then swap from the pivot index uh-oh I'm not swapping with the pivot this stays there the whole time that's what I'm just no wonder no wonder oh I'm just being ridiculous okay I'm just being ridiculous right so so you know whatever it doesn't matter what this array is let me just real quick a knock-back and get it again oh of course of course of course of course there's the pivot index there's the pivot value this pivot this never gets swapped till the end this stays here the whole time till the end of course so I start here is this less than that no so I leave it there is this and and the pivot index stays here is this less than that yeah so now I swap here and the pivot index goes to here is this less than that no is this less than that no and then now this swaps into here and this goes here we have all the bigger stuff on this side okay I just like thought about it wrong so here we go explanation attempt number 453 yeah don't worry everybody I am now going to explain it in a way that makes sense and then that you will edit this all together and everybody will be happy when the video comes out all right let's look at the partition function this is really where the magic happens this is the core algorithm so once again let's make up an array with just five elements in it let's say 9 3 5 6 4 let me move just to make things more even let me put the 4 here and make the 5 here ok just I think an example work out better this way obviously any order the sorting algorithm will work so the idea of the partition function is when you call the function you give it the array this is the array you give it a start and an end so in this case the start is going to be 0 this is the start and the end is going to be in position 0 1 2 3 4 in index 4 so this is the first time I call partition it's going to get called on this array now what I need is a pivot value I need a pivot index and a pivot value the pivot index well we'll talk about that in a second the pivot value I'm just gonna echo pick anything in here but it's most convenient to just pick the last one so I'm gonna say the pivot equals 5 and the idea of what I want to do is I want to put everything I want to rearrange this array so that everything that's less than 5 like the 3 and the 4 are on the left side and everything that's greater than 5 like the 9 and the 6 are on the right side and then five will be smack in the middle now won't always work out that the pivot ends up in the middle because everything could be bigger in it than the pivot would end up here and there'd be nothing on the left side but I made a little nice example so that works out cleanly ok so how do we do this so first we need to iterate through every element of the array I equals 0 all the way up to on the end minus 1 so we need to check every single element of the array and we need to compare every single element of the array against 5 I also need to keep track of the pivot index because as I go through this process I'm gonna need to find where did once I'm done the 5 is gonna stay here the whole time I need to quickly put 5 back into where it's where it's supposed to go so that I'm going to just call index it's really the pivot index so this is the pivot value this is the pivot index that's gonna start at zero and I'm gonna put a star here for that it's starting here so I is now zero nine is nine greater than five yeah it's greater than five I know that that means I do nothing so I'm checking if array index I is I'm checking if it's less than actually it's not less than if it's less than the pivot value so if it's not less than the pivot value I don't do anything okay now I goes up so I is now here is 3 less than 5 aha it is so guess what I do I now swap I and wherever the pivot index is remember the pivot index was at 0 so 3 & 9 are going to swap so 3 goes here and 9 goes here and then guess what I do I move that pivot index so the pivot index is now here and then I move I and I'm checking for is 4 less than 5 it is so I do this again swap I and the pivot index so 4 goes here 9 goes here and the pivot index goes up so the pivot index is here then I go here for I this is the last one you to check is I less than 5 no do nothing so I'm done this is the array 3 4 9 6 5 huh well you can see that 3 & 4 here they're less than 5 9 & 6 in here they're greater than 5 guess what the reason why I need that pivot index is the last thing that I do is I swap the pivot index with end so now I can just take what was on the end put it here put the 9 here and I have this algorithm has successfully put everything less than then that pivot value on one side of the array and everything greater on the other side of the array and the really nice thing about this quicksort algorithm is I don't really have to use additional memory I didn't have to make a copy of the array to move things around and the merge sort if I ever do the merge sort you see you need to start like having extra copies of the array so that's one nice thing about the quicksort should have used I and J to be honest index and I is not a good choice that's probably a good point so the chat is gonna be some good feedback that the way I used I and index is a little bit awkward I think what I might actually do is name this pivot value and when I write the code and I'll name this pivot index it's a really that's being very long-winded but I think it'll make it more clear so let's go write that code now so if I come back to the code all I need to do is write the partition function so I'm gonna write a function called partition it's going to receive an array and a start and an end and then what did I say I want to do I need to have a pivot index which is going to start at 0 I need to have a pivot value which is going to be the array at end and then I need to iterate from I equals 0 to I is less than n minus 1 I I plus plus and now I'm checking if the array I is less than the pivot value then what I want to do is swap I already have a swap function a swap function just takes an array and two indices and says whatever was in a store it because you're gonna want to put B and a and then what you saved in a put it in B so swap array a and swap array B so I already have that function so I can say swap I and pivot index and then pivot index plus plus and then once I finished that loop I just need to swap pivot index and an end array pivot index and end wow that was quick to write is there any chance I got that right all right let's run the code okay we got an error a maximum call stack size exceeded so this is a very common error which is that if you recursively call stuff way too much things blow up and you've exceeded things so let's take a look at the code oh of course this is not where the pivot index starts you don't always go remember I just said zero because I was thinking about doing it over the whole array but the whole point of this is you're starting at start start isn't always zero that was a nice little mistake there so this should be start is that the only error I have let's see No so there's some other errors let's see it's start like it's this like actually what I want no oh it's swap Oh Oh yikes I forgot ACK so I forgot that my swap function huh my swap function the way that I wrote it there's no global array you have to tell it what array you want to swap the values in so that needs to be that needs to be explicitly added as an argument there was that the only mistake still more errors wait let's see what is it actually saying here at swap but it should I have that condition forgot the array in line 30 pivot index plus plus before the oh no it should end up in the right spot the pivot index I don't think I need to increase it one more it be in the right spot oh oh you know what here's my other error I know that this is I know that this is end so I want my loop to go from 0 to n minus 1 but I'm using just the less than in my for statement so I don't need n minus 1 I need just end that's so many errors still Oh return the index value okay I forgot the whole central idea of this the whole central idea of this is that the partition function returns back where that pivot index is so that you can divide and conquer conquer and do the right and left halves look at this I don't return that anywhere I just finish and I'm like I'm done here's an undefined pivot index I need to actually say return pivot index what an important important key line of code and I'm getting closer everybody I equals start [Music] mistakes I'm the worst this is also from start right I'm so focused on thinking about the beginning first step where you go from the beginning to the end of the array but the whole idea of this partition function is that you're anywhere in the array so this goes from also from start to end there we go so now there's my sorted array you can see that the quicksort actually works all right well though now that we're about three hours into this video I should I should visualize it now there's a couple different things I could do it's really tricky to visualize something that's happening recursively because it's not happening in an obvious first step second step third step so let me just draw it the first step draw it the second step so I think there's two approaches one is I could actually sort the array and keep track of all the swaps and then play back the play back all the swaps one at a time let's do that first so that's going to be my visualization technique number one so I'm gonna make a I'm gonna make a class called a swap and it's just going to have two variables associated with its which things are being swapped and then I am going to I am going to also keep make an array to keep track of all the swaps then what I want to do is once I have once I have my array I also want to have another array called a back up and back up is values dot slice 0 and pretty sure that's a slice as a way of giving me a portion of the array from a start to a finish copying it so this will copy the whole array let's just make sure that works so let's just look and make sure that these are two separate arrays yeah that looks right yeah those are the same values in fact check me out I'm going to assume it works ok so now what I'm going to do is every time I swap right every time this function is called I'm gonna create a variable called SW which is a new swap between a and B and swap stop push that swap so in theory now if I run run the sorting algorithm and I look at all the swaps it did 382 swaps these are all the swaps it did in order some order of recursively so now I can play back all of those swaps so what I want to in draw is I want to visualize backups right so weird did slice hold on but not back up back up back up back up where what just happened here set up shouldn't it be a copy like let me just oh sorry I didn't have the console open sorry I didn't of the console up but it was caching my code there we go so now I'm seeing the unn now I'm seeing the unsorted array back up it's sorted values values got sorted I'm just seeing the unsorted array so what I can actually do now in draw is I'm gonna have a variable called swap index equals zero and in draw I'm going to say let a given swap equal let it give them swap equal swaps index swap index my variable names are kind of lunatics here then I'm gonna say swap back up SWA swb and then swap index plus plus so I'm just going to eat draw I'm drawing the backup array and just doing each of the swaps one at a time good it's happening so slowly because I have the framerate set at five but let's just be sure that it's really working and let's set the framerate at 60 frames per second which should be the default there we go look we've got the quicksort visualized ooh look at that I feel like I need some music oh what's it doing oh it's unsourced scrambling - wow that's weird fascinating these swaps are there all right I'm not sure what's going on there let me at least say if where's the draw loop if so I'm only going to do this if swap index is less than swaps dot length otherwise no loop console.log done so this will tell me if I'm done why does it keep going oh so look at this I'm still adding more every time I swap they keep adding to the swaps array and it never stops oh no wonder oh how silly of me so I need a let me just use a boolean variable like sorted and it's false and I'm gonna say here only if it's if it's not sorted add a swap to that array otherwise if it is sorted when it's at the after this I'm gonna say sorted equals true so now and let's just make it fewer values let's make this 20 so we can really see this go there we go let's see it finish I think it'll stop now yay yeah I should never put my hands up here let's see it let's see if finish now yeah okay I have visualized the quicksort mmm what do i what do I want to do different color in the selector I do want to do that let's make a so this is what this is one way this is one way of doing it I am storing all the swaps and just playing them back but there isn't really a real reason why I couldn't just draw the original array over and over again while it's being sorted and a way that I could do this is by run the sorting in an asynchronous function so it's happening behind the scenes and then I'm always drawing the regular array let's see what happens if I do that so I'm gonna what I'm gonna do is I'm going to make a backup of this code and I'm going to go back and I'm going to get rid of the swap sorted stuff and back up and I don't need this and okay so this is sorting it right I don't need this anymore so I have my code now back to what it was originally so this is just pre sorting the array before I draw it so this is right now what happens what do I mean here what if I make this quicksort function a sink weird right let's just add that a sink keyword there same deal interesting let me also make this partition function a sink and what's important there oh oh oh I forgot I forgot something really important so I'm surprised that even work if I'm making the quicksort function a sink I'm gonna want to await quicksort both calls to quicksort I want to be able those are happening asynchronously and I want to await them because I want them everything to happen in the correct order also want my partition function to happen asynchronously so I'm gonna call put a weight in front of that now if the async and await keywords are new to you I will refer you to some other videos where I go through those in more detail but this is what I'm basically allowing this to happen is that this function quicksort can be called and then draw is gonna go on the thing is the sorting is so fat you can see it there's like a little blip there right that little blip where you see it but it sorts it so fast what this means is if I could just make something happen and let's make swap asynchronous and let's await it everywhere if I could just add a little delay somewhere I could force the actual sorting algorithm to slow down but draw would still be animating so there are other places where swap happens there swap and swap so how do I make this slow down well I could use set timeout but what I want is I want a function that's like delay that I could use a wait and I'm gonna have to write my own function for doing that timeout for a second yeah yeah I'm gonna add the timeout in to swap time dot sleep but that doesn't work there is no is there a time dot sleep that returns a promise does that actually work I didn't think you could do that I thought I have to write my own function yeah this is what I want to do this is what I was going to do this might be a bad idea for various reasons yes so on Stack Overflow I found this nice piece of code that basically takes set time out the set time out JavaScript function which has a callback which is callback based and resolves a promise when set timeout finishes and this is the equivalent of an asynchronous sleep function it's kind of like a wait and don't do anything wait and don't do anything for this amount of time so I'm gonna bring this function into my code I'm just gonna put it here on the bottom and now I can say await sleep 1000 what that means is hey before before you swap just wait a full second and let's see what happens I think my sleeping might be too long right a full second so let's just bring that down to 10 and we could see there we go so now we're seeing the animation now this is probably a bad idea for a variety of reasons because I'm not being very careful about what is the frame rate of my animation loop and where am i where do the swaps happening I'm just letting it kind of work out mostly by accident but I think this should let me do things like say if I equals the current pivot index is that a global variable and might not be keeping track of that globally so yeah so I want this to be I want a global let me call that so I'm already using pivot index here but that's fine let me make a variable called like glue I can't think of variable names I already used pivot index let me just say red pivot for a different variable name and I'm going to say as pivot is changing let's oh well if it's any of though so there's multiple pivot indexes ah I should have kept track of a list of all the pivot indexes as well this is actually trickier than I think yeah actually now I'm realizing of course this is recursive so there's many pivot into indices so actually this is perfect what I want here is like I'm just gonna call this pivots and I'm gonna make that an array and every time every time I am in let's see and every time I get one of these indices I'm gonna say pivot pivot dot I'm gonna add it to that array and then I think there's a way for me to just find it and take it out right so isn't there a way to give an array a value and remove it array JavaScript remove value I guess I have to find it to remove it so there's no native function index of index of I can use index of right so then after this is over let me grab the the that particular where it is in the array because it could the different things are going to add things to the array everywhere so I could say index of pivots I can actually just do this pivots splice wherever that value is pivots index of index one so this is gonna remove it so this should be make continuously making an array of all the pivots and like in theory if I just say let's just console.log that this is like I've lost my mind here let's log that in draw sketch gas line 47 oh yeah so let's forget about this for a second yeah so this is all the pivots and then they're gone this is perfect so now if in pivots index of I is greater than it's greater than negative one that means it's in that array then what I want to do is fill it as red and let's really slow down the frame rate here let's slow down the frame rate to five and we should see right well that happened so quickly let's oh no the frame rate doesn't matter I want the frame rate to be super fast I want to slow down the swapping more how come I'm not seeing oh I think I'm like the timing is kind of off let's make it let's let's have many many more elements does this look right to people I guess I should be removing the it's coloring after pivot really I mean it so maybe it actually makes more so that was interesting but maybe it actually makes more sense for me to kind of think keep track of things I want to color red not here but actually as I'm moving the pivot value here this is sort of crazy so like I want to basically every time I increment the pivot right before I increment the pivot index I want to get rid of it and then I want to add it in every time it increases and I also should be putting it in right here yes this makes more sense right yeah that's the pivot index moving along through the whole thing and then it's waiting over there while it's doing this one shouldn't be doing them simultaneously though cuz it's recursive somehow maybe all the oh wait Oh cuz of the oh wait thing I shouldn't have the recursive call be asynchronous because it has to wait but this is right now it's just I want it to animate on both sides it's kind of but this is right this is kind of interesting all right let me let this go faster I'm gonna let this go way faster yeah so that's the pivot moving throughout it as well yay all right one more try let's let's let's make the width just one let's let it happen with just five milliseconds of Bing let's get rid of my console.log and let me run this wait where's oh whoa no stroke No if it's a wreck count and let's let's fullscreen this by saying a window window with window height let's do a width of two let's actually have the stroke also be 255 and or red and here we go view enter full screen refresh enjoy oops all right there's your quicksort visualized here's the thing I spend so much time figuring this out that I wasn't really being thoughtful about how I might visualize this in a nice way you could add to sound to this which lead from my end explanation again I should probably just record this in front of the green screen but I'll just leave it like this do green after sorted yeah replace a weight quick sort with a weight promise all quicksort quicksort would that do both yes sorry the mouse is it oh no this mouse is in the way all right let's try this again and enjoy all right I have an idea I have an idea what if I just make the quicksort function not asynchronous so this doesn't have to wait for the recursion because swap only happens in oh but partition is oh yeah so this has to be a sink though or what if I mean I could use I don't have to use a wait I could say partition then like if I say let index equals negative 1 and then I say partition can I just do that oh and then oh right no no this if I do this now it's still doing it one at a time it's still got a wait partition one at a time you would think it would just be able to keep going if promised dot all is that the color the subset being sorted with a third color and the dancing sort videos I know I don't I'm afraid of like including those [Music] hold on I oh it's 110 my goodness well let me see if I can finish this off here so that didn't change anything so there's a promise dot all I don't understand how edu is promised at all everyone is telling me promise dot all so let me go back keep everything a sink oh you mean I could just start adding them so a weight promise dot all so I have a function quicksort needs to be a sink I think I might have to figure this out another time I was thinking like I don't want to wait go though yeah I don't want no wait the point is I don't want to wait I want to let it go yeah I don't see how I could use promised at all partition all quicksort quicksort whoa I keep it as saying partition I think I'm going to leave that up as a leave that as a challenge I think I'll leave that as a challenge so what could I could color something differently like start and end so since it's doing it one at a time I can actually just store the pivot index globally so I could say current pivot and then I could say here all right so let me go all the way back actually Matthieu this is going to be kind of crazy but I think we can get rid of my whole thing of making this array why it's still red what's Rios I didn't okay okay I cubics they erase the two separate calls to quicksort and replace them with a weight promise all quicksort quicksort fascinating so why is it do I have to explicitly like oh because if it returns nothing there's no promise I think this is the problem Oh oh I forgot the brackets okay Hey it's interesting getting close oh I messed something up well I mess something up completely what did I do oh I got rid of that by accident there we go okay oh look at that yeah okay okay yeah look at that oh that is much more exciting okay oh now I have to put my weird crazy erased or the pivots in there so who is that I Kubik I want to I want to thank I cube ik in the chat all right so hold on so one thing that I noticed and that the chat really just helped me out with is that because I am using a way tier with each separate quicksort step the actual sorting visualization is kind of do it's not the recursion is not happening simultaneously it's doing one half than the other half then one half then one half then one step by step which is kind of nice for visualizing it that's a really really fast I'm gonna put in a sleep time of like 25 milliseconds and you can sort of see how this is happening a little bit by bit by bit by bit and then it's done however I forgot that I could use promise dot all so I could await promise dot all both of these calls to quicksort at the same time so if I do that and just paste this one up here this is getting to be pretty goofy advanced JavaScript stuff but this is basically saying hey you could go do both of these simultaneously I'm just gonna wait for both of them to finish and this in theory can you visually see the difference of that I don't know how obvious that is to you it'll be much more obvious if I did something like color the various pivot points let's see if I can do that and I have a really goofy idea of how to do that which i think is probably terrible but I'm gonna this is the last thing I'm gonna do before putting this aside so what if I have an array because there's multiple pivot points that are being tracked what if I have an array called pivots and any time should I draw the pivots as they're moving or just draw them as they're let me draw them as they're moving do it I'm gonna do overkill oh this might not be the classic way of visualizing this but basically whenever there I get a pivot index I want to add it to this array I really want to use just like a lookup table I actually that's what I should use aha so I what I want is an array does I really want an array of true and false like is it what what's this state let me do this this is much better states so as I'm creating my values the states of every single spot is going to be negative one so the what the current status of a particular element of the array is is how I'll choose to color it so in the case of whenever I get a pivot index I'm going to say pivot I'm gonna say States pivot index equals Z equals zero so negative one means nothing zero means it's a pivot index so this is a little bit ridiculous but let me just bear with me and now I'm gonna say if if States index equals zero which cement for pivot index fill make it red otherwise otherwise make it white this is gonna be good I think this is gonna get us what we want so you can see anytime there's a pivot index it set it to right now I'm not unnhhh ascending it I'm not unsetting it so one thing that I could do then now is I could say here if I if I'm moving the pivot index right before I move it let's set that back to negative one and then set it again to zero so now you can see the pivot indexes are moving now again I'm not unsetting it when it's done which is sort of a problem so I suppose if I wanted to do that I could also say States index this is this is where it's like finished there you go see it's happening very very fast but that's the pivot stuff moving around I don't again I don't know if I'm doing this in the right way but also might be interesting too as I am sorting between start and end any given active partition like I could do I equals start I is less than end I plus plus I could say state it's index I equals 200 r1 and then I could also at the end after I'm done set it back to negative 1 so I could say that if else if States index I equals 1 then maybe make it blue again I'm not doing too thoughtful about my color schemes but let's see what happens here I don't know that's kind of like what's going on let's give ourselves a much bigger space to work with let's actually make let's make this the full window window height let's make the let's make the width of each one just 5 and what most and let's let's make the width of each one 5 are we doing next let's the width of each one five and then I think I probably want to say no stroke here because if they're thinner that might mess up how it looks and let's like let's make a hundred milliseconds sleep time between each swap and let's go enter full screen hit refresh let's do this again and I'm gonna let you enjoy this I'm gonna step aside [Music] okay these colors are terrible I gotta have different colors this is cool it's also too slow so I can leave this full screen so I need to change the colors let's make it alright I need to change the colors those were no good so let's do something like this and something like this I don't know I'm not good at picking colors and then and then let's see how that looks mmm the pivots aren't marked oh because I'm on because this is undoing the pivot now but this is awaiting the swap oh so uh oh and then there's another mistake if I don't want to if I is pivot index so as long as I don't if I is not equal to pivot index I don't want to undo I don't want to undo the colouring of it being currently sorted so I think I just want everything to be much brighter and I maybe if I just use HSB can someone make me a nice color palette right cuz that's the pivot moving so that red let's I have an idea I like these colors actually they're just they need to switch where did I do the colors are these cult let me change let me change the colors again 255 25 100 125 255 and now let's refresh okay so I'm gonna that blue I feel like needs to be brighter one 50 100 150 100 it looks so weird over there it just needs to be much brighter oh and not there we go I forgot that I how are these colors I'm so work the worst of this put this back to 255 D 6 FF b7 all right D 6 FF b7 and what was the other one E Oh seven seven seven D yeah that's pretty nice thank you I want to switch them though all right this'll do let's make it faster let's also make these ten and let's make it alright alright thank you to the chat who offered these colors as suggestions I'll just leave it at that I'm gonna make the lines a little thicker let's like the width of 10 let's make it run a little bit faster so I'm gonna double the speed and here we go whoops what just happened there and here we go enjoy this bubble sort visualization Hey and here we go enjoy this bubble sort visualization as always I always forget to this stop it stop it stop my brain is so melted is it 2 o'clock no it's 1:30 I'm okay alright hold on let me both okay all right I've got the code in the state that I want I'm gonna play you out with and give you and let you enjoy this last visualization of the quicksort and please make a nicer version of this bad sound add better colors do all sorts of stuff here I'm gonna hit refresh as always I always forget thanks for watching this challenge I don't think I'm gonna be getting back to the Rubik's Cube it slowed down for the sake of visuals simples quality don't forget to solve the rusev okay just for everybody who came late our fruit came early I'm not gonna do any more coding but I did say that I would attempt to solve the Rubik's Cube so let me shuffle let me shuffle it I'm shuffling it the drawing loop hasn't off by one error okay all right I feel like I should give a prize to whoever guesses the closest to the amount of time this is gonna take me so all right maybe a hashtag I will send you a code a train t-shirt you have the next one minute to post to Twitter hashtag train Rubick strain hashtag Rubik's strain at Schiffman guess how long this is gonna take me knowing I have to leave it to I've been live streaming for three hours it's either how long it's going to take me or the exact amount of minutes or at what time I give up and I'm gonna start a timer I don't have an egg timer with me but this is fine I will get a timer going stopwatch I do exit full-screen but why is my keyboard no longer working it's so weird okay so this will be the official time whoever note in the chat is no good so unfortunately I'm only going to accept official I'm only gonna accept submissions on Twitter up until 1:30 5:00 p.m. Eastern Time so if your submission comes after 1:30 5:00 p.m. Eastern Time the submission is not valid and your submission is not valid and yeah alright by the way I'm really bad at this oh the first time I ever tried to solve Rubik's Cube was like three days ago and I usually follow tutorials which I won't be doing although I do have some out a sheet of different algorithms oh no no no 3.2 yep by the way if you're anything less than 15 minutes I think you're way off just in case you're wondering okay it's 135 now submissions are officially closed can somebody timestamp the official time on Twitter help me in the slack channel and and I mean you need to give me an amount of time in minutes hopefully the submission should all have minutes and seconds and I will send the winner a coding train t-shirt of your choice would it be funny if I like memorized all the shuffling moves I was doing and just did it backwards I did not so alright ready here we go and this is counting like if I have to go to the bathroom if the camera shut off this is not this is the actual real physical time any interruptions there's a fire drill I have to leave and come back this is no so there's no wiggle room there this is the actual one from when I hit start to when I hit to stop and if the answer might be I give up although I guess that's canoe I could come back and finish the livestream later and add those two together no but so it's however long I do this for it knowing I have to leave by two okay so I appreciate all these who are guessing in the chat I don't think I can accept those because it's hard for me to like figure out who you are and like the timecodes of them and like see the chat later so I'm gonna go with Twitter and I'll do this again if there's a better way to do it okay here we go ready okay don't laugh at me so first what I'm doing is I'm I'm like I my heart is beating really fast I got super nervous so this orange side piece needs to be with orange so that's there I'm making the I don't what you call this the cross first this is blue so it's gonna go wait where's the white and blue it's the wrong way though or if I put it up here [Music] I'm so nervous just making I read good okay red is in place red is in place orange is in place 19 the other middle piece green green is gonna go there we go okay green no no the other side other words where's where's your friend green mmm yeah there we go okay green red orange so I just need the other last one here oh there it is blue okay good so I've got blue blue orange orange green green red red that's good now let me put these on the white side now I just need to finish the top layer so this is white with green wait where's green there's like weird that piece go go here wait why is that orange now that's orange okay go back that's the wrong piece silly no you don't go there you go orange white with orange goes here ah the other way no wait this is in the right place this isn't the right place this is in the wrong place okay everybody's gonna be okay this is in the right place what goes here I need a white piece with an orange and a green where was that I just had that piece oh here it is but it's like on the bottom well that's annoying let's do the one that's though in the right place white with blue so that's just gonna go here oh no no the blue goes over there that's red there we go come back to me oh wait a sec oh yeah no we're fine we're still good we're good closer what am I at now in three minutes it's not so bad oh this is like really embarrassing I mean it's not a Barrett bursting is the wrong word okay let me put this to the side and then now this is an orange pea orange on this side white here wears orange tier so this needs to go one over and this comes down no oh it goes the other way goes the other way no where'd you go where'd you go my white piece with the orange hey hold on a sec this part I usually do way faster and this is like me being nervous okay ah perfect this has got to go right this has got to go right right there so oh but it's on the other side ah there we go what am I thinking there we go okay of course of course okay we're doing well now one more piece that should be easy good okay so I've got I've got at the top and one layer and now I need to figure out so like this piece here on the bottom needs to go here this piece needs to go here from left to right because it's blue goes here orange goes there so I go here left to right this comes down one two I totally messed that up no no that's right and put the white back alright I don't know if I put that in the right place oh I put it backwards Oh cuz I wasn't on such an idiot I the bottom thing wasn't matching up I needed to be on the orange side no what I did it right I moved the piece there but it's the wrong way I don't have to move it back that's really annoying but this one let's get this in the right place okay so this now here I'm going to move this from here to there this goes from here to there so left left to right left to right this comes down this goes here put the white back okay that's looking good now I need this piece oh right to left was gonna be hard I just go right to left right to left so this goes right to left this goes here right to left this comes down this goes like this it goes like this put the white back I had so much trouble at the beginning step because I got so nervous alright now green and yellow oh no yellow is no good green and orange oh this goes left right to left right to left so this needs to go here right to left this comes down do this this goes back up this goes here there we go okay almost getting there I need another piece yellow yellow oh this is the piece oh I left that piece there so I just got to like move anything there I guess move this so this is let me do left to right do I have any easier time with left to right who knows left to right left to right move this down this here should this should get it to me okay here we go no now where's that piece here it is it's going left to right so left to right and move this here left to right move this down move this over move this back up alright ok so I've got the top and I've got two layers I'm at seven minutes I'm like way better than I thought so just so you know now I have a printout of some algorithms doesn't say when I'm supposed to use them so I still have to figure that out but oh and I have this is the bar so this is known as the bar I'm the yellow side so I think I need it to be like this like sure I have these matched up who knows so the bar should be up going across I guess and the white is on the bottom yellow is the top here let's see so I'm going to do forward right up right counterclockwise up counterclockwise forward counterclockwise okay that's good now I need to get these two corner or this is the kind of like the fish but I have this corner already so I think I can do the next algorithm which is and I want it to be facing me so I want to do right up right counterclockwise up right up right counterclockwise oh well like I have a different configuration hmm let's try it again somebody somebody who's like a expert cuber is going to tell me how I'm doing this wrong which all right so let's try this again right okay don't this way this will do it this is it oh I need this to go here first let's see I don't know right oh okay that's better different something Oh a cou so now can I not this this will get me this will go there now I think oh maybe no no I that's again ah oh oh hold on just mess something up oh I messed something up I'm okay I'm getting it back okay I'm back I need to do it from a different corner first then when you get the fish do it the way you know it Oh Kevin Hernandez this time there are two yellow corners you need the one in the bottom right facing you yeah don't I need one facing me but they're not it's not there so should I do it like this first to move it let's see are 2d people are giving me all right let's all right let me try it from this way okay ah okay now I got the fish the way I know it Oh camera went off oh it's funny that I have my algorithm sheet in the view that's embarassing but I guess appropriate align the edges okay so now I think now I do it this way well I mess something up tonight yeah okay this is good this is good because now I have this here yeah there we go bingo okay now do I have same corners I have a lot of sit oh my god I have all same corners I've never seen that so that's weird I'm supposed to put the same corners to the bat let me all the corners are met I've never seen that so I assumed I could just pick any side then right okay I made it worse up but I have one just one same corners maybe that's what I needed so now I have same corners do it they should probably match up with their side right so let me try this again okay ah oh no no no this is good this is what I want I'm in the last step now I need to move these I did it extra I did it twice i undid it because I need to move these if red is here I need to move the blue clockwise orange no no blue goes here or blue they're in the wrong green goes here oh I've never seen this this is bad because they're going different directions blue needs to go clockwise they need to swap dad I've never seen before that I've never seen before yeah oh boy I've never seen this before alright let me just try clockwise and see what happens cuz this goes clockwise with this and that I've not seen I think I really made something crazy happen do I need to do the same corners thing again cuz I could try that I'll try this I mean what's the worst thing that happens [Music] okay oh I have one side done red goes here green goes here and orange goes there this is weird so this is definitely clockwise with one side done so this should be good I should be good this should be the last step [Applause] 14 minutes 37 seconds at point five one but anyone who ever is close to 14 minutes 37 seconds and 51 there we go but you know having my cheat sheet really I did all the way up to step four without the cheat sheet that was pretty good alright everybody thank you for tuning in to this live stream I help me track down the winner on Twitter this was the time and I'm gonna do it doesn't matter whether you're over/under if two people guessed 14 minutes so I'm gonna consider this the closest I said I haven't looked I'm gonna consider this because I took me a little bit to click it I'm gonna floor this and forget the five one so the official time is 14 minutes 37 so I'm going to do it by seconds if there are two people who tied I will send two shirts and I'm just gonna do my best I don't like to do these kind of like contest things because I feel like I always heard somebody mess something up and somebody's upset but 14 minutes so if you guessed 14 minutes in 40 seconds and somebody else guessed 14 minutes and 34 seconds you both get a shirt okay if people guessed in milliseconds I'm gonna ignore your milliseconds so your milliseconds don't count no rounding up rounding down I'm just gonna ignore them again I should made this all clear but hopefully hopefully this will be obvious on Twitter maybe those of you in the slack group can help me out here I didn't I kind of got pie there 3.1415 there's so digits of pi in there alright everybody so what did I accomplish today know what I 8081 maybe know what is going on here oh there we go I accomplished this quicksort visualization I floor one two three four four is the winner okay so I accomplished this and I also accomplished this I'm definitely gonna come back and continue the rubik's cube next week but you can see here's my dozen can't reply any moves to it but I've drawn a Rubik's Cube and I'll come back and continue that next week I am exhausted so if you would like to support the work that I'm doing one way that you could do that today with the new sponsor is brilliant org you can sign up for a brilliant at brilliant org slash coding train sign up for free if you're interested in the premium subscription the first 200 people to sign up from today will get 20% off so I am going to say goodbye I'm will be back next Wednesday at 10:30 a.m. Eastern for another livestream stay tuned for edited versions of these coding challenges to come out later today on up today definitely not today by next week sometime and I will see you all in the future thanks for boy this was this was way longer than usual and I definitely need to take a break now so I'll see you later thanks for humoring me with my new obsession with Rubik's cubes if you've got any tips for me any good I really would prefer to get a book especially a book about the Rubik's Cube that's appropriate for a ten-year-old I would really love to hear from you because you know watching YouTube videos is great but since it's nice to be off the screen and so a good book for a ten-year-old about solving Rubik's cubes or a seven-year-old would be great and see you next time I'm gonna play with this song as always I always forget [Music] [Music] [Music] [Music] this this never forget to this stop I'm gonna do this this dot this dot this star this star song never forget the Vista but somebody composed that song for me

Channel: The Coding Train

Views: 75,065

Rating: 4.8865032 out of 5

Keywords: rubiks cube, quicksort visualization, nyu, the coding train, processing, p5.js, javascript, rubiks, neuroevolution

Id: 277611ExU9A

Length: 205min 21sec (12321 seconds)

Published: Wed Mar 27 2019