天际说

【Unity C#编程】图表 可视化数据:添加多个维度

发布时间:2014年3月23日 / 分类:Unity3D&SketchUp学习笔记 / 10,444 次围观 / 抢沙发!

本文由Aoi翻译,转载请注明出处。文章来自于catlikecoding,原文作者介绍了Unity制作图表、可视化数据的方法。更多的名词解释内容,请点击末尾的“原文链接”查看。

显示多个图表

只有一个图表的话是不是有点枯燥呢?如果能展示多个图表那多好啊!我们需要做的是用不同的方式来计算p.y,代码的其他部分可以保持原样。直接抽取计算p.y的代码,放到它自己的函数里,我们就叫它Linear。这个函数所做的是模仿数学函数f(x) = x。我们把这个做成静态的,因为它不需要对象来实现功能,只需输入值就可以了。

void Update () {
        if (currentResolution != resolution || points == null) {
            CreatePoints();
        }
        for (int i = 0; i < resolution; i++) {
            Vector3 p = points[i].position;
            p.y = Linear(p.x);
            points[i].position = p;
            Color c = points[i].color;
            c.g = p.y;
            points[i].color = c;
        }
        particleSystem.SetParticles(points, points.Length);
    }
  
    private static float Linear (float x) {
        return x;
    }

通过创建更多函数并调用它们代替Linear来添加其他数学函数也很简单。我们来添加三个新函数。第一个是幂数,计算f(x) = x2第二个是抛物线,计算f(x) = (2x - 1)2第三个是正弦,计算f(x) = (sin(2πx) + 1) / 2

private static float Exponential (float x) {
        return x * x;
    }
  
    private static float Parabola (float x){
        x = 2f * x - 1f;
        return x * x;
    }
  
    private static float Sine (float x){
        return 0.5f + 0.5f * Mathf.Sin(2 * Mathf.PI * x);
    }

四个函数的图

每次在这三个选择之间切换需要改变代码,即使在播放模式下也并不难。创建一个枚举类型,包含想要展示的每个函数的项。我们把它叫做FunctionOption,但是由于我们是在class里定义的,所以它的正是名称是Grapher1.FunctionOption。 

 

添加新类型的公共变量命名函数。这个给我们一个很好地字段,可以在检查器中选择功能。

public enum FunctionOption {
        Linear,
        Exponential,
        Parabola,
        Sine
    }
  
    public FunctionOption function;

 

选择使用哪个功能

在检查器中选择功能很好,但是现在还起不到什么作用。每次更新,我们需要根据功能的值来决定调用什么函数。有多种方法可以实现这个,我们使用委托阵列。

首先为函数定义一个委托类型,有一个单精度浮点数作为输入和输出,这相当于函数方法。我们叫它FunctionDelegate。然后添加一个静态阵列,命名functionDelegates,用委托函数填写。在枚举中以相同的顺序将他们命名。

现在我们可以根据功能变量从阵列中选择想要的委托,通过把它计算成一个整数。把这个委托存储在临时变量里,并使用它来计算Y的值。

private delegate float FunctionDelegate (float x);
    private static FunctionDelegate[] functionDelegates = {
        Linear,
        Exponential,
        Parabola,
        Sine
    };
  
    void Update () {
        if(currentResolution != resolution){
            CreatePoints();
        }
        FunctionDelegate f = functionDelegates[(int)function];
        for(int i = 0; i < resolution; i++){
            Vector3 p = points[i].position;
            p.y = f(p.x);
            points[i].position = p;
            Color c = points[i].color;
            c.g = p.y;
            points[i].color = c;
        }
        particleSystem.SetParticles(points, points.Length);
    }

终于,我们可以在播放模式下改变函数图形了!

虽然每次选择另一个函数的时候都要重新创建图形,其他时候基本不用改变。所以不用在每次更新的时候都计算点。然而,如果给函数加上时间就不一样了。例如,改变一下正弦函数,变为f(x) = (sin(2πx + Δ) + 1) / 2,Δ等于播放时间。这将形成一个缓慢的正弦波动画。这里是完整的脚本。

using UnityEngine;
  
public class Grapher1 : MonoBehaviour {
      
    public enum FunctionOption {
        Linear,
        Exponential,
        Parabola,
        Sine
    }
      
    private delegate float FunctionDelegate (float x);
    private static FunctionDelegate[] functionDelegates = {
        Linear,
        Exponential,
        Parabola,
        Sine
    };
  
    public FunctionOption function;
      
    [Range(10, 100)]
    public int resolution = 10;
      
    private int currentResolution;
    private ParticleSystem.Particle[] points;
      
    private void CreatePoints () {
        currentResolution = resolution;
        points = new ParticleSystem.Particle[resolution];
        float increment = 1f / (resolution - 1);
        for (int i = 0; i < resolution; i++) {
            float x = i * increment;
            points[i].position = new Vector3(x, 0f, 0f);
            points[i].color = new Color(x, 0f, 0f);
            points[i].size = 0.1f;
        }
    }
      
    void Update () {
        if (currentResolution != resolution || points == null) {
            CreatePoints();
        }
        FunctionDelegate f = functionDelegates[(int)function];
        for (int i = 0; i < resolution; i++) {
            Vector3 p = points[i].position;
            p.y = f(p.x);
            points[i].position = p;
            Color c = points[i].color;
            c.g = p.y;
            points[i].color = c;
        }
        particleSystem.SetParticles(points, points.Length);
    }
      
    private static float Linear (float x) {
        return x;
    }
      
    private static float Exponential (float x) {
        return x * x;
    }
  
    private static float Parabola (float x){
        x = 2f * x - 1f;
        return x * x;
    }
  
    private static float Sine (float x){
        return 0.5f + 0.5f * Mathf.Sin(2 * Mathf.PI * x + Time.timeSinceLevelLoad);
    }
}

添加一个额外的维度

到目前为止,我们只用X轴输入,又一次用了时间。现在我们将创建一个使用Z轴的新图表对象,因此产出的将不再是一条线,而是网格。

确保你不是在播放模式。创建一个新的Unity对象,就像Graph 1,同时要有一个新的绘图脚本,把它们叫做Graph 2和Grapher2 。你可以复制并需要的地方做修改,这样能加快速度。勾选其名称前的复选框来禁用Graph 1,因为我们不会再用到它了。从Grapher1 中复制代码到Grapher2,先只改变Grapher2的class名,一会再修改代码的其他部分。

完成上述内容的最快方法是复制脚本并编辑class名称,然后复制对象并重命名,然后把新脚本拖拽到就的上面。

 

切换到一个新的图

为了把线变成一个正方形网格,我们需要改变Grapher2的CreatePoints函数。创建更多的点,用一个嵌套的for循环初始化它们。现在设置Z轴以及蓝色的分量。

private void CreatePoints () {
        currentResolution = resolution;
        points = new ParticleSystem.Particle[resolution * resolution];
        float increment = 1f / (resolution - 1);
        int i = 0;
        for (int x = 0; x < resolution; x++) {
            for (int z = 0; z < resolution; z++) {
                Vector3 p = new Vector3(x * increment, 0f, z * increment);
                points[i].position = p;
                points[i].color = new Color(p.x, 0f, p.z);
                points[i++].size = 0.1f;
            }
        }
    }

发现到这里会切到最大视图,可以在右上角切回去:

扁平的网格

现在出现了一个漂亮的扁平网格。但是它不应该显示线性函数吗?是的,但是现在只用于显示沿着Z轴的第一行点。如果你选了一个不同的函数,只有这些点会改变,其他的将保持不变。这是因为Update函数目前只遍历分辨率点,然而它应该是遍历所有点的。

void Update () {
        if (currentResolution != resolution || points == null) {
            CreatePoints();
        }
        FunctionDelegate f = functionDelegates[(int)function];
        for (int i = 0; i < points.Length; i++) {
            Vector3 p = points[i].position;
            p.y = f(p.x);
            points[i].position = p;
            Color c = points[i].color;
            c.g = p.y;
            points[i].color = c;
        }
        particleSystem.SetParticles(points, points.Length);
    }

个函数的网格

现在我们再次看到了函数,拓展到了Z轴。然而,有些奇怪的事发生了。显示抛物线的时候尝试旋转透视图,从某些角度,图形绘制是错误的。这是因为粒子是按我们创建的顺序显示的。为了修正这一点,设置粒子系统渲染器模块的Sort Mode为“By Distance”,而不是None。这个确保从所有角度看图形都显示正确,但这也会降低性能。所以在显示大量点的时候不要使用它。幸运的是,如果我们只从正确的方向看图,我们就可以忽略排序。

 

Sort Mode None By Distance.

现在来更新功能代码,这样我们就能利用新坐标的优势。首先改变FunctionDelegate输入参数,改为一个vector和一个float,来代替单一的float。虽然可以分别指定X和Z的位置,我们简单地将整个位置矢量。还包含当前时间,而不必在函数里面寻找。

private delegate float FunctionDelegate (Vector3 p, float t);

现在我们需要相应地更新功能函数,改变委托的调用方法。

void Update () {
        if (currentResolution != resolution || points == null) {
            CreatePoints();
        }
        FunctionDelegate f = functionDelegates[(int)function];
        float t = Time.timeSinceLevelLoad;
        for (int i = 0; i < points.Length; i++) {
            Vector3 p = points[i].position;
            p.y = f(p, t);
            points[i].position = p;
            Color c = points[i].color;
            c.g = p.y;
            points[i].color = c;
        }
        particleSystem.SetParticles(points, points.Length);
    }
  
    private static float Linear (Vector3 p, float t) {
        return p.x;
    }
  
    private static float Exponential (Vector3 p, float t) {
        return p.x * p.x;
    }
  
    private static float Parabola (Vector3 p, float t){
        p.x = 2f * p.x - 1f;
        return p.x * p.x;
    }
  
    private static float Sine (Vector3 p, float t){
        return 0.5f + 0.5f * Mathf.Sin(2 * Mathf.PI * p.x + t);
    }

我们已经准备好在数学函数加入Z。例如:改变抛物线函数为f(x,z) = 1 - (2x - 1)2 × (2z - 1)2。我们还可以拓展一下正弦函数,分层多个正弦来得到一个复合的振荡效果。

private static float Parabola (Vector3 p, float t){
        p.x += p.x - 1f;
        p.z += p.z - 1f;
        return 1f - p.x * p.x * p.z * p.z;
    }
  
    private static float Sine (Vector3 p, float t){
        return 0.50f +
            0.25f * Mathf.Sin(4f * Mathf.PI * p.x + 4f * t) * Mathf.Sin(2f * Mathf.PI * p.z + t) +
            0.10f * Mathf.Cos(3f * Mathf.PI * p.x + 5f * t) * Mathf.Cos(5f * Mathf.PI * p.z + 3f * t) +
            0.15f * Mathf.Sin(Mathf.PI * p.x + 0.6f * t);
    }

更加有趣的抛物线和正弦函数

 

让我们以添加Ripple函数来完成Grapher2,这是从网格中心发出的单一正弦波。这里是完整的脚本

using UnityEngine;
  
public class Grapher2 : MonoBehaviour {
  
    public enum FunctionOption {
        Linear,
        Exponential,
        Parabola,
        Sine,
        Ripple
    }
  
    private delegate float FunctionDelegate (Vector3 p, float t);
    private static FunctionDelegate[] functionDelegates = {
        Linear,
        Exponential,
        Parabola,
        Sine,
        Ripple
    };
  
    public FunctionOption function;
  
    [Range(10, 100)]
    public int resolution = 10;
  
    private int currentResolution;
    private ParticleSystem.Particle[] points;
  
    private void CreatePoints () {
        currentResolution = resolution;
        points = new ParticleSystem.Particle[resolution * resolution];
        float increment = 1f / (resolution - 1);
        int i = 0;
        for (int x = 0; x < resolution; x++) {
            for (int z = 0; z < resolution; z++) {
                Vector3 p = new Vector3(x * increment, 0f, z * increment);
                points[i].position = p;
                points[i].color = new Color(p.x, 0f, p.z);
                points[i++].size = 0.1f;
            }
        }
    }
  
    void Update () {
        if (currentResolution != resolution || points == null) {
            CreatePoints();
        }
        FunctionDelegate f = functionDelegates[(int)function];
        float t = Time.timeSinceLevelLoad;
        for (int i = 0; i < points.Length; i++) {
            Vector3 p = points[i].position;
            p.y = f(p, t);
            points[i].position = p;
            Color c = points[i].color;
            c.g = p.y;
            points[i].color = c;
        }
        particleSystem.SetParticles(points, points.Length);
    }
  
    private static float Linear (Vector3 p, float t) {
        return p.x;
    }
  
    private static float Exponential (Vector3 p, float t) {
        return p.x * p.x;
    }
  
    private static float Parabola (Vector3 p, float t){
        p.x = 2f * p.x - 1f;
        p.z = 2f * p.z - 1f;
        return 1f - p.x * p.x * p.z * p.z;
    }
  
    private static float Sine (Vector3 p, float t){
        return 0.50f +
            0.25f * Mathf.Sin(4 * Mathf.PI * p.x + 4 * t) * Mathf.Sin(2 * Mathf.PI * p.z + t) +
            0.10f * Mathf.Cos(3 * Mathf.PI * p.x + 5 * t) * Mathf.Cos(5 * Mathf.PI * p.z + 3 * t) +
            0.15f * Mathf.Sin(Mathf.PI * p.x + 0.6f * t);
    }
  
    private static float Ripple (Vector3 p, float t){
        p.x -= 0.5f;
        p.z -= 0.5f;
        float squareRadius = p.x * p.x + p.z * p.z;
        return 0.5f + Mathf.Sin(15f * Mathf.PI * squareRadius - 2f * t) / (2f + 100f * squareRadius);
    }
}

 

来自:9Tech

标签:none