P5js Image Selection Drop-down

Question

P5js Image Selection Drop-down

Struggling to create a dropdown menu in p5js that showcases images. Facing issues with loading images, unlike in other sketches where the problem did not occur. Seeking a fresh perspective to resolve this error. Appreciate any assistance!

let picker; 
let drum1, drum2, drum3, drum4, drum5;
let img;
let drumType = 'what';

function setup() {
    createCanvas(windowWidth, windowHeight);

    drum1 = loadImage('drum1.jgp');
    drum2 = loadImage('drum2.jpg');
    drum3 = loadImage('drum3.jpg');
    drum4 = loadImage('drum4.jpg');
    drum5 = loadImage('drum5.jpg');

    textAlign(CENTER);
    background(200);
  
    picker = createSelect();
 
    picker.position(10, 10);

    picker.option('djembe');
    picker.option('two hand drums');
    picker.option('one hand drum');
    picker.option('Talking drum');
    picker.option('five hand drums');
   
    picker.changed(pickEvent);

    img = drum5;
}

function draw() {
    background(200, 220, 10);
    textAlign(LEFT);
    image(img, 0, 0, width, height);
    text(trim + ' is a good drum', 10, 50); // look up what trim is

}

function pickEvent() {
    // get the item chosen with .value()
    drumType = picker.value();
        
    if (drumType === 'djembe') {
        img = drum1;
    } else if (drumType === 'two hand drum') {
        img = drum2;
    } else if (drumType === 'one hand drum') {
        img = drum3;
    } else if (drumType === 'talking drum'){
        img = drum4;
    } else  {
        img = drum5;
    }

}https://i.sstatic.net/pBc7dLXf.jpg https://i.sstatic.net/YkgaDzx7.jpg https://i.sstatic.net/UmXUufqE.jpg https://i.sstatic.net/E49GT3SZ.jpg https://i.sstatic.net/vJycb3o7.jpg

javascript image drop-down-menu dropdown p5.js

Answer 1

Answer №1

There are several issues to address in your code. Here are some important points to consider:

Take your time to code and test each step. Rushing through complex code without testing can lead to a lot of errors that are difficult to untangle all at once. It's better to break down large problems into smaller tasks to make debugging easier.

Instead of trying to work with all 5 images at once, start by getting one loaded, then two, and so on.
Errors are helpful and should be fully acknowledged. They pinpoint the exact problem areas in your code. Programs that misbehave without any errors are much harder to troubleshoot.
If your images are not loading, ensure they are hosted on a development server.
Make sure all variables are defined before use. An undefined variable like trim can crash your program.
When dealing with a series of tasks like thing1, thing2, ... thing5 or multiple if-else if statements, utilize data structures and loops for scalability instead of hardcoding the tasks.
For loading images, utilize the preload function to ensure they are ready when your app runs.
Separate data from logic. Storing image data in an array of objects instead of hardcoded values makes the program more adaptable and flexible.
Keep variables scoped locally whenever possible. Avoid making them global unless absolutely necessary. This helps improve code organization and readability.

Here's an optimized version of your code:

// TODO: add your own images; these are samples
const images = [
  {
    name: "djembe",
    url: "https://picsum.photos/id/1/100",
  },
  {
    name: "two hand drums",
    url: "https://picsum.photos/id/2/100",
  },
  {
    name: "one hand drum",
    url: "https://picsum.photos/id/3/100",
  },
  {
    name: "talking drum",
    url: "https://picsum.photos/id/4/100",
  },
  {
    name: "five hand drums",
    url: "https://picsum.photos/id/5/100",
  },
];
let selectedImage = images[0];
let select;

function preload() {
  for (const e of images) {
    e.image = loadImage(e.url);
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  select = createSelect();
  select.position(10, 10);
  select.changed(handleSelected);
  images.forEach(e => select.option(e.name));
}

function draw() {
  background(200, 220, 10);
  image(selectedImage.image, 0, 30, 100, 100);
  text(`${selectedImage.name} is a good drum`, 120, 50);
}

function handleSelected() {
  selectedImage = images.find(e => e.name === select.value());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js"></script>

Consider optimizing the code further by reducing unnecessary redraws and conserving resources:

const images = [
  {
    name: "djembe",
    url: "https://picsum.photos/id/1/100",
  },
  {
    name: "two hand drums",
    url: "https://picsum.photos/id/2/100",
  },
  {
    name: "one hand drum",
    url: "https://picsum.photos/id/3/100",
  },
  {
    name: "talking drum",
    url: "https://picsum.photos/id/4/100",
  },
  {
    name: "five hand drums",
    url: "https://picsum.photos/id/5/100",
  },
];
let selectedImage = images[0];
let select;

function preload() {
  for (const e of images) {
    e.image = loadImage(e.url);
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  select = createSelect();
  select.position(10, 10);
  select.changed(handleSelected);
  images.forEach(e => select.option(e.name));
  noLoop();
}

function draw() {
  background(200, 220, 10);
  image(selectedImage.image, 0, 30, 100, 100);
  text(`${selectedImage.name} is a good drum`, 120, 50);
}

function handleSelected() {
  selectedImage = images.find(e => e.name === select.value());
  draw();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js"></script>

Answer 2

There are several issues to address in your code. Here are some important points to consider:

Take your time to code and test each step. Rushing through complex code without testing can lead to a lot of errors that are difficult to untangle all at once. It's better to break down large problems into smaller tasks to make debugging easier.

Instead of trying to work with all 5 images at once, start by getting one loaded, then two, and so on.
Errors are helpful and should be fully acknowledged. They pinpoint the exact problem areas in your code. Programs that misbehave without any errors are much harder to troubleshoot.
If your images are not loading, ensure they are hosted on a development server.
Make sure all variables are defined before use. An undefined variable like trim can crash your program.
When dealing with a series of tasks like thing1, thing2, ... thing5 or multiple if-else if statements, utilize data structures and loops for scalability instead of hardcoding the tasks.
For loading images, utilize the preload function to ensure they are ready when your app runs.
Separate data from logic. Storing image data in an array of objects instead of hardcoded values makes the program more adaptable and flexible.
Keep variables scoped locally whenever possible. Avoid making them global unless absolutely necessary. This helps improve code organization and readability.

Here's an optimized version of your code:

// TODO: add your own images; these are samples
const images = [
  {
    name: "djembe",
    url: "https://picsum.photos/id/1/100",
  },
  {
    name: "two hand drums",
    url: "https://picsum.photos/id/2/100",
  },
  {
    name: "one hand drum",
    url: "https://picsum.photos/id/3/100",
  },
  {
    name: "talking drum",
    url: "https://picsum.photos/id/4/100",
  },
  {
    name: "five hand drums",
    url: "https://picsum.photos/id/5/100",
  },
];
let selectedImage = images[0];
let select;

function preload() {
  for (const e of images) {
    e.image = loadImage(e.url);
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  select = createSelect();
  select.position(10, 10);
  select.changed(handleSelected);
  images.forEach(e => select.option(e.name));
}

function draw() {
  background(200, 220, 10);
  image(selectedImage.image, 0, 30, 100, 100);
  text(`${selectedImage.name} is a good drum`, 120, 50);
}

function handleSelected() {
  selectedImage = images.find(e => e.name === select.value());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js"></script>

Consider optimizing the code further by reducing unnecessary redraws and conserving resources:

const images = [
  {
    name: "djembe",
    url: "https://picsum.photos/id/1/100",
  },
  {
    name: "two hand drums",
    url: "https://picsum.photos/id/2/100",
  },
  {
    name: "one hand drum",
    url: "https://picsum.photos/id/3/100",
  },
  {
    name: "talking drum",
    url: "https://picsum.photos/id/4/100",
  },
  {
    name: "five hand drums",
    url: "https://picsum.photos/id/5/100",
  },
];
let selectedImage = images[0];
let select;

function preload() {
  for (const e of images) {
    e.image = loadImage(e.url);
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  select = createSelect();
  select.position(10, 10);
  select.changed(handleSelected);
  images.forEach(e => select.option(e.name));
  noLoop();
}

function draw() {
  background(200, 220, 10);
  image(selectedImage.image, 0, 30, 100, 100);
  text(`${selectedImage.name} is a good drum`, 120, 50);
}

function handleSelected() {
  selectedImage = images.find(e => e.name === select.value());
  draw();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js"></script>

P5js Image Selection Drop-down

Answer №1

Similar questions

Preparing data before using Kendo UI upload function is essential

ES6 Class Directive for Angular 1.4

Strange behavior in Vue observed. The v-if directive is not properly monitoring changes

How to call two functions in React, passed as props, one after the other

AngularJS: Unable to preserve the data

Function in React not being successfully passed down between functional components

Hide panel when button is clicked - bootstrap

Minimize CPU consumption in your threejs application

Select a random character from a string using JavaScript

The clash between two jQuery plugins featuring identical function names

Having issues with setting state for an array in ReactJS

creating a JSON object in PHP that can be easily parsed by JavaScript

The Jquery slider panel seems to be stuck open even after I switched its CSS orientation from right to left

Guidelines for executing a PHP script upon a button click

Looping through nested arrays in an array of objects with Angular's ng-repeat

Styling in CSS is being applied to a button element within a React component,

How can I use ReactJS to find the nearest five locations in order from closest to farthest?

What are the implications of using eval() to interpret function parameters?

Using Firebase Authentication in Next.js with Server-Side Components

Delete Entries in MongoDB Collection According to Unique User Pairs