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
|
1
2
3
4
5
6
7
|
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
|
const colors = ["#db2923", "#eb7436", "#e3c815"];
const opacities = ["0.3", "0.2", "0.1"];
function getRandomTransform() {
const scale = (Math.random() * 8 + 3) / 20;
const x = Math.random() * 50 - 25;
const y = Math.random() * 50 - 25;
return `translate(${x}%, ${y}%) scale(${scale})`;
}
function getTransition() {
const variation = Math.random() * animationVarianceTime;
const time = animationTime + variation;
const delay = Math.random() * animationDelayVariance;
return "transform " + time + "s ease-in-out" + " " + delay + "s";
}
function movementTransitionDuration() {
const time = Math.random() * MovementVariation + MinMovementTime;
return time + "s";
}
/*
type Props = {
size?: number;
hexOffsets?: { top: number; right: number };
}; */
//type Hex = { fill: string; opacity: string; transition: string; transform: string; i: number };
function generateHexes(size) {
return Array.from({ length: size }, (x, i) => i).map((i) => {
const fill = colors[Math.floor((i / size) * colors.length)];
const opacity = opacities[i % opacities.length];
//const transition = `transform ${animationTime}s ease-in-out`;
const transition = getTransition();
const transform = getRandomTransform();
return { fill, opacity, transition, transform, i };
});
}
function transformHexes(hexes) {
const newHexes = [];
for (let i = 0; i < hexes.length; i++) {
newHexes.push({
fill: hexes[i].fill,
transition: hexes[i].transition,
opacity: opacities[i % opacities.length],
transform: getRandomTransform(),
i: i,
});
}
return newHexes;
}
function getHexStyles(hexOffsets) {
const defaultStyles = {
transitionDelay: movementTransitionDelay(),
transitionDuration: movementTransitionDuration(),
};
if (hexOffsets === undefined) {
return defaultStyles;
} else {
return { ...defaultStyles, right: `${hexOffsets.right}%`, top: `${hexOffsets.top}%` };
}
}
var Poe = clone(StorkController);
Poe.organs = clone(ListController);
Poe.organNum = 0;
var PoeModel = clone(StorkModel);
|