greg/Spazer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use dat gui library

Browse Source
This commit is contained in:
Greg Shuflin 2023-10-24 00:26:02 -07:00
parent c46c60c904
commit 79ea2537cc
2 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/orbital-trails/app.js
View File

@ -9,6 +9,19 @@ canvas.width = cw * dpr;
canvas.height = ch * dpr; canvas.height = ch * dpr;
ctx.scale(dpr, dpr); ctx.scale(dpr, dpr);
const stats = {
total: 0
};
const options = {
speed: 65,
scale: 1.0,
};
const Orb = (x, y) => {
};
const orbs = []; const orbs = [];
const createOrb = (mx, my) => { const createOrb = (mx, my) => {
@ -33,3 +46,13 @@ const loop = (timestamp) => {
}; };
loop(); loop();
const controls = new dat.GUI( { autoPlace: false } )
const container = document.querySelector("#controlPanel");
controls.add(stats, "total" ).name( "Total Placed" ).listen();
controls.add(options, "speed" ).min(-300).max(300).step(1).name("Speed");
controls.add(options, "scale" ).min(0.5).max(5).step(0.001).name("Scale");
container.appendChild(controls.domElement);

2
src/orbital-trails/index.html
View File

@ -4,6 +4,8 @@
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>Orbital Trails</title> <title>Orbital Trails</title>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script src="https://rawgithub.com/soulwire/sketch.js/master/js/sketch.min.js"></script>
<script type="module" src="app.js"></script> <script type="module" src="app.js"></script>
</head> </head>
<body> <body>