Skip to content

Commit c3ab811

Browse files
StreamSongStreamSong
authored
Add files via upload
1 parent 09c3122 commit c3ab811

14 files changed

Lines changed: 205 additions & 105 deletions

File tree

‎1/index.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Project 1 - Becoming Friends with Your Camera</title>
5+
<style>
6+
body {
7+
font-family: Arial, sans-serif;
8+
margin: 40px;
9+
line-height: 1.6;
10+
}
11+
h1, h3 {
12+
font-family: Georgia, serif;
13+
}
14+
h1 {
15+
text-align: center;
16+
font-size: 28px;
17+
margin-bottom: 5px;
18+
}
19+
h2 {
20+
text-align: center;
21+
font-size: 20px;
22+
color: #800000;
23+
margin-top: 0;
24+
}
25+
h3 {
26+
margin-top: 30px;
27+
font-size: 18px;
28+
text-transform: uppercase;
29+
}
30+
h4{
31+
text-align: center;
32+
font-size: 15px;
33+
margin-top: 0;
34+
}
35+
.section {
36+
margin-top: 20px;
37+
}
38+
img {
39+
max-width: 600px;
40+
margin: 5px;
41+
border-radius: 6px;
42+
}
43+
.img-row {
44+
display: flex;
45+
flex-wrap: wrap;
46+
justify-content: center;
47+
}
48+
.caption {
49+
text-align: center;
50+
font-size: 14px;
51+
margin-top: 4px;
52+
}
53+
.back {
54+
margin-top: 40px;
55+
text-align: center;
56+
}
57+
.back a {
58+
font-weight: bold;
59+
text-decoration: none;
60+
color: #0044cc;
61+
}
62+
</style>
63+
</head>
64+
<body>
65+
<!-- 页面标题 -->
66+
<h1>Programming Project #1</h1>
67+
<h2>CS180: Intro to Computer Vision and Computational Photography</h2>
68+
<h4>Student: Ruizhe Song(Rachel) 3042013172</h4>
69+
70+
71+
<!-- 概述部分 -->
72+
<div class="section">
73+
<h3>Overview</h3>
74+
<p>
75+
Welcome to Rachel Song's imitator website of CS180/280! Here's my project 0. Does it look familiar? 🤔
76+
</p>
77+
</div>
78+
79+
<!-- Part 1 -->
80+
<div class="section">
81+
<h3>Part 1: Selfie — The Wrong Way vs. The Right Way</h3>
82+
<p>
83+
Here's 3 selfies of mine. Uploading the selfies is really a huge step for someone socially anxious like me.
84+
The first selfie on the left was shot with a wide angle lens, which shows distortion. That's becuase the distance
85+
between me and my camera is too small. In order to keep my face the same size as the others, the focal length had
86+
to be smaller, thus leading to some sort of "barrel" distortion.
87+
</p>
88+
<div class="img-row">
89+
<div>
90+
<img src="media/selfie.jpg">
91+
<div class="caption">Fig. 1. Selfies at different distances.</div>
92+
</div>
93+
</div>
94+
</div>
95+
96+
<!-- Part 2 -->
97+
<div class="section">
98+
<h3>Part 2: Architectural Perspective Compression</h3>
99+
<p>
100+
In this part, the situation is symmetrical to the Part 1. The fist picture was shot with a telephoto lens, which
101+
makes the architectures larger, however, also falttened.
102+
</p>
103+
<div class="img-row">
104+
<div>
105+
<img src="media/building.jpg">
106+
<div class="caption">Fig. 2. Campus Scene.</div>
107+
</div>
108+
</div>
109+
</div>
110+
111+
<!-- Part 3 -->
112+
<div class="section">
113+
<h3>Part 3: The Dolly Zoom</h3>
114+
<p>
115+
I choose my Cal cap as my model, and took 9 pictures of it at different distance.
116+
The GIF presents that the cap remains the same size while the focal length varies,
117+
forming a dolly zoom.
118+
</p>
119+
<div class="img-row">
120+
<div>
121+
<img src="media/dollyzoom.gif">
122+
<div class="caption">Fig. 3. Dolly Zoom Effect</div>
123+
</div>
124+
</div>
125+
</div>
126+
127+
<!-- 返回主页 -->
128+
<div class="back">
129+
<a href="../index.html">← Back to Home</a>
130+
</div>
131+
</body>
132+
</html>

‎1/media/building.jpg‎

128 KB
Loading

‎1/media/dollyzoom.gif‎

776 KB
Loading

‎1/media/pic1.jpg‎

38.4 KB
Loading

‎1/media/pic2.jpg‎

34.9 KB
Loading

‎1/media/pic3.jpg‎

36.1 KB
Loading

‎1/media/pic4.jpg‎

36.8 KB
Loading

‎1/media/pic5.jpg‎

37.1 KB
Loading

‎1/media/pic6.jpg‎

46.8 KB
Loading

‎1/media/pic7.jpg‎

51.9 KB
Loading

0 commit comments

Comments
 (0)