# How can I make a sprite (or image) unable to pass through lines?

**URL:** <https://discourse.processing.org/t/how-can-i-make-a-sprite-or-image-unable-to-pass-through-lines/675>\
**Category:** p5.js\
**Created:** [June 3, 2018, 11:07am UTC](https://discourse.processing.org/t/how-can-i-make-a-sprite-or-image-unable-to-pass-through-lines/675 "2018-06-03T11:07:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rimai](https://avatars.discourse-cdn.com/v4/letter/r/c68b51/32.png) [@rimai](https://discourse.processing.org/u/rimai)\
**Post date:** [June 3, 2018, 11:07am UTC](https://discourse.processing.org/t/how-can-i-make-a-sprite-or-image-unable-to-pass-through-lines/675/1 "2018-06-03T11:07:43Z")

</div>

So I’ve imported a maze image (png) as the background of my canvas, and drawn lines over the corresponding lines in the image in p5. I’ve created a sprite which is my ‘character’ and it’s just a small image, and all it’s doing at the moment is moving with the arrow keys on top of the maze image. I want this to move through this maze and not go through any of these lines. I’m sure its a really simple answer but I can’t wrap my head around it. Here is my code:

```
var spr;
var slimeMould;
var maze;
var line1;
var line2;
var line3;
var line4;
var line5;
var line6;
var line7;
var line8;
var line9;
var line10;
var line11;
var line12;
var line13;
var line14;
var line15;
var line16; 
var line17;

function preload () {
    slimeMould = loadImage("assets/slimemould-01.png");
    maze = loadImage("assets/maze-02.png");

}

function setup() {
  createCanvas(1000, 1000);
     imageMode(CENTER)
  

  spr = createSprite(595, 100);
                 

        spr.addImage(slimeMould);      

}

function draw() {
  background(10);
  fill(255);
  noStroke();
   

    image(maze,width/2,height/2);
   
  textAlign(CENTER, CENTER);
    textSize(25);
  text("find the shortest route to the food!", width/2, height*0.79);
  drawSprites();

    strokeWeight(15);
    stroke(255);
    line1 = line(86,168,460,168);
    line2 = line(460,168,460,265);
    line3 = line(460,265,310,265);
    line4 = line(310,265,310,220);
    line5 = line(310,220,380,220);
    line6 = line(86,168,86,730);
    line7 = line(140,168,140,220);
    line8 = line(240,220,240,410);
    line9 = line(140,260,240,260);
    line10 = line(140,260,140,360);
    line11 = line(140,360,190,360);
    line12 = line(190,360,190,330);
    line13 = line(86,410,140,410);
    line14 = line(140,410,140,508);
    line15 = line(86,553,125,553);
    line16 = line(125,553,125,619);
    line17 = line(125,619,260,619);   

}

function keyPressed() {
  if (keyCode == RIGHT_ARROW) {
    spr.setSpeed(1.75, 0);
  }
  else if (keyCode == DOWN_ARROW) {
    spr.setSpeed(1.75, 90);
  }
  else if (keyCode == LEFT_ARROW) {
    spr.setSpeed(1.75, 180);
  }
  else if (keyCode == UP_ARROW) {
    spr.setSpeed(1.75, 270);
  }
  return false;
}

function keyReleased() {
    if (keyCode == RIGHT_ARROW) {
        spr.setSpeed(0,0);
    }
      else if (keyCode == DOWN_ARROW) {
    spr.setSpeed(0,0);
  }
  else if (keyCode == LEFT_ARROW) {
    spr.setSpeed(0,0);
  }
  else if (keyCode == UP_ARROW) {
    spr.setSpeed(0,0);
  }
  return false;
}
```

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [June 3, 2018, 1:38pm UTC](https://discourse.processing.org/t/how-can-i-make-a-sprite-or-image-unable-to-pass-through-lines/675/2 "2018-06-03T13:38:01Z")

</div>

it looks like you’re using p5.play to create the sprite correct?

you can likely use the `setCollider()` method to achieve this (although for sprite to line collision it might not be the most performant way) [http://p5play.molleindustria.org/docs/classes/Sprite.html#method-setCollider](http://p5play.molleindustria.org/docs/classes/Sprite.html#method-setCollider)

You might also check out p5.collide2D’s `collideLineRect()` function [https://github.com/bmoren/p5.collide2D#collidelinerect](https://github.com/bmoren/p5.collide2D#collidelinerect)

Here’s what’s happening under the hood with that collision detection if you want to write you’re own: [https://github.com/bmoren/p5.collide2D/blob/master/p5.collide2d.js#L179](https://github.com/bmoren/p5.collide2D/blob/master/p5.collide2d.js#L179) . It’s using another function within the library to detect the line/line collisions: [https://github.com/bmoren/p5.collide2D/blob/master/p5.collide2d.js#L138](https://github.com/bmoren/p5.collide2D/blob/master/p5.collide2d.js#L138) So the idea is basically that it’s doing 5 line/line collision detection tests.

---

<div class="post-metadata">

**Author:** ![rimai](https://avatars.discourse-cdn.com/v4/letter/r/c68b51/32.png) [@rimai](https://discourse.processing.org/u/rimai)\
**Post date:** [June 4, 2018, 12:04am UTC](https://discourse.processing.org/t/how-can-i-make-a-sprite-or-image-unable-to-pass-through-lines/675/3 "2018-06-04T00:04:04Z")

</div>

Thanks! Yeah I am using p5.play 🙂  
So I used setCollider() and changed my first line to a very thin rectangle:

```
rect1 = rect(86,160,378,15);

```

Then I set up my Collider:

```
spr.setCollider("rectangle",509,60,378,15);

```

but it’s not working ☹ Do you know what I’m doing wrong?

(my sprite is at (595,100) so I’m not exactly sure if my offsetX, offsetY, width, & height are right)

---

<div class="post-metadata">

**Author:** ![rimai](https://avatars.discourse-cdn.com/v4/letter/r/c68b51/32.png) [@rimai](https://discourse.processing.org/u/rimai)\
**Post date:** [June 4, 2018, 4:17am UTC](https://discourse.processing.org/t/how-can-i-make-a-sprite-or-image-unable-to-pass-through-lines/675/4 "2018-06-04T04:17:01Z")

</div>

I found a way! I just tested it using a change of colour to show collision and it works. Now I just need to replace the mouseX and Y with my sprite properties… but I’m not sure what to plug in?

![09%20pm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/bee2685fac767a13ce5bd526307010b15b096dfe.png)

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [June 4, 2018, 4:33am UTC](https://discourse.processing.org/t/how-can-i-make-a-sprite-or-image-unable-to-pass-through-lines/675/5 "2018-06-04T04:33:29Z")

</div>

If you post to multiple sites, please link between the posts so we know what help you’ve already received.

This question has also been posted [here](https://stackoverflow.com/q/50665472/873165).