; 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.
-
-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.
+## DoodleBoard
+
+https://a4-bryan-lima.glitch.me/
+
+# Goal
+This website is a simple stress relieving drawing application. Users can draw whatever their heart desires with some options for customization to the tools.
+
+# Accomplishments
+- Created a simple Express server
+- Utilized the Canvas framework
+- User Interaction:
+ - The option to pick between eight different colors
+ - Increase/decrease brush size
+ - The option to use the round, square, or butt brush
+ - The ability to clear the entire drawing
+- Includes basic instructions on the homepage and showcases controls on the canvas page
+
+
+# Challenges
+I struggled with the implementation of tweakpane. As an alternative, I thought it would be cool to utilize event listeners for things such as mouse and key clicks.
+This way, a user can have a variety of different controls to change the parameters of their brush.
+
+I also had some trouble with Glitch throughout my work on this project such as trouble with CSS styling, the server displaying the correct page, and using Canvas, but I was able to get past these challenges with the help of office hours.
+
+# Instructions
+
+ Click & Drag: Doodle!
+ Up Arrow: Increase Brush Size
+ Down Arrow: Decrease Brush Size
+ X: Clear Drawing
+ B: Butt Brush
+ R: Round Brush
+ S: Square Brush
diff --git a/canvas.html b/canvas.html
new file mode 100644
index 00000000..8e4e4041
--- /dev/null
+++ b/canvas.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+ DoodleBoard
+
+
+
+ Controls:
+ Click & Drag: Doodle!
+ Up Arrow: Increase Brush Size
+ Down Arrow: Decrease Brush Size
+ X: Clear Drawing
+ B: Butt Brush
+ R: Round Brush
+ S: Square Brush
+
+
+
+
diff --git a/canvas.js b/canvas.js
new file mode 100644
index 00000000..07dcada8
--- /dev/null
+++ b/canvas.js
@@ -0,0 +1,118 @@
+window.addEventListener("load", () => {
+ const canvas = document.querySelector("canvas"),
+ c = canvas.getContext("2d"),
+ doodleBtn = document.getElementById("doodle"),
+ redBtn = document.getElementById("red"),
+ blueBtn = document.getElementById("blue"),
+ yellowBtn = document.getElementById("yellow"),
+ greenBtn = document.getElementById("green"),
+ blackBtn = document.getElementById("black"),
+ whiteBtn = document.getElementById("white"),
+ pinkBtn = document.getElementById("pink"),
+ purpleBtn = document.getElementById("purple"),
+ clearBtn = document.getElementById("clear"),
+ popup = document.getElementById("popup"),
+ welcomeScreen = document.getElementById("welcomeScreen");
+
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ c.lineCap = "round";
+ c.lineWidth = 10;
+
+ let isPainting = false;
+
+ function startPosition(e) {
+ isPainting = true;
+ doodle(e);
+ }
+
+ function endPosition() {
+ isPainting = false;
+ c.beginPath();
+ }
+
+ function checkKey(e) {
+ e = e || window.event;
+
+ //Up Arrow
+ if (e.keyCode == "38") {
+ c.lineWidth += 1;
+ }
+
+ //Down Arrow
+ else if (e.keyCode == "40") {
+ c.lineWidth -= 1;
+ }
+
+ //X Key
+ else if (e.keyCode == "88") {
+ c.clearRect(0, 0, canvas.width, canvas.height);
+ }
+
+ //R Key
+ else if (e.keyCode == "82") {
+ c.lineCap = "round";
+ }
+
+ //B Key
+ else if (e.keyCode == "66") {
+ c.lineCap = "butt";
+ }
+
+ //S Key
+ else if (e.keyCode == "83") {
+ c.lineCap = "square";
+ }
+ }
+
+ function doodle(e) {
+ if (!isPainting) return;
+
+ c.lineTo(e.clientX, e.clientY);
+ c.stroke();
+ c.beginPath();
+ c.moveTo(e.clientX, e.clientY);
+ }
+
+ redBtn.addEventListener("click", function() {
+ c.strokeStyle = "red";
+ });
+
+ blueBtn.addEventListener("click", function() {
+ c.strokeStyle = "blue";
+ });
+
+ yellowBtn.addEventListener("click", function() {
+ c.strokeStyle = "yellow";
+ });
+
+ greenBtn.addEventListener("click", function() {
+ c.strokeStyle = "green";
+ });
+
+ blackBtn.addEventListener("click", function() {
+ c.strokeStyle = "black";
+ });
+
+ whiteBtn.addEventListener("click", function() {
+ c.strokeStyle = "white";
+ });
+
+ pinkBtn.addEventListener("click", function() {
+ c.strokeStyle = "pink";
+ });
+
+ purpleBtn.addEventListener("click", function() {
+ c.strokeStyle = "purple";
+ });
+
+ clearBtn.addEventListener("click", function() {
+ c.clearRect(0, 0, canvas.width, canvas.height);
+ });
+
+ window.addEventListener("keydown", checkKey);
+
+ canvas.addEventListener("mousedown", startPosition);
+ canvas.addEventListener("mouseup", endPosition);
+ canvas.addEventListener("mousemove", doodle);
+});
diff --git a/home.html b/home.html
new file mode 100644
index 00000000..c2393bc7
--- /dev/null
+++ b/home.html
@@ -0,0 +1,126 @@
+
+
+
+
+ DoodleBoard
+
+