DataArrays.java

The issue with lockers was due to 2 things:
1 - the button counted 2 clicks so it spun up 2 animations leading to wrong results
2 - speed was slow even when at max

1. Now after the button is clicked, until the animation is over, the button is completed disabled.
   So no more clicks can accidently start it again. Now it becomes greyed, unclickable, and just says ‘🚫 Simulation Running…’ until the animation finishes and it opens up again.
2. Before speed was at 0.1 / speed leading to a weak slider that barely enforced speed. Now speed is at speed * speed so the slider is very powerful and speed has greatly increased.
   And now when it speed goes up near max (40 and above), animations are skipped entirely and the students just teleport so the entire simulation ends in a few seconds.
   Just a few quick patches to fix little bugs in lockers

This is most likely my last devlog before shipping.
Just got done with the final setup and ship requirements:

1. README - I have it fully done with a list of all the topics and modules for each. After that I have some more pictures of DataArrays.java and a detailed description for each topic and how it works in Java. Then I have how I made it: what tools/IDEs I used, where I got the art, etc. The hardest pic to get was the one at the front - the same one I used for the banner - I could not get the title page and the page with the projects on the same screenshot, so I had two different pics of the project. So, to make one comprehensive one I went on Canva, and on a new design cropped and formatted tem into one pic. I also needed to go to the README official docs because I was violating some rules by not putting <> around links or using - + interchangeably for bullet points but I read their docs and figured it out.
2. Art - before index.html had spaces for each module, but those cards were still barren. They needed thumbnail pictures or emojis for thumbnails to be complete. I used emoji strings to represent many modules. For example: 🔒👣²🔓 is 100 Lockers and 🔢✂️⬇️🔗📊 is Merge Sort. For the various different teacup emotions in Hangman - Emoji Kitchen - each different emotion of the teacup I combined the teacup with that specific face. I also made a spiral juggler and file printer. One of the most fun parts in the project I had - getting creative with the emojis.
3. Final Code & UI Polishes - Needed to adjust the old placeholders in my index.html. Got in some final java files that I forgot. I tested out every single module so it’s right. I tested it out on my phone to make sure that it works across devices. I ran through the html, making slight fixes in positioning of elements & text. I just got the entire project finally ready - one final check on all my code.
   I’m really happy with how this turned out because I really gave it my best.

I added Data Collection/Sorting.

1. In Java, this is where the most algorithmic code was involved. I coded binary search (already in the recursion module), and the 3 sorts: selection sort, sort insertion sort, and merge sort. Then I actually coded a custom Stopwatch class and recorded the time it took each to go through an array with 10,000 unsorted random numbers. I found that selection took around 830ms, insertion took around 1870ms, and merge took only around 35ms. And that told me something about each sorting method - for fully random data like the data that I used selection sort is faster, but because of the more efficient way that insertion sort operates if the data was half-sorted, then insertion sort would have gone faster so when comparing those 2, it depends on the randomness of the data. But merge sort is always way way faster due to its ‘divide and conquer’ strategy.
2. I made 3 pages for data collections. One for each sort. I tried to get the same format for each sort: explanation, code, demo, pros&cons/outro. Each sort had its own animation that you can see:

• Selection picking up elements to compare then switching then moving on and repeating with the new min going l to r then coming back to where it left off
• Insertion looking at elements then switching then pushing that element down from r to l until its at it’s right spot then moving up to where it left off and continuing
• Merge dividing everything up into paris and comparing each in the pair, then 4s and comparing and sorting, then 8s and so on until the entire array has been built up again and has been sorted.
  I used teal and coral and black to represent specific parts so you could exactly see what each did.
  ++ I think that this is the last major topic and I need to get working on repo setup

I greatly improved index.html.
The landing page has had a complete makeover.

1. made this the 2nd ‘module lab’ (the first was my last project) and this uses a large variety of fonter - mono, inter, and more - the footer and header all have different fonts to get index.html the character and pop of personality it was missing
2. color strategy kept with teal as primary highlight and coral as secondary highlight. Additionally, in every single text I injected little differences in color or font to make the website appear more detailed and purposeful.
3. In the hero, I have a picture of a teacup coding. This brings some needed action to a bare place. I also built this one on emoji kitchen. And its area has its own background too to stand out too.
4. I categorized into 5 categories I’ve done.

• Arrays
• Text I/O
• Recursion
• ArrayLists
• Data Manipulation
  ++ What’s left is just some final wiring and scripts to do, and setup like readme and github

I added Hangman - one of the main array games.

1. Java code: the way hangman works is that there are 2 arrays of strings. One with s in the place of not guessed words so it looks like ’’, ‘’, ’’, ‘’, ’’, ‘’, ’’, ‘’, ’’ initially and then whenever anything is guessed - lets say there was an e at index 1 ‘’, ‘e’, ’’, ‘’, ’’, ‘’, ’’, ‘’, ’’, is what it becomes. The other array is the word itself like ‘r’, ‘e’, ‘v’, ‘o’, ‘l’, ‘u’, ‘t’, ‘i’, ‘o’, ‘n’. When determining if guesses are in the word or already guessed or not in the word, its just a matter of boolean variables and updating the array and checking with .equals(). Usually I try to use while loops with if blocks to get repeated games, but this time I used a do while loop as seen here
   ‘do {play_hangman(get_word());} while (!input.nextLine().equals(“n”));’
   I am really proud of myself for figuring out this new syntax and getting it to work. It just says ‘do play hangman, then do play hangman while the user does not say no’.
2. The hangman page. Here I used a cup to act as the hangman (java logo is a cup). So I had the same cup character, but 6 different forms of that cup character - from the first happy to the last one dead. I made this cute cartoon cup character in emoji kitchen by combining whatever face for expression I wanted with the cup emoji. This produced some really good final results. I left out big chunks of text except a couple tiny lines because this activity was meant to be more of a game and less of an educative lesson. The pole and noose are animated over the cup. I spent a VERY LONG TIME manually adjusting the % and px values of the coordinates to make them match to try to get it as perfect as possible. I would edit a little value then have to crtl+s then go back to the page and lose purposefully, then make another microscopic edit then repeat. But the result was a very polished visual scene.

I added Recursion. It’s one of my favorite topics in Java.
It’s just whenever a method calls itself with different parameters.

1. I learnt about recursion and then coded some examples in Java.
   My biggest challenge in recursion was understanding which way the call stack went - I understood modified parameters but where the code was going was hard to track. Before I used to think that it went bottom up but I was wrong. It actually goes top down from the most recent call LIFO - last in first out. So chronologically 1 -> 3 -> 5 would print as “531” if those values were printed.
   I remade previous java projects using recursion.

• Finding Palindromes - GCD
• Consecutive Sum - Square Sum
• Numbers to Binary - Binary Search
• Experimenting with other euclidean algorithms
  Each project had its own challenges - I needed to handle String while checking Palindromes, and in binary conversion recursion the difference between n / 2 and n % 2 was important. And GCD has many different ways to implement so I tried different approaches and compared with old tries.

1. Making the actual page for it. It has a real natural call stack to visualize recursion in action.
   I needed to make some html title edits again. The page starts of with a quick definition and intro to recursion. then there is an interactive call stack activity for consecutive and square sums where you can literally watch recursion as it’s happening. Then there are java code snippets for recursion, with base cases and method calls annotated. Then there is a binary search visualizer, where you can see the call stack alive, thought process, and the way it is actually halving and eliminating numbers from the long list in the sorted array. This time I just have html and no css.

The text I/O activity is done. This was entirely different syntax from just arrays and arraylist because of using Scanner entirely different and PrintWriter - a new aspects of Java.

1. Problems while Java Coding - handling the IOException when the specified file already exists using 2 methods: the method itself throwing the error and then a try{} catch{} block. I used both to make sure and test that oth work. Something that was very repetitive was right-clicking the Eclipse panel and then clicking ‘Refresh’ for my new file to show up.

• The main java exercise I made for this was data about cereal being stored in files with a custom Cereal class and then putting real cereal data in a file then reading it and combining previous knowledge of arraylists and custom class creation to store it
• PrintWriter is used to create new files and Scanner is used to read with ‘Scanner scan = new Scanner(new File(path))’ - unlike normal Scanner for getting user input with ‘Scanner input = new Scanner(System.in);’

1. Making the page - the biggest issue here was that during the conversion the model got the main title from a main function name and then storing it a variable at the top - to try to dynamically change it but all the other simulations just have it hard coded so for this its just simpler to hardcode it in HTML. But, the problem was that I whenever I changed the dynamic name, the rest of the js stopped funcitioning. So I kept the dynamic const variable, but I instead of getting a real value from document, I just made it ‘placeholder’ and then put real stuff next to the dynamic call in the HTML - this workaround kept the dummy dynamic structure but the allowed hard coded title.
   ++ the rest of the page was just standard stuff like definitions, methods, common mistakes, simulations with loading, writing, and reading files, and of course java code snippets. It’s meant to be interactive and educative. This page particularly has many panels for the activity/game.

I added ArrayLists and Grades. I needed to really understand how arraylists work and how to fix issues like the ‘shifting problem’.

1. Grades minigame has been completed. The biggest issue in grades was getting the difficulty levels to show up. I can generate how many random numbers I want and find anything like mean or mode but getting them into categories is tricky. So, I just determined what category the test would be and then made random numbers for that. Additionality, the probabilities of a difficulties appearing are weighted - average and hard have around 40% chance of showing up but impossible and very easy only have a 10% chance.
2. Handling ArrayList logic was confusing because of the SHIFTING PROBLEM. Whenever an element is removed the index goes left so the current index accidently becomes one right or one greater so the next index is skipped. if index 2 is removed then the next element becomes index 2 but now current index is 3 so the new element at index 2 is skipped. For each loops won’t work because they just gave me a ‘ConcurrentModificationException’ for modifying it mid-loop.

• solution 1: go backwards so index just shifts left and you go left
• solution 2: decrement every time it is removed so you don’t go right too fast
  ++ I made the visuals for the ArrayLists website in a very creative way. For the picture I actually 1. went to word, 2. colored the tiles ‘Bad’ to make them red, 3. put in random values, 4. took a pic of the column, 5. took another pic of that pic with a little blank black space on the side, 6. with the pen made little annotations of arraylist methods on the blank space. The end result was a good png I am very happy with. I considered an animation but then this high quality drawing was better.
  ++ interactive and clean UI of course - maintaining color theme and emojis

I got lots of simulations on the frontend and ready. How I did this for each app was slightly different though:

1. Lockers - full description is that there are hundred students and hundred lockers from 1 to 100 each student toggles the locker that is a multiple of their number (ex: student 3 toggles 3, 6, 9, 12 and so on) and each of these students come and two for loops traverse the array and change it from True and False to dynamically represent them - this time the animation of getting the coral dots to run across the screen was hard so I needed to adjust the slider weights and px positioning but after some testing it worked
2. Grades - grades are randomly generated and put in an array then, they are sorted by each students grade and are compared then put using if and else statements
3. Merge - compare and then put into new array strangely tried user input as comma separated values
4. Math - buttons for Standard Deviation, Min, Max, Mean, Mode, Median and a ‘Grand Summary’
5. Shift Shuffle - shuffle the array L or R or Random - displayed by shifting table in html

• some have CSS and some are multiple java files sharing one app but all have HTML and JS
  ++ Hangman is a big game that still must happen
  ++ Data simulations still waiting and I am brainstorming how to show different data sorting clearly

I finished all of the Java games and simulations on arrays (1D) specifically.
Java Games/simulations laid out:

1. Hangman - temp array [] is loaded with word.length - continuously compared - if match updated
2. Lockers - All lockers are open and then students of intervals n + 1 close each locker updating boolean (makes more sense when you play the game because there explanation is detailed)
3. Distinct numbers are counted via a for each loop count is incremented and numbers are stored
4. Grades of students can be a A, a B, a C and so on and then loop goes through array to see
5. Standard Devotion, Mean, Average, Mode are calculated with formulas by looking at elements
6. Shift & Shuffle - all elements move Left or Right and all the elements can be shuffled randomly
7. Merge => BOTH values in index are compared simultaneously then whichever is > is handled
   Problems I had to fix:

• I needed to decide whether to make the method headers ‘void’ and directly manipulate the array or to make then return the result array
• Lockers was very frustrating to get the logic right because every student coming next has a different order of lockers they are going to use so n number of locker touches was Outer Loop above Inner loop and it was difficult knowing where to put the change
• Hangman required 3 booleans to see if game is going or its right or the current state of the man

• I completed Hangman and made some array simulations in Java and overcame array element logic