多个 p5.image 的问题

Question

我正在尝试用 p5 创作一些光学艺术，我运行遇到了 image 函数的问题。这是 mt sketch.js 文件:

import Tile from "./Tile.js";

new p5(p5 => {

    const rows = 14;
    const columns = 14;
    const dimension = 40
    const height = rows * dimension;
    const width = columns * dimension;
    const framerate = 1;
    const tiles = [];

    p5.setup = () => {
        p5.createCanvas(width, height);
        p5.frameRate(framerate);
        for (let r = 0; r < rows; r++) {
            for (let c = 0; c < columns; c++) {
                tiles.push(new Tile(p5, c * dimension, r * dimension, dimension, r, c));
            }
        }
    };

    p5.draw = () => {
        p5.background(200);
        tiles.forEach((tile) => {
            console.log(tile);
            p5.image(tile.update(), tile.x, tile.y);
        });
    };
});

这是Tile.js:

export default class Tile {

    constructor(p5, x, y, dimension, row, column) {
        this.p5 = p5;
        this.x = x;
        this.y = y;
        this.dimension = dimension;
        this.row = row;
        this.column = column;
        this.onFirst = true;
        this.on = p5.color(255, 184, 0);
        this.off = p5.color(26, 17, 16);
        this.diameter = Math.sqrt(Math.pow(dimension, 2) * 2)
        this.pg = this.p5.createGraphics(dimension, dimension)
        this.pg.noStroke();
    }

    update() {
        if (this.diameter < 0) {
            this.diameter = Math.sqrt(Math.pow(this.dimension, 2) * 2);
            this.onFirst = !this.onFirst
        }
        else {
            this.diameter -= 1;
        }
        return this.draw();
    }

    draw() {
        this.pg.fill(this.onFirst ? this.off : this.on);
        this.pg.rect(this.x, this.y, this.dimension, this.dimension);
        this.pg.fill(this.onFirst ? this.on : this.off);
        this.pg.circle(this.x + this.dimension / 2, this.y + this.dimension / 2, this.diameter);
        return this.pg;
    }
}

刚开始的时候，我只有一张图片，它按我的意愿显示在左上角……但后续图片却没有，但人工制品出现在奇怪的地方（正如你在这里看到的：https://jsfiddle.net/annoyingmouse/Lbs9v8f4/).我尝试了各种方法，例如将图像导出为 Base64 图像并使用 loadImage，但我想我可能找错了树。

任何帮助将不胜感激:-)

Answer 1

请注意，方法 Tile.draw 绘制的图像 (.pg) 大小为 (.dimension, .dimension) 而不是 canvas . 所以原点必须是 (0, 0) 而不是 (.x, .y)，因为最终图像 (.pg) 位于 canvas 处 ( .x, .y).

修改代码如下，问题解决：

draw() {
    this.pg.fill(this.onFirst ? this.off : this.on);

    // this.pg.rect(this.x, this.y, this.dimension, this.dimension);
    this.pg.rect(0, 0, this.dimension, this.dimension); 

    this.pg.fill(this.onFirst ? this.on : this.off);

    // this.pg.circle(this.x + this.dimension / 2, this.y + this.dimension / 2, this.diameter);
    this.pg.circle(this.dimension / 2, this.dimension / 2, this.diameter);

    return this.pg;
}

看例子：

new p5(p5 => {

const rows = 14;
const columns = 14;
const dimension = 40
const height = rows * dimension;
const width = columns * dimension;
const framerate = 60;
const tiles = [];

p5.setup = () => {
    p5.createCanvas(width, height);
    p5.frameRate(framerate);
    for (let r = 0; r < rows; r++) {
        for (let c = 0; c < columns; c++) {
            tiles.push(new Tile(p5, c * dimension, r * dimension, dimension, r, c));
        }
    }
};

p5.draw = () => {
    p5.background(200);
    tiles.forEach((tile) => {
        console.log(tile);
        p5.image(tile.update(), tile.x, tile.y);
    });
};
});

class Tile {

    constructor(p5, x, y, dimension, row, column) {
        this.p5 = p5;
        this.x = x;
        this.y = y;
        this.dimension = dimension;
        this.row = row;
        this.column = column;
        this.onFirst = true;
        this.on = p5.color(255, 184, 0);
        this.off = p5.color(26, 17, 16);
        this.diameter = Math.sqrt(Math.pow(dimension, 2) * 2)
        this.pg = this.p5.createGraphics(dimension, dimension)
        this.pg.noStroke();
    }

    update() {
        if (this.diameter < 0) {
            this.diameter = Math.sqrt(Math.pow(this.dimension, 2) * 2);
            this.onFirst = !this.onFirst
        }
        else {
            this.diameter -= 1;
        }
        return this.draw();
    }

    draw() {
        this.pg.fill(this.onFirst ? this.off : this.on);
        this.pg.rect(0, 0, this.dimension, this.dimension);
        this.pg.fill(this.onFirst ? this.on : this.off);
        this.pg.circle(this.dimension / 2, this.dimension / 2, this.diameter);
        return this.pg;
    }
}

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

多个 p5.image 的问题

Issues with multiple p5.image

javascript

processing

p5.js