Menu
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>
510
asked Oct 19 '25 17:10
To use p5.js locally on your PC, unlike the online editor they offer, you have to install a local server:
https://github.com/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.
159
answered Oct 21 '25 05:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With