Sci Fi Flares

Usage

With a standard editor

In your photo editor (Photoshop, etc.) create guides at the point for the flare center to be. Check the document's dimensions, as well as the X and Y where the guides intersect. Go to https://yikuansun.github.io/sci-fi-flares/ and edit the information on the right, or choose a preset. If you would like to share a preset, please use a pull request.

As a Photopea plugin

Open this link. Open the plugin using the F icon on the menu on the right. On your Photopea document, use guides to find out the X and Y position where the flare needs to be. Edit the boxes in the plugin; when the preview is statisfying, press "add to document." A new document will be opened; close the popup using the same F icon, then drag the layer in the new document into the previous document.

API (Client-side JS)

Put an iframe with the href https://yikuansun.github.io/sci-fi-flares/flare.html?canvaswidth=[WIDTH]&canvasheight=[HEIGHT] (the iframe can be hidden if desired). Use postMessage on the iframe's contentWindow, the message's data being an object as {pos: [x, y], config: [hue, hotspottype, hotspotscale, streaktype, streakscale, streakbalance, iristype, irisscale, seed, halotype, haloscale]}. The iframe window will post back a message with the data URL of the lens flare image.