🎨
Xylo Docs
  • Introduction
  • Getting Started
    • Quickstart
  • Guides
    • Random Rotations
  • Syntax
    • Primitives
    • Functions
  • Control Flow
  • Builtin Functions
    • System
    • Math
    • Comparison
    • List
    • Randomness
    • Shape
    • Color
Powered by GitBook
On this page
  • Integer
  • Float
  • Complex Number
  • Boolean
  • Hexadecimal
  • Shape
  • Gradient
  • List
  • Blend Mode
  • Line Cap
  • Line Join
  • Spread Mode
Export as PDF
  1. Syntax

Primitives

Integer

An integer is a whole number that can be positive, negative, or zero, but does not include fractions or decimals.

When you define a number value without a decimal point, such as 3 or -1, it is automatically of the integer type.

Float

A floating-point number is a way to represent numbers that can have decimals.

When you define a number value with a decimal point, such as 3.14 or 0.001, it is automatically of the float type.

Floating-point values can also be written in scientific notation, for example 1.1e10.

Complex Number

A complex number is a type of number that includes a real part and an imaginary part.

They can be defined in the format a+bi, for example 3+4i or -3-4i.

Boolean

A boolean is a data type that can have one of two possible values: true or false.

They can be used to check if a condition is met and then return different values based on that condition.

Hexadecimal

Hexadecimal is a base-16 number system that uses sixteen distinct symbols to represent values. The symbols include the digits 0 to 9, which represent values zero to nine, and the letters A to F, which represent values ten to fifteen.

In Xylo, they are primarily used for RGB color values. All hexadecimal values must be defined with either six digits or three digits.

The syntax is 0xRRGGBB or 0xRGB, for example 0xffddbb or the shorthand 0xfdb, which equivocates to the same value.

Shape

Triangle

Triangles can be rendered with the TRIANGLE constant.

By default, they are 2 pixels long on each side.

The following Unicode characters are also accepted:

  • ▲

  • △

  • ▴

  • ▵

Square

Squares can be rendered with the SQUARE constant.

By default, they have a width and height of 2 pixels.

The following Unicode characters are also accepted:

  • ⬜

  • ⬛

  • ■

  • □

  • ▪

  • ▫

Circle

Circles can be rendered with the CIRCLE constant.

By default, they have a radius of 1 pixel.

The following Unicode characters are also accepted:

  • ⬤

  • ◯

  • ●

  • ○

  • 🞄

Fill

Canvas fills can be rendered with the FILL constant.

They will always fill the entire image with their assigned color.

Empty

Empty shapes can be rendered with the EMPTY constant.

These are skipped in the rendering process and can essentially be used as a null value.

Path

Paths are a collection of points that form a polygon.

Composite

Composite shapes are two shapes combined together.

Collection

Collection shapes are a list of shapes combined together.

Gradient

Gradients are configurable transitions between colors that can be applied to shape fills.

List

A list is a sequence of values that must be of the same type.

The syntax is [a, b, c, ...]. For example, a list of integers can be defined as [1, 2, 3, 4, 5] or a list of shapes can be defined as [SQUARE, CIRCLE, TRIANGLE].

Blend Mode

A blend mode defines how two shapes interact when combined. It controls the color blending of the top shape with the shapes below, enabling the creation of various visual effects.

Shapes can be assigned the following blend modes:

  • Clear: BLEND_CLEAR

  • Source Over: BLEND_SOURCE_OVER

  • Destination Over: BLEND_DESTINATION_OVER

  • Source In: BLEND_SOURCE_IN

  • Destination In: BLEND_DESTINATION_IN

  • Source Out: BLEND_SOURCE_OUT

  • Destination Out: BLEND_DESTINATION_OUT

  • Source Atop: BLEND_SOURCE_ATOP

  • Destination Atop: BLEND_DESTINATION_ATOP

  • Source: BLEND_SOURCE

  • Destination: BLEND_DESTINATION

  • Xor: BLEND_XOR

  • Plus: BLEND_PLUS

  • Modulate: BLEND_MODULATE

  • Screen: BLEND_SCREEN

  • Overlay: BLEND_OVERLAY

  • Darken: BLEND_DARKEN

  • Lighten: BLEND_LIGHTEN

  • Color Dodge: BLEND_COLOR_DODGE

  • Color Burn: BLEND_COLOR_BURN

  • Hard Light: BLEND_HARD_LIGHT

  • Soft Light: BLEND_SOFT_LIGHT

  • Difference: BLEND_DIFFERENCE

  • Exclusion: BLEND_EXCLUSION

  • Multiply: BLEND_MULTIPLY

  • Hue: BLEND_HUE

  • Saturation: BLEND_SATURATION

  • Color: BLEND_COLOR

  • Luminosity: BLEND_LUMINOSITY

Line Cap

A line cap determines the style of the stroke's endpoints on a shape.

Shapes can be assigned the following line caps:

  • Butt: LINE_CAP_BUTT

  • Round: LINE_CAP_ROUND

  • Square: LINE_CAP_SQUARE

Line Join

A line join specifies the style of the corners where two stroke segments meet on a shape.

Shapes can be assigned the following line joins:

  • Miter: LINE_JOIN_MITER

  • Miter Clip: LINE_JOIN_MITER_CLIP

  • Round: LINE_JOIN_ROUND

  • Bevel: LINE_JOIN_BEVEL

Spread Mode

A spread mode defines how gradients loop their colors.

Gradients can be assigned the following spread modes:

  • Pad: SPREAD_MODE_PAD

  • Reflect: SPREAD_MODE_REFLECT

  • Repeat: SPREAD_MODE_REPEAT

PreviousRandom RotationsNextFunctions

Last updated 1 day ago

They can be created and operated on with the .

They can be created with the .

They can be created with the .

They can be created and operated on with the .

path functions
compose function
collect function
gradient functions