All posts

2016

  • Using Angular.js to view Melbourne's public art

    I’ve been wanting to learn more about Angular.JS so made a quick web page to view the location all of Melbourne’s public art on a Google Map.

    There is an amazing amount of open data on the web. The Australian government has been releasing its data through data.gov.au. The dataset of all Melbourne’s public art seemed like a great place to start.

    I used the AngularJS Google Maps directives. It provdes a promise that gets called when Google Maps is loaded and ready to go. Then I fire off a http request to data.gov.au, with yet another promise that extracts the marker data and sets it the data bound markers array.

    I center the map over Melbourne with an appropraite zoom level and off we go.

    myApp.controller( "gMap",function( $scope, $http, uiGmapGoogleMapApi ) {
        uiGmapGoogleMapApi
        .then(function(maps) {
            $scope.map = { 
                center: { latitude: -37.8141, longitude: 144.9633 }, 
                zoom: 14 
            };
            $http.get("https://data.melbourne.vic.gov.au/api/views/6fzs-45an/rows.json?accessType=DOWNLOAD")
            .then(function(response) {
                var marker = response.data.data[0];
                $scope.markers = response.data.data;
            });
        });
    });
    

    The second piece is the markers themselves. Using ng-repeat directive, AngularJS will generate all the markers withut me having to write any imperative code.

    <ui-gmap-marker ng-repeat="marker in markers"
            coords="{ 'latitude': marker[19][1], 'longitude': marker[19][2] }" idkey="marker[0]">
          <ui-gmap-window>
            <div></div>
          </ui-gmap-window>
        </ui-gmap-marker>
      </ui-gmap-google-map>
    

    Now hard coding the column numbers of the data set isn’t the most robust solution, but it got the job done for this blog post!

    And finally here is page with the public art on a Google map.

    I was amazed at how easy this was to get up and running, and I hope to write some more AngularJS soon.

  • Using a Fluid Sim to Generate a Flow Map

    Fluid Simulation to Generate a Flow Map

    Here is a proof of concept of using a 2D fluid simluation to generate a Flow Map. This follows on from my Fluid/Flow Map ShaderToy experiment to do the same thing, except here I have a much better fluid simulation.

    Press the ‘f’ key to swap between the fluid simulation and the flow map. When the flow map is being displayed the fluid simulation stops.

    This could be used in a game to deal with dynamic obstacles in water or smoke, without having to run a full fluid simulation all the time. The fluid simulation could be amortised over many frames, leading to a cheap fluid effect.

    The implmentation is in ThreeJs/WebGL, check the source code of this page for details.

  • A fluid sim with flow map ShaderToy experiment.

    Following on from my previous Flow Map post, I wanted to see what flow maps would look like with maps generated in real time using a fluid sim.

2015