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!

Start with measurement.php and applet.js, including the p5.js script reference and the image paths from the data folder. Run the page and inspect whether the sketch loads and its images appear; done means the p5.js applet is visible on the website with its images.

Written by the indexing model from the issue text.