rustfest.ch/logo_renderer.js at master · RustFestZurich/rustfest.ch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
function LogoRenderer(selector) {
    this.selector = selector;
    this.rotation_animation_offset = 0;
    this.fancy_triangles = Math.random() < 0.6// || true;

    let self = this;
    let animator = () => {
        self.animate();
        self.render();

        requestAnimationFrame(animator);
    };
    requestAnimationFrame(animator);
}

(() => {
'use strict';

/// All the 8 colors used
const context_flags = {
    alpha: true,
};
const colors = [ '247eff', '66a2f6', 'cabd4b', 'e6da6e', '5252c9', '7f7fe4', '09d4b0', '44f0d1', ];
const size = 42
    , n_slices = 16
    , rotation_animation_offset_step = 0.008;

// Poor mans use
const sin = Math.sin
    , cos = Math.cos
    , min = Math.min
    , pi = Math.PI;

/// Private functions
function i2pi(i) {
    return i / n_slices * 2 * pi;
}

/// Public functions
LogoRenderer.prototype = {
    animate: function() {
        if (this.rotation_animation_offset > pi) {
            this.rotation_animation_offset -= pi;
        }
        this.rotation_animation_offset += rotation_animation_offset_step;
    },


    render: function() {
        let ctx = document.querySelector(this.selector).getContext('2d', context_flags);
        const width = ctx.canvas.offsetWidth
            , height = ctx.canvas.offsetHeight
            , size = min(width, height)
            , rotation_animation_offset = this.rotation_animation_offset
            , fancy = this.fancy_triangles;
        var i = 0;

        // Fix relations
        ctx.canvas.width = width;
        ctx.canvas.height = height;

        // Clean page
        //ctx.fillStyle = '#eee';
        //ctx.fillRect(0,0, width, height);

        // Setup relative size
        const nose_height = size/4.2
            , inner_radius = size/3
            , outer_radius = size/2.3
            , tail_height = size/2;

        ctx.save();
        ctx.translate(width/2, height/2);

        const render_slice = (color) => {
            ctx.strokeStyle =
            ctx.fillStyle = '#'+color;
            let off = size*i;
            //ctx.fillRect(off, 0, size, size);

            ctx.beginPath()

            var normal_upper_x = sin(i2pi(i    ) + rotation_animation_offset)
              , normal_upper_y = cos(i2pi(i    ) + rotation_animation_offset);
            var normal_lower_x = sin(i2pi(i + 1) + rotation_animation_offset)
              , normal_lower_y = cos(i2pi(i + 1) + rotation_animation_offset);

            // inner lower
            ctx.moveTo(normal_lower_x * inner_radius, normal_lower_y * inner_radius);
            // dark inner
            if (fancy && i % 4 == 0) {
                var normal_middle_x = sin(i2pi(i + 0.5) + rotation_animation_offset)
                  , normal_middle_y = cos(i2pi(i + 0.5) + rotation_animation_offset);

                ctx.lineTo(normal_middle_x * nose_height, normal_middle_y * nose_height);
            }
            // inner upper
            ctx.lineTo(normal_upper_x * inner_radius, normal_upper_y * inner_radius);
            // outer upper
            ctx.lineTo(normal_upper_x * outer_radius, normal_upper_y * outer_radius);

            // light outer before
            if (fancy && i % 2 == 1) {
                var normal_tail_far_x = sin(i2pi(i - 1) + rotation_animation_offset)
                  , normal_tail_far_y = cos(i2pi(i - 1) + rotation_animation_offset);

                // far outer
                ctx.lineTo(normal_tail_far_x * outer_radius, normal_tail_far_y * outer_radius);
                // far tail
                ctx.lineTo(normal_tail_far_x * tail_height, normal_tail_far_y * tail_height);
                // tail
                ctx.lineTo(normal_upper_x * tail_height, normal_upper_y * tail_height);
                // outer upper
                ctx.lineTo(normal_upper_x * outer_radius, normal_upper_y * outer_radius);
            }
            // outer lower
            ctx.lineTo(normal_lower_x * outer_radius, normal_lower_y * outer_radius);

            ctx.closePath();
            ctx.stroke();
            ctx.fill();

            i += 1;
        }

        colors.forEach(render_slice);
        colors.forEach(render_slice);

        ctx.restore();
    }
};
})();