artinlines / rotating-rectangles-animation Goto Github PK

Clicking the reset button leaves the values of the sliders unchanged. The best way to fix this would probably be by chaining their logic together, which would entail rewriting how the siders are created

Disabled buttons with the .btn class look exactly the same as enabled buttons currently. This is a problem, as it doesn't show the user when they can download a gif and when not

Currently, there is only one function, that resets the animation when called. Several of the features here would be easier to implement and even the current code might get easier to read by turning the animate() function into some sort of object with different methods attached to it.

Add a button or something of the sort to let the user switch between stroking and filling rectangles with colors. This would probably only work, if you could change the color of each individual inner rectangle.

Use modules to clean up the code over several files. See export and import

Should force all rectangles to be squares instead.

Make it optional to make a gif and let the user otherwise just watch their creation unfold in the canvas

Add color inputs to change the background color of the canvas and the stroke color for inner rectangles

This would allow the user to create a gif of variable size (not boound by screen width). It would also allow to calculate all frames without delays set by an interval and wouldn't have to be restarted on resize events.

If the stored gifs were categorized by the options chosen for them, that might allow the client to query the server for the current options and only create a new gif in case there is no gif with the specified options on the server yet

Originally posted by @ArtInLines in #8 (comment)

The layout of the sliders with the text and label just looks horrible. This needs to be changed

Allow the user change the angle increase by some factor for inner rectangles.

The idea is that rectangles should be allowed to spin faster/slower based on user input. How exactly this could be implemented, I am unsure of right now still.

This would entail changing how the animation currently works and especially recognizing when the animation is finished.

Add a button to reset all animations options to its default. Make sure that the width & height stay fitting to the current canvas size though.

"Gif was aborted" is not a useful information in and of itself for the user. Rather tell the user that a new gif is being worked on. Maybe something "New gif is being created" or something like that

Let the user download the produced gif

When aborting the animation, the resulting gif ends up very wrong.

Either make the whole website dark themed or add a dark theme possibility