The deployed example is available here.
The SDF-2D library can be found on GitHub and NPM as well.
Simply clone the repository and open index.html.
- Install Node.js
- Run
npm install - Run
npx webpack - Open index.html
A tutorial for installing Webpack is also included below, for more information about Webpack visit their getting started page.
-
Install Node.js
-
Create a directory called
sdf-2d-exampleand open a terminal inside it -
Run the following commands
npm init -y npm install webpack webpack-cli sdf-2d --save-dev
-
Create a directory called
src, and a new file inside of it namedindex.html -
Copy the following code into
sdf-2d-example/dist/index.html<!DOCTYPE html> <html> <body> <canvas width="600" height="300"></canvas> <script src="main.js"></script> </body> </html>
-
Create a directory called
src, and a new file inside of it namedindex.js -
Copy the following code into
sdf-2d-example/src/index.jsimport { compile, CircleFactory, hsl, CircleLight } from "sdf-2d"; const main = async () => { // Create a new Drawable class // This has a fixed color given by the hue-saturation-lightness values, // but it could also be changed even during runtime. const Circle = CircleFactory(hsl(30, 66, 100)); // Get a reference to the canvas element on the HTML page const canvas = document.querySelector("canvas"); // Create a renderer and wait for it to compile the required shaders const renderer = await compile(canvas, [ Circle.descriptor, CircleLight.descriptor, ]); // Schedule a new circle to be drawn // Objects can be drawn multiple times renderer.addDrawable(new Circle([200, 200], 50)); // Schedule a new light to be drawn // An ambient light is always present unless turned of renderer.addDrawable(new CircleLight([500, 300], [1, 0.5, 0], 0.5)); // Up until now, nothing has been draw renderer.renderDrawables(); // The scene is now visible on the canvas }; main();
-
Inside
sdf-2d-example, execute the commandnpx webpack, this will generate a new file in yourdistfolder. -
You're finished, open
sdf-2d-example/dist/index.html
For a more complex example visit this repository.