In March-April 2017, W3Cx held #webdev contests to the attention of Web developers & designers who love to code and have fun!

The jury awarded prizes to the following projects:

Contest #1: HTML5 "shmup" game
Contest #2: Web Audio visualization

Contest #1: HTML5 "shmup" game

For this contest, participants were asked to write a 2D shoot’em’up game, inspired by "shmups" of the 80’s/90’s, using abstract graphics or sprites. The challenge here consisted in not using any external game framework: just plain JavaScript and basic APIs.
first place

First prize

Inga & Katerina

Our HTML5 game: Star Warriors

"The rules of the game are simple: the ship moves on the screen with the help of the cursor buttons and shoots with a space button. The score and time are counted until the rocket breaks. The rocket has three hit points, which decrease, if it hits with bullets or bombs. If it collides with blocks or Alien, it immediately dies. Blocks are of three types: blue, green and red. Green and red blocks can be broken with two hits. When a red block is broken, an alien appears.It does not shoot, but if you kill it, bombs fly out from it. Also on the blocks, guns randomly appear."

Who are we?

"We, Inga and Katerina, mother and daughter, live in Ukraine. Inga now does not work, but used to be a programmer, wrote programs in assembler for microcontrollers. Katerina is an artist and works in the art school, where she creates cartoons with children. We decided to become Web developers and started with the Ukrainian online courses Prometheus. We learned a lot of new information, but did not know how to apply it. And we decided to move on and found the courses on edX "HTML5 Part 1 and Part 2". We discovered so many directions on Web development! It was hard for us to learn and we supported each other. We were pleasantly surprised how the teacher Michel Buffa and the course assistants helped everyone at the forum. The material on the courses was very extensive for us, but the creation of games fascinated us. We made an example of a time-based animation of a moving robot with the city on the background. And from the courses, we created an arcade game for children with learning arithmetic. We sent the demo version to the contest.

The opportunity to participate in the contest is already an award. We learned a lot by creating this game. Thank you so much for the work of your team and for the wonderful courses that cover many issues of web development."

Second place

Jury prize

Chris

My HTML5 game: Squares

"In Squares, the goal of every level is to collect all of the golden pellets. Collecting a pellet increases the size of your square, and also your score multiplier. Touching a wall causes you to shrink and potentially lose your multiplier. The best strategy is to end each level with the highest score multiplier to recap the greatest rewards from your time bonus. For this project, I explicitly set out to keep it (mostly) manageable: the art had to be simple; only the player would move; the collision detection would be basic bounding box; the entirety of each level had to fit on one screen.


In the end, the game came together well enough that I was able to get ambitious on the last level. When I had deemed the game to be “complete”, I shared it with some friends and they all asked about why there was no sound. Typical. So I’ve spent a week and a bit figuring out how to shoehorn WebAudio into my engine."



Who am I?

"I’m a 38 year old electrical instructor in Canada. My interest in game programming was born out of my enjoyment of the games that I grew up playing. Two years ago, I decided to get down to business and, based on the recommendation of a friend, enrolled in some Codecademy courses. Since then, I’ve utilized other resources such as texts and online tutorials from the MDN and Node but was not aware of the courses available from the W3C. I’ll have to look into them as they appear to offer the learning that I’m targeting next. Prior to making Squares? I had made attempts at creating games in the past that all ended up being too large for my skill and understanding."

Contest #2: Web Audio visualization

Participants were asked to develop an application proposing a real time 2D or 3D visualization of music coming from a mp3 stream. It was suggested to use HTML5 canvas API for 2D animation, or WebGL/shaders for 3D animation.
first place

First prize

George

My Web Audio vizu app: SlomoDisco

"How I get inspiration: every day I’m looking for ideas and inspiration everywhere. I’ll see a pattern on a building or in the street or a poster or visual effect, and this will be my start point. I love minimalism and flat design. And I also love repetition and grids. So this forms the basis of most of what l do. But I’ve also been frustrated with my visualisations, and a lot of other JS sound visualisations, being so one-dimensional.
So for this entry, I wanted to submit something that evolves over time and has many states. However, doing this in one file, soon got messy, unwieldy and complicated. So i decided to rehash an old flash VJ app I built, that can load in separate JS files. Also using an mp3 and a microphone also quickly got tedious - so I build a Soundcloud player to pull random tracks from their API. Only then to realise how awful a lot of the music is on Soundcloud. So i then added ability to pull from various genres, or a set list of genres. This also helps in the visuals - because things can look totally different with different kinds of music."

Who am I?

"Firstly, let me say that I’m not a coder but a designer. For the past 10 years or more I’ve been working as an advertising Creative Director at various agencies around the world. Originally from Cape Town South Africa, I’ve been living in Tokyo, Hong Kong, Berlin and now currently based in Singapore. Last year, I gave up my day job to pursue a creative coding art career. Basically looking to do something different with my new found love for code. And collaborate with more interesting people. I attended Ars Electronica (a dream come true), did a residency at Schmiede in Austria and travelled around China visiting hackerspaces and factories and playing with electronics. I’ve currently been teaching creative coding workshops for the past few months. And will be attending Summer School at ITP (NYU/Tisch) in June. I’m also a co-organiser of the Singapore Creative Coders Meetup."

Second place

Second prize

Bruce

My Web Audio vizu app: Spidermoon

"I like writing shaders, I like the small set of instructions, it involves basic maths and it's powerful as it runs on the GPU. I got involved in live-coding shaders recently, that's why you see the resulting shader code for the contest, but it's even better when you code it live, so you can understand the steps to build the visuals. My first idea was to create a sort of growing spider (in reference to the song called 'spidermoon'), I nearly succeeded but the result was not as spectacular. So I added extra animation and positioning to give more impact. It grows with time and it's audio-reactive. The interesting part was to nest several for loops, which can reduce performance depending on the number of iterations. Although I could have used while loops, I preferred for loops to have a maximum level of iterations, then break inside the for loop to allow growing without the risk of a infinite loop. Actually, it is not recommended to use for loops, but it was helpful in this case."

Who am I?

"I am a musician myself, looking forward to use webaudio with my bass as an input, to trigger visuals. I followed the webaudio part of Michel Buffa's HTML5 course on W3Cx. I'm a creative coder, focusing on building real-time visual software, also interested in interactivity with VR, AR, etc. I code since I'm 14, I have studied many languages from basic to c++, actionscript to javascript, opengl to webgl, etc. I live on the French Riviera and work in Sophia-Antipolis."

Second place

Jury prize

Yannis

My Web Audio vizu app: Clubber

"The clubber.js library came up from my involvement in music visualization works. At one point, I was fascinated by the tight sync stemming from combining music with midi. So I begun looking for a way to make that universal. I brushed up my music theory and started experimenting. Initially, I transformed the results from the audio fft to midi space and the spectrum started making sense.
Clubber was made hastily to assist in the experiments and the design was geared for rapid coding. Closures provided a fast object model and the normalized float output allowed fast use in webgl shaders where I usually spend most of my time. While working on the raw data provided by the lib with glsl, the music vectorization technique came up naturally through the constructs provided from the language. In the end, a crude hybrid methodology came up, combining tonal and energy measurements, producing modulators responding in ways similar to human dancers, subjective yet meaningful. The associated tooling came up as a way to further assist in experimentation and reuse of the results in actual applications.This allows them to concentrate on the visuals themselves in separation, mixing and matching them, like having a set of vibrating crystals that slot in properties of the graphics and animate them."

Who am I?

"I've always been interested in music visualization ever since the winamp and goom days. Along with several other people, we're also assessing the possibility of bringing up a proper daw for music creation. That will take some time though as it's a huge undertaking, but the infrastructure is there thanks to the efforts of the W3C and the great APIs you provide us. I haven't followed the W3Cx courses tbh, I wasn't aware of them till I saw the contest.

About me, I'm a creative coder residing in Athens, Greece. I work with digital agencies in the advertisement field and my toolset is mainly focused on the web, using most of it's multimedia capabilities like webgl, web audio and webvr."

The jury

picture of Marie-Claire
Marie-Claire Forgue
Head of Training at W3C
picture of Michel
Michel Buffa
W3Cx trainer

Finalist of the 1st edX prize for Exceptional Contributions in Online Teaching and Learning
picture of Bert
Bert Bos
Co-inventor of CSS