Coding Challenge #142: Rubik's Cube Part 1
Coding Challenge #142: Rubik's Cube Part 1
Can I build an interactive 3D Rubik’s cube in Processing? Yes! Someday I hope to return to this project and add an AI solver! Code: https://thecodingtrain.com/challenges…
🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/s…
Other Parts of this Challenge:
📺 Rubik’s Cube - Part 2: • Coding Challenge #142: Rubik’s Cube P…
📺 Rubik’s Cube - Part 3: • Coding Challenge #142: Rubik’s Cube P…
🎥 Previous video: • Coding Challenge #141: Calculating Di…
🎥 Next video: • Coding Challenge #143: Quicksort Visu…
🎥 All videos: • Coding Challenges
References:
📹 peasycam: http://mrfeinberg.com/peasycam/
🟥 I am the cube: https://iamthecu.be
🔗 Rotation matrix on Wikipedia: https://en.wikipedia.org/wiki/Rotatio…
Videos:
🎥 Code Bullet: • A.I. Solves a 55 x 55 x 55 Rubik’s Cube
🎥 Matrix Transformations: • How to Rotate Shapes in p5.js (transl…
🎥 Matrix Multiplication for 3D Rendering: • Matrix Multiplication for 3D Rendering
🔴 Coding Train Live 173: • Coding Train Live 173: Rubik’s Cube a…
Related Coding Challenges:
🚂 #112 3D Rendering with Rotation and Projection: • Coding Challenge #112: 3D Rendering w…
Timestamps:
0:00:00 Introduction
0:01:50 Code! Creating the cube
0:07:56 Adding a Camera With PeasyCam
0:11:44 Adding Colors
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/pas…
🚩 Suggest Topics: https://github.com/CodingTrain/Sugges…
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding…
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org
📄 Code of Conduct: https://github.com/CodingTrain/Code-o…
This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecod…
#rubikscube #rotationmatrix #peasycam #simulation #processing
Content
3.35 -> aha
5.33 -> so that was fake welcome to who he was
8.639 -> already solved welcome to coding
10.71 -> challenge on the code of train Rubik's
13.29 -> cubes so today a while back in April
16.379 -> 30th 2018 Neil's web suggested a Rubik's
19.38 -> Cube solver using a neural network by
21.51 -> the way this is the greenside it's not
23.4 -> the white side see okay
26.609 -> and I'm really interested in this and I
29.699 -> actually picked up a Rubik's Cube over
31.32 -> the weekend I've been learning to solve
33.09 -> it it takes me at least a half an hour
35.969 -> but I do do it I don't have to watch a
37.92 -> video while I'm doing it I did have to
39.899 -> watch a bunch of videos to figure it out
41.219 -> getting off-topic and but I really want
44.28 -> to explore this idea what types of AI
46.71 -> machine learning algorithms can I apply
49.11 -> to solve a Rubik's Cube this will be
51.629 -> interesting to try at some point on the
53.16 -> channel but there's a lot of steps I
55.41 -> need to get to before I can get there so
57.3 -> what I'm going to start with today
58.59 -> is just actually creating a Rubik's Cube
60.629 -> simulation Simon Tiger also posted an
63.809 -> issue showing all the different kinds of
66.33 -> Rubik's cubes configurations that are
67.95 -> out there apparently there's this 28 by
69.54 -> 28 by 28 one I have some of these at
72.15 -> home they're super fun to play with
74.33 -> anyway but so and so let me close all
77.67 -> this stuff out I should also reference
79.32 -> code bullet code bullet is a YouTube
81.81 -> channel that has many different coding
84.6 -> exciting adventurous topics and a code
88.439 -> bullet has a video using a particular
91.079 -> algorithm to solve a rubik's cube then
92.939 -> makes a giant rubik's cube so if you
95.189 -> want to get the 16 minute version of
98.7 -> everything that's gonna take me the next
100.14 -> 700 days to figure out in one video and
103.59 -> be entertained i would definitely
104.939 -> recommend the code bullet 1 alright so
106.89 -> closing that out I'm gonna start here in
108.93 -> processing processing if you're not
110.729 -> familiar is a Java based development
113.22 -> environment for creative coding images
115.799 -> animations all sorts of stuff I use it a
117.81 -> lot on my channel I'm pretty sure that's
119.43 -> what code bullet used for for his
121.95 -> Rubik's Cube I'm gonna add the set up
124.17 -> and draw functions I'm gonna add a
126.509 -> window that's 400 by 400 and I'm gonna
129.869 -> put in
130.539 -> P 3d so P 3d I definitely need to use a
134.14 -> 3d render because I'm gonna represent
136.39 -> the Rubik's Cube in three dimensions
138.579 -> let's make a I'm gonna call let's make a
143.56 -> class called box I'm gonna call each one
145.78 -> of these little little cubes inside the
148.39 -> larger cube each cell of this 3x3 grid
150.7 -> I'm just gonna call it a box and so I
155.23 -> need a constructor and I need to know
157.329 -> where is it well this I need to know its
159.879 -> index in some type of like maybe
161.53 -> multi-dimensional array but for drawing
164.019 -> and I really just need to know where is
165.7 -> in the virtual 3d space
167.95 -> so let's when I create it let's give it
169.989 -> an X a Y and a Z and then also I need a
174.849 -> sort of side length so I don't know
177.129 -> whether I need the full side length or a
178.689 -> half length that's kind of like a big
180.31 -> swing it's good to come up but let's
181.629 -> just assume right now that I initialize
183.519 -> it with a full side length and then I'll
188.349 -> use a P vector a vector object for the
191.2 -> position and a float for that side
194.65 -> length let's just call that side I'll
197.53 -> call that length and I use an underscore
201.01 -> here to make this a different variable
202.599 -> name so now I'm gonna say position is a
204.099 -> new P vector X Y Z and the this needs a
209.709 -> semicolon here and the length is equal
213.97 -> to this so then I'm gonna I'm gonna
216.849 -> write a function called show and I'm
220.12 -> just here I'm gonna say push matrix
223.09 -> which saves the transformation States
226.049 -> pop matrix which restores the
228.549 -> transformation state oh my god what's a
230.47 -> transformation state you might be asking
232.449 -> so I'll tell you what it is what I need
235.15 -> to do is I need to say translate to
237.729 -> position x position Y position Z this is
241.209 -> basically positioning what I'm about to
244.209 -> draw this box with this length at this
247.75 -> position and I'm feeling people who are
250.299 -> watching this live in the chat are
251.709 -> telling me this isn't gonna work because
253.81 -> I need to color the different face
255.519 -> spaces differently I'll get there I mean
258.099 -> I have to get there at some point but
259.269 -> let me just use the processing box
261.219 -> function which will just put a box right
262.9 -> there
263.73 -> so in order for each boxes translation
266.76 -> to not affect the others that's what
268.59 -> push matrix and pop matrix does and I'll
270.45 -> put something in this video's
271.44 -> description two more about matrix
273 -> transformations if that is new topic for
275.7 -> you alright let's just say fill 255
280.5 -> stroke zero stroke weight eight and then
287.94 -> I have this box class so now I need to
291.3 -> make a cube object it's not really queue
293.88 -> Bob gonna make it a right now I couldn't
295.05 -> make a cube class I probably should but
297.51 -> just for simplicity right now let me
298.8 -> make a three dimensional array four rows
302.49 -> columns and what's the other one I don't
305.64 -> know if you have a third one it's the
307.05 -> z-axis I suppose and this is going to be
311.13 -> let me make a variable called like dim
313.5 -> four dimensions because in theory if I
315.45 -> do this right we could just change that
317.04 -> one variable I have a much bigger q
319.37 -> equals new box which is dimensions
325.76 -> dimensions by dimensions by dimensions
329.91 -> then I'm going to say I'm going to do a
332.55 -> triple nested loop with i IJ K IJ K IJ K
343.17 -> IJ K and then I am going to say cube
354.08 -> index i j k is a new box at some x y&z
363.47 -> with some side length okay so how do I
367.29 -> figure this out if this is going to be
370.95 -> at 0 0 0 this is going to be at 1 0 0 if
377.25 -> I go down here I'll be at like 1 1 0
379.89 -> back maybe the last row anyway you get
382.32 -> the idea it's like a grand but with
384.09 -> another dimension I think I'm doing this
385.65 -> right so but I need a side length let's
387.66 -> just make that up right now
388.71 -> length is let's say it's 10 so the X
391.5 -> would be length times I
397.65 -> though and the Y would be length and I
400.47 -> might have my axes wrong but whatever I
403.2 -> call X Y and z-axis whatever they're all
405.63 -> just different axes ijk and so I'm gonna
409.26 -> say box X Box Y box Z I'm X Y Z and then
414.63 -> length and then I mean there's no way
418.56 -> this is right like how could I possibly
422.22 -> get oh and I need another curly bracket
424.31 -> and then now if I grab this for a loop
427.59 -> and I put it in draw but all I say now
431.4 -> is cube ijk so I almost want to keep
435.93 -> these in another array that's just a
437.52 -> one-dimensional array for simplicity but
439.65 -> let's see how this goes hey look that's
446.4 -> kind of like the Rubik's Cube II thing
448.29 -> up there in the corner so one thing I
450.15 -> want to do I definitely want to do is I
452.01 -> want to add well I want to first give it
455.13 -> a background the background 200 like 1
460.32 -> I'd use my number 51 and then I probably
462.78 -> want the side length to be much bigger
465.63 -> and let's just run this again no you can
469.23 -> see oh it's sort of up there and I think
470.88 -> I need a larger space here so I need to
476.31 -> position it in the center so I can
478.59 -> actually see it and there's a variety of
480.78 -> ways of to do that I could just
481.65 -> translate to the center but I'm gonna
483.06 -> use a library I think I have it
484.56 -> installed import library I don't this is
487.14 -> great I'm using a library called PZ can
489.74 -> and I'm going to hit install PZ cam for
492.84 -> a processing easy camera is a way a
495.75 -> library that allows you to very quickly
497.37 -> get a mouse camera interaction where I
499.89 -> can spin around a 3d scene and
501.69 -> processing I've used it in other videos
503.76 -> before so I think if I just say PZ cam
507.39 -> cam and then if I say something like cam
510.24 -> equals nu P Z PZ thank you - Jonathan
514.38 -> Feinberg who created this library PZ cam
516.81 -> this and I forget this is something to
519.06 -> do with like how sumed out or zoomed in
520.95 -> it is Oh import I need to import the
523.41 -> library which I can
526.36 -> do automatically like this import
528.64 -> library PC cam was it there and I just
532.18 -> didn't see there ah there we go
536.23 -> look oh look go to jobs finish thank you
540.55 -> know there's a lot more to do here but
542.47 -> look at this that kind of looks like a
543.94 -> ruby see now it's rotating around its
546.19 -> little like corner there I want it to
548.05 -> rotate it around the center so what I
549.82 -> need to do is I need to have an offset
551.74 -> and the offset is going to be half of
556.18 -> the full width so the full width is
558.75 -> dimensions times length and then if I
561.58 -> divide that by two so if I then subtract
564.13 -> out the offset that should give me our
568.54 -> nice little cube no that's not right oh
572.16 -> because but here I think this is my like
575.92 -> off by I think the Box function is
580.3 -> probably using the half width but then
584.529 -> that'll be off now know that that's not
587.17 -> right Oh what have I done I think I have
589.51 -> this off by dividing by two all right
592.24 -> here's the issue I actually just made a
593.56 -> little diagram if the box these are just
596.86 -> two-dimensional rectangles we're drawn
598.63 -> from the corner like they are in
600.48 -> rectangles but 2d rectangles in
602.89 -> processing this would work because I'm
604.75 -> just shifting everything over and the
606.7 -> middle one is but they're axes the
608.62 -> middle one is now placed in the center
610.3 -> cuz I'm shifting over by the total width
612.37 -> is 30 I'm shifting over by 15 we've got
614.8 -> half here half there but they're not
616.66 -> they're actually drawn from the center
618.1 -> so by shifting them over I end up with
620.65 -> the first two on one side and the other
623.02 -> so I actually need to shift it I need I
625 -> need I'm there's not there's a half of a
627.16 -> length that's incorrect so there's
629.35 -> probably a smarter way to fix this
631.66 -> formula but right now I'm just gonna add
633.87 -> another half length here and/or the
640.24 -> offset actually that's that silly
641.89 -> I should really add it in the offset so
644.2 -> length divided by 2 plus this and now we
648.37 -> should have Oh No -
657.87 -> and you shift it over but it's in the
661.06 -> offset is the offset is a little bit
662.8 -> less dimensions minus one that's the
665.98 -> issue hold on everybody this is so silly
672.07 -> change this to 0.5 and this is actually
675.22 -> of dimensions minus 1 times length and
679.69 -> then half of that and now we should have
684.01 -> it there we go there's my Rubik's Cube
686.59 -> in the center alright and I'm being told
689.29 -> by the way that these are called cubies
691.45 -> so I'm gonna change that class QB QB +
698.34 -> QB QB + QB so step one is complete but
710.32 -> as you'll see if we look at this whoops
713.5 -> if we if we look at this rubik's cube
715.9 -> each face has a different color there
717.97 -> are only six colors there's white red
720.3 -> well 2 white on the top yellow on the
723.25 -> bottom and then red blue orange and
726.64 -> green so let me make let me make an
730.45 -> array with those colors I think what I
735.28 -> can do is just say there's a data type
737.98 -> in processing called color it's actually
739.78 -> just an integer and I'm going to let's
743.71 -> come up with an order I'm gonna say top
745.86 -> bottom I don't know if this is a good
748.3 -> order to do but top bottom I'm gonna
752.65 -> think of the top as always white so top
754.9 -> bottom and then right left front back
759.78 -> right left front back and I know there's
764.56 -> like actual rubik's cube notation and
766.96 -> I'm probably getting that a little bit
768.79 -> of I think it's actually not top out if
770.11 -> it's up down up down right left front
773.44 -> back ok I'm back I finished off the
776.59 -> colors for this array and I'm using the
778.3 -> order up down right left front back and
782.65 -> I am just right now using the convention
784.81 -> as white being on the top and I know
786.46 -> there's some different ways of looking
787.75 -> at the cube you can think of yellow as
789.7 -> the top and what is the body
791.01 -> but I'm gonna use yellow as the top and
792.54 -> green as the front so I have these
794.91 -> colors so how do I then apply these
798.6 -> colors to the different faces of these
801.209 -> little cubies cubies it's like that's
804.66 -> like the greatest thing I learned today
806.24 -> so unfortunately I will not be able to
809.55 -> use this box function anymore
812.25 -> however I can use my own begin shape and
818.57 -> shape so what I really want to do
820.92 -> instead of just using the Box function
824.13 -> to draw the full three-dimensional QB I
827.279 -> just need to use quads I can use four
829.92 -> quads I can you probably just rectangle
831.81 -> function or different things but I could
833.82 -> do one coamo it's more than four I need
835.74 -> to do six one quad another quad another
839.459 -> quad another quad and another quad now
842.37 -> of course if we look at the actual cube
845.04 -> itself each of these corner pieces you
848.22 -> can only see three faces these other
850.32 -> pieces in the middle on the top you can
851.82 -> only see two faces but I'm just gonna do
854.07 -> all the faces for each QB we can we can
857.19 -> we can optimize later if need be so
858.779 -> let's just do one so in other words if I
860.91 -> say begin shape quads then I can create
866.579 -> the vert and then let me just say the R
869.37 -> equals length divided by two so now I'm
874.35 -> going to take that side length and
876.209 -> divide it by two because I want to set
878.819 -> the vertices offset from the center
880.579 -> negative R plus R negative R plus R so I
883.98 -> should be able to do for the first one
885.63 -> vertex a negative negative R negative R
889.949 -> zero and I'm gonna keep the Z at zero
892.11 -> for this first one and then so let me
896.16 -> just diagram this right if this is what
898.889 -> I'm doing this is you know negative 1
901.47 -> negative 1 this is 1 negative 1 this is
905.519 -> 1 1 and this is a negative 1 1 so
909.42 -> basically I just need to set all of
910.649 -> these vertices to draw that quad and the
915.69 -> negative R R it was our negative r r r-
922.8 -> r r
924.75 -> and now if we run this we should see
928.759 -> whoa what did I just do so first of all
934.68 -> oh you know what I'm doing I'm still
937.68 -> drawing the box yeah take out that box
940.439 -> thank you very much and there we go we
944.91 -> can see a mite and we can see now I have
946.829 -> just those front faces so all I need to
950.55 -> do is do exactly the same thing I just
952.23 -> need to do six of these so with
954.48 -> different with different axes so if I
957.24 -> put 0 0 0 0 0 0 0 0 and take that
964.16 -> basically take the 0 off of the Z now I
968.93 -> have got oh wait a second this is not
976.019 -> right oh oh I'm so silly this isn't 0
981.6 -> this is either at negative R this is one
985.199 -> side and then the same face so come at
989.37 -> this one out would be at R right these
995.189 -> don't cross the center of each little QB
997.559 -> they go along the edges so the Z has to
999.93 -> be so now we can see now this is right
1002.569 -> because it's a 3x3 cube it looks like
1004.79 -> why is there four but these are these
1006.62 -> are the front and back or the left and
1008.809 -> right or the top and bottom however you
1010.279 -> want to consider it and so now if I do
1012.47 -> this with negative R of course of course
1018.8 -> and then the same thing with positive
1024.86 -> all right there's 6 faces there we go
1032.12 -> now I have my Rubik's Cube but without
1034.309 -> the left or right or the top or bottom
1036.62 -> I've no idea what the orientation is so
1038.48 -> but the y-axis basically needs to be
1041.15 -> fixed so this is Z being fixed this
1046.069 -> first one was Z being fixed this one is
1047.809 -> X being fixed so I'm going to say a Z Z
1051.789 -> fixed x fixed and now I need to do one
1058.67 -> that's why fixed and that is going to be
1068.11 -> so this one I copied what did I copy I
1070.82 -> copied Z fixed so all i need to do is
1073.4 -> fix Y so negative or a negative are
1076.72 -> negative are a heart are are and then
1082.79 -> this should be negative r- r r- r r r- r
1091.37 -> r and same thing here negative our
1094.1 -> negative r r- r r r- r r look there it
1104.33 -> is again
1104.75 -> there's r cubed but all different phases
1107.51 -> so i have no idea
1109.64 -> let's just make a total guess here what
1112.37 -> if i say just for this so let me do let
1114.26 -> me do a fill on all of these fill 255
1120.73 -> fill 255 fill 255 fill 255 I fill 255
1130.46 -> fill 255 so now they're all white but I
1133.7 -> can say I remember I have my colors and
1136.13 -> what I'm actually going to do let's make
1137.45 -> some I there's thing let's make some
1139.37 -> variables that just keep these let's do
1141.05 -> top let's do up these are key words in
1145.69 -> these are key words in processing let's
1149.48 -> do them all three letters up is zero
1155.59 -> down is one I just want to like keep
1158.96 -> track of these constants final that is
1161.84 -> that a thing I don't know I don't know
1163.79 -> how Java works there's probably gonna
1165.17 -> innumerable down right left front and
1175.81 -> back this might I mean this is sort of a
1178.97 -> necessary but let's do that
1179.96 -> so now up down right left front back so
1183.98 -> in theory I want to say fill if this is
1186.98 -> the top I've no idea if it is whatever
1189.26 -> the top is fill
1192.11 -> colors top up up yes
1203 -> that's the top it's facing whoa oh yeah
1205.22 -> it's why shouldn't big white is the
1207.23 -> first one fill colors are all already
1211.22 -> white down all right let's find where
1214.61 -> that is this is gonna be on the bottom
1216.29 -> no it's facing us but that's fine
1217.549 -> because the way I drew it this is really
1219.65 -> the top over here I think so that's fine
1222.02 -> I mean whatever the the point is I just
1224.39 -> have to be consistent colors so this
1227.9 -> would be if Y is fixed if Y is fixed
1233.15 -> we're doing Oh No if Z is fixed these
1241.22 -> fixed its front and back so behind is
1247.64 -> back this of course this is front and
1251.35 -> then if Y is fixed it's not really fixed
1255.11 -> then we have top um that's that's
1261.53 -> actually bottom and then this would be
1267.64 -> and it's down this is up boy this is
1271.91 -> taking a crazy amount of time I can't
1274.1 -> believe how much time this is taking and
1275.84 -> this everybody in the chat I'm sure it's
1278.15 -> going crazy with better solutions to
1279.5 -> this X this is left and this is right
1291.4 -> all right let's see oh hold on let's
1297.5 -> look here I have white green red orange
1302.69 -> yellow blue red and orange are in the
1306.98 -> wrong place red and orange are in the
1309.2 -> wrong place
1309.98 -> so actually actually drawing it is
1313.01 -> correct I just have the color swapped in
1315.71 -> correctly here so this should be orange
1318.799 -> on the left and red should be here on
1322.19 -> the right let's check it here we go
1326 -> all right so I'm looking at green with
1329.12 -> yellow next to it so I'm now holding it
1332.18 -> the same way green with yellow next to
1335.36 -> it so if I go orange red white and on
1342.05 -> the back blue so I have now drawn the
1344.99 -> Rubik's Cube I have a made some of you
1348.44 -> happy who think that the top is yellow
1350.9 -> because the top is yellow here cuz I
1352.82 -> drew it the y-axis flipped even though
1354.77 -> it says top is white in my code
1356.75 -> who knows I'll figure that out later
1358.46 -> something that would really improve this
1360.53 -> would be using enums enumerables instead
1363.26 -> of these lists of constants it's a
1365.18 -> little tricky to do that in processing
1366.68 -> because of the way the processing wraps
1367.94 -> Java maybe I'll fix that up when I
1370.28 -> refactor this later but but in the next
1373.4 -> video I'm gonna work on actually trying
1374.96 -> to figure out how to do a rotation how
1376.73 -> to turn and move the stuff around and
1378.8 -> actually have all the data move as well
1381.74 -> so that I could shuffle the rubik's cube
1384.32 -> so if at least in this first part if I
1386.57 -> can now then make the moves then I can
1388.49 -> do another part where I can shuffle it
1389.84 -> and then play the shuffle back and
1391.1 -> reverse to make it look like it's big
1392.72 -> solved that'll be fun
1393.83 -> another thing that's really missing here
1395.87 -> is that you'll notice on an actual
1398.03 -> rubik's cube that the the just the faces
1402.05 -> that you can't see are actually colored
1403.34 -> black whereas once i start rotating
1406.1 -> these all those other colors are
1408.05 -> actually there internally and in fact
1409.73 -> there's like a cube in the center you'll
1411.02 -> never see it has the colors on it in
1412.61 -> mine but i think i've done enough
1415.13 -> i will see you in the next video
1421.77 -> [Music]
Source: https://www.youtube.com/watch?v=9PGfL4t-uqE