Complete example of using load-image?

[Magnus Therning]

I've been playing with quil for a few days now, and it fits very well a
part of the project I'm working on at the moment.

So far I've been able to work out how to use it based on the API docs,
but just today I was trying to load an image and set the background but
failed miserably. All I get is

uncaught exception: Error using image in background(): PImage not loaded.

I've tried with an absolute path ("/home/...."), an "absolut URL"
("file:///home/..."), a data URI ("data:image/jpg;base64,..."). All
fail. :(

I fear I'm doing something really stupid and I've been searching for a
complete example but can't find one.

I've uploaded a version using a data URI at [1].

Any and all help would be most appreciated.

/M

[1]: https://gist.github.com/magthe/31110350df6422df2202956c04a88421

--
Magnus Therning OpenPGP: 0x927912051716CE39
email: mag...@therning.org jabber: mag...@therning.org
twitter: magthe http://therning.org/magnus

Strive to add function by deleting code.
-- Jon Bentley

[Nikita Beloglazov]

Hi Magnus.

Take a look at http://quil.info/sketches/show/example_spaceship. Parts of the spaceship are separate images and loaded using (request-image). I think it should work similar to (load-image). You need to provide url of an image to load. As it is in web so url must be either full url to a online url or you can use relative path to the image. So if you put images in the directory as index.html you should be able to load them using relative path lik (request-image "myimage.png") or (request-image "img/myimage.png") if images are inside "img" folder. 

Nikita

--
You received this message because you are subscribed to the Google Groups "clj-processing" group.
To unsubscribe from this group and stop receiving emails from it, send an email to clj-processin...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Nikita Beloglazov]

Note that in spaceship example it uses absolute paths like "/img/spaceship/antenna.png" but if you're opening your page directly from filesystem (without starting local static web server, like python SimpleHTTPServer) then you should use relative paths. 

[Magnus Therning]

Nikita Beloglazov <nikela...@gmail.com> writes:

> Take a look at http://quil.info/sketches/show/example_spaceship. Parts
> of the spaceship are separate images and loaded using (request-image).
> I think it should work similar to (load-image). You need to provide
> url of an image to load. As it is in web so url must be either full
> url to a online url or you can use relative path to the image. So if
> you put images in the directory as index.html you should be able to
> load them using relative path lik (request-image "myimage.png") or
> (request-image "img/myimage.png") if images are inside "img" folder.

Still no luck.

Now I've switched to using the figwheel server (http://localhost:3449/).
No relative URL I've tried has worked:

- /cljs.jpg
- cljs.jpg
- ../cljs.jpg
- ../../cljs.jpg
- etc

Not even the full URL http://localhost:3449/cljs.jpg works, and that URL
does work properly in an <img> tag!

I'd be happy to push up the full project to github/gitlab if anyone'd be
willing to take a closer look.

/M

--
Magnus Therning OpenPGP: 0x927912051716CE39
email: mag...@therning.org jabber: mag...@therning.org
twitter: magthe http://therning.org/magnus

Some operating systems are called 'user friendly', Linux however is
'expert friendly'.

[Nikita Beloglazov]

Ah, actually I think the problem might be that q/background doesn't accept images as argument. Only colors. You have to use something like 

(q/image your-image 0 0 (q/width) (q/height))  But it might scale image weirdly but if you have fixed canvas size then you can edit your image so it fits nicely.

Here is example:

http://quil.info/sketches/show/-KF61vdu83Fcnmy_sTrU

[Magnus Therning]

Nikita Beloglazov <nikela...@gmail.com> writes:

> Ah, actually I think the problem might be that q/background doesn't accept
> images as argument. Only colors. You have to use something like
> (q/image your-image 0 0 (q/width) (q/height)) But it might scale image
> weirdly but if you have fixed canvas size then you can edit your image so
> it fits nicely.
>
> Here is example:
> http://quil.info/sketches/show/-KF61vdu83Fcnmy_sTrU

Indeed, I've been using the wrong function, I meant to use
q/background-image.

So, I've verified that your code works:

q/image (:img s) 0 0 100 100

but I'm still getting the same error message when using

q/background-image (:img s)

Why would that be?

/M

--
Magnus Therning OpenPGP: 0x927912051716CE39
email: mag...@therning.org jabber: mag...@therning.org
twitter: magthe http://therning.org/magnus

The man who is denied the opportunity of taking decisions of
importance begins to regard as important the decisions he is allowed
to take.
-- C Northcote Parkinson

[Nikita Beloglazov]

it's possible that image is not loaded in the first few iterations of (draw). You can check that image is ready by checking its width property (it should positive):

http://quil.info/sketches/show/-KF6Edd7NY-ItCPD7sR4

From reading docs of loadImage() it looks like it should be synchronous, but looks like it's not true. Anyway checking that image is loaded before using it is a good practice. 

[Nikita Beloglazov]

Yep, seems like requestImage() and loadImage() are the same now in processing.js: https://github.com/processing-js/processing-js/blob/master/src/Processing.js#L9411 So I think you should check that image is loaded before using it because it is seems to be loaded asynchronously. 

[Magnus Therning]

Nikita Beloglazov <nikela...@gmail.com> writes:

> Yep, seems like requestImage() and loadImage() are the same now in
> processing.js:
> https://github.com/processing-js/processing-js/blob/master/src/Processing.js#L9411
> So I think you should check that image is loaded before using it
> because it is seems to be loaded asynchronously.

How does this explain that q/image works and q/background-image doesn't?

/M

--
Magnus Therning OpenPGP: 0x927912051716CE39
email: mag...@therning.org jabber: mag...@therning.org
twitter: magthe http://therning.org/magnus

Failure is not an option. It comes bundled with the software.

[Nikita Beloglazov]

q/background-image works for me when the image size matches canvas size. Otherwise I get "Background image must be the same dimensions as the canvas." error in console. So for background-image to work you need 1) image to be loaded and 2) image to have the same size as sketch. 

[Magnus Therning]

Nikita Beloglazov <nikela...@gmail.com> writes:

> q/background-image works for me when the image size matches canvas size.
> Otherwise I get "Background image must be the same dimensions as the
> canvas." error in console. So for background-image to work you need 1)
> image to be loaded and 2) image to have the same size as sketch.

Well, I've made sure that the canvas is the same size as the image, so
then only the async loading issue is left. So, am I guessing correctly
in thinking that q/image takes care of getting the image loaded while
q/background-image doesn't?

/M

> On Tue, Apr 19, 2016 at 1:25 PM Magnus Therning <mag...@therning.org> wrote:
>
>>
>> Nikita Beloglazov <nikela...@gmail.com> writes:
>>
>> > Yep, seems like requestImage() and loadImage() are the same now in
>> > processing.js:
>> >
>> https://github.com/processing-js/processing-js/blob/master/src/Processing.js#L9411
>> > So I think you should check that image is loaded before using it
>> > because it is seems to be loaded asynchronously.
>>
>> How does this explain that q/image works and q/background-image doesn't?
>>
>> /M
>>
>> --
>> Magnus Therning OpenPGP: 0x927912051716CE39
>> email: mag...@therning.org jabber: mag...@therning.org
>> twitter: magthe http://therning.org/magnus
>>
>> Failure is not an option. It comes bundled with the software.
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "clj-processing" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to clj-processin...@googlegroups.com.
>> For more options, visit https://groups.google.com/d/optout.
>>


--
Magnus Therning OpenPGP: 0x927912051716CE39
email: mag...@therning.org jabber: mag...@therning.org
twitter: magthe http://therning.org/magnus

Finagle's Fourth Law:
Once a job is fouled up, anything done to improve it only makes it
worse.

[Nikita Beloglazov]

Yes, it's possible. For example internal prociessing implementation of image() might be checking that image is loaded before displaying it otherwise just skipping. So it probably not showing few first iterations and once it is loaded - image() starts drawing it. 

[Magnus Therning]

Nikita Beloglazov <nikela...@gmail.com> writes:

> Yes, it's possible. For example internal prociessing implementation of
> image() might be checking that image is loaded before displaying it
> otherwise just skipping. So it probably not showing few first
> iterations and once it is loaded - image() starts drawing it.

I'll see if I can work out what's happening. I can work with q/image,
but it just feels like q/background-image is what I ought to use :)

/M

--
Magnus Therning OpenPGP: 0x927912051716CE39
email: mag...@therning.org jabber: mag...@therning.org
twitter: magthe http://therning.org/magnus

Programs should be written for people to read, and only incidentally
for machines to execute.
-- Quote from Structure and Interpretation of Computer Programs

[Nikita Beloglazov]

Magnus, but you can use q/background-image. You just need to manually check if image is ready before using it: 

http://quil.info/sketches/show/-KF6Edd7NY-ItCPD7sR4

[Magnus Therning]

Nikita Beloglazov <nikela...@gmail.com> writes:

> Magnus, but you can use q/background-image. You just need to manually check
> if image is ready before using it:
>
> http://quil.info/sketches/show/-KF6Edd7NY-ItCPD7sR4

Thanks, that's a very nice, short example :)

/M

--
Magnus Therning OpenPGP: 0x927912051716CE39
email: mag...@therning.org jabber: mag...@therning.org
twitter: magthe http://therning.org/magnus

Where the people fear the government you have tyranny. Where the
government fears the people you have liberty.
-- John Basil Barnhill