-
Notifications
You must be signed in to change notification settings - Fork 4
pSEngine basics
To begin a new project using pSEngine, you can find a template here. If you want to do it manually, you'll need to follow the next few steps.
Firstly, create a basic HTML file containing classic code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YOUR PAGE TITLE</title>
</head>
<body>
</body>
</html>
Then, add a script reference to the pSEngine library with <script type="text/javascript" src="_link_"></script>. For that, you can download and use the last version or use a direct link like https://mecanicascience.github.io/PhysicsSimulationEngine/versions/2.2.0/pSEngine.min.js.
You'll also need to add a reference to the p5.js library. For that, you can download the last version on their website, or use a reference to the 1.0.0 version https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js.
Please note that if you want to use pSEngine Text and TeX writing, you'll also need to import MathJax 3.0 as https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js.
When loaded, pSEngine will try to create a canvas element inside an element with an simulationContent ID. To provide that, just add the following line code to the HTML file inside the <body> elements :
<div id="simulationContent">
</div>
Before starting next part, create a sketch.js and a SObject.js file (you can name them as you want it), and add a reference to them.
The HTML file should be almost the same as the one below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YOUR PAGE TITLE</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script type="text/javascript" src="https://mecanicascience.github.io/PhysicsSimulationEngine/versions/2.2.0/pSEngine.min.js"></script>
</head>
<body>
<div id="simulationContent">
</div>
</body>
</html>When fully loaded, the pSEngine will try to call the function runSimulator(simulator). All of your main code and configuration of the engine should be here. The parameter simulator in the function should be used to set up your own engine configuration, your simulation and animation variables, and add your objects to the scene.
Firstly, lets create the function and use the simulator parameter to change the visible scale of the simulation (in meters) :
// Called when pSEngine is ready
function runSimulator(simulator) {
simulator.setEngineConfig((engineConf) => {
// Change display scale of the screen
engineConf.plotter.scale = {
x: 5,
y: 5,
};
});
}You can find every parameters of the configuration in the engine configuration wiki part.
With pSEngine, every objects in the simulation should be composed as JavaScript classes with a draw(drawer) and an update(dt) function.
class Plot {
constructor() {
// add your class constructor functions and variables here
}
update(dt) { }
draw(drawer) { }
}In the update function, a parameter dt is passed. It contains the time (in seconds) since the last update. This function is called every time as possible, and is only limited by the capabilities of your browser (please note that every dt may change on each function call).
.
pSEngine - Made by MecanicaScience - Official Website : https://pSEngine.mecanicascience.fr/
If you want to help on this wiki and you don't have access to it, feel free to open a new issue or comment one, while describing which page you would like to edit, and what modifications you want to do.