{"id":28917407,"url":"https://github.com/dylanpyle/vf","last_synced_at":"2025-07-22T09:32:40.559Z","repository":{"id":142942812,"uuid":"345461962","full_name":"dylanpyle/vf","owner":"dylanpyle","description":"A vector field toolkit for the browser","archived":false,"fork":false,"pushed_at":"2023-08-03T01:58:13.000Z","size":72,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-22T00:42:55.370Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://vector.demo.camp","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/dylanpyle.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,"zenodo":null}},"created_at":"2021-03-07T21:56:01.000Z","updated_at":"2022-04-21T20:52:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"f4d111ca-571f-48d6-821f-7a538a3a2131","html_url":"https://github.com/dylanpyle/vf","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dylanpyle/vf","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dylanpyle%2Fvf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dylanpyle%2Fvf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dylanpyle%2Fvf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dylanpyle%2Fvf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dylanpyle","download_url":"https://codeload.github.com/dylanpyle/vf/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dylanpyle%2Fvf/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266465227,"owners_count":23933090,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-06-22T00:41:54.869Z","updated_at":"2025-07-22T09:32:40.542Z","avatar_url":"https://github.com/dylanpyle.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://i.imgur.com/NXF0bPL.png)\n\n# vf\n\n[v]isual e[f]fects /\n[v]ector [f]ields /\n[v]ery [f]un\n\n## Demo\n\nhttps://vector.demo.camp\n\n## Usage\n\n(Though we do host a copy, you can too - hotlink at your own risk)\n\n```\n\u003cscript src='https://vector.demo.camp/lib.js'\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  new VFCanvas({\n    el: canvas,\n    xEquation: \"mX - x\",\n    yEquation: \"(mY - y) + Math.cos((2*t - 1) * Math.PI)\",\n\n    backgroundColor: '#fff',\n    foregroundColor: '#000',\n\n    type: 'DOT',\n    clamp: true,\n    spacing: 40\n  });\n\u003c/script\u003e\n```\nSupports the following required options:\n- `el` — a `HTMLCanvasElement`\n- `xEquation` — An equation for the X component of each vector\n  - e.g. `vx=Math.pow(x,2)-mX`\n  - Should generally return values in the 0-1 range.\n- `yEquation` — An equation for the Y component of each vector\n  - e.g. `vx=Math.pow(Y,2)-mY`\n  - Should generally return values in the 0-1 range.\n- `backgroundColor` — The background color (e.g. `#000` or `magenta`)\n- `foregroundColor` — The foreground color\n- `type` — The type of stroke to draw (`ARROW` or `LINE`)\n  - See the demo above for different examples\n- `clamp` — Whether or not to restrict equation outputs to values of 0-1.\n- `spacing` — The spacing betweeen each arrow, in pixels\n  - Can be any number, but it's best to stay above ~30px to achieve adequate performnace.\n\n## Writing Equations\n\nEquations are evaluated as JavaScript (i.e. use `Math` functions as needed) [^1] with\naccess to the following variables:\n\n- `x`, `y` - The arrow's logical position (-1 to 1)\n- `mX`, `mY` - The current logical position of the cursor (-1 to 1)\n- `t` - A unit of time, which grows from 0-1 every 10 seconds\n\n## Examples\n\n- https://vector.demo.camp/?l=100\u0026vx=t/(mX-x)\u0026vy=t/(mY-y)\n- https://vector.demo.camp/?vx=Math.pow(x%2C2)-Math.pow(y%2C2)\u0026vy=5*x*y\n- https://vector.demo.camp/?vx=Math.pow(x%2C2)-Math.pow(y%2C2)*4%2BmY\u0026vy=2*x%2By%2BmX\n- https://vector.demo.camp/?fg=magenta\u0026type=LINE\n\n## Local Development\n\n### Prerequisites\n\n- [yarn](https://classic.yarnpkg.com/en/) (for esbuild)\n- [deno](https://deno.land/) (for tooling)\n- [fswatch](https://github.com/emcrisostomo/fswatch#getting-fswatch) (for dev server)\n\n### Usage\n\n```\n./x dev\n```\n\n## License\n\nMIT\n\n## Footnotes\n\n[^1]: No built-in XSS protections are in place, so careful when passing user\n  input, or clicking unfamiliar links on the demo domain.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdylanpyle%2Fvf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdylanpyle%2Fvf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdylanpyle%2Fvf/lists"}