如何解决如何在产生噪声的地形中实现相机移动
我正在尝试转换此Java的草图: https://www.openprocessing.org/sketch/144860 进入JavaScript程序。 这是我的在线版本,包含完整代码: https://editor.p5js.org/drunkenjanna/sketches/ZUbU7t632 只要草图是静态的,一切都将按预期工作,并且不会移动相机。 对于不了解p5和处理的人,setup()在程序开始时被调用一次,而draw()在每一帧都被调用。还有一些函数,例如noise()和constrain(),但它们应该不成问题。我认为解决方案有些偏移,但是我可能完全错了。
let noiseScale = 0.003;
let useMouse = false;
let gradientMap;
let cloudMap;
let clouds = [];
let ground = [];
let invertNoise = false;
let showDebug = false;
let cloudsOn = false;
let lastTime = 0;
let Speed = 1000;
let CloudSpeed = Speed * 1.5;
// Let the user move around to make things more interesting
let camPos = new p5.Vector(0,0);
let camVel = new p5.Vector(0,0);
let cloudCamPos = new p5.Vector(0,0);
let cloudCamVel = new p5.Vector(0,0);
let hasSetup = false;
function keyPressed() {
// I key for toggling inversion
if (keyCode == 73) {
invertNoise = !invertNoise;
generateGround();
generateClouds();
}
// C key for toggling clouds
else if (keyCode == 67) {
cloudsOn = !cloudsOn;
generateClouds();
} else if (keyCode == 68) {
showDebug = !showDebug;
}
}
function preload() {
// Create/Load gradient maps
gradientMap = loadImage('a.png');
}
function setup() {
createCanvas(500,500);
noSmooth();
lastTime = millis();
gradientMap.loadPixels()
cloudMap = createImage(255,1);
cloudMap.loadPixels();
for (let i = 0; i < cloudMap.width; i++) {
cloudMap.set(i,color(255,i))
}
cloudMap.updatePixels();
ground[0] = createImage(width,height);
ground[1] = createImage(width,height);
clouds[0] = createImage(width,height);
clouds[1] = createImage(width,height);
ground[0].loadPixels();
ground[1].loadPixels();
clouds[0].loadPixels();
clouds[1].loadPixels();
}
/*
*
*/
function imageSubCopy(src,dst,xOffset,yOffset) {
let dstX = 0;
let dstY = 0;
let srcX = 0;
let srcY = 0;
if (xOffset < 0) {
srcX = abs(xOffset);
} else {
dstX = xOffset; //1
}
if (yOffset < 0) {
srcY = abs(yOffset);
} else {
dstY = yOffset;
srcY = 0;
}
for (; dstX < src.width && srcX < src.width; dstX++,srcX++) {
for (; dstY < src.height && srcY < src.height; dstY++,srcY++) {
index1 = 4 * (dstX + (dstY * src.width))
index2 = 4 * (srcX + (srcY * src.width))
dst.pixels[index1] = dst.pixels[index2]
dst.pixels[index1 + 1] = dst.pixels[index2 + 1]
dst.pixels[index1 + 2] = dst.pixels[index2 + 2]
dst.pixels[index1 + 3] = dst.pixels[index2 + 3]
}
if (yOffset < 0) {
srcY = abs(yOffset);
dstY = 0;
} else {
dstY = abs(yOffset);
srcY = 0;
}
}
}
function generateNoiseX(img,startXOffset,xWidth,shiftX,shiftY,map) {
for (let x = startXOffset; x < startXOffset + xWidth; x++) {
for (let y = 0; y < height; y++) {
let n = noise((x - shiftX) * noiseScale,(y - shiftY) * noiseScale);
n = invertNoise ? 1 - n : n;
index1 = 4 * (y * img.width + x)
index2 = 4 * (int(n * (map.width - 1)))
img.pixels[index1] = map.pixels[index2]
img.pixels[index1 + 1] = map.pixels[index2 + 1]
img.pixels[index1 + 2] = map.pixels[index2 + 2]
img.pixels[index1 + 3] = map.pixels[index2 + 3]
}
}
}
function generateNoiseY(img,startYOffset,xHeight,map) {
for (let x = 0; x < width; x++) {
for (let y = startYOffset; y < xHeight + startYOffset; y++) {
let n = noise((x - shiftX) * noiseScale,(y - shiftY) * noiseScale);
n = invertNoise ? 1 - n : n;
index1 = 4 * (y * img.width + x)
index2 = 4 * (int(n * (map.width - 1)))
img.pixels[index1] = map.pixels[index2]
img.pixels[index1 + 1] = map.pixels[index2 + 1]
img.pixels[index1 + 2] = map.pixels[index2 + 2]
img.pixels[index1 + 3] = map.pixels[index2 + 3]
}
}
}
function generateClouds() {
noiseDetail(20,0.5);
generateNoiseX(clouds[0],width,int(cloudCamPos.x),int(cloudCamPos.y),cloudMap);
image(clouds[0],0);
}
function generateGround() {
noiseDetail(20,0.5);
generateNoiseX(ground[0],int(camPos.x),int(camPos.y),gradientMap);
image(ground[0],0);
}
function draw() {
if (hasSetup == false) {
if (gradientMap.width > 0) {
generateGround();
generateClouds();
hasSetup = true;
}
return;
}
let t = millis();
let dt = (millis() - lastTime) / 1000.0;
dt = constrain(dt,0.3);
camVel.x = int(map(mouseX,Speed,-Speed) * dt);
camVel.y = int(map(mouseY,height,-Speed) * dt );
camPos.add(camVel);
cloudCamVel.x = int(map(mouseX,CloudSpeed,-CloudSpeed) * dt);
cloudCamVel.y = int(map(mouseY,-CloudSpeed) * dt);
cloudCamPos.add(cloudCamVel);
if (cloudsOn) {
imageSubCopy(clouds[0],clouds[1],int(cloudCamVel.x),int(cloudCamVel.y));
}
// Move the image over,add noise to the 'missing' part
imageSubCopy(ground[0],ground[1],int(camVel.x),int(camVel.y));
if (!cloudsOn) {
noiseDetail(20,0.5);
}
let xStartOffset = camVel.x > 0 ? 0 : width - int(abs(camVel.x));
let yStartOffset = camVel.y > 0 ? 0 : height - int(abs(camVel.y));
generateNoiseX(ground[1],xStartOffset,int(abs(camVel.x)),gradientMap);
generateNoiseY(ground[1],yStartOffset,int(abs(camVel.y)),gradientMap);
ground[0].updatePixels();
ground[1].updatePixels();
image(ground[1],0);
swap(ground);
let diff = millis() - t;
lastTime = millis();
if (showDebug) {
fill(0);
text(diff + " ms",40,40);
text(int(frameRate()) + " FPS",60);
}
}
function getOffset(shift,maxSize) {
return shift > 0 ? 0 : maxSize - abs(shift);
}
function swap(pArray) {
let temp = pArray[0];
pArray[0] = pArray[1];
pArray[1] = temp;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。