OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Error loading images in a React + p5.js project

  • Thread starter Thread starter Worker1432
  • Start date Start date
W

Worker1432

Guest
THE ERROR: This error appears if I use loadImage() function, even if I didn't use the image loaded anywhere else. In this case it is the background image, but even loading images I just want to use on certain assets, logs the same error. I have also tried other image formats to check, but again, same error.

My App.css still loads and renders the background plain black, but doesn't show any of the p5/Matter.js assets.

enter image description here

THE CODE: The problematic area of code can be found in the p.preload() function inside function sketch(), right after the variable declarations.

Code:
import React, { useRef, useEffect } from 'react';
import p5 from 'p5';
import Matter from 'matter-js'
import './App.css'
import Ball from "./components/Ball.jsx";
import Boundary from "./components/Boundary.jsx";
import Box from "./components/Box.jsx";

let Engine = Matter.Engine;
let World = Matter.Composite;
let Mouse = Matter.Mouse;
let MouseConstraint = Matter.MouseConstraint;
let Collision = Matter.Collision;
let ground, ball, world, engine, mCon, leftWall, rightWall, collision;
let boxes = [];
let score = 0;
let timer = 42;
let bgImage, monsterImage, ballImage;

function sketch(p) {
    p.preload = function() {
        bgImage = p.loadImage('background.webp');
    }

    p.setup = function() {
        const canvas = p.createCanvas(p.windowWidth, p.windowHeight);
        engine = Engine.create();
        world = engine.world;

        const canvasMouse = Mouse.create(canvas.elt);
        canvasMouse.pixelRatio = p.pixelDensity();
        const options = {
            mouse: canvasMouse,
        }
        mCon = MouseConstraint.create(engine, options);

        ground = new Boundary(p.width/2, p.height-10, p.width, 20, world);
        leftWall = new Boundary(10, p.height/2, 20, p.height, world);
        rightWall = new Boundary(p.width - 10, p.height/2, 20, p.height, world);
        ball = new Ball(p.width/2, p.height - 100, 30, world);

        World.add(world, [mCon]);
    }

    setInterval(spawnBoxes, 1500);

    function spawnBoxes() {
        if(boxes.length > 7) {
            World.remove(engine.world, boxes[0].body);
            boxes.splice(0, 1);
        }
        let xLoc = Math.random() * p.width;
        let yLoc = Math.random() * (p.height/2 - 100) + 100;
        boxes.push(new Box(xLoc, yLoc, 50, 50, world));
    }

    p.windowResized = function() {
        p.resizeCanvas(p.windowWidth, p.windowHeight);
    }

    p.draw = function () {
        p.background(51);
        Engine.update(engine);
        rightWall.show(p);
        leftWall.show(p);
        ground.show(p);
        ball.show(p);
        p.textSize(32);
        p.fill("white");
        p.text(`Score: ${score}`, 50, 50);

        for(let i = 0; i < boxes.length; i++) {
            boxes[i].show(p);
        }

        if(ball.body.position.y < 0 || ball.body.position.y > p.height + 50 || ball.body.position.x < 0 || ball.body.position.x > p.width + 50) {
            ball.reset(p);
        }

        for(let i = 0; i < boxes.length; i++) {
            if(Collision.collides(ball.body, boxes[i].body)) {
                console.log("HIT ", i);
                World.remove(engine.world, boxes[i].body);
                boxes.splice(i, 1);
                ball.reset(p);
                score += 5;
            }
        }
    }
}

function App() {
    const p5Container = useRef();

    useEffect(() => {
        const p5Instance = new p5(sketch, p5Container.current);

        return() => {
            p5Instance.remove();
        }
    }, []);

    return (
        <>
            <div ref={p5Container} className="container">
            </div>
        </>
    );
}

export default App;

I am not very sure what the error even means to be honest and where to start debugging.

Would appreciate any help, thanks!

EDIT: Don't have any errors using an online hosted image. But the docs seem to say that as long as the image url is relative, it should work?

<p><strong>THE ERROR:</strong> This error appears if I use loadImage() function, even if I didn't use the image loaded anywhere else. In this case it is the background image, but even loading images I just want to use on certain assets, logs the same error. I have also tried other image formats to check, but again, same error.</p>
<p>My App.css still loads and renders the background plain black, but doesn't show any of the p5/Matter.js assets.</p>
<p><a href="https://i.sstatic.net/tie3w4yf.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/tie3w4yf.png" alt="enter image description here" /></a></p>
<p><strong>THE CODE:</strong> The problematic area of code can be found in the p.preload() function inside function sketch(), right after the variable declarations.</p>
<pre><code>import React, { useRef, useEffect } from 'react';
import p5 from 'p5';
import Matter from 'matter-js'
import './App.css'
import Ball from "./components/Ball.jsx";
import Boundary from "./components/Boundary.jsx";
import Box from "./components/Box.jsx";

let Engine = Matter.Engine;
let World = Matter.Composite;
let Mouse = Matter.Mouse;
let MouseConstraint = Matter.MouseConstraint;
let Collision = Matter.Collision;
let ground, ball, world, engine, mCon, leftWall, rightWall, collision;
let boxes = [];
let score = 0;
let timer = 42;
let bgImage, monsterImage, ballImage;

function sketch(p) {
p.preload = function() {
bgImage = p.loadImage('background.webp');
}

p.setup = function() {
const canvas = p.createCanvas(p.windowWidth, p.windowHeight);
engine = Engine.create();
world = engine.world;

const canvasMouse = Mouse.create(canvas.elt);
canvasMouse.pixelRatio = p.pixelDensity();
const options = {
mouse: canvasMouse,
}
mCon = MouseConstraint.create(engine, options);

ground = new Boundary(p.width/2, p.height-10, p.width, 20, world);
leftWall = new Boundary(10, p.height/2, 20, p.height, world);
rightWall = new Boundary(p.width - 10, p.height/2, 20, p.height, world);
ball = new Ball(p.width/2, p.height - 100, 30, world);

World.add(world, [mCon]);
}

setInterval(spawnBoxes, 1500);

function spawnBoxes() {
if(boxes.length > 7) {
World.remove(engine.world, boxes[0].body);
boxes.splice(0, 1);
}
let xLoc = Math.random() * p.width;
let yLoc = Math.random() * (p.height/2 - 100) + 100;
boxes.push(new Box(xLoc, yLoc, 50, 50, world));
}

p.windowResized = function() {
p.resizeCanvas(p.windowWidth, p.windowHeight);
}

p.draw = function () {
p.background(51);
Engine.update(engine);
rightWall.show(p);
leftWall.show(p);
ground.show(p);
ball.show(p);
p.textSize(32);
p.fill("white");
p.text(`Score: ${score}`, 50, 50);

for(let i = 0; i < boxes.length; i++) {
boxes.show(p);
}

if(ball.body.position.y < 0 || ball.body.position.y > p.height + 50 || ball.body.position.x < 0 || ball.body.position.x > p.width + 50) {
ball.reset(p);
}

for(let i = 0; i < boxes.length; i++) {
if(Collision.collides(ball.body, boxes.body)) {
console.log("HIT ", i);
World.remove(engine.world, boxes.body);
boxes.splice(i, 1);
ball.reset(p);
score += 5;
}
}
}
}

function App() {
const p5Container = useRef();

useEffect(() => {
const p5Instance = new p5(sketch, p5Container.current);

return() => {
p5Instance.remove();
}
}, []);

return (
<>
<div ref={p5Container} className="container">
</div>
</>
);
}

export default App;
</code></pre>
<p>I am not very sure what the error even means to be honest and where to start debugging.</p>
<p>Would appreciate any help, thanks!</p>
<p><strong>EDIT:</strong> Don't have any errors using an online hosted image. But the docs seem to say that as long as the image url is relative, it should work?</p>
 
Top