diff --git a/files/Candle.png b/files/Candle.png new file mode 100644 index 0000000..0d36ae6 Binary files /dev/null and b/files/Candle.png differ diff --git a/files/bat.png b/files/bat.png index bfb18f7..2b02558 100644 Binary files a/files/bat.png and b/files/bat.png differ diff --git a/files/meanspectra_10khz_600dpi.png b/files/meanspectra_10khz_600dpi.png index 20c8f30..102c915 100644 Binary files a/files/meanspectra_10khz_600dpi.png and b/files/meanspectra_10khz_600dpi.png differ diff --git a/index.html.haml b/index.html.haml index e7b52a3..b3570f4 100644 --- a/index.html.haml +++ b/index.html.haml @@ -54,9 +54,10 @@ .grabstein-wo Technische Universität München .grabstein-von ✦ 19. März 2018 .grabstein-bis ✝ 22. März 2018 + %img(style="height:7cm;float:right;margin-top:3.5cm" alt="Dunkle Nacht" src="files/Candle.png") %h1 Düsterkeit in der Musik: - %br<> + -#%br<> Physikalische Entsprechungen und Vorhersagemodelle %p#authors<> %span.author(data-mark="1")<> Isabella Czedik-Eysenberg @@ -98,15 +99,16 @@ %section#fragestellung %h1 2. Fragestellungen und Ziele - %p - Wie lässt sich das Wahrnehmungskonzept klanglicher Düsterkeit - anhand von Audiomerkmalen charakterisieren? - %p - Korreliert die empfundene klangliche Düsterkeit umgekehrt - proportional mit klangfarblicher Helligkeit? - %p - Ziel ist die Erstellung eines Modells zur automatischen Vorhersage - der wahrgenommenen Düsterkeit von Musikstücken. + %ol + %li + Wie lässt sich das Wahrnehmungskonzept klanglicher Düsterkeit + anhand von Audiomerkmalen charakterisieren? + %li + Korreliert die empfundene klangliche Düsterkeit umgekehrt + proportional mit klangfarblicher Helligkeit? + %li + Ziel ist die Erstellung eines Modells zur automatischen Vorhersage + der wahrgenommenen Düsterkeit von Musikstücken. %section#methoden %h1 3. Methoden @@ -175,8 +177,23 @@ Korrelation der durchschnittlichen Düsterkeitsbewertung mit Maßen für klangfarbliche Helligkeit. + %p + Zwischen den 30 am düstersten bzw. am wenigsten düster bewerteten + Klangbeispielen zeigen sich charakteristische Unterschiede in der spektralen + Verteilung (insbesondere im Bereich der Gammatone-Filterbank-Bänder 1, 4 und 5). %figure.left(style="width:38%") %img(alt='Trauriges Purpur' src='files/violin_keyEdma_darkMean_blaugelb.svg') + %figure.left + :markdown + Merkmal|r|p + ---|---|--- + RMS Gammatone 1|- 0,3989|< 0,0001 + RMS Gammatone 4|- 0,3427|< 0,0001 + RMS Gammatone 5|- 0,3126|0,0001 + {:.merkmale} + %figure.right + %img(style="height:6em" alt="lilien grau" src="files/meanspectra_10khz_600dpi.png") + %p(style="clear:right") Ein deutlicher Zusammenhang zeigt sich mit der Tonart der jeweiligen Ausschnitte: Moll-Beispiele wurden im Durchschnitt als @@ -199,8 +216,9 @@ niedrigere spektrale Komplexität aufweisen, fröhliche (happy) Stücke jedoch eine leicht höhere spektrale Komplexität als nicht fröhliche. - %figure.left(style="width:59.83%") + %figure.left(style="width:59.83%;position:relative") %img(alt='Totes Grün' src='files/scatter_model8_mit_beschriftung_gross.svg') + %img(alt="Farbiges Beispiel" style="width:5cm;opacity:0.7;position:absolute;top:0;left:3cm" src="files/bat.png") %p(style="clear:right") Nach sequentieller Merkmalsauswahl wurden 8 Signaldeskriptoren zur Bildung eines Modells zu Rate gezogen: @@ -228,23 +246,7 @@ Mean Average Error (MAE)|0,64 Korrelation (insgesamt)|0,7978 {:.merkmale} - %img(alt="Farbiges Beispiel" style="float:right;margin-top:-0.1em;margin-right:2em;width:3em;opacity:0.4;" src="files/bat.png") - -#.clear %div(style="clear:left") - %figure.left - :markdown - Merkmal|r|p - ---|---|--- - RMS Gammatone 1|- 0,3989|< 0,0001 - RMS Gammatone 4|- 0,3427|< 0,0001 - RMS Gammatone 5|- 0,3126|0,0001 - {:.merkmale} - -#%figure.right - %img(alt="lilien grau" src="files/meanspectra_10khz_600dpi.png") - %p - Zwischen den 30 am düstersten bzw. am wenigsten düster bewerteten - Klangbeispielen zeigen sich charakteristische Unterschiede in der spektralen - Verteilung (insbesondere im Bereich der Gammatone-Filterbank-Bänder 1, 4 und 5). .clear %footer diff --git a/style.scss b/style.scss index 827dc9f..888c537 100644 --- a/style.scss +++ b/style.scss @@ -49,20 +49,61 @@ html { } header { - h1 { + figure { + float: right; + display: block; + + //background: white + //box-shadow: 0 0 1em white + //border-radius: 1em + //padding: 1em + padding: 0; + margin: 0; + } + + h1 { + //font-family: "Italianno"; + font-weight: normal; margin: 0 { //bottom: 0.5rem; }; padding: 0; font-size: 2.5rem; text-align: center; + .duesterkeit { + position: relative; + &::before, &::after { + background: #900; + display: block; + position: absolute; + content: " "; + height: 0.07em; + width: 0.09em; + border-radius: 0.02em 0.02em 0.055em 0.055em; + z-index: 2; + top: 1.41ex; + //border: 1px #f90; + box-shadow: 0 0 0.04em #f90, inset 0 0 0.04em #f90; + } + &::before { + left: 3.16ex; + } + &::after { + left: 3.61ex; + } + } } padding: 0 1rem 0 1rem; position: relative; + color: #bbb; + text-shadow: 0 0 5px black, 0 0 10px black, 0 0 15px black; + //text-stroke: 1px black; + //-webkit-text-stroke: 1px black; + &::after { - background: linear-gradient(rgba(0, 0, 0, 0.5) 10cm, rgba(256, 256, 256, 0)); + //background: linear-gradient(rgba(0, 0, 0, 0.5) 10cm, rgba(256, 256, 256, 0)); height: 11cm; position: absolute; top: 0; @@ -277,34 +318,6 @@ q { quotes: "„" "“"; } -header { - h1 { - //font-family: "Italianno"; - font-weight: normal; - .duesterkeit { - position: relative; - &::before, &::after { - background: #900; - display: block; - position: absolute; - content: " "; - height: 0.07em; - width: 0.09em; - border-radius: 0.02em 0.02em 0.055em 0.055em; - z-index: 2; - top: 1.41ex; - //border: 1px #f90; - box-shadow: 0 0 0.04em #f90, inset 0 0 0.04em #f90; - } - &::before { - left: 3.16ex; - } - &::after { - left: 3.61ex; - } - } - } -} h1 { font-family: "Cardo"; //font-weight: normal; @@ -333,20 +346,6 @@ feature { font-size: 0.9em; } -header { - figure { - float: right; - display: block; - - //background: white - //box-shadow: 0 0 1em white - //border-radius: 1em - //padding: 1em - padding: 0; - margin: 0; - } -} - main { margin-top: 0.7em;