在处理中创建随机像素线

Question

我正在尝试制作一款游戏，但我陷入了随机关卡设计。基本上，我试图创建一条从一个边缘/角到另一个边缘/角的线，同时具有一定的随机性。

有关示例，请参见下图 1 [链接已损坏] 和 2。我正在 processing 中执行此操作，并且我尝试的每一次尝试都没有产生正确的结果。我可以让它们随机填充，但不能排成一行或从一边到另一边。顺便说一句，我正在尝试在 16 x 16 网格上执行此操作。任何想法或帮助将不胜感激，谢谢！

图片2：

Answer 1

根据您的描述，挑战在于从上到下有一条连接线，并且具有一点随机性驱动左/右方向。

有多种选择。

我想到的一个基本想法是：

• 左边就是中间的右边
• 选择一个起始 x 位置：从 0 到 15 的每一行（对于 16 px 级别），
  • 从 3 个数字中随机选择一个：
    • 如果是第一次向左走（x 减量）
    • 如果是第二次向右走（x 增量）
    • 如果是第三个：忽略：这意味着该迭代将直接向下移动

这是一个使用 PImage 说明这一点的基本草图 来可视化数据：

void setup(){
  size(160, 160);
  noSmooth();
  
  int levelSize = 16;
  
  PImage level = createImage(levelSize, levelSize, RGB);
  level.loadPixels();
  java.util.Arrays.fill(level.pixels, color(255));
  
  int x = levelSize / 2;
  for(int y = 0 ; y < levelSize; y++){
    int randomDirection = (int)random(3);
    if(randomDirection == 1) x--;
    if(randomDirection == 2) x++;
    // if randomDirection is 0 ignore as we don't change x -> just go down
    // constrain to valid pixel
    x = constrain(x, 0, levelSize - 1);
    // render dot
    level.pixels[x + y * levelSize] = color(0);
  }
  
  level.updatePixels();
  
  // render result;
  image(level, 0, 0, width, height);
  fill(127);
  text("click to reset", 10, 15);
}

// hacky reset
void draw(){}
void mousePressed(){
  setup();
}

上面的逻辑非常简单，但可以随意用其他选项替换 random(3) （也许 扔骰子来确定方向或探索其他伪随机数生成器 (PRNG)，例如randomGaussian()、noise()（以及相关函数）等）

这是上述内容的 p5.js 版本：

let levelSize = 16;
let numBlocks = levelSize * levelSize;
let level = new Array(numBlocks);

function setup() {
  createCanvas(320, 320);
  
  level.fill(0);
  let x = floor(levelSize / 2);
  for(let y = 0 ; y < levelSize; y++){
    let randomDirection = floor(random(3));
    if(randomDirection === 1) x--;
    if(randomDirection === 2) x++;
    // if randomDirection is 0 ignore as we don't change x -> just go down
    // constrain to valid pixel
    x = constrain(x, 0, levelSize - 1);
    // render dot
    level[x + y * levelSize] = 1;
  }
  
  // optional: print to console
  // prettyPrintLevel(level, levelSize, numBlocks); 
}

function draw() {
  background(255);
  // visualise
  for(let i = 0 ; i < numBlocks; i++){
    let x = i % levelSize;
    let y = floor(i / levelSize);
    fill(level[i] == 1 ? color(0) : color(255));
    rect(x * 20, y * 20, 20, 20);
  }
}

function prettyPrintLevel(level, levelSize, numBlocks){
  for(let i = 0; i < numBlocks; i+= levelSize){
    print(level.slice(i, i + levelSize));
  }
}

function mousePressed(){
  setup(); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>

在这两个示例中，数据都是结构化的一维数组，但是，如果它更容易，它也可以很容易地成为二维数组。在这个开发阶段，最简单、最具可读性的选项就是最佳选择。