Auto tile background image as mouse goes beyond boundaries

Processing Coding Questions
1

Hi there, I would like to get an image loaded in background to get tiled automatically as the mouse moves out of bounds.

So if my mouse moved upwards i.e. height<0, the image would automatically repeat itself giving the illusion of a continuous canvas.

My background image is already created as a seamless image. How may I approach this?

Was inspired by this video reference called Labuat - Soy Tu Aire

You will see as the line moves upwards etc, the background also travels with it.
The line is also not constrained to the center.

Any leads would be great. Thanks!

2

Hello deanomite,

Not sure using the mouse would be the best to get that effect.

Basically what you want is the have the canvas always center in an entity that you can move. As you move that entity, you move in the canvas (a bit like a top down video game actually) .

The way I would move that entity would be with the arrows for example (simple and intuitive).

I don’t think it would be intuitive with the mouse simply because you can’t keep going right, for example, as oppose as you can keep pressing the right arrow in the keyboard.

1 Like
3

Thanks jb4x. Yes I understand what you mean. It’s just that in the reference I had shared (it’s from a famous old website done in Flash). Gave you the feeling that you were drawing with your mouse.

I can create some sort of continuous line like this but the effect is very dependent on the mouse coordinates and not arrow keys that way. Do you feel they have used the same understanding in the reference? It’s a grungy texture that they are using there that is tile-able.

PImage img;

void setup() {
  size(1800, 600);
  img = loadImage("seamlessPic.jpg");
  image(img, 0, 0);
  strokeWeight(10);
}

void draw() {
  line(mouseX, mouseY, pmouseX, pmouseY);
}