points

points-cross

Draws a '+' shape in each point. To learn more about shapes on shaders read this chapter from The Nook of Shader

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

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

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

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

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

• CROSS_ALPHA: number between 0.0 and 1.0 that control the alpha. The default value is 0.75.

These are the shader blocks:

• color:

color.a = clamp(cross(v_texcoord.xy,vec2(2.,.5)),0.,1.)*CROSS_ALPHA;

Examples:

points-dot

Draws a dot with an DOT_OFFSET border. To learn more about shapes on shaders read this chapter from The Book of Shader

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

import:
    - https://tangrams.github.io/blocks/points/dot.yaml

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

import:
    - https://tangrams.github.io/blocks/points/dot-full.yaml

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

• STROKE: number between 0.0 and 1.0 that control the width of the offset. The default value is 0.15.
• DOT_OFFSET: number between 0.0 and 1.0 that control the offset. The default value is 0.35.

These are the shader blocks:

• color:

float sdf = dot(v_texcoord.xy-.5,v_texcoord.xy-.5)*2.;
color.a = fill(.5,sdf) - stroke(DOT_OFFSET,sdf);

points-glow

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

import:
    - https://tangrams.github.io/blocks/points/glow.yaml

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

import:
    - https://tangrams.github.io/blocks/points/glow-full.yaml

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

• filter:

float b = getBrightness(color.rgb);
vec2 st = v_texcoord.xy;
color = mix(v_color*color.a,vec4(0.),b*b);

points-shape

Draws shape with N amount of sides (SHAPE_SIDES), a colored border (SHAPE_BORDER_WIDTH & SHAPE_BORDER_COLOR). To learn more about shapes on shaders read this chapter from The Book of Shader

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

import:
    - https://tangrams.github.io/blocks/points/shape.yaml

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

import:
    - https://tangrams.github.io/blocks/points/shape-full.yaml

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

• SHAPE_ALPHA: number between 0.0 and 1.0 that control the alpha. The default value is 1.0.
• SHAPE_BORDER_WIDTH: number between 0.0 and 1.0 that control the size. The default value is 0.15.
• SHAPE_SIDES: number between 1.0 and 6.0 that control the corners. The default value is 3.
• SHAPE_BORDER_COLOR: The default value is vec3(1.).
• SHAPE_SIZE: number between 0.0 and 1.0 that control the size. The default value is 1.0.

These are the shader blocks:

• color:

float df = shapeDF(vec2(v_texcoord.x,1.-v_texcoord.y),int(SHAPE_SIDES));
color.rgb = mix(color.rgb,
                SHAPE_BORDER_COLOR,
                aastep(SHAPE_SIZE*.5-SHAPE_BORDER_WIDTH,df));
color.a = (1.-aastep(SHAPE_SIZE*.5,df))*SHAPE_ALPHA;

Examples: