blendMode in instance mode

p5.js Beginners
3

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>
1 Like