Teaser
Watch the teaser:
.jpg)
.jpg)
EP
Mercur’s first digital EP will be released by the end of november 2013.
Listen to more songs on www.mercursound.net
MAKING-OF
The idea of this interactive video came up in december 2011, based on a very simple concept : let the user “draw the music”. Since then and until the public release of the video innovember 2013, there has been many steps:
- Creating the typographies: every single word in the song is hand drawn (using ink, brushes, or pen).
- Then we scanned the words, and animated them using After Effects, following the intonations of the voice and instruments.
- Last but not least, the programming. The animations are injected into the program, so that it reacts to the user’s actions.
The video was developped in Java using Processing. The source code is available here.
It was built into a Web App thanks to ProcessingJs added to HTML5 / CSS / Javascript / PHP.
More infos to come...
FAQ
How to play with the clip?
You just need to draw with your mouse...
Left-click: Draw
Right-click : Erase
Save : Take a snapshot in the web gallery
Mouse move : Draw words
Mouse freeze : Don't draw words
Cmd+Shift+F : Fullscreen (Chrome)
A : Draw Animations
The video isn’t working!
In order to work at best, the video needs a recent computer as well as a web browser up to date. (We recommend Chrome, but also Firefox, Safari...)You might want to quit other apps or close tabs.
If the update of your browser isn’t enough, try and download the desktop app version.
If you still can’t get it to work, you can watch the non-interactive version of the video here.
The video does not work on tablets or smartphones for now.
How can you help us ?
If you enjoyed the experience, we need your help!
- like us on Facebook, on Vimeo, don’t be shy, leave a comment...
- share the link to this page on your favorites social networks : www.mercursound.net/persifleur
- download our EP (pay what you want)
Under what license is the video?
Creative Commons BY-NC-SA 3.0 (Attribution - Non commercial use - Share alike)
CREDITS
Contact: mercurcontact@gmail.com
In competition at the CLIP THAT BEAT 2013 festival
MERCUR - Persifleur: Interactive Music-Video
Director / Programmer: Yann Deval // yann.deval@gmail.com
Design & Animation: REANIMATION (Thomas Fage, Yann Deval, Boris Wilmot, Stéphane Laplatte) // www.reanimation.tv
MERCUR:
Rodolphe Blanchet: Voice
Yann Deval: Clarinet, Bass Guitar, Piano
Thomas Fage: Guitars
Samuel Laenen: Drums
Persifleur (Blanchet - Deval / Fage)
www.mercursound.net
Built with Processing 1.5.1: www.processing.org/
and Processing.js 1.4.1: processingjs.org/
Parts of code based on:
M_2_6_01_TOOL by Generative Design: www.art-generatif.com/
Eraser by amnon.owed: www.forum.processing.org/topic/eraser
KISA (HTML5 Audio): www.cs.plu.edu/~brink/KISA/KISATutorial.html
Image zooming: fancyBox - http://fancyapps.com/fancybox/#examples
Preloader based on Only the brave by Florent Deloison: http://florentdeloison.fr/blog/2013/01/28/projet-abandonne-diesel-only-the-brave/
Image galery based on code by spitfire pat: http://forums.phpbb-fr.com/coding-webmastering-securite/sujet98940.html
Save screenshot based on tuto by Permadi: http://permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/
Bird anim based on Muybridge photographic studies of motion: http://en.wikipedia.org/wiki/Eadweard_Muybridge
Website by Yann Deval
DOWNLOADS
Download the app Persifleur 1.18 for:
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.