CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Ancyent
Ancyent

Reputation: 27

Draw a html5 canvas cylindre with camera view inside the cylinder

I think the title is self-explanatory. I need to build html5 canvas cylindre with the camera view in the center of the cylinder. On the wall of the cylinder i need to build something like pictures, the cylinder to rotate and zoom.

If anyone has some pointers as to where to start with the camera and the cylinder please help.

To help you understand my description i have posted a image http://s21.postimg.org/fpnmukbef/inside_cilindre.jpg

Upvotes: 0

Views: 1375

Answers (1)

r043v
r043v

Reputation: 1869

i think you must work on the 2d picture and on last step transform the needed part

to transform the good part into 3d, i think you must stretch each colon depending on the parabola equation you choice

function getStretch(x,maxx)
{ /* here i choice :
     f(x) = (x*x)+3 for top
     f(x) = -(x*x)+1 for bottom
     when y >= 0 and y <= 4
     x >= -1 and x <= +1
  */

   // convert x ~ maxx to -1 ~ 1
   var ratio = 2/maxx; // -1 to 1 === 2
   x = x * ratio;
   x -= 1; // switch from 0 ~ 2 to -1 ~ 1

   var sizeY = 4;
   var y = -(x*x)+1; // bottom get y >= 0 and y <= 1 result, easier to compute
   y *= 2; // double to add up and bottom
   var colonHeight = sizeY - y;
   var colonRatio = colonHeight / sizeY;
   return colonRatio; // return the height ratio for this colon
}

values for a 101 colons view : http://jsfiddle.net/L9YgL/1/

var view_start_x = 200; // current view start at 200px from left source image
var view_size_x  = 399; // current view work on 400 px width

// get our stretch ratio for each colon
var stretch_values = [];
for(var x=0;x<=view_size_x;x++) stretch_values[x] = getStretch(x,view_size_x);

// now we need a function to get the colon height and position

var colonHeight = 400; // height of source image, and max height of out

function getColonInfo(x)
{ if(x < 0 || x > view_size_x) return {h:42,y:0};
  // compute current colon height
  var ratio  = stretch_values[x];
  var height = parseInt( colonHeight * ratio ,10);
  var posY = parseInt( (colonHeight - height)/2 ,10);
  return {h:height,y:posY};
}

// save this info for each out colon
var colon_info = [];
for(var x=0;x<=view_size_x;x++) colon_info[x] = getColonInfo(x);

// now a function to render a colon with a zoom

function renderColon(x,sourceX)
{    var info = colon_info[x];
     var originalHeight = colonHeight;
     var height = info.h;
     var y = info.y;
     // now do your reduce/blit magic here
     // render at "x","y" a colon with height of "height"
     // from source colon "sourceX" who get height of "originalHeight"

}

// and a function to iterate each colon and do the magic  

function my2dTo3d()
{
    for(x=0; x<=view_size_x; x++)
    {    var offset = x + view_start_x;
         renderColon(x,offset);
    }
}

ok there certainly be a better method to do this, here i do it at hand, maybe css3 ?

Upvotes: 1

Related Questions