-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
304 lines (260 loc) · 15.1 KB
/
index.html
File metadata and controls
304 lines (260 loc) · 15.1 KB
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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Villa La Rotonda</title>
<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="stylesheets/bootstrap.css">
<link rel="stylesheet" href="stylesheets/bootstrap-responsive.css">
<link rel="stylesheet" href="stylesheets/bootstrap-responsive.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="javascripts/main.js"></script>
<script src="javascripts/bootstrap.js"></script>
<script src="javascripts/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Villa La Rotonda</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="https://github.com/cvdlab-cg/266867/blob/master/final-project/villa_rotonda.js" ><img src="images/code.png" alt=""> See the code</a></li><li class="divider-vertical"></li>
<li><a href="https://github.com/cvdlab-cg/266867/tarball/master" ><img src="images/application-x-tar.png" alt=""> Download</a></li>
<li class="divider-vertical"></li>
<li><a href="https://github.com/faber13" ><img src="images/github-logo.png" alt=""> Follow me on Github</a></li></ul>
<ul class="nav">
<li class="active"><a href="#">by Fabrizio Castelli</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</head>
<div class="hero-unit">
<div class ="container"></br>
<div class ="row">
<div class ="span4">
<img id ="large" src="images/Introduzione.JPG" height="460" width="270" align ="left"/>
</div>
<div class ="span8 pull-right">
<h1>Villa La Rotonda</h1>
<h2><small>Villa La Rotonda is a Renaissance villa just outside Vicenza, on the north of Italy, built in 1519 and designed by Andrea Palladio.</small></h2>
</div>
</div>
</div>
</div>
</br> </br></br>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav ">
<ul class="nav nav-list">
<li class="nav-header">Legend</li>
<li class="active"><a href="#Introduction">
<img src="images/icons/glyphicons_303_temple_islam.png" height="13" width="9"/>
Introduction</a></li>
<li><a href="#History">
<img src="images/icons/glyphicons_071_book.png" height="13" width="9"/>
History</a></li>
<li ><a href="#project">
<img src="images/icons/glyphicons_030_pencil.png" height="13" width="9"/>
My Project</a></li>
<li ><a href="#Slideshow">
<img src="images/icons/glyphicons_011_camera.png" height="13" width="9"/>
Slideshow</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span7">
<h1 id ="Introduction"><img src="images/icons/glyphicons_303_temple_islam.png" height="40" width="28"/> Introduction</h1> <hr>
<p>Villa La Rotonda is a Renaissance villa just outside Vicenza, northern Italy, designed by Andrea Palladio. The proper name is Villa Almerico Capra, but it is also known as La Rotonda, Villa Rotonda, Villa Capra and Villa Almerico. The name "Capra" derives from the Capra brothers, who completed the building after it was ceded to them in 1591. Like other works by Palladio in Vicenza and the surrounding area, the building is conserved as part of the World Heritage Site "City of Vicenza and the Palladian Villas of the Veneto".><br />In 1565 a priest, Paolo Almerico, on his retirement from the Vatican (as referendario apostolico of Pope Pius IV and afterwards Pius V), decided to return to his home town of Vicenza in the Venetian countryside and build a country house. <br />This house, later known as 'La Rotonda', was to be one of Palladio's best-known legacies to the architectural world. Villa Capra may have inspired a thousand subsequent buildings, but the villa was itself inspired by the Pantheon in Rome.</p>
<img src="images/palladio-agrippa.jpg" class="img-polaroid"/><br /><br /><br />
<h1 id ="History"><img src="images/icons/glyphicons_071_book.png" height="40" width="28"/> History</h1>
<hr>
<p>The opportunity to realize this vision came to Palladio from a special person, Paolo Almerico
(Vicenza 1514–1589), who was not only a papal prelate but also an intellectual, a member of a
refined cultural circle of that time, a poet and a man of letters, who wanted to build for himself a
‘villa’, just out of Vicenza, for his retirement, after a career in Rome at the Papal Court.<br />
Works started in 1567 and were quickly completed, because by 1571 [1569 according to
Beltramini] Paolo Almerico was already living at La Rotonda. After his death, the villa passed to
Almerico’s son Virginio Almerico who then sold it to Odorico and Mario Capra in 1591. Since
1911 La Rotonda has been owned by the Valmarana family of Venezia.<br />
Palladio planned 20 villas but only two of them, La Rotonda and Villa Trissino di Meledo (that
would never be built) have the peculiar plan that sets them apart: the central round hall with the
domed vault, inscribed in a square, with four facades, each with a projecting portico and steps, 6
Ionic columns.<br />
Andrea Palladio intended to transfer into civil architecture a ‘sacred’ inspiration, using a plan
already present in religious architecture (such as S. Pietro in Montorio temple in Rome); this idea
comes out of his well known archaeological studies and is suggested by many scholars to be derived
from the Roman temples. The particular site, the special personality of Paolo Almerico and
Palladio’s meditations on ancient art came together in this unique opportunity for Palladio, who was
finally able to realise his vision of a villa-temple.<br />
The decoration of La Rotonda started at the end of 16th century. Lorenzo Rubini, who is named by
Palladio in his book, is thought to have been responsible for the statues on the stairs, whilst
Giambattista Albanese those on the porticos and roof. <br />At the beginning of the 17th century,
Oddorico Capra commissioned the frescos and stuccoes inside the dome, in the four corners rooms
and in the little rooms. The frescos are thought to have been completed by Giambattista and
Alessandro Maganza, the stuccoes by Agostino Rubini. The major rooms are enriched with lavish
marble fireplaces and beautiful stucco decorated cowls, thought to be by Agostino Rubini and
Ottaviano Ridolfi. <br />The floors are made in precious venetian battuto, a special stucco made with a
mix of lime and coloured marble grit, whilst in other rooms the floor are laid with hexagonal tiles.
The last decorations were made at the beginning of 18th century, when the French painter Louis
Dorigny painted the frescos of the hall and the corridors for the wedding of Marzio and Cecilia
Capra. The villa was only lightly modified in the following centuries: between 1725 and 1740, the
third floor was transformed and divided by Muttoni; until 1750 the attic area was not habitable.
The current state of the villa dates to 1976, at which time the Valmarana family set in place an
ongoing program of maintenance, restoration and preservation. The grounds of villa have been open
to the public from 1980, and from 1986 access was provided to the interior of the building as well.</p>
<img src="images/Foto1.jpg " class="img-polaroid"/><br /><br /><br /><br />
<h1 id ="project"><img src="images/icons/glyphicons_030_pencil.png" height="40" width="28"/>
My Project</h1> <hr>
<p>The project is written in Javascript and using functions written in plasm for 3D modeling of the villa. The villa has been substantially broken down into 3 different objects, ie the outbuildings, the stairway entrance and the villa. <br>For the implementation, the project has been divided into 3 pieces:
<ol><li>Porticus with colonnade ;</li>
<li>Walls ;</li>
<li>Roof ;</li></ol><br></p>
<h1><small>The porticus with colonnade</small></h1><hr>
<p>This piece of project has been subdivided into some pieces: the stairs, the colonnade and the porticus. The stairs have been designed with SIMPLEX GRID method; the porticus has been realized with BEZIER, HERMITE and NUBS curves.<br>
This is how i realize the column:<br>
<img src="images/villa/colonna.png" class="img-polaroid"/><br>
The code:
<pre><code>
var column = function(r,h,off_x,off_y,off_z,closer){
var columnpoint = [[r+0.1,0,0],[r+0.08,0,h*0.04],[r+0.06,0,h*0.08],[r+0.03,0,h*0.12],
[r,0,h*0.15],[r-0.05,0,h]]
var n = generate_knots(columnpoint)
var curvebasement = NUBS(S0)(2)(n)(columnpoint);
var curvebasementRS = ROTATIONAL_SURFACE(curvebasement);
var columna = MAP(curvebasementRS)(dominioRot);
var columna1 = T([0,1,2])([off_x,off_y,off_z])(STRUCT([columna]))
if(closer ==0)
return columna1;
else {
var closed1 = DISK(r)()
var closed1_t = T([0,1,2])([off_x,off_y,off_z])(closed1)
var closed_2_t = T([2])([h])(closed1_t)
var cylinderClosed = STRUCT([columna1,closed1_t,closed_2_t])
return cylinderClosed;
}
};
</code></pre><br>
This is the porticus<br>
<img src="images/villa/porticato_lato.jpg" class="img-polaroid"/><br>
The code:
<pre><code>
var p_tetto_avanti1 = [[8,9.4,15.2],[8,15.4,18.5],[0,0,0],[0,0,0]]
var p_tetto_avanti2 = [[8,15.4,18.5],[8,21.4,15.2],[0,0,0],[0,0,0]]
var p_tetto_avanti21 = [[8,9.9,15.2],[8,15.4,18],[0,0,0],[0,0,0]]
var p_tetto_avanti22 = [[8,15.4,18],[8,20.9,15.2],[0,0,0],[0,0,0]]
...
var h_basso_tetto1 = CUBIC_HERMITE(S1)([c_basso_tetto,c_tetto3_d,[0,0,0],[0,0,0]])
var h_basso_tetto2 = CUBIC_HERMITE(S1)([c_basso_tetto,c_tetto4_d,[0,0,0],[0,0,0]])
var horiz_tettus1 = CUBIC_HERMITE(S1)([c_tetto,c_tetto_d,[0,0,0],[0,0,0]])
var horiz_tettus2 = CUBIC_HERMITE(S1)([c_tetto2,c_tetto2_d,[0,0,0],[0,0,0]])
...
var tetto1 = COLOR(marrone_tetto)(MAP(tetus)(domain2D))
var tetto2 = COLOR(marrone_tetto)(MAP(tetus2)(domain2D))
var tetto1_d = COLOR(marrone_tetto)(MAP(tetus_d)(domain2D))
var tetto2_d = COLOR(marrone_tetto)(MAP(tetus2_d)(domain2D))
...
var p_arco = [[11,11.4,11],[11.5,11.4,11.5],[12,11.4,12],
[12.5,11.4,12],[13,11.4,11.5],[13.4,11.4,11]]
var p_arco2 = [[11,10,11],[11.5,10,11.5],[12,10,12],
[12.5,10,12],[13,10,11.5],[13.4,10,11]]
var k_arco = generate_knots(p_arco);
var c_arco = NUBS(S0)(2)(k_arco)(p_arco)
var c_arco2 = NUBS(S0)(2)(k_arco)(p_arco2)
var archi_under_be = BEZIER(S1)([c_arco,c_arco2]) // curva sotto
var control1 = [[11,10,15],[13.4,10,15],[0,0,0],[0,0,0]]; // punti superiori
var control2 = [[11,11.4,15],[13.4,11.4,15],[0,0,0],[0,0,0]];
var c11 = CUBIC_HERMITE(S0)(control1);
var c12 = CUBIC_HERMITE(S0)(control2);
var s1 = BEZIER(S1)([c11,c_arco2])
var s2 = BEZIER(S1)([c12,c_arco])
var s3 = BEZIER(S1)([c11,c12])
</code></pre><br>
Assembled: <br>
<img src="images/villa/porticato.png" class="img-polaroid"/><br>
</p><br>
<h1><small>The roof</small></h1><hr>
It has been realized using NUBS and ROTATIONAL SURFACE.
<img src="images/villa/tetto.png" class="img-polaroid"/><br/>
The code : <br>
<pre><code>
var puntiCupola_1 = [[8.5,0,0],[8.5,0,1],[8.5,0,1.7]]
var knots_cupola = generate_knots(puntiCupola_1); // Vale per tutte e 19
var curva_cupola_1 = NUBS(S0)(2)(knots_cupola)(puntiCupola_1);
var curvaRotSurf_1 = ROTATIONAL_SURFACE(curva_cupola_1);
var curvaMapRotSurf_1 = MAP(curvaRotSurf_1)(dominioRot);
var puntiCupola_2 = [[8.5,0,1.7],[8,0,1.85],[7.5,0,2]]
var curva_cupola_2 = NUBS(S0)(2)(knots_cupola)(puntiCupola_2);
var curvaRotSurf_2 = ROTATIONAL_SURFACE(curva_cupola_2);
var curvaMapRotSurf_2 = MAP(curvaRotSurf_2)(dominioRot);
var puntiCupola_3 = [[7.5,0,2],[7.5,0,2.12],[7.5,0,2.24]]
var curva_cupola_3 = NUBS(S0)(2)(knots_cupola)(puntiCupola_3);
var curvaRotSurf_3 = ROTATIONAL_SURFACE(curva_cupola_3);
var curvaMapRotSurf_3 = MAP(curvaRotSurf_3)(dominioRot);
...
</code></pre><br>
<br /><br />
<h1 id ="Slideshow"><img src="images/icons/glyphicons_011_camera.png" height="40" width="28"/> Slideshow</h1> <hr>
<div class ="row">
<div class ="span6">
<div id="myCarousel" class="carousel slide">
<script type="text/javascript">
$('.carousel').carousel()
</script>
<!-- Carousel items -->
<div class="carousel-inner ">
<div class="item active ">
<img src="images/villa/villaMia12.jpeg" alt="" class ="img-polaroid" >
<div class="carousel-caption">
<p>Front view</p>
</div></div>
<div class="item ">
<img src="images/villa/villa_storta.jpg" alt="" class ="img-polaroid" >
<div class="carousel-caption">
<p>True front view</p>
</div></div>
<div class="item ">
<img src="images/villa/Laterale.png" alt="" class ="img-polaroid" >
<div class="carousel-caption">
<p>Lateral view</p>
</div></div>
<div class="item ">
<img src="images/villa/villa_fianco.jpg" alt="" class ="img-polaroid" >
<div class="carousel-caption">
<p>True lateral view</p>
</div></div>
<div class="item ">
<img src="images/villa/VillaDietro.png" alt="" class ="img-polaroid" >
<div class="carousel-caption">
<p>Another view</p>
</div></div>
<div class="item ">
<img src="images/villa/Villa_Alto.png" alt="" class ="img-polaroid" >
<div class="carousel-caption">
<p>From the sky</p>
</div></div>
<div class="item ">
<img src="images/villa/Villa_A.png" alt="" class ="img-polaroid" >
<div class="carousel-caption">
<p>Last view</p>
</div></div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div><!-- Carousel nav -->
</div><!-- Row-fluid nav -->
<hr>
<footer>
<p>© Company 2012 </p>
</footer>
</div>