genie

Genie Developer Hub

Welcome to the genie developer hub. You'll find comprehensive guides and documentation to help you start working with genie as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    API Reference

A Base Canvas

Let's first build an empty canvas, then you can add the below objects into it. Paste the code below in your shot config -

{
  "duration": 1000,
  "objects": [
    {
      "type": "shape",
      "kind": "rectangle",
      "color": "#F2E880",
      "comment": "base canvas",
      "opacity": 1,
      "position": {
        "x": 0,
        "y": 0
      },
      "size": {
        "h": "700",
        "w": "700"
      }
    }

A Line

Let's begin with the simplest of curves - A simple line object

{
      "comment": "singular line ",
      "type": "shape",
      "kind": "line",
      "opacity": 1,
      "scale": 1,
      "color": "gray",
      "cap": "round",
      "stroke": {
        "color": "#051560",
        "width": 10
        },
      "fill": "transparent",
      "shadow": ["blue", 20, 2, 0],
      "start": {
        "x": 100,
        "y": 300
        },
      "points": [
        {
        "x": 150,
        "y": 350
        }
      ]
    }

you can add more points in the line to curve it like this -

{
      "comment": "joined lines ",
      "type": "shape",
      "kind": "line",
      "opacity": 1,
      "scale": 1,
      "color": "gray",
      "cap": "round",
      "stroke": {
        "color": "#051560",
        "width": 10
        },
      "fill": "transparent",
      "shadow": ["blue", 20, 2, 0],
      "start": {
        "x": 100,
        "y": 300
        },
      "points": [
        {
        "x": 150,
        "y": 350
        },
        {
        "x": 100,
        "y": 400
        },
        {
        "x": 150,
        "y": 450
        }
      ]
    }

Field

Description

type

shape

kind

line (can be used to render a single line or multiple connected lines)

stroke

line that follows the path of the curve

stroke - color, width

to set the color and width in pixels.

start (x, y)

Denotes the start of the line

points (array of x, y)

Denotes the start of the line

cap

Decides how the ends of the line should be drawn. Possible values for cap are butt, round and square. The default value is square. Diff types of caps can be seen here

A Bezier Curve

Read more about the Bezier curve

To render a cubic Bézier curve - 4 points (start,end,control1,control2) are required.

{
      "comment": "watermelon-bcurve",
      "type": "shape",
      "kind": "bcurve",
      "color":"#F35588",
        "stroke": {
        "color": "#71A95A",
        "width": 15
        },
        "start": {
        "y": 40,
        "x": 40
        },
        "end": {
        "y": 40,
        "x": 220
        },
        "control1": {
        "y": 170,
        "x": 40
        },
        "control2": {
        "y": 170,
        "x": 220
        }
    }

👍

To get 'only' the curve try -

"color" : "transparent"

Field

Description

type

shape

kind

bcurve

stroke

The line that follows the path of the curve

stroke - color, width

To set the color in hex code and width in pixels.

start

The start point of the curve denoted by x and y of start property

end

The ending point for the curve denoted by the x and y of the end property.

control1

First control point used in the quadratic Bézier calculation denoted by x and y of the control1 property.

control2

Second control point used in the quadratic Bézier calculation denoted by x and y of the control2 property.

A Quadric curve

Read more about the quadratic curve

{
      "comment": "background",
      "type": "shape",
      "color": "#EF4C63",
      "kind": "qcurve",
      "start": {
        "x": 450,
        "y": 200
      },
      "end": {
        "x": 600,
        "y": 200
      },
      "control": {
        "x": 525,
        "y": 20
      }
    }

Field

Description

type

shape

kind

qcurve

start -x, y

start coordinates of the curve

end -x, y

end coordinates of the curve

control -x, y

Control point used in the quadratic calculation denoted by x and y of the control property

Updated 8 months ago


What's Next

Shapes

Curves


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.