WPP #2 - Follow-Up

Intro

Since the last time I checked, the UI hasn't posted the answers to the challenge questions.  I couldn't save the code for our solutions either, but I'll do a writeup with the gist of how to solve the problems.

Intro to a project I actually did on Sunday

So I actually did a project on Sunday. I wrote a NHL playoff predictor. It's fairly rudimentary and only based on the relative regular-season strengths (% of games won in the regular season), but it does 10,000 series simulations with 100 single-game simulations to predict the outcome of a series with reasonable accuracy.

The Maths

So the way the winner is calculated is by a HUGE series of averages.

First, the user inputs the strengths of each team over the regular season. The difference between the two is calculated (using Math.abs(strength1 - strength2)) and stored in a global variable.

In the series() method, it first enters a loop which will individually run 10k times, simulating a full playoff series 7 times. After this, it enters the individual series loop, which terminates after one team reaches 4 wins. Each game is simulated 100 times, and goes like this:

So each team's win is calculated by the difference in strengths applied as a handicap for the worse team. If one team has a strength of, say, .665 (the St. Louis Blues) and another has a strength of .610 (the Minnesota Wild), the difference of these strengths is .055. The method generates a random number between 1 and 0. This actually determines the winner of the game, as it is entirely random. If the teams have the same strength (in the case of the Washington Capitals and the New York Islanders), each team has odds of .5.  If the random number is in the 0 - .49 range, the Capitals win. Otherwise, the Islanders win. In the case of the Blues vs the Wild, however, the range of winning numbers increases by the difference in strength. For the Blues/Wild series, the blues can win in the range of 0 - .555, and the Wild have the other portion. This seems like a small and insignificant change in range, but when run, the program predicts a 4-1 series victory for the Blues almost 99% of the time.

Next comes the calc() method, which looks like this:

The aggregating portion works through the entire array and compiles the scores and the amount of wins per team. The winning score is calculated by taking the average of all the elements in the array, and then the % won and #/10000 win is calculated by counting the number of 4's in the winning team's array and dividing by 10000.

So there it is, the whole project. It can be found in my Github repo under the name 'Predictor', and I'll keep it updated.  Here are the projected scores for each series:

WEST

Blues vs Wild
Blues win 4-1 @98.54%

Predators vs Blackhawks
Predators win 4-3 @62.19%

Ducks vs Jets
Ducks win 4-1 @99.24%

Canucks vs Flames
Canucks win 4-2 @80.77%

EAST

Canadiens vs Senators

Montreal wins 4-1 @99.69%

Lightning vs Red Wings

Lightning win 4-1 @96.82%

Rangers vs Penguins
Rangers win 4-1 @99.99%

Capitals vs Islanders

Islanders win 4-3 @58.58%

WPP #2 - Friday

Intro

So tomorrow morning is the University of Iowa Hawkeye Programming Challenge; that's where I'll be for the majority of the day. This event will be my project for the weekend, and I'll see about bringing home the problems and the code that solved them.

There's another team that I believe won last year, and they're going to be there. It'll be a challenge, and I'm pretty excited to compete.

PS - complementary breakfast.

WPP #1 - Sunday

Intro

Today was the day I had to integrate the charts.

Done(?)

I finished the game early in the morning, making sure that the 'done' pane and graph buttons worked correctly. I made sure the margin values were generated correctly in the setMargin() function, and that the size of the buttons selected correctly. Most of these changes were in script files, and didn't take too long. I also changed some design elements (buttons, borders, etc.) to make it look simple and pretty damn good.

Charts

I used the Chart.js library to make the charts. First, though, I had to have a way to get data, and so I created the count() class. This class has methods that track the number of clicks on the dots and the total number of clicks, and every three seconds (1/10th of the length of the game) puts the number of clicks over the last three seconds into arrays. Each array (correct, incorrect, and total) is returned with accessor methods. The genData() is what actually does the timed data aggregation, and it's only called once in the whole project. I still have to finagle a little bit with the counters to make sure they return the correct amount of clicks and stuff, but you get the idea.

Anyway, I wanted to use a line chart to show how many correct and incorrect clicks, and then a bar chart to show approximated clicks/minute. The charts have to be imported from the Chart.js library, and if you click the link in my last update, you can find the Github link (or you can clone it using git). In order for it to work everywhere, though, I had to store it in my Dropbox folder just like everything else. Then initiating it was somewhat of an issue, as I wanted to display the two graphs in the same pane. I tried using one variable called ctx to reference a canvas DOM object. So my first declaration was this:

var ctx = document.getElementByID('canvas').getContext('2d');

ctx was a global variable, and every time the clicks/min or hits vs misses buttons were pressed, it would grab ctx and instantiate a new graph. However, the graphs didn't replace each other, they were just layered on top of each other. So, whenever a user would hover over an empty part of the graph, it would switch to the other graph under it, and whenever they moved back, it'd switch back to the top graph. So I changed it to the current system, like so:

// function that displays the hits v misses graph
$('#hits').click(function () {
    $('#canvas').remove();
    var $('#frame') = document.getElementByID('frame'), $canvas = document.createElement('canvas');
    $canvas.id = 'canvas';
    var ctx = document.getElementByID('canvas').getContext('2d');

.
.
.

Then the same happens for the bar graph. So instead of reassigning a value to a variable, I just make it local to the function. There's definitely a better solution, but for the sake of time and less thinking, I decided to go with this.

Done.

So this time I actually was done. I finished the project in my allotted time of 2 days, and worked about a total of ~10-11 hours finishing this up. I actually had my dad (did scientific programming in the 80's) and 2 University of Iowa CS/math professors take interest in what I was doing. So I think this project was a success.

Play the game.

WPP #1 - Saturday

Intro

Today was just to set up and roll out the game portion of this first project.

Game Making

So the whole point of this game is to see how fast and how accurately you can click. A pane for choosing the size of the clickable dots pops up, and then a play button that just starts the game.

After that, a series of timers start: one counts down from thirty and displays how many seconds are left; another displays the 'done' thinger and removes all the buttons from the screen. Noice, got that done.

However, the problem of generating margins was a fairly prominent issue, and it took a few resizes to get the margins just right.

Anyway, the first part of the game is live here and is documented here.

Weekend Programming Project Intro, WPP #1 - Friday

Intro

NOICE so I've decided to do a regular thing where it's cool. This is the introduction of WPP - the Weekend Programming Project. They're little things I'll undertake over the weekends to bolster my programming skills, documentation, and add to my repertoire. Usually, they'll fall into a few categories:

        - games

        - tools

        - widgets

        - web features;

I'll probably add more later on down the line. And, for my first trick, I'll start with a game.

Clicktime

It's time to make a game. 

So it'll be a game about how fast and how accurately you can click with a mouse/trackpad (or tablet, but it'll be slower). In the game window, little bubbles or objects pop up and you have to click them out of the screen as quickly as possible.

I was thinking about having a really basic HTML structure like this

where the game is played within the game window, and then the results of the game appear in a new window below that. The original window will show where the clicks were.

The programming will involve a good bit of JS. The HTML game window will be a set size, and so a random combination of width and height pixels will be generated. At that location, a DOM element will be placed, and you have to click it to make it disappear. If it pops up and you don't click within a certain amount of milliseconds, it'll remove the element and not increment the counter variable tracking how many clicks, and will also increment a counter that tracks how many weren't clicked.

After the game is played, I'll use chart.js, a nice JS framework to display the tracked data in a beautiful fashion.