I was trying to make a sphere using some data I found on Wikipedia about the Orthographic projection of a map and there’s been something that has been keeping me busy for some time. When I run the project, on the center of the sphere there apears one pixel that is colored in a wrong way when changing the longitude. I tried to solve this problem in a lot of ways like using ifs to separe the wrong pixel from the rest of them or delaying the longitude of the wrong pixel but neither of those worked, can somebody help me?
var Canvas = document.getElementById("MainCanvas");
Canvas.style.imageRendering = "pixelated";
var Context = Canvas.getContext("2d");
var Sphere = {
radius: 80,
lat: 0,
long: 0
}
Render();
function Render()
{
let ImgData = Context.createImageData(Canvas.width, Canvas.height);
//Sphere.lat += 0.02;
Sphere.long += 0.01;
document.getElementById("Display").innerHTML = Sphere.long;
for(var y = 0; y != Canvas.height; y++)
{
for(var x = 0; x != Canvas.width; x++)
{
/*Get the true position*/
let TrueX = x - Canvas.width / 2;
let TrueY = Canvas.height / 2 - y;
/*Get the distance*/
let Dist = Math.sqrt(TrueX * TrueX + TrueY * TrueY);
if(Dist < Sphere.radius)
{
let C, CurrLat, CurrLong;
/*Get the depth of a sphere point*/
C = Math.asin(Dist / Sphere.radius);
/*Color the pixel*/
if(TrueX === 0 && TrueY === 0)
{
CurrLong = (Sphere.long) % (Math.PI);
CurrLat = (Sphere.lat) % (2*Math.PI);
}
else
{
/*Get the latitude (Clamped the value to 0 → π)*/
CurrLong = (Math.asin(Math.cos(C)*Math.sin(Sphere.long)+(TrueY*Math.sin(C)*Math.cos(Sphere.long))/Dist)) % Math.PI;
/*And the longitude (Clamped the value to 0 → 2π)*/
CurrLat = (Sphere.lat + Math.atan2((TrueX*Math.sin(C)), (Dist*Math.cos(C)*Math.cos(Sphere.long) - (TrueY*Math.sin(C)*Math.sin(Sphere.long))))) % (2*Math.PI);
}
ImgData.data[4*((y * Canvas.width)+x)] = (CurrLong / (Math.PI)) * 255;
ImgData.data[4*((y * Canvas.width)+x)+1] = 0;
ImgData.data[4*((y * Canvas.width)+x)+2] = (CurrLat / (Math.PI * 2)) * 255;
ImgData.data[4*((y * Canvas.width)+x)+3] = 255;
}
else
{
ImgData.data[4*((y * Canvas.width)+x)] = 200;
ImgData.data[4*((y * Canvas.width)+x)+1] = 200;
ImgData.data[4*((y * Canvas.width)+x)+2] = 200;
ImgData.data[4*((y * Canvas.width)+x)+3] = 255;
}
}
}
Context.putImageData(ImgData, 0, 0);
requestAnimationFrame(Render);
}#MainCanvas
{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url("https://c.tenor.com/k9yAts9ymaIAAAAM/loading-load.gif");
background-size: 100vw 100vh;
}
#Display
{
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="MainCanvas" width="400" height="200"></canvas>
<div id="Display"></div>
</body>
</html>