-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
142 lines (121 loc) · 3.52 KB
/
App.tsx
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
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* Generated with the TypeScript template
* https://github.com/react-native-community/react-native-template-typescript
*
* @format
*/
import React from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import {spline} from '@georgedoescode/spline';
import {
Canvas,
LinearGradient,
Path,
useClockValue,
useComputedValue,
useValue,
vec,
} from '@shopify/react-native-skia';
import {createNoise2D} from 'simplex-noise';
function createPoints() {
const points = [];
// how many points do we need
const numPoints = 6;
// used to equally space each point around the circle
const angleStep = (Math.PI * 2) / numPoints;
// the radius of the circle
const rad = 110;
for (let i = 1; i <= numPoints; i++) {
// x & y coordinates of the current point
const theta = i * angleStep;
const x = 130 + Math.cos(theta) * rad;
const y = 130 + Math.sin(theta) * rad;
// store the point
points.push({
x: x,
y: y,
/* we need to keep a reference to the point's original {x, y} coordinates
for when we modulate the values later */
originX: x,
originY: y,
// more on this in a moment!
noiseOffsetX: Math.random() * 1000,
noiseOffsetY: Math.random() * 1000,
});
}
return points;
}
function map(
n: number,
start1: number,
end1: number,
start2: number,
end2: number,
) {
return ((n - start1) / (end1 - start1)) * (end2 - start2) + start2;
}
const App = () => {
const clock = useClockValue();
const points = useValue(createPoints());
const hueNoiseOffset = useValue(0);
const noise = createNoise2D();
const noiseStep = 0.005;
const animate = () => {
const newPoints = [];
for (let i = 0; i < points.current.length; i++) {
const point = points.current[i];
// return a pseudo random value between -1 / 1 based on this point's current x, y positions in "time"
const nX = noise(point.noiseOffsetX, point.noiseOffsetX);
const nY = noise(point.noiseOffsetY, point.noiseOffsetY);
// map this noise value to a new value, somewhere between it's original location -20 and it's original location + 20
const x = map(nX, -1, 1, point.originX - 20, point.originX + 20);
const y = map(nY, -1, 1, point.originY - 20, point.originY + 20);
// update the point's current coordinates
point.x = x;
point.y = y;
// progress the point's x, y values through "time"
point.noiseOffsetX += noiseStep;
point.noiseOffsetY += noiseStep;
newPoints.push(point);
}
points.current = newPoints;
};
const path = useComputedValue(() => {
animate();
return spline(points.current, 1, true);
}, [clock]);
const colorNoise = useComputedValue(() => {
hueNoiseOffset.current += noiseStep / 2;
const hueNoise = noise(hueNoiseOffset.current, hueNoiseOffset.current);
const newValue = map(hueNoise, -1, 1, 0, 360);
return vec(256, newValue);
}, [clock]);
return (
<SafeAreaView style={styles.container}>
<Canvas style={styles.canvas}>
<Path path={path} color="blue">
<LinearGradient
start={vec(0, 0)}
end={colorNoise}
colors={['green', 'yellow']}
/>
</Path>
</Canvas>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
canvas: {
height: 275,
width: 275,
},
});
export default App;