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

p5.js
1

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;
}
2

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

You might also check out p5.collide2D’s collideLineRect() function 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 . 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 So the idea is basically that it’s doing 5 line/line collision detection tests.

1 Like
3

Thanks! Yeah I am using p5.play :slight_smile:
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 :frowning: 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)

4

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

5

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.