Started HW 4 writeup

cal-cs184-student · Apr 1, 2024 · 8dbb823 · 8dbb823
1 parent ce00a0b
commit 8dbb823
Show file tree

Hide file tree

Showing 12 changed files with 1,438 additions and 71 deletions.
diff --git a/assets/CS-184-Pathtracer-Writeup.pdf b/assets/CS-184-Pathtracer-Writeup.pdf
diff --git a/assets/cloth-sim.png b/assets/cloth-sim.png
diff --git a/hw3/index.html b/hw3/index.html
diff --git a/hw4/CS 184 Mesh Editor.html b/hw4/CS 184 Mesh Editor.html
diff --git a/hw4/Images/Task1/sp24-clothsim-task1-all.png b/hw4/Images/Task1/sp24-clothsim-task1-all.png
diff --git a/hw4/Images/Task1/sp24-clothsim-task1-grid1.png b/hw4/Images/Task1/sp24-clothsim-task1-grid1.png
diff --git a/hw4/Images/Task1/sp24-clothsim-task1-grid2.png b/hw4/Images/Task1/sp24-clothsim-task1-grid2.png
diff --git a/hw4/Images/Task1/sp24-clothsim-task1-no-shearing.png b/hw4/Images/Task1/sp24-clothsim-task1-no-shearing.png
diff --git a/hw4/Images/Task1/sp24-clothsim-task1-only-shearing.png b/hw4/Images/Task1/sp24-clothsim-task1-only-shearing.png
diff --git a/hw4/Images/Task2/sp24-clothsim-pinned4-normals.png b/hw4/Images/Task2/sp24-clothsim-pinned4-normals.png
diff --git a/hw4/Images/Task2/sp24-clothsim-pinned4-wireframe.png b/hw4/Images/Task2/sp24-clothsim-pinned4-wireframe.png
diff --git a/hw4/index.html b/hw4/index.html
@@ -1,7 +1,231 @@
-<html>
-	<head>
-	</head>
-	<body>
-		Homework 4 index.html here
-	</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+	<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+	<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+	<style>
+		body {
+			padding: 100px;
+			width: 1000px;
+			margin: auto;
+			text-align: left;
+			font-weight: 300;
+			font-family: 'Open Sans', sans-serif;
+			color: #121212;
+			background-color: #f6ead7;
+			cursor: url(https://cal-cs184-student.github.io/hw-webpages-sp24-ianhdong/assets/cloth-sim.png);
+		}
+
+		.bounding-box {
+			border: 2px solid #ccc;
+			padding: 20px;
+			border-radius: 10px;
+			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
+			/* Updated box-shadow */
+			max-width: 1000px;
+			margin: 0 auto;
+			background-color: #ffffff;
+		}
+
+		h1,
+		h2,
+		h3,
+		h4 {
+			font-family: 'Source Sans Pro', sans-serif;
+		}
+
+		.center {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100vh;
+			/* This centers the image vertically */
+		}
+
+		table {
+			width: 100%;
+
+		}
+
+		th,
+		td {
+			border: 3px solid black;
+			padding: 10px;
+			text-align: center;
+			vertical-align: middle;
+		}
+
+		th {
+			background-color: #f2f2f2;
+		}
+
+		hr {
+			border: 0;
+			height: 1px;
+			background-color: black;
+			margin: 20px 0;
+			/* Adjust margin as needed */
+		}
+
+		img {
+			max-width: 100%;
+			height: auto;
+			display: block;
+			margin: 0 auto;
+		}
+
+		figcaption {
+			margin-top: 5px;
+			/* Add some margin above captions */
+		}
+
+		.highlighter-rouge {
+			color: #b00505;
+			background-color: rgb(247, 222, 222);
+			border-radius: 4px;
+			padding: 3px;
+		}
+	</style>
+	<title>CS 184 Mesh Edit</title>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<link href="https://fonts.googleapis.com/css?family=Open+Sans|Source+Sans+Pro" rel="stylesheet">
+
+	<script>
+		MathJax = {
+			tex: {
+				inlineMath: [['$', '$'], ['\\(', '\\)']]
+			}
+		};
+	</script>
+	<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
+	</script>
+
+</head>
+
+
+<body>
+
+	<h1 align="middle">CS 184: Computer Graphics and Imaging, Spring 2024</h1>
+	<h1 align="middle"><a href="https://cal-cs184-student.github.io/hw-webpages-sp24-ianhdong/hw4/index.html">Homework
+			4: Cloth Simulation</a></h1>
+	<h2 align="middle">Ian Dong</h2>
+
+
+	<div class="bounding-box">
+		<h2 align="middle">Overview</h2>
+		<!-- <p> -->
+		In this homework, I explored the physics behind cloth simulation by implementing a mass-spring system to
+		represent the cloth. I used Verlet integration to compute each of the <code
+			class="highlighter-rouge">PointMass</code> objects' new position to simulate the cloth's movement. Then, I
+		implemented a way to detect cloth collision with outside objects as well as resolving self-collisions. Finally,
+		I added wind forces to the cloth to simulate the cloth's movement in the wind.
+		<!-- </p> -->
+		<br>
+	</div>
+
+	<br><br>
+
+	<h2 align="middle">Section I: Masses and Springs</h2>
+	<div class="bounding-box">
+		<h3>
+			<!-- <b> -->
+			Explain how you implemented the mass-spring system to represent the cloth.
+			<!-- </b> -->
+		</h3>
+		<p>
+			Because the cloth's springs needed to be in row major order, I first looped through the number of height
+			points as this represented each individual row before iterating through each of the width points to create
+			the required springs. I calculated the <code class="highlighter-rouge">x</code> position in order to fit
+			<code class="highlighter-rouge">num_width_points</code> within the cloth's width. Depending on whether the
+			cloth was horizontal or vertical, I made sure to set <code class="highlighter-rouge">y</code> to either be 1
+			or the correctly spaced out position fit the necessary number of width points and set <code
+				class="highlighter-rouge">z</code> to either the correctly spaced out position fit the necessary number
+			of width points or the random offset. Before inserting the <code class="highlighter-rouge">PointMass</code>,
+			I checked to see the object should be pinned or not. Finally, I iterated through the two-dimensional grid
+			positions and converted them into the <code class="highlighter-rouge">PointMass</code> one-dimensional
+			vector position and checked for boundary conditions before creating the <code
+				class="highlighter-rouge">STRUCTURAL</code>, <code class="highlighter-rouge">SHEARING</code>, and <code
+				class="highlighter-rouge">BENDING</code> springs as listed in the homework description.
+		</p>
+	</div>
+	<br>
+	<div class="bounding-box">
+		<h3>
+			<!-- <b> -->
+			Take some screenshots of <code class="highlighter-rouge">scene/pinned2.json</code> from a viewing angle
+			where you can clearly see the cloth wireframe to show the structure of your point masses and springs.
+			<!-- </b> -->
+		</h3>
+		Here are some screenshots of the cloth wireframe from <code class="highlighter-rouge">scene/pinned2.json</code>:
+
+		<div align="middle">
+			<table style="width:100%">
+				<tr align="center">
+					<td>
+						<img src="./Images/Task1/sp24-clothsim-task1-grid1.png" align="middle" width="400px" />
+						<figcaption><code class="highlighter-rouge">pinned2.json</code> close up view</figcaption>
+					</td>
+					<td>
+						<img src="./Images/Task1/sp24-clothsim-task1-grid2.png" align="middle" width="400px" />
+						<figcaption><code class="highlighter-rouge">pinned2.json</code> above view</figcaption>
+					</td>
+				</tr>
+			</table>
+		</div>
+	</div>
+	<br>
+	<div class="bounding-box">
+		<h3>
+			Show us what the wireframe looks like (1) without any shearing constraints, (2) with only shearing
+			constraints, and (3) with all constraints.
+		</h3>
+		<div align="middle">
+			<table style="width:100%">
+				<tr align="center">
+					<td>
+						<img src="./Images/Task1/sp24-clothsim-task1-no-shearing.png" align="middle" />
+						<figcaption><code class="highlighter-rouge">pinned2.json</code> no shearing constraints
+						</figcaption>
+					</td>
+					<td>
+						<img src="./Images/Task1/sp24-clothsim-task1-only-shearing.png" align="middle" />
+						<figcaption><code class="highlighter-rouge">pinned2.json</code> only shearing constraints
+						</figcaption>
+					</td>
+					<td>
+						<img src="./Images/Task1/sp24-clothsim-task1-all.png" align="middle" />
+						<figcaption><code class="highlighter-rouge">pinned2.json</code> all constraints</figcaption>
+					</td>
+				</tr>
+			</table>
+		</div>
+	</div>
+	<hr>
+	<br>
+	<h2 align="middle">Section II: Simulation via Numerical Integration</h2>
+	<div class="bounding-box">
+		<h3>
+			Show us a screenshot of your shaded cloth from scene/pinned4.json in its final resting state! If you choose to use different parameters than the default ones, please list them.
+		</h3>
+		Here are the screenshots of the shaded cloth from <code class="highlighter-rouge">scene/pinned4.json</code> in its final resting state for both the wireframe and shaded versions:
+		<div align="middle">
+			<table style="width:100%">
+				<tr align="center">
+					<td>
+						<img src="./Images/Task2/sp24-clothsim-pinned4-wireframe.png" align="middle" />
+						<figcaption><code class="highlighter-rouge">pinned4.json</code> wireframe
+						</figcaption>
+					</td>
+					<td>
+						<img src="./Images/Task2/sp24-clothsim-pinned4-normals.png" align="middle" />
+						<figcaption><code class="highlighter-rouge">pinned4.json</code> normals
+						</figcaption>
+					</td>
+				</tr>
+			</table>
+		</div>
+	</div>
+</body>
+
 </html>