CODEWITHSUNDEEP
javascriptcanvasp5.js
aitor
aitor

Reputation: 2735

Displaying preloaded image (p5.js)

I'm trying a basic display of a preloaded image with p5.js library (instantiation mode):

var sketch = function(p) {
    var fondo;
    p.preload = function() {
        fondo = p.loadImage('app/themes/mrg/dist/images/tramas/example.jpg');
    };
    var viewportWidth = $(window).width();
    p.setup = function(){
        canvas = p.createCanvas(viewportWidth, 200);
        canvas.background(255);
        canvas.image(fondo, 0, 0);
    };
};
new p5(sketch);

The canvas was created but no image is there.

Here is a working example:
https://stage.margenesdelarte.org/

The canvas is at the end of the page (with white background) but no image is rendered inside.
Image path is right, since there is no error in the console and it can be reached in its place:

https://stage.margenesdelarte.org/app/themes/mrg/dist/images/tramas/example.jpg

What is wrong, and how can I display this image? Thanks!

Upvotes: 0

Views: 710

Answers (2)

Cobain Ambrose
Cobain Ambrose

Reputation: 91

Is your file being localhosted? For p5 to access local files such as images, it needs to be localhosted... I recommend apache

Upvotes: 0

Mikhail Aksenov
Mikhail Aksenov

Reputation: 934

That's correct version? (I used BASE64 because I didn't want to run a local server)

var sketch = function(p) {
    var fondo;
    p.preload = function() {
        fondo = p.loadImage("data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7");
    };
    var viewportWidth = 500;
    p.setup = function(){
        var canvas = p.createCanvas(viewportWidth, 200);
        canvas.image(fondo, 0, 0); // doesn't work
        p.image(fondo, 0, 0);      // works fine
        console.log(p.image, canvas.image); //there are different functions
    };
};
new p5(sketch);

https://codepen.io/anon/pen/yPENXx?editors=1111

Explanation: Both p and canvas has a image function but there are different image functions. You have to use p.image(). I think canvas.image() is has some relations with https://p5js.org/reference/#/p5.Image, but that's only my assumptions.

Upvotes: 3

Related Questions