https://github.com/davidje13/chance

Various simulations of chance-related physical objects.
https://github.com/davidje13/chance

ios webgl

Last synced: 15 days ago
JSON representation

Various simulations of chance-related physical objects.

• Host: GitHub
• URL: https://github.com/davidje13/chance
• Owner: davidje13
• License: gpl-3.0
• Created: 2018-09-29T17:50:44.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-04-19T18:26:20.000Z (9 months ago)
• Last Synced: 2024-11-01T14:11:34.381Z (2 months ago)
• Topics: ios, webgl
• Language: JavaScript
• Homepage: https://chance.davidje13.com/
• Size: 2.26 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Chance

Various simulations of chance-related physical objects. Serves as a

playground for rendering techniques.

Supports desktop and mobile browsers. Optimised for iOS and can be

added to the home screen.

## Screens

### Dice



Rigid-body-physics simulation with custom WebGL shaders defining the

dice shapes and reflections.

* Uses [GoblinPhysics](https://github.com/chandlerprall/GoblinPhysics)

  for the physics simulation

* Seeds dice with uniform random rotations to ensure randomness

* Variety of dice materials, shapes and faces

  - Wood (varnished, unvarnished and unpainted)

  - Plastic (white and red)

  - Sharp square / Smooth square / Truncated square / Rounded square

  - Dots (European and Asian style) / Numbers / Words

* Uses normal mapping and parallax mapping on the dice faces for

  realistic dot rendering

* Uses raytracing to render rounded dice shapes

* Sharp shadows beneath dice

* No rendering while stationary for energy saving

### Coins



Animated coin toss with raytraced coin.

* Uses normal mapping and parallax mapping to render coin faces

* Uses a bespoke radial parallax mapping technique to render grooves

  and shapes around the edges

* Losely physics-based animation which runs independently of random

  coin characteristics (outcome and final rotation)

* Motion blur during animation

* Blurred shadow beneath coin

* No rendering while stationary for energy saving

### Numbers

Work in progress.

### Contortion



Simple friction simulation with WebGL used to render a motion-blurred

needle.

* Picks a target segment in advance, allowing the spinner to avoid

  states which have already been chosen

* Calculates initial velocity required to reach target state

* When flicked by hand, ensures roughly the correct number of spins

  are seen to make it feel more closely related to how much force the

  user imparted

* WebGL rendering allows cheap and realistic motion blur

* No rendering while stationary for energy saving

### Answers Ball



Icosahedron-inside-cylinder simulation rendered using WebGL with custom

fog simulating coloured liquid.

* Uses accelerometer and gyroscope readings if available for realistic

  movement

* When out of sight, applies uniform random rotation to icosahedron to

  ensure randomness

* Layer-based volumetric rendering allows realistic appearance; letters

  are raised above icosahedron surface and colouring is provided

  entirely by distance from the camera (liquid depth)

* No rendering while stationary or out-of-sight for energy saving

## Running Locally

Due to the use of web modules, this project cannot be served from the

filesystem directly; a web server must be used. A simple example:

```

npm install -g http-server;

http-server . -p 8080 -o;

```

Also note that as this project uses git modules, you should clone

with the `--recursive` flag (or run the following if you cloned

without it):

```bash

git submodule update --init --recursive

```