{"id":15888952,"url":"https://github.com/markrickert/react-native-hopalong-visualizer","last_synced_at":"2025-04-02T16:47:36.806Z","repository":{"id":227301448,"uuid":"771036842","full_name":"markrickert/react-native-hopalong-visualizer","owner":"markrickert","description":"The \"Hopalong Visualizer\" implemented in Three.js using expo and react-native","archived":false,"fork":false,"pushed_at":"2024-03-12T17:20:10.000Z","size":978,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-08T07:27:36.371Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markrickert.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-12T15:22:13.000Z","updated_at":"2024-03-12T15:23:51.000Z","dependencies_parsed_at":"2024-10-06T06:40:47.681Z","dependency_job_id":"5ef0b9e1-8a81-4388-82f2-20d2702594eb","html_url":"https://github.com/markrickert/react-native-hopalong-visualizer","commit_stats":null,"previous_names":["markrickert/react-native-hopalong-visualizer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markrickert%2Freact-native-hopalong-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markrickert%2Freact-native-hopalong-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markrickert%2Freact-native-hopalong-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markrickert%2Freact-native-hopalong-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markrickert","download_url":"https://codeload.github.com/markrickert/react-native-hopalong-visualizer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246854725,"owners_count":20844809,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-06T06:40:39.295Z","updated_at":"2025-04-02T16:47:36.785Z","avatar_url":"https://github.com/markrickert.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Native \"Hopalong Visualizer\"\n\nThis 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:\n\n```\n(x, y) -\u003e (y - sign(x)*sqrt(abs(b*x - c)), a -x )\n```\n\nWhere a, b, and c are random values.\n\n---\n\nThis 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.\n\nYou can touch and drag the screen to change the fractal's angle.\n\nThe 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).\n\n---\n\n## Getting Started:\n\n```ts\nyarn\nyarn prebuild:clean\nyarn ios // or yarn android\n```\n\n\u003e 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.\n\n## Credits:\n\n* Original WebGL Chrome Experiment by [Iacopo Sassarini](https://experiments.withgoogle.com/webgl-attractors-trip)\n* Updates [Sam Leatherdale](https://github.com/SamLeatherdale/hopalong-redux)\n* This React-Native implementation by Mark Rickert\n\n## Example:\n\n![E74B5B6F-EB7B-4821-9F11-9C45A71421B9-15452-0001EA78E76ED6E1](https://github.com/markrickert/react-native-hopalong-visualizer/assets/139261/c662c42e-156f-4b1f-a440-55ea8b25d78a)\n\n## TODO:\n\n - [ ] Add more touch controls (pinch to change speed, rotate two fingers to control angle, etc.)\n - [ ] Fix white loading screen","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkrickert%2Freact-native-hopalong-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkrickert%2Freact-native-hopalong-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkrickert%2Freact-native-hopalong-visualizer/lists"}