Unwanted beeping sounds with Vertex functions

p5.js
1

While using the beginShape(), endShape() and vertex() functions, I noticed some undesired beeping sounds (followed by low pitch “drumming” sounds). I tried searching for discussions over this topic, but couldn’t find it anywhere.

The problem came up while testing the functions in this sketch: https://editor.p5js.org/jusastronomer/sketches/1isTlv-LK
Whenever I run the sketch, I get the following sound: https://instaud.io/3vNY

After that, I tried a simpler sketch, with just a few vertices in the draw() function, but still got a beep. I can’t post more links because of the restrictions to new users, so I will paste the second test below:

function setup(){
  createCanvas(400,400);
  background(0);
}

function draw(){
  beginShape();
  vertex(75,75);
  vertex(75,25);
  vertex(25,50);
  endShape();
}

I can hear the beeping in my Linux machine (on both Chrome and Firefox browsers) and on my Android mobile device (on the Chrome browser app).

Is the problem in my computer (and mobile phone) or in my code? Is this an expected behavior for the Vertex functions? I was trying to use it in an intonation app for music students, however the beeping renders the app useless.

Thank you very much for the attention!!

2 Likes
2

“preferences” red symbol at right,
Settings / Accessibility /
Accessible text-based canvas

sound OFF

possibly must do again after LOGIN

SNAG-0069
SNAG-0069813×569 42 KB

3 Likes
3

Thank you very much for the solution, @kll! This problem had been driving me crazy for over 24 hours!

I was going to ask if this preference is “in the editor” or “in the sketch”… but after running some tests, I am led to believe it’s “in the editor”. Even with the accessibility sound ON, as long as I share the “Present” or “Fullscreen” versions of the sketch, the users won’t listen to it.

This is a very interesting feature, although I can’t think about how it’s used… I will definitely spend some time reading about accessibility! Thanks again!!

1 Like
4

According to the p5.js web editor site:

it is based on p5.assessibility

and you can learn about accessibility here:

Sound Output - This mode explains the movement of the objects present in the canvas. Top to Down movement is represented by a decrease in frequency and left to right through panning.

1 Like