Change image on button click in 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 youve to use a variable (e.gcurrent_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>