Wrong item in the list is triggered, which is weird and not what is intended + contribution

[woshibide]

I’m trying to build a basic sound sampler, where on each key pressed sound is played

And I have everything working, but with 1 annoying bug:

Whenever item N is pressed, on the screen it triggers N+1, and this bit of code is responsible for it:

// script.js :: [line 31] 
// https://gitlab.com/woshibide/p5js-sound-sampler/-/blob/master/sketch.js#L31)
    if (this.isPressed) {
      fill(this.color.levels.map(x => x - 50)); // darker shade when pressed
    } else {
      fill(this.color);
    }

I tried debugging it (here, if you open console you will find console.log vals on QWEASD keys pressed), but just couldn’t figure out what is wrong with it. Sounds play correctly, buttons trigger corresponded actions. The whole deal is about next item on the list appearing shaded, instead of the desired one

help! i’m new to js and p5js and programming in general

p.s. does this toy have a potential to be contributed to p5js?

[glv]

Hello @woshibide,

@woshibide

Whenever item N is pressed, on the screen it triggers N+1

I can’t see your code.

Maybe it is something fundamental such as:
https://github.com/processing/p5.js/wiki/JavaScript-basics#data-type-array

Which states:

You can access items in the array by numeric index; the first item in an array has index 0.

A 10 element array has elements from 0 to 9.

Try subtracting 1 from N.

:)

[woshibide]

Hi! Yes, I see, thank you for resource

This is my first question here, i provided gitlab repo with anchor link straight to the pain point, as well as working version avaialable on surge. Is it not the way how it is done? How do I provide code which is like 150 lines?

[mnse]

Hi @woshibide,

as your code is js you can provide it by s.th like p5js webeditor…

the page provided above isn’t working, at least on my access …

@glv

I can’t see your code.

but code could be accessed here: http://p5js-sound-sampler.surge.sh/sketch.js

Cheers
— mnse

[glv]

Hello @woshibide,

I got started by examining the indexes and responses:

The above worked and I did the same for the keypresses.

A runnable link to your original code from which I was able to view the source and extract the sketch.js:

https://p5js-sound-sampler.surge.sh/index.html
https://p5js-sound-sampler.surge.sh/sketch.js

Next step would be to examine the code to align the indexes in the current draw() cycle.

Try rearranging the order of code in draw() in your samplerTab class:

1. if(this.isPressed) should come first
2. Then draw the buttons.

I know what surge is now!

:)