# P5 instance mode with image and sliders

**URL:** <https://discourse.processing.org/t/p5-instance-mode-with-image-and-sliders/23654>\
**Category:** Coding Questions\
**Created:** [September 3, 2020, 9:46am UTC](https://discourse.processing.org/t/p5-instance-mode-with-image-and-sliders/23654 "2020-09-03T09:46:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nikodemd](https://avatars.discourse-cdn.com/v4/letter/n/e19adc/32.png) [@nikodemd](https://discourse.processing.org/u/nikodemd)\
**Post date:** [September 3, 2020, 9:46am UTC](https://discourse.processing.org/t/p5-instance-mode-with-image-and-sliders/23654/1 "2020-09-03T09:46:47Z")

</div>

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:

```auto
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);

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 3, 2020, 4:48pm UTC](https://discourse.processing.org/t/p5-instance-mode-with-image-and-sliders/23654/2 "2020-09-03T16:48:01Z")

</div>

> [@nikodemd](#):
>
> `p.createCanvas(displayWidth/2, displayHeight/2);`

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