javascript - 我的代码不是从数组中向屏幕绘制条形图

Question

我正在尝试制作其中一种排序算法，并希望随机生成带有高度和 x 位置的条形图。但是，当我运行代码时，它不会绘制任何条形图。我也没有收到任何错误消息，所以我不知道出了什么问题。

class Bar {
  constructor(x, height) {
    this.height = height;
    this.size = 10;
    this.x = x;
  }

  draw() {
    fill("blue");
    rect(this.x * this.size, height - (this.height * this.size), this.size, this.height * this.size);
  }
}

let bars = [];

function setup() {
  createCanvas(400, 400);
  generateBars();
}

function generateBars() {
  for (let i = 0; i < 39; i++) {
    randomX = random(0, 39);
    randomHeight = random(0, 40)
    for (let j = 0; j < bars.length; j++) {
      if (bars[j].x == randomX) {
        randomX = random(0, 39);
      } else {
        for (let h = 0; h < bars.length; h++) {
          if (bars[j].height == randomHeight) {
            randomHeight = random(0, 40);
          } else {
            bars[i] = new Bar(randomX, randomHeight);
          }
        }
      }
    }
  }
}

function draw() {
  background(220);
  for (let k = 0; k < bars.length; k++) {
    bars[k].draw();
  }
}

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

Answer 1

generateBars 中的逻辑似乎错综复杂，意图不明。

据我所知，Bar 的 x 属性更像是一个 value 属性，用于存储稍后要排序的数字，因为它是在 draw() 中乘以 size。 (例如，x 不是栏应该呈现的最终 x 位置，顾名思义)。

我会像这样简单地实例化 Bar:

class Bar{
  constructor(x, height){
    this.height = height;
    this.size = 10;
    this.x = x;
  }
  
  draw(){
    fill("blue");
    rect(this.x * this.size, height - (this.height * this.size), this.size, this.height * this.size);
  }
}

let bars = [];

function setup() {
  createCanvas(400, 400);
  generateBars();
}

function generateBars(){
  for(let i = 0; i < 40; i++){
    randomHeight = random(0, 40)
    bars[i] = new Bar(i, randomHeight);
  }
}

function draw() {
  background(220);
  for(let k = 0; k < bars.length; k++){
    bars[k].draw();
  }
}

function mouseClicked(){
  setup();
}

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

(我添加了一个 hacky mouseClicked() 处理程序，因此很容易重新生成用于测试/调试目的的条。您可能不需要在最终代码中使用它)

更新根据您的评论，条形高度与稍后要排序的值紧密相关。

一个想法是简单地预先生成要排序的数字列表和shuffle()。他们先:

class Bar{
  constructor(x, height){
    this.height = height;
    this.size = 10;
    this.x = x;
  }
  
  draw(){
    fill("blue");
    rect(this.x * this.size, height - (this.height * this.size), this.size, this.height * this.size);
  }
}

let bars = [];

function setup() {
  createCanvas(400, 400);
  generateBars();
}

function generateBars(){
  // array to be sorted
  let barValues = [];
  for(let i = 0; i < 40; i++){
    // values are sorted first
    barValues[i] = i;
  }
  // then we shuffle them: second argument = shuffle in place (replacing the old array)
  shuffle(barValues, true);
  // assign shuffled values to Bar instances
  for(let i = 0; i < 40; i++){
    bars[i] = new Bar(i, barValues[i]);
  }
}

function draw() {
  background(220);
  for(let k = 0; k < bars.length; k++){
    bars[k].draw();
  }
}

function mouseClicked(){
  setup();
}

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