​

let firstSlider; 

​

let firstButton; 

​

​

function setup() {

  createCanvas(600, 600);

  imgBase = loadImage('base.png'); // Load the image

  imgGas = loadImage('hydrogen.png');

  // createSlider(minimum, maximum, default value, step);

  // default value and step are optional.

  firstSlider = createSlider(0, 255, 100);

  // You can change it's size:

  firstSlider.size(200,20);

  // You can set it's position:

  firstSlider.position(80,50);

  // You can hide (or show) the button(uncomment each line to see results):

  // templateSlider.hide();

  // templateSlider.show();

  firstButton = createButton("Template Button");

  // You can change it's size:

  firstButton.size(200,20);

  // You can set it's position:

  firstButton.position(330,50);

  // You can set what happens when it is called:

  firstButton.mousePressed(() => {

    // What should happen?

    print("I've been pressed!");

  });

  // You can set it's shape (uncomment each line to see results)

  // firstButton.elt.style['border-radius'] = "50%";

  firstButton.elt.style['border-radius'] = "12px";

  // You can change it's font color (uncomment each line to see results)

  // templateButton.elt.style['color'] = "red";

  // templateButton.elt.style['color'] = color(255,0,0);

  // You can change it's background color(uncomment each line to see results)

  // templateButton.elt.style['background-color'] = "red";

  // templateButton.elt.style['background-color'] = color(255,0,0);

  // You can hide (or show) the button(uncomment each line to see results):

  // templateButton.hide();

  // templateButton.show();

}

​

function draw() {

  background(220);

  if (displayImage == 0){

    image(imgBase, 100, 100, 400, 400)

  }

  else if (displayImage == 1){

    image(imgGas, 100, 100, 400, 400)

  }

  //image(img, 0, 0);

  //image(img, 0, height / 2, img.width / 2, img.height / 2);

  // You can extract the value of the slider this way:

  //background(firstSlider.value());

}

​

function mouseClicked() {

  if (mouseX > 0 && mouseX < 800 && mouseY > 0 && mouseY < 800 && displayImage == 0){

  displayImage = 1;  

  }

  else if (mouseX > 0 && mouseX < 800 && mouseY > 0 && mouseY < 800 && displayImage == 1){

  displayImage = 0;  

  }

}

​

​

​

//_________________________Ziwie code

​

  y = mouseY;

  x = mouseX;

    if (x > 40 && x < 340) {

    if (y > 150 && y < 450) {

      currImg = img1;

    } else if (y < 135.2) {

      currImg = img2;

      image(currImg, 120, 4, 680, 675);

    }

  }