文件列表:

.idea/ (0, 2021-05-12)
.idea/ThePhysicsHub.iml (281, 2021-05-12)
.idea/codeStyles/ (0, 2021-05-12)
.idea/codeStyles/codeStyleConfig.xml (149, 2021-05-12)
.idea/inspectionProfiles/ (0, 2021-05-12)
.idea/inspectionProfiles/Project_Default.xml (990, 2021-05-12)
.idea/misc.xml (174, 2021-05-12)
.idea/modules.xml (278, 2021-05-12)
.idea/vcs.xml (180, 2021-05-12)
CODE_OF_CONDUCT.md (3354, 2021-05-12)
CONTRIBUTING.md (3481, 2021-05-12)
LICENSE (35149, 2021-05-12)
UsefulSketches/ (0, 2021-05-12)
UsefulSketches/draggableGridWithCollisionDetection.js (13264, 2021-05-12)
UsefulSketches/draggable_body_class.js (3269, 2021-05-12)
UsefulSketches/flow_field_example.js (1740, 2021-05-12)
addSimulation.py (2433, 2021-05-12)
app.js (2116, 2021-05-12)
bin/ (0, 2021-05-12)
bin/www (1596, 2021-05-12)
images/ (0, 2021-05-12)
images/ui1.png (34311, 2021-05-12)
images/ui2.png (50886, 2021-05-12)
package-lock.json (24435, 2021-05-12)
package.json (400, 2021-05-12)
public/ (0, 2021-05-12)
public/images/ (0, 2021-05-12)
public/images/background.png (1165608, 2021-05-12)
public/images/backgroundpurple.jpg (110184, 2021-05-12)
public/images/collision.png (200745, 2021-05-12)
public/images/coupledPendulum.png (49018, 2021-05-12)
... ...

# The Physics Hub The Physics Hub is a website built by physics enthusiasts from a range of backgrounds, serving as a place to view high school/undergraduate university-level physics simulations. The simulations are currently written using the javascript library [p5.js](https://p5js.org/). Everybody is welcome to contribute, no matter whether you're a beginner or an expert. ### Project Setup The website is based on ExpressJS. The Node Package Manager [(npm)](https://www.npmjs.com/) will thus install most of the dependencies for you. 1. Install [NodeJS](https://nodejs.dev/) 2. In a terminal, run `npm install` to automatically install the necessary node modules ### Instructions to add simulations to the website To simplify the process of adding simulations, we wrote a python script that automates the grunt work. 0. Run `npm install` in terminal 1. If any p5.dom elements are being used, add \.parent("simwrapper") in your js file (including the main canvas). 2. Add your simulation file (p5 code) to /public/javascripts/ 3. Add your simulationdata in JSON to /routes/parameters/simulationdata.js 4. Run `python addSimulation.py` in a terminal, type in a urlName and a routerName **Naming convention**: the urlName should match the name of your simulation file (e.g. single_pendulum)! The routerName must be written in camelCase (e.g. singlePendulumRouter)! ### Forking simulations over a single page Instead of setting up the whole site, there exists an easier way, building over a single HTML page and .js, if one wishes to only build a new simulation forking existing ones. 1. For simplicity, you may download the source HTML directly from, for example, view-source:https://physicshub.herokuapp.com/simulations/simplePendulum 2. Download most of the javascript and css from this github ThePhysicsHub/public/... **Caution: Linking to github directly would not work as it is not a CDN (i.e. protected) 3. If the simulation does not show up locally, you may change the css and the js source link from relative to direct. i.e. `` 4. You may wish to change the links in sim.css if formats do not show up fully. 5. If you have the physics knowledge but not so much in javascript or programming, one can attempt to fork on the simulation simplePendulum.js. It is well documented and it is possible to start simulating something very simple just by imitating the formats. ### Adding a simulation's theory section To give those interested in the simulations on this webpage further insight into the physics and mathematics involved in the observed phenomena, we're aiming to add a theory section to each simulation. To add a theory section for a simulation, open a new .ejs file in /routes/parameters, and write the HTML displaying your explanations in there. For displaying maths formulas, make use of the package [mathjax](https://www.mathjax.org/). When your theory section is finished, reference it in /routes/parameters by adding a new attribute to the corresponding simulation JSON object using the getFile() method ("explanation": getFile("") ). ### Design template for simulations >This portion provides a general template for the UI to be followed with some flexibility based on the simulation's specifics. The UI is meant to be clean, with minimal interactive elements visible on startup. The suggested tools to be used for creating input/sliders/buttons are either the [*p5.gui*](https://github.com/bitcraftlab/p5.gui) library or Pedro's custom-built [*dropdownFunctions.js*](https://github.com/ThePhysHub/ThePhysicsHub/blob/master/public/javascripts/libraries/dropdownFunctions.js) file. The UI should look something as given below, with the parameter options available to the right, and the simulation window to the left, following a minimal grey-scale theme.   **The general layering of canvas is as follows:** * **bgCanvas**: The overall container canvas, holding all other layers, and the dropdown menu on the right. * **simCanvas**: The simulation window on the left, occupying all of *bgCanvas* except what is occupied by the dropdown menu. * **plotCanvas**: The plotting window inside *simCanvas*, it can occupy any position and size depending on the simulation. This layer must have a visibility toggle in the menu. Specific to the simulation, *simCanvas* and *plotCanvas* can be resized as the user toggles the visibility. Plotting can be done using [*grafica.js*]( https://github.com/jagracar/grafica.js?files=1) or a custom lightweight plotter if any. * **Other layers**: Further layers can be added over the above mentioned, as per necessity. For instance, the static grid in the image was on a separate buffer, *gridCanvas*. The code given below is a sample to recreate the UI shown above. (it uses Pedro's dropdown file, the documentation for which can be found in the same file.) ``` let W = 1200 //width of bgCanvas let H = 500 //height of bgCanvas let Wsim = W * 0.69 let Hsim = H let Wplot = 0.25 * W let Hplot = 0.875 * H let bgCanvas, simCanvas, plotCanvas; function setup() { bgCanvas = createCanvas(W, H) simCanvas = createGraphics(Wsim, Hsim) plotCanvas = createGraphics(Wplot, Hplot) plotCanvas.background(20) plotCanvas.stroke(255) plotCanvas.strokeWeight(3) plotCanvas.noFill() plotCanvas.rect(0, 0, Wplot, Hplot) ... } function draw(){ //border of simCanvas simCanvas.clear() simCanvas.stroke(255) simCanvas.strokeWeight(2) simCanvas.noFill() simCanvas.rect(10, 10, Wsim - 20, Hsim - 20) //sim canvas image(simCanvas, 0, 0); //plot canvas toggle if (plotCheckbox.checked) { ... image(plotCanvas, Wsim - Wplot - 30, 30) } ... } ```

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：