…which is also Lego compatible!
We do lots of things, including participating in hackathons, various technology competitions, engaging in projects with emerging technologies (such as our world-first trial of Microsoft HoloLens in a school), and even regular trips to San Francisco for events like Apple’s WWDC.
Given the range of things that the Code Cadets do, we wanted to make a construction or artwork to showcase all our different activities and achievements. The parameters were that this construction had to be easily updatable, for new things we do in the future, and also have a wow factor!
Taking inspiration from our visits to some of the Silicon Valley giants across the years, such as the Googleplex and Facebook HQ, we recalled that they have Lego walls. This seemed like a very appropriate thing to do — as a homage to these large high-tech companies, while also ticking the boxes of being updatable and having the all-important wow.
Does Anyone Know a Good Tiler?
The challenge was to source the Lego tiles and bricks. We started window shopping while investigating the feasibility of this project and happened to stumble across a Kickstarter for Brik Tile — Lego Compatible Wall Tiles.
This appeared to have quite a few advantages over other products (including official Lego tiles / build plates) — mainly because the Brik Tiles have pre-attached foam adhesive on their reverse, making it easy to attach them to a wall. The adhesive is also only temporary, and they advertised that the tiles can be removed from a wall without damaging the wall or removing paint.
Logistically, this would be an end-to-end solution — as Brik provides the tiles (called Brik Tiles) and the actual bricks (just called Briks) so we would only need to source all our materials from the single supplier.
The wall where we wanted to install the tiles is 2510mm (wide) x 3055mm (high). Given that each tile is 250mm x 250mm that calculates out to 10 tiles wide x 12 tiles high = 120 tiles in total.
Note: for those who did the mental arithmetic, I am aware that 10 tiles wide x 12 tiles high actually requires 2550mm x 3060mm of space and would not fit on the wall…we’ll come back to that later.
We reached-out to Brik about our idea and they were very keen to help and support our build, providing us with a special package of the Brik Tiles and Briks which we needed — so it looks like we found a friend in our quest to make our construction!
We could mentally picture how the design was going to look, and knew that given its complexity we would need to design the wall in advance. This was for two main reasons:
- We needed to know how many of each colour Brik to order to make the design.
- We needed a blueprint to help physically construct the design, as our intention was to build each tile individually off-wall and then install the tiles on the wall at once when the construction was complete.
The entire wall was treated as a giant piece of pixel art, with each stud on a tile corresponding to 1 pixel. Each tile has 32 x 32 studs, so the entire wall is 320 x 384 pixels (32 pixels * 10 tiles wide x 32 pixels * 12 tiles high).
So, we went into Photoshop and created a new file with dimensions 320 x 384, zoomed in, selected the pencil tool, and started doing the pixel-by-pixel design.
The majority if the design was done by us, with some adaptions and use of existing pixel art (including the Brik Design Gallery).
Codie, Codette, and the Code Cadets banner at the top (being towed by a DJI Mavic Pro) were too complex to do ourselves, so we engaged the services of a professional pixel art designer on Fiverr.
Our pixel art designer is Kostic Milos (aka. HarveyDentMD): https://www.fiverr.com/harveydentmd/create-pixel-art-in-any-style-you-want
If you have the need for a graphic to be converted into pixel art then get in touch with him for a custom quote. The work he has produced for us has always been top quality and on time.
When creating the design it’s very important to remember that you only have a limited colour palette — being the colour of the available Briks. Before we commenced the design we ensured that we constrained ourselves to the Brik colours, which can be found at: https://www.brik.co/products/100-briks
There was one unavoidable colour issue — Codette’s hair has two shades of brown, a dark brown and a light brown. Unfortunately, Briks are only available in a single dark shade of brown. To get around this issue, we ordered official Lego in a lighter shade of brown just for that section of the design. The colour we used was Dark Tan and ordered them from Bricks to the World: https://bttw.com.au/lego-1-x-1-plate-dark-tan
Once the design was finished we needed to determine how many of each colour Brik to order. Fortunately, this can be done in Photoshop.
For this example, say that you want to determine how many tan coloured Briks you need to order.
Go to the Select menu > Color Range. This will make Photoshop put a selection around all instances of a particular colour which you specify — which, in this case, will be the tan colour.
For the Select option make sure that Sampled Colors is selected. The cursor should change to an eye dropper. Move the cursor outside of the Colour Range window and select the colour you want to count (in this case, tan) within the main image. If the colour happens to be behind the Color Range window then you may need to move the window.
Set the Fuzziness to 0 (that’s the tolerance for other colours, we want no tolerance so it will only select exactly the colour we specify). Under the image preview, select Image.
Click OK. You should find that all instances of that colour in the image are now selected.
Now we can get Photoshop to tell us the number of pixels which are currently selected in the image.
Go to the Window menu > Histogram.
We are interested in the Pixels count, which tells us how many pixels are currently selected. As the selection is only pixels with tan colour, the above screenshot tells us there are 5774 pixels with the tan colour in this image. Since every pixel equals a single 1 x 1 Brik, that means we need 5774 tan coloured Briks for this design.
You’ll need to repeat this procedure for all colours in the design, after which you will have an accurate count on the number of Briks of each colour that you need.
Note: it is important that all instances of a particular colour are exactly the same — so when doing your design just don’t pick a random shade of red every time you need to use red. Make sure you always consistently use exactly the same colour.
In total, our design required 42,073 individual Briks.
We ordered at least 1,000 extra of each colour (even more of common colours, like white and black) just in case there was a miscalculation. This also allows us to make new and additional designs in the future. That may seem like a lot, but you consume Briks very quickly when creating designs.
All up, our total order of Briks was 65,700.
Building the Design
The estimated delivery of the order was supposed to be October 2016 but, as with all Kickstarters, it was delayed. In the case of Brik, this was because they were still finalising the adhesive on the back of the tiles. So we had a bit of a wait until it arrived which was fine, as we intended to do the build over the Australian summer school holiday break during December — January.
While we waited, we had to figure out a way to effectively build this reasonably complex design. Being Code Cadets, we determined the best way would be writing a simple web app to assist with the process.
Getting the Design Out of Photoshop
To start, you will need to export the design out of Photoshop in 32px x 32px slices. In other words, each slice represents a single tile.
I won’t go through how to slice the image here, but if you need help I used this tutorial: https://thesiteslinger.com/blog/how-to-make-slicing-suck-less-tips-and-tricks-for-slicing-a-psd. You are interested in the “Auto-Dividing Slices” section. For our design, I could just specify to slice into 10 slices horizontally and 12 slices vertically.
(I suck at Photoshop, so if I can figure it out then I am sure it will be even simpler for you!).
Once the slicing tool has done it’s thing, your image should look like this:
If you can’t see the grid, go to the View menu > Show > Slices.
Then you can save all the slices by going to the File menu > Export > Save for Web. Save them as JPEG at 100% quality.
In whichever location you save the images they will be put into a folder called images and have the number of the slice appended to the end of the file name:
Now that you have essentially one file per tile you can bring them into the web app we wrote. This will present all the tiles in their final design position — with a grid and overlay of their number.
When you select a particular tile, it will show how that tile can be constructed. Let’s take tile 78 as an example:
To go back, click the “Tile: 78” link. Don’t use the browser’s Back button.
You will notice that there are red lines and five X markers in the grid. On the physical Brik tiles five of the studs are slightly indented — these are to help you locate yourself when constructing a design.
A trick for new players is that the position of the marker in the middle of the tile changes depending on the orientation of the tile. This might sound confusing, but think about it — in the orientation above the marker in the middle of the tile is 16px/studs from the left-hand side, and 17px/studs from the right-hand side. If you turned the tile 180 degrees it would be around the other way.
So, if you are using those markers to locate yourself then make sure they match the markers defined in the app.
P.S. There’s no particular reason that I chose that particular orientation to use in the app, I think it was just the orientation of the tile when I wrote the app!
The red grid is simply there to help you line up with the markers if you are placing Briks somewhere else on the tile.
The app, along with our design as a sample, is available on GitHub at: https://github.com/CanberraGrammar/brik-wall-assembly . There is also a readme explaining how to use the app.
So a few months flew past and on the 2nd January 2017 our shipment from Brik arrived. It was actually only scheduled for delivery on the 3rd January, but we were so excited that I drove out to the DHL depot to collect the shipment a day early!
…and then construction commenced…
In terms of the mechanics of the construction, there’s not really much to do except follow the instructions provided by the web app. However, it’s important to be careful particularly when doing complex tiles — if you make one mistake regarding position, and then base the rest of the Briks on that incorrectly placed Brik, then you’ll be in for a world of hurt…having to remove the Briks and do it again.
The Briks are very easy to remove using the red removal tool you can see above, although be aware they literally fly everywhere…so we kept a fairly clean environment so we could easily pick-up the Briks off the floor.
We also found another use for the removal tool. When placing a line of 1 x 1 Briks it is difficult to get them straight, and if they are not straight then other Briks which adjoin them are also likely to also be crooked. Using the butt of the removal tool is a very easy way to move around / swivel a Brik once it has been attached to a stud to get it straight.
Note: your fingers will feel quite tired and numb after a while — pressing in thousands of 1 x 1 Briks does take a toll!
Admiring Our Work
As the Brik wall was assembled tile-by-tile we never actually saw the wall in its entirety during construction, so we were looking forward to seeing it.
Once we finished building the tiles we put a grid out on the floor of a classroom using masking tape:
This made it easy to figure out where to put each tile, and also made it easier to transfer the tiles onto the wall — which is next door to the classroom.
Measure Twice, Build Once
So, you might recall earlier in this story that the actual wall where we wanted to install the design is 2510mm (wide) x 3055mm (high). However, the size of a 10 tile x 12 tile wall is actually 2550mm x 3060mm.
Yes, so…it turns out we completely forgot about this all throughout the design and construction. When it came time to put the tiles onto the wall we thought it prudent to do a quick size check by placing the bottom row of tiles horizontally along the wall:
So the Brik wall was 40mm too wide (and, we discovered, it was also 5mm too high) for the actual wall.
This is obviously a problem, as we can’t have the tile hanging off the edge of the wall. So, there are a few solutions we looked at.
Cut 20mm (which equates to 4 studs) off each side of the wall, reducing the width by a total of 40mm so that it fits.
Verdict: No go. As we forgot about the size issue during the design phase we put the Codie and Codette mascots right up against the edge of the tiles without much margin:
So if we cut the sides then both Codie and Codette would end up slightly cropped:
Not the end of the world, but not ideal — since it does actually look like a mistake. Not to mention that we walk past the wall several times a day, and we are always going to notice the error. It would drive us insane.
Move Codie and Codette 4px inwards, then cut 4px / 20mm off each side of the wall.
Verdict: No way. Codie and Codette are the most complex parts of the design and it would likely take us at least 3 days to rebuild them.
Find the “path of least resistance” vertically through the design and cut out 40mm from that section.
Verdict: So this was the chosen solution. We found two paths through the design which would only require minimal moves to clear the path, and we could then cut the required space out there to make the design fit.
The red sections above denote what we cut out — each vertical red section is 4px wide (20mm) so removing them both will result in 8px (40mm) being cut and the design fitting correctly.
The most affected part of the design was the banner at the top, and we had to move the banner parts on the outside of the cuts to make way. This took four people around 4 hours to complete — much easier than moving Codie and Codette.
Parts of the design which were not affected by the cut (such as the Snow Centre, Python, WWDC, SWIFTC, etc.) required no changes or movement.
It’s also worthwhile noting that both cut paths are symmetrical and mirror each other, reducing the noticeability of those tiles being slightly smaller than the others.
It was mentioned above that the wall was also 5mm too high. This was easy to fix, as we could just cut 5mm (3 studs/px) off the top of the wall where there was plenty of margin. No need for design changes or moves.
Cutting the Tiles
We thought that attacking the tiles with a hacksaw might not produce a particularly accurate or smooth result, so I gave our Head of Art, Design, and Technology a call (who is good friend of the Code Cadets) and he was happy to help out and run the tiles through their laser cutter.
However, laser cutters and foam generally don’t mix well (fire hazard). So before running the tiles through the laser cutter we had to remove the adhesive foam from the section of the tiles to be cut.
We discovered after a while that it was easier to just remove a thin strip underneath where the tile will be cut with the laser (along with a few mm margin, to account for variance of the laser). The foam adhesive is stuck pretty well onto the back of the tiles, but you can get it off with a bit of coercion.
Once that was all done, off to the laser cutter:
Following the laser cutting the tiles were ready to be installed on the wall.
We made the decision to start the installation in the top left-hand corner as there was a straight concrete pillar running down that side of the wall which could be used to align the tiles.
We did find that there was a bit of variance in the cutting of the tiles on the laser cutter, most likely due to minor differences in how we positioned in the tile in the laser cutter. As a result, some tiles were slightly (0.5–1mm) out of alignment. Unfortunately, when this kind of thing happens a few times the effect of the tiles adds up and the problem grows and grows until the tiles further down the wall are very out of alignment.
To address this issue we had to sand the edges of several tiles to get them back into line:
We also used some blocks from the Brik Structure Kits to ensure that the tiles were aligning correctly:
…and after a few hours, the final tile went into place:
We then went back over every tile and made sure they were securely pressed onto the wall. During construction we only lightly pressed the tiles onto the wall, in case they had to be removed and repositioned. Now we want to make sure they definitely say in place!
Damian and Sam also made sure that all the bricks were nice and straight.
using the multi-functional Brik removal tool.
And we are pretty happy with the result:
We recorded a time lapse of the wall construction:
We are very excited to have the Brik Wall ready for the beginning of the 2017 school year. This year also marks the introduction of co-education into the Canberra Grammar Senior School, and we could think of no better way to introduce Codette to the School — with her debut appearance on the Brik Wall.
The reaction to the wall has already been overwhelmingly positive:
Thanks to our Brik Builders from the Code Cadets: Robin, Jack, Sam, and Damian, along with others who helped in various parts of the project including Steve, Jas, and Ella.