在 p5.js 中单击按钮更改图像

Question

I have 2 dimensional array filled with cells. i want this cell to update image on button press. I want to pass the value to the constructor but something goes wrong and its nowt working.my thought was to pass to constructor image value this.img = img then in show_cell function change image value to this.img value. when i press button it start function wher i add image to constructor and show grid. non of this is working. Please help, it give me a headache.

Answer 1

You've to draw the grid in draw() . Note, draw() is continuously called by the system and redraws the entire window, it is the application loop. At the begin of draw You've to set the background color ( background() ), then you've to draw the entire scene.

Set a state variable ( show_grid ) when the button is pressed:

let show_grid = false;
function a(){
    show_grid = true;
}

Draw the grid dependent on the the state of the variable:

function draw() {

    background(255);

    if (show_grid) {
        grid.display();
    }

    fill(255);
    stroke(0);
    let fps = frameRate();
    text("FPS: " + fps.toFixed(0), 10, height - 10);
}

If you want to change the images on a click to a button, then you ve to use a variable (eg current_img`) wihich is used to draw the cells:

class Cell {
    constructor (column, row, size) {
        this.x = column;
        this.y = row;
        this.w = size;
    }
    show_cell () {
        image(current_img, this.x * this.w , this.y * this.w , this.w , this.w );
    }
}

When a button is clicked, then the current_image has to be changed:

function a(){
    show_grid = true;
    current_img = img1;
}

function b(){
    show_grid = true;
    current_img = img2;
}

See the example:

 var grid; var current_img; var img1; var img2; function preload(){ img1 = loadImage('https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/fish64.png'); img2 = loadImage('https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/ball64.png'); } function setup() { const background_btn1 = select('#BgCategory1-btn1'); background_btn1.mousePressed(a); const background_btn2 = select('#BgCategory1-btn2'); background_btn2.mousePressed(b); let cnv = createCanvas(1000, 1000); cnv.parent('canvas-holder'); grid = new Grid(40); current_img = img1; } function draw() { background(128); if (show_grid) { grid.display(); } fill(255); stroke(0); let fps = frameRate(); text("FPS: " + fps.toFixed(0), 10, 30); } let show_grid = false; function a(){ show_grid = true; current_img = img1; } function b(){ show_grid = true; current_img = img2; } class Grid { constructor (cellSize) { this.cellSize = cellSize; this.numberOfColumns = floor(width / this.cellSize); this.numberOfRows = floor(height / this.cellSize); this.cells = new Array(this.numberOfColumns); for (var column = 0; column < this.numberOfColumns; column ++) { this.cells[column] = new Array(this.numberOfRows); } for (var column = 0; column < this.numberOfColumns; column ++) { for (var row = 0; row < this.numberOfRows; row++) { this.cells[column][row] = new Cell(column, row, cellSize) } } } display () { for (var column = 0; column < this.numberOfColumns; column ++) { for (var row = 0; row < this.numberOfRows; row++) { this.cells[column][row].show_cell(); } } } } class Cell { constructor (column, row, size) { this.x = column; this.y = row; this.w = size; } show_cell () { image(current_img, this.x * this.w, this.y * this.w, this.w, this.w ); } }

 #BgCategory1-btn1 { position: absolute; top: 0; left: 0; } #BgCategory1-btn2 { position: absolute; top: 0; left: 10%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.js"></script> <button id= "BgCategory1-btn1" >image 1</button> <button id= "BgCategory1-btn2" >image 2</button> <div id = "canvas-holder"></div>