From 275c5181b268bcaef9b3af2e4c4c1b5a3aa121a4 Mon Sep 17 00:00:00 2001 From: Andrej Rasevic <andrej@rasevicengineering.com> Date: Wed, 23 Jun 2021 22:51:47 -0400 Subject: [PATCH] adding Project 2 --- Projects/Project2/Project2Description.md | 44 ++++++++++++++++++++++++ Projects/Project2/recorder.css | 5 +++ Projects/Project2/recorder.html | 12 +++++++ Projects/Project2/recorder.js | 3 ++ 4 files changed, 64 insertions(+) create mode 100644 Projects/Project2/Project2Description.md create mode 100644 Projects/Project2/recorder.css create mode 100644 Projects/Project2/recorder.html create mode 100644 Projects/Project2/recorder.js diff --git a/Projects/Project2/Project2Description.md b/Projects/Project2/Project2Description.md new file mode 100644 index 0000000..c044f78 --- /dev/null +++ b/Projects/Project2/Project2Description.md @@ -0,0 +1,44 @@ +# Canvas Drawing Recorder Application +## Due Date: Monday, June 28th, 2021 11:59 PM +### Objectives: +To define Java custom types, data structures, animation, and event manipulation. +### Overview +This project consists of developing a recorder application that relies on a JavaScript singly-linked list. + +### Grading +* (20 pts) Singly-linked list implementation +* (80 pts) Drawing Recorder +### Linked List Specifications +Implement a singly-linked list custom type that defines the following operations: + +* Add element to the front of the list. +* Add element to the end of the list. +* Add element in the middle of the list. +* Find element +* Size of the list +* Any other operation that supports the functionality associated with the recorder application defined below. +### Drawing Recorder Specification +Define a custom type called Recorder. The class defines functionality that allow us to record and play the activity associated with the drawing application presented in class [DrawingPointer.html](../../CodeExamples/Week2/ObjsAPISCode/DrawingPointer.html). For example, someone using your system can select a record button, draw a circle, stop the recording process, and then playback the drawing of that circle. The playback process is not just to show the final drawing created; it is animated (as if we were to repeat the drawing ourselves). The class defines methods that control each of the following activities: +* Start recording +* Stop recording +* Play +* Save recording +* Retrieve saved recording +* Change drawing color +* Clear screen + +### Drawing Recorder Requirements +* Feel free to add any other methods and / or instance variables you understand you need. +* Use localStorage to store the recordings. +* Your interface must provide access to the functionality specified above (e.g., start recording, stop recording, etc.). It is up to you do decide how to provide access to the functionality. +* Your interface must include a help section that describes how to use the application. +* To keep track of the mouse activity, store the x,y coordinates associated with the mouse position using the linked list you defined above. +* You may not use any program/code from the web in order to complete your recorder. +* Feel free to add any other extra functionality. Surprise us! +* __Do not post your recorder on the web (even after the class is over); do not post it in terpconnect.__ +### General Requirements +* You must the html page we have provided (recorder.html) to provide access to the recorder application. +* You need to use the E6 class syntax covered in lecture for any classes you create. +* You cannot use var; you must use let or const for variable declaration. +### Submission +Submit your application by commiting your code and pushing it to your repo on the university gitlab server. Make sure you verify that you see your code up on the gitlab server after you have pushed it. \ No newline at end of file diff --git a/Projects/Project2/recorder.css b/Projects/Project2/recorder.css new file mode 100644 index 0000000..d4e82f9 --- /dev/null +++ b/Projects/Project2/recorder.css @@ -0,0 +1,5 @@ +/* place your css style definitions here + Here is a link to a great reference for learning and + experimenting with css: +https://www.w3schools.com/css/default.asp +*/ \ No newline at end of file diff --git a/Projects/Project2/recorder.html b/Projects/Project2/recorder.html new file mode 100644 index 0000000..fc06104 --- /dev/null +++ b/Projects/Project2/recorder.html @@ -0,0 +1,12 @@ +<!doctype html> +<html> + <head> + <meta charset="utf-8" /> + <title>Canvas Recording Application</title> + <script src="recorder.js"></script> + </head> + + <body> + <canvas id="canvas" width="400" height="300"></canvas> + </body> +</html> \ No newline at end of file diff --git a/Projects/Project2/recorder.js b/Projects/Project2/recorder.js new file mode 100644 index 0000000..c6eae14 --- /dev/null +++ b/Projects/Project2/recorder.js @@ -0,0 +1,3 @@ +// place your javascript code here + +'use strict'; \ No newline at end of file -- GitLab