Use dat gui library
This commit is contained in:
parent
c46c60c904
commit
79ea2537cc
@ -9,6 +9,19 @@ canvas.width = cw * dpr;
|
||||
canvas.height = ch * dpr;
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
const stats = {
|
||||
total: 0
|
||||
};
|
||||
const options = {
|
||||
speed: 65,
|
||||
scale: 1.0,
|
||||
};
|
||||
|
||||
const Orb = (x, y) => {
|
||||
|
||||
|
||||
};
|
||||
|
||||
const orbs = [];
|
||||
|
||||
const createOrb = (mx, my) => {
|
||||
@ -33,3 +46,13 @@ const loop = (timestamp) => {
|
||||
};
|
||||
|
||||
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);
|
||||
|
@ -4,6 +4,8 @@
|
||||
<meta charset="utf-8"/>
|
||||
<title>Orbital Trails</title>
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
Loading…
Reference in New Issue
Block a user