Hi, I'm Drew and this is "Palette Puzzle." There are three sections of it, but since I mostly worked on the Big Sort section, I'll be going over that.
(Show sorting and analysis table) This section of the project fulfills the large sorting and analysis requirements of the project, with 5000 different colors to be sorted and analysis provided for each of the sort types.
AJ was responsible for generating the 5000 boxes with random colors and the fetch. I was responsible for the backend sorting algorithms and the visualization of each sort shown on the frontend.
(Showing parent sort method) All sorting algorithms inherit methods and attributes from a parent SortingAlgorithm class. This class is responsible for collecting and storing the execution time, number of comparisons and number of swaps made by each of the sorting algorithms in the process.
(Show subclasses) Each subclass overwrites the performSort method that is then used within the parent sort method, which has built-in measures to get the execution time. When a fetch is made from this part of the site, multiple sort passes are made to calculate an average execution time.
(Show sorting again) Each subclass also stores the steps of its sort to be run back in the frontend as a visual demonstration. As it sorts, you can also see the data collected in the table below, as well as its time complexity.
Haseeb's Segment (Puzzle Game)
I'm Haseeb, and I was responsible for the puzzle game section of the frontend as well as most of the backend code for the fibonacci section. I'll be showing off the puzzle game section.
(Showing frontend in video) This game uses the same backend API as the Big Sort to make a game where the user can sort the colors.
(Show steps while speaking) First, you select a color to sort by. Then, 8 colors are generated. The user can click and drag them around to sort them from the least amount of a certain color to most. Once the user finishes, any of the four sorting algorithms can be chosen, and the user can compare their sorted colors with the true sort.
[ONLY IF THE STEP REPRESENTATIONS ARE FUNCTIONAL] Since the larger sort doesn't go into as much individual detail on each step, our group decided to walk through the process of each step in this game to show the user how it works. It changes based on the sort type chosen.
(Showing fetch body) The same backend sorting API is used to fetch the steps for this page, but to save on time, since the analysis isn't shown in this part of the project, the key "big" is set to false to prevent multiple sorts from being done to save time.
AJ's Segment (Fibonacci)
(Showing fibonacci) I'm AJ, and I mostly focused on deployment and frontend-backend connections. I also made the recursive and stream fibonacci methods on the backend and helped with the frontend of the big sort and fibonacci. I'll be going over the fibonacci page.
(Showing fetches made) To meet requirements, our fibonacci page includes six different fibonacci methods: for loop, while loop, recursion, and stream, the existing methods; and two new methods, the golden ratio and matrix exponentiation. This meets the requirements of adding on additional fibonacci methods.
(Showing backend code, Fibonacci.java) Like the sorting algorithms, on the backend, a parent class Fibonacci is inherited by each of the method subclasses. This parent class has important attributes like execution time, used for analysis requirements, and the method's name, which each subclass specifies for the frontend.
(Showing backend subclasses, MatrixExponentiation.java and Stream.java are most advanced) Each subclass overwrites the performCalculation method that is then called in the parent's calculate method, which gets the execution time.
(Showing frontend pulls again) This allows each method's data to be displayed in the frontend to meet analysis requirements.
Video Script
Drew's Segment (Big Sort)
Hi, I'm Drew and this is "Palette Puzzle." There are three sections of it, but since I mostly worked on the Big Sort section, I'll be going over that.
(Show sorting and analysis table) This section of the project fulfills the large sorting and analysis requirements of the project, with 5000 different colors to be sorted and analysis provided for each of the sort types.
AJ was responsible for generating the 5000 boxes with random colors and the fetch. I was responsible for the backend sorting algorithms and the visualization of each sort shown on the frontend.
(Showing parent sort method) All sorting algorithms inherit methods and attributes from a parent
SortingAlgorithmclass. This class is responsible for collecting and storing the execution time, number of comparisons and number of swaps made by each of the sorting algorithms in the process.(Show subclasses) Each subclass overwrites the
performSortmethod that is then used within the parentsortmethod, which has built-in measures to get the execution time. When a fetch is made from this part of the site, multiple sort passes are made to calculate an average execution time.(Show sorting again) Each subclass also stores the steps of its sort to be run back in the frontend as a visual demonstration. As it sorts, you can also see the data collected in the table below, as well as its time complexity.
Haseeb's Segment (Puzzle Game)
I'm Haseeb, and I was responsible for the puzzle game section of the frontend as well as most of the backend code for the fibonacci section. I'll be showing off the puzzle game section.
(Showing frontend in video) This game uses the same backend API as the Big Sort to make a game where the user can sort the colors.
(Show steps while speaking) First, you select a color to sort by. Then, 8 colors are generated. The user can click and drag them around to sort them from the least amount of a certain color to most. Once the user finishes, any of the four sorting algorithms can be chosen, and the user can compare their sorted colors with the true sort.
[ONLY IF THE STEP REPRESENTATIONS ARE FUNCTIONAL] Since the larger sort doesn't go into as much individual detail on each step, our group decided to walk through the process of each step in this game to show the user how it works. It changes based on the sort type chosen.
(Showing fetch body) The same backend sorting API is used to fetch the steps for this page, but to save on time, since the analysis isn't shown in this part of the project, the key
"big"is set tofalseto prevent multiple sorts from being done to save time.AJ's Segment (Fibonacci)
(Showing fibonacci) I'm AJ, and I mostly focused on deployment and frontend-backend connections. I also made the recursive and stream fibonacci methods on the backend and helped with the frontend of the big sort and fibonacci. I'll be going over the fibonacci page.
(Showing fetches made) To meet requirements, our fibonacci page includes six different fibonacci methods: for loop, while loop, recursion, and stream, the existing methods; and two new methods, the golden ratio and matrix exponentiation. This meets the requirements of adding on additional fibonacci methods.
(Showing backend code,
Fibonacci.java) Like the sorting algorithms, on the backend, a parent classFibonacciis inherited by each of the method subclasses. This parent class has important attributes like execution time, used for analysis requirements, and the method's name, which each subclass specifies for the frontend.(Showing backend subclasses,
MatrixExponentiation.javaandStream.javaare most advanced) Each subclass overwrites theperformCalculationmethod that is then called in the parent'scalculatemethod, which gets the execution time.(Showing frontend pulls again) This allows each method's data to be displayed in the frontend to meet analysis requirements.