使较小版本的画布成为p5.js中的对象

2022-08-23 00:00:00 p5.js javascript

所以我正在尝试在p5.js中制作我的画布和精灵的一个精确的更小的版本，并将其放入一个盒子中。有什么功能或方法可以做到这一点吗？精灵的背景、颜色和图像应该相同。

解决方案

有两种方法可以做到这一点，一种方法是将所有内容绘制到p5.Graphics缓冲区，然后将该缓冲区绘制到具有不同目标大小的主画布两次。另一种方法是将绘图的主要部分直接绘制到画布上，然后使用pixels数组从画布内容创建p5.Image，然后使用image函数将其绘制到画布上。

示例1.p5.Graphics

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"> 
let graphics;

function setup() {
  createCanvas(windowWidth * 0.9, windowHeight * 0.9);
  graphics = createGraphics(width, height);

  graphics.background(100);
}

function draw() {
  graphics.ellipse(mouseX, mouseY, 50, 50);

  image(graphics, 0, 0, width, height, 0, 0, graphics.width, graphics.height);

  // Draw picture in picture
  let aspect = width / height;
  image(graphics, 10, 10, 100, 100 / aspect, 0, 0, graphics.width, graphics.height);
  push();
  noFill();
  strokeWeight(3);
  rect(10, 10, 100, 100 / aspect);
  pop();
}
<!DOCTYPE html>
<html lang="en">

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

<body>
</body>

</html>

示例2.像素和图像

注意：此选项的缺点是更复杂、等待速度较慢，而且它不支持永久绘制的内容以及p5.Graphics选项，因为它会在后续帧中显示自己。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"> 
let img;
let density;

function setup() {
  createCanvas(round(windowWidth * 0.9), round(windowHeight * 0.9));
  density = pixelDensity();

  img = createImage(width, height);
  img.loadPixels();

  background(100);
}

function draw() {
  ellipse(mouseX, mouseY, 30, 30);

  loadPixels();
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      let srcPixel = y * 4 * width * density ** 2 + x * 4 * density;
      let dstPixel = y * 4 * img.width + x * 4;
      for (let channel = 0; channel < 4; channel++) {
        img.pixels[dstPixel + channel] = pixels[srcPixel + channel];
      }
    }
  }
  img.updatePixels();

  // Draw picture in picture
  let aspect = width / height;
  image(img, 10, 10, 100, 100 / aspect, 0, 0, img.width, img.height);
  push();
  noFill();
  strokeWeight(3);
  rect(10, 10, 100, 100 / aspect);
  pop();
}
<!DOCTYPE html>
<html lang="en">

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

<body>
</body>

</html>

相关文章