createGraphics() and image()

omerpekin

Hi,

I am slooooowly transitioning from Processing to p5.js and I am trying to re-write some of the sketches I did in Processing on p5.js

When I try to use createGraphics() method in p5.js and display a preloaded image (with image() method) in that offscreen graphic, somehow I don't get anything other than a blank screen.

When I use background() instead of image() method and display that image in the offscreen graphic I see everything, but then, of course, I cannot scale that image.

What am I doing wrong?

                    `var img, pg;
                    var canvasOfset = 10;




                    function preload() {
                      img = loadImage('http://cdni.pageflow.codevise.de/main/video_files/posters/000/000/370/v3/medium/poster-0.JPG');
                    }

                    function setup() {
                      createCanvas(windowWidth - canvasOfset, windowHeight - canvasOfset);
                      pg = createGraphics(width, height);
                    }

                    function draw() {
                      pg.background(img);
                      var c = color(255, 0, 0);
                      image(pg, 0, 0, width, height);
                    }
                    `

this works

                    `var img, pg;
                    var canvasOfset = 10;
                    var fillColor;
                    var drawn = false;



                    function preload() {
                      img = loadImage('http://cdni.pageflow.codevise.de/main/video_files/posters/000/000/370/v3/medium/poster-0.JPG');
                    }

                    function setup() {
                      createCanvas(windowWidth - canvasOfset, windowHeight - canvasOfset);
                      pg = createGraphics(width, height);
                    }

                    function draw() {
                      pg.image(img,0,0,width,height);
                      var c = color(255, 0, 0);
                      image(pg, 0, 0, width, height);
                    }
`

this does not...

Any help regarding this issue would be awesome!!

Thanks a lot.

Omer

GoToLoop

1. https://Forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text
2. http://JSBeautifier.org

Both sketches have worked for me when I've copied & pasted them in: :-@
https://OpenProcessing.org/sketch/create

omerpekin

Hi,

Sorry for the formatting, I didn't realize it.

I copied & pasted them as well. Somehow it works, thanks anyway.

Btw. I see only a quarter of the image (earth) when I c/p it. Is that normal? When I divide the width and height by 2 image appears normal..

GoToLoop

It displayed the whole Earth for me for both sketches at https://OpenProcessing.org/sketch/create

Why don't you post your sketches there so others can try them out?
You can host images there and load them in your sketch. O:-)

omerpekin

Sure!

thank you very much for the advice. I will post the sketches there. :)