Add Tillable Textures on object

[Emmanuel Bourmault]

Hello,

I like paper.js, I'm on it since 2weeks now, and I got stuck on something that might seem easy but I just can't find out how to do it.

I got an image and want to put that image tillable to infinite.

It's just a small piece of grass that I want to set to a rectangle of an undefined size, and want my piece of grass to fill all that space but 1 piece beside another.

I'm really blocked on that one, and I believe there is a solution for that, otherwise paper.js is useless... Cause I can do that with normal javascript without the use of paper.js

Other question, how can we use sprites ?

Thank you for your answers.

[Emmanuel Bourmault]

What I need is like on this example the "Scaling" part.

https://developer.mozilla.org/en/Canvas_tutorial/Using_images 

I will need to use the function drawImage but when I do this it fails.

Here is the code that I tested:

    var img = new Image();

    var tile = new Raster(img);

    img.src = '/img/grass.png';

    

    img.onload = function(){  

    tile.drawImage(img,new Point(200, 200));

    }; 

[dansalmo]

I am very new to javascript and paperscript so someone else may
provide a much better solution. Based on the docs, if you want to
repeat a lot of something but not access each one individually later,
the use of symbols is recommended since they perform much better. I
also found the the size of the image does not get inherited by tile
unless the src is set before creating the raster.

var img = new Image();

// src must be set before raster for tile to have dimension of image
img.src = 'http://placehold.it/10x150/225522/225522';

var tile = new Raster(img);

// Create a symbol from the raster and remove tile from the view:
var symbol = new Symbol(tile);
tile.remove();

img.onload = function() {
    for (var i = 0; i < view.size.width / tile.width; i++) {
        for (var j = 0; j < view.size.height / tile.height; j++) {
            var instance = new PlacedSymbol(tile);
            instance.position = new Point(tile.width * i, tile.height
* j);
        };
    };
    view.draw();
};​

you can see it working here with a placeholder image:
http://jsfiddle.net/dansalmo/EjSFu/


On Jun 9, 9:19 pm, Emmanuel Bourmault <shadowbo...@gmail.com> wrote:
> What I need is like on this example the "Scaling" part.https://developer.mozilla.org/en/Canvas_tutorial/Using_images

[Emmanuel Bourmault]

Hi,

Thank you for your reply.

I was thinking of doing something like that, but this method doesn't fix the good width and height.

Imagine your image does 100x100 and your object does 350x340 it's not going to fit... maybe with the method of cutting a bit of the symbol ?

I think I just did a mistake to have chosen this library, it seemed good but finally there is no community and support... I'm quite upset cause I did quite a lot with it, the full game engine, and I was on the next step the texture part, and I see that there is no possibilities that even the basic javascript function got, so no it's not possible to continue :-(

I'll take more care of witch library I choose next time !!!

Maybe kineticjs ?

On Saturday, June 9, 2012 11:03:35 PM UTC+8, Emmanuel Bourmault wrote:

[Emmanuel Bourmault]

Ok I think it's my fault, after checking the source code and all other canvas library I saw that it's not something that is possible like this.

So I think I'll do my own patch that does something like this:

Get the total width

Put images to fit into it with some extra like the example of dansalmo.

Merge the images together in one object (hope it's possible)

Crop the total to fit exactly.