# blendMode in instance mode

**URL:** <https://discourse.processing.org/t/blendmode-in-instance-mode/23657>\
**Category:** Beginners\
**Created:** [September 3, 2020, 1:45pm UTC](https://discourse.processing.org/t/blendmode-in-instance-mode/23657 "2020-09-03T13:45:28Z")\
**Posts on this page:** 10\
**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, 1:45pm UTC](https://discourse.processing.org/t/blendmode-in-instance-mode/23657/1 "2020-09-03T13:45:28Z")

</div>

Hi guys!

I am running into issues while converting p5 global code into instance mode. I am making sliders that control blending of the images using blendMode(SCREEN). In global sketch, all was fine. When I transition to instance mode, the line of code that causes issues is p.blendMode(SCREEN);

Here is the sketch:

https://editor.p5js.org/nikodemd/embed/2J93vi4V7k

Code:

```auto
let sketch = function(p) {
  let DAYLIGHT;
  let LAMPS1;
  let LAMPS2;

   p.preload = function() {
    DAYLIGHT = p.loadImage('DL1-1.JPG');
    LAMPS1 = p.loadImage('NL1.JPG');
    LAMPS2 = p.loadImage('TL1.JPG');
  };
  
  
  p.setup = function() {
    p.createCanvas(700, 410);
    DAYLIGHT.resize(700,410); 
    LAMPS1.resize(700,410); 
    LAMPS2.resize(700,410); 
    DLslider = p.createSlider(0, 255, 0);
    DLslider.position(10, 30);
    DLslider.style('width', '100px');
    L1slider = p.createSlider(0, 255, 0);
    L1slider.position(10, 60);
    L1slider.style('width', '100px');
    L2slider = p.createSlider(0, 255, 0);
    L2slider.position(10, 90);
    L2slider.style('width', '100px');
    
  };

  p.draw = function() {
    p.background(0);
    //p.blendMode(SCREEN); - line of code that causes issues!
  const DLvalue = DLslider.value();
  const L1value = L1slider.value();
  const L2value = L2slider.value();
   p.tint(255, 255-DLvalue);
    p.image(DAYLIGHT,0,0); 
    p.tint(255, L1value);
    p.image(LAMPS1,0,0);
    p.tint(255, L2value);
    p.image(LAMPS2,0,0);
   
  };
};

let myp5 = new p5(sketch);

```

Does anyone have an idea how to make the blend mode work in instance mode? Any help will be awesome!

---

<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:44pm UTC](https://discourse.processing.org/t/blendmode-in-instance-mode/23657/2 "2020-09-03T16:44:05Z")

</div>

> [@nikodemd](#):
>
> , the line of code that causes issues is `p.blendMode(SCREEN);`

The constant SCREEN also needs to be prefixed w/ the sketch’s instance parameter _p_ AFAIK:  
`p.blendMode(p.SCREEN);`

---

<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 7, 2020, 1:11pm UTC](https://discourse.processing.org/t/blendmode-in-instance-mode/23657/3 "2020-09-07T13:11:39Z")

</div>

thank you, I love you - I had no clue where to go.

edit: it worked very well in p5 online editor, however, when I put the code in VS code and go Live Server, it is just stuck on ''Loading…" any idea what could be the issue?

here is the fixed code in js:

```auto
let sketch1 = function(p) {
  let DAYLIGHT;
  let LAMPS1;
  let LAMPS2;

   p.preload = function() {
    DAYLIGHT = loadImage('../img/DL1.jpg');
    LAMPS1 = loadImage('../img/NL1.jpg');
    LAMPS2 = loadImage('../img/TL1.jpg');
  };
  
  
  p.setup = function() {
    p.createCanvas(700, 410).parent("element0");
    DAYLIGHT.resize(700,410); 
    LAMPS1.resize(700,410); 
    LAMPS2.resize(700,410); 
    DLslider = p.createSlider(0, 255, 0).parent("element0");
    DLslider.position(10, 30).parent("element0");
    DLslider.style('width', '100px');
    L1slider = p.createSlider(0, 255, 0).parent("element0");
    L1slider.position(10, 60).parent("element0");
    L1slider.style('width', '100px');
    L2slider = p.createSlider(0, 255, 0).parent("element0");
    L2slider.position(10, 90).parent("element0");
    L2slider.style('width', '100px');
    
  };

  p.draw = function() {
    p.background(0);
    p.blendMode(p.SCREEN);
  const DLvalue = DLslider.value();
  const L1value = L1slider.value();
  const L2value = L2slider.value();
   p.tint(255, 255-DLvalue);
    p.image(DAYLIGHT,0,0); 
    p.tint(255, L1value);
    p.image(LAMPS1,0,0);
    p.tint(255, L2value);
    p.image(LAMPS2,0,0);
    p.blendMode(p.BLEND);
   
  };
};

let myp5 = new p5(sketch1);

```

and html:

```auto
<!DOCTYPE html><html><head>

    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">

  </head>
  <body>
    <h1> SLIDERS TEST</h1>
    <div class="centering">
       <div id="element0" style="position: relative; width: 1200px; margin: 0 auto;"></div>
  </div>
    <script src="js/p5.js"></script>
    <script src="js/sketch1.js"></script>
</body></html>

```

---

<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 7, 2020, 3:23pm UTC](https://discourse.processing.org/t/blendmode-in-instance-mode/23657/4 "2020-09-07T15:23:53Z")

</div>

> [@nikodemd](#):
>
> ```auto
> DAYLIGHT = loadImage('../img/DL1.jpg');
> LAMPS1 = loadImage('../img/NL1.jpg');
> LAMPS2 = loadImage('../img/TL1.jpg');
> 
> ```

B/c **loadImage()** is also a method from class p5, you need its reference like all the other p5 members:

```auto
    DAYLIGHT = p.loadImage('../img/DL1.jpg');
    LAMPS1 = p.loadImage('../img/NL1.jpg');
    LAMPS2 = p.loadImage('../img/TL1.jpg');

```

BtW, DAYLIGHT, LAMPS1 & LAMPS2 aren’t constant variables.  
So it’s better to use the “lowerUpperCase” style on them:

```auto
    daylight = p.loadImage('../img/DL1.jpg');
    lamps1 = p.loadImage('../img/NL1.jpg');
    lamps2 = p.loadImage('../img/TL1.jpg');

```

P.S.: Ru sure you need `../` in order to access those 3 images? 🤔

---

<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 7, 2020, 6:14pm UTC](https://discourse.processing.org/t/blendmode-in-instance-mode/23657/5 "2020-09-07T18:14:47Z")

</div>

p.loadImage solved the issue. You’re my saviour! I think I still do not understand completely how to operate in instance mode… gotta experiment some more

---

<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 7, 2020, 7:23pm UTC](https://discourse.processing.org/t/blendmode-in-instance-mode/23657/6 "2020-09-07T19:23:21Z")

</div>

> [@nikodemd](#):
>
> I still do not understand completely how to operate in instance mode…

All members belonging to class p5, that is, anything listed here: [reference | p5.js](http://p5js.org/reference)

Needs to be prefixed w/ a variable referencing the p5 instance it is acting upon.

In your case that variable is the callback **sketch1()**'s parameter named _p_: [reference | p5.js](http://p5js.org/reference/#/p5/p5)

Here’s some sketch which has both global & instance mode versions:

> <https://gist.github.com/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22>
>
> There are more than three files. show original

Alternatively you can simply forget about instance mode and just have each global mode sketch inside an `<iframe>` tag:  
[Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe](http://Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe)

As you can see in action from the link below w/ 2 global mode & 2 instance mode of the same sketch running on the same page:  
[Matter-JS-Bouncing-Colorful-Balls.Glitch.me/all.html](http://Matter-JS-Bouncing-Colorful-Balls.Glitch.me/all.html)

You can hit CTRL+U in order to inspect its “all.html” file btW.

---

<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 8, 2020, 6:49pm UTC](https://discourse.processing.org/t/blendmode-in-instance-mode/23657/7 "2020-09-08T18:49:50Z")

</div>

oki doki, makes more sense now - to crosscheck the code with the reference form p5. What I found quite confusing was that when I used function setTimeout(p.functionname, timeinmiliseconds); I do not use ‘‘p.’’ in the start… I guess it is because it is JS functionality, nad not p5?

---

<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 8, 2020, 7:30pm UTC](https://discourse.processing.org/t/blendmode-in-instance-mode/23657/8 "2020-09-08T19:30:47Z")

</div>

> [@nikodemd](#):
>
> I guess it is because it is JS functionality, and not p5?

That’s right! Method **setTimeout()** belongs to the class mixin WindowOrWorkerGlobalScope:

> **[setTimeout() global function - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)**
>
> The global setTimeout() method sets a timer which executes a function or specified
> piece of code once the timer expires.

Which is a JS browser builtin and not specifically related to the p5.js library.

---

<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 9, 2020, 12:24pm UTC](https://discourse.processing.org/t/blendmode-in-instance-mode/23657/9 "2020-09-09T12:24:30Z")

</div>

Thanks for all the help!!

I have one more question, hope its not too much!!

So I managed to have two separate sketches (they have the same funcionality, however one is for simulating a sequence through setTimeout on multiple sliders values, and the other one has ‘real-time’’ overview) to work in instance mode, and now I am trying to have both of them displayed on website. I put em all together in one file called ‘‘sketch2.js’’

The code:

```auto
let sketch = function(p) {

let daylight;
let lamps1;
let lamps2;

p.preload = function() {
  daylight = p.loadImage('../img/DL1.jpg');
  lamps1 = p.loadImage('../img/NL1.jpg');
  lamps2 = p.loadImage('../img/TL1.jpg');
}
p.setup = function() {
  
  p.createCanvas(1200,600);
  daylight.resize(1200,600);
  lamps1.resize(1200,600);
  lamps2.resize(1200,600);

  button = p.createButton('SIMULATE');
  button.position(10, 720);
  button.mousePressed(p.startseq);

  L1slider = p.createSlider(0, 255, 0);
  L1slider.position(10, 630);
  L1slider.style('width', '100px');
  L2slider = p.createSlider(0, 255, 0);
  L2slider.position(10, 660);
  L2slider.style('width', '100px');

  L12slider = p.createSlider(0, 255, 0);
  L12slider.position(120, 630);
  L12slider.style('width', '100px');
  L22slider = p.createSlider(0, 255, 0);
  L22slider.position(120, 660);
  L22slider.style('width', '100px');

  L13slider = p.createSlider(0, 255, 0);
  L13slider.position(240, 630);
  L13slider.style('width', '100px');
  L23slider = p.createSlider(0, 255, 0);
  L23slider.position(240, 660);
  L23slider.style('width', '100px');
 
  L14slider = p.createSlider(0, 255, 0);
  L14slider.position(360, 630);
  L14slider.style('width', '100px');
  L24slider = p.createSlider(0, 255, 0);
  L24slider.position(360, 660);
  L24slider.style('width', '100px');

  p.image(daylight,0,0);
}

p.startseq = function()
  {
  
  setTimeout(p.slidersApply,50);
  setTimeout(p.slidersApply1,500);
  setTimeout(p.slidersApply2,1000);
  setTimeout(p.slidersApply3,1500);

  }

p.slidersApply = function (){

  p.background(0);
  p.blendMode(p.SCREEN);
  const L1value = L1slider.value();
  const L2value = L2slider.value();
    p.tint(255, 50);
    p.image(daylight,0,0);
    p.tint(255, L1value);
    p.image(lamps1,0,0);
    p.tint(255, L2value);
    p.image(lamps2,0,0);
    p.blendMode(p.BLEND);
}
p.slidersApply1 = function () {
  p.background(0);
  p.blendMode(p.SCREEN);
  const L12value = L12slider.value();
  const L22value = L22slider.value();
  p.tint(255,100);
  p.image(daylight,0,0);
  p.tint(255, L12value);
  p.image(lamps1,0,0);
  p.tint(255, L22value);
  p.image(lamps2,0,0);
  p.blendMode(p.BLEND);
}
p.slidersApply2 = function () 
{
  p.background(0);
  p.blendMode(p.SCREEN);
  const L13value = L13slider.value();
  const L23value = L23slider.value();
  p.tint(255, 150);

    p.image(daylight,0,0);
    p.tint(255, L13value);
    p.image(lamps1,0,0);
    p.tint(255, L23value);
    p.image(lamps2,0,0);
    p.blendMode(p.BLEND);
}

p.slidersApply3 = function () 
{
  
  p.background(0);
  p.blendMode(p.SCREEN);
  
  const L14value = L14slider.value();
  const L24value = L24slider.value();
    p.tint(255, 255);
    p.image(daylight,0,0);
    p.tint(255, L14value);
    p.image(lamps1,0,0);
    p.tint(255, L24value);
    p.image(lamps2,0,0);
    p.blendMode(p.BLEND);
}
}
let myp5 = new p5(sketch, 'element0');

//next sketch below
let sketch1 = function(p1) {

  let daylight;
  let lamps1;
  let lamps2;

   p1.preload = function() {
    daylight = p1.loadImage('../img/DL1.jpg');
    lamps1 = p1.loadImage('../img/NL1.jpg');
    lamps2 = p1.loadImage('../img/TL1.jpg');
  };
  
  p1.setup = function() {
    p1.createCanvas(700, 410);
    daylight.resize(700,410); 
    lamps1.resize(700,410); 
    lamps2.resize(700,410); 
    DLslider = p1.createSlider(0, 255, 0);
    DLslider.position(10, 30);
    DLslider.style('width', '100px');
    L1slider = p1.createSlider(0, 255, 0);
    L1slider.position(10, 60);
    L1slider.style('width', '100px');
    L2slider = p1.createSlider(0, 255, 0);
    L2slider.position(10, 90);
    L2slider.style('width', '100px');
  };

  p1.draw = function() {
    p1.background(0);
    p1.blendMode(p1.SCREEN);
  const DLvalue = DLslider.value();
  const L1value = L1slider.value();
  const L2value = L2slider.value();
    p1.tint(255, 255-DLvalue);
    p1.image(daylight,0,0); 
    p1.tint(255, L1value);
    p1.image(lamps1,0,0);
    p1.tint(255, L2value);
    p1.image(lamps2,0,0);
    p1.blendMode(p1.BLEND);
    p1.ellipse (100,1000,1000,100);
   
  };
};

let myp5 = new p5(sketch1, 'element1');

```

html:

```auto
<!DOCTYPE html><html><head>

    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">

  </head>
  <body>
    <h1> SLIDERS TEST</h1>
    <div class="centering">
       <div id="element1" style="position: relative; width: 1200px; margin: 0 auto;"></div>
       <div id="element0" style="position: relative; width: 600px; margin: 0 auto;"></div>
      
  </div>
    <script src="js/p5.js"></script>
    <script src="js/sketch2.js"></script>
  
</body></html>

```

But nothing happened when I Go Live in VS Code. (each of the codes works well separately).

---

<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 9, 2020, 3:36pm UTC](https://discourse.processing.org/t/blendmode-in-instance-mode/23657/10 "2020-09-09T15:36:04Z")

</div>

Hi again! I ust found the solution myself, I believe 🙂 it was all in… naming the let = myp51, instead of double let = myp5, which I believe caused errors.

Now its ust a matter of figuring a way out to put it centered nicely and tidy. Thanks again for heling out!