@@ -12,6 +12,7 @@ import {
1212} from "./internal/canvas" ;
1313import {
1414 coordPoint ,
15+ deg ,
1516 distance ,
1617 expandHandle ,
1718 forPoints ,
@@ -173,11 +174,66 @@ addCanvas(
173174 at either of the points.` ;
174175 } ,
175176 ( ctx , width , height , animate ) => {
177+ const angleRange = 30 ;
178+ const lengthRange = 40 ;
179+ const period = 5000 ;
180+ 181+ const r = rand ( "blobs" ) ;
182+ const ra = r ( ) ;
183+ const rb = r ( ) ;
184+ const rc = r ( ) ;
185+ const rd = r ( ) ;
186+ 187+ const wobbleHandle = (
188+ frameTime : number ,
189+ period : number ,
190+ p : Point ,
191+ locked : boolean ,
192+ ) : Point => {
193+ const angleIn =
194+ deg ( p . handleIn . angle ) +
195+ angleRange *
196+ ( 0.5 - calcBouncePercentage ( period * 1.1 , timingFunctions . ease , frameTime ) ) ;
197+ const lengthIn =
198+ p . handleIn . length +
199+ lengthRange *
200+ ( 0.5 - calcBouncePercentage ( period * 0.9 , timingFunctions . ease , frameTime ) ) ;
201+ const angleOut =
202+ deg ( p . handleOut . angle ) +
203+ angleRange *
204+ ( 0.5 - calcBouncePercentage ( period * 0.9 , timingFunctions . ease , frameTime ) ) ;
205+ const lengthOut =
206+ p . handleOut . length +
207+ lengthRange *
208+ ( 0.5 - calcBouncePercentage ( period * 1.1 , timingFunctions . ease , frameTime ) ) ;
209+ return point ( p . x , p . y , angleIn , lengthIn , locked ? angleIn + 180 : angleOut , lengthOut ) ;
210+ } ;
211+ 176212 animate ( ( frameTime ) => {
177- const a = point ( width * 0.5 , height * 0.3 , 230 , 200 , - 50 , 200 ) ;
178- const b = point ( width * 0.8 , height * 0.5 , - 90 , 200 , 90 , 200 ) ;
179- const c = point ( width * 0.5 , height * 0.9 , - 60 , 200 , - 120 , 200 ) ;
180- const d = point ( width * 0.2 , height * 0.5 , 90 , 200 , - 90 , 200 ) ;
213+ const a = wobbleHandle (
214+ frameTime ,
215+ period / 2 + ( ra * period ) / 2 ,
216+ point ( width * 0.5 , height * 0.3 , 230 , 150 , - 50 , 150 ) ,
217+ false ,
218+ ) ;
219+ const b = wobbleHandle (
220+ frameTime ,
221+ period / 2 + ( rb * period ) / 2 ,
222+ point ( width * 0.8 , height * 0.5 , - 90 , 100 , 90 , 100 ) ,
223+ true ,
224+ ) ;
225+ const c = wobbleHandle (
226+ frameTime ,
227+ period / 2 + ( rc * period ) / 2 ,
228+ point ( width * 0.5 , height * 0.9 , - 40 , 150 , - 140 , 150 ) ,
229+ false ,
230+ ) ;
231+ const d = wobbleHandle (
232+ frameTime ,
233+ period / 2 + ( rd * period ) / 2 ,
234+ point ( width * 0.2 , height * 0.5 , 90 , 100 , - 90 , 100 ) ,
235+ true ,
236+ ) ;
181237
182238 drawClosed ( ctx , [ a , b , c , d ] , true ) ;
183239 } ) ;
0 commit comments