The Physics library

Elastic smooth movement is everywhere and I wanted to experiment with it a bit for my consultancy little web page at incoding.ztp.pt. Besides I had this effect in my head for some time now. I wanted to blow my divided photo away and reunite it again in different combinations, as you will see below.

I started to look around for a physics simulation library. It should be fast, in other words, it should have only exactly what I needed for accomplishing those effects and not much more that would slow the computations. And I really found it on this physics javascript library by Jono Brandel.

The library is pretty straightforward: setup 2D particles and forces between them and hit “go”.

The effects

Besides the effects that I have described for my photo, I wanted a similar effect for a word cloud. In fact the effect is the inverse of the one on my photo: instead of the mouse repel stuff, mouse pointer would attract stuff!
[…]


Read the full article.

The control library from Infragistics, IgniteUI™, is tailored for general Javascript usage under JQuery. To use it within an AngularJS web app, they have made a directive wrapper called “Ignite UI directives for AngularJS” available on GitHub.

At the time of this writing I’m using IgniteUI version 15.1.20151.1005 and V1.0.0 of ignite-angularjs.js.

Directive without ID

The following code snippet uses the IgniteUI angular directives as indicated on its instructions. It declares the directive for an igGrid and configures it all using custom HTML elements. At the bottom of this article there is the full code for the final version.

<div ng-controller="ctrl1">
  <ig-grid data-source="dataJS" auto-generate-columns="true" event-data-binding="gridCreated">
    <features>
      <feature name="Selection" mode="row"></feature>
    </features>
  </ig-grid>
</div>
<script>
angular.module('app', ['igniteui-directives']).controller('ctrl1', ['$scope', ctrl]);
function ctrl($scope)
{
 $scope.dataJS = [
   {"title":"This is the title 1", "subtitle":"This is the subtitle 1", "id":1},
   {"title":"This is the title 2", "subtitle":"This is the subtitle 2", "id":2},
   {"title":"This is the title 3", "subtitle":"This is the subtitle 3", "id":3}];
 
 $scope.gridCreated