Остання активність 3 months ago

example.js Неформатований
1function generateSVG(grid, config) {
2 const { cellSize, radius, strokeWidth } = config;
3 const width = grid[0].length * cellSize;
4 const height = grid.length * cellSize;
5
6 let svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">`;
7 for (let row = 0; row < grid.length; row++) {
8 for (let col = 0; col < grid[row].length; col++) {
9 const cx = col * cellSize + cellSize / 2;
10 const cy = row * cellSize + cellSize / 2;
11
12 const circumference = 2 * Math.PI * radius;
13 const isClockwise = (row + col) % 2 === 0;
14 const initialOffset = isClockwise ? circumference : -circumference;
15
16 const squareX = cx - radius;
17 const squareY = cy - radius;
18 const squareSize = 2 * radius;
19 svg += `<rect x="${squareX}" y="${squareY}" width="${squareSize}" height="${squareSize}" rx="${radius}" ry="${radius}" fill="black" opacity="0" id="square_${row}_${col}"></rect>`;
20
21 svg += `<circle cx="${cx}" cy="${cy}" r="${radius}" fill="none" stroke="black" stroke-width="${strokeWidth}" stroke-dasharray="${circumference}" stroke-dashoffset="${initialOffset}" id="circle_${row}_${col}"></circle>`;
22 if (grid[row][col]) {
23 svg += `<circle cx="${cx}" cy="${cy}" r="0" fill="black" id="inner_${row}_${col}"></circle>`;
24 }
25 }
26 }
27
28 svg += '</svg>';
29 return svg;
30}
31
32function replaceAndAnimate(grid, config) {
33 const svgString = generateSVG(grid, config);
34 const existingSVG = document.querySelector('svg');
35 if (existingSVG) {
36 existingSVG.outerHTML = svgString;
37 animateCircles(grid, config);
38 } else {
39 console.log('SVG не найден на странице');
40 }
41}
42
43function animateCircles(grid, config) {
44 const { radius, cellSize, arcDur, arcDelayStep, fillDur, fillDelayStep, squareDur, shrinkDur, moveDur, shrinkFactor, moveFactor } = config;
45
46 const rows = grid.length;
47 const cols = grid[0].length;
48 const centerRow = Math.floor(rows / 2);
49 const centerCol = Math.floor(cols / 2);
50 const centerX = centerCol * cellSize + cellSize / 2 - radius;
51 const centerY = centerRow * cellSize + cellSize / 2 - radius;
52
53 const circles = [];
54 const squares = [];
55 const inners = [];
56 for (let row = 0; row < rows; row++) {
57 circles[row] = [];
58 squares[row] = [];
59 inners[row] = [];
60 for (let col = 0; col < cols; col++) {
61 circles[row][col] = document.getElementById(`circle_${row}_${col}`);
62 squares[row][col] = document.getElementById(`square_${row}_${col}`);
63 inners[row][col] = grid[row][col] ? document.getElementById(`inner_${row}_${col}`) : null;
64 }
65 }
66
67 const arcDelays = [];
68 for (let row = 0; row < rows; row++) {
69 arcDelays[row] = [];
70 for (let col = 0; col < cols; col++) {
71 arcDelays[row][col] = (row + col) * arcDelayStep;
72 }
73 }
74 const maxDelayFirst = (rows + cols - 2) * arcDelayStep;
75
76 for (let row = 0; row < rows; row++) {
77 for (let col = 0; col < cols; col++) {
78 const circle = circles[row][col];
79 if (circle) {
80 const isClockwise = (row + col) % 2 === 0;
81 setTimeout(() => {
82 animateDashOffset(circle, isClockwise, 2 * Math.PI * radius, arcDur);
83 }, arcDelays[row][col]);
84 }
85 }
86 }
87
88 setTimeout(() => {
89 const fillDelays = [];
90 let maxDistance = 0;
91 for (let row = 0; row < rows; row++) {
92 for (let col = 0; col < cols; col++) {
93 if (grid[row][col]) {
94 const distance = Math.sqrt((row - centerRow) ** 2 + (col - centerCol) ** 2);
95 fillDelays.push({ row, col, delay: distance * fillDelayStep });
96 maxDistance = Math.max(maxDistance, distance);
97 }
98 }
99 }
100 const maxDelaySecond = maxDistance * fillDelayStep;
101
102 fillDelays.forEach(({ row, col, delay }) => {
103 const innerCircle = inners[row][col];
104 if (innerCircle) {
105 setTimeout(() => {
106 animateRadius(innerCircle, 0, radius, fillDur);
107 }, delay);
108 }
109 });
110
111 setTimeout(() => {
112 for (let row = 0; row < rows; row++) {
113 for (let col = 0; col < cols; col++) {
114 const circle = circles[row][col];
115 const square = squares[row][col];
116 const inner = inners[row][col];
117 if (grid[row][col]) {
118 animateToSquare(circle, square, inner, radius, squareDur);
119 } else {
120 animateFadeOut(circle, squareDur);
121 square.remove();
122 }
123 }
124 }
125
126 setTimeout(() => {
127 for (let row = 0; row < rows; row++) {
128 for (let col = 0; col < cols; col++) {
129 if (grid[row][col]) {
130 const square = squares[row][col];
131 animateShrink(square, 2 * radius, 2 * radius * shrinkFactor, shrinkDur);
132 }
133 }
134 }
135
136 setTimeout(() => {
137 for (let row = 0; row < rows; row++) {
138 for (let col = 0; col < cols; col++) {
139 if (grid[row][col]) {
140 const square = squares[row][col];
141 const currentX = parseFloat(square.getAttribute('x'));
142 const currentY = parseFloat(square.getAttribute('y'));
143 const toX = currentX + (centerX - currentX) * moveFactor;
144 const toY = currentY + (centerY - currentY) * moveFactor;
145 animateMove(square, currentX, currentY, toX, toY, moveDur);
146 }
147 }
148 }
149
150 setTimeout(() => {
151 const svg = document.querySelector('svg');
152 svg.style.borderRadius = '10%';
153 svg.style.border = '5px black dotted';
154 }, moveDur);
155 }, shrinkDur);
156 }, squareDur);
157 }, maxDelaySecond + fillDur);
158 }, maxDelayFirst + arcDur);
159}
160
161function animateDashOffset(element, isClockwise, circumference, duration) {
162 const startTime = performance.now();
163 const from = isClockwise ? circumference : -circumference;
164 const to = 0;
165 const step = () => {
166 const elapsed = performance.now() - startTime;
167 const progress = Math.min(elapsed / duration, 1);
168 const currentOffset = from + (to - from) * progress;
169 element.setAttribute('stroke-dashoffset', currentOffset);
170 if (progress < 1) {
171 requestAnimationFrame(step);
172 }
173 };
174 requestAnimationFrame(step);
175}
176
177function animateRadius(element, from, to, duration) {
178 const startTime = performance.now();
179 const step = () => {
180 const elapsed = performance.now() - startTime;
181 const progress = Math.min(elapsed / duration, 1);
182 const currentRadius = from + (to - from) * progress;
183 element.setAttribute('r', currentRadius);
184 if (progress < 1) {
185 requestAnimationFrame(step);
186 }
187 };
188 requestAnimationFrame(step);
189}
190
191function animateToSquare(circle, square, inner, radius, duration) {
192 const startTime = performance.now();
193 const step = () => {
194 const elapsed = performance.now() - startTime;
195 const progress = Math.min(elapsed / duration, 1);
196 const currentRxRy = radius * (1 - progress);
197 const currentOpacity = progress;
198 square.setAttribute('rx', currentRxRy);
199 square.setAttribute('ry', currentRxRy);
200 square.setAttribute('opacity', currentOpacity);
201 circle.setAttribute('opacity', 1 - progress);
202 if (progress < 1) {
203 requestAnimationFrame(step);
204 } else {
205 circle.remove();
206 if (inner) inner.remove();
207 if (currentOpacity === 1) square.removeAttribute('opacity');
208 }
209 };
210 requestAnimationFrame(step);
211}
212
213function animateFadeOut(element, duration) {
214 const startTime = performance.now();
215 const step = () => {
216 const elapsed = performance.now() - startTime;
217 const progress = Math.min(elapsed / duration, 1);
218 const currentOpacity = 1 - progress;
219 element.setAttribute('opacity', currentOpacity);
220 if (progress < 1) {
221 requestAnimationFrame(step);
222 } else {
223 element.remove();
224 }
225 };
226 requestAnimationFrame(step);
227}
228
229function animateShrink(element, fromSize, toSize, duration) {
230 const startTime = performance.now();
231 const step = () => {
232 const elapsed = performance.now() - startTime;
233 const progress = Math.min(elapsed / duration, 1);
234 const currentSize = fromSize + (toSize - fromSize) * progress;
235 element.setAttribute('width', currentSize);
236 element.setAttribute('height', currentSize);
237 if (progress < 1) {
238 requestAnimationFrame(step);
239 }
240 };
241 requestAnimationFrame(step);
242}
243
244function animateMove(element, fromX, fromY, toX, toY, duration) {
245 const startTime = performance.now();
246 const step = () => {
247 const elapsed = performance.now() - startTime;
248 const progress = Math.min(elapsed / duration, 1);
249 const currentX = fromX + (toX - fromX) * progress;
250 const currentY = fromY + (toY - fromY) * progress;
251 element.setAttribute('x', currentX);
252 element.setAttribute('y', currentY);
253 if (progress < 1) {
254 requestAnimationFrame(step);
255 }
256 };
257 requestAnimationFrame(step);
258}
259
260// Пример использования:
261const config = {
262 cellSize: 22.5,
263 radius: 10,
264 strokeWidth: 2,
265 arcDur: 500,
266 arcDelayStep: 100,
267 fillDur: 500,
268 fillDelayStep: 100,
269 squareDur: 2000,
270 shrinkDur: 300,
271 moveDur: 1000,
272 shrinkFactor: 0.9,
273 moveFactor: 0.2
274};
275const arr = [[true, true, true, true, true, true, true, false, false, false, false, true, false, false, true, true, false, false, true, true, false, false, true, true, true, true, true, true, true], [true, false, false, false, false, false, true, false, true, true, false, false, true, true, false, false, true, false, false, false, true, false, true, false, false, false, false, false, true], [true, false, true, true, true, false, true, false, false, false, true, true, true, false, false, false, false, false, true, false, true, false, true, false, true, true, true, false, true], [true, false, true, true, true, false, true, false, true, false, true, true, true, false, false, false, false, true, false, true, true, false, true, false, true, true, true, false, true], [true, false, true, true, true, false, true, false, true, true, false, true, false, true, true, false, false, true, true, true, false, false, true, false, true, true, true, false, true], [true, false, false, false, false, false, true, false, false, false, false, true, true, false, false, true, false, true, true, false, false, false, true, false, false, false, false, false, true], [true, true, true, true, true, true, true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, true, true, true, true, true, true], [false, false, false, false, false, false, false, false, true, true, false, true, false, true, false, false, true, false, false, false, true, false, false, false, false, false, false, false, false], [false, true, false, true, true, true, true, false, true, true, false, false, false, false, false, false, false, false, true, true, true, true, true, false, true, true, false, true, false], [false, true, true, true, false, true, false, false, true, false, true, true, false, true, true, true, false, false, false, false, true, true, true, false, true, false, true, false, false], [false, false, true, true, false, true, true, false, true, false, true, true, true, true, true, true, true, true, false, false, false, false, true, false, true, true, true, false, false], [false, true, true, false, false, false, false, true, false, false, true, true, false, true, true, false, true, true, true, false, false, false, true, true, true, false, false, false, true], [false, false, true, false, true, false, true, true, true, true, false, false, false, false, false, true, false, true, true, true, false, true, true, true, false, false, true, true, false], [true, true, false, false, false, true, false, false, false, true, false, false, true, false, false, true, false, true, true, false, false, false, true, false, true, false, true, false, false], [false, false, true, true, false, true, true, false, false, false, false, true, true, true, true, false, true, true, false, true, true, false, false, true, false, false, false, false, false], [false, true, true, true, true, false, false, false, true, false, true, false, true, true, false, true, false, true, true, true, false, false, false, true, false, true, true, false, false], [true, false, false, true, true, false, true, false, false, false, false, true, false, true, true, true, true, true, false, true, true, false, true, true, true, false, false, false, true], [true, false, false, true, true, true, false, true, false, true, true, false, false, false, false, false, true, false, true, false, true, false, true, false, false, true, true, false, true], [true, true, true, true, true, false, true, true, false, true, true, false, true, false, false, true, false, false, false, false, true, true, true, true, false, true, false, false, true], [true, true, false, true, false, true, false, true, false, false, true, false, false, false, true, false, false, true, true, false, false, false, false, true, false, false, false, false, false], [true, true, false, true, true, true, true, false, true, false, true, true, true, false, true, true, true, false, false, false, true, true, true, true, true, true, false, false, false], [false, false, false, false, false, false, false, false, true, false, false, true, true, false, false, false, false, false, true, false, true, false, false, false, true, true, false, true, true], [true, true, true, true, true, true, true, false, false, false, false, false, true, true, true, false, false, true, true, true, true, false, true, false, true, false, true, true, false], [true, false, false, false, false, false, true, false, true, true, true, false, true, true, false, true, false, true, false, true, true, false, false, false, true, true, false, true, true], [true, false, true, true, true, false, true, false, true, true, false, false, true, false, true, false, true, true, true, true, true, true, true, true, true, true, false, true, true], [true, false, true, true, true, false, true, false, true, true, true, true, true, true, false, false, true, false, false, false, false, true, false, false, false, true, true, false, false], [true, false, true, true, true, false, true, false, false, false, true, false, false, false, true, false, true, false, true, false, false, false, false, true, true, false, false, true, true], [true, false, false, false, false, false, true, false, true, true, false, false, true, true, true, true, false, false, false, true, true, false, true, false, true, false, true, false, true], [true, true, true, true, true, true, true, false, false, true, false, false, true, false, false, false, true, true, true, false, true, false, false, false, false, true, true, false, false]];
276replaceAndAnimate(arr, config);
text2json_qr.py Неформатований
1import qrcode, json
2
3def generate_qr_boolean_array(text):
4 qr = qrcode.QRCode(
5 version=5,
6 error_correction=qrcode.constants.ERROR_CORRECT_Q,
7 box_size=1,
8 border=0,
9 )
10
11 qr.add_data(text)
12 qr.make(fit=True)
13
14 img = qr.make_image(fill_color="black", back_color="white")
15 width, height = img.size
16
17 boolean_array = []
18 for y in range(height):
19 row = []
20 for x in range(width):
21 pixel = img.getpixel((x, y))
22 if pixel == 0 or pixel == (0, 0, 0): row.append(True)
23 else: row.append(False)
24 boolean_array.append(row)
25
26 return boolean_array
27
28print(json.dumps(generate_qr_boolean_array("Hello, world!")))