One of the most common diagrams that particle physicists use are Feynman diagrams. There are already a few tools that can be used to make them, but they usually have some significant drawback (including non-intuitive interface, poor quality graphics, lack of control over the final image, text only input.) This is a drag and drop style Feynman diagram maker aimed at making creation of the diagrams as quick and simple as possible. This is quite an advanced project with lots of scope for further development.

Links

Live page
GitHub repository

Overview

The user clicks and drags to create elements on an HTML canvas. These elements can be simply written to an image file. In order to create symbols, MathJax is used to interpret LaTeX snippets. When the user clicks on a symbol an SVG image is used to capture the element graphically and then this is written to a canvas. (Often a symbol is used several times in one diagram, so saving to an intermediate canvas saves CPU time and memory.) This canvas is then copied to the larger canvas when the user clicks on it.

Challenges

Challenge: The application requires the user to be able to interact with the mouse, requiring careful managing of event listeners.

Solution: The interactions are handled using the mousedown, mousemove, mouseup, and mouseout to handle the interacations, and a variable current_brush keeps track of the current action and (for a many step interaction) the current step. (Resolved)

Challenge: It’s necessary to be able to add different symbols.

Solution: Adding a symbol to the canvas is not a simple procedure. MathJax can be use to take a snippet of LaTeX and lay it out on the page in an attractive manner, similar to LaTeX. In order to import this to a canvas it must be first imported to an SVG object, and then imported to a canvas. By using MathJax it is possible to allow the user to create their own symbols. In addition, a selection of preset symbols are defined. By using SVG in Chrome and Safari the security limitations make it impossible to export the pixel data from the canvas. (Resolved, to be revisited)

Challenge: The application to be user friendly and intuitive.

Solution: Alpha teseting shows most of the existing features to be quite intuitive. However documentation and video tutorials would be very useful. (Resolved, to be revisited)

Challenges

Challenge: The application requires the user to be able to interact with the mouse, requiring careful managing of event listeners.

Solution: The interactions are handled using the mousedown, mousemove, mouseup, and mouseout to handle the interacations, and a variable current_brush keeps track of the current action and (for a many step interaction) the current step. (Resolved)

Challenge: It’s necessary to be able to add different symbols.

Solution: Adding a symbol to the canvas is not a simple procedure. MathJax can be use to take a snippet of LaTeX and lay it out on the page in an attractive manner, similar to LaTeX. In order to import this to a canvas it must be first imported to an SVG object, and then imported to a canvas. By using MathJax it is possible to allow the user to create their own symbols. In addition, a selection of preset symbols are defined. By using SVG in Chrome and Safari the security limitations make it impossible to export the pixel data from the canvas. (Resolved, to be revisited)

Challenge: The application to be user friendly and intuitive.

Solution: Alpha teseting shows most of the existing features to be quite intuitive. However documentation and video tutorials would be very useful. (Resolved, to be revisited)

Sample outputs