Bunkai-Kei records is a japanese net-label releasing electronic music ranging from ambient, electronica and IDM.

I made a special release website for Hizmi “Dendel Voile EP” in collaboration with Shunya Hagiwara in december 2014.

link: Hizmi - “Dendel Voile” website

Hizmi used the SHARP X68000 to program his music and I was asked to display a 3D model of the computer alongside the tracks source code.

Concerning the art direction, we chose to keep the vintage aspect of the X68000 by using monospace, unsmoothed fonts and displaying ASCII characters on the download page.

I wanted to use the same booting screen as the original for the top page, before redirecting to the main WebGL page, thus amplifying the contrast between vintage and actual technologies.

The WebGL app loads a 3D model and a texture of the X68000 applied with UV mapping in Cinema 4D.

A glitch shader is applied on the model, which is rendered in real time inside the browser.

When clicked, the 3D model triggers the player and download link. jPlayer was used for mobile portability and compatibility purposes.The WebGL app communicates to the DOM with jQuery in order to show or hide the main infos and source code.

The audio volume from the player is then recorded and updated with Web Audio API FFT and its createMediaElementSource() function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

window.context = new AudioContext()||new webkitAudioContext()||new mozAudioContext();
   
audio = context.createMediaElementSource(document.getElementById('jp_audio_0'));
analyser = context.createAnalyser();    
analyser.smoothingTimeConstant = 0.9;
// half the size of the sampling rate
analyser.fftSize = 512;                 
audio.connect(analyser);
analyser.connect(context.destination);
function getVolume() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
average = 0;
for(i=0;i< array.length;i++) {
	average += parseFloat(array[i]);
}
average = average/array.length+10;
}

This variable is then used for scaling and moving the camera in the WebGL app. When a track is played, an ASCII shader is applied on the model, and its size reacts to the sound.

The source code of the track played is displayed on the right side of the screen and the cover art appears when hovering the download link.

campaign against visual pollution

Recently I helped a friend of mine to develop a website for one of his school works. The aim of the project was to use a blank visual identity to denounce the over-add society.

As the purpose was to show a small amount of content in one page only, I decided to integrate it in an clear and original way. Technicaly speaking, I thought about a 3D navigation system without being forced to use WebGL. Starting by experimenting with CSS transform property only, I managed to create a carousel-like menu by combining rotations and translations.

The result is quite simple, it also works with sounds or videos even if there is only animated content on the website. An interesting feature is that the 3D effect also works on mobile devices as it is CSS only. Plus, you can for example play a embed video and then scroll through the carousel to the point where the video is turned backwards, as if you we were looking behind the screen.

website : ad-visory.fr