HELP: I'm new to P5.js... I don't know how to put it up my website.

Hello, I've been using processing for a while, and I just found out about p5.js, and I want to know how to use it on my website.

This is my php file that I am trying to use to put up my p5.js file called applet,js,

```

---

Derivation of Surface Area of Conic Figures


Examples



var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}

---

```

The code for the applet.js is this:

```
var Squareover = false;
var Rectover = false;
var Parallelover = false;
var Rhombusover = false;
var Circleover = false;
//----------------------------------------- hover
var square;
var rectangle;
var parallel;
var rhombus;
var circle;
var help;
//----------------------------------------- image load
var hasClicked1 = false;
var hasClicked2 = false;
var hasClicked3 = false;
var hasClicked4 = false;
var hasClicked5 = false;
//----------------------------------------- click boolean

function preload(){
square = loadImage("square.png");
rectangle = loadImage("rectangle.png");
parallel = loadImage("parallel.png");
rhombus = loadImage("rhombus.png");
circle = loadImage("circle.png");
help = loadImage("key.PNG");
}

//***************************************************************************** mouse X and Y update

function update(var x, var y){
if (overSquare(40,20,100,100)){
Squareover = true;
} else {
Squareover = false;
}

if (overRect(200,20,150,100)){
Rectover = true;
} else {
Rectover = false;
}

if (overParallel(40, 170, 140, 170, 120, 255, 20, 255)){
Parallelover = true;
} else {
Parallelover = false;
}

if (overRhombus(220, 215, 305, 170, 390, 215, 305, 255)){
Rhombusover = true;
} else {
Rhombusover = false;
}

if (overCircle(480, 110, 100)){
Circleover = true;
} else {
Circleover = false;
}
}
//************************************************************************ setup

function setup(){
background(255,255,255);
createCanvas(600,650);
}

//***************************************** drawing (main)

function draw(){
update(mouseX, mouseY);

if (Squareover){ //square display change if hover
fill(#D88367);
stroke(#D88367);
} else {
fill(#FF8D46);
stroke(#FF8D46);
}
rect(40,20,100,100); //square

if (hasClicked1 == true){
image(square, 47.5,35);
}
// --------------------------------------------------------- square

if (Rectover){
fill(#A4D67B);
stroke(#A4D67B);
} else {
fill(#BDF58F);
stroke(#BDF58F);
}
rect(200, 20, 150, 100); //rectangle

if (hasClicked2 == true){
image(rectangle, 210.5,35);
}
// --------------------------------------------------------- rect

if (Parallelover){
fill(#98E0DF);
stroke(#98E0DF);
} else {
fill(#7EFAF9);
stroke(#7EFAF9);
}
quad(40, 170, 195, 170, 175, 255, 20, 255);

if (hasClicked3 == true){
image(parallel, 45, 176);
}
//---------------------------------------------------------- parallelogram
if (Rhombusover){
fill(#8F92D3);
stroke(#8F92D3);
} else {
fill(#AAADFF);
stroke(#AAADFF);
}
quad(220, 215, 305, 155, 390, 215, 305, 270);

if (hasClicked4 == true){
image(rhombus, 260, 177,90,80);
}
//---------------------------------------------------------- Rhombus

if (Circleover){
fill(#DB7373);
stroke(#DB7373);
} else {
fill(#FF8989);
stroke(#FF8989);
}
ellipse(480, 110, 150, 150);

if(hasClicked5 == true){
image(circle, 440, 80);
}

//---------------------------------------------------------- Circle

image(help, 40, 310);

}

function mousePressed(){
if(Squareover){
hasClicked1 = true;
}

if(Rectover){
hasClicked2 = true;
}

if(Parallelover){
hasClicked3 = true;
}

if(Rhombusover){
hasClicked4 = true;
}

if(Circleover){
hasClicked5 = true;
}
}

var overSquare(var x, var y, var width, var height) {
if (mouseX >=x && mouseX <= x+width && mouseY >= y && mouseY <= y+height){
return true;
} else {
return false;
}
}

var overRect(var x, var y, var width, var height) {
if (mouseX >=x && mouseX <= x+width && mouseY >= y && mouseY <= y+height){
return true;
} else {
return false;
}
}

var overParallel(var x1, var y1, var x2, var y2, var x3, var y3, var x4, var y4){
if (mouseX >= x4 && mouseX <= x2 && mouseY >= y1 && mouseY <= y4){
return true;
} else {
return false;
}
}

var overRhombus(var x1, var y1, var x2, var y2, var x3, var y3, var x4, var y4){
if (mouseX >=x1 && mouseX <= x3 && mouseY >= y2 && mouseY <= y4){
return true;
} else {
return false;
}
}

var overCircle(var x, var y, var diameter) {
var disX = x - mouseX;
var disY = y - mouseY;
if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
return true;
} else {
return false;
}
}

```

It worked perfectly well in processing but I couldn't find a way to access my data folder (where my images that I load up are located) in processing.js (when I opened it up on my website: math.helpit.ro/measurement.php , I could not see the images)... That's why I thought p5.js would help.

Can someone please help and tell me what I need to do to make my applet appear on my website?

thank you!