Showing posts with label animation. Show all posts
Showing posts with label animation. Show all posts

Monday, 1 June 2015

Pebbling in colour

The Pebble Time is finally out! This fantastically simple, yet massively functional, little smartwatch is now shipping to the Kickstarter backers who pledged their renewed support to the company that produced the original Pebble.



I've been lucky enough to be beta testing a developer preview model of the Pebble Time, and have had it on my wrist for the last few weeks. I used this time to put together some animated watchfaces which make the most of the colour screen, and learn some C programming along the way!





An elegant animated watchface, with each digit built from curving paths. Animated minute transitions, and tap-triggered animation to improve readability under low light. Animations, line widths and colours can be customised.

Inspired by the watchface shown on the red Pebble Time Steel advertising images:







A fun, animated, easy to read watchface. Every minute the bubbles in the background pop, and a set of new ones appear (by default) in a new colour. Alternatively you can customsise the colour of the bubbles. Tapping or shaking the watch also triggers the animation.

Inspired by the watchface shown on the red Pebble Time advertising images:






A colourful interpretation of the classic arc watchface design, with a Pebble Time-style loading animation and dynamic colour schemes. Colour schemes and whether or not to show the second hand can be customised.





A colourful interpretation of the classic pixel array digital watchface design, with loading animations, animated minute transitions and dynamic colour schemes. Colour schemes, pixel styles and animations can be customised.



Software used:
CloudPebble: Watchface programming. CloudPebble is an online IDE for Pebble watchfaces and apps.
Notepad++: Server side HTML/Javascript for the watchface settings.

Wednesday, 28 January 2015

Smooth Videos - AKA Correcting NASA

What makes a video look smooth? Your eye is extremely sensitive to problems with videos, and for any video to look smooth it has to have:

  • A high frame rate
  • A steady camera
  • Roughly even brightness each frame

Normally these are easy to get. Any modern camera will give a decent frame rate, and the exposure time for each shot will be accurate, giving an even brightness of images each frame. Camera steadiness is more difficult, but a basic tripod will solve that.

This is a lot harder in space! For a NASA space probe floating through deep space, keeping a steady orientation is a challenge. Spacecraft can do this well quite well, using thrusters and reaction wheels. They still make some small mistakes though. Getting an even exposure time for each frame of a video is also harder in deep space, especially as it might take minutes or hours for radio commands to reach the space probe so you have to trust its autoexposure. Luckily, given ok starting material, correcting camera shake and frame brightness problems by image processing is quite easy.

NASA's Dawn space probe is currently approaching Ceres, getting sharper pictures of this dwarf planet than ever before. A series of these pictures even shows this tiny world rotating. Unfortunately, they didn't correct the shake or brightness problems in the video released to the press:


A quick fix in ImageJ to remove the shake and even out the frame brightness makes a (dwarf) world of difference:


As the probe gets closer and closer to Ceres its shots are getting more and more spectacular, but the videos still need shake and brightness correction.


Interested in improving some NASA videos? I did the corrections using the free scientific image editing software ImageJ, and these are two handy macro scripts for video corrections in ImageJ:

Image stabilisation
//Stabilise based on signal intensity centroid (centre of gravity)
//Stabilises using translation only, using frame 1 as the reference location
//This method is suitable for stabilising videos of bright objects on a dark background
for (z=0; z<nSlices(); z++) {
 //For each slice
 setSlice(z+1);
 //Do a weighted sum of signal for centroid determination
 sxv=0;
 syv=0;
 s=0;
 for (x=0; x<getWidth(); x++) {
  for (y=0; y<getHeight(); y++) {
   v=getPixel(x, y);
   sxv+=v*x;
   syv+=v*y;
   s+=v;
  }
 }
 //Calculate the centroid location
 cx=sxv/s;
 cy=syv/s;
 if (z==0) {
  //If the first slice, record as the reference location
  rcx=cx;
  rcy=cy;
  print(rcx, rcy);
 } else {
  //Otherwise calculate the image shift and correct
  dx=cx-rcx;
  dy=cy-rcy;
  print(dx, dy);
  makeRectangle(0, 0, getWidth(), getHeight());
  run("Copy");
  makeRectangle(-dx, -dy, getWidth(), getHeight());
  run("Paste");
 }
}
Brightness normalisation
//Normalise image brightness to reduce video flicker
//Scales intensity based on the mean and standard deviation, using frame 1 as the reference frame
//This method is suitable for reducing flicker in most videos
for (z=0; z<nSlices(); z++) {
 //For each slice
 setSlice(z+1);
 //Find the signal mean and standard deviation
 run("Select All");
 getRawStatistics(area, mean, min, max, stdev);
 if (z==0) {
  //If the first slice, record as the reference signal mean and stdev
  rmean=mean;
  rstdev=stdev;
  print(rmean, rstdev);
 } else {
  //Otherwise calculate the brightness and scaling correction
  run("Macro...", "code=v="+rmean+"+"+rstdev+"*(v-"+mean+")/"+stdev);
  print(mean, stdev);
 }
}

Software used:
ImageJ: Image corrections
GIMP: Animated gif file size optimisation

Friday, 3 May 2013

Pebble

My Pebble arrived! It may be a one of the smartest watches around, but it is also shiny and curvaceous. Explore the curves and reflections in my macro photos in this flickr set....



 Software used:
ImageJ: Photograph animation
UFRaw: Raw extraction