How do I select an image from an array of images and draw the image on the canvas

Question

I have encountered a problem with this project I'm working on. The code here is to draw an image anytime the mouse is clicked on the canvas. I have an array of country flags and I want to let the user select any flag of their choice and draw it on the canvas. When I click on the option to select any flag of my choice from the canvas, it only draws one particular flag. I want someone to help me find a way to select different flags from the array and draw them on the canvas.

canvas

for(var i = 0; i < 254; i++){
    flags[i] = loadImage('assets/flags/a' + i + '.png');
}

this.fla = flags[i];

//where was the mouse on the last time draw was called.
//set it to -1 to begin with
var startMouseX = -1;
var startMouseY = -1;

this.draw = function(){
    //if moused is pressed draw selected object at mouse locations on the canvas
    if(mouseIsPressed){
        //checks the size of the stamp object
        var starSize = this.starSizeSlider.value();
        var starX = mouseX - starSize/2;
        var starY = mouseY - starSize/2;

        for(var i = 0; i < flags.length; i++){
            if(this.selectionToolForOptions.selected()== flags[i]){
                image(flags[i], starX, starY, starSize, starSize);
               
            }
            else if (this.selectionToolForOptions.selected()=='cloud'){
                image(this.flag, starX, starY, starSize, starSize);
            }
        }
       
    }
}

//when the tool is deselected just show the drawing and and clear the options
this.unselectedTool = function() {
    select("#sizeOfControl").html("");
}

//add options to select type of object to be selected and size the objects
this.populateOptions = function() {   
    this.textProperty = createDiv('Size: ');    
    this.textProperty.parent('#sizeOfControl');
    this.starSizeSlider = createSlider(5,80,10);
    this.starSizeSlider.parent("#sizeOfControl");
    this.optionTextProperty = createDiv('Options: ');
    this.optionTextProperty.parent("#sizeOfControl");
    this.selectCountryFlag = createSelect('Star: ');
    this.selectionToolForOptions = createSelect();
    this.selectionToolForOptions.parent("#sizeOfControl");

    for(var i = 0; i < flags.length; i++){
        this.selectionToolForOptions.option(flags[i]);
    }
}

user_229247 · Answer

The issue appears to be that you're specifying an object (a p5.Image instance) as the name of the options you are creating. Both the name and the value for select options must be strings. Because when p5.Image is converted to a string it is "[object Object]" all of your select options are the same.

Here's a simple working example.

let imgs;

function preload() {
  imgs = {
    "option A": loadImage("https://www.paulwheeler.us/files/existing-content.png"),
    "option B": loadImage("https://www.paulwheeler.us/files/new-content.png")
  };
}

let imgSelect;
function setup() {
  createCanvas(400, 400);
  imgSelect = createSelect();
  for (const key in imgs) {
    imgSelect.option(key);
  }
  
  imgSelect.position(10, 10);
  background(220);
}

function draw() {
  if (mouseIsPressed) {
    image(imgs[imgSelect.value()], mouseX, mouseY);
  }
}

How do I select an image from an array of images and draw the image on the canvas

1 Answers