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.

Even More Coding

Intro

My goodness, what a jam-packed last two and a half weeks. That was absolutely bonkers.

Projects

I've been working on a bunch of new projects recently, mostly in web development. I started doing a lot of work in JavaScript over the past two weeks trying to get some cool things done.

Portfolio

Firstly, I added a bunch of new features to my portfolio website (I actually added a new button for my portfolio in the header). For a long time I wanted to be able to change the color scheme of the site. This is a sort of show-offy thing to do to kinda showcase my ability and promote myself. The portfolio site is essentially an advertisement for what I can do.

Anyway, creating a random color generator took a little bit of actual programming to make. I stored all the hexadecimal values (letters A-F and numbers 0-9) in an array, and then created a loop that ran six times, each time generating a random number from 0-15 which drew that same-numbered element out of the array. A little concatenation later, and we have a random hexadecimal color. Here's the code:

var letters = ["A", "B", "C", "D", "E", "F", 1, 2, 3, 4, 5, 6, 7, 8, 9];

function getColor() {
    "use strict";
    var j, first, newcolor = "#";
    for (j = 0; j < 6; j++) {
        first = Math.floor(Math.random() * letters.length);
        newcolor += letters[first].toString();
    }
    return newcolor;
}

It's pretty simple, and the "use strict"; is a variant of JS that is used to restrict JS in the browser. It affects arguments, how variables are used, basic semantics, and converts mistakes (like mistyped variables) into errors in the IDE or browser. This method is called in the jQ file that changes backgrounds, borders, and displays when each of the buttons are clicked.

Finally, a chance to mention Brackets - this is my IDE for JS, HTML, and CSS (I use TextPad and DrJava for Java). It's written in HTML and CSS, and offers a great deal of functionality. It has live editing, multiple file views, awesome plugins like JSLint, Emmet, Markdown editors (useful for Github; this editor also has Github flavored markdown as a language option), and tons of great themes that are readily available.

/rant

After all this, I wrote a bunch of jQ to make sure everything changed colors correctly, everything faded correctly, and (the best part) added animations to the hover menu. AND BUTTONS - a sexy amount of buttons.

The Date Time

While I was making my changes to the Portfolio website, I stumbled upon a text clock on the /r/webdev subreddit. I thought it was exceptionally cool and it was a chance for me to learn more JS and integrate jQ into it, so I embarked on the project. It took about 4 hours, but I finally got it done - the Date Time. It's a Blogspot-hosted site (as I don't want to pay for a domain and just want to showcase something small I've made), and it's even simpler than the Portfolio. It's almost as much JS as it is HTML, and it's honestly really cool to me. I used a really long switch() statement to assign each day or month name a time and place to change. Then, I wrote this little diddy

setInterval(function () {getTime(); makeMonths(); }, 1000);

which says that each method (which calculate the date/time from the  Date() object and displays it and the switch() for assigning days and months, respectively) will be called every second. This is only necessary for the getTime() function, as that's the only one that calculates seconds.

This was a nice project to work on and really fun to do (albeit a bit tedious at times) and I'd do it again for something even cooler.

Portfolio

Intro

So for the past couple of days, I've been working on a new project. As I'm applying for a web development/design position at the West Side Story (my school's newsmag), I have to make a portfolio. I submitted my application as soon as it was available, but that was a few weeks back, and I've done much more work since then, and I wanted to showcase it in a simple, clean way.

Code

I thought that having a streamlined, centered design would work well, and in doing so, had to change a few things. Normally, I'm partial to using the float property for making sure that things move together and that they're put into the right place, but for this one I used the display: inline-block property to make sure everything displayed correctly. After using this, everything within the element assigned the inline-block property can be treated as a basic text element, and can be aligned with text-align.

Stylin

I chose two things that I wanted to do in this little simple site. Firstly, I wanted to choose a nice, sans font that would appear somewhat blocky and would look good in bold and underlined. From my usual Google Fonts source, I chose Montserrat, a simple rounded sans font. I enjoy it, and it has really low load times; I want a low load time, since the site should be simple and clean.

The next thing I wanted was to have a hidden element; I chose to use the visibility CSS property to allow for a nice little hover section. I filled it with ideas for what I want to do next year, and it's just as simple and clean as the rest of the site; titles are aligned center and the text is justified, controlled by the text-align: center and text-align: justify properties respectively.

Making it

To complete this project, I went onto blogger and registered a new domain and then went to the HTML edit section of blogger. Then, I deleted the entire 2000-odd line theme and replaced it with the simple, single-page HTML-only document I had written up. Blogger wouldn't allow for a single HTML document, though, and so I had to keep the XML header tag, and the <b:skin></b:skin> and <b:template-skin></b:template-skin> tags. After this, I was able to fully upload the document, all 142 lines of it (/s). It's simple, clean, and very VERY lightweight. If anyone else has to do a portfolio for WSS ever, you can check my Github repository called Portfolio to see how I structured and did everything. It's really nice, and I think it'll make a good impression.