-
Notifications
You must be signed in to change notification settings - Fork 3
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.
First, 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>. To do that, you can download and use the last version or use a direct link like https://psengine.mecanicascience.fr/versions/X.X.X/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. For more informations on how to draw text on the canvas, check this page about Writing Text and TeX content.
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 pSObject.js files (you can name them as you want), and add a reference to them.
The HTML file should be roughly 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>
<script src="sketch.js"></script>
<script src="pSObject.js"></script>
</head>
<body>
<div id="simulationContent">
</div>
</body>
</html>Once fully loaded, the pSEngine will try to call the function runSimulator(simulator). All of your main code and configuration of the engine should be there. 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.
First, lets create this function in sketch.js 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, // horizontal scale is 5 m on right and 5 m on left
y: 5, // vertical scale is 5 m on top and 5 m on bottom
};
});
}You can find all possible parameters of the configuration in the engine configuration wiki page.
With pSEngine, every object in the simulation should be a JavaScript class containing a draw(drawer) and an update(dt) function.
class pSObject {
constructor() {
// add your class constructor functions and variables here
}
update(dt) { }
draw(drawer) { }
}To add this object to the simulation and automatically called draw and update on it, add the line simulator.addObjects(pSObject, 2) inside the runSimulator() function to add 2 pSObject objects to the screen. You can find more informations and the list of addObjects options on the engine configuration wiki page.
In the update function, a parameter dt is passed. It contains the time (in seconds) since the last update. This function is called whenever possible, and is only limited by the capacities of your browser (please note that each dt may change on each function call).
The draw function is called if the time since the last update is greater than '1 / FPS'. You must only draw elements in this function, using the drawer parameter (for more informations about drawing functions, check the drawing wiki page.
Here is an example of a simple pSEngine object moving from the left side of the screen to the right side. It uses the same sketch.js file written above.
class pSObject {
constructor() {
this.pos = new Vector(-5, 0); // Vector is a class implemented by pSEngine
}
update(dt) {
this.pos.x += 0.05 * dt; // speed = 0.05 m/s
}
draw(drawer) {
// Draw a strokeless red filled ellipse of 5 width and height pixels,
// at the current position of the object
drawer
.noStroke()
.fill('red')
.ellipse(this.pos.x, this.pos.y, 5, 5);
}
}You will find more informations on the Vector class in the Custom pSEngine objects wiki page.
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.