https://github.com/kinetictactic/reflecta
A sandbox for fiddling with light rays, mirrors, lenses, etc.
https://github.com/kinetictactic/reflecta
javascript light optics physics sandbox simulation typescript webgl webgl2
Last synced: 10 months ago
JSON representation
A sandbox for fiddling with light rays, mirrors, lenses, etc.
- Host: GitHub
- URL: https://github.com/kinetictactic/reflecta
- Owner: KineticTactic
- License: bsd-3-clause
- Created: 2023-03-20T11:02:55.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-13T18:00:37.000Z (11 months ago)
- Last Synced: 2025-04-13T03:55:42.588Z (10 months ago)
- Topics: javascript, light, optics, physics, sandbox, simulation, typescript, webgl, webgl2
- Language: TypeScript
- Homepage: https://kinetictactic.github.io/Reflecta/
- Size: 30.7 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Reflecta - An Optics Playground
### [Check it out here!](https://kinetictactic.github.io/reflecta)
Reflecta is a simple and robust sandbox-type program written in JavaScript to simulate light rays reflecting and refracting (in 2D). You can play around with various types of light sources (Point lights, Light Beams) and various objects (Refractive/Reflective surfaces, Lenses, Prisms, Mirrors, etc.).
## Features
- Light Sources such as Point Lights, Light Rays, Light Beams and Lasers, and objects such as Prisms, Lenses (ideal and realistic), Mirrors, etc.
- Reflection, Refraction, and Total internal reflection based on Snell's laws.
- Realistic partial reflection/refraction (reflectance/transmittance) calculation using fresnel equations. Enable it in `World settings > calculate reflectance`.
- Dispersion of rays, variable refractive indices based on wavelength
- Accurate Color simulation from wavelength using CIE1964 color transforms.
- Dynamically update properties in real time.
- Uses [polyly](https://github.com/KineticTactic/polyly) for rendering, a fast and dynamic WebGL 2D primitives renderer that I wrote specifically for this project.
## Screenshots
## Running locally / Contributing
To get the project up and running locally,
Clone the git repository
`git clone https://github.com/kinetictactic/reflecta.git`
`cd reflecta`
Install dependencies with pnpm (or npm / yarn)
`pnpm install`
Start the vite development server
`pnpm run dev`
## Things to add
- [x] UI for adding new objects and editing object parameters
- [ ] More objects
- [ ] Ray diagram markings? Principal axis and stuff
- [x] Dispersion of rays
- [x] Switch to WebGL
## Why did i make this?
Its a learning experience for me.
I was really fascinated when I got to learn about Optics in Physics in high school, and I always wanted to make a "sandbox" type of thing where I could play around with lenses and prisms and stuff. That, along with my hunt for simple creative coding projects to work on, led me to build this project.
Other than that, I also like the idea of this being used for educational purposes, like in a classroom, for demonstrating the various light phenomena and image formations, interactively.
## External Dependencies
- [polyly](https://github.com/KineticTactic/polyly/), a WebGL 2D primitives renderer that i built specifically for this project.
- [Tweakpane](https://tweakpane.github.io/docs/), a data-driven UI library.
- [Tweakpane Essentials](https://github.com/tweakpane/plugin-essentials), plugin for graphs in Tweakpane.