# Collide Vs. Displace Interactions

**URL:** <https://forum.code.org/t/collide-vs-displace-interactions/41026>\
**Category:** Coding and Debugging Help\
**Tags:** csd-unit-3\
**Created:** [June 6, 2025, 1:46am UTC](https://forum.code.org/t/collide-vs-displace-interactions/41026 "2025-06-06T01:46:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jwilson25](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jwilson25/32/8000_2.png) [@jwilson25](https://forum.code.org/u/jwilson25)\
**Post date:** [June 6, 2025, 1:46am UTC](https://forum.code.org/t/collide-vs-displace-interactions/41026/1 "2025-06-06T01:46:14Z")

</div>

Assume 2 sprites, car and truck. Is there a difference between these two interections?

```auto
truck.displace.car

```

and

```auto
car.collide.truck

```

Just wondering.

Thanks,

John

---

<div class="post-metadata">

**Author:** ![melynn](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/melynn/32/4925_2.png) [@melynn](https://forum.code.org/u/melynn)\
**Post date:** [June 7, 2025, 6:23am UTC](https://forum.code.org/t/collide-vs-displace-interactions/41026/2 "2025-06-07T06:23:40Z")

</div>

Hi @jwilson25,

Have you seen the great example in the documentation for any of the 4 collision types in GameLab? It really does a good job of visualizing the 4 different collision types. You can find the example in the documentation for displace [HERE](https://studio.code.org/docs/ide/gamelab/expressions/displace).

Hope that helps:) I find it super helpful when kids need to decide which is best for their project.  
~Michelle

---

<div class="post-metadata">

**Author:** ![varrience](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/varrience/32/8042_2.png) [@varrience](https://forum.code.org/u/varrience)\
**Post date:** [June 7, 2025, 2:17pm UTC](https://forum.code.org/t/collide-vs-displace-interactions/41026/3 "2025-06-07T14:17:43Z")

</div>

Hello @jwilson25,

the biggest difference between the two is how they interact with sprite velocity  
**collide** will stop all velocity  
**displace** will not  
overall displace allows for better verbose velocity control but if managed incorrectly it can cause clipping with velocity values exceeding the frame collision test, collide is overall the best choice for beginners so less unexpected behavior occurs @melynn has provided great example so follow up with the link if my explanation was not clear enough

# Varrience

---

<div class="post-metadata">

**Author:** ![jwilson25](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jwilson25/32/8000_2.png) [@jwilson25](https://forum.code.org/u/jwilson25)\
**Post date:** [June 7, 2025, 4:14pm UTC](https://forum.code.org/t/collide-vs-displace-interactions/41026/4 "2025-06-07T16:14:36Z")

</div>

Thank you @melynn and @varrience for your replies.

I have seen the examples that @melynn mentioned and I understand each of them as demonstrated.

Here is a [remix of that example](https://studio.code.org/projects/gamelab/gOIsmrfEKB0jLoq_mVD94Q) with the bounce and bounceoff examples commented out.

- I changed it so the **left** block **displaces** the **right** block on the top line and the **right** block **collides** with the **left** block on line 2.
- I also assigned a random velocityX to the blocks on the right.

Note that each time you run this code, the displace and collide behave the same way when the target block is switched.

@varrience, can you give an example of when displace and collide do not behave the same way when the target block is switched? I am not sure what you mean by “verbose velocity control”, although I do believe I have seen what you might mean by “clipping” in the CSD Unit 3 Lesson 24 (Flyer Game). But I am not sure.

Thanks!

John

---

<div class="post-metadata">

**Author:** ![varrience](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/varrience/32/8042_2.png) [@varrience](https://forum.code.org/u/varrience)\
**Post date:** [June 7, 2025, 5:01pm UTC](https://forum.code.org/t/collide-vs-displace-interactions/41026/5 "2025-06-07T17:01:41Z")

</div>

Seems the behavior changes if both sprites have velocity  
**collide** seems to inherit the velocity of the object it is colliding with if it’s zero it will no longer move  
**displace** will only stop both objects from moving past each other

An example like this should suffice

```auto
var rightVelocity = randomNumber(-3, 1);
var spriteDisplace1 = createSprite(75, 50, 50, 50);
spriteDisplace1.setAnimation("displace");
spriteDisplace1.scale = 0.75;
// spriteDisplace1.velocityX=2;
var spriteDisplace2 = createSprite(250, 50, 50, 50);
spriteDisplace2.setAnimation("displaceTarget");
spriteDisplace2.scale = 0.75;
spriteDisplace2.velocityX = rightVelocity;
var spriteCollide2 = createSprite(75, 150, 50, 50);
spriteCollide2.setAnimation("collideTarget");
spriteCollide2.scale = 0.75;
// spriteCollide2.velocityX=2;
var spriteCollide1 = createSprite(250, 150, 50, 50);
spriteCollide1.setAnimation("collide");
spriteCollide1.scale = 0.75;
spriteCollide1.velocityX = rightVelocity;

function draw() {
  background("white");
  spriteDisplace1.displace(spriteDisplace2);
  spriteCollide1.collide(spriteCollide2);
  drawSprites();
}
setTimeout(function(){
  spriteDisplace1.destroy();
  spriteCollide2.destroy();
}, 3e3)

```

this shows my change i was referring to it seems to be the same with the collision logic while in motion as well but it’s more so inheritance than it directly being set to zero (of which i was not sure of until further testing)

in which case by using displace you would have to be explicitly changing _(I.E. verbose changes)_ velocities by testing `if (sprite.displace(sprite2)) {}` instead of it inheriting the object it is colliding with which can cause issues with gravity and platformers

---

<div class="post-metadata">

**Author:** ![jwilson25](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jwilson25/32/8000_2.png) [@jwilson25](https://forum.code.org/u/jwilson25)\
**Post date:** [June 9, 2025, 7:52pm UTC](https://forum.code.org/t/collide-vs-displace-interactions/41026/6 "2025-06-09T19:52:00Z")

</div>

> [@varrience](#):
>
> ```auto
> var rightVelocity = randomNumber(-3, 1);
> var spriteDisplace1 = createSprite(75, 50, 50, 50);
> spriteDisplace1.setAnimation("displace");
> spriteDisplace1.scale = 0.75;
> // spriteDisplace1.velocityX=2;
> var spriteDisplace2 = createSprite(250, 50, 50, 50);
> spriteDisplace2.setAnimation("displaceTarget");
> spriteDisplace2.scale = 0.75;
> spriteDisplace2.velocityX = rightVelocity;
> var spriteCollide2 = createSprite(75, 150, 50, 50);
> spriteCollide2.setAnimation("collideTarget");
> spriteCollide2.scale = 0.75;
> // spriteCollide2.velocityX=2;
> var spriteCollide1 = createSprite(250, 150, 50, 50);
> spriteCollide1.setAnimation("collide");
> spriteCollide1.scale = 0.75;
> spriteCollide1.velocityX = rightVelocity;
> 
> function draw() {
> background("white");
> spriteDisplace1.displace(spriteDisplace2);
> spriteCollide1.collide(spriteCollide2);
> drawSprites();
> }
> setTimeout(function(){
> spriteDisplace1.destroy();
> spriteCollide2.destroy();
> }, 3e3)
> 
> ```

@varrience This is very helpful. Thank you. I see what you mean. setting spriteDisplace1.velocityX=-0.2 and spriteCollide2.velocityX=-0.2; and increasing the timeout value from 3e3 to 5e3 is also helpful in visualizing the differences.