javascript - putimagedata 绘制像素数据 4 次/不按比例

Question

我最近一直在观看 Notch 在 twitch 上的一些直播，并对他几年前在 Ludum Dare 挑战赛中使用的一种渲染技术很感兴趣。我尝试将他的 java 代码转换为 javascript，但遇到了一些问题，这是因为我对来自原始创建的像素值的 ctx.putimagedata 还是陌生的。

为什么这个应用程序绘制了预期的输出 4 次，而不是缩放到窗口？由于数组的形状，我应该用 4 的乘法或除数迭代的地方有什么我遗漏的吗？我很困惑，所以只想在这里发布。我发现的唯一修复方法是，如果我将 this.width 和 this.height 调整为乘以 4，但我相信这是在 Canvas 边界之外绘制，导致性能变得糟糕，并不是真正有效的解决方案问题。

有问题的类:

document.addEventListener('DOMContentLoaded', () => {
    //setup
    document.body.style.margin = 0;
    document.body.style.overflow = `hidden`;
    const canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const ctx = canvas.getContext("2d");
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    //global helpers
    const randomint = (lower, upper) => {
        return Math.floor((Math.random() * upper+1) + lower);
    }
    const genrandomcolor = () => {
        return [randomint(0, 255), randomint(0, 255), randomint(0, 255), 1/randomint(1, 2)];
    }

    class App {
        constructor(){
            this.scale = 15;
            this.width = window.innerWidth;
            this.height = window.innerHeight;
            this.pixels = [];
            this.fov = 10;
            this.ub = 0;
            this.lr = 0;
            this.keys = {
              up: false,
              down: false,
              left: false,
              right: false
            }
            this.speed = 4;
        }
        update(){
            this.keys.up ? this.ub++ : null;
            this.keys.down ? this.ub-- : null;
            this.keys.left ? this.lr-- : null;
            this.keys.right ? this.lr++ : null;
        }
        draw(){
            this.drawspace()
        }
        drawspace(){
            for(let y = 0; y < this.height; y++){
                let yd = (y - this.height / 2) / this.height;
                yd < 0 ? yd = -yd : null;
                const z = this.fov / yd;
                for (let x = 0; x < this.width; x++){
                    let xd = (x - this.width /2) / this.height * z;
                    const xx = (xd+this.lr*this.speed) & this.scale;
                    const zz = (z+this.ub*this.speed) & this.scale;
                    this.pixels[x+y*this.width] = xx * this.scale | zz * this.scale;
                }
            }
            const screen = ctx.createImageData(this.width, this.height);
            for (let i = 0; i<this.width*this.height*4; i++){
                screen.data[i] = this.pixels[i]
            }
            ctx.putImageData(screen, 0, 0);
        }
    }

    const app = new App;

    window.addEventListener('resize', e => {
        canvas.width = app.width = window.innerWidth;
        canvas.height = app.height = window.innerHeight;
    })
  
    //events
    document.addEventListener("keydown", e => {
        e.keyCode == 37 ? app.keys.left = true : null;
        e.keyCode == 38 ? app.keys.up = true : null;
        e.keyCode == 39 ? app.keys.right = true : null;
        e.keyCode == 40 ? app.keys.down = true : null;
    })
    document.addEventListener("keyup", e => {
        e.keyCode == 37 ? app.keys.left = false : null;
        e.keyCode == 38 ? app.keys.up = false : null;
        e.keyCode == 39 ? app.keys.right = false : null;
        e.keyCode == 40 ? app.keys.down = false : null;
    })

    //game loop
    const fps = 60;
    const interval = 1000 / fps;
    let then = Date.now();
    let now;
    let delta;
    const animate = time => {
        window.requestAnimationFrame(animate);
        now = Date.now();
        delta = now - then;
        if (delta > interval) {
            then = now - (delta % interval)
            ctx.fillStyle = 'black';
            ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
            app.update();
            app.draw();
        }
    }
    animate();
});

Answer 1

ImageData.data 对象是一个 Uint8ClampedArray，表示每个像素的 4 个红色、绿色、蓝色和 Alpha channel ，每个 channel 表示为 8 位(值在 0-255 范围内)。

这意味着要设置一个像素，你需要独立设置它的4个 channel :

const r = data[0];
const g = data[1];
const b = data[2];
const a = data[3];

这代表我们 ImageData 的第一个像素(左上角的像素)。
因此，为了能够遍历所有像素，我们需要创建一个循环，使我们能够从一个像素转到另一个像素。这是通过一次迭代 4 个索引来完成的:

for(
   let index = 0;
   index < data.length;
   index += 4 // increment by 4
) {
  const r = data[index + 0];
  const g = data[index + 1];
  const b = data[index + 2];
  const a = data[index + 3];
  ...
}

现在每个像素都将按需要遍历:

  //setup
  document.body.style.margin = 0;
  document.body.style.overflow = `hidden`;
  const canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const ctx = canvas.getContext("2d");
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  //global helpers
  const randomint = (lower, upper) => {
    return Math.floor((Math.random() * upper + 1) + lower);
  }
  const genrandomcolor = () => {
    return [randomint(0, 255), randomint(0, 255), randomint(0, 255), 1 / randomint(1, 2)];
  }

  class App {
    constructor() {
      this.scale = 15;
      this.width = window.innerWidth;
      this.height = window.innerHeight;
      this.pixels = [];
      this.fov = 10;
      this.ub = 0;
      this.lr = 0;
      this.keys = {
        up: false,
        down: false,
        left: false,
        right: false
      }
      this.speed = 4;
    }
    update() {
      this.keys.up ? this.ub++ : null;
      this.keys.down ? this.ub-- : null;
      this.keys.left ? this.lr-- : null;
      this.keys.right ? this.lr++ : null;
    }
    draw() {
      this.drawspace()
    }
    drawspace() {
      for (let y = 0; y < this.height; y++) {
        let yd = (y - this.height / 2) / this.height;
        yd < 0 ? yd = -yd : null;
        const z = this.fov / yd;
        for (let x = 0; x < this.width; x++) {
          let xd = (x - this.width / 2) / this.height * z;
          const xx = (xd + this.lr * this.speed) & this.scale;
          const zz = (z + this.ub * this.speed) & this.scale;
          this.pixels[x + y * this.width] = xx * this.scale | zz * this.scale;
        }
      }
      const screen = ctx.createImageData(this.width, this.height);
      for (let i = 0, j=0; i < screen.data.length; i += 4) {
        j++; // so we can iterate through this.pixels
        screen.data[i] = this.pixels[j]; // r
        screen.data[i + 1] = this.pixels[j], // g
        screen.data[i + 2] = this.pixels[j] // b
        screen.data[i + 3] = 255; // full opacity
      }
      ctx.putImageData(screen, 0, 0);
    }
  }

  const app = new App;

  window.addEventListener('resize', e => {
    canvas.width = app.width = window.innerWidth;
    canvas.height = app.height = window.innerHeight;
  })

  //events
  document.addEventListener("keydown", e => {
    e.keyCode == 37 ? app.keys.left = true : null;
    e.keyCode == 38 ? app.keys.up = true : null;
    e.keyCode == 39 ? app.keys.right = true : null;
    e.keyCode == 40 ? app.keys.down = true : null;
  })
  document.addEventListener("keyup", e => {
    e.keyCode == 37 ? app.keys.left = false : null;
    e.keyCode == 38 ? app.keys.up = false : null;
    e.keyCode == 39 ? app.keys.right = false : null;
    e.keyCode == 40 ? app.keys.down = false : null;
  })

  //game loop
  const fps = 60;
  const interval = 1000 / fps;
  let then = Date.now();
  let now;
  let delta;
  const animate = time => {
    window.requestAnimationFrame(animate);
    now = Date.now();
    delta = now - then;
    if (delta > interval) {
      then = now - (delta % interval)
      ctx.fillStyle = 'black';
      ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
      app.update();
      app.draw();
    }
  }
  animate();

但请注意，您还可以在 ArrayBuffer 上使用其他 View ，并直接将每个像素作为 32 位值处理:

//setup
  document.body.style.margin = 0;
  document.body.style.overflow = `hidden`;
  const canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const ctx = canvas.getContext("2d");
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  //global helpers
  const randomint = (lower, upper) => {
    return Math.floor((Math.random() * upper + 1) + lower);
  }
  const genrandomcolor = () => {
    return [randomint(0, 255), randomint(0, 255), randomint(0, 255), 1 / randomint(1, 2)];
  }

  class App {
    constructor() {
      this.scale = 15;
      this.width = window.innerWidth;
      this.height = window.innerHeight;
      this.pixels = [];
      this.fov = 10;
      this.ub = 0;
      this.lr = 0;
      this.keys = {
        up: false,
        down: false,
        left: false,
        right: false
      }
      this.speed = 4;
    }
    update() {
      this.keys.up ? this.ub++ : null;
      this.keys.down ? this.ub-- : null;
      this.keys.left ? this.lr-- : null;
      this.keys.right ? this.lr++ : null;
    }
    draw() {
      this.drawspace()
    }
    drawspace() {
      for (let y = 0; y < this.height; y++) {
        let yd = (y - this.height / 2) / this.height;
        yd < 0 ? yd = -yd : null;
        const z = this.fov / yd;
        for (let x = 0; x < this.width; x++) {
          let xd = (x - this.width / 2) / this.height * z;
          const xx = (xd + this.lr * this.speed) & this.scale;
          const zz = (z + this.ub * this.speed) & this.scale;
          this.pixels[x + y * this.width] = xx * this.scale | zz * this.scale;
        }
      }
      const screen = ctx.createImageData(this.width, this.height);
      // use a 32bits view
      const data = new Uint32Array(screen.data.buffer);
      for (let i = 0, j=0; i < this.width * this.height; i ++) {
        // values are 0-255 range, we convert this to 0xFFnnnnnn 32bits
        data[i] = (this.pixels[i] / 255 * 0xFFFFFF) + 0xFF000000;
      }
      ctx.putImageData(screen, 0, 0);
    }
  }

  const app = new App;

  window.addEventListener('resize', e => {
    canvas.width = app.width = window.innerWidth;
    canvas.height = app.height = window.innerHeight;
  })

  //events
  document.addEventListener("keydown", e => {
    e.keyCode == 37 ? app.keys.left = true : null;
    e.keyCode == 38 ? app.keys.up = true : null;
    e.keyCode == 39 ? app.keys.right = true : null;
    e.keyCode == 40 ? app.keys.down = true : null;
  })
  document.addEventListener("keyup", e => {
    e.keyCode == 37 ? app.keys.left = false : null;
    e.keyCode == 38 ? app.keys.up = false : null;
    e.keyCode == 39 ? app.keys.right = false : null;
    e.keyCode == 40 ? app.keys.down = false : null;
  })

  //game loop
  const fps = 60;
  const interval = 1000 / fps;
  let then = Date.now();
  let now;
  let delta;
  const animate = time => {
    window.requestAnimationFrame(animate);
    now = Date.now();
    delta = now - then;
    if (delta > interval) {
      then = now - (delta % interval)
      ctx.fillStyle = 'black';
      ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
      app.update();
      app.draw();
    }
  }
  animate();