W3Cx@Festival of the Web

W3C is also present at the Festival of the Web (FOW). We have designed not one but three contests to the attention of Web developers/designers who love to code and have fun!

PARTICIPATION:

To participate in one or more of these contests, please share your contribution(s) with a URL pointing to a live demo, explanations about the project and the source code. The source code should be available on a GitHub/Bitbucket/SourceForge repository, except if your project runs on one of your favorite online editing tools (such as CodePen, JSBin, JSFiddle, Plunker, etc.). In that case, please provide both the URL to the running demo and the URL to the source code

SUBMISSION DEADLINE:

Please send us your project's URLs to contact[at]w3cx.org
We'll accept your projects until Friday 6 April (at 23h59 UTC)!

SELECTION:

The jury members of the competition are Michel Buffa, Bert Bos and Marie-Claire Forgue. We will deliberate on Friday 7 April 2017 -- on site in Perth!

CONTEST 1

Web Audio visualization

Develop an application that will propose a real time 2D or 3D visualization of the music coming from a mp3 stream.
The WebAudio Analyzer node will provide the data necessary for drawing in real time the waveform, the frequencies amplitudes or a sonogram. You can use the HTML5 canvas API for 2D animation, or WebGL /shaders for 3D animation.

A few tips:

Any external framework is allowed
Be creative: your app can be customized using some sliders/knobs, or any other interactive means ; it can use the WebCam, can run on several computers in sync, etc.
Starting point: take this skeleton app. The source code is a minimal real time frequency visualizer that uses the WebAudio API (analyzer node) + the HTML5 Canvas 2D API.

A few resources that will help:

Follow "week 1" of the W3Cx MOOC: HTML5 Apps and Games. In this course module, there is a WebAudio tutorial that explains the basics of audio visualization.
WebGL shader + webcam + music waveform example, also try this application that shows some of the WebGL shader effects used.
Check also these demos …or that one!

Efficient 2D frequency visualization

CONTEST 2

CSS SWAN

Animate the WWW17 black swan.
To continue the CSS 20th birthday celebration, we are proposing an animated drawing contest to all CSS enthusiastic developers. The black swan is Western Australia’s bird emblem and is to be found on the Swan River estuary that flows through the city of Perth.

black swans on the Swan river facing Perth city

black swans on the Swan river facing Perth city

A few rules:

Do not use a framework
Be creative: use at least one animation and one gradient
Make the design responsive
Make the design accessible
Use these mandatory words in the drawing: "WWW2017"

A few resources that will help:

Follow the W3Cx HTML5&CSS Fundamentals course
Specific resources about CSS animations: in the W3C specification itself, the Microsoft's developer guide and the Mozilla's developer network dedicated page.
About CSS color gradients: see the gradients section in the W3C specification. Microsoft's developer guide and the Mozilla's developer network dedicated page also explains CSS color gradients.
W3C's Web Accessibility Initiative has some tips on making Web content accessible. A quick reference to the full WCAG2 guidelines is also available.

CONTEST 3

HTML5 Game

Write a 2D shoot’em’up game, inspired by "shmups" of the 80’s/90’s.
Your game can be very basic, such as space invader or bullet-hell games. Do use abstract graphics or sprites (animated series of images). The challenge here consists in not using any external game framework: just plain JavaScript and basic APIs included in your browser to code the core of your "shoot'em'up".

A few resources that will help:

Follow "week 2" of the W3Cx MOOC: HTML5 Apps and Games. In this course module, you will learn the basics of game programming. This tutorial does not use any external framework, but explains how to write a small game engine. Moreover, you'll learn about: animation at 60 frames/s, event handling (gamepad, etc.), sound, collisions, sprite based animation, time based animation, etc.
If the challenge is too difficult, you can use the bulletML js port (bulletML is a library for animating bullet patterns), or libs for making analogic sound effects (such as WebAudioFX) or managing sound samples (such as HowlerJS), or particle effects like in this example from this W3Cx MOOC.

Check out these games: