Emma Holthouser Noisy 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,31 @@
 # CIS 566 Project 1: Noisy Planets
 
+Emma Holthouser
+PennKey Emma20
+
+Resources Used
+http://dev.thi.ng/gradients/ - for my cosine color palettes
+
+https://www.shadertoy.com/view/ssXSzX https://www.shadertoy.com/view/sd2Gzd-my old shader toy shaders for noise functions
+
+https://thebookofshaders.com/12/ -referenced books of shaders when tweaking my noise
+
+I currently do not have a working link because my gh-pages is not updating. It only shows the original black square
+https://emmaholthouser16.github.io/hw01-noisy-planet/
+
+
+![](images/planet1.png)
+
+![](images/planet2.png)
+
+![](images/planet3.png)
+
+![](images/plnaet4.png)
+
+
+
+
+I created a stylized earth like planet with a purple moon. My planet has four different regions, an ocean region with islands, a hill region, a plateau region, and a moutian region. I used different forms of 3D perlin noise to create the plateau and island biomes, with the island biome biased toward the relatively flatness of the ocean, and different version of 3D fbm for the hills and moutains. I then bilinearly interpolated between the four biomes to get the height at each point on the planet. I used a 2D fbm funciton to interpolate between all of the values. The x of the 2D fbm was used to interpolate between the moutains / hills and then the ocean/ pleateau. The y of the fbm was then used to interpolate between the resulting two values. This resulted in having island mostly at the bottom of the planet and hills and moutains along the top and middle. I used the height of the point relative to the center of the sphere to determine the color of the point and break the biomes up by color. I did not blocks of color separating the hill and moutian biome so I interpolated between the hill color and th emoutain color in the areas in between. I also used an fbm based cosine color palette for the green color and a another fbm function for the base of a color cosine palette for the coean. The oean color also changes based off of a time variable. Most of the planet is using lambert shading but the snow capped moutains have blinn phong applied and the ocean is an iridescent shader that is being used as the color term for lambert shading so that shadows are still applied. I also created a small moon for my planet and used fbm for the creaters and perlin noise as the base of a purple cosine color palette for the color. The user can change the size of the moon and also change the color of not only the light but also the shadows. I think shadow color is a very important artistic aspect that is often overlooked. 
 ## 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>