https://github.com/positlabs/poly-refractor

2D canvas "fly-eye" image filter.
https://github.com/positlabs/poly-refractor

canvas effect image-processing

Last synced: 27 days ago
JSON representation

2D canvas "fly-eye" image filter.

• Host: GitHub
• URL: https://github.com/positlabs/poly-refractor
• Owner: positlabs
• License: mit
• Created: 2017-04-10T20:38:19.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-04-17T00:18:38.000Z (over 7 years ago)
• Last Synced: 2024-10-03T06:07:16.649Z (about 1 month ago)
• Topics: canvas, effect, image-processing
• Language: JavaScript
• Homepage: https://positlabs.github.io/poly-refractor/examples/
• Size: 22 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# poly-refractor

2D canvas "fly-eye" image filter. 

Built using [x-tag](x-tag.github.io), but can easily be ported to vanilla js or other web component frameworks.

[![npm version](https://badge.fury.io/js/poly-refractor.svg)](https://badge.fury.io/js/poly-refractor) 

`npm install --save poly-refractor`

![](https://media.giphy.com/media/l4FGBi9E8Gze0ns5i/giphy.gif)

[Basic demo](https://positlabs.github.io/poly-refractor/examples/): Use controls to see what it can do.

[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)

[Custom cells](https://positlabs.github.io/poly-refractor/examples/custom-cell.html): Want some crazy tesselation pattern? Go on and have it! 

[Animation](https://positlabs.github.io/poly-refractor/examples/animation.html): Animate the cell offsets to make some neat transitions.

## quickstart

```

```

## docs

### attributes

All attributes can be assigned declaratively or imperatively. Attribute names are dashed (e.g. cell-generator), while property names are camel-cased (e.g. cellGenerator).

#### src

Specify 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`.

#### cells-x, cells-y

Number of cells to create horizontally and vertically. Defaults to 9.

#### offset-factor

Strength of the offset effect. Defaults to 3.

#### cell-generator

Specify 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.

### classes

Classes can be referenced on every `poly-refractor` instance. 

`var Vector2 = document.querySelector('poly-refractor').Vector2`

#### Vector2

General purpose Vector2 used for creating paths and other vector-y things. `new Vector2(x, y)`

#### Cell

Used 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`