Felicity Yick's Planet!

.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

README.md

@@ -1,5 +1,27 @@
 # CIS 566 Project 1: Noisy Planets
 
+## Submission
+- Name: Felicity Yick
+- Pennkey: feliyick
+- https://feliyick.github.io/hw01-noisy-planet/
+
+![image](https://user-images.githubusercontent.com/59979404/135376013-98f8da61-a79a-45b3-8a16-1aca179235a4.png)
+
+**Inspiration**
+- The planet is inspired from my alien mini minecraft from Spring 2020 (https://vimeo.com/user68496369) :) I wanted to replicate the different types of biomes I implemented for that project.
+
+**Terrain / Biomes**
+- There are four different biomes: slime lake, ice mountains, distant desert, and poisonous grasslands. There are blue tree scattered across the grasslands.
+- Biome types are enumerated and are determined by using a worley(fbm) noise function. Using the float value generated from this biome map, I used different levels of summed perlin are used for biome heights.
+- Various noise functions and cosine colour palettes in combination with bias and gain are used to colour the terrain. I used this website religiously for the colour palettes http://dev.thi.ng/gradients/
+- The slime lake biome is animated/displaced in x and y directions using sin and easeInOutQuadratic functions to give it a marbley, wavey effect.
+- The trees are created using a pow(fbm) for texturing and placement. The splattered effect is done by thresholding.
+- Blinn phong shading is used on mountains, ice caps, and lake, while lambert shading is used on the grass and desert.
+
+**GUI**
+- There are GUI controls for land distribution, light source speed, and tree distribution. The land distribution function controls the sampling frequency of the biome map/noise function. The light source in the scene rotates and the user can control how fast or slow it moves. Similar to land distribution, tree distribution controls how many trees populate the grasslands.
+- Noise functions used are all 3D
+
 ## 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>