Skip to content

Graphs.md

cfloutier edited this page Apr 29, 2024 · 4 revisions

image

K2GraphLine

This Visual Element should be placed in a parent Visual Element container. It will fit the whole place.

Atributes

image

  • Min X, Max X, Min Y, Max Y : the 2D Window of visibles values.

  • Line Color and Line Widh : the line rendering

  • Test Seed is used only in UI Builder, it will set up the lines values with a simple Perlin Noise (in the ranges x : [0-100] y [0-1])

setPoints

use the setPoints function to defines X,Y coordinates of the line.


see the TestGraph.cs class in the test_k2ui project

Gradients.

image

you can find example of creating a gradient using color Lerp in this example : TestAtmGraph.cs

Creates a Texture2D and use it a a Visual Element's backgroundImage

gradient = new VisualElement();
gradient.AddToClassList("gradient");
gradient.style.backgroundImage = gradient_Texture;

use the same texture to define colors

    float maxAltitude = 100;
    public void UpdateAtmoTexture(Texture2D texture)
    {
        float scale = maxAltitude / texture.height; //meters per pixel

        for (int y = 0; y < texture.height; y++)
        {
            float alt = scale * y;

            float low_ratio = alt / low_density_h;  
            float high_ratio = alt / high_density_h;  

            var c = Color.Lerp(color_planet, color_background, low_ratio) ;
            var atm_alpha = 0.5f*Mathf.Clamp01(1-high_ratio);
            var atm_color = new Color(atm_alpha, atm_alpha, atm_alpha, 1);
            c += atm_color;//Color.Lerp(color_atm, c , high_ratio/2) ;

            for (int x = 0; x < texture.width; x++)
            {
                texture.SetPixel(x, y, c);
            }
        }

        texture.Apply();
    }

Clone this wiki locally