011-02-stroke-animation-creative/dot matrix.html at main · JIEJOE-WEB-Tutorial/011-02-stroke-animation-creative · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dot matrix</title>
    <style>
        * {
            font-size: 2vmin;
            padding: 0;
            margin: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            background-color: #171717;
        }

        .container {
            position: absolute;
        }

        svg {
            height: 35rem;
            overflow: visible;
        }

        svg>line {
            fill: none;
            stroke-width: 1;
            stroke: #17f700;
            transition: stroke-dasharray 1s ease;
        }

    </style>
</head>

<body>
    <div class="container"></div>
</body>
<script>
    // JIEJOE produce
    // b站主页：https://space.bilibili.com/3546390319860710
    // 将50*50的黑白点阵图给GPT，将黑白颜色信息转换为01二进制信息，
    var str = [];
    str[0] = "1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111100010000011111111111111111111111111111111111111100000000000001111111111111111111111111111111111100000000000000001111111111111111111111111111111111000000000000000001111111111111111111111111111111000000001010000000001111111111111111111111111111110000111111111000000011111111111111111111111111111000011111111111000000011111111111111111111111111100001111111111110000000111111111111111111111111111000011111111111100000000111111111111111111111111110001111111110111000000001111111111111111111111111000010001110010010000000011111111111111111111111110000111101111110010000000011111111111111111111111000001101011010000100000000111111111111111111111110000010000110101001100000001111111111111111111111000000110101101101111000000011111111111111111111111000001111101011110110000000111111111111111111111100000010011011111000100000000111111111111111111110000000000110101100001000000001111111111111111111100000000000101011000110000000001111111111111111111000000000001001110001000000000011111111111111111101100000000111111100110000000000011111111111111111110000000110100011111110000000000111111111111111101100000000111101111111000000000000011111111111111100000000000111111111110000100000000011111111111111110000000001111111111100000000000000011111111111101000000000000111111111000000000000000010111111111111000000000000111111110000000000000000001111111111010000000000001111111100000000000001000011111111111000000000000001111110000010000000000000111111111010000000000000111111100000000000000000001111111111110000000000111111111000001000000000010011111111101100000000111111111110000000000000000000111111111010000000001111111111100000100000000000001111111110100000000111111111111000000101000000000011111100100000000011111111111110001111111100000000111100001000000000011111111111000100001111110000101110000100000000000111111111111110111100011100000011000000000000001001111111111111111101111001100001100000000000000000111111111111000000100111001101100000000000000000001111111111000111111100001100000000000000000000000111111111000111100000110001101000000001000000000001111111101111100011110000001000000000000000000110111111111111000111100000000000000000010000000000001111111111000111100000000000000000000010000000000000010111100111100000000000000000000010000000000000000000100011110000000000000000000000000000000000000000001011111000000000000000000000";
    str[1] = "1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111110000000011111111111111111111111111111111111111111000100000011111111111111111111111111111111111111100000000000011111111111111111111111111111111111000000000000000111111111111111111111111111111111000000000000001000111111111111111111111111111110000000001110000000000111111111111111111111111110000000000000111000000101111111111111111111111111000000000000000111100111111111111111111111111111100000000000000000011100111011111111111111111111111000000000000000000111100110111111111111111111111100000000000000000000111111101111111111111111111110000000000100000000011111111011111111111111111111100000000011000001101111111110011111111111111111111000000000111111011111111111100111111111111111111110000000000001110111111111111001111111111111111111000000000011011111111111111110011111111111111111110000000000011111111111111111100111111111111111111100000000000011111111111111111001111111111111111111000000000000011111111111111110011011111111111111110010000000000111111111111111110110111111111111111101100000000001111111111111111101101111111111111111000000000111111111111111111111011011111111111111110000000001111111111111111111110011011111111111111000000000001100111111111111111100111111111111111110000010000000000111111111111111001111111111111111100000110000000011111111111111110011111111111111111100011100000000111111111111111100110111111111111111001111000000011111111111111111001101111111111111110011111000000111111111111111110011011111111111111100001100000011111111111111111100110111111111111111000000000000111111111111111111000100111111111111111011110000011111111111111111110001001111111111111110011110001111111111111111111100010011111111111111110011100011111111100111111111000100111111111111111100111000111110111101111111110001001101111111111111000000001110111111111111111110011011011111111111111000010011111111111100000011100010011111111111111111101111111111110000000011111000100111111111111111111111111011000000000111111110001001111111111111111111111110000000001111111111100010011011111111111111111111110000001111111111111000110110111111111111111111111000000111111111111110000101101111111111111111111100000000111111111111100001011101111111111111111110000000001111111111111000001011001111111111111111100000000111111111111111000010110011111111111111111000000001111111111111110000001000111";
    str[2] = "1110111111111111111111110000000011111111111000001111110111111111111111111000000000001111011001101111111111111111111111111100000000000001111010011111111111111111111111111000000000000000001111100100111111111111111111111100000000000000000001111111011111111111011011111110000000000000000000001111111111111111110011110111000000000000000000000001111111111111111101111111100000000000001100000000001111111111111111111111111000000000011111100000000001111111111111111111111100000000000111111100000000011111111111111111111110000000001111111111100000000011111111111111111111100000001111111111111100000000111111111111111111111000011011111111111111000000000111111111111111111100000111111111111111110000000000111111111111111111000000111111111111111100000000011111111111111111110000001111111111111110000000000011111111111111111000000111001111111111110000000000111111111111111110000001100011111111111110000000001111111111111111110000100000011011111111100000000011111111111111111000011000000000000111111100000000111101111111111100000000000000000101111111100000001111111111111111000000000000000000111111110000000001111111111111111000000000100000000011111000000000011111111111111110000000111000000100111110000000110111111101111111100000001110000111111111100010011111011111111111111000000011100000011111111101100111110011111111111110000001111100001111111111111110111110111111111111100000011111110001111111110111111111111111111111111100000111111100000001100001100111111111111111111111000001111110011000100000011111111111111111111111110000110010111100000000000111100110111111111111111110001000111011001000000000110011100111111111111111100000000001011000000000001000111000111111111111111000000000001100000000000110011111101111111111111110000000000001100000000001100111111111111111111111100000000000001000000000110001111110111111111111111000000000000000010000011100011111011101111111111110000011111000000000011110000111100111111111111111110000000010000000001111101001111101111111111111111110000000000000000011110110001111001101111111111111100000000000000001001111100000111011111110111111111000000000000000100001111100100011111101101111111100000000000000010000111101001100011001011011111111000000000000010000001110100001110001001101101110100000000000000100000111101010011110000010010111000000001100000010000001110000110001111011111111100100000011100000000100111000011100001100111110110011000000111100000111001110000111100010000111011001100000001111101111100011100001111001100011111000110000000011111111110000111000111100011000";
    const dot_matrix = {
        // svg的长度以及宽度，因为点阵图为正方形，所以长宽相等
        length: 50,
        // 用于储存svg内的所有line标签
        lines: [],
        // 当前显示的str点阵信息序号
        current_str: 0,
        // 初始化
        init() {
            // 创建svg元素
            let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            svg.setAttribute("viewBox", `0 0 ${this.length} ${this.length}`);
            // 创建svg内的所有line标签
            for (let i = 1; i <= this.length; i++) {
                // 点阵信息的储存方式为:svg内部至上向下排列50条线段,每一条线段储存一列点阵信息
                let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
                // line元素第一个点的位置
                line.setAttribute("x1", 0);
                line.setAttribute("y1", i);
                // line元素第二个点的位置
                line.setAttribute("x2", this.length);
                line.setAttribute("y2", i);
                // 将所有line元素加入到svg内部
                svg.appendChild(line);
                this.lines.push(line);
            };
            // 将svg元素加入到container并渲染
            document.querySelector(".container").appendChild(svg);
            // 立即设置line元素的stroke-dasharray
            this.set_dasharray(str[this.current_str]);
            // 每2秒钟改变一次line元素的stroke-dasharray,更新视图上的点阵内容,并循环执行
            setInterval(() => {
                this.current_str = (this.current_str + 1) % str.length;
                this.set_dasharray(str[this.current_str]);
            }, 2000);
        },
        // 设置line元素的stroke-dasharray
        set_dasharray(str) {
            // 遍历line元素,对每一条line进行设置stroke-dasharray的操作
            this.lines.forEach((line, index) => {
                // 处理str内容,截图当前列line元素所对应的那列点阵信息,并将str信息split为数组
                let str_data = str.slice(index * this.length, index * this.length + this.length).split('');
                // 设置stroke-dasharray,dasharray以长度为0的实线开始
                let dasharray = '0';
                // 遍历str_data,将01点阵信息转换为dasharray内容
                str_data.forEach(nums => {
                    // 如果当前点为1,即存在颜色点,该点为背景色,则设置dasharray长度为1的实线
                    if (parseInt(nums)) dasharray += ' 0 1';
                    // 如果当前点为0,即不存在颜色点,该点为前景色,则设置dasharray长度为1的空白间隙
                    else dasharray += ' 1 0';
                });
                // 随机设置line元素的过渡时间延迟
                line.style.transitionDelay = `${Math.random()}s`;
                // 将stroke-dasharray设置到对应line元素上
                line.style.strokeDasharray = dasharray;
            });
        },
    };
    // 初始化
    dot_matrix.init();
</script>

</html>