P5 instance mode with image and sliders

p5.js Coding Questions
1

Hi guys!

I am trying to convert my p5 code into instance mode, but it does not seem to work. Does anybody have an idea what am I doing wrong?

here is the code:

let sketch = function(p) {
  
  let DAYLIGHT;
  let canvas;
  
   p.preload = function() {
     
    DAYLIGHT = p.loadImage('DL1.JPG');
  };
    
  p.setup = function () {
    canvas = p.createCanvas(displayWidth/2, displayHeight/2);
    p.background (200);
    DAYLIGHT.resize(displayWidth/2,0);
    DLslider = p.createSlider(0, 255, 0);
    DLslider.position(10, 400);
    DLslider.style('width', '200px');
  
  
  };
  
  p.draw = function () {
    p.background(0);
    p.blendMode(SCREEN);
    const DLvalue = DLslider.value();
    p.tint(255, 255-DLvalue);
    p.image(DAYLIGHT,0,0);  
  } ;
    
    
  };
  let myp5 = new p5(sketch);
2

System variables need the sketch’s reference just like methods do:
p.createCanvas(p.displayWidth / 2, p.displayHeight / 2);