company-logo/index.js at master · Skillbill/company-logo · 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
const width = 800;
const height = 800;
const color1 = '#003365';
const color2 = '#fb6703';
const canvas = document.getElementById("canvas");

paper.setup(canvas);

const piece = (path, fillColor, rototranslation) => {
    const matrix = new paper.Matrix();
    matrix.translate(rototranslation.tx, rototranslation.ty);
    matrix.scale(rototranslation.sx, rototranslation.sy);
    const newPath = path.clone();
    newPath.fillColor = fillColor;
    newPath.transform(matrix);
    return newPath;
}

let path;
let eye;
let voice;
let playVsPause = false;
let playInterval;
let animationIndex = 0;
let steps = [];

steps.push(() => {
    path = new paper.Path({
        closed: true,
        fullySelected: true
    });
    path.add(new paper.Point(22, 30));
});
steps.push(() => path.add(new paper.Point(110, 32)));
steps.push(() => path.curveTo(new paper.Point(175, 60), new paper.Point(200, 120)));
steps.push(() => path.add(new paper.Point(200, 280)));
steps.push(() => path.curveTo(new paper.Point(230, 340), new paper.Point(300, 372)));
steps.push(() => path.add(new paper.Point(300, 400)));
steps.push(() => path.add(new paper.Point(195, 400)));
steps.push(() => path.curveTo(new paper.Point(145, 360), new paper.Point(125, 300)));
steps.push(() => path.add(new paper.Point(125, 135)));
steps.push(() => path.curveTo(new paper.Point(115, 115), new paper.Point(90, 105)));
steps.push(() => path.add(new paper.Point(22, 105)));
steps.push(() => path.fillColor = color1);
steps.push(() => path.setFullySelected(false));
steps.push(() => piece(path, color2, { tx: width, ty: 0, sx: -1, sy: 1 }));
steps.push(() => piece(path, color2, { tx: width, ty: height, sx: -1, sy: -1 }));
steps.push(() => piece(path, color1, { tx: 0, ty: height, sx: 1, sy: -1 }));
steps.push(() => {
    eye = new paper.Path.Circle(new paper.Point(40, 205), 35);
    eye.fillColor = color1;
});
steps.push(() => piece(eye, color2, { tx: width, ty: 0, sx: -1, sy: 1 }));
steps.push(() => {
    voice = new paper.Path.Circle(new paper.Point(355, 400), 35);
    voice.fillColor = color2;
});
steps.push(() => piece(voice, color1, { tx: width, ty: 0, sx: -1, sy: 1 }));

const playPause = () => {
    playVsPause = !playVsPause;
    if (playVsPause) {
        playInterval = setInterval(() => {
            next();
        }, 100)
    } else {
        clearInterval(playInterval);
    }
}

const stop = () => {
    playVsPause = false;
    clearInterval(playInterval);
}

const prev = () => {
    if (animationIndex > 1) {
        animationIndex--;
    } else {
        animationIndex = steps.length;
    }
    paper.project.clear();
    for (let i = 0; i < animationIndex; i++) {
        steps[i]();
    }
}

const next = () => {
    if (animationIndex < steps.length) {
        steps[animationIndex]();
        animationIndex++;
    } else {
        paper.project.clear();
        animationIndex = 1;
        for (let i = 0; i < animationIndex; i++) {
            steps[i]();
        }
    }
}

document.getElementById("button-prev").onclick = () => {
    if (playVsPause) {
        stop();
    }
    prev();
}

document.getElementById("button-play-pause").onclick = playPause;

document.getElementById("button-next").onclick = () => {
    if (playVsPause) {
        stop();
    }
    next();
}

playPause();