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