added task01

CMakeLists.txt

@@ -2,7 +2,7 @@ cmake_minimum_required(VERSION 3.10)
 
 project(tasks)
 
-# add_subdirectory(task01)
+add_subdirectory(task01)
 # add_subdirectory(task02)
 # add_subdirectory(task03)
 # add_subdirectory(task04)

README.md

@@ -43,7 +43,7 @@ Topics:
 | Day | Topic | Assignment | Slide |
 |:----|:---|:---|:---|
 |(1)<br>Apr. 8| **Introduction**<br>**Rasterization in 2D**, Digital Differential Analyzer |  | [[1]](http://nobuyuki-umetani.com/acg2024s/introduction.pdf), [[4]](http://nobuyuki-umetani.com/acg2024s/digital_image.pdf) |
-|(2)<br>Apr. 15| **Parametric curves / surfaces** <br/>Bézier curve, polynominal | task01 |　|
+|(2)<br>Apr. 15| **Parametric curves / surfaces** <br/>Bézier curve, polynominal | [task01](task01) | [[5]](http://nobuyuki-umetani.com/acg2024s/rasterization_2d.pdf) [[6]](http://nobuyuki-umetani.com/acg2024s/barycentric_coordinates.pdf) |
 |(3)<br>Apr. 22| **Coordinate transfrormation**<br/>Affine, homography transformation | task02 | |
 |(5)<br>May 7| **Graphics Pipeline 1**<br>depth buffer method, shading | task03 | |
 |(4)<br>May 13| **Graphics Pipeline 2**<br>shadow, anti aliasing | task04 | |
@@ -75,7 +75,7 @@ Look at the following document.
 
 | Task ID | Title | Thumbnail |
 |:---|:---|:---|
-| task01 | **Rasterization of lines and polygons**<br>DDA, winding number | <img src="task01/preview.png" width=100px> |
+| [task01](task01) | **Rasterization of lines and polygons**<br>DDA, winding number | <img src="task01/preview.png" width=100px> |
 | task02 | **Rasterization of parametric curves**<br> Quadratic Bézier curve, root of polynominal | <img src="task02/preview.png" width=100px> |
 | task03 | **Perspectively-correct texture mapping**<br>rasterization of triangle, barycentric coordinate | <img src="task03/preview.png" width=100px> |
 | task04 | **Vertex shader practice** <br>Rendering pipeline, mirror reflection, OpenGL | <img src="task04/preview.png" width=100px> |
@@ -101,6 +101,8 @@ Look at the following document.
 - [[3] Git+GitHub](http://nobuyuki-umetani.com/acg2024s/git.pdf)
 - [[4] Digital Image](http://nobuyuki-umetani.com/acg2024s/digital_image.pdf)
 - [[5] Rasterization in 2D](http://nobuyuki-umetani.com/acg2024s/rasterization_2d.pdf)
+- [[6] Barycentric Coordinates](http://nobuyuki-umetani.com/acg2024s/barycentric_coordinates.pdf)
+- [[7] Parametric Curve](http://nobuyuki-umetani.com/acg2024s/parametric_curve.pdf)
 
 
 ## Reading Material

task01/CMakeLists.txt

@@ -0,0 +1,33 @@
+cmake_minimum_required(VERSION 3.10)  # specify the version of cmake
+
+#############################
+# set C++ detail
+enable_language(CXX)  # we are using C++
+set(CMAKE_CXX_STANDARD 17)  # we are using C++ 17
+set(CMAKE_CXX_STANDARD_REQUIRED TRUE)  # we are using STL library
+
+#############################
+# set project name
+
+project(task01)
+
+#############################
+# define macro
+add_definitions(-DPROJECT_SOURCE_DIR="${PROJECT_SOURCE_DIR}")
+
+#############################
+# specifying libraries to use
+
+########################
+# include, build, and link
+
+include_directories(
+    ${PROJECT_SOURCE_DIR}/../external
+)
+
+add_executable(${PROJECT_NAME}
+    main.cpp
+)
+
+target_link_libraries(${PROJECT_NAME}
+)

task01/README.md

@@ -0,0 +1,126 @@
+
+
+# Task01: Rasterization of lines and polygons
+
+**Deadline: April 18st (Thu) at 15:00pm**
+
+
+
+This is the blurred preview of the expected result:
+
+![preview](preview.png)
+
+
+When you execute the program, it will output an PNG image file (`output.png`) replacing the image below. Try making the image below and the image above look similar after doing the assignment.
+
+![output](output.png)
+
+## Problem1: Build and Execute the Program
+
+Follow the instruction below to build and execute the attached code `main.ccp`.
+
+### Set Up Programming Environment 
+
+You need to have **git**, **cmake**, and **C++ compiler** in your computer to complete this assignment. Read the following document to install these. 
+
+[How to Set Up C++ Programming Environment](../doc/setup_env.md)
+
+### Go to Local Repository
+
+if you don't have the local repository (repository on your computer), clone it from the remote repository (repository on the GitHub).
+
+```bash
+$ git clone https://github.com/ACG-2024S/acg-<username>.git
+```
+
+Go to the top of the local repository
+
+```bash
+$ cd acg-<username>     # go to the local repository
+```
+
+
+### Update Local Repository
+
+Please updat the local repository on your computer
+
+```bash
+$ git checkout main   # set main branch as the current branch
+$ git fetch origin main    # download the main branch from remote repository
+$ git reset --hard origin/main  # reset the local main branch same as remote repository
+```
+
+### Create a Branch
+
+To do this assignement, you need to be in the branch `task01`.  You can always check your the current branch by
+
+```bash
+$ git branch -a   # list all branches, showing the current branch 
+```
+
+You are probably in the `main` branch. Let's create the `task01` branch and set it as the current branch.
+
+```bash
+$ git branch task01   # create task0 branch
+$ git checkout task01  # switch into the task01 branch
+$ git branch -a   # make sure you are in the task01 branch
+```
+
+
+### Compile the Code 
+
+After the environment is ready, let's build and compile the code. We do **out-of-source** build by making a new directory for build `task01/build` and compile inside that directory
+```bash
+$ cd task01
+$ mkdir build
+$ cd build
+$ cmake .. 
+$ cmake --build .
+```
+
+Now you will see the `output.png` is updated. The `output.png` will show a gray triangle around top-left corner. Now let's write a program to make more complicated images. 
+
+## Problem2: Draw a Polygon
+
+Edit the `main.ccp` around line #67 to implement the inside/outside test for a convex polygon using the winding number. 
+
+
+
+## Problem3: Draw Lines
+
+Edit `main.ccp` around line # 93 to implement line rasterization using DDA (digital differential analyzer).
+
+
+
+
+### Submit
+
+Finally, you submit the document by pushing to the `task01` branch of the remote repository. 
+
+```bash
+cd acg-<username>    # go to the top of the repository
+git status  # check the changes (this will hilight main.cpp and output.png)
+git add .   # stage the changes
+git status  # check the staged changes
+git commit -m "task01 finished"   # the comment can be anything
+git push --set-upstream origin task01  # up date the task01 branch of the remote repository
+```
+
+got to the GitHub webpage `https://github.com/ACG-2024S/acg-<username>` . If everything looks good on this page, make a pull request. 
+
+![](../doc/pullrequest.png)
+
+
+----
+
+
+
+## Trouble Shooting
+
+- I mistakenly submit the assignement in the `main` branch
+  - Make a branch `task01` and submit again
+- When I type `git status`, it shows many files. 
+  - Do not commit intermediate files. Make sure you are correctly doing the **"out-of-source build"** If necessary edit the `.gitignore` file to remove the intermediate files.
+- When something does wrong, consider doing from scratch (start from `git clone`).  
+
+

task01/main.cpp

@@ -0,0 +1,121 @@
+#include <cstdio>
+#include <iostream>
+#include <cassert>
+#include <vector>
+#include <filesystem>
+//
+#define STB_IMAGE_WRITE_IMPLEMENTATION
+#include "stb_image_write.h"
+
+/**
+ * @brief compute the area of a triangle
+ * @return area
+ */
+float area_of_a_triangle(
+    float x0, float y0,
+    float x1, float y1,
+    float x2, float y2) {
+  return ((x1 - x2) * (y0 - y2) - (x0 - x2) * (y1 - y2)) * 0.5f;
+}
+
+/**
+ * @brief draw a triangle using the barycentric coordinates
+ */
+void draw_triangle(
+    float x0, float y0,
+    float x1, float y1,
+    float x2, float y2,
+    std::vector<unsigned char> &img_data, unsigned int width, unsigned int height,
+    unsigned char brightness) {
+  for (unsigned int ih = 0; ih < height; ++ih) {
+    for (unsigned int iw = 0; iw < width; ++iw) {
+      const auto x = (float) iw + 0.5f;
+      const auto y = (float) ih + 0.5f;
+      const auto a01 = area_of_a_triangle(x, y, x0, y0, x1, y1);
+      const auto a12 = area_of_a_triangle(x, y, x1, y1, x2, y2);
+      const auto a20 = area_of_a_triangle(x, y, x2, y2, x0, y0);
+      if (a01 > 0.f && a12 > 0.f && a20 > 0.f) {
+        img_data[ih * height + iw] = brightness;
+      }
+    }
+  }
+}
+
+/**
+ * @brief draw a triangle using the barycentric coordinates
+ * @param polygon_xy xy coordinates of the corners of the polygon (counter clockwise order)
+ * @param brightness brightness of the painted pixel
+ */
+void draw_polygon(
+    const std::vector<float> &polygon_xy,
+    std::vector<unsigned char> &img_data, unsigned int width, unsigned int height,
+    unsigned int brightness) {
+  for (unsigned int ih = 0; ih < height; ++ih) {
+    for (unsigned int iw = 0; iw < width; ++iw) {
+      const auto x = float(iw) + 0.5f; // x-coordinate of the center of the pixel
+      const auto y = float(ih) + 0.5f; // y-coordinate of the center of the pixel
+      const unsigned int num_vtx = polygon_xy.size() / 2;
+      float winding_number = 0.0;
+      for (unsigned int iedge = 0; iedge < num_vtx; ++iedge) {
+        unsigned int i0_vtx = iedge;
+        unsigned int i1_vtx = (iedge + 1) % num_vtx;
+        // positions of the end points of the edge relative to (x,y)
+        float p0x = polygon_xy[i0_vtx * 2 + 0] - x;
+        float p0y = polygon_xy[i0_vtx * 2 + 1] - y;
+        float p1x = polygon_xy[i1_vtx * 2 + 0] - x;
+        float p1y = polygon_xy[i1_vtx * 2 + 1] - y;
+        // write a few lines of code to compute winding number (hint: use atan2)
+      }
+      const int int_winding_number = int(std::round(winding_number));
+      if (int_winding_number == 1 ) { // if (x,y) is inside the polygon
+        img_data[ih*width + iw] = brightness;
+      }
+    }
+  }
+}
+
+/**
+ * @brief draw a line using DDA algorithm
+ * @param x0 x-coordinate of the first end point
+ * @param y0 y-coordinate of the first end point
+ * @param x1 x-coordinate of the second end point
+ * @param y1 y-coordinate of the second end point
+ * @param brightness brightness of the painted pixel
+ */
+void dda_line(
+    float x0, float y0,
+    float x1, float y1,
+    std::vector<unsigned char> &img_data,
+    unsigned int width,
+    unsigned char brightness ) {
+  auto dx = x1 - x0;
+  auto dy = y1 - y0;
+  // write some code below to paint pixel on the line with color `brightness`
+}
+
+int main() {
+  constexpr unsigned int width = 100;
+  constexpr unsigned int height = 100;
+  std::vector<unsigned char> img_data(width * height, 255); // white initial image
+  draw_triangle(5., 5., 15., 45., 45., 15., img_data, width, height, 128);
+  draw_polygon(
+      {55., 5.,75., 75.,15., 55.,15., 95.,95., 95.,95., 5.}, // the pix coordinates of the corners of the polygon
+      img_data, width, height, // image data, size
+      200); // brightness to draw
+  dda_line(50.0, 50.0, 72.8, 10.0, img_data, width, 0); // right-down
+  dda_line(50.0, 50.0, 90.0, 27.2, img_data, width, 0); // right-down
+  dda_line(50.0, 50.0, 72.8, 90.0, img_data, width, 0); // right-up
+  dda_line(50.0, 50.0, 90.0, 72.8, img_data, width, 0); // right-up
+  dda_line(50.0, 50.0, 10.0, 72.8, img_data, width, 0); // left-up
+  dda_line(50.0, 50.0, 27.2, 90.0, img_data, width, 0); // left-up
+  dda_line(50.0, 50.0, 10.0, 27.2, img_data, width, 0); // left-down
+  dda_line(50.0, 50.0, 27.2, 10.0, img_data, width, 0); // left-down
+  dda_line(50.0, 50.0, 90.0, 50.0, img_data, width, 0); // right
+  dda_line(50.0, 50.0, 50.0, 90.0, img_data, width, 0); // up
+  dda_line(50.0, 50.0, 10.0, 50.0, img_data, width, 0); // left
+  dda_line(50.0, 50.0, 50.0, 10.0, img_data, width, 0); // down
+  // save gray scale image with 1 byte depth
+  stbi_write_png(
+      (std::filesystem::path(PROJECT_SOURCE_DIR) / "output.png").c_str(),
+      width, height, 1,img_data.data(), width);
+}