-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
218 lines (179 loc) · 13.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en">
<head>
<title>WikiArt Analysis</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header id="header" class="header" style="height: 700px;">
<div class ="row">
<div class = "col-sm-1"></div>
<h1 class = "col-sm-5" style="font-size:24px;" >WikiArt Analysis</h1>
<nav class = "col-sm-6 text-right">
<a href = "#category">Styles</a>
<a href = "design.html">Design</a>
<a href = "about.html">About Us</a>
</nav>
</div>
<div class="header-content">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="text-container">
<h1>Emotion in Art </h1>
<p class="p-large">Explore the emotions we can get from arts and how they influence our favor of different art styles.</p>
</div>
</div>
</div>
</div>
</div>
</header>
<section id = "style-category" class = "container">
<p>WikiArt Emotions Dataset has annotastion for around 4000 pieces of arts created between 1415 and 2012 from 4 western styles: <span style="color:#aa7942;">Renaissance Art</span>, <span style="color:#778899;">Post Renaissance Art</span>, <span style="color:#ba55d3;">Modern Art</span>, and <span style="color:#ff0000;">Contemporary Art</span>. The four styles of arts consist of 22 categories: <span style="color:#aa7942;">Early Renaissance, High Renaissance, Northern Renaissance</span>, <span style="color:#778899;">Baroque, Neoclassicism, Realism, Rococo, Romanticism</span>, <span style="color:#ba55d3;">Abstract Art, Abstract Expressionism, Art Informel, Color Field Painting, Cubism, Expressionism, Impressionism, Lyrical Abstraction, Magic Realism, Neo-Expressionism, Pop Art, Post-Impressionism, Surrealism</span>, and <span style="color:#ff0000;">Minimalism</span>. </p>
<p> Art pieces in the dataset are annotated with 20 emotions: <span style="color:#53da18;">Gratitude, Happiness, Humility, Love, Optimism, Trust</span>, <span style="color:#ff9900;">Anger, Arrogance, Disgust, Fear, Pessimism, Regret, Sadness, Shame</span>, <span style="color:#0b5394;">Agreeableness, Anticipation, Disagreeableness, Shyness, Surprise</span>, and <span style="color:#0b5394;">Neutral</span> from 3 types: <span style="color:#53da18;">Positive</span>, <span style="color:#ff9900;">Negative</span>, and <span style="color:#0b5394;">Other or Mixed</span>.</p>
<h2 style="margin-top:40px;margin-bottom: 20px;">What art Style Categories do people like?</h2>
<p>The style and category of art that dominates art creation has been changing over the years. The past one and a half century has witnessed the booming of <span style="color:#ba55d3;">Modern Art</span> with miscellaneous categories as well as the emerge of <span style="color:#ff0000;">Minimalism</span> as <span style="color:#ff0000;">Contemporary Art</span>, a much more diversified situation than the four and a half centuries of <span style="color:#aa7942;">Renaissance Art</span> and <span style="color:#778899;">Post Renaissance Art</span> before that. </p>
<p>However, the popularity of art creation does not necessarily result in the popularity of the art style with observers. People nowadays like most art pieces of <span style="color:#aa7942;">Renaissance</span> and <span style="color:#778899;">Post Renaissance</span> art styles, a taste which they don't always have for <span style="color:#ba55d3;">Modern</span> and <span style="color:#ff0000;">Contemporary</span> Arts.</p>
<video width="1150" height="600" controls style="clear:both;display:block;margin:auto; max-width: 100%; height: auto !important;">
<source src="images/category_overTime.mov" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser doesn't support HTML5 video。
</video>
</section>
<section id = "category-count" class = "container">
<div class = "row">
<div class = "col-sm-5 explain">
<div class ="font-weight-bold">
<h3>Styles & Categories</h3>
<p>Each art style has different numbers of categories, and the number of annotated arts in WikiArt Emotions Dataset is generally the same for each category. As a result, we see the most annotated art pieces for <span style="color:#ba55d3;">Modern Art</span>, which has the largest number of categories, followed by <span style="color:#778899;">Post Renaissance Art</span>, <span style="color:#aa7942;">Renaissance Art</span>, and lastly <span style="color:#ff0000;">Contemporary Art</span>.</p>
</div>
</div>
<div class = "col-sm-7">
<img class ="portrait" src = "images/style_category_count@2x.png">
</div>
</section>
<section id ="category-rate" class = "container">
<div class = "row">
<div class = "col-sm-6">
<img class ="portrait" src = "images/style_category_meanRate@2x.png" style="max-width: 90%;max-height: 90%; width: auto; height: auto;">
</div>
<div class = "col-sm-6 explain">
<div class ="font-weight-bold">
<h3>Like Rating</h3>
<p> <i>on a scale from -3 (dislike it a lot) to 3 (like it a lot)</i></p>
<p> People today tend to like arts of <span style="color:#aa7942;">Renaissance</span> and <span style="color:#778899;">Post Renaissance Arts</span>, but their attitudes towards <span style="color:#ba55d3;">Modern Arts</span> vary a lot by the specific category. <span style="color:#ff0000;">Contemporary Art</span> is not really favored by contemporary people. </p>
</div>
</div>
</section>
<section id = "emotion" class = "container">
<h2>What emotions does art evoke in observers?</h2>
<!-- <h2>Is there any pattern in the emotions art pieces of different styles and categories evoke?</h2> -->
<p>Art evokes emotions in observers. One piece of art can arouse multiple types of emotions, and different art can arouse different emotions. Is there any pattern in the emotions art pieces of different styles and categories evoke?</p>
<video width="1150" height="600" controls style="clear:both;display:block;margin:auto;max-width: 100%; height: auto !important;">
<source src="images/EmotionVote_byStyleCategory.mov" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser doesn't support HTML5 video。
</video>
</section>
<section id = "emotion-count" class = "container">
<div class = "row">
<div class = "col-sm-7">
<img class ="portrait" src = "images/emotion_type_count@2x.png">
</div>
<div class = "col-sm-5 explain">
<div class ="font-weight-bold">
<h3>Emotions & Types</h3>
<p>Most art pieces evoke <span style="color:#53da18;">Positive</span> emotions, especially <span style="color:#53da18;">Happiness</span>, <span style="color:#53da18;">Trust</span> , <span style="color:#53da18;">Humility</span> , and <span style="color:#53da18;">Optimism</span>. Less art pieces evoke <span style="color:#ff9900;">Negative</span> emotions. For the <span style="color:#ff9900;">Negative</span> emotions people feel, <span style="color:#ff9900;">Sadness</span>, <span style="color:#ff9900;">Disgust</span>, and <span style="color:#ff9900;">Fear</span> are more common. <span style="color:#0b5394;">Other or Mixed</span> emotions are least evoked, for which <span style="color:#0b5394;">Anticipation</span> and <span style="color:#0b5394;">Surprise</span> are the most common.</p>
</div>
</div>
</section>
<section id ="emotion-rate" class = "container">
<div class = "row">
<div class = "col-sm-6 explain">
<div class ="font-weight-bold">
<h3>Emotion Rating</h3>
<p> <i>on a scale from 0 (no people feel the emotion) to 1 (100% of people feel the emotion)</i></p>
<p> Considering all Styles and Categories, <span style="color:#53da18;">Happiness, Trust, Humility</span> and <span style="color:#53da18;">Optimism</span> are the most common <span style="color:#53da18;">Positive</span> emotions people feel about arts. <span style="color:#ff9900;">Fear</span> and <span style="color:#ff9900;">Sadness</span> are the most commonly evoked <span style="color:#ff9900;">Negative</span> emotions. <span style="color:#0b5394;">Surprise</span> and <span style="color:#0b5394;">Anticipation</span> are the most commonly aroused <span style="color:#0b5394;">Other or Mixed emotions</span>. </p>
</div>
</div>
<div class = "col-sm-6">
<img class ="portrait" src = "images/emotion_type_meanScore@2x.png" style="max-width: 100%;max-height: 100%; width: auto; height: auto;">
</div>
</section>
<section id = "corralation" class = "container">
<div class = "row">
<h2>What is the relation between the evoked emotions and people's preference?</h2>
<div class = "col-sm-6">
<img class ="portrait" src = "images/emotionByType.png" style="margin-top: 80px;">
</div>
<div class = "col-sm-6 explain">
<p>Is there any relationship between the degree people like an art Style and the type and degree of Emotions that art Style evokes? <b>Very likely! </b> <b> People tend to like arts evoking strong <span style="color:#53da18;">Positive</span> emotions more.</b></p>
<p><span style="color:#aa7942;">Renaissance</span> and <span style="color:#778899;">Post Renaissance Arts</span> are the two art Styles people like most. They both evoke the strongest <span style="color:#53da18;">Positive</span> emotions and weakest <span style="color:#0b5394;">Other or Mixed</span> emotions. The <span style="color:#ff9900;">Negative</span> emotions they evoke are also relatively strong compared to the emotions evoked by <span style="color:#ba55d3;">Modern</span> and <span style="color:#ff0000;">Contemporary Arts</span>. </p>
<p><span style="color:#ff0000;">Contemporary</span> Art is the art Style people dislike. The emotions it arouses tend to be of a lower degree. The strongest emotion type it evokes is <span style="color:#0b5394;">Other or Mixed</span> and the weakest emotion type it evokes is <span style="color:#53da18;">Positive</span> and <span style="color:#ff9900;">Negative</span>, a pattern opposite to <span style="color:#aa7942;">Renaissance</span> and <span style="color:#778899;">Post Renaissance Arts</span>. </p>
<p>People tend to like <span style="color:#ba55d3;">Modern Art</span>, though to a much lower degree than <span style="color:#aa7942;">Renaissance</span> and <span style="color:#778899;">Post Renaissance Arts</span>. <span style="color:#ba55d3;">Modern Art</span> evokes less strong emotions on average, though it still evokes stronger <span style="color:#53da18;">Positive</span> emotions than <span style="color:#0b5394;">Other or Mixed</span> and <span style="color:#ff9900;">Negative</span>.</p>
</div>
</div>
</section>
<div class="container">
<h3>Style details</h3>
</div>
<section id="category">
<div class="container">
<div class = "row">
<div class="imgcard col-sm-3" onclick="{location.href='detail.html'}">
<img src="images/r.png" style="width:100%">
<div class="container">
<p>Renaissance Art</p>
</div>
</div>
<div class="imgcard col-sm-3" onclick="{location.href='detail-pr.html'}">
<img src="images/pr.png" style="width:100%"/>
<div class="container">
<p>Post Renaissance Art</p>
</div>
</div>
<div class="imgcard col-sm-3" onclick="{location.href='detail-m.html'}">
<img src="images/m.jpeg" style="width:100%">
<div class="container">
<p>Modern Art</p>
</div>
</div>
<div class="imgcard col-sm-3" onclick="{location.href='detail-c.html'}">
<img src="images/c.png" style="width:100%"/>
<div class="container">
<p>Contemporary Art</p>
</div>
</div>
</div>
</div>
</section>
<div id="gotop">
<div class="arrow"></div>
<div class="stick"></div>
</div>
<footer class = "container" >
<div class = "row" >
<p>© 2019 INFO 5602 Group 6</p>
</div>
</footer>
<script src="http://cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min.js"></script>
<script>
$(function(){
$(window).scroll(function(){
var scrollt = document.documentElement.scrollTop + document.body.scrollTop;
if( scrollt >600 ){
$("#gotop").fadeIn(400);
}else{
$("#gotop").stop().fadeOut(400);
}
});
$("#gotop").click(function(){
$("html,body").animate({scrollTop:"0px"},200);
});
});
</script>
</body>
</html>