shapes

shapes-circle

Collection of functions to draw circles. To learn more about how to make shapes on shaders go to From check this chapter about shapes from the Book of Shaders

To import this block add the following url to your import list:

import:
    - https://tangrams.github.io/blocks/shapes/circle.yaml

If you want to import this block together with their dependencies use this other url:

import:
    - https://tangrams.github.io/blocks/shapes/circle-full.yaml

These blocks uses a custom shader. These are the shader blocks:

• global:

• float circleDF (vec2 st)
• float circle (vec2 st, float radius)
• float circleBorder (vec2 st, float radius)

Here are some benchmarks of this block performed on a Raspberry Pi:

• circle ( mean: 0.00202213340506 median: 0.001985 )

...
// Color:
    color.rgb += circle(v_texcoord.xy,.5);

• circleBorder ( mean: 0.00153645898277 median: 0.001512 )

...
// Color:
    color.rgb += circleBorder(v_texcoord.xy,.5);

• circleDF ( mean: 0.00204920697922 median: 0.00198 )

...
// Color:
    color.rgb += circleDF(v_texcoord.xy-.5);

Examples:

shapes-cross

Collection of functions to draw crosses. To learn more about how to make shapes on shaders go to From check this chapter about shapes from the Book of Shaders

To import this block add the following url to your import list:

import:
    - https://tangrams.github.io/blocks/shapes/cross.yaml

If you want to import this block together with their dependencies use this other url:

import:
    - https://tangrams.github.io/blocks/shapes/cross-full.yaml

These blocks uses a custom shader. These are the shader blocks:

• global:

• float cross (vec2 st, float size, float width)
• float cross (in vec2 st, float _size)
• float cross (in vec2 st, vec2 _size)

Examples:

shapes-digits

Collection of functions to draw number digits.

To import this block add the following url to your import list:

import:
    - https://tangrams.github.io/blocks/shapes/digits.yaml

If you want to import this block together with their dependencies use this other url:

import:
    - https://tangrams.github.io/blocks/shapes/digits-full.yaml

These blocks uses a custom shader. These are the defines:

• CHAR_DECIMAL_POINT: The default value is 10.0.
• CHAR_MINUS: The default value is 11.0.
• CHAR_BLANK: The default value is 12.0.

These are the shader blocks:

• global:

• float SampleDigit (const in float fDigit, const in vec2 vUV)
• float PrintValue (const in vec2 vStringCharCoords, const in float fValue, const in float fMaxDigits, const in float fDecimalPlaces)
• float PrintValue (in vec2 fragCoord, const in vec2 vPixelCoords, const in vec2 vFontSize, const in float fValue, const in float fMaxDigits, const in float fDecimalPlaces)

shapes-polygons

Collection of functions to draw polygons. To learn more about how to make shapes on shaders go to From check this chapter about shapes from the Book of Shaders

To import this block add the following url to your import list:

import:
    - https://tangrams.github.io/blocks/shapes/polygons.yaml

If you want to import this block together with their dependencies use this other url:

import:
    - https://tangrams.github.io/blocks/shapes/polygons-full.yaml

These blocks uses a custom shader. These are the shader blocks:

• global:

• float shapeDF (vec2 st, int N)
• float shape (vec2 st, int N, float width)
• float shapeBorder (vec2 st, int N, float width)

Here are some benchmarks of this block performed on a Raspberry Pi:

• shapeDF ( mean: 0.00481603499608 median: 0.004816 )

...
// Color:
    color.rgb += shapeDF(v_texcoord.xy,5);

• shape ( mean: 0.00490561710037 median: 0.004906 )

...
// Color:
    color.rgb += shape(v_texcoord.xy,5,.5);

• shapeBorder ( mean: 0.00499703796488 median: 0.005011 )

...
// Color:
    color.rgb += shapeBorder(v_texcoord.xy,5,.5);

Examples:

shapes-rect

Collection of functions to draw rectangles. To learn more about how to make shapes on shaders go to From check this chapter about shapes from the Book of Shaders

To import this block add the following url to your import list:

import:
    - https://tangrams.github.io/blocks/shapes/rect.yaml

If you want to import this block together with their dependencies use this other url:

import:
    - https://tangrams.github.io/blocks/shapes/rect-full.yaml

These blocks uses a custom shader. These are the shader blocks:

• global:

• float rectDF (in vec2 st, in vec2 size)
• float rectDF (in vec2 st, in float size)
• float rect (in vec2 st, in vec2 size, in float radio)
• float rect (vec2 st, float size, float radio)
• float rectBorder (in vec2 st, in vec2 size, in float radio)
• float rectBorder (vec2 st, float size, float radio)
• float rect (vec2 st, vec2 size)
• float rect (vec2 st, float size)

Here are some benchmarks of this block performed on a Raspberry Pi:

• rect_rnd ( mean: 0.00186770642702 median: 0.001949 )

...
// Color:
    color.rgb += rect(v_texcoord.xy,vec2(.5),.5);

• rectDF ( mean: 0.0016341938691 median: 0.001514 )

...
// Color:
    color.rgb += rectDF(v_texcoord.xy,vec2(.5));

• rect ( mean: 0.00151843366093 median: 0.001504 )

...
// Color:
    color.rgb += rect(v_texcoord.xy,vec2(.5));

• rectBorder_rnd ( mean: 0.00151967114641 median: 0.001507 )

...
// Color:
    color.rgb += rectBorder(v_texcoord.xy,vec2(.5),.5);

shapes-simplex

Collection of functions to draw shapes using a simplex grid. To learn more about simplex grids check this chapter about noise from the Book of Shaders

To import this block add the following url to your import list:

import:
    - https://tangrams.github.io/blocks/shapes/simplex.yaml

If you want to import this block together with their dependencies use this other url:

import:
    - https://tangrams.github.io/blocks/shapes/simplex-full.yaml

These blocks uses a custom shader. These are the shader blocks:

• global:

• float warp (vec3 S)
• float circle (vec3 S)
• float triangle (vec3 S)
• vec3 star (vec3 S)
• vec3 sakura (vec3 S)
• float lotus (vec3 S, float petals_size, float roundness)

shapes-type

This block provides to functions fill and stroke. Each one transform a SDF to a fill shape or a stroke shape (border). The stroke width can be control with the define STROKE. To learn more about how to make shapes on shaders go to From check this chapter about shapes from the Book of Shaders

To import this block add the following url to your import list:

import:
    - https://tangrams.github.io/blocks/shapes/type.yaml

If you want to import this block together with their dependencies use this other url:

import:
    - https://tangrams.github.io/blocks/shapes/type-full.yaml

These blocks uses a custom shader. These are the defines:

• STROKE: The default value is 0.15.

These are the shader blocks:

• global:

• float fill (in float size, in float x)
• float stroke (in float size, in float x)