Wednesday, September 15th, 2010

Cool SVG Puzzle Demo Using JQuery SVG

Category: SVG

Via HRJ (“Overworked mad genius readying to take on the world. I am his neighbor”) comes a cool puzzle piece demo written using SVG and JQuery SVG:

HRJ has some nice code. First he calls the Flickr API using JQuery and JSON and makes a JigSaw puzzle piece for each one; in the code below he is also grabbing a picture name from the #hash value in the URL if it is present:

javascript

  1. updateStatus('Fetching photo from Flickr');
  2. $.getJSON('http://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=3cac122425cd16eaa1ea4c1b8bb3ff26&photo_id='+specifiedHash[1]+'&format=json&jsoncallback=?', function(response) {
  3.     if (response.stat && response.stat == 'ok') {
  4.       var p = response.photo;
  5.       $.getJSON('http://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=3cac122425cd16eaa1ea4c1b8bb3ff26&photo_id='+specifiedHash[1]+'&format=json&jsoncallback=?', function(response2) {
  6.         if (response2.stat && response2.stat == 'ok') {
  7.           updateStatus('Observe the tiles. Click on them to begin.');
  8.           var medSize = response2.sizes.size[4] ? response2.sizes.size[4] : response2.sizes.size[3];
  9.           currJigsaw = new JigSaw(medSize.source, medSize.width, medSize.height, p.urls.url[0]._content, p.title._content);
  10.           var locationMatch = photoHashIgnorePattern.exec(window.location),
  11.               myLocation = locationMatch ? locationMatch[1] : window.location;
  12.  
  13.           $('#puzzleLink').html('<a href="'+myLocation+'#photo_'+p.id+'">Puzzle\'s link</a>');
  14.         }
  15.       });
  16.     } else {
  17.       updateStatus('Error! Couldn\'t load image');
  18.     }
  19. });

The code that animates all the tiles when you first click on a board is interesting, using a bit of JQuery SVG:

javascript

  1. function startPlayInit() {
  2.       var imgCenter = {x : width/2, y: height/2};
  3.       for (var i = tiles.length; i--;) {
  4.         $(tiles[i].sN).animate({'svgTransform':'rotate('+[tiles[i].r,imgCenter.x, imgCenter.y].join(',')+') translate('+[imgCenter.x, imgCenter.y].join(',')+')'}, {
  5.           duration:1000,
  6.           complete : startPlay
  7.         });
  8.       }
  9.     }

Basically each of the tiles is rotated and translated over 1 second with a nice animation effect.

Posted by Brad Neuberg at 6:00 am
Comment here

+++--
3.9 rating from 7 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.