Feature: Implement p5 workflow

[mayan-000]

Description

This PR adds the logic of creating a new workflow for p5 by introducing a framework over p5.
This PR is the first batch of work, more PRs containing code are coming.

Relevant Technical Choices

This PR contains four classes, Main, 'Figure, Group, and Animator` (subject to name change in the future).

• Main Class

  • This class contains the entry point of the program.
    • It creates an instance of the p5 library and is set up with the required callbacks.
    • init method is called to initialize the p5, with setup, draw, and other event handler methods.
    • The setup function initializes the canvas and other required variables.
    • The draw function is called in a loop to draw the animation, where two queues are used for rendering, and each rendered object is stored in a snapshot if the throw value is false/unset.
      • stepsQueue contains the components' objects to be rendered with delay, taking the first object from the queue and rendering it in the next delayed frame.
        • For Group and Animator, special Queues are named groupStepsQueue and animatorStepsQueue respectively.
        • groupStepsQueue contains the components' objects to be rendered as a group in the next delayed frame. (Eg. Box and Text together)
          • Whenever the first object in the stepsQueue is a Group, the groupStepsQueue is used to render the group components, and the same number of objects are removed from the stepsQueue.
        • animatorStepsQueue contains the components' objects to be rendered as an animation in the next frame. (Eg. Rendering box and then text in the next delayed frame)
          • Whenever the first object in the stepsQueue is an Animator, the animatorStepsQueue is used to render the animator components(can be Figure or Group) and the same number of objects are removed from the stepsQueue and groupStepsQueue respectively.
      • instantQueue contains the components' objects to be rendered instantly in the next frame.
        • For Group and Animator, special Queues are named groupInstantQueue and animatorInstantQueue respectively.
        • groupInstantQueue contains the components' objects to be rendered as a group in the next frame. (Eg. Box and Text together)
          • Whenever the first object in the instantQueue is a Group, the groupInstantQueue is used to render the group components, and the same number of objects are removed from the instantQueue.
        • animatorInstantQueue contains the components' objects to be rendered as an animation in the next frame. (Eg. Rendering box and then text in the next frame)
          • Whenever the first object in the instantQueue is an Animator, the animatorInstantQueue is used to render the animator components(can be Figure or Group) and the same number of objects are removed from the instantQueue and groupInstantQueue respectively.
    • The snapshot variable is used to store the rendered components till now.
      • Snapshot can be used to render the components instantly, without any delay whenever redrawing is required.
      • Group and Animator are stored in separate arrays named groupSnapshot and animatorSnapshot respectively.
    • The reDrawAll function is used to redraw all the components instantly. It is called on the snapshot and each stored object is pushed to the instant queue for rendering.
    • The onHover function is used to check if the mouse is hovering over any figure or group.
      • If the mouse is hovering over any figure or group, the onHover function is called on that figure or group.
      • If the mouse is not hovering over any figure or group, the onLeave function is called.
    • The onMousePressed function is used to check if the mouse is pressed over any figure or group.
      • If the mouse is pressed over any figure or group, the onMousePressed function is called on that figure or group.
    • The addFigure function is used to add a figure to the (stepsQueue || instantQueue) based on the instant param of the callback.
    • addGroup function is used to add a group to the (stepsQueue || instantQueue) and (groupStepsQueue || groupInstantQueue) based on the instant param of the callback.
    • The addAnimator function is used to add an animator to the (stepsQueue || instantQueue) and (groupStepsQueue || groupInstantQueue) and (animatorStepsQueue || animatorInstantQueue) based on instant param of the callback.

• Figure Class

  • This is an abstract class, which is used to extend the properties and methods of the figure.
  • Figure class contains the properties and methods which are common to all the figures, like x, y, stroke, fill, onClick, onHover, onLeave, etc.
  • Each Figure object when created is initialized with a unique ID.
  • A Figure object can be a part of a group or an animator, with gid and aid set respectively.
  • abstract methods like draw, onHover, onLeave, and onClick are present in the Figure class, which are implemented in the child classes, eg. Box, Text, etc.

• Group Class

  • This class is used to group the figures so that they can be rendered together as one.
  • Each Group object when created is initialized with a unique ID and the figures are set with the gid of the group.
  • The draw method is implemented in the Group class, which is used to render the group of figures at once.
  • onHover, onLeave, and onClick methods are implemented in the Group class, which are used to call the respective methods of the figures in the group altogether.

• Animator Class

  • This class is used to render the figures or groups in a sequence, with a delay.
  • Each Animator object when created is initialized with a unique ID and the figures or groups are set with the aid of the animator.
    The draw method is implemented in the Animator class, which is used to take the current index of the figures or groups to be rendered render them, and increment the index for the next frame.
    • If the current index is less than the total number of figures or groups, the next figure or group is rendered on the next draw call, otherwise, the animator returns true, resetting the index to zero, to indicate that the animation is completed.

Testing Instructions

Additional Information:

Screenshot/Screencast

---

Checklist

• I have thoroughly tested this code to the best of my abilities.
• I have reviewed the code myself before requesting a review.
• This code is covered by unit tests to verify that it works as intended.
• The QA of this PR is done by a member of the QA team (to be checked by QA).

Fixes #857

[mohdsayed]

Looks great ❤️, just few comments to address.