angular-img-cropper

angularjs image cropper

Having developed a javascript image cropper tool I thought I would get it working with AngularJS! As far as I am aware this is the only free image cropper directive at time of writing that supports a rectangular crop area with photoshop-esque controls. It also features the ability to enforce an aspect ratio as well as zooming. This means that on the client side a user can upload an image to your server that is not distorted and is already the correct dimensions.

An online demo can be found here and the source repository can be found on my GitHub.

image crop of penguins

HTML5 Image Cropper

For a project I am working on I needed a browser based (HTML5) image cropper tool so thought I would make one which I am releasing for free! The image cropper has a variety of features including:

  • Rectangular crop area
  • Aspect ratio enforcement (optional)
  • Zooming (optional)
  • Multi-touch on touch supported devices

A working demo can be found here. The source code can be found on my Github repository. Additionally in the repository you can find the TypeScript files as well as the JavaScript files. An AngularJS version is coming soon.

 

Fast water simulation developed with CreateJS and TypeScript

Fast Water Simulation

Recently I have wanted to get back into developing interactive content for the web. While the web used to be my primary target platform with Adobe Flash, the lack of support on mobile devices and the shift to HTML5 has forced me to adapt.

Fortunately there are a couple of technologies that can really assist developers to create HTML5 content and in my opinion drastically improve coding efficiency, bug reduction, as well as provide robust APIs.

The first of these is CreateJS, a collection of JavaScript libraries that provide APIs that cover tweening, preloading, drawing and sound. For Flash developers, some of these APIs should look familiar.

The second technology that I find very useful is TypeScript which is an extension of JavaScript. Personally, I think JavaScript is awful and painful when developing sizeable web applications. Everything about it seems extremely dated and the resulting code ugly and obfuscated. TypeScript on the other hand is based on the ECMAScript 6 proposal and should be more familiar to those with Java, C# and AS3 backgrounds. The best part is that TypeScript compiles down into nice, readable JavaScript that you can then continue to use on it’s own if you want.

Using these two technologies in tandem makes it an enjoyable experience to develop HTML5 content. As a fun example I have implemented Matthias Müller-Fischer’s Fast Water Simulation algorithm.

FizzX – Box2D level editor 0.1

After finding a bit of time I have fixed some glaring bugs and have now uploaded the first alpha version of my Box2D level editor called FizzX.

It’s an alpha so there are plenty of features missing and bugs, but I think it is at stage that you can build levels without too much drama :)

Controls

  • PanningArrow keys to pan in addition to holding down alt and dragging.
  • Rotating - Hold the left mouse button on a fixture edge, press and hold Q, and then drag to rotate.
  • Scale –  Hold the left mouse button down, press and hold T, and then drag to scale. (a bit buggy)
Tips
When incorporating images, it can be useful to pin them to prevent accidentally moving them once placed. Additionally, as images can block the selection of fixtures, a global lock images button will prevent all images from being selectable.

Roadmap

  • Add the remaining joint types.
  • Implement a preview window that can be scrolled.
  • Add zooming capabilities.
  • Select multiple fixtures to mass rotate and scale.
  • Add support for category bit masks.
  • Add support for Nape physics engine.
  • Release importers for Apple SpriteKit, LibGDX, OpenFL and more.
  • Improve GUI. May include porting over to LibGDX’s SceneUI.

Get FizzX 0.1