I stopped arguing about chores and date night: building decision dice with real 3D physics

#showdev #webdev #javascript

Every household has the same three arguments on repeat: who does the dishes, where do we eat, and what do we do Friday night. None of them is hard. All of them are tiring. That's decision fatigue: the energy isn't spent on the choice, it's spent on negotiating it.

The idea

Instead of debating, roll a die. If the die is physical and a bit theatrical, nobody feels outvoted: the dice did it. It works for:

Roommates: dishes, bins, bathroom, "whose turn is it to call the landlord".
Couples: date night, movie pick, who plans the next trip.
Anyone: the "I don't care, you pick" loop.

Rolling is quick and oddly fun, and the result feels fair because everyone watched it happen.

The light technical bit

I built 3droll on top of a real 3D physics engine, so the die tumbles, bounces off walls and settles on a face, rather than picking a random number and animating toward it.

Custom labels

Each face is just a texture. Draw the label on a canvas and use it as the material for that face:

function faceTexture(label) {
  const c = document.createElement('canvas');
  c.width = c.height = 256;
  const ctx = c.getContext('2d');
  ctx.fillStyle = '#fff';
  ctx.fillRect(0, 0, 256, 256);
  ctx.fillStyle = '#111';
  ctx.font = 'bold 40px sans-serif';
  ctx.textAlign = 'center';
  ctx.fillText(label, 128, 140);
  return new THREE.CanvasTexture(c);
}
const labels = ['Dishes', 'Bins', 'Cook', 'Vacuum', 'Laundry', 'Day off!'];
const materials = labels.map(l => new THREE.MeshStandardMaterial({ map: faceTexture(l) }));

Weighted faces

Want "Day off!" to come up less often, or the pizza option more? With real physics you can't just tweak a probability, so you shift the center of mass. A die lands on the face opposite its heavy side more often:

// Move the center of mass toward the face you want to land DOWN.
// That makes the opposite face more likely to end up on top.
// Offsetting the shape biases the die toward landing on the opposite face.
body.addShape(shape, new CANNON.Vec3(0, -0.05, 0));

Small offsets give a gentle bias, larger ones a loaded die. Fun for "the person who forgot last week gets worse odds" house rules.

Wrap-up

Fewer arguments, more rolling. Try it for a week with your roommates or partner and see how many decisions you can hand over to a die.

https://3droll.com/

DEV Community