cs4241-20a · Graeth · Oct 12, 2020 · Oct 12, 2020 · Oct 12, 2020
diff --git a/.glitch-assets b/.glitch-assets
@@ -0,0 +1,13 @@
+{"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"}
+{"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"}
+{"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"}
+{"uuid":"adSBq97hhhpFNUna","deleted":true}
+{"uuid":"adSBq97hhhpFNUnb","deleted":true}
+{"uuid":"adSBq97hhhpFNUnc","deleted":true}
+{"name":"b737.glb","date":"2020-10-08T19:15:20.408Z","url":"https://cdn.glitch.com/2655b22a-16eb-431c-a433-a3bf6500f396%2Fb737.glb","type":"","size":857042,"thumbnail":"https://cdn.glitch.com/2655b22a-16eb-431c-a433-a3bf6500f396%2Fthumbnails%2Fb737.glb","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"yfRUm40za1VPZ7m4"}
+{"uuid":"yfRUm40za1VPZ7m4","deleted":true}
+{"name":"b737.glb","date":"2020-10-08T19:18:54.351Z","url":"https://cdn.glitch.com/2655b22a-16eb-431c-a433-a3bf6500f396%2Fb737.glb","type":"","size":857042,"thumbnail":"https://cdn.glitch.com/2655b22a-16eb-431c-a433-a3bf6500f396%2Fthumbnails%2Fb737.glb","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"YIwdAeySYmSmUYs1"}
+{"name":"material_baseColor.png","date":"2020-10-08T20:04:24.215Z","url":"https://cdn.glitch.com/2655b22a-16eb-431c-a433-a3bf6500f396%2Fmaterial_baseColor.png","type":"image/png","size":2552559,"imageWidth":2048,"imageHeight":2048,"thumbnail":"https://cdn.glitch.com/2655b22a-16eb-431c-a433-a3bf6500f396%2Fthumbnails%2Fmaterial_baseColor.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"24rYqTHVZFJEpMCw"}
+{"name":"scene.bin","date":"2020-10-08T20:17:34.518Z","url":"https://cdn.glitch.com/2655b22a-16eb-431c-a433-a3bf6500f396%2Fscene.bin","type":"application/octet-stream","size":2036060,"thumbnail":"https://cdn.glitch.com/2655b22a-16eb-431c-a433-a3bf6500f396%2Fthumbnails%2Fscene.bin","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"XyeHrD6NuepCjB3n"}
+{"name":"scene.gltf","date":"2020-10-08T20:17:38.072Z","url":"https://cdn.glitch.com/2655b22a-16eb-431c-a433-a3bf6500f396%2Fscene.gltf","type":"","size":4481,"thumbnail":"https://cdn.glitch.com/2655b22a-16eb-431c-a433-a3bf6500f396%2Fthumbnails%2Fscene.gltf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"qDQn8CT4wcBR78xg"}
+{"name":"infoButtonImage.png","date":"2020-10-12T00:40:25.843Z","url":"https://cdn.glitch.com/2655b22a-16eb-431c-a433-a3bf6500f396%2FinfoButtonImage.png","type":"image/png","size":2144,"imageWidth":50,"imageHeight":50,"thumbnail":"https://cdn.glitch.com/2655b22a-16eb-431c-a433-a3bf6500f396%2FinfoButtonImage.png","thumbnailWidth":50,"thumbnailHeight":50,"uuid":"5T2mR9G124fbQj8W"}
diff --git a/README.md b/README.md
@@ -1,59 +1,14 @@
-Assignment 4 - Creative Coding: Interactive Multimedia Experiences
-===
+## ThreeJS 3d game
+http://a4-garrett-smith.glitch.me/
 
-Due: October 11th, by 11:59 PM.
+Has a ball within confines of a box controlled by wasd, camera changeable with mouse drag and scroll. Incomplete, future additions were to add a collectable coin that increases maximum speed and obstacles that 'kill' the player.
 
-For this assignment we will focus on client-side development using popular audio/graphics/visualization technologies; the server requirements are minimal. The goal of this assignment is to refine our JavaScript knowledge while exploring the multimedia capabilities of the browser.
+# Challenges
+- Implementing collision physics
+- Working with external models, eventually gave up on this
+- Controlling movement with vectors
 
-Baseline Requirements
----
+# Technical Achievements
+Implements believable collision physics with wall and friction deceleration.
 
-Your application is required to implement the following functionalities:
 
-- A server created using Express. This server can be as simple as needed.
-- A client-side interactive experience using at least one of the following web technologies frameworks.
-  - [Three.js](https://threejs.org/): A library for 3D graphics / VR experiences
-  - [D3.js](https://d3js.org): A library that is primarily used for interactive data visualizations
-  - [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D raster drawing API included in all modern browsers
-  - [SVG](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D vector drawing framework that enables shapes to be defined via XML.
-  - [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API): An API for audio synthesis, analysis, processing, and file playback.
-- A user interface for interaction with your project, which must expose at least six parameters for user control. [dat.gui](https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage) is highly recommended for this. You might also explore interaction by tracking mouse movement via the `window.onmousemove` event handler in tandem with the `event.clientX` and `event.clientY` properties. Consider using the [Pointer Events API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) to ensure that that mouse and touch events will both be supported in your app.
-- Your application should display basic documentation for the user interface when the application first loads. This documentation should be dismissable, however, users should be able to redisplay it via either a help buton (this could, for example, be inside a dat.gui interface) or via a keyboard shortcut (commonly the question mark).
-- Your HTML and CSS should validate. There are options/plugins for most IDEs to check validation.
-
-The interactive experience should possess a reasonable level of complexity. Some examples:
-### Three.js
-- A generative algorithm creates simple agents that move through a virtual world. Your interface controls the behavior / appearance of these agents.
-- A simple 3D game
-- An 3D audio visualization of a song of your choosing. User interaction should control aspects of the visualization. 
-### Canvas
-- Implement a generative algorithm such as [Conway's Game of Life](https://bitstorm.org/gameoflife/) (or 1D cellular automata) and provide interactive controls. Note that the Game of Life has been created by 100s of people using <canvas>; we'll be checking to ensure that your implementation is not a copy of these.
-- Design a 2D audio visualizer of a song of your choosing. User interaction should control visual aspects of the experience. 
-### Web Audio API
-- Create a screen-based musical instrument using the Web Audio API. You can use projects such as [Interface.js](http://charlie-roberts.com/interface/) or [Nexus UI](https://nexus-js.github.io/ui/api/#Piano) to provide common musical interface elements, or use dat.GUI in combination with mouse/touch events (use the Pointer Events API). Your GUI should enable users to control aspects of sound synthesis.
-### D3.js
-- Create visualizations using the datasets found at [Awesome JSON Datasets](https://github.com/jdorfman/Awesome-JSON-Datasets). Experiment with providing different visualizations of the same data set, and providing users interactive control over visualization parameters and/or data filtering. Alternatively, create a single visualization with using one of the more complicated techniques shown at [d3js.org](d3js.org) and provide meaningful points of interaction for users.
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Implement your project with the above requirements.
-3. Test your project to make sure that when someone goes to your main page on Glitch/Heroku/etc., it displays correctly.
-4. Ensure that your project has the proper naming scheme `a4-firstname-lastname` so we can find it.
-5. Fork this repository and modify the README to the specifications below. *NOTE: If you don't use Glitch for hosting (where we can see the files) then you must include all project files that you author in your repo for this assignment*.
-6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a4-firstname-lastname`.
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-## Your Web Application Title
-
-your hosting link e.g. http://a4-charlieroberts.glitch.me
-
-Include a very brief summary of your project here. Images are encouraged when needed, along with concise, high-level text. Be sure to include:
-
-- the goal of the application
-- challenges you faced in realizing the application
-- the instructions you present in the website should be clear enough to use the application, but if you feel any need to provide additional instructions please do so here.
diff --git a/models/yak/scene.bin b/models/yak/scene.bin
diff --git a/models/yak/scene.gltf b/models/yak/scene.gltf
@@ -0,0 +1,253 @@
+{
+  "accessors": [
+    {
+      "bufferView": 2,
+      "componentType": 5126,
+      "count": 39373,
+      "max": [
+        263.07180786132812,
+        214.05734252929688,
+        147.8524169921875
+      ],
+      "min": [
+        -262.70651245117188,
+        -206.63665771484375,
+        -2.0941925048828125
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 472476,
+      "componentType": 5126,
+      "count": 39373,
+      "max": [
+        0.99999672174453735,
+        0.99989336729049683,
+        0.99999821186065674
+      ],
+      "min": [
+        -0.99999076128005981,
+        -0.99998182058334351,
+        -0.99999982118606567
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 1,
+      "componentType": 5126,
+      "count": 39373,
+      "max": [
+        0.98252224922180176,
+        0.99188995361328125
+      ],
+      "min": [
+        0.0098431305959820747,
+        0.010617733001708984
+      ],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 0,
+      "componentType": 5125,
+      "count": 194031,
+      "max": [
+        39372
+      ],
+      "min": [
+        0
+      ],
+      "type": "SCALAR"
+    }
+  ],
+  "asset": {
+    "extras": {
+      "author": "Ashkelon (https://sketchfab.com/Ashkelon)",
+      "license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
+      "source": "https://sketchfab.com/3d-models/yak-cdd952b6a19a4975aa00feb5b58e4fa9",
+      "title": "YAK"
+    },
+    "generator": "Sketchfab-9.37.0",
+    "version": "2.0"
+  },
+  "bufferViews": [
+    {
+      "buffer": 0,
+      "byteLength": 776124,
+      "byteOffset": 0,
+      "name": "floatBufferViews",
+      "target": 34963
+    },
+    {
+      "buffer": 0,
+      "byteLength": 314984,
+      "byteOffset": 776124,
+      "byteStride": 8,
+      "name": "floatBufferViews",
+      "target": 34962
+    },
+    {
+      "buffer": 0,
+      "byteLength": 944952,
+      "byteOffset": 1091108,
+      "byteStride": 12,
+      "name": "floatBufferViews",
+      "target": 34962
+    }
+  ],
+  "buffers": [
+    {
+      "byteLength": 2036060,
+      "uri": "scene.bin"
+    }
+  ],
+  "images": [
+    {
+      "uri": "textures/material_baseColor.png"
+    }
+  ],
+  "materials": [
+    {
+      "doubleSided": true,
+      "emissiveFactor": [
+        0,
+        0,
+        0
+      ],
+      "name": "material",
+      "pbrMetallicRoughness": {
+        "baseColorFactor": [
+          1,
+          1,
+          1,
+          1
+        ],
+        "baseColorTexture": {
+          "index": 0,
+          "texCoord": 0
+        },
+        "metallicFactor": 0.62796788452535135,
+        "roughnessFactor": 0.20786744006469304
+      }
+    }
+  ],
+  "meshes": [
+    {
+      "name": "YAK_Yak_0",
+      "primitives": [
+        {
+          "attributes": {
+            "NORMAL": 1,
+            "POSITION": 0,
+            "TEXCOORD_0": 2
+          },
+          "indices": 3,
+          "material": 0,
+          "mode": 4
+        }
+      ]
+    }
+  ],
+  "nodes": [
+    {
+      "children": [
+        1
+      ],
+      "name": "RootNode (gltf orientation matrix)",
+      "rotation": [
+        -0.70710678118654746,
+        -0,
+        -0,
+        0.70710678118654757
+      ]
+    },
+    {
+      "children": [
+        2
+      ],
+      "name": "RootNode (model correction matrix)"
+    },
+    {
+      "children": [
+        3
+      ],
+      "matrix": [
+        1,
+        0,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        -1,
+        0,
+        0,
+        0,
+        0,
+        0,
+        1
+      ],
+      "name": "5b88abda07614cccb2bb00b1dd52d41d.fbx"
+    },
+    {
+      "children": [
+        4
+      ],
+      "name": "RootNode"
+    },
+    {
+      "children": [
+        5
+      ],
+      "matrix": [
+        -7.3159570948604751,
+        -9.1489929777258649e-09,
+        -0.56638749288422541,
+        0,
+        -0.5663874928842163,
+        1.4280235895042443e-06,
+        7.3159570948603365,
+        0,
+        1.0110334704754538e-07,
+        7.3378486633299378,
+        -1.4244694397415929e-06,
+        0,
+        1.862645149230957e-07,
+        0,
+        0,
+        1
+      ],
+      "name": "YAK"
+    },
+    {
+      "mesh": 0,
+      "name": "YAK_Yak_0"
+    }
+  ],
+  "samplers": [
+    {
+      "magFilter": 9729,
+      "minFilter": 9987,
+      "wrapS": 10497,
+      "wrapT": 10497
+    }
+  ],
+  "scene": 0,
+  "scenes": [
+    {
+      "name": "OSG_Scene",
+      "nodes": [
+        0
+      ]
+    }
+  ],
+  "textures": [
+    {
+      "sampler": 0,
+      "source": 0
+    }
+  ]
+}
+
diff --git a/models/yak/textures/material_baseColor.png b/models/yak/textures/material_baseColor.png
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "//1": "describes your app and its dependencies",
+  "//2": "https://docs.npmjs.com/files/package.json",
+  "//3": "updating this file will download and update your packages",
+  "name": "hello-express",
+  "version": "0.0.1",
+  "description": "A simple Node app built on Express, instantly up and running.",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.17.1",
+    "three": "^1.58.1"
+  },
+  "engines": {
+    "node": "12.x"
+  },
+  "repository": {
+    "url": "https://glitch.com/edit/#!/hello-express"
+  },
+  "license": "MIT",
+  "keywords": [
+    "node",
+    "glitch",
+    "express"
+  ]
+}