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;
    }
}

当我刚开始的时候，我只有一个图像，并且按我的意愿显示在左上角……虽然没有后续图像，但是伪像却出现在奇怪的地方（如您在此处看到的：{{3} }。我已经尝试过各种方法，例如将图像导出为Base64图像并使用loadImage，但我想我可能一直在树错树。

任何帮助将不胜感激：-）

Answer 1

请注意，方法Tile.draw会绘制到大小为（.pg，.dimension）的图像（.dimension）而非画布上。因此原点必须为（0，0）而不是（.x，.y），因为最终图像（.pg）放在（{{1} }，.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;
    }
}

多个p5.image出现问题

1 个答案: