RxFirefly

• Light Viscosity Polygon Canvas Effect
• CSS + CANVAS

Support By [ Cloud Rx (https://rxapis.com) ].

• Testing is available until the end of the year.

Table of Contents

• Rx Firefly
  • Folder Steps
  • Default Function
  • Rx Viscosity Polygon
  • Firefly
  • RxViscosityUtil

Folder Steps

• step1 : Application Viscosity Polygon + CSS
• step2 : Principle Viscosity Polygon + CSS

Default Function

• Create Canvas
• func CreateCanvas : (target, canvasCount, resize) return (Array) canvas

const canvas = RxFirefly.CreateCanvas(document.body, 2, true);

Rx Viscosity Polygon

• Step Polygon

• Polygon Outside Draw Polygon Step by Step

• Constructor

• new RxFirefly.RxViscosityPolygon(x,y, vertexCount, distance, stepCount, stepDistance)

• func update : ()

• func draw : (ctx)

• func Follow : ({x, y})

• func GetPosition : () return { x, y }

• func SetColor : (color - String)

• func GetColor : () return color

const poly = new RxFirefly.RxViscosityPolygon(
    window.innerWidth/2, window.innerHeight /  2,           // x, y
    7,                                                      // Vertex Count
    70,                                                     // Radius Or Distance by Center
    2,                                                      // Step Count : How Many Create Polygon. 1 : 1, 2 : 2
    105                                                     // Step Distance : Increase Distance
);
poly.SetColor(`rgba(255, 255, 255, 0.7)`);

Firefly

• Circle Random Mover

• Constructor

• new RxFirefly.Firefly(x,y, radius)

• func update : ()

• func draw : (ctx)

• func SetEnvironmentInfo : ({x, y, width, height} - Object)

• func GetEnvironmentInfo : () return {x, y, width, height}

• func SetColor : (color - String)

• func GetColor : () return color

• func SetStrokeColor : (color - String)

• func GetStrokeColor : () return color

• func SetStrokeWidth : (Number)

• func GetStrokeWidth : () return Number

• func GetPosition : () return { x, y }

const firefly = new RxFirefly.Firefly(window.innerWidth / 2, window.innerHeight / 2, 5 );
firefly.SetColor(`hsla(${Math.random() * 100}, 70%, 70%, 0.8)`);
firefly.SetEnvironmentInfo({
    x : 0, y : 0,
    width : window.innerWidth,
    height : window.innerHeight
});

RxViscosityUtil

• Support Controller