On Chrome, createSlider with instance mode makes duplicated sliders

p5.js Coding Questions
1

Hi all,
Thank you for your effort to keep the quality of this great community.

I just tried to port a createSlider example to the instance mode then hit a issue. How can I solve it?
Following is my code, it’s working well with Firefox 75 on Windows, at the same time showing two slider bars on Chrome 81.
cs01

const sketch = (s) => {
  let slider;
  s.setup=()=> {
    s.colorMode(s.HSB);
    slider = s.createSlider(0, 360, 60, 40);
    slider.position(10, 10);
    slider.style('width', '80px');
  }
  s.draw=()=> {
    s.background(slider.value(), 100, 100, 1);
  }
}
let myp5 = new p5(sketch);
1 Like
2

Hello and welcome,

That definitely looks weird. :smile: I tried for myself, using the Web Editor, just now and it does not show that behavior for me in Chrome 81 on Windows 10 Pro.

let slider;

function setup() {
  colorMode(HSB);
  slider = createSlider(0, 360, 60, 40);
  slider.position(10, 10);
  slider.style('width', '80px');
}

function draw() {
  background(slider.value(), 100, 100, 1);
}

Here’s a bunch of questions for you:

  1. Are you on Windows 10 as well?
  2. Are you on the latest version of the p5.js library? (1.00)
  3. Do you have the opportunity to test in Chrome on a friend’s computer?
2 Likes
3

Hi Sven,
Thank you for your confirmation.

I found it’s working perfectly with Chrome+Windows10 on editor.p5js.
https://editor.p5js.org/ahirose/sketches/Lw-RmHVfJ
So seems my local server(Web Server for Chrome) has some issue. Anyway it’s fine for my study. Let me close this question!

Thanks and Regards,

2 Likes
4

Just for a future reference, let me note my experience.

It seems repro only on Local Server + p5.sound + Chrome + Windows10.
The html is followings.

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js example</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/addons/p5.sound.min.js"></script>
  <script src="sketch.js"></script>
</head>
<body>
</body>
</html>

It will work fine if you delete
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/addons/p5.sound.min.js"></script>
or simply put it on the other web server, or run on except Chrome.

1 Like