{"id":15486259,"url":"https://github.com/positlabs/poly-refractor","last_synced_at":"2025-03-28T15:42:04.280Z","repository":{"id":57326999,"uuid":"87855433","full_name":"positlabs/poly-refractor","owner":"positlabs","description":"2D canvas \"fly-eye\" image filter.","archived":false,"fork":false,"pushed_at":"2017-04-17T00:18:38.000Z","size":23098,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-19T07:06:55.667Z","etag":null,"topics":["canvas","effect","image-processing"],"latest_commit_sha":null,"homepage":"https://positlabs.github.io/poly-refractor/examples/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/positlabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-10T20:38:19.000Z","updated_at":"2018-01-14T04:01:27.000Z","dependencies_parsed_at":"2022-09-13T19:21:50.206Z","dependency_job_id":null,"html_url":"https://github.com/positlabs/poly-refractor","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/positlabs%2Fpoly-refractor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/positlabs%2Fpoly-refractor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/positlabs%2Fpoly-refractor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/positlabs%2Fpoly-refractor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/positlabs","download_url":"https://codeload.github.com/positlabs/poly-refractor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246056660,"owners_count":20716781,"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":["canvas","effect","image-processing"],"created_at":"2024-10-02T06:07:21.495Z","updated_at":"2025-03-28T15:42:04.257Z","avatar_url":"https://github.com/positlabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# poly-refractor\n\n2D canvas \"fly-eye\" image filter. \n\nBuilt using [x-tag](x-tag.github.io), but can easily be ported to vanilla js or other web component frameworks.\n\n[![npm version](https://badge.fury.io/js/poly-refractor.svg)](https://badge.fury.io/js/poly-refractor) \n\n`npm install --save poly-refractor`\n\n![](https://media.giphy.com/media/l4FGBi9E8Gze0ns5i/giphy.gif)\n\n[Basic demo](https://positlabs.github.io/poly-refractor/examples/): Use controls to see what it can do.\n\n[Source types](https://positlabs.github.io/poly-refractor/examples/source-types.html): Accepts media urls (.mp4, .png, etc.) as well as references to drawable elements (img, video, canvas)\n\n[Custom cells](https://positlabs.github.io/poly-refractor/examples/custom-cell.html): Want some crazy tesselation pattern? Go on and have it! \n\n[Animation](https://positlabs.github.io/poly-refractor/examples/animation.html): Animate the cell offsets to make some neat transitions.\n\n## quickstart\n\n```\n\u003c!-- load the stuff --\u003e\n\u003cscript src='https://cdnjs.cloudflare.com/ajax/libs/x-tag/1.5.11/x-tag-core.js'\u003e\u003c/script\u003e\n\u003cscript src='node_modules/poly-refractor/docs/poly-refractor.js'\u003e\u003c/script\u003e\n\n\u003c!-- it's so easy --\u003e\n\u003cpoly-refractor src='image.jpg'\u003e\u003c/poly-refractor\u003e\n```\n\n## docs\n\n### attributes\n\nAll attributes can be assigned declaratively or imperatively. Attribute names are dashed (e.g. cell-generator), while property names are camel-cased (e.g. cellGenerator).\n\n#### src\n\nSpecify the path to the media (e.g. src=\"image.png\"). With js, you can set this value to reference any drawable `HTMLElement` (img, canvas, video). `refractor.src = document.querySelector('video')`. The latter approach is recommended since it gives you control over the video element. By default, a video element will be generated with attributes `autoplay` and `loop`.\n\n#### cells-x, cells-y\n\nNumber of cells to create horizontally and vertically. Defaults to 9.\n\n#### offset-factor\n\nStrength of the offset effect. Defaults to 3.\n\n#### cell-generator\n\nSpecify cell shape generator. Presets are `rect` and `diamond`. Defaults to `diamond`. Assign a custom handler to generate any polygonal shape. Custom handler will be passed arguments: cellsX, cellsY, offsetFactor. See [custom cells](https://positlabs.github.io/poly-refractor/examples/custom-cell.html) for more info.\n\n### classes\n\nClasses can be referenced on every `poly-refractor` instance. \n\n`var Vector2 = document.querySelector('poly-refractor').Vector2`\n\n#### Vector2\n\nGeneral purpose Vector2 used for creating paths and other vector-y things. `new Vector2(x, y)`\n\n#### Cell\n\nUsed for creating cells. `new Cell(shape, maxOffset)`. `shape` is a `Vector2` array that defines the path of the shape. `maxOffset` is a `Vector2` used in conjunction with `offsetFactor` \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpositlabs%2Fpoly-refractor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpositlabs%2Fpoly-refractor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpositlabs%2Fpoly-refractor/lists"}