Top 10 Examples of "dat-gui in functional component" in JavaScript
Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'dat-gui' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
window.addEventListener('resize', fit(canvas), false)
let animating = true
const toggleAnimation = () => { animating = !animating }
const settings = {
particles: 800000,
excitability: 10,
pointWidth: 1,
pullStrength: 2.5,
decay: 2
}
const origSettings = Object.assign({}, settings)
const gui = new GUI()
gui.add(settings, 'particles', 4, 1500000).step(1).listen().onFinishChange(restart)
gui.add(settings, 'excitability', 10, 500).step(10).listen()
// gui.add(settings, 'pointWidth', 0.5, 6).listen()
gui.add(settings, 'pullStrength', 0, 3).step(0.1).listen()
gui.add(settings, 'decay', -10, 10).step(1).listen()
gui.add({ 'start / stop': toggleAnimation }, 'start / stop')
gui.add({ restart }, 'restart')
gui.add({ reset }, 'reset')
window.gui = gui
function reset () {
Object.assign(settings, origSettings)
restart()
}UIModel.prototype.set = function(attr, value) {
var oldValue = this[attr];
this[attr] = value;
this.emit('change', attr, value, oldValue);
this.emit('change:' + attr, value, oldValue);
}
UIModel.prototype.get = function(attr) {
return this[attr];
}
var uiModel = new UIModel();
// GUI
var gui = f1 = new dat.GUI();
var controllers = {};
// display settings
var folders = {};
folders['display'] = gui.addFolder('display settings');
folders['sound'] = gui.addFolder('sound settings');
_.each(settings, function(setting, attr) {
controllers[attr] = folders[setting.folder].add(uiModel, attr, setting.range[0], setting.range[1]);
controllers[attr].onChange(function(value) { uiModel.set(attr, value); })
});
// gui.close();
module.exports = uiModel;BrotJS.prototype.setupGUI = function() {
var self = this;
self.gui = new dat.GUI();
self.gui.add(self, 'addBuddhabrot');
// The 'download' attribute is needed in order to provide a filename
if (featureDetection.downloadAttribute) {
self.gui.add(self, 'saveImage');
}
};Math.cos(rads) * dist + canvasCenter[0],
Math.sin(rads) * dist + canvasCenter[1]
]
return { color, position }
})
const params = Object.assign({}, settings, {
randomFn: rand,
context: ctx,
colors: colors
})
const draw = watercolor(params)
draw()
}
const gui = new GUI()
gui.add(settings, 'colors', 1, 6).step(1).onChange(ctx.setup.bind(ctx))
// gui.add(settings, 'shapePoints', 3, 15).step(1).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'spread', 1, 1000).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'colorSize', 1, 1000).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'deformations', 0, 5).step(1).onChange(ctx.setup.bind(ctx))
// gui.add(settings, 'layers', 1, 200).step(1).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'sigma', 0.5, 3).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'blend', ['lighten', 'darken']).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'mask').onChange(ctx.setup.bind(ctx))
gui.add(settings, 'maskCircles', 1, 500).step(1).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'maskCircleSize', 1, 500).onChange(ctx.setup.bind(ctx))
// gui.add(settings, 'fitToNeighbor', ['min', 'max']).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'randomSeed', 0, 999).step(1).onChange(ctx.setup.bind(ctx))domready(function () {
// create app object
var app = {
renderer: PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, options),
root: new PIXI.DisplayObjectContainer(),
tick: null,
animate: null,
stats: new Stats(),
gui: new DatGui({ load: decodeGuiFromHash() }),
onResize: null,
deltaTime: 0,
lastTime: Date.now()
};
// style stats and add to document
app.stats.domElement.style.position = 'absolute';
app.stats.domElement.style.bottom = '0';
app.stats.domElement.style.right = '0';
document.body.appendChild(app.stats.domElement);
// serialize gui when it changes
app.gui.domElement.addEventListener('click', saveGuiToHash.bind(null, app.gui));
app.gui.domElement.addEventListener('tap', saveGuiToHash.bind(null, app.gui));var createCaption = require('../../dom/caption');
var scene, camera, renderer, mesh;
var videoScene, videoMesh;
var plane, mesh;
var cubes = [];
var object, id;
import CamTexture from "vendors/video-texture/webcam"
import VideoTexture from "vendors/video-texture/video"
var camTexture, videoTexture;
var stats, wrapper;
var videoObj = {
isVideo : false
};
var gui = new dat.GUI();
var videoController = gui.add(videoObj, "isVideo");
videoController.onChange(onVideoChange);
var isAnimation = true;
var videoFiles = {
"mp4" : "assets/video/video.mp4",
"ogv" : "assets/video/video.ogv"
};
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;_hand = new Hand();
_scene.add(_hand);
ground.init();
_scene.add(ground.mesh);
particles.init(_renderer, _hand);
_scene.add(particles.mesh);
_gui = new dat.GUI();
var simulatorGui = _gui.addFolder('Simulator');
simulatorGui.add(settings.query, 'amount', settings.amountList).onChange(function(){
if (confirm('It will restart the demo')) {
window.location.href = window.location.href.split('#')[0] + encode(settings.query).replace('?', '#');
window.location.reload();
}
});
simulatorGui.add(settings, 'gravity', -5, 20);
simulatorGui.add(settings, 'particlesFromY', 0, 500).name('from Y');
simulatorGui.add(settings, 'particlesYDynamicRange', -500, 500).name('y dynamic range');
simulatorGui.add(settings, 'particlesDropRadius', 0, 150).name('drop radius');
simulatorGui.add(settings, 'handBounceRatio', 0, 1).name('hand bounce');
simulatorGui.add(settings, 'handForce', 0, 0.1).name('hand force');
var postprocessingGui = _gui.addFolder('Post-Processing');public build (parentId: string): void {
const parent = $('#' + parentId);
this.element = new dat.GUI({
autoPlace: false
});
this.element.width = parent.width();
parent[0].appendChild(this.element.domElement);
Tools.ImportScript('./css/dat.gui.css');
}function guiSettings (settings, onChange) {
const settingsObj = {}
const gui = new GUI()
css(gui.domElement.parentElement, { zIndex: 11 })
for (let key in settings) {
settingsObj[key] = settings[key][0]
const setting = gui
.add(settingsObj, key, settings[key][1], settings[key][2])
if (settings[key][3]) {
setting.step(settings[key][3])
}
if (settings[key][4]) {
setting.onChange(onChange)
}
}
return settingsObj
}function guiSettings (settings, onChange) {
const settingsObj = {}
const gui = new GUI()
css(gui.domElement.parentElement, { zIndex: 11 })
for (let key in settings) {
settingsObj[key] = settings[key][0]
const setting = gui
.add(settingsObj, key, settings[key][1], settings[key][2])
if (settings[key][3]) {
setting.step(settings[key][3])
}
if (settings[key][4]) {
setting.onChange(onChange)
}
}
return settingsObj
}