Code The Wave Framework

CodeTheWave.com is an interactive platform that lets everyone create their own music video for the song "The Wave" by the band Scarlet Pleasure.

This is the JavaScript framework used to produce the graphics which users can choose between on CodeTheWave.com.

A jury will select the best contributions to be included on CodeTheWave.com but even if your contribution isn't selected you can still share your contribution yourself. We will only include visuals which works and adapts to different screen sizes and don't contain errors.

What it looks like

You can see an example running on CodePen - Please use Google Chrome as other browsers have CORS issues with the video when running on CodePen.

The music video is divided into 10 different parts:

1. Verse 1
2. Pre-chorus 1
3. Chorus 1
4. Verse 2
5. Pre-chorus 2
6. Chorus 2
7. Bridge
8. Pre-chorus 3
9. Chorus 3
10. Outro

When creating a personal music video on CodeTheWave.com the user will select a different script for each part. A unique url is then generated for each combination of graphics/sections and the user can share their video.

Getting started

You can work with the framework in two different ways: Directly on CodePen (Recommended) or locally by cloning this repository. Note: If you work locally you have to copy your code to CodePen when done so we can find it and include it on CodeTheWave.com.

Working directly on CodePen

The recommended method is to work directly on CodePen. You don't have to setup a development environment or copy-paste your code online when done.

There are several example Pens that you can fork and use as a starting point for your work:

• Example using all available functions
• VideoMasking
• WebAudioAnalyser
• Cast
• Editing
• Styling
• FullscreenSprite
• Layers
• MaskingPattern
• MaskingVideo
• MouseTouchPosition
• MultipleGraphics
• Orientation
• ScrollTilingSprite
• TilingSprite
• VideoKey

Just click the "Fork" button in the top right corner and you are up and running.

Important: Please develop using Google Chrome as other browsers have CORS issues with the video when running on CodePen. This will not be an issue for the users in the end, only during development.

Setting up local development

If you prefer working locally that is also an option. Just remember that your code needs to go on CodePen when you are done so we are able to find it.

First clone the repository:

[email protected]:molamil-com/codethewave-framework.git

Go inside the folder and run:

npm install

Once NPM is done installing start the development server:

gulp

Choose an example in the www/examples folder and work from there.

Documentation

The framework documentation is available here: documentation.md