Is there a way to translate this p5.js sketch in javascript?

Question

I'm developing my portfolio website (www.beatricebazzan.com). It turns out to be really slow and I detected that it depends on the p5.js file. If I hide it, the website works perfectly on every device. I was so wandering if there is a way to translate this sketch into a simple js file, that maybe is less heavy.

This is my sketch:

var provaHover;
var mouseIsOvering = false;
let img;

var p2Hover;
var mouseIsOvering2 = false;
let img2;

var p3Hover;
var mouseIsOvering3 = false;
let img3;

var p4Hover;
var mouseIsOvering4 = false;
let img4;

var p5Hover;
var mouseIsOvering5 = false;
let img5;

var p6Hover;
var mouseIsOvering6 = false;
let img6;

var p7Hover;
var mouseIsOvering7 = false;
let img7;

var p8Hover;
var mouseIsOvering8 = false;
let img8;

var p9Hover;
var mouseIsOvering9 = false;
let img9;

var p10Hover;
var mouseIsOvering10 = false;
let img10;

var p11Hover;
var mouseIsOvering11 = false;
let img11;

var p12Hover;
var mouseIsOvering12 = false;
let img12;

var p13Hover;
var mouseIsOvering13 = false;
let img13;

function preload() {}

function setup() {
  // let canvas = createCanvas(windowWidth, windowHeight);
  let canvas = createCanvas(windowWidth, 1600);
  canvas.position(0, 0);
  // img = loadImage("https://i.imgur.com/NiZiYUz.gif");
  img = loadImage("https://raw.githubusercontent.com/BazziBeatrice/portfolio/master/assets/intro/spleen-intro.gif");
  provaHover = select("#p01")

  img2 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/thelostgallery-intro.jpg");
  p2Hover = select("#p02")

  img3 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/physicalinternet-intro.jpg");
  p3Hover = select("#p03")

  img4 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/placemaking-intro.jpg");
  p4Hover = select("#p04")

  img5 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/portfolio/master/assets/intro/setjettersunited-intro.jpg");
  p5Hover = select("#p05")

  // img6 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/contratempo-intro.gif");
  img6 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/portfolio/master/assets/intro/contratempo-intro.png");
  p6Hover = select("#p06")

  img7 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/outforia_intro.gif");
  p7Hover = select("#p07")

  // img8 = loadImage("https://i.imgur.com/uv8wnM7.gif");
  img8 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/portfolio/master/assets/images/fuso-tv.gif");
  p8Hover = select("#p08")

  img9 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/ihavegotnothingtowear-intro.png");
  p9Hover = select("#p09")

  img10 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/atavola-intro.jpg");
  p10Hover = select("#p10")

  img11 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/lineunit-intro.jpg");
  p11Hover = select("#p11")

  img12 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/thekingof-intro.gif");
  p12Hover = select("#p12")

  img13 = loadImage("https://raw.githubusercontent.com/BazziBeatrice/Portfolio/master/assets/intro/video-macchie-intro.gif");
  p13Hover = select("#p13")

}

function draw() {

  if (mouseIsOvering == true) {mostraImmagine();} else if (mouseIsOvering2 == true) {mostraImmagine2();
  } else if (mouseIsOvering3 == true) {mostraImmagine3();
  } else if (mouseIsOvering4 == true) {mostraImmagine4();
  } else if (mouseIsOvering5 == true) {mostraImmagine5();
  } else if (mouseIsOvering6 == true) {mostraImmagine6();
  } else if (mouseIsOvering7 == true) {mostraImmagine7();
  } else if (mouseIsOvering8 == true) {mostraImmagine8();
  } else if (mouseIsOvering9 == true) {mostraImmagine9();
  } else if (mouseIsOvering10 == true) {mostraImmagine10();
  } else if (mouseIsOvering11 == true) {mostraImmagine11();
  } else if (mouseIsOvering12 == true) {mostraImmagine12();
  } else if (mouseIsOvering13 == true) {mostraImmagine13();
  } else {clear();}
  // console.log(mouseIsOvering);
}

function mouseStatus(status) {mouseIsOvering = status;}
function mouseStatus2(status) {mouseIsOvering2 = status;}
function mouseStatus3(status) {mouseIsOvering3 = status;}
function mouseStatus4(status) {mouseIsOvering4 = status;}
function mouseStatus5(status) {mouseIsOvering5 = status;}
function mouseStatus6(status) {mouseIsOvering6 = status;}
function mouseStatus7(status) {mouseIsOvering7 = status;}
function mouseStatus8(status) {mouseIsOvering8 = status;}
function mouseStatus9(status) {mouseIsOvering9 = status;}
function mouseStatus10(status) {mouseIsOvering10 = status;}
function mouseStatus11(status) {mouseIsOvering11 = status;}
function mouseStatus12(status) {mouseIsOvering12 = status;}
function mouseStatus13(status) {mouseIsOvering13 = status;}

function mostraImmagine() {
  image(img, mouseX, mouseY + 20, (img.width / 4), (img.height / 4))}
function mostraImmagine2() {
  image(img2, mouseX, mouseY + 40, (img.width / 6), (img.height / 4))}
function mostraImmagine3() {
  image(img3, mouseX, mouseY + 40, (img.width / 4), (img.height / 7))}
function mostraImmagine4() {
  image(img4, mouseX, mouseY + 50, (img.width / 4), (img.height / 5))}
function mostraImmagine5() {
  image(img5, mouseX, mouseY - 30, (img.width / 4), (img.height / 6))}
function mostraImmagine6() {
  image(img6, mouseX, mouseY -40, (img.width / 4), (img.height / 5))}
function mostraImmagine7() {
  image(img7, mouseX, mouseY -100, (img.width / 6), (img.height / 4))}
function mostraImmagine8() {
  image(img8, mouseX, mouseY + 20, (img.width / 4.5), (img.height / 5))}
function mostraImmagine9() {
  image(img9, mouseX, mouseY - 20, (img.width / 3), (img.height / 4))}
function mostraImmagine10() {
  image(img10, mouseX, mouseY + 20, (img.width / 6), (img.height / 4))}
function mostraImmagine11() {
  image(img11, mouseX, mouseY - 60, (img.width / 5), (img.height / 4))}
function mostraImmagine12() {
  image(img12, mouseX, mouseY - 80, (img.width / 4), (img.height / 4.5))}
function mostraImmagine13() {
  image(img13, mouseX, mouseY - 140, (img.width / 5.5), (img.height / 4))}

and this is a part of the index where I link it:

                    <div id="p01" onmouseover="mouseStatus(true);" onmouseout="mouseStatus(false);">
                        <h1 id="main-subtitle" class="text-hover margin-index-top">
                            <a href="pages/spleen.html" id="project01" class="text-hover shadow-phone pointer">1. SPLEEN / editorial design</a>
                        </h1>
                    </div>

thank you a lot.

Answer 1

So, as been pointed out, the code is a bit hard to read. Using some For-loops and loading your images in arrays would help, as well as to draw images to the screen.

Beyond this, you're using a number of animated gifs, and these can be quite large and take a while to load. I'm not sure I understand:

If I hide it, the website works perfectly on every device.

Are you saying if you don't run your p5.js sketch the website runs normally? I don't know if I understand how that's possibly as your setup() is loading in lots of image files.

Recommendations are to: clean up your code and reduce your file sizes.

p5.js itself is not that large, so the resources to load that shouldn't be contributing too much to lag.