how did this artist get this live turntable render?

travisdreams · Apr 2013

There's an artist i saw on the most recent recap named Goldo_O and he posted a turntable render of his character work:

http://www.ddez.fr/turntable/?turnt=TinyTina_Cookies

And i was wondering how he got his model to become a live turntable render like that?

i tried checking www.ddez/fr but i had no idea what i was looking at :P Anyone know how he's got this?

i remember theres another site that does this similarly but i just wondered how he specifically got this to work because i saw that in the page source it was just loading multiple images?

Polynaut · Apr 2013

Travis - this is a series of images rendered out of Marmoset. If you right click and inspect the turnaround you'll see it's switching through the images like scrubbing a timeline.

I have something similar on my portfolio. If you're crafty you can 'borrow' it and implement it into your website. I can't help you there because my brother coded mine!

travisdreams · Apr 2013

Polynaut wrote: »

Travis - this is a series of images rendered out of Marmoset. If you right click and inspect the turnaround you'll see it's switching through the images like scrubbing a timeline.

I have something similar on my portfolio. If you're crafty you can 'borrow' it and implement it into your website. I can't help you there because my brother coded mine!

ooooo cool, is there maybe keyword i can search/link to approach coding it?

ZacD · Apr 2013

I like this version better personally, http://turntables.stepanchikov.com/meshes/8

But you can right click > view source on ether website and just copy their source.

And there is this http://jquery.vostrel.cz/reel

Angry Beaver · Apr 2013

the quick outline of how to program that (in pseudo code)

var pictures = ["url1","url2",...];
var frame;
var clickStart;
var currentPic;
var offset;

window.onload = function(){
  var preloader = new Preloader();
  preloader.load(pictures)
  preloader.addEventListener("complete", onComplete);
  frame = document.getElementByID("frame");
  frame.className = "loading";
}

function onComplete(e){
  frame.className = "ready";
  currentPic = 0;
  frame.style.background-url = "url("+pictures[currentPic]+")";

  frame.addEventListener("mousedown", onMouseDown);
}

function onMouseDown(e){
  window.addEventListener("mouseup", onMouseUp);
  window.addEventListener("mousemove", onMouseMove);
  clickStart = e.x;
}

function onMouseMove(e){
  offset = (e.x-clickStart) % rotFactor;
  var target = (currentPic + offset) % pictures.length;
  frame.style.background-url = "url("+pictures[target]+")";
}

function onMouseUp(e){
  window.removeEventListener("mouseup", onMouseUp);
  window.removeEventListener("mousemove", onMouseMove);
  currentPic += offset;
  offset = 0;
}

I do this stuff for my day job ATM so if there's any questions about intention feel free to ask. Libraries are always a way to do it if you don't 'get' the code.

travisdreams · May 2013

okay so you guys gave me very helpful resources, thank you! i just have to study how to apply these codes towards my blog/future website hehe

how did this artist get this live turntable render?

Replies