-
Notifications
You must be signed in to change notification settings - Fork 34
Amination
Whenever a sound occurs, we draw a visual by two.js, and animate it by tween.js.
Setup the array named animation to store animations/animations set with parameters, which would be used by Two and Tween.
When changeSequencerAnimations is triggered, we reset two and pass the new currentSequencerAnimationsIndex to setSequencerAnimations.
Map the played key to its matching animation index by animationKey2IndexMapping, then pass it to trigger the animation.
Pass the indexes of clicked elements in the played column to triggerSequencerAnimation.
Calculate the current window size, draw shapes and color them by two.js methods, or import images.
By tween.js methods, we use aniIn to describe the entering movement of the above-mentioned visual, and aniOut for exiting movement.
We listen on window size changing by react-window-resize-listener. Whenever the new window size is passed in, we modify the size of visuals as well as the canvas.
.start() of an animation invokes the aniIn.start() within. The visual is drawn and its parameters update smoothly, animating it. aniOut() is included in aniIn() so it would be triggered consequently.
Send a boolean value to turn on Naruto mode, which pass new currentSampleIndex to loadSamples() and new currentKeyAnimationsIndex to both setSequencerAnimations() and setKeyAnimation().
Beact by Vibert, Joey, Scya, 2017