I am trying to achieve mapping a set of 2D coordinates to a 3D surface of a sphere. To accomplish this, I am starting with an array of xy coordinates.
Using the following loops, I am generating 20*20 xy coordinates ranging from 0 to 1 on each axis:
var plot = []
for (var i = 0; i <= 20; i++) {
for (var ii = 0; ii <= 20; ii++) {
plot.push({
x: ii/20,
y: i/20
})
}
}
Then, I am converting the xy values to xyz values by iterating through the array:
for (var i = 0; i < plot.length; i++) {
points.push({
x: Math.sin(plot[i].x*(6.283185307)) * Math.sin(plot[i].y * Math.PI),
y: plot[i].y * 2,
z: Math.cos(plot[i].x*(6.283185307)) * Math.sin(plot[i].y * Math.PI)
});
}
I am facing two issues:
I have to use 6.2831.. because Math.sin(Math.PI*2) doesn't return 0
The resulting sphere appears distorted along the y axis: