The First Annual Standard Code Tech + Art Contest

I recently received my EO1, a kickstart project I backed about a year ago. The EO1 is a bit expensive and not entirely flawless, but I really value what they brought into the world. I love picking new digital art to place on my wall each day. My kids have been likewise delighted. At Standard Code, we love to code, but we tend to direct our code to solving problems for our clients and ourselves. The EO1 inspired us to spend a Friday creating art. No rules or constraints, just an opportunity to use Technology to make something interesting. We were very pleased with the results. Take a look. Jonathan Nesbitt - Metroid in the Deep

My Standard Code art project was directly inspired by the print "Heavens to Metroid" by Tegan Robichaud (which of course is inspired by the legendary game Metroid). The contrast of hard-edged pixel art and smooth background gradients is a nod to the art style of Superbrothers: Sword & Sworcery EP, the unlikely iPad hit. I used the Mac app Pixen to create the Metroid jellyfish GIF animation. I attempted to use a sprite sheet in conjunction with the Spritely jQuery Plugin for the jellyfish animation, but it did not offer me enough control over the image size. I set the width and height of the GIF so that it's 6 times it's original size, and I actually to use some CSS rules to keep the pixels from getting blurred by the browser. Blurring is usually preferred so that upscaled images look better, but it actually worked against me in this case. For the background, I used Parallax Star background in CSS by Saransh Sinha. I used the code as-is, with the exception of removing the text and slowing down the animations. It was a fun project, and I probably spent about 4 hours on it total. It was a great learning experience, especially with creating pixel art animations. At this point, I want to take the plunge and work on a small-scale "indie" game.

Maren Woodruff - Stars

I studied music at a very avant-garde college, where my definition of music changed from traditional instruments to include the sounds surrounding us- as in John Cage's piece, 4'33''. If you listen to the world around you, you will never be bored. As in music, art, or the inspiration of, is inspired by every day life. The premise of this project is a window upon which you can look out at twinkling stars. This project uses CSS animation, box shadows and HTML

David Dyck - Ms. Pac-Man Hell

This is my idea of Ms. Pac-Man Hell! She's stuck forever eating yellow pac-dots. I guess the ghosts just weren't in the code. It's essentially a few styled HTML divs, and a spinning ➤ character to simulate her mouth opening and closing. The pac-dots are a looped sliding row of bullet characters. It was a fun way to learn more about CSS @keyframes and z-index.

Michael Jordan - Clouds

For this project I wanted get more familiar with using D3. After experimenting a bit, making clouds seemed like a good choice. I actually found it easier to work with D3 in a lot of ways than jQuery. To make a cloud, circles were appended to an svg tag and then given random values within a range for their x position, y position and radius size. I first created a light blue circle and then a white circle on top with a slight offset to make crescent shaped shadowing . Then the page refreshes to make a new cloud. This was a fun way to start working with D3. I'll definitely be using it more often in the future.

Sabeel Siddiqi - The Application To Life

My inspiration for this simple piece was the fact that many children born now and days have some kind of internet presence thanks to social media. Because of this many people get to learn about a newborn much faster than they did years ago. Its almost as if when you are created you are added to a social media profile called "Life".

*Runner Up* Matt Valdez - Canvas Fire Fighter Animation

First attempt at animation using HTML5 canvas and Javascript. Lots of fun. Shout out to @cssanimation for the great tutorial on particle animation. It was a great starting point to figuring out how to make things come to life. Everything pretty much done with Vanilla Javascript and the HTML5 canvas. I used CSS to position the canvases with z-index for overlapping.

*Winner* Scott Murphy - Death Star

My art project is pretty much all CSS except for the stars which uses JS to randomly generate new stars each time the page loads. The clouds and car both use CSS animate to move and are on an infinite loop. I think the loop works better for the clouds because each cloud has a different speed so each one is on its own loop giving the appearance of more clouds. The Death Star was put in when I was making the moon and only one crater out of 3 loaded so tweaked it a little to make it what it is now.

We bought a Amazon Echo to play around with, but found that it didn't really fit into our office life (I love my Echo at home) so the Echo turned into the grand prize for our favorite art project. We enjoyed all of the projects, but the judges, Jared and TJ, decided that Scott's was the favorite. Matt, a close friend of Standard Code, came in second place. The process was a lot of fun and we plan on doing it again. We are considering making it a larger community contest. Tweet us if you'd be interested in joining.