7 Comments on “360 Visualizer”

1. Sil3ncer7 Says:
   

   June 18th, 2008 at 11:36:15

   What was required for the 3d part. How does it render the “next” image? Looks awesome.. I love it.. Is that gt5 prologue?

   -Thanks

2. Daniel MacDonald Says:
   

   June 20th, 2008 at 08:43:03

   The CGI was produced by With a Twist Studio for the launch of the Nissan GTR. Here’s a story about the video: http://www.cgchannel.com/news/viewfeature.jsp?newsid=7341

   Thirty-six frames were exported from the video for the 360 Visualizer (a process repeated for each available exterior color). The JavaScript tracks the mouse position and loads either the next or previous frame after a short delay to create the spinning effect.

3. J5 Says:
   

   August 17th, 2008 at 02:35:43

   Here’s an extension of your plugin that can take a text file as source (rather than a folder of images), supports both click-and-hold and click-and-drag and has a parameter for the direction of spin (direction -1 or +1).

   jQuery.fn.view360 = function(o){
     var s = {
   	first: 1, last: 36,
   	direction: 1, responsiveness: 2.5,
   	source: "http://www.projectatomic.com/wordpress/wp-content/uploads/2008/05/",
   	sourceType: "folder",
   	imageType: "jpg"
   	/* source: "/360list.txt",
   	sourceType: "text" */
     };
     if (o) jQuery.extend(s, o);
     var img = [], i = s.first, mouseover = false, mousedown = false, mousemove = false, mousedownpos = {}, mousemovepos = {}, posiX = 0, timer, delay = 0, _this = this;
     function load360(){
   	switch (s.sourceType) {
   		case "text":
   			jQuery.get(s.source,function(data) {
   				var dlist = data.split("\n");
   				s.first = 1;
   				s.last = dlist.length;
   				for (i; i <= s.last; ++i) {
   					img[i] = jQuery('').appendTo(jQuery(_this));
   				}
   				i = s.first;
   				img[s.last].load(function(){jQuery("img:gt(0)",_this).css({"z-index":"0"});});
   				init360();
   			});
   			break;
   		case "folder":
   		default:
   			for (i; i <= s.last; ++i) {
   				img[i] = jQuery('').appendTo(jQuery(_this));
   			}
   			i = s.first;
   			img[s.last].load(function(){jQuery("img:gt(0)",_this).css({"z-index":"0"});});
   			init360();
   			break;
   	}
     }
     function init360(){
       jQuery(_this).css('cursor', 'move').mousemove(function(e){
         var scrollX = self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
         var offset = jQuery(this).offset();
         var centerX = parseInt(jQuery(this).width()) / 2 + offset.left - scrollX ;
         posiX = e.clientX - centerX;
       }).mousedown(function(e){
         mousedown = true;
   	  mousedownpos.x = e.clientX;
   	  mousedownpos.y = e.clientY;
         rotate360();
         return false;
       }).mouseup(function(e){
         mousedown = false;
   	  mousemove = false;
   	  img[i].css({"cursor":"move"});
         return false;
       }).mouseover(function(e){
         mouseover = true;
       }).mouseout(function(e){
         mouseover = false;
       }).mousemove(function(e){
   	  if (mousedown) {
   		  mousemove = true;
   		  mousemovepos.x = e.clientX;
   		  mousemovepos.y = e.clientY;
   		  rotate360();
   	  }
   	});
     }
     function rotate360(){
       if (mouseover && mousedown) {
   	  var movex = 0;
   	  if (mousemove) {
   		movex = mousemovepos.x - mousedownpos.x;
   		if (Math.abs(movex)  0)
   				i+=s.direction;
   			else
   				i-=s.direction;
   		} else {
   	        if (posiX > 0)
   	          i+=s.direction;
   	        else
   	          i-=s.direction;
   		}
           i = (i == 0 || i == s.last) ? s.last : i % s.last;
   		console.log("i: "+i+",prev: "+prev);
   		img[prev].css({"z-index":"1"});
   		img[i].css({"z-index":"2","cursor":"move"});
   		img[prev].css({"z-index":"0"});
         }
         if (!mousemove) {
   		// takes 300 milliseconds to start
    	    if (delay == 0) {
   			delay = -100;
   		} else {
   			delay = Math.round(Math.abs(posiX*2) / parseInt(jQuery(_this).width()) * 200) - 10; // 0-100
   		}
   		timer = setTimeout(rotate360, 200 - delay);
   	  }
       }
     }
     load360();
   }
   

4. J5 Says:
   

   August 17th, 2008 at 02:42:13

   Forgot to convert and & in the previous comment, and now it won’t let me post.

5. J5 Says:
   

   August 17th, 2008 at 02:48:12

   Emailed it to you. Feel free to change it, improve it, post it here, whatever.

6. Project Atomic » Blog Archive » 360 Visualizer Revisited Says:
   

   August 18th, 2008 at 01:02:49

   [...] when a developer takes some of your code and improves it in ways you cannot imagine. The original 360 Visualizer was just an attempt to recreate some functionality that is often seen in Flash, but rarely in DHTML [...]

7. James Says:
   

   September 18th, 2008 at 06:55:35

   Hi, I found your blog on this new directory of WordPress Blogs at blackhatbootcamp.com/listofwordpressblogs. I dont know how your blog came up, must have been a typo, i duno. Anyways, I just clicked it and here I am. Your blog looks good. Have a nice day. James.

Leave a Comment