Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

350
Visualizações
How do I select an image from an array of images and draw the image on the canvas

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]);
    }
}
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda