Making of the Saitama cube

What is the Saitama Cube?

So I was at work the other day, and I was being a bit of a nosy QA, looking at dev monitors in an attempt to learn the deepest secrets of what it means to be a developer. There were lots of text editors – a surprising variation within the workplace, which just goes to show that maybe there isn’t one text editor that is above and beyond the others. Or maybe there is one person in the office who is the true god of knowledge, and everyone else is using the wrong thing.

One of my coworkers had something really fun on his monitor though – a colourful, rotating cube. I thought woah, that seems like something I’d like to make. Something small, not too serious, but a bit of a challenge nonetheless. I’m talking 3D transformations in CSS. I bothered the dev until he found and sent me this guide, and I followed along with the instructions for making a cube. It’s a good intro to 3D transformations, but I didn’t find it well suited for beginners because it assumes a lot of knowledge. This was my first bit of js, so having some instructions or explanation of how it works would have been useful. The site goes through 3D transformations very well though, and I would recommend it as a read. Even if you don’t have experience using JavaScript, so long as you have some basic knowledge of how functions work then you should be able to work it out from the CodePen provided by the author – or read below and see my breakdown of what the Javascript does and how!

I followed along pretty much word for word what’s there, but instead of making a coloured cube, I decided to make something that speaks more about me as a person – and there’s nothing Bruce loves more than Saitama (this is almost the truth). My profile icon on Slack and Jira is of Saitama, and while learning how to use the Terminal I made a Saitama fortune where if you type “fortune Saitama” into the terminal, it returns you a wise Saitama quote. Therefore, I found a bunch of 200×200 pictures of Saitama on the net, mostly sourced from Crunchyroll, and added those instead of the words Front Back Left Right Top Bottom in the html divs.

The result is this Saitama Cube. I used recordit to share this, so it looks a bit clunky as the free version only allows 4 frames per second. Nevertheless, you can see that when you check a radio (the small circles), it finds the corresponding face and turns it to the front in a lovely 3D rotation.

Since the JS part isn’t explained, I thought I’d go through that. I’d recommend you look at real JS tutorials, since this is more to help me with my own understanding than anything else – but let me know if you find it useful, or if I got something wrong. I’ve done many tutorials and two courses on using the language so I know how to read and write in JavaScript, but have been generally lacking in context and where/why to use it, so I’m very pleased with having completed something that can actually be seen in a web browser.

Cube Rotation JavaScript Explanation

Ok so before going through the Javascript, I’ll have to set the scene. Remember to check everything out in the author’s codepen I linked above.

There are 3 files – the HTML, the CSS, and the JS. (When you’re making this at home, remember that you will have to reference the CSS and JS in your HTML file or it won’t know where to find them. You don’t see this in codepen.)

In the HTML file, they have a list of divs, one for each side of the cube. I don’t like their naming convention because I find it long and confusing to look at with the underscores and hyphens. This type of naming convention is called BEM and is perfectly valid if you want to use it. I just don’t like it. I used camelCase when I did mine, though if you do change the naming then you need to keep it consistent across the project. I spent 15 minutes trying to work out why my bottom face stayed in the middle of the cube, and it was because of a typo in the name (all hail our Lord, the immovable cubeFaceBottomn). Underneath the divs is a paragraph containing radios within label tags. Using the label tag here allows the user to select a radio by clicking on the text next to it instead of just the circle.

I won’t go through the CSS file, since it’s well covered in the original article. It’s worth looking at the codepen as you follow along though, as it has some extra formatting details you might want to add.

The Javascript file has just 12 lines of code, but looks daunting if you’re a beginner. The purpose of this code is to make it so that when the user selects a radio, the corresponding side of the cube will face the screen. So if you select Front, the front will face you, and if you select Bottom then the cube will rotate so that you see the bottom face. I’m not worrying about the transition animation that makes it look like the cube is rotating, because that’s what was set out in the original article. So long as you follow that, you can’t go wrong.

Breaking that down, we need the code to do a few things:

  1. find the radios and cube faces from our HTML and CSS files
  2. know which radio has been checked
  3. match the cube face being shown to the value of the checked radio
  4. update the cube every time a new radio is clicked

First, you have the “var word = document.querySelector(‘.word’);” lines at the top. These are how the Javascript knows where to find the radios and cube faces. They create a variable that can be used in this file, and then assign to that variable the value of the first instance of the element ‘.word’ (or ‘.cube’/’.radio-group’ etc) in your HTML/CSS. If you wanted this to apply to all instances of it, say if you had multiple cubes, then you could use querySelectorAll() instead. Find a detailed explanation of how the mothod document.querySelector() works here. In simple terms, it takes elements you made elsewhere and puts them in a format that can be used in your Javascript code.

The next line creates an empty variable called currentClass, which is needed later on to know which face to show at any given time.

Next up, the author created a function called changeSide. Functions follow the format:

function nameOfFunctionHere(parameters) {stuff the function does;}

This one happens to have a lot of ‘stuff the function does’. The first line creates a variable called checkedRadio, which looks at the radioGroup variable made earlier, and finds the radio that has ‘:checked’. When you check a radio, it automatically has this attached to it. The second line creates another variable called showClass, which adds ‘show-‘ to the value of our checked radio. (If you refer back to the HTML, you will see that labels have properties called type, name and value.) So if you have checked the radio that has the value of ‘left’ then showClass will hold the string ‘show-left’.

The if statement takes whatever value is in currentClass (if there is a value in currentClass), ie which side of the cube is being shown, and gets rid of it. This doesn’t cause the cube to move, since it hasn’t been told to show anything different yet. The next line adds the value of showClass to the cube, so if your value is ‘show-left’ then the cube will show the left face. Lastly, the function takes the value of showClass and assigns it to currentClass, which means that the process can happen multiple times. In summary, when the function is called it finds which radio has been checked and assigns that value to the cube.

A function will just sit there doing nothing unless it is called, so the second-to-last line calls the function. This sets the initial side and makes sure ‘front’ is facing the user when the cube first loads.

The last thing that’s needed is a way for the code to be watching out for a change in what radio is being clicked, and to run the function again when a different radio is selected. Otherwise, the function will run one time when the page is loaded in, and won’t know when to update the cube afterwards. To do this, the author has used the method .addEventListener(). In simple terms, “radioGroup.addEventListener( ‘change’, changeSide );” means “watch radioGroup (and when there is a ‘change’ in radio selection, then run the function changeSide). And that’s it!




1 thought on “Making of the Saitama cube”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.