Chrome Android bug (hard to describe)

[jywarren]

Nature of issue?

• Found a bug

Most appropriate sub-area of p5.js?

• Core/Environment/Rendering

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices) - Chrome Android

Details about the bug:

• p5.js version: 0.6.1 (editor.p5js.org)
• Web browser and version: Chrome 74
• Operating System: Android
• Steps to reproduce this:

I'm using this sketch, which works fine, but in an external site:

https://editor.p5js.org/jywarren/sketches/TsICFM5ZO

The site is here: https://webjack.io/examples/

It shows a graph of the sound input. You can see some details on this here: publiclab/webjack#93

On Chrome Android, the graph is drawn, the mouse-hover labeling works, and sound is received and processed, but the graph is not drawn:

It works on iOS, and in all desktop browsers I've tried. It responds to finger presses, so it's not frozen or anything. It also works in Chrome Android within the web Editor. But not when embedded in this web page AND in Chrome Android.

So frustrating! 😂

Sorry this is hard to describe. I wonder if there is something to do with the math for the graph drawing that could /conceivably/ be working differently in Chrome Android.

Any help at all appreciated! And, happy to change the title to something more descriptive, i was just at a loss ☹️ Thank you!!!

var mic, fft;

function setup() {
  createCanvas(710, 200);
  noFill();

  mic = new p5.AudioIn();
  mic.start();
  fft = new p5.FFT();
  fft.setInput(mic);
}

function draw() {
  var scale = 4;
  background(200);

  var spectrum = fft.analyze();

  beginShape();
  vertex(0, height * 0.9);
  for (i = 0; i < spectrum.length / scale; i++) {
    vertex(i * scale, map(spectrum[i], 0, 255, height * 0.8, 0));
  }
  vertex(width, height * 0.9);
  endShape();

}

[limzykenneth]

If the graph is not "drawing" (in this case more specifically, not reflecting the spectrum) I would suspect there is something unexpected going on at map(spectrum[i], 0, 255, height * 0.8, 0) and most probably to do with spectrum. Can you log what spectrum is into the console to see if it gets populated correctly? You should be able to connect Chrome on Android to Chrome dev tools on desktop to see the console output. I don't have an Android device so I cannot try it myself.

It could be that the FFT instance is using a different sound input or even hardware differences so if you can try and test it on another Android device.

[lmccart]

@jywarren any luck logging spectrum? To be able to help, we really need a simplified code snippet that isolates the issue. Right now there are a few different functionalities put together (shape drawing, map(), mic, fft) making this very difficult to resolve. For general debugging help, the forum is the best place to post. Thanks!

[lmccart]

closing this one for organizational purposes. please feel free to open a new issue if you can isolate what's not working a bit more. thanks!