# Calculate bob vector to a floor in 3D WEBGL

**URL:** <https://discourse.processing.org/t/calculate-bob-vector-to-a-floor-in-3d-webgl/40556>\
**Category:** Coding Questions\
**Created:** [January 11, 2023, 5:14pm UTC](https://discourse.processing.org/t/calculate-bob-vector-to-a-floor-in-3d-webgl/40556 "2023-01-11T17:14:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)\
**Post date:** [January 11, 2023, 5:14pm UTC](https://discourse.processing.org/t/calculate-bob-vector-to-a-floor-in-3d-webgl/40556/1 "2023-01-11T17:14:34Z")

</div>

Hi I try to visualize:  
Object (Red Sphere) can be dragged with the mouse in relation to a listeners head (White Sphere).  
And there is a floor (Grey rotated rectangle)

The white lines indicate the direct sound wave to the listeners head and one mirrored sound wave which would need to be a vector line like a bob from the red sphere to the floor. and from the floor to the listener.

I hacked something here so I have the code structure, But I have no clue how to get that vector line from the sphere as a bob to the floor and from the exact coordinate at the floor level which I would use to draw a line back to the listeners (white sphere) head.

Like in this picture. The white lines is what I have got and the green lines how it should be.

 ![Bildschirmfoto 2023-01-11 um 18.04.07](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/2/a270ca863b8573231d6cd7eec84e6cfc9ad74a1b.png)

Here is my code:

```auto
let x = 0;
let y = 0;
let z = 0;

function setup() {
  createCanvas(1000, 1000, WEBGL);
}

function draw() {
  background(0);
  let xm = mouseX;
  let ym = mouseY;
  //camera
  camera(-700, -400, height / 2 / tan(PI / 6), 0, 0, 0, 0, 1, 0);

  translate(x, y);
  noStroke(0);
  //Floor
  push();
  rotateX(20.3);
  ambientLight(120);
  ambientMaterial(120);
  rectMode(CENTER);
  rect(0, 0, width / 1.5);
  pop();

  //Object
  let xOb = xm - width / 2;
  let yOb = ym - height / 2;
  let zOb = 200;

  push();
  translate(xOb, yOb, zOb);
  directionalLight(250, 250, 250, 2000, 2000, -1);
  ambientLight(180);
  ambientMaterial(180, 0, 0);
  sphere(width / 40);
  stroke(255);
  pop();

  fill(255);
  stroke(255);
  strokeWeight(2);

  // listener
  let xList = 0;
  let yList = -117;
  let zList = 230;
  push();
  translate(xList, yList, zList);
  sphere(width / 40);
  pop();
  line(xList, yList, zList, xOb, yOb, zOb);

  //reflection bob to floor and it should end at the floor??
  let xbob = xOb - 00;
  let ybob = yOb + 280;
  let zbob = zOb + 100;
  line(xOb, yOb, zOb, xbob, ybob, zbob);

  //reflection floor to listener
  line(xbob, ybob, zbob, xList, yList, zList);
}

```

---

<div class="post-metadata">

**Author:** ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)\
**Post date:** [January 11, 2023, 7:56pm UTC](https://discourse.processing.org/t/calculate-bob-vector-to-a-floor-in-3d-webgl/40556/2 "2023-01-11T19:56:23Z")

</div>

ah damn I thought it to complicate I am solving it right now and will post here

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 12, 2023, 11:17am UTC](https://discourse.processing.org/t/calculate-bob-vector-to-a-floor-in-3d-webgl/40556/3 "2023-01-12T11:17:33Z")

</div>

As far as I can see the ‘floor’ lies in the XY plane i…e. Z=0.

If that is true and the red sphere is at [x,y.z] then nearest position on the floor is [x,y,0]. Effectively you are projecting the red spheres position along the plane normal onto the plane surface.