{"id":28590350,"url":"https://github.com/kcf-jackson/webr-animate","last_synced_at":"2026-04-30T06:39:19.779Z","repository":{"id":191322799,"uuid":"684403751","full_name":"kcf-jackson/webr-animate","owner":"kcf-jackson","description":"Porting 'animate' to 'webr'","archived":false,"fork":false,"pushed_at":"2023-10-02T12:52:58.000Z","size":10096,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"jsonlite","last_synced_at":"2023-10-02T15:51:26.656Z","etag":null,"topics":["animate","r","rstats","wasm","webr","webr-experiment"],"latest_commit_sha":null,"homepage":"https://webr-animate.netlify.app/","language":"HTML","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/kcf-jackson.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}},"created_at":"2023-08-29T04:08:29.000Z","updated_at":"2023-09-10T13:28:50.000Z","dependencies_parsed_at":"2023-08-29T10:30:29.364Z","dependency_job_id":null,"html_url":"https://github.com/kcf-jackson/webr-animate","commit_stats":null,"previous_names":["kcf-jackson/webr-animate"],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kcf-jackson%2Fwebr-animate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kcf-jackson%2Fwebr-animate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kcf-jackson%2Fwebr-animate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kcf-jackson%2Fwebr-animate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kcf-jackson","download_url":"https://codeload.github.com/kcf-jackson/webr-animate/tar.gz/refs/heads/jsonlite","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kcf-jackson%2Fwebr-animate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259231379,"owners_count":22825571,"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":["animate","r","rstats","wasm","webr","webr-experiment"],"created_at":"2025-06-11T08:38:58.207Z","updated_at":"2026-04-30T06:39:14.754Z","avatar_url":"https://github.com/kcf-jackson.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webr-animate\n\nThis is an experiment to manually port the [animate](https://github.com/kcf-jackson/animate) R package to [webR](https://github.com/r-wasm/webr/).\n\nThe goal is to have a (partially) working version of the `animate` package in the browser until the original package can be compiled natively to WebAssembly and loaded by webR. This is a proof of concept, and not intended for production use. \n\nThe experiment aims to show how much flexibility and fun one can have when you can use R in the browser!\n\n\n\n\n## Two examples - Sokoban and 2048\n\nSee the examples with code [here](https://webr-animate.netlify.app). Click the folder button, select the demo from the drop-down menu and source `main.R` to start. The app may take about 10 seconds to load for the first time. It is recommended to refresh the app before switching to a different example.\n\n\n**2048** [live demo](https://webr-animate.netlify.app/?game=2048)\n\n`examples/samples/2048/main.R` - The \"Minecraft Ten\" font is by NubeFonts @ https://www.fontspace.com/minecraft-ten-font-f40317\n\n![2048](./examples/samples/2048/2048_screencast.gif)\n\n\n**Sokoban** [live demo](https://webr-animate.netlify.app/?game=sokoban)\n\n`examples/samples/sokoban/main.R` - 1000 levels from https://github.com/deepmind/boxoban-levels under Apache-2.0 license.\n\n\u003cimg src=\"./examples/samples/sokoban/sokoban_screencast.gif\" alt=\"Sokoban screencast\" width=\"380\" height=\"380\"\u003e\n\n\n`examples/samples/sokoban/main_alt.R` - uses game assets by Kenney Vleugels (Kenney.nl) under CC0 license.\n\n\u003cimg src=\"./examples/samples/sokoban/sokoban_2_screencast.gif\" alt=\"Sokoban screencast\" width=\"380\" height=\"380\"\u003e\n\n\nMore examples can be found under `examples/samples/`. Please see the respective folder for more information regarding the license of the assets used.\n\n\n## Notes\n\n\n1. **Mouse and Keyboard control.** The variable `io` is reserved for the webr-animate package to capture mouse and keyboard events. The variables get updated whenever a registered event gets triggered. Here is a simple example:\n\n\n    #### Mouse events\n\n    ```\n    # Setup device\n    attach(device)\n    new(400, 400, id = 'svg-1', root = '#plot')  # there is a div with id 'plot' in the HTML\n\n    # Create the base plot\n    par(xlim = c(0, 10), ylim = c(0, 10))  # use static range\n    plot(1:10, 1:10, id = 1:10)\n\n    # Update plot when clicked\n    event('#plot', 'click', function(io) {  # the `io` argument must be present\n        print(io)   # inspect the event variable\n        points(1:10, sample(10), id = 1:10, transition = TRUE)\n    })\n    ```\n\n    The first argument of `event` takes a CSS selector, and the second argument takes the event type (e.g. see the [Mouse events](https://developer.mozilla.org/en-US/docs/Web/API/Element#mouse_events) and [Keyboard events](https://developer.mozilla.org/en-US/docs/Web/API/Element#keyboard_events)). The third argument is a function that takes the `io` variable as its argument and performs the desired action.\n\n\n    #### Keyboard events\n\n    Using the same example, you can listen for the \"Enter\" key press event instead of the mouse click event:\n\n\n    ```\n    # Setup device\n    attach(device)\n    new(400, 400, id = 'svg-1', root = '#plot')  # there is a div with id 'plot' in the HTML\n\n    # Create the base plot\n    par(xlim = c(0, 10), ylim = c(0, 10))  # use static range\n    plot(1:10, 1:10, id = 1:10)\n\n    # Update plot when \"Enter\" is pressed\n    event('#plot', 'keypress', function(io) {  # the `io` argument must be present\n        if (io$event$key == 'Enter') {\n            points(1:10, sample(10), id = 1:10, transition = TRUE)\n        }\n    })\n    ```\n\n\n2. **Differences between `animate` and `webr-animate`.** In `webr-animate`, you initialise the device with:\n    ```\n    device$new(width = 600, height = 600, id = \"svg-1\", root = \"#plot\")\n    attach(device)\n    ```\n\n    unlike the case in `animate`: \n    ```\n    device \u003c- animate$new(width = 600, height = 600, id = \"svg-1\", root = \"#plot\")\n    attach(device)\n    ```\n\n    **Remember that the `device` and `io` variables are reserved**, so please do not write to them. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkcf-jackson%2Fwebr-animate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkcf-jackson%2Fwebr-animate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkcf-jackson%2Fwebr-animate/lists"}