blendMode in instance mode

nikodemd · September 3, 2020, 1:45pm

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:

Code:

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!

GoToLoop · September 3, 2020, 4:44pm

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

nikodemd · September 7, 2020, 1:11pm

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:

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:

<!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>

GoToLoop · September 7, 2020, 3:23pm

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

    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:

    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?

nikodemd · September 7, 2020, 6:14pm

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

GoToLoop · September 7, 2020, 7:23pm

All members belonging to class p5, that is, anything listed here: reference | p5.js

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

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

gist.github.com

https://gist.github.com/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22

.block

height: 650
scrolling: no
border: yes
license: cc-by-4.0

adjustFrameSize.js

'use strict';

p5.prototype.adjustFrameSize = function () {
  if (frameElement) {
    frameElement.height = frameElement.frameBorder = 0;
    frameElement.height = this.getDocHeight() + 'px';
    frameElement.width  = this.getDocWidth()  + 'px';
  }
};

This file has been truncated. show original

all.html

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>

<script defer src=adjustFrameSize.js></script>
<script defer src=ball.js></script>

<script defer src=global.js></script>
<iframe src=global.html></iframe>

<script defer src=instance.js></script>
<script defer src=instance.js></script>

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

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

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

nikodemd · September 8, 2020, 6:49pm

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?

GoToLoop · September 8, 2020, 7:30pm

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

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

nikodemd · September 9, 2020, 12:24pm

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:

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:

<!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).

nikodemd · September 9, 2020, 3:36pm

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!

Topic		Replies	Views
P5 instance mode with image and sliders Coding Questions	1	373	September 3, 2020
3D model does not respond to light in instance mode Coding Questions	1	211	June 26, 2023
blendMode problems p5.js	4	1656	July 21, 2018
Instance mode creating two canvas Coding Questions	8	3211	October 7, 2019
Help with instance mode? Coding Questions	1	391	December 16, 2018

blendMode in instance mode

Related topics