CODEWITHSUNDEEP
javascriptp5.js
Titouan Le Floch Riche
Titouan Le Floch Riche

Reputation: 172

P5 image not rendering

Edit : See what I did wrong at the end of the post

I'm new to P5.js and I'm trying to load images following the P5 reference. I'm using a local node http-server without cache saving. Here is the structure of my project :

enter image description here

I believe it is not relevant to show the Controls, Factory, Hive, Bee javascript files as they are not using any P5 related code.

Here is my "main" code :

const ctrls = new Controls();
const fctry = new Factory();

const wH = window.innerHeight;
const wW = window.innerWidth;

var sprites = {};

function preload() {
    sprites = {
        "hive": {
            "image": loadImage('./images/hive.png'),
            "size": 128,
        },
        "blue_flower": {
            "image": loadImage('./images/blue_flower.png'),
            "size": 25,
        },
        "red_flower": {
            "image": loadImage('./images/red_flower.png'),
            "size": 25,
        },
        "bee": {
            "image": loadImage('./images/bee.png'),
            "size": 20
        }
    }
}

var to_display = [];

function setup() {
    createCanvas(wW, wH);
}

function draw() {
    background(220);
    for (obj of to_display) {
        //e.g Hive : obj.getSprite() = "hive", obj.getPos = {x: 500, y: 500}
        image(sprites[obj.getSprite()].image, obj.getPos().x, obj.getPos().y);
    }
}

function mouseClicked(e) {
    if (e.target.id == "container") {
        let selected_object = ctrls.get_selected_to_place();
        to_display.push(fctry.createObject(selected_object, 500, 500));
        console.log("to_display :", to_display);
    }
}

So, basically, upon click, I'm creating an object that I wish to render and store it in to_display.

In the draw function, I'm iterating on all object and try to display them. However, not a single image appears, there's no warning / errors in browser console or in server logs. No CORS warning. Both on Firefox and Chrome

I've tried making 4 different global variable to store my images, like so :

var hive;

function preload() {
    hive = loadImage('./images/hive.png');
}

function draw() {
    image(hive, 200, 200, 128, 128);
}

I've also tried to use http location for my images, like so :

sprites = {
    "hive": {
        "image": loadImage('http://127.0.0.1:8080/images/hive.png'),
        "size": 128,
    },
    "blue_flower": {
        "image": loadImage('http://127.0.0.1:8080/images/blue_flower.png'),
        "size": 25,
    },
    "red_flower": {
        "image": loadImage('http://127.0.0.1:8080/images/red_flower.png'),
        "size": 25,
    },
    "bee": {
        "image": loadImage('http://127.0.0.1:8080/images/bee.png'),
        "size": 20
    }
}

(I can display them visiting the links however)

But same results and I can't figure it out.

I've seen people calling loadImage in draw and using a callback to display the image but I believe using loadImage continuously is a waste of resources and I'd prefer not doing it, even if it works.

Do you know about anything that could cause P5 not displaying image without any error/warning ? Should I open an issue on their Github ? Clearly not

Edit : The display is actually working great, but not on the screen. Thanks to George Profenza I double checked everythink and realized I had a leftover div that has the following CSS property :

height: 100vh;

This, associated with :

html, body {
    overflow: hidden;
}

Lead to the canvas being entirely off screen.

Upvotes: 2

Views: 794

Answers (2)

George Profenza
George Profenza

Reputation: 51837

I've tested your method of loading and setting up and populating the sprites object and as suspected works without a hitch.

It's impossible to test fully without Controls and Factory classes, however it does narrow down the problem:

let selected_object = ctrls.get_selected_to_place();
to_display.push(fctry.createObject(selected_object, 500, 500));

I would first double check selected_object has valid data, then check fctry.createObject(selected_object, 500, 500).

I see you're already printing to_display to console. If possible you should the log output as well.

If the log output looks correct (e.g. sprites[obj.getSprite()].image is a valid p5.Image instance) I would also double check there isn't anything else preventing the image from rendering visibly, for example:

  • ensure the image isn't all alpha/transparent pixels (unlikely)
  • ensure the image dimensions check out (and it's not a hard to spot 1x1 px image for example)
  • ensure the image render position (obj.getPos().x, obj.getPos().y) isn't somewhere off screen.

The above checks may sound obvious / trivial, but they will eliminate the odds of something funny happening to your data somewhere in between creating and using the data.

Upvotes: 1

MRPie
MRPie

Reputation: 295

I believe you forgot to add the 'assets' infront of the loadImage()

Ex = ('assets/enter the address here')

function preload() {
  img = loadImage('assets/laDefense.jpg');
}
function setup() {
  image(img, 0, 0);
}

Example

Upvotes: 0

Related Questions