2D画像で作業し、最後のステップで必要な部分を変換する必要があると思います
良い部分を3Dに変換するには、選択した放物線の方程式に応じて各コロンを伸ばす必要があると思います
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
}
101 個のコロン ビューの値: 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);
}
}
確かにこれを行うためのより良い方法があります。ここで私はそれを手元に置いています。