p5.由于像素密度问题p5js

Question

我使用

get()

存储动画中每个状态的快照，然后使用

image

重播这些快照。

但是，当我使用

image

渲染存储的像素时，它们似乎与原始图像的像素密度不同，这导致图像渲染模糊。我可以通过在设置功能中设置

pixelDensity(1)

来“修复”这个问题，但这只会导致整个动画在我的屏幕上变得模糊。

这是一个工作示例。希望您可以看到文本向左移动时（即使用

image

渲染时）如何变得模糊 https://editor.p5js.org/toc/sketches/63CYsMrH3

let L = 400
let history, iter, x

function init() {
  history = []
  iter = 0
  x = 0
}

function writeText() {
  textSize(25)
  textFont("Courier New")
  fill(0)
  text("fuzzy wuzzy", x, L/2)
  textSize(15)
  text("why though???", x, L/3)
}

function setup() {
  createCanvas(L, L)
  // pixelDensity(1)
  frameRate(60)
  init()
}

function draw() {
  background(220);
  iter += 1
  
  if (iter < 100) {
    x += L/700
    writeText()
    
    let im = get()
    history.push(im) 
  }
  else {
    if (history.length === 0) {
      init()
    } else {
      im = history.pop()
      image(im, 0, 0, L, L)  
    }
  }
}

Answer 1

p5.Image

类没有任何像素密度的概念，因此虽然画布本身将4个像素打包到每个像素坐标中，但

get()

返回的图像每个像素坐标只有1个像素，这是那四个人。解决此问题的最简单方法是使用

createImage()

创建一个新图像，并根据草图的

pixelDensity()

为其指定尺寸，然后使用

copy()

函数将画布像素保存到图像中。

const L = 400;
let history, iter, x;

function init() {
  history = [];
  iter = 0;
  x = 0;
}

function writeText() {
  textSize(25);
  textFont("Courier New");
  fill(0);
  text("fuzzy wuzzy", x, L / 2);
  textSize(15);
  text("why though???", x, L / 3);
}

let cnvs;
let density;

function setup() {
  cnvs = createCanvas(L, L);
  density = pixelDensity();
  console.log(`density: ${density}`);
  frameRate(60);
  init();
}

function draw() {
  iter += 1;

  if (iter < 100) {
    background(220);
    x += L / 700;
    writeText();

    let im = createImage(width * density, height * density);
    im.copy(cnvs, 0, 0, width, height, 0, 0, width * density, height * density);
    history.push(im);
  } else if (history.length === 0) {
    init();
  } else {
    im = history.pop();
    image(im, 0, 0, L, L);
  }
}

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