Haowei Li's submission

.github/workflows/build-and-deploy.yml

@@ -0,0 +1,39 @@
+
+
+name: Build and Deploy
+on:
+  push:
+    branches:
+      - master
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/[email protected]
+        with:
+          persist-credentials: false
+
+      - uses: actions/setup-node@v2-beta
+        with:
+          node-version: "15.x"
+
+      - uses: actions/cache@v2
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install and Build 🔧
+        run: |
+          npm ci
+          export NODE_ENV=production
+          npm run-script build
+          touch dist/.nojekyll
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: dist
+          CLEAN: true

.gitignore

@@ -0,0 +1,64 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+dist/bundle.js
+dist/bundle.js.map

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,11 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\src",
+    "\\src\\rendering",
+    "\\src\\rendering\\gl",
+    "\\src\\shaders"
+  ],
+  "SelectedNode": "\\src\\rendering\\gl\\OpenGLRenderer.ts",
+  "PreviewInSolutionExplorer": false
+}

README.md

@@ -1,5 +1,34 @@
 # CIS 566 Project 1: Noisy Planets
 
+Name: Haowei Li
+PennKey: lihaowei
+
+A fractal-brownian-motion function https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
+Live Demo Link: https://hli605.github.io/hw01-noisy-planet/
+
+Planet with Blinn-Phong reflection model:
+![](./MyPlanet1.png)
+
+Planet with Blinn-Phong and desaturation to a cyan color:
+![](./MyPlanetDesat1.png)
+
+Planet with Lambert reflection model:
+![](./MyPlanetLambert.png)
+
+Technical Details:
+1. I used a simple 3D perlin noise function and incorporate that function inside the fractal-brownian-motion noise function. Then, I used the fbm noise function to generate the surface height of the planet. Next, according to different heights at different location, I created 5 biomes: Ocean, Beach, Grassland, Stone Mountains, Snow Mountains.
+
+2. I used "sin" and "bias" toolbox function to simulate the High tide/low tide effects of the ocean. I used "gain" toolbox function to enable the players to desaturate the color of the planet. I used "smoothstep" toolbox function to make the smooth transition between different biomes.
+
+3. I implemented "Lambert" and "Blinn-Phong" reflection model. Also, I assigned different specular value for different biomes.
+
+4. The user can choose whether to use Blinn-Phong reflection or Lambert reflection. The user can modify the desaturation color, the desaturation percentage, the landscape height, the time scale, and the distribution of biomes.
+
+
+
+
+
+
 ## Objective
 - Continue practicing WebGL and Typescript
 - Experiment with noise functions to procedurally generate the surface of a planet

dist/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+      <title>Project 0: Getting Started | CIS 566</title>
+      <style>
+        html, body {
+          margin: 0;
+          overflow: hidden;
+        }
+        #canvas {
+          width: 100%;
+          height: 100%;
+        }
+      </style>
+  </head>
+  <body>
+    <canvas id="canvas"></canvas>
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>