blendMode in instance mode

p5.js Beginners
9

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="https://discourse.processing.org/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="https://discourse.processing.org/js/p5.js"></script>
    <script src="https://discourse.processing.org/js/sketch2.js"></script>
  
</body></html>

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