The Google Creative Lab 5 Cheat Sheet

Martha Hipley edited this page Mar 22, 2016 · 18 revisions

Are you tired of tech interviews that expect you to jump through hoops in the name of "company culture" and "making things that matter"? Are you tired of application exercises that are simply unpaid labor in disguise? Here's a cheat sheet for Google's latest Creative Lab 5 application if you're stuck or just feel like gumming up their works or just want to make something cute and don't want to goof around in the console for hours. This is a fool-proof guide to getting that super important code crab seal of approval.

Basic Tips:

I completed the exercise using Google Chrome. It got buggy as hell by the end, so I would recommend turning off ad blocking plugins (including Ghostery) and anything else that might make things wonky. The page uses a canvas so you can't right click on elements to inspect them, but you can still just open up the console through the hamburger menu or whatever. If you have never used Chrome Developer Tools, now is the time to learn! The layering and animation functions are tricky so be gentle with them. The page will save your work, but again, kinda buggy, so I wouldn't trust it. If you want to get a better handle on the library they use for most of the functionality you can check it out here.

Basic Commands:

  • Undo: ⌘ + z
  • Duplicate layer: alt + drag
  • Move layer to front: ]
  • Move layer to back: [
  • Nudge: ← ↑ →
  • Anchor Tool: ⌘ + click
  • Play/Pause animation: space bar
  • Select Group: click + drag -or- hold select & click multiple

hidden.js

If you open up the Elements Tab in the Developer Tools in Chrome, you'll find a file called hidden.js. If you open this file up in a new tab, you get a cute ascii picture of the Mona Lisa and a clue that reads:

YOU NEED TO ADD A CLASS TO THE DOM GET THE SECOND CLASS OF THE ELEMENT WITH THE ID CL5 AND ADD IT TO THE DIV WITH ID=RABBIT

"#CL5" has 5 classes, moony, turtle, wormtail, padfood, and prongs (LOL NERDS). Now you can start messing in the console.

Console commands

There's a ton of stuff you can do in the Console tab of Developer Tools to control the page. I probably didn't find it all because I found the command to solve the final puzzle and just beat that part. You have to call these more or less in the order below, or you won't be able to access the final puzzle. Here's as much as I figured out:

adding JQuery

I ended up using JQuery for my solution to the final puzzle and it was helpful to have in general. You can add it to the console by just copying everything from here and pasting it in.

helloWorld()

Typing this in gives you 3 hints: hint(), strokeWidth(), strokeColor().

hint()

Typing this gets you 3 more hints: puzzle(), break(), join().

puzzle()

This gives you a hint to direct you to hidden.js....

Type document.getElementById('rabbit').className += 'turtle'; into the console to add the class to "#rabbit" as you were directed in hidden.js. This gives you 1 hint: weird()

weird()

Typing this in gets you another clue: decode() this: Y3JlYXRpdmVsYWI1LmNvbS9yYWJiaXRob2xl

decode()

decode("Y3JlYXRpdmVsYWI1LmNvbS9yYWJiaXRob2xl") yields "Like N64 but better."

This is when I started to get bored with all the runaround... until Thomas Wing-Evans pointed out that my original loophole for calling activatePen() had closed. If you pop that string into a Base64 decoder (here's one), you get the following url:

https://www.creativelab5.com/rabbithole

This asks you...

By listing the first six prime numbers: 2, 3, 5, 7, 11, and 13, we can see that the 6th prime is 13. What is the 10,001st prime number?

Judging by the frequency of this question on stack overflow, it's a pretty standard programming problem. But you can just snag the answer from any one of those threads, which is 104743, which you need to use with activatePen().

activatePen()

I originally found this one by just typing in letters and seeing what console would try to autocomplete. I called the function without putting in the answer from the rabbithole. BUT this loophole has since been closed....

I rooted around a bit in the source code but ended up just going back to the last working clue for Thomas (thx!).

When you call activatePen(104743) you get this "last challenge":

Call finalTest() with a function of your own that returns the closest Google logo color hex for any hex given. For example, for #FF7BAC, it should return #EA4235. Make sure to accept and return uppercase hex.

finalTest()

I was basically able to solve this by Googling, LOL. I found this stackoverflow thread and then repurposed their work for my needs. This is actually a cool little algorithm problem and it's interesting to read through their process BUT I have also literally never worked in a dev team where it made sense to redo someone else's work from scratch just for lols. Stand on the shoulders of stackoverflowers past! Save your mental energy for whatever you are gonna make later.

Pro-tip: #EA4235 is not the same as the Google brand color listed on their own brand guide!! According to that link it is #EA4335! But whatever, it doesn't matter. You can just grab the code in googlecolors.js and then paste that inside of the finalTest() function. My code uses JQuery, so make sure you've already added that to the console. And now you have the elite TECHNO CRAB.

editing elements

When you click on an element on the page, the console tells you a cute name for it, ex. "Curtis." You can use all of the following commands to alter these elements:

fill()

You can use this to change the fill color of an element, ex.: Curtis.fill("#FF9900")

gradients

h/t to Andrew Miksch for helping with this one. There are 8 gradients: "chocolate," "cookie," "metal," "nantucket," "ocean," "rainbow," "storm," and "sunset." You can apply them to an element a la Curtis.fill(gradient.sunset).

strokeWidth()

Use this to change the width of the stroke on any element, ex.: Curtis.strokeWidth(5)

strokeColor()

I bet you're getting the hang of this. Curtis.strokeColor("#FF9900")

break()

This breaks the edge of an element so that it's an open line. Curtis.break()

join()

This rejoins the edge. The border on the text input is actually a broken shape to start. Curtis.join()

You can also set variables for colors and use them in these functions.

Voila! Now you have a beautiful entry into their dummo contest. If you need any other help or wanna mutually whine about the evils of tech just tweet at me, @everyartisugly.

If you want to just play thru some dev puzzles FOR FUN, check out Do You Even Dev.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.