forked from cal-cs184/hw-webpage
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c98a3ed
commit a119fbc
Showing
8 changed files
with
1 addition
and
7 deletions.
There are no files selected for viewing
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1 @@ | ||
| <html> | ||
| <head> | ||
| </head> | ||
| <body> | ||
| Homework 1 index.html here | ||
| </body> | ||
| </html> | ||
| <html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">ul.lst-kix_u1e16bq4tfk-7{list-style-type:none}ul.lst-kix_u1e16bq4tfk-8{list-style-type:none}.lst-kix_u1e16bq4tfk-3>li:before{content:"\0025cf "}.lst-kix_u1e16bq4tfk-2>li:before{content:"\0025a0 "}.lst-kix_u1e16bq4tfk-4>li:before{content:"\0025cb "}.lst-kix_u1e16bq4tfk-1>li:before{content:"\0025cb "}.lst-kix_u1e16bq4tfk-5>li:before{content:"\0025a0 "}ul.lst-kix_u1e16bq4tfk-5{list-style-type:none}ul.lst-kix_u1e16bq4tfk-6{list-style-type:none}ul.lst-kix_u1e16bq4tfk-3{list-style-type:none}.lst-kix_u1e16bq4tfk-0>li:before{content:"\0025cf "}ul.lst-kix_u1e16bq4tfk-4{list-style-type:none}.lst-kix_u1e16bq4tfk-6>li:before{content:"\0025cf "}.lst-kix_u1e16bq4tfk-8>li:before{content:"\0025a0 "}ul.lst-kix_u1e16bq4tfk-1{list-style-type:none}ul.lst-kix_u1e16bq4tfk-2{list-style-type:none}ul.lst-kix_u1e16bq4tfk-0{list-style-type:none}.lst-kix_u1e16bq4tfk-7>li:before{content:"\0025cb "}ol{margin:0;padding:0}table td,table th{padding:0}.c4{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:12pt;font-family:"Times New Roman";font-style:normal}.c2{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:12pt;font-family:"Times New Roman";font-style:normal}.c1{padding-top:14pt;padding-bottom:0pt;line-height:2.0;orphans:2;widows:2;text-align:left}.c0{padding-top:14pt;padding-bottom:0pt;line-height:2.0;orphans:2;widows:2;text-align:center}.c3{background-color:#ffffff;max-width:468pt;padding:72pt 72pt 72pt 72pt}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c3 doc-content"><p class="c0"><span class="c4">CS 184/284A: Computer Graphics and Imaging, Spring 2024</span></p><p class="c0"><span class="c4">Homework 1: Rasterizer</span></p><p class="c0"><span class="c4">Dylan Rosario</span></p><p class="c0"><span class="c2">Overview</span></p><p class="c1"><span class="c2"> For this assignment, the goal is to provide an introduction to rasterization of images. Each layer of this project builds upon itself from being able to rasterize a single color triangle to antialiasing with supersampling, and eventually moving on to layered texture mapping. This will all result in a clearer image display while using a variety of methods. </span></p><p class="c0"><span class="c2">Section I: Rasterization</span></p><p class="c0"><span class="c2">Part 1: Rasterizing single-color triangles</span></p><p class="c1"><span class="c2"> The first step I made to rasterize a triangle is to define the bounding box of which I would be sampling. When given the three coordinates for the vertices of a triangle, I found the minimum and maximum x and y value. These values will define this bounding box from which I sample each pixel found within. By taking the cross product of the edges of the triangle, I can determine whether or not a point lies within the triangle. If it does, then that pixel is filled in with the appropriate color.</span></p><p class="c0"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 413.50px; height: 312.11px;"><img alt="" src="images/image1.png" style="width: 413.50px; height: 312.11px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c0"><span class="c2">Part 2: Antialiasing triangles</span></p><p class="c1"><span class="c2"> Supersampling is the process of considering a number of sub pixels within a pixel. Now, a pixel is not only defined by a spot in the center of it, but rather a number of points spread throughout that pixel. Then, the final color of that pixel will be a weighted average of the colors determined for each sub pixel present. This is extremely helpful for antialiasing, as it will smooth out the jaggedness seen on diagonals or curved edges. To implement this in my program, I essentially ran another set of nested for-loops within the previous structure used to traverse the bounding box. The number of iterations of this second set of loops is determined by the supersampling rate.</span></p><p class="c0"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 323.12px; height: 244.50px;"><img alt="" src="images/image1.png" style="width: 323.12px; height: 244.50px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c0"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 324.58px; height: 242.03px;"><img alt="" src="images/image3.png" style="width: 324.58px; height: 242.03px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c0"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 326.69px; height: 242.50px;"><img alt="" src="images/image4.png" style="width: 326.69px; height: 242.50px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1"><span class="c2"> The results here occur due to the number of samples being taken. Supersampling will consider smaller points to create more of a blend of colors that form a blurry effect and reduce the jagged nature of the edges.</span></p><p class="c0"><span class="c2">Part 3: Transforms</span></p><p class="c1"><span class="c2"> My robot here is simply standing with his arms sticking straight out. The robot is replicating the image of a person attempting to balance. It’s able to be formed from a series of translations, scales, and rotations of available polygons.</span></p><p class="c0"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 419.50px; height: 313.95px;"><img alt="" src="images/image5.png" style="width: 419.50px; height: 313.95px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c0"><span class="c2">Section II: Sampling</span></p><p class="c0"><span class="c2">Part 4: Barycentric coordinates</span></p><p class="c1"><span class="c2"> Barycentric coordinates provide a coordinate system where the coordinates of any point in space are referenced by the three vertices of a triangle. This barycentric system produces three values: alpha, beta, and gamma upon which to refer to. These coordinates allow us to simply check whether a point is within the triangle, and most importantly the exact position in space of this point. Essentially, each variable defines how close the point is to vertex A, B, or C.</span></p><p class="c0"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 504.92px; height: 379.50px;"><img alt="" src="images/image2.png" style="width: 504.92px; height: 379.50px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c0"><span class="c2">Part 5: “Pixel sampling” for texture mapping</span></p><p class="c1"><span class="c2"> Pixel sampling is the process of sampling specific pixels to then check a texture map at that point. That texture map includes a specific color for that pixel. In this part, there were two different pixel sampling methods used: nearest pixel and bilinear sampling. To put it simply, nearest pixel sampling only considers the nearest pixel to a point, whereas bilinear will consider the 4 closest pixels to a point. Bilinear sampling will then use the average colors of these 4 points to output a final color. To implement these sampling methods, I built upon my previous work with barycentric coordinates. These coordinates are essential for being able to scale the (u, v) values associated with the texture map, and eventually determining the final color for a pixel.</span></p><p class="c1"><span class="c2"> Unfortunately, I was unable to output an image demonstrating the effects of these sampling methods due to bugs with the calculation of the uv coordinates.</span></p><p class="c0"><span class="c2">Part 6: “Level sampling” with mipmaps for texture mapping</span></p><p class="c1"><span class="c2"> Level sampling is similar to the process of pixel sampling in part 5, but now there are multiple levels with different resolution levels. Pixel sampling at any level will lead to a slightly different image. There is not any specific level that is deemed ideal, since the results will vary for any two images. </span></p></body></html> |