Gradients

This article explains how to fill graphics objects with shader.

Show screenshots (3)

Moscrif native Shader feature supports three types of the gradients:

Linear
Sweep
Bitmap

Linear gradient

Linear gradient in Moscrif is created by Shader.linear function. Function specifies shader appearance in four parameters. First parameter defines start and end point of the gradient on x and y axis. Start and end point can be set to any position inside of the shape or it can be set at the shape borders.

The second parameter defines colour palette included in the gradient. Colour is defined by four hexadecimal numbers - one for every channel: alpha, red, green, blue.

Third parameter defines position for every colour. Value Zero means that colour is placed directly at the start point and position One represents position at the end point. Other colours are placed between these points.

include "lib://uix/application.ms" // creates main application instance var app = new Application(); // onStart is called when application starts => precreate objects
app.onStart = function(sender)
{
    var pts = {
        start: {x: 0, y: 0},
        end: {x: System.width, y: System.height},
    };
    //define array of colors (red, green, blue) in hexadecimal format [canal + RGB].
    var clrs = new Array(0xffff0000, 0xff00ff00, 0xff0000ff);
// define array of position
    var pos = new Array(0, 0.5, 1);
// creates shader of linear gradient
    var shader = Shader.linear(pts, clrs, pos, 0);     this.paint = new Paint();
    this.paint.shader = shader;
} app.onDraw = function (sender, canvas)
{
// paint our shader (gradient)
    canvas.drawRect(0, 0, System.width, System.height, this.paint);
} // initialize application object and run it
app.run();

Example of the linear gradient:

Sweep gradient

To create a sweep gradient in Moscrif we use Shader.sweep. First two parameters represents x, y coordinates of the gradient centre. Next two parameters are the same as in Sweep.linear.

//define array of colors: red, green, blue (canals: alpha, red, green, blue in hexadecimal form)
var colors = new Array(0xffff0000, 0xff00ff00, 0xff0000ff);
//define array of position
var pos = new Array(0, 0.5, 1);
//creates shader of sweet gradient, first two parameters are center position on X and y axis, then color palette, and position for every color
var shader = Shader.sweep(System.width / 2, System.height / 2, colors, pos);
this.paint = new Paint();
this.paint.shader = shader;

Example of the sweep gradient:

Bitmap gradient

Finally, to create bitmap gradient in moscrif we use Shader.bitmap. Bitmap gradient feature is used to draw any bitmap into Moscrif objects. Objects should have different shapes as bitmap (it is really useful for textures). File Name, the first parameter of Shader bitmap function defines image location, as well as image name. Tile Mode X and Tile Mode Y are symbols which specify methods of image repeating on x and y axis.
Supported symbols: #clamp, #repeat and #mirror.

// create shader from bitmap, first parameter is bitmap location and then type of image repeating horizontaly and verticaly
var shader = Shader.bitmap( "app://logo.png", #clamp, #clamp);
this.paint = new Paint();
this.paint.shader = shader;

Example of the bitmap gradient: