Why the button which was located in a specific place in Processing is now on all the page/work?

p5.js Libraries
1

i wrote a skech in Processing and it was working. I toke the soud out off the first page and add a button to play it. I working on where and how to display a sound with a new button,
BUT, the thing is, why the ET head button is actived allover the image??
in p5js…

Here is the code:

//import stringsound;
//SoundFile soundfile;

var song;
var button;

let vid;

var link;
let mySound;

var et;
var opacity = 0;
var img; //here
var txt;
var trc;
let overButton = false;

var myboolean = (backwards = false);
let timeLapse = 400;
let timeTrack;

function setup() {
  createCanvas(600, 600);
  song = loadSound("fabFX.mp3", loaded);
  button = createButton("play");
  button.mousePressed(togglePlaying);

  //var audio = new Audio("fabFX.mp3");

  //audio.play();
  //soundfile = new SoundFile(this, "fabFX.mp3");
  //soundfile.loop();

  //capa = loadImage("esfera1600.jpg");



  //images
  trc = loadImage("Trance3.png");
  txt = loadImage("TextoTecFXpng.png");
  et = loadImage("etFXpng.png"); // Load the image into the program
  et.resize(258, 458);

  vid = createVideo(
    ["assets/small.mp4", "assets/small.ogv", "assets/small.webm"],
    vidLoad
  );

  vid.size(100, 100);
}

// This function is called when the video loads
function vidLoad() {
  vid.loop();
  vid.volume(0);
}

function loaded() {
  console.log("loaded");
}

function togglePlaying() {
  if (!song.isPlaying()) {
    song.play();
    song.setVolume(0.3);
    button.html("pause");
  } else {
    song.pause();
    button.html("play");
  }
}

function draw() {
  background(0); // total canva black

  // rect flahing/blinking

  let m = millis();
  fill(m % 200); // velocity of flashs ** not working good ** maybe my computer..
  rect(25, 25, 555, 555, 30);
  //image(et, 130, 125 );
  // image(txt, 50, 40);

  //rgb
  tint(20, 17, 247, 100); // Alpha to 102 without changing the tint
  image(et, 140, 125);
  tint(255, 0, 0, 80); // Tint to yellow, alpha to 153
  image(et, 120, 125);

  //opacity
  if (opacity < 255) {
    // When less than the maximum,
    opacity += 0.5; // increase opacity
  }
  tint(255, opacity);
  image(et, 130, 125);
  image(txt, 50, 40);
  image(trc, 85, 130);

  noFill();
  stroke(255);

  ellipse(mouseX, mouseY - 55, 200, 200);

  //button link to web page

  if (overButton == true) {
    var m4 = millis();
    fill(m4 % 150);
    circle(290, 250, 30);
    cursor(CROSS);
  } else {
    noStroke();
    noFill();
    cursor(HAND);
  }
}

//circle(260, 230, 30);

function mousePressed() {
  window.location.replace(
    "https://discourse.processing.org/"
  );
  location.href =
    "https://libgen.is/book/index.php?md5=2913AE29A03A85BC162ADBCA2AB4E1A0";
}

function mouseMoved() {
  checkButtons();
}

function mouseDragged() {
  checkButtons();
}

function checkButtons() {
  if (mouseX > 200 && mouseX - 40 < 300 && mouseY + 35 > 200 && mouseY < 300) {
    overButton = true;
  } else {
    overButton = false;
  }
}
2

continued elsewhere

Chrisir