diff --git a/10/img/gifmain.gif b/10/img/gifmain.gif index a59d98c..377f35e 100644 Binary files a/10/img/gifmain.gif and b/10/img/gifmain.gif differ diff --git a/10/index.html b/10/index.html index 39fcab9..01a53be 100644 --- a/10/index.html +++ b/10/index.html @@ -16,7 +16,6 @@ -

@@ -24,7 +23,7 @@
- +

Carbon

 @@ -51,7 +50,7 @@

FLAKES

by Mark van den Heuvel

-

Flakes is an audio playback device that combines the functionalities of an analog cassette tape player and a digital sample playback module <1>. Merged together in the case of an old desktop cassette recorder, this hybrid machine allows both different audio playback techniques to consolidate each other’s technical limitations <2>, make use (and misuse) of their capabilities in order to emphasize their ‘unique’ characteristics. By connecting the available outputs to inputs and using the adjustable knobs on the interface, the user has the options to mix, modify and let the samples from both analog and digital sources interact with each other to create new, unexpected sounds. +

Flakes is an audio playback device that combines the functionalities of an analog cassette tape player and a digital sample playback module <1>. Merged together in the case of an old desktop cassette recorder, this hybrid machine allows both different audio playback techniques to consolidate each other’s technical limitations <2>, make use (and misuse) of their capabilities in order to emphasize their ‘unique’ characteristics. By connecting the available outputs to inputs and using the adjustable knobs on the interface, the user has the options to mix, modify and let the samples from both analog and digital sources interact with each other to create new, unexpected sounds.
The starting point for making this device was to somehow ‘reveal’ the simularities of the inner workings between the digital software-based module and the analog origins of sample playback technique by using cassette tape loops <3>. With the idea of combining both playback techniques, I explored each unique characteristics, technical limitations and their potentials to function within a hybrid in order to create a new interface where they could work together, influence and even fight each other. Like an audible ‘internal dialogue’, switching between intuition and reason.

@@ -69,7 +68,7 @@
[Note 4]: Working with speech samples for the demonstration gave the device human characteristics. The narrated character of the speech sounds calming and, at first, comforts. We recognize this mode of speech when receiving instructions from a navigation system, for instance; or from a mentor who will lead you in the right direction, which we can follow blindly. As the vocals are processes, language moves from being an interface to becoming an instrument. From the structure of an unknown system.
[Note 5]: In music, tape loops are loops of magnetic tape used to create repetitive, rhythmic musical patterns or dense layers of sound when played on a tape recorder. Originating in the 1940s with the work of Pierre Schaeffer, they were used among contemporary composers of 1950s and 1960s, such as Steve Reich, Terry Riley, and Karlheinz Stockhausen, who used them to create phase patterns, rhythms, textures, and timbres. Popular music authors of 1960s and 1970s, particularly in psychedelic, progressive and ambient genres, used tape loops to accompany their music with innovative sound effects. In the 1980s, analog audio and tape loops with it gave way to digital audio and application of computers to generate and process sound. (source: Wikipedia)
[Note 6]: One can argue that the cassette tape's mechanism and recording method on magnetic tape is highly complex and mystical as well. By all means, we are just used to it since it has been around. So it might be a difference in current technical knowledge. But there's a diffrence in visibility and sense of control seeing a mechanism run in front of your eyes or having to rely on the fact that a certain code is running on a micro computer. - +

diff --git a/10/script.js b/10/script.js index e5f190a..c54dddf 100644 --- a/10/script.js +++ b/10/script.js @@ -1,8 +1,8 @@ -function adjust_height(){ - var win_height = $(window).height(); - $('div#left, div#right').css('height', (win_height- (win_height/100)) ); // - // console.log(win_height); -} +// function adjust_height(){ +// var win_height = $(window).height(); +// $('div#left, div#right').css('height', (win_height- (win_height/100)) ); // +// // console.log(win_height); +// } $(document).ready(function(){ @@ -13,13 +13,13 @@ $(document).ready(function(){ // $('div.links > a:contains("Git")').css('display', 'none'); -// Img of module on mouseenter +// Img of module on mouseenter $('div.moduleimg img').mouseenter(function(){ var modulo_photo = $(this).attr('src').replace('img/pcb_', 'img/mimgphoto_').replace('.png','.jpg'); $(this).attr('src', modulo_photo); - }); + }); $('div.moduleimg img').mouseleave(function(){ var modulo_pcb = $(this).attr('src').replace('img/mimgphoto_', 'img/pcb_').replace('.jpg','.png'); $(this).attr('src', modulo_pcb); diff --git a/10/style.css b/10/style.css index 0440dc2..b7bfffa 100644 --- a/10/style.css +++ b/10/style.css @@ -85,10 +85,10 @@ body div#left { border: 1px solid white; color: black; - width:49%; + width:49vw; display: inline-block; - margin-left: auto; - margin-right: auto; + /* margin-left: auto; + margin-right: auto; */ height:100vh; overflow-y: scroll; /*! padding-bottom: 200px; */ @@ -99,10 +99,10 @@ div#left { div#right { border: none; - width:49%; + width:50vw; display: inline-block; margin-left: auto; - margin-right: auto; + margin-right: 0px; height:100vh; overflow-y: scroll; /*! padding-bottom: 200px; */ @@ -146,7 +146,7 @@ color:#21632c; display: block; margin-left: auto; margin-right: auto; - padding-top: 10%; + padding-top: 8%; font-family: "OCRAStd"; font-size: 2vw; color: white; @@ -216,7 +216,7 @@ div#subtitle { div #maingif{ max-width: 100%; margin-top: 0px; - margin-bottom: 10%; + /* margin-bottom: 10%; */ margin-right: 0px; margin-left: 0px; padding:0px; @@ -294,7 +294,7 @@ div#bigpcb{ margin-left: auto; margin-right: auto; padding-top: 5%; - padding-bottom: 0px; + padding-bottom: 10vh; } .bigpcb{