# Auto tile background image as mouse goes beyond boundaries

**URL:** https://discourse.processing.org/t/auto-tile-background-image-as-mouse-goes-beyond-boundaries/29639
**Category:** Coding Questions
**Created:** [April 25, 2021, 8:02pm UTC](https://discourse.processing.org/t/auto-tile-background-image-as-mouse-goes-beyond-boundaries/29639 "2021-04-25T20:02:08Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![deanomite](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/deanomite/32/159_2.png) [@deanomite](https://discourse.processing.org/u/deanomite)
#### Post date: [April 25, 2021, 8:02pm UTC](https://discourse.processing.org/t/auto-tile-background-image-as-mouse-goes-beyond-boundaries/29639/1 "2021-04-25T20:02:08Z")

</div>

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](https://www.youtube.com/watch?v=vSqGU3CSbdc)

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!

---

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [April 25, 2021, 8:10pm UTC](https://discourse.processing.org/t/auto-tile-background-image-as-mouse-goes-beyond-boundaries/29639/2 "2021-04-25T20:10:18Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![deanomite](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/deanomite/32/159_2.png) [@deanomite](https://discourse.processing.org/u/deanomite)
#### Post date: [April 25, 2021, 8:24pm UTC](https://discourse.processing.org/t/auto-tile-background-image-as-mouse-goes-beyond-boundaries/29639/3 "2021-04-25T20:24:38Z")

</div>

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.

```auto
PImage img;

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

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

```
