How do I load and image in p5js for html?

p5.js Beginners
1

It’s hard to explain but basically, I have a project which includes an image and I want to make an Html website that runs the p5js code. I already got the website set up and the code, but when I run it the image doesn’t load, even though it’s in the web file on my computer. How do I fix this?

p5js project: https://www.openprocessing.org/sketch/1038452

HTML code:

<<!DOCTYPE html>
<html lang="">
  <title>MARS P5.js 2020 Image Processing</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>

  <script src="../p5.js"></script>
  <script src="../addons/p5.sound.min.js"></script>
  <script src="image.js"></script>
  <h1 style="color: rgb(0,0,0);  font-family: Helvetica;">MARS P5.js 2020 Image Processing</h1>
  <p style="color: rgb(0,0,0); font-family: Helvetica;" >e</p>
  <a href="index.html" style="color: rgb(0,0,0);  font-family: Helvetica;"> <--  </a>

  </head> 

  </body>
</html>

Also for some reason the it doesn’t all the time

2

p5js.org/reference/#/p5/preload

1 Like
3

Thx man <3, Does setup run every new frame?

4

p5js.org/reference/#/p5/setup

1 Like
5

I too speak in the language of hyperlinks

2 Likes
6

On my website it’s just stuck at loading now, is there a solution to that?

7

Am I supposed to know which site? :shushing_face:

1 Like
8

The html code I posted above running the p5.js sketch

9

AFAIK your HTML file should work. The unknown factor is the “image.js” file. :question:

Anyways the example sketch below contains both the “index.html” & “sketch.js” files together w/ 2 images inside its subfolder “assets/”: :angel:

1 Like
10

image.js file is in the same folder as the html and the photo file.
What am I supposed to asyncing?

11

That’s not what I’ve meant by “unknown factor”. I’ve meant its content! :warning:

You should pay attention on how my “sketch.js” file loads its 2 images inside preload(). :framed_picture: