Javascript 如何在噪声生成的地形中执行摄影机移动

我正在尝试转换此Java的草图： 转换成JavaScript程序。 这是我的在线版本，包含完整的代码： 只要草图是静态的，没有相机移动，一切都能按预期工作。 对于不知道p5和处理的人，setup（）在程序开始时调用一次，draw（）在每一帧调用一次。还有一些函数，如noise（）和constraint（），但它们不应该是问题。我认为解决方案是在补偿的某个地方，但我可能完全错了

let noiseScale=0.003；
让useMouse=false；
让梯度图；
让云图；
让云=[]；
让地面=[]；
让噪声=假；
让showDebug=false；
让cloudsOn=false；
设lastTime=0；
速度=1000；
设CloudSpeed=Speed*1.5；
//让用户四处走动，让事情变得更有趣
设camPos=new p5.向量（0,0）；
设camVel=new p5.向量（0,0）；
设cloudCamPos=newp5.向量（0,0）；
设cloudCamVel=newp5.向量（0,0）；
让hasSetup=false；
功能键按下（）{
//我需要一个用于切换反转的键
如果（键代码==73）{
反转噪声=！反转噪声；
generateGround（）；
generateClouds（）；
}
//用于切换云的C键
否则如果（键代码==67）{
克劳森=！克劳森；
generateClouds（）；
}否则如果（键代码==68）{
showDebug=！showDebug；
}
}
函数预加载（）{
//创建/加载渐变贴图
gradientMap=loadImage（'a.png'）；
}
函数设置（）{
createCanvas（500500）；
noSmooth（）；
lastTime=millis（）；
gradientMap.loadPixels（）
cloudMap=createImage（255,1）；
loadPixels（）；
for（设i=0；i0）{
generateGround（）；
generateClouds（）；
hasSetup=true；
}
返回；
}
设t=millis（）；
设dt=（millis（）-lastTime）/1000.0；
dt=约束（dt，0，0.3）；
camVel.x=int（映射（鼠标，0，宽度，速度，-速度）*dt）；
camVel.y=int（映射（鼠标，0，高度，速度，-速度）*dt）；
camPos.add（camVel）；
cloudCamVel.x=int（map（mouseX，0，width，CloudSpeed，-CloudSpeed）*dt）；
cloudCamVel.y=int（地图（鼠标，0，高度，云速，-云速）*dt）；
cloudCamPos.add（cloudCamVel）；
伊夫（克劳森）{
imageSubCopy（云[0]，云[1]，int（cloudCamVel.x），int（cloudCamVel.y））；
}
//将图像移到上方，为“缺失”部分添加噪波
imageSubCopy（地面[0]，地面[1]，内部（camVel.x），内部（camVel.y））；
如果（！cloudsOn）{
噪声尾（20,0.5）；
}
设xStartOffset=camVel.x>0？0:width-int（abs（camVel.x））；
让yStartOffset=camVel.y>0？0:height-int（abs（camVel.y））；
generateNoiseX（地面[1]，xStartOffset，int（abs（camVel.x）），int（camPos.x），int（camPos.y），gradientMap）；
发电机故障（接地[1]，