javascript - The page is stuck on "Loading..." when using preload() in "p5.js"

I am trying to make a DVD screensaver in p5.js.

I use preload() to load the DVD logo, but when I put it in my code, the whole page just turns into "Loading...".

Here is my code:

let x;
let y;
let xspeed;
let yspeed;

let dvd;

function preload() {
    dvd = loadImage("dvd.png");
}

function setup() {
    createCanvas(800, 600);
    x = 400;
    y = 300;
    xspeed = 10;
    yspeed = 10;
}

function draw() {
    background(0);
    image(dvd, x, y);
    x = x + xspeed;
    y = y + yspeed;
    
    if (x + 80 == width || x === 0) {
        xspeed = -xspeed;
    }
    if (y + 60 == height || y === 0) {
        yspeed = -yspeed;
    }
}

<!DOCTYPE html>

<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

        
        <script src="dvd-screensaver.js"></script>
        <script src="p5.js"></script>
    </body>
</html>

I am trying to make a DVD screensaver in p5.js.

I use preload() to load the DVD logo, but when I put it in my code, the whole page just turns into "Loading...".

Here is my code:

let x;
let y;
let xspeed;
let yspeed;

let dvd;

function preload() {
    dvd = loadImage("dvd.png");
}

function setup() {
    createCanvas(800, 600);
    x = 400;
    y = 300;
    xspeed = 10;
    yspeed = 10;
}

function draw() {
    background(0);
    image(dvd, x, y);
    x = x + xspeed;
    y = y + yspeed;
    
    if (x + 80 == width || x === 0) {
        xspeed = -xspeed;
    }
    if (y + 60 == height || y === 0) {
        yspeed = -yspeed;
    }
}

<!DOCTYPE html>

<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

        
        <script src="dvd-screensaver.js"></script>
        <script src="p5.js"></script>
    </body>
</html>

Share Improve this question edited Jan 9, 2024 at 12:47 CPPUIX 2,3998 gold badges16 silver badges35 bronze badges asked Nov 20, 2019 at 11:09 Emil 1073 silver badges15 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

To use p5.js locally on your PC, unlike the online editor they offer, you have to install a local server:

https://github./processing/p5.js/wiki/Local-server

If you follow the instructions they offer at the link above, it will be pretty straightforward. I personally use the Node http-server option.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - The page is stuck on "Loading..." when using preload() in "p5.js" - Stack Overf

1 Answer 1

与本文相关的文章

评论列表(0)