Figure 20 #14
Merged
Figure 20 #14
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…nce itself. Fix closest bar function.
…ust scale factor.
… of animation. This allows us to get all bar translations as a single array, given a set of wave center points. We can then use that array to animate all bars to their final positions from one wave center point to another. The hope is that the ripple effect won't reach every single bar.
…damentally wrong approach for the required effect.
Need to memoize all of the wave center points for each possible animation step.
…dles memoization.
…ion in prep to fix jump at animation restart. The idea is to first animate from no peaks -> initial peaks -> final peaks -> no peaks which ensures that the start and end positions of bars are exactly the same.
…another (without travelling).
…-> final peaks -> no waves.
… peaks during an animation.
…whole row by a small amount.
Also use better parameter naming for getting overlap distances.
…y at each transform.
…n mobile. Instead, adjust fig20 caption placement so it doesn't matter.
elisehein
added a commit
that referenced
this pull request
Jun 26, 2021
* Add Unreleased section for next release. * Don't enforce the other when adding a fill/stroke. Make pendulum arm clickability effect more transparent. * Figure 20 (#14) * Add static fig. 20 diagram without waves. * WIP static waves. * Working version of modular scale based distances. * Scale the difference between each next distance, instead of the distance itself. Fix closest bar function. * Calculate all translations only once, define row-to-gap ratio and adjust scale factor. * [Broken] An attempt to add multiple waves to a row. * [Broken] Correctly calculate closest bar index. * [Working] Waves correctly positioned * A different take on positioning the caption and diagram that doesn't match the book. * First animation test. * Refactor fig. 20 bar coordinate calculations in prep for correct type of animation. This allows us to get all bar translations as a single array, given a set of wave center points. We can then use that array to animate all bars to their final positions from one wave center point to another. The hope is that the ripple effect won't reach every single bar. * Save point: a version of the animation that is correct but uses a fundamentally wrong approach for the required effect. * A non-preformant demonstration of the correct animation. Need to memoize all of the wave center points for each possible animation step. * Begin memoization and precalculations. * [Broken] Refactor wave coordinate calculation into own class that handles memoization. * [Working] Fix bugs with refactor. Add simple pointer event binding for testing. * Precalculate row y-s and use them to get thr row index below the pointer. * Reduce number of bars per row to imrove performance. * Try out sporadically adding travelling waves to each row at random intervals. * Offset peaks from each other like in the book on mouseover. * Explicitly define initial and final peaks positions during row animation in prep to fix jump at animation restart. The idea is to first animate from no peaks -> initial peaks -> final peaks -> no peaks which ensures that the start and end positions of bars are exactly the same. * Save point for working version of animating from one set of peaks to another (without travelling). * Animate full wave lifecycle from no waves -> initial peaks -> travel -> final peaks -> no waves. * Simplify bar positioning calculation. * An attempt to sync up the bar positions of the initial and final wave peaks during an animation. * A different attempt to overlap bars between waves by translating the whole row by a small amount. * Precalculate bar overlap compensations and fix calculation. * [YES] Translate extra compensation during travel animation for smoothness; preposition rows for wave animation to avoid initial jump. * Make row animation duration dependent on number of peaks. * In a fifth of cases, animate full original wave pattern in paralle. * Adjust easings and durations. * Check for all animations done and then trigger original wave pattern animation. * Add option to animate wave formation during travel. * Don't include wave formation in original pattern animation. It technically works correctly now, but doesn't look as nice as I imagined. * Add a short delay to each row when animating the original pattern. * Adjust timing and split up wave toggling function. * Fix peaks following pointer by copying original peaks array by value instead of by reference. * Cancel all row animations during mousemove. * Get rid of class prop currentPeaksPerRow. * Refactor: Separate animations logic into own module and import it dynamically. * Separate pointer events listeners into own class. * Add extra translation to sync up rows after peak dissolve. * Add a timeout to waves dissolving when the pointer is in between rows. * Separate row drawing logic into its own class. * Don't trigger wave dissolution when it's already in progress. * Fix lookup key type for checking whether a target is animating. * Pause animations on window blur. * Remove animation pause on window blur. It's triggered a lot more than I thought. * Small refactors and dissolve timing adjustments. * Abstract WavePeaks. * Round initial and final row wave animation peaks to simplify travelling wave translations. This doesn't actually reduce the amount of translations we calculate, but it makes it easier to think about. Fractional values don't matter much here because we always need to getClosestBarIndex anyway, instead of matching the peak exactly to the fractional value. * [WIP] Allow passing in fractionOfWaveFormedBeforeTravel to the wave travel animation, so that it continues forming the wave where it left off. This is in prep for animating wave formation on mouseover. * [WIP] Ditch animating travel & peak formation together, just use animateBetweenTranslations when the pointer enters the SVG. * Begin wave dissolution from current translations. * Remove pointer leaving timeout between rows; the entire svg responds to movement. * Ensure all animations finish at the intended final state. Also use better parameter naming for getting overlap distances. * Increase mouse pointer x coverage. * Fix check to see if pointer position responds to movement. * Add thumbnail. * Simplify translation default value. * Use default linear easing for all wave animations. * Remove unused logic and transfer pointer state management to PointerEvents. * Small tidy-ups and refactors. * Timing for fig.20 caption. * Hide entire caption once int's typed in. Small tidy-ups in SchematicsFigure. * Fix caption underscore taking up space. * Use babel-eslint due to eslint/eslint#11486 * Fix some stylelint issues. * Add forgotten changes to another commit. * Fix typo in condition. * Draw bars with small increasing delay for each row. * Mobile placement. * Ensure the toolbar is fully visible with the addition of fig. 20 * Adjust caption placement. * Instead of width: auto to hide fig. 20 overflow, toggle bars visiblity at each transform. * Revert underscore not taking up space (needed for scrollToVIsible() on mobile. Instead, adjust fig20 caption placement so it doesn't matter. * Adjust figcaption small screens. * Update CHANGELOG. * Disable stylelint for sr-only * Update meta description. * Make footer invisible on small screens on page load to avoid layout shifts. * Dynamically import some modules that are needed for animations. Until I stop loading each full Diagram module to only show the thumbnail, I should at least optimise what gets loaded for drawThumbnail(). * Add will-change properties to figure elements. * Animate translation instead of cx and cy on fig.42 for better performance. * Enforce max line-length of 100. * Use a scale animation for row appearances in fig. 20 * Dynamic imports in DiagramFactory. * Use async/await when importing diagram dependencies. * Delay the importing of more rendering dependencies. * Split line. * Use ease out for animating in fig. 20 rows. * Dynamically import diagram factory in figure previews. * Add Duration convenience initialisers on Number prototype. * Refactor caption elements and update fig. 20 caption handling. (#15) * Make the body bg ever so slightly lighter for increased contrast. * Separate FigureCaption into its own component. This is in preparation of adding a runAdditionalAnimations() method to the caption which is called for each diagram after the caption renders. (Specifically this will be used to hide everything but "fairytale music" on fig. 20) * Instead of fully hiding the caption on fig. 20, hide everything but "fairytale music". This allows the placement to be nicer, too. * Increase fig. 20 row scale in duration. * Update CHANGELOG. * Update CHANGELOG links. * Use CSS transforms for fig. 20 scale animation to fix Safari. * Adjust fig. 20 placement. * Update version.
elisehein
added a commit
that referenced
this pull request
Jun 27, 2021
* Add Unreleased section for next release. * Don't enforce the other when adding a fill/stroke. Make pendulum arm clickability effect more transparent. * Figure 20 (#14) * Add static fig. 20 diagram without waves. * WIP static waves. * Working version of modular scale based distances. * Scale the difference between each next distance, instead of the distance itself. Fix closest bar function. * Calculate all translations only once, define row-to-gap ratio and adjust scale factor. * [Broken] An attempt to add multiple waves to a row. * [Broken] Correctly calculate closest bar index. * [Working] Waves correctly positioned * A different take on positioning the caption and diagram that doesn't match the book. * First animation test. * Refactor fig. 20 bar coordinate calculations in prep for correct type of animation. This allows us to get all bar translations as a single array, given a set of wave center points. We can then use that array to animate all bars to their final positions from one wave center point to another. The hope is that the ripple effect won't reach every single bar. * Save point: a version of the animation that is correct but uses a fundamentally wrong approach for the required effect. * A non-preformant demonstration of the correct animation. Need to memoize all of the wave center points for each possible animation step. * Begin memoization and precalculations. * [Broken] Refactor wave coordinate calculation into own class that handles memoization. * [Working] Fix bugs with refactor. Add simple pointer event binding for testing. * Precalculate row y-s and use them to get thr row index below the pointer. * Reduce number of bars per row to imrove performance. * Try out sporadically adding travelling waves to each row at random intervals. * Offset peaks from each other like in the book on mouseover. * Explicitly define initial and final peaks positions during row animation in prep to fix jump at animation restart. The idea is to first animate from no peaks -> initial peaks -> final peaks -> no peaks which ensures that the start and end positions of bars are exactly the same. * Save point for working version of animating from one set of peaks to another (without travelling). * Animate full wave lifecycle from no waves -> initial peaks -> travel -> final peaks -> no waves. * Simplify bar positioning calculation. * An attempt to sync up the bar positions of the initial and final wave peaks during an animation. * A different attempt to overlap bars between waves by translating the whole row by a small amount. * Precalculate bar overlap compensations and fix calculation. * [YES] Translate extra compensation during travel animation for smoothness; preposition rows for wave animation to avoid initial jump. * Make row animation duration dependent on number of peaks. * In a fifth of cases, animate full original wave pattern in paralle. * Adjust easings and durations. * Check for all animations done and then trigger original wave pattern animation. * Add option to animate wave formation during travel. * Don't include wave formation in original pattern animation. It technically works correctly now, but doesn't look as nice as I imagined. * Add a short delay to each row when animating the original pattern. * Adjust timing and split up wave toggling function. * Fix peaks following pointer by copying original peaks array by value instead of by reference. * Cancel all row animations during mousemove. * Get rid of class prop currentPeaksPerRow. * Refactor: Separate animations logic into own module and import it dynamically. * Separate pointer events listeners into own class. * Add extra translation to sync up rows after peak dissolve. * Add a timeout to waves dissolving when the pointer is in between rows. * Separate row drawing logic into its own class. * Don't trigger wave dissolution when it's already in progress. * Fix lookup key type for checking whether a target is animating. * Pause animations on window blur. * Remove animation pause on window blur. It's triggered a lot more than I thought. * Small refactors and dissolve timing adjustments. * Abstract WavePeaks. * Round initial and final row wave animation peaks to simplify travelling wave translations. This doesn't actually reduce the amount of translations we calculate, but it makes it easier to think about. Fractional values don't matter much here because we always need to getClosestBarIndex anyway, instead of matching the peak exactly to the fractional value. * [WIP] Allow passing in fractionOfWaveFormedBeforeTravel to the wave travel animation, so that it continues forming the wave where it left off. This is in prep for animating wave formation on mouseover. * [WIP] Ditch animating travel & peak formation together, just use animateBetweenTranslations when the pointer enters the SVG. * Begin wave dissolution from current translations. * Remove pointer leaving timeout between rows; the entire svg responds to movement. * Ensure all animations finish at the intended final state. Also use better parameter naming for getting overlap distances. * Increase mouse pointer x coverage. * Fix check to see if pointer position responds to movement. * Add thumbnail. * Simplify translation default value. * Use default linear easing for all wave animations. * Remove unused logic and transfer pointer state management to PointerEvents. * Small tidy-ups and refactors. * Timing for fig.20 caption. * Hide entire caption once int's typed in. Small tidy-ups in SchematicsFigure. * Fix caption underscore taking up space. * Use babel-eslint due to eslint/eslint#11486 * Fix some stylelint issues. * Add forgotten changes to another commit. * Fix typo in condition. * Draw bars with small increasing delay for each row. * Mobile placement. * Ensure the toolbar is fully visible with the addition of fig. 20 * Adjust caption placement. * Instead of width: auto to hide fig. 20 overflow, toggle bars visiblity at each transform. * Revert underscore not taking up space (needed for scrollToVIsible() on mobile. Instead, adjust fig20 caption placement so it doesn't matter. * Adjust figcaption small screens. * Update CHANGELOG. * Disable stylelint for sr-only * Update meta description. * Make footer invisible on small screens on page load to avoid layout shifts. * Dynamically import some modules that are needed for animations. Until I stop loading each full Diagram module to only show the thumbnail, I should at least optimise what gets loaded for drawThumbnail(). * Add will-change properties to figure elements. * Animate translation instead of cx and cy on fig.42 for better performance. * Enforce max line-length of 100. * Use a scale animation for row appearances in fig. 20 * Dynamic imports in DiagramFactory. * Use async/await when importing diagram dependencies. * Delay the importing of more rendering dependencies. * Split line. * Use ease out for animating in fig. 20 rows. * Dynamically import diagram factory in figure previews. * Add Duration convenience initialisers on Number prototype. * Refactor caption elements and update fig. 20 caption handling. (#15) * Make the body bg ever so slightly lighter for increased contrast. * Separate FigureCaption into its own component. This is in preparation of adding a runAdditionalAnimations() method to the caption which is called for each diagram after the caption renders. (Specifically this will be used to hide everything but "fairytale music" on fig. 20) * Instead of fully hiding the caption on fig. 20, hide everything but "fairytale music". This allows the placement to be nicer, too. * Increase fig. 20 row scale in duration. * Update CHANGELOG. * Update CHANGELOG links. * Use CSS transforms for fig. 20 scale animation to fix Safari. * Adjust fig. 20 placement. * Update version. * Add structure to the README and about page. * Disable selection on schematics-ficure.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.