https://github.com/markrickert/react-native-hopalong-visualizer
The "Hopalong Visualizer" implemented in Three.js using expo and react-native
https://github.com/markrickert/react-native-hopalong-visualizer
Last synced: about 1 year ago
JSON representation
The "Hopalong Visualizer" implemented in Three.js using expo and react-native
- Host: GitHub
- URL: https://github.com/markrickert/react-native-hopalong-visualizer
- Owner: markrickert
- Created: 2024-03-12T15:22:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-12T17:20:10.000Z (over 2 years ago)
- Last Synced: 2025-02-08T07:27:36.371Z (over 1 year ago)
- Language: TypeScript
- Size: 955 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Native "Hopalong Visualizer"
This is an example of using Three.js in react-native (expo sdk 50) to generate a "Hopalong" fractal. The Hopalong attractor is a visualizer generated by iterating a simple equation:
```
(x, y) -> (y - sign(x)*sqrt(abs(b*x - c)), a -x )
```
Where a, b, and c are random values.
---
This project was initialized with the [Ignite react-native boilerplate](https://github.com/infinitered/ignite) and uses `expo-gl` to implement the Three.js renderer. The Hopalong fractal is generated by iterating the above equation and plotting the points in 3D space.
You can touch and drag the screen to change the fractal's angle.
The majority of this project is boilerplate code. You can see the WebGL code that renders the fractal in [`/src/app/index.tsx`](https://github.com/markrickert/react-native-hopalong-visualizer/blob/main/src/app/index.tsx).
---
## Getting Started:
```ts
yarn
yarn prebuild:clean
yarn ios // or yarn android
```
> This will NOT work on the iOS emulator [for reasons](https://github.com/expo/expo-three?tab=readme-ov-file#usage). You'll need to run it on a physical device or on the android emulator.
## Credits:
* Original WebGL Chrome Experiment by [Iacopo Sassarini](https://experiments.withgoogle.com/webgl-attractors-trip)
* Updates [Sam Leatherdale](https://github.com/SamLeatherdale/hopalong-redux)
* This React-Native implementation by Mark Rickert
## Example:
## TODO:
- [ ] Add more touch controls (pinch to change speed, rotate two fingers to control angle, etc.)
- [ ] Fix white loading screen