diff --git a/www/drawing.svg b/www/drawing.svg new file mode 100644 index 0000000..2822839 --- /dev/null +++ b/www/drawing.svg @@ -0,0 +1,238 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + 20 cases + 1.200cases + 120 cases + + 1.340 cases + 800 cases + M + F + ? + M + F + ? + + diff --git a/www/index.html b/www/index.html index 116dd9d..df9d567 100644 --- a/www/index.html +++ b/www/index.html @@ -2,107 +2,269 @@ - Specimens of (involuntary) composite portraiture - + Specimens of (discriminatory) composite portraiture + -

Specimens of (Involuntary) Composite Portraiture

+

Specimens of Discriminatory Composite Portraiture

Gender Differentiation*

- test + + + + + + + + + + + + + + + + + + 20 cases + 1.200cases + 120 cases + + 1.340 cases + 800 cases + M + F + ? + M + F + ? + + +
+
+
+

Distinctive traits

+
+
+ +
+
+ +
+
+ +
-
+
+
+
+
+
0 cases
+
+
+
+
0 cases
+
+
+
+
0 cases
+
+
+ +
* according to the 2018 edition of Affectiva's gender detection toolkit
+
+ + Ruben van de Ven + +
diff --git a/www/lines.svg b/www/lines.svg new file mode 100644 index 0000000..c7f4adb --- /dev/null +++ b/www/lines.svg @@ -0,0 +1,43 @@ + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/www/styles.css b/www/styles.css new file mode 100644 index 0000000..545bdec --- /dev/null +++ b/www/styles.css @@ -0,0 +1,158 @@ +:root { + --primary-color: white; + --secundary-color: black; +} + +html{ + /* filter: invert(1); */ + background: var(--secundary-color); +} + body{ + font-family: "CMU Serif"; + border: solid 6px var(--primary-color); + margin-top: 20px; + width: 1010px; + height: 1800px; + transform: rotate(-.1deg); + font-size: 25pt; + margin-left: 20px; + color: var(--primary-color); + } + h1,h2{ + font-family: "OSP-DIN"; + text-align: center; + text-transform: uppercase; + border-bottom: solid 2px var(--primary-color); + margin-top: 5px; + margin-bottom: 5px; + padding-bottom: 3px; + padding-top: 0; + font-weight: normal; + } + h2{ + font-size: 40pt; + padding: 20px 0 20px 0; + } + section#gender{ + height: 44%; + border-bottom: solid 4px var(--primary-color); + } + + h1{ + /* font-size: 82pt; */ + font-size: 80pt; + margin: 9px 0 0 0; + padding-bottom: 4px; + } + + .of{ + font-size: 70%; + } + + .star{ + font-size: 40%; + display: inline-block; + position: relative; + top: -12px; + } + + .genders{ + text-align: center; + } + + #gender h2{ + letter-spacing: 2px; + } + + #ethnicity h2{ + /* letter-spacing: 2px; */ + } + + #affdex{ + position: absolute; + top: calc(100% - 18px); + right: 5px; + font-size: 10pt; + } + + #signature{ + position: absolute; + top: calc(100% + 18px); + left: 5px; + right: 5px; + font-size: 11pt; + font-weight: bold; + text-align: right; + } + + #graph{ + display: flex; + flex-direction: row; + margin: 0 20px; + padding-top: 50px; + clear:both; + } + #graph > div{ + width: 33%; + } + + + #graph .wrap{ + border: solid 2px var(--primary-color); + height: 60px; + border-right:none; + } + #graph div:last-child .wrap{ + border-right: solid 2px var(--primary-color); + } + #graph .wrap .background{ + height: 100%; + width:100%; + box-sizing: border-box; + /* background-color: red; */ + background-image:url('texture-cross.png'); + background-size: 12px; + filter:invert(1); + /* create inverted primary color border, as to separate texture from edge */ + border: solid 3px var(--primary-color); + } + #graph > div:nth-child(2) .wrap .background{ + background-image:url('texture-diagonal.png'); + background-size: 12px; + } + #graph > div:nth-child(3) .wrap .background{ + background-image:url('texture-ball.png'); + background-size: 12px; + } + + #graph .cases{ + text-align: center; + } + + #differences{ + border-bottom: solid 4px var(--primary-color); + padding-bottom: 50px; + } + #differences::after{ + content: ''; + clear:both; + display: block; + } + + #differences .gender { + width: 50%; + margin: 50px 0 0 0; + float:left; + text-align: center; + } + + #differences .gender img{ + width: 180px; + height: 180px; + border: solid 2px var(--primary-color); + } + + #differences .gender h2{ + border-bottom: none; + margin-top: 40px; + } diff --git a/www/texture-ball.png b/www/texture-ball.png new file mode 100644 index 0000000..1edb30c Binary files /dev/null and b/www/texture-ball.png differ diff --git a/www/texture-ball.svg b/www/texture-ball.svg new file mode 100644 index 0000000..7255d1d --- /dev/null +++ b/www/texture-ball.svg @@ -0,0 +1,853 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/texture-cross.png b/www/texture-cross.png new file mode 100644 index 0000000..99e3e3a Binary files /dev/null and b/www/texture-cross.png differ diff --git a/www/texture-cross.svg b/www/texture-cross.svg new file mode 100644 index 0000000..3412c1e --- /dev/null +++ b/www/texture-cross.svg @@ -0,0 +1,995 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/texture-diagonal.png b/www/texture-diagonal.png new file mode 100644 index 0000000..01d4816 Binary files /dev/null and b/www/texture-diagonal.png differ diff --git a/www/texture-diagonal.svg b/www/texture-diagonal.svg new file mode 100644 index 0000000..7255d1d --- /dev/null +++ b/www/texture-diagonal.svg @@ -0,0 +1,853 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/unknown_side-1000x1000-3.png b/www/unknown_side-1000x1000-3.png new file mode 100644 index 0000000..bb09a12 Binary files /dev/null and b/www/unknown_side-1000x1000-3.png differ