如何在产生噪声的地形中实现相机移动

问题描述

我正在尝试转换此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 (将#修改为@）