display(){} Method p5.js not displaying image

Question

I working on a school project. I created a class for an image. It seemed to be working when the class was embedded in the draw function. My professor said that I should move the class outside of the draw function and use the display(){} method. However, when I followed the instructions, the image disappears from the canvas. I am wondering where the class should be placed in order to display the image, if not in the draw function?

I included a link to my original sketch, that seemed to work, as well. Below is the code that I am trying to correct.

let drumImg;
let drum;


function preload(){
  drumSound = loadSound('HandDrum.mp3');
  drumImg = loadImage('handdrum2.png');
}

function start(){
  drumSound.play();
}

function setup() {
  createCanvas(500, 500);
  
  drumSound.playMode('restart');
  volSlider = createSlider(0, 1, .5, 0.01);
  volSlider.position(130,40);
  
}

function mousePressed(x,y,sizeX,sizeY){
  checkIntersection(mouseX, mouseY);
}
function checkIntersection(x,y,sizeX,sizeY){
  
  let radialDistance = dist(x,y, width/2, height/2);
  if(radialDistance<140){
    drumSound.play();
    print('play drum');
  } else{ print('silence');
        }    
}

class Drumcircle{
  constructor(x,y){
    this.name ='drumCircle';
    this.x = x;
    this.y = y;
    this.sizeX = sizeX
    this.sizeY = sizeY
  }
    clicked(x,y, sizeX,sizeY){
    this.x = width/2 -150;
    this.y = height/2 - 150;
    this.sizeX = 300;
    this.sizeY = 300;
  { this.drum = drumImg;
  }
    }
    display(){
    //image(drumImg,x,y,sizeX,sizeY);
      image(this.drum,this.x, this.y,this.sizeX, this.sizeY);
    }
}

function draw() {
  background(0, 24, 25);
  drumSound.setVolume(volSlider.value());
  
  
  let volText = 'Volume';
  textSize(12);
  fill(255);
  stroke(0);
  strokeWeight(2);
  text(volText, 85, 45, 70, 80);
  
  
}

My original sketch with the Drumcircle Class inside of the draw(){}.

Answer 1

You have not used the DrumCircle class at all you just keep making a new class at every frame, in the code below the class is outside is draw function which mean it will only create it one, and now the class is responsible for rendering the drum image

let drumImg;
let drum;

class DrumCircle {
  constructor(drumImage, x, y, sizeX, sizeY) {
    this.drumImage = drumImage;
    this.name = "drumCircle";
    this.x = x;
    this.y = y;
    this.sizeX = sizeX;
    this.sizeY = sizeY;
  }

  showImage() {
    image(this.drumImage, this.x, this.y, this.sizeX, this.sizeY);
  }
}

function preload() {
  drumSound = loadSound("HandDrum.mp3");
  drumImg = loadImage("handdrum2.png");
}

function start() {
  drumSound.play();
}

function setup() {
  createCanvas(500, 500);

  drumSound.playMode("restart");
  volSlider = createSlider(0, 1, 0.5, 0.01);
  volSlider.position(130, 40);

  const x = width / 2 - 150;
  const y = height / 2 - 150;
  const sizeX = 300;
  const sizeY = 300;

  drum = new DrumCircle(drumImg, x, y, sizeX, sizeY);
}

function draw() {
  background(0, 24, 25);
  drumSound.setVolume(volSlider.value());

  let volText = "Volume";
  textSize(12);
  fill(255);
  stroke(0);
  strokeWeight(2);
  text(volText, 85, 45, 70, 80);

  drum.showImage();
}

function mousePressed() {
  checkIntersection(mouseX, mouseY);
}

function checkIntersection(x, y) {
  let radialDistance = dist(x, y, width / 2, height / 2);
  if (radialDistance < 140) {
    drumSound.play();
    print("play drum");
  } else {
    print("silence");
  }
}