011-02-stroke-animation-creative/image transmission.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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>image transmission</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: 40rem;
            overflow: visible;
        }

        svg>polygon {
            fill: none;
            stroke-width: 0.5;
            stroke: #17f700;
            transition: stroke-dashoffset 20s ease;
        }

    </style>
</head>

<body>
    <div class="container"></div>
</body>
<script>
    // JIEJOE produce
    // b站主页：https://space.bilibili.com/3546390319860710
    // 将50*50的黑白点阵图给GPT，将黑白颜色信息转换为01二进制信息，
    var str = "1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111100010000011111111111111111111111111111111111111100000000000001111111111111111111111111111111111100000000000000001111111111111111111111111111111111000000000000000001111111111111111111111111111111000000001010000000001111111111111111111111111111110000111111111000000011111111111111111111111111111000011111111111000000011111111111111111111111111100001111111111110000000111111111111111111111111111000011111111111100000000111111111111111111111111110001111111110111000000001111111111111111111111111000010001110010010000000011111111111111111111111110000111101111110010000000011111111111111111111111000001101011010000100000000111111111111111111111110000010000110101001100000001111111111111111111111000000110101101101111000000011111111111111111111111000001111101011110110000000111111111111111111111100000010011011111000100000000111111111111111111110000000000110101100001000000001111111111111111111100000000000101011000110000000001111111111111111111000000000001001110001000000000011111111111111111101100000000111111100110000000000011111111111111111110000000110100011111110000000000111111111111111101100000000111101111111000000000000011111111111111100000000000111111111110000100000000011111111111111110000000001111111111100000000000000011111111111101000000000000111111111000000000000000010111111111111000000000000111111110000000000000000001111111111010000000000001111111100000000000001000011111111111000000000000001111110000010000000000000111111111010000000000000111111100000000000000000001111111111110000000000111111111000001000000000010011111111101100000000111111111110000000000000000000111111111010000000001111111111100000100000000000001111111110100000000111111111111000000101000000000011111100100000000011111111111110001111111100000000111100001000000000011111111111000100001111110000101110000100000000000111111111111110111100011100000011000000000000001001111111111111111101111001100001100000000000000000111111111111000000100111001101100000000000000000001111111111000111111100001100000000000000000000000111111111000111100000110001101000000001000000000001111111101111100011110000001000000000000000000110111111111111000111100000000000000000010000000000001111111111000111100000000000000000000010000000000000010111100111100000000000000000000010000000000000000000100011110000000000000000000000000000000000000000001011111000000000000000000000";
    const dot_matrix = {
        // 点阵图的长度以及宽度，可理解为单条线段的长度,也指单个点阵图所有线段的列数
        length: 50,
        // 每一列线段之间的间隔距离,因为这里的点阵图svg内容全是由一条polygon组成的,所以必须设置间隔,否则线段会粘连起来
        distance: 1,
        // 用于储存svg内的polygon标签
        polygon: {},
        // 当前点阵图的偏移方向
        dashoffset_dirction: 1,
        // 初始化
        init() {
            // 创建svg元素
            let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            // 这里svg的viewBox宽高需计算容纳整个polygon,但因为polygon设置有间隔,所以svg的宽高并不完全准确
            svg.setAttribute("viewBox", `0 0 ${this.length * 3} ${this.length * 2}`);
            // 创建polygon元素
            let polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
            // 设置polygon的points属性,用于储存polygon的所有点位信息
            let points = '';
            // y表示当前点的纵坐标距离
            let y = 0;
            // 第一次循环,以length为标准循环50次,创建左边的点阵图
            for (let i = 0; i < this.length; i++) {
                // y纵坐标距离需要加上每一次的间隔距离
                y += this.distance;
                // 如果当前列为奇数列,则单线条走向为从左至右
                if (i % 2 == 1) points += ` 0,${y} ${this.length},${y}`;
                // 如果当前列为偶数列,则单线条走向为从右至左
                else points += ` ${this.length},${y} 0,${y}`;
            };
            // 完成左边的点阵图构造之后,将点移动到右边,开始右边的点阵图构造
            points += ` ${this.length},${y} ${this.length * 2},${y}`;
            // 第二次循环,以length为标准循环50次,创建右边的点阵图
            for (let i = 0; i < this.length; i++) {
                // 如果当前列为偶数列,则单线条走向为从左至右
                if (i % 2 == 0) points += `  ${this.length * 2},${y}  ${this.length * 3},${y}`;
                // 如果当前列为奇数列,则单线条走向为从右至左
                else points += `  ${this.length * 3},${y}  ${this.length * 2},${y}`;
                y += this.distance;
            };
            // 为polygon设置points属性
            polygon.setAttribute("points", points);
            // 将polygon元素加入到svg内部
            svg.appendChild(polygon);
            // 将svg元素加入到container并渲染
            document.querySelector(".container").appendChild(svg);
            this.polygon = polygon;
            // 设置polygon元素的stroke-dasharray
            this.set_dasharray();
        },
        // 设置polygon元素的stroke-dasharray
        set_dasharray() {
            // 将str内容split为数组
            let str_data = str.split('');
            // 遍历str_data,将内容转换为50*50的二元数组
            let str_array = [];
            str_data.forEach((nums, i) => {
                let index = Math.floor(i / this.length);
                if (!str_array[index]) str_array[index] = [];
                str_array[index].push(nums);
            });
            // 设置stroke-dasharray,dasharray以长度为0的实线开始
            let dasharray = '0';
            // 遍历每一列点阵信息,将该列的点阵01信息转换为dasharray内容
            str_array.forEach((array, index) => {
                // 获取当前列点阵信息,注意!!! polygon的走向为s型环绕,故点阵信息的走向应该为每一列交错
                let arr;
                // 如果当前列为奇数列,则正常进行
                if (index % 2 == 1) arr = array;
                // 如果当前列为偶数列,则反向进行,用reverse函数将数组排列顺序给颠倒过来
                else arr = array.reverse();
                // 遍历arr,将当前列的01点阵信息转换为dasharray内容
                arr.forEach((nums, i) => {
                    // 如果当前点为1,即不存在颜色点,该点为背景色,则设置dasharray长度为1的空白间隙
                    if (parseInt(nums)) dasharray += ' 1 0';
                    // 如果当前点为0,即存在颜色点,该点为前景色,则设置dasharray长度为1的实线
                    else dasharray += ' 0 1';
                });
                // 记得每列结束后, 还有一个纵向间隔,需设置dasharray长度为distance的空白间隙
                dasharray += ` ${this.distance} 0`;
            });
            // 继续为dasharray加上一段占位间隔,在之后偏移线段的时候,可以保证偏移的位置一直为空白
            dasharray += ` 10000 0 10000`;
            // 将stroke-dasharray设置到polygon元素上
            this.polygon.style.strokeDasharray = dasharray;
        },
        // 设置polygon元素的stroke-dashoffset
        set_dashoffset() {
            if (this.dashoffset_dirction)
                // 将所有点阵线段进行偏移,使左边的点阵图正好能够移动到右边的点阵图位置上去
                // 偏移的距离为所有的线段长度之和50*50, 加上一段纵向的间隔之和50, 再加上一段中间连接部分线段的长度50,最后减去一个间隔距离单位1
                this.polygon.style.strokeDashoffset = -(this.length * this.length + this.distance * this.length + this.length - this.distance);
            // 将所有点阵线段进行偏移,使右边的点阵图正好能够移动到左边的点阵图位置上去
            else this.polygon.style.strokeDashoffset = 0;
        },
    };
    // 初始化
    dot_matrix.init();
    // 鼠标点击,可以控制点阵图的左右偏移
    window.addEventListener("click", () => {
        dot_matrix.set_dashoffset();
        dot_matrix.dashoffset_dirction = !dot_matrix.dashoffset_dirction;
    });
</script>

</html>