arslnb / shapdar Goto Github PK

shapdar is a shape radar kinda thing written with HTML5 and JS.
This project was created after seeing this animation posted by my friend @eugenekolo.
I thought, I bet I could do that.
Then I thought, I bet I could do that, for any arbitrary shape.
Then I did, yeahhhhhhh.

Each component of shapdar is broken into its corresponding .js file and is fairly self documented. This is simply an overview of functionality from each component

All components of shapdar are initialized here and linked to their respective HTML elements.

All animation logic is managed here. Frame rendering is handled using the requestAnimationFrame method which allows for pretty reliable "rendering" of frames at a specified FPS. "Rendering" is handled by calling individual drawing methods for the various components that need to be drawn on the canvas. animation.js also handles most of the interaction and synchronization between different components of shapdar.

All shape interpolation and contour creation is managed here. This is not where the actual drawing occurs, only where the the contour of the shape is populated. All necessary coordinate bookkeeping (and interpolation) happens here.

All components related to the "shape" portion of shapdar are managed here. This includes the user input paintbrush functionality, as well as various drawing modes such as circle, square, and free draw. contour.js is utilized here in order to take a users input drawing and convert it into a renderable canvas shape as well as provide coordinates necessary for various animations. shape.js also performs the calculations and control logic for animations of center point to contour line. animation.js is used here to synchronize the center-to-contour drawing with the corresponding plot animation.

All components related to the "plot" portion of shapdar are managed here. This includes drawing the various plot functions with relation to the shape drawn in the shape.js region. Currently, this supports plotting the the X distance, Y distance, distance from center, and a "bitcrusher" mode (that was accidentally born from a bug, but turned out to be super cool). The contour point (synchronized to shape.js) is determined and added to an array each frame, creating a function vs. time display on each frame render. animation.js is used here to synchronize the plotting function animations with the corresponding shape animation.

• Only works with Chrome
  • Does NOT work with Firefox
  • Has not been tested with any other browser
• Does NOT work with mobile
  • mouseUp/Down/Move events don't really work the same way on mobile I guess