A4-Robinson-Ben

.glitch-assets

@@ -0,0 +1,17 @@
+{"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":"Logo_Color.svg","date":"2020-10-15T17:02:08.576Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg","type":"image/svg+xml","size":25537,"imageWidth":19,"imageHeight":14,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg","thumbnailWidth":19,"thumbnailHeight":14,"uuid":"XPQ2UUJettC9yQ6L"}
+{"name":"HKGrotesk-Medium.otf","date":"2020-10-15T17:19:39.944Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Medium.otf","type":"","size":69888,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Medium.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"mSnvx5eJut7fimxB"}
+{"name":"HKGrotesk-Regular.otf","date":"2020-10-15T17:19:40.076Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Regular.otf","type":"","size":67768,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Regular.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"VY2dLeOvcf8ffuEw"}
+{"name":"HKGrotesk-SemiBold.otf","date":"2020-10-15T17:20:42.442Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-SemiBold.otf","type":"","size":69948,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-SemiBold.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"yEDZsSX7I7P2NlF1"}
+{"name":"HKGrotesk-Bold.otf","date":"2020-10-15T17:21:24.249Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Bold.otf","type":"","size":68144,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Bold.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"aHiG7zYivg7tnSDH"}
+{"name":"illustration.svg","date":"2021-04-11T21:42:24.016Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fillustration.svg","type":"image/svg+xml","size":21272,"imageWidth":658,"imageHeight":682,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2Fillustration.svg","thumbnailWidth":319,"thumbnailHeight":330,"uuid":"WlqPAPkJzcjf2thL"}
+{"uuid":"aHiG7zYivg7tnSDH","deleted":true}
+{"uuid":"mSnvx5eJut7fimxB","deleted":true}
+{"uuid":"yEDZsSX7I7P2NlF1","deleted":true}
+{"uuid":"VY2dLeOvcf8ffuEw","deleted":true}
+{"uuid":"XPQ2UUJettC9yQ6L","deleted":true}

LICENSE

@@ -0,0 +1,54 @@
+The LICENSE file for any project gives credit to the creator/author of the 
+project, copyright information for the project, and the legal terms under 
+which it's being shared. In other words, this is us using an MIT license to
+say "we wrote this and you can do whatever you want with it."
+
+******************************************************************************
+~glitch-hello-website
+******************************************************************************
+MIT License
+
+Copyright (c) 2021, Glitch, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+
+
+******************************************************************************
+
+THIRD-PARTY SOFTWARE
+This is all the software we used to build this starter project. All of these
+licenses are compatible with the license above. We've included links so you
+can learn more if you want. 
+
+1. HK Grotesk: The font we're using. 
+
+
+******************************************************************************
+1. HK Grotesk
+URL: https://hanken.co/products/hk-grotesk
+******************************************************************************
+HK Grotesk was designed by Hanken Design Co. It is shared using a SIL OFL
+license. Full license text can be found at:
+
+https://hanken.co/pages/web-fonts-eula
+******************************************************************************
+END, HK Grotesk
+******************************************************************************

README.md

@@ -1,61 +1,35 @@
-Assignment 4 - Creative Coding: Interactive Multimedia Experiences
-===
+**A4-BennyRob - https://a4-bennyrob.glitch.me**
 
-Due: October 4th, by 11:59 AM.
+(Got an extension so this was submitted late)
 
-For this assignment we will focus on client-side development using popular audio/graphics/visualization technologies. The goal of this assignment is to refine our JavaScript knowledge while exploring the multimedia capabilities of the browser.
+My project is made with three.js and tweakpane. 
 
-[WebAudio / Canvas / Three Tutorial](https://github.com/cs4241-21a/cs4241-21a.github.io/blob/main/webaudio_canvas_three.md)  
-[SVG + D3 tutorial](https://github.com/cs4241-21a/cs4241-21a.github.io/blob/main/using_svg_and_d3.md)  
+The goal of this project was to create some 3d cubes that the user can manipulate in various ways.
 
-Baseline Requirements
----
+I was challenged in this project when doing some of the movements with the cubes, as this is my first time working
+with any sort of 3d graphics.
 
-Your application is required to implement the following functionalities:
+**Baseline requirements**
 
-- 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 four parameters for user control. [tweakpane](https://cocopon.github.io/tweakpane/) is highly recommended for this, but you can also use regular HTML `<input>` tags (the `range` type is useful to create sliders). 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 both 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.
+Has a functional express server
 
-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... you really want this to be a simple as possible or it will be outside the scope of this assignment.
-- 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. If you want to use higher-level instruments instead of the raw WebAudio API sounds, consider trying the instruments provided by [Tone.js]() or [Gibber](https://github.com/charlieroberts/gibber.audio.lib).
-### 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.
+I use three.js for my framwork
 
-Deliverables
----
+I use Tweakpane for my user interface interaction
 
-Do the following to complete this assignment:
+**Tweakpane options**
 
-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`.
+--> numCubes - Controls the number of cubes
 
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
+--> SpeedX and SpeedY - controls the speed of rotation for the X and Y axis
 
-## Your Web Application Title
+--> Change Color - randomly changes the color of the cubes
+
+--> Cube Dance - the cubes move based on the inputs of SpeedX and SpeedY
+
+--> Dont click this - Don't
+
+Has some small documentation when the website is loaded
 
-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.

TODO.md

@@ -0,0 +1,19 @@
+# TODO 🚧
+
+Your new site is all yours so it doesn't matter if you break it! Try editing the code–add a button element that moves when the user clicks it.
+
+In `index.html`, add this code on the line after the comment with `ADD BUTTON HERE` in it (you can copy and paste the button element HTML):
+
+```html
+<button>
+    Click me!
+</button>
+```
+
+Look at the page to see the button. Click it!
+
+Open `script.js` to see the script that makes the button move.
+
+## Keep going! 🚀
+
+Try adding more properties to the CSS `dipped` style for the button to see how the changes appear on click.