Hello, hello and here we go with the second edition of our MAKE IT MONDAY series! If you saw last week’s tile video project, you know we’re all about bright, bold, colors. This week, we kept things in the same colorful vein by makin’ it rain! Makin’ it rain emojis!

Try it out! Click the button, just do it!

Emojis!

Note: I highly recommend using Chrome or Mobile Safari (iOS). Other modern browsers *should* work, but you could have problems. There’s an audio player on the page to (kinda) allow seeking, but it’s just silence – your speakers aren’t broken. If you’re on a computer your mouse change the direction of the emojis in some moments, and if you hover over the textual emojis you’ll see the translation. If you’re on a mobile device try moving/tilting it around.

WHAT WE MADE

Creative coding web project with text and visuals.

WHY WE MADE IT

I stumbled upon this ridiculous awesome web component that creates a rain effect using emojis, and thought it would be interesting to use in a project. I spent a lot of time in the Bay Area performing live visuals for bands (including Sarah’s band EFFT). I decided to play with text that could elevate the emojis out of their usual text message context. Plus, emojis are such a strange communicative tool themselves. Words have a rich history of conveying layered meaning signified, signifier, contexts, subcontexts. But I’m still learning the semiotics of emojis^{Except “Ghost” as a term of endearment. I get that one. (“you’re my boo”)}.

HOW WE MADE IT

Fellow coders: links to the various javascript, etc. libraries used are down in the footnotes

• Sorted the emoji by color tone and brightness^{color thief and kd-tree} then again by symbolic content or theme.
• Put out the call for contributors: We were looking some emoji-related text. Call was answered by Sarah Elena Palmer
• Next, we synced the text up to the visuals ^Popcorn.js
• Found the emojis that connected the text and characters (and some just because…love those cat faces) ^{Emoji One}
• Write code, write code, debug, write code, tweak timing, write code, debug code, etc

FUN STUFF! BTW dragging your mouse or moving your phone/tablet can change the direction of the emoji rain in some places ^{Full-Tilt and pixi.js}.

WHAT WE LEARNED

AnnaI was reminded that there are a whole bunch of creative activities that live FAR outside my wheelhouse. Computers are magic! It’s a lot easier to collaborate on something you know very little about with someone who knows a lot about it. This was a great chance for me to see Luke in action and glimpse behind that magic curtain a bit (although there was a lot I did not understand). I loved sorting emojis by color and theme for this project.

LukeRevisions are important. It’s not “just make it work”. You can rehearse and learn the notes/steps/lines/brush strokes, but at some point you have to stop and make it art. I’m still learning how to pare back my ambition to save time to edit. However, this is a great jumping off point for other projects. Glad I did it.

Disclosure

LukeYeah, this entire series is named after the goal of creating something by Monday of each week. It’s only the 2nd week and we broke the rules. But the project ended up taking a lot more work than I anticipated. And there’s more pressure to make something worthwhile when you’re collaborating with others. Sarah whipped up a really interesting poem over the weekend that would be spoiled by a slap-dash goof-fest. I do wish I had more time to work with Sarah in creating a shared vision of the piece—her input made the piece much better than it would be otherwise.

How about you

Did you join us for Make It Monday this week? Show us what you made!