Code The Wave Framework
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:
- Verse 1
- Pre-chorus 1
- Chorus 1
- Verse 2
- Pre-chorus 2
- Chorus 2
- Pre-chorus 3
- Chorus 3
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.
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
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:
Go inside the folder and run:
Once NPM is done installing start the development server:
Choose an example in the www/examples folder and work from there.
The framework documentation is available here: documentation.md