Koch fractal animation.

August 23, 2015

This is my implementation of animation system, it just occurs to me a nice idea to achieve some kinds of object deforming animation, I try to achieve this using as an example a Koch fractal generator that I wrote days before.



     var snow_flake = function(p1, p2, limit) {
        var line = v3.sub(p2, p1);
        var len  = v3.len(line);
        var seg  = len / 3;
        var norm = v3.normalize(line);
        var angle = Math.atan2(line[1], line[0]);
        var cos = Math.cos,
            sin = Math.sin;

        var vvr = []

        var ratio = v3.div_scalar(line, 3);

        /*
         *
         *                    pb
         *                    /\
         *                   /  \
         *                  /    \
         *      p1 ------ pa      pc ------- p2
         *
         *
         *
         * */

        var pa = v3.add(p1, ratio);
        var pc = v3.sub(p2, ratio);
        var pb = v3.add(pa,
                  v3.mul_scalar([ cos(angle - Math.PI / 3),
                                  sin(angle - Math.PI / 3),
                                  0 ],
                                  seg));


        if (limit > 0) {
            snow_flake(p1, pa, limit - 1);
            snow_flake(pa, pb, limit - 1);
            snow_flake(pb, pc, limit - 1);
            snow_flake(pc, p2, limit - 1);

        } else {
            point(p1, pa, 'tron');
            point(p2, pc, 'tron');
            point(pa, pb, 'tron');
            point(pc, pb, 'tron');
        }
    }

Here I try to divide the line between p1 and p2 in four segments and from the two inner segment make two lines with 60 grades of elevation toward the center to make the triangle.

Then the nice part is to call the function itself n-times using as parameter the new generate values.


var Morph = {
        morphing: [],

        savePoints: function(p1, p2, color) {

            this.morphing.push({
                pointA: new Vector(p1),
                pointB: new Vector(p2),
                color1: color,
                color2: rgbc(209, 209,  209)
            });

            return this;
        },

        step: function(delta) {

            if(delta > 1) return this;
            var self = this;

            self.clear();

            this.morphing.forEach(function(seg) {
                var p1 = seg.pointA.v;
                var p2 = VR8.Lerp(seg.pointA.copy(), seg.pointB, delta).v;
                var color = VR8.Lerp(seg.color1.copy(), seg.color2.copy(), delta).v;


                self.save(p1, color);
                self.save(p2, color);
            });
            return this;
        }
    }

So the thing here is iterate through all the vertex in the array and interpolate the two point to get the effect. For now I delete and re-made the Array for every interaction, I suspect this could be a main performance bottleneck.

well here we can see the fractal animation: koch.

For the whole code is in github

this is the koch with 5 level of recursion and streaming more than 3K vertex to gpu only for powerful machines :P koch_lvl5

Comments

comments powered by Disqus