Google+

National Pi Day - Calculating PI With AngularJS and a Monte Carlo Simulation

Every year on 3/14, Geeks everywhere can let their geek flag fly by celebrating National Pi Day. On this day, every year, the date equals the first three digits of π, 3.14. Last year we celebrated with a blog post, so let’s do it again!

In last year’s post, we calculated Pi using Leibiniz formula to determine π, which is a relatively slow algorithm.

This year we are going to look at a totally different approach, a Monte Carlo simulation. A Monte Carlo simulation is a statistical approach where you use random numbers to run a simulation over and over and record those results. It is very popular in the fields of finance, fluid mechanics and the study of Brownian Motion. For our scenario today, you can also use a Monte Carlo method to calculate π!

To do this, we are going to use two geometric formulas, one to calculate the area of a square and the second the area of a circle. If we put a circle of radius R in a square of length 2R, we have a scenario as shown in Figure 1.

Circle in Square

The area of the rectangle will then be 4R and the area of the circle will be πR. Dividing the area of the circle by the area of the rectangle give us π /4. Stated another way, the ratio of area of the circle to that of the square is Pi/4.

The Monte Carlo method comes into play because we will randomly put a point on the square. If the point falls within the circle, we record it. The total ratio of points in the circle (aka, the area of the circle) to total points (aka, the area of the square) will tell us π /4.

So, we now know a way to calculate π, the next step is to actually write some code. There are, obviously, many ways we could go and do this, but lately I have been kicking the tires with AngularJS and thought this would work as well as anything.

We won’t spend a lot of time jumping into AngularJS. You can check out some previous posts at http://www.jptacek.com/tags/angularjs/ for an introduction.

We will have two things, our chemistryApp.js file to create our angular application, piApp, and our controller, where the interesting stuff will happen.

Our HTML file is pretty basic,

<div id="piApp" ng-app="piApp">
    <div id="piCtrl" ng-controller="piAppController">
        <input id="iteration" data-ng-model="iterations"/><br/>
        <div id="piCalc" >{{pi}}</div><br/>
        <div id="piCalcDiff" >{{delta}}</div><br/>
        <button data-ng-click="calculatePi()" >Update</button>
    </div>
</div>

We will enter in the number of random dots (iterations) we want our simulation to run. The more dots, the closer we get. We will then display the calculated value of π and how close we are to π actual. Last, we have a button that we will click to execute our Monte Carlo simulation.

Our AngularJS controller is where the interesting stuff is happening, and that is not even particularly interesting.

We have created a function, determinePi, which will perform our calculation. We assume a circle with a radius of 1. We then generate two random numbers, one for the x position and one for the y position. We know that (x + y)=1 (the radius of our circle), so for any value that is less than this, we know we are inside the circle and increment a counter for hits inside. Once we are done with the iterations, we determine our calculated version of π and the difference from our known value of π for display on the page. In our calculation, we are only really doing a quadrant, just to make the code a bit easier to follow. It all works though since we are just talking about ratios.

This is not a super accurate, or super-fast method of calculating π, but it was an interesting chance to take a quick look at Monte Carlo methods, which are common place with a subset of our clients.


{{pi}}

{{delta}}

Happy Pi day! Go have a nice piece of Apple Pie and enjoy the day!!

This post originally appeared at Skyline Technologies


 

Speculations for Build 2014

Build is a Microsoft developer conference that has taken the place of their Professional Developer Conference (PDC). The first Build was held in 2011 and introduced the world to Windows 8, along with an early preview of Windows 8 and a Samsung tablet. You can read my thoughts on Build 2011 here. In 2012, Build was held in Seattle and saw the release of Windows 8 and Microsoft’s Surface RT tablet. In 2013, Build was held in San Francisco and Microsoft announced Windows 8.1 as well as made available a preview release for developers. Before Build 2013 last year, I took a stab at speculating about what would be coming and did pretty spectacularly bad. With Build 2014 a month away, I thought it would be fun to try again!

Build 2013

First, it is interesting to look at how short the time is becoming between Microsoft Build conferences

  • Build 2011, Anaheim, CA September 13 - 16, 2011
  • Build 2012, Seattle, WA October 30 - November 2, 2012 (~13 months later)
  • Build 2013, San Francisco, CA June 26-28, 2013 (~8 months later)
  • Build 2014, San Francisco, CA April 2-4, 2014 (~9 months later)

You can see that Microsoft is quickly iterating and getting information out to developers. However, having said that, certain parts of Microsoft are executing VERY fast (I am looking at you Azure) and other parts are executing VERY slow (I am looking at you Windows Phone). With the breadth of developer platforms Microsoft has, they have many opportunities to get in front of developers, but it not always what the developers are expecting. So all of that to say this.... A lot of my speculation for Build this year looks a lot like last year! There are still some important pieces for the Microsoft developer story that I believe have yet to be communicated.

3D Printer Guitar

###One API To Rule Them All### The reality is, developing on the Microsoft stack today can be downright confusing. You have options between....

  • Web using MVC with HTML/JS/CSS
  • Web using Silverlight (version of XAML), though this is deprecated
  • Desktop using WPF (version of XAML)
  • Windows Modern/Metro/Store Apps using WinJS with HTML/JS/CSS
  • Windows Modern/Metro/Store Apps using XAML
  • Windows Phone (version of XAML)

For shops that are all in on the Microsoft stack, it can be confusing to determine what to go all in on. If you are a web developer and love HTML and JavaScript, your options are limited for Windows Phone. If you love all things XAML, you have to choose amongst WPF, Windows Phone or Windows 8 flavor of XAML. And while the XAML platforms are similar, they are not similar enough to not have a lot of rework. Things have gotten better though over the years with the introduction of the Cross-Platform portable class library, though it is still cumbersome hitting multiple endpoints.

Last summer I wrote

One API To Rule Them All – With the core of Windows driving Xbox One, Windows Phone and Windows 8, will Microsoft release a single API that enables development across all of their platform? That would be great to see and could drive a lot of great applications across Windows, Windows Phone and Xbox!

This year, I can write the same thing. There have been rumors coming from a leaked release of the Windows Phone 8.1 SDK of Universal Binaries that will allow Windows Phone 8.1 and Windows RT/Metro/Modern/Store Apps have a common base. According to the earlier link, over 75% of Windows Phone and Windows RT have the same shared API. That would be a great starting point for Windows 8 developers, especially if WinJS development is now an option for Windows Phone 8.1. Giving developers the opportunity to have one platform they can choose to develop on and hit multiple devices in the Microsoft devices strategy would be a great leap forward.

###Windows RT###

Last summer I wrote

Windows RT – Microsoft Windows RT, the ARM based version of their Operating System, is in a weird place. It runs Metro/Modern Design apps in a full touch mode. It also ships with a subset of Microsoft Office such as Word and Excel. However it does not run other Windows applications. What it does do is run all day on a single charge. It is a great productivity tool for knowledge workers. However, with the release of Intel’s Haswell chipset it seems that all-day battery life will be available on much more powerful chipsets. What, then, becomes the future of Windows RT? Will it move to being Microsoft Windows Phone OS? Will Microsoft reduce the cost of Windows RT to get more hardware vendors building machines? Maybe we will find out more at Build!

Again, same thing this Build. Windows RT has not had a lot of explanation about its continued existence in the Windows ecosystem. I am not 100% sure, but I believe the only devices released for WinRT in 2013 were from Lumia (Lumia 2520) and Microsoft (Surface2). The good news is, both of these devices were well received. The battery life and productivity for ARM based tablets running RT make for great use cases. However, as Intel releases improved Haswell and Atom chips with great battery life and the ability to run desktop applications, it doesn't make long term sense for Microsoft to support both platforms the way they are now. Unless, Microsoft is focused on making Win RT the phone platform as well as a tablet only platform, without the legacy desktop. I am pretty sure this is the case, but we haven't heard it from Microsoft yet. Maybe this Build we will?!?!

###Devices and Services Company### Microsoft has repeatedly said they are now a devices and services company. Since this announcement in 2012, they have released both Windows Surface Pro and Windows Surface RT, along with follow up versions in 2013. The Pro update was minimal in terms of hardware (adding the Haswell chip), but the Surface RT 2, now called Surface 2, saw a pretty significant upgrade in performance and hardware. In 2013, the release of Xbox One happened. Other than that, not a whole lot in terms of devices.

Obviously, the purchase of Nokia's Lumia line will see a lot more Microsoft devices being released in 2014. However these will be phone devices, there has not been a 7-8 inch Surface release to compete with the iPad Mini or Kindle fire, the fastest growing tablet market. There also has not been a Microsoft Laptop/Ultrabooks released. Further, we still are not sure what happens to the Lumia Brand and the Surface Brand. Will they merge? Will one replace the other? Will one be the Tablet platform and the other the Phone platform? Will one be for consumers and the other for enterprises? An explanation of these brands moving forward would be great!

I expect that Build 2014 will shed a lot more light on this, especially the company's strategy for integrating Nokia and the possible announcement of a Surface Mini. In general, except for the first Build, it is not a place where Microsoft announces hardware though.

###Xbox One### With the news that Xbox One is built on Windows 8, and a tease at Build 2013 about a JavaScript based API for Xbox One, everyone I talk with thinks Xbox One will be part of Build 2014. Bring it on! This will be exciting for indie developers.

###Windows Phone### My guess, and that of many others, is above all things, Build 2014 will be about Windows Phone 8.1. I, and most of the world, expect them to show Windows Phone 8.1 while hitting on the developer story. It may be even that some new Lumia devices are announced to drive developer enthusiasm.

###Kinect for Windows RT###

Last year I wrote

Microsoft’s Kinect is impressive technology. Microsoft released a Kinect for Windows last year, but the hardware did not work on the RT side of the house. Will there be APIs in Windows RT for Kinect? Will there be new Kinect hardware?

This year, I again hope that the Kinect API will be part of the Win Metro API so developers can take advantage of the Kinect in Windows 8.1 apps. The technology is too impressive for Microsoft to just let it be used on the Xbox platform!

###Azure### Microsoft's Azure platform is amazing. The degree to which the Azure team can execute and release new features is dizzying. As someone who is a big proponent of the cloud for organizations to embrace, I spend time following the various platforms. It is hard to keep up with all the great things the Azure team is doing.

The one thing that I am most interested in seeing from Microsoft over the next year, is if the speed of execution that Satya Nadella bought to the Azure team when he led the group, can be bought to the whole Microsoft organization. If there is one person from within Microsoft that can execute on the Microsoft One strategy, it is Satya. It will be something to watch in 2014.

###Pick a Name### I am still very confused by what Microsoft calls its non-desktop platform, aka the Windows formerly called Metro. Is it Windows Store apps? Is it Modern apps? Is it Win RT? What is the Microsoft design language formerly known as Metro called? It would be nice to clearly and concisely pick the terms and have everyone use the same vocabulary. Even the Microsoft developers presenting at previous Builds still call everything Metro!

###Conclusion### I have the sense that Build 2014 is really Build 2013, part 2. A lot of the pieces that weren't fully basked for Build last June, like Xbox One and Windows Phone 8.1, should be announced this April. I am quite hopeful that the Microsoft One vision will be introduced for developers at Build 2014. I believe this will really help Microsoft accelerate application across multiple platforms and give developers a sense of ease about a single execution strategy. More to come!

I will be out at Build 2014. Feel free to hit me up on twitter, @jptacek if you are out there in April.


 

Setting Up Cordova (PhoneGap) for Development on Windows Machines

Cordova, also known as PhoneGap, is an interesting technology to bundle up mobile web apps created with HTML, CSS and JavaScript for deployment across multiple phone platforms, such as iOS and Android. Cordova also has a JavaScript library that provides access to phone features such as the camera, accelerometer, compass, etc. For organizations that don’t want to invest in coding up an application for multiple platforms, it can be a quick option. Recent versions of Cordova have utilized a Command Line Interface (CLI) for installation and configuration leveraging Node.JS for their implementation.

The terms PhoneGap and Cordova can be a bit confusing for folks, especially for those just getting started. PhoneGap was a platform for creating mobile applications using native web technologies produced by Nitobi. Adobe then purchased PhoneGap. Around version 1.9 of the product, they Open Sourced PhoneGap and called it Cordova. They kept the PhoneGap name and have extended things a bit by creating an great back end system to build for multiple platforms as well as starter solution for different platforms. More information about PhoneGap can be found at phonegap.com. The reality is I, and most people, refer to the names interchangeably, but there are differences.

So with that out of the way, let's look at how wo install Cordova on Windows 8.

First, you will need to download and install Node.js from http://nodejs.org/download. After this, you should be able to start up PowerShell and run Node from the command line. You can ensure you have node setup by running node –version within a PowerShell prompt

Cordova Version check

We will be installing global packages via the Node Package Manager (NPM). If you have never used or installed Node previously, you will need to update your path variables to the global packages location is in your path.

This is done by going to the computer properties and selecting Advanced System Settings

System Settings

Since we need to update the path, we choose Environment Variables

Environment Variables

Within the Environment Variables, there are two paths you can choose between, the path for the logged in use and the path for all users. I usually update the current logged in user (the first Path listed under user variables for jptacek)

Path variables

You then just update the Path by clicking edit and adding the location of the NPM packages by appending the following

%userprofile%\AppData\Roaming\npm

Note, if you did not have the NPM packages in your path and have taken these steps, you will need to restart PowerShell for your environment variables to be set. At this point, we have Node setup and are set to install Cordova. This is accomplished via the Node Package Manager (NPM), which downloads and sets up Node applications.

Npm install –g cordova

Cordova Install

The –g flag indicates to the NPM package manager that that package should be installed globally. On Windows, this directory is often your user directory, AppData\Roaming\NPM, which we talked about setting up above.

Now that we have Node and Cordova setup and configured on our machine, we are moving on to the fun stuff, app development!

The way Cordova applications work is by having a base web application with our HTML, JavaScript, CSS and other assets. For each platform we want to deploy and build locally, we have to add the platform. This will also enable us to use emulators for devices on our development machine. We will then invoke the build process, which takes assets from our main WWW application and packages and deploys them to the various platforms we have on our machine. So if, as we are about to do, have platforms for Windows Phone 8 and Windows 8, the build process takes our web assets from our base WWW app, copies them to those specific platform installs.

Let us take a look at this…

To create an application in Cordova, we use the CLI to have it generate the shell of our application by running the Cordova create command

cordova create MyApp com.jptacek.MyApp MyApplication

The MyApp parameter identifies the directory for the application, which will be created. The second argument, is the identifier, which you want to be unique. Most people use the reverse domain style identifier. The last parameter is optional, but is the title of the application for display.

This process will actually go and download the latest template and create the project structure

Cordova App Creation

If we take a look in our directory, you will see it created the default structure for the application with the creation of a www directory with a shell application, a plugins directory, etc.

Cordova App Creation

So far, so good, but we cannot actually BUILD anything yet because we haven’t created any platforms on the development machine. The WWW directory shown above has our HTML, JavaScript, CSS and other assets. The platforms are the various devices we want to be able to build locally on our machine. The implication here is that you need to setup the local machine for those platforms. This is done by adding the platforms via the CLI.

Since we are doing this on a Windows machine, we will add two platforms, one for Windows Phone 8 and one for Windows “Metro” 8

Add application platform

Note, if you try and add platforms that are not available for development, Cordova will not allow this. For example, you cannot do iOS development on a Windows 8 machine, so Cordova will not be able to find the XCode libraries and will raise an error trying to setup. If you want to be able to build locally for an Android device, you will need eclipse and the Android SDK, etc.

By adding the platform, you are actually creating Visual Studio solution files for creating both a native Windows Phone 8 and

Windows 8 application that can be loaded in Visual Studio and run with the appropriate emulator.

Solution Directory

You can load up these solutions and run them natively. However, you first need to build the solution. At this point, you just have a skeleton setup for the project, no assets have been deployed to the skeleton of the project. To do this, you will run the build command in Cordova.

Cordova build

This then enables you to run either Windows 8 or Windows Phone 8 to see your solution. Two things… Since each build recreates your solution files from the default WWW directory, your changes will be overwritten. As a result, I usually don’t like doing my code editing with the WP8 and Windows 8 emulator.

Second, since you essentially have a web application, you like having access to tools you have come to know and love like Chrome Developer tools or FireFox as you develop your code. For this reason, I usually will create a Virtual Directory to server up the WWW assets from a platform, for example, Windows8, that are deployed during a build. This allows for me to use my tools of choice for web development.

The reality is, I am most likely to use build.phonegap.com for testing by using the actual native deivces. Build.PhoneGap.com will actually take your source, and build your application for the multiple platforms supported by PhoneGap. Its hydrate function automatically check for new versions and downloads when you launch on a mobile device like Android or Windows Phone.

I have not found a great way to do development with PhoneGap. I am VERY interested in the workflow other people use for their Cordova/PhoneGap development, please share!


 

John Ptacek I'm John Ptacek, a software developer for Skyline Technologies. This blog is my contains my content and opinionss, which are not those of my employer.

Currently, I am reading Norse Mythology by Neil Gaiman

@jptacekGitHubLinkedInStack OverflowGoogle+