mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-05-11 20:18:20 +02:00
New way to do two-way bindings between dynamically created GUI and in-world object properties. Uses partcile system properties, specifically.
This commit is contained in:
James B. Pollack
parent
a49c4756dd
commit
57aca0c418
6 changed files with 2085 additions and 0 deletions
95
examples/particle_explorer/dat.gui.min.js
vendored
Normal file
95
examples/particle_explorer/dat.gui.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
34
examples/particle_explorer/index.html
Normal file
34
examples/particle_explorer/index.html
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
<!--
|
||||||
|
// main.js
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// Created by James B. Pollack @imgntnon 9/26/2015
|
||||||
|
// Copyright 2014 High Fidelity, Inc.
|
||||||
|
//
|
||||||
|
// Web app side of the App - contains GUI.
|
||||||
|
// Quickly edit the aesthetics of a particle system. This is an example of a new, easy way to do two way bindings between dynamically created GUI and in-world entities.
|
||||||
|
//
|
||||||
|
// Distributed under the Apache License, Version 2.0.
|
||||||
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||||
|
//
|
||||||
|
// todo: folders, color pickers, animation settings, scale gui width with window resizing
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script type="text/javascript" src="dat.gui.min.js"></script>
|
||||||
|
<script type="text/javascript" src="underscore-min.js"></script>
|
||||||
|
<script type="text/javascript" src="main.js"></script>
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
#my-gui-container{
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="my-gui-container">
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
170
examples/particle_explorer/main.js
Normal file
170
examples/particle_explorer/main.js
Normal file
|
|
@ -0,0 +1,170 @@
|
||||||
|
//
|
||||||
|
// main.js
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// Created by James B. Pollack @imgntnon 9/26/2015
|
||||||
|
// Copyright 2014 High Fidelity, Inc.
|
||||||
|
//
|
||||||
|
// Web app side of the App - contains GUI.
|
||||||
|
// Quickly edit the aesthetics of a particle system. This is an example of a new, easy way to do two way bindings between dynamically created GUI and in-world entities.
|
||||||
|
//
|
||||||
|
// Distributed under the Apache License, Version 2.0.
|
||||||
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||||
|
//
|
||||||
|
// todo: folders, color pickers, animation settings, scale gui width with window resizing
|
||||||
|
//
|
||||||
|
|
||||||
|
var PI = 3.141593,
|
||||||
|
DEG_TO_RAD = PI / 180.0;
|
||||||
|
|
||||||
|
function radiansToDegrees(radians) {
|
||||||
|
return radians * (180 / PI)
|
||||||
|
}
|
||||||
|
|
||||||
|
// need to add '_group' to the end of properties that will need to be made part of a group on the backend
|
||||||
|
// property_subproperty_group = value
|
||||||
|
// i.e. color_red_group = 0;
|
||||||
|
|
||||||
|
var ParticleExplorer = function() {
|
||||||
|
this.animationIsPlaying = true;
|
||||||
|
this.textures = "https://hifi-public.s3.amazonaws.com/alan/Particles/Particle-Sprite-Smoke-1.png";
|
||||||
|
this.lifespan = 5.0;
|
||||||
|
this.visible = false;
|
||||||
|
this.locked = false;
|
||||||
|
this.lifetime = 3600 // 1 hour; just in case
|
||||||
|
this.accelerationSpread_x_group = 0.1;
|
||||||
|
this.accelerationSpread_y_group = 0.1;
|
||||||
|
this.accelerationSpread_z_group = 0.1;
|
||||||
|
this.alpha = 0.5;
|
||||||
|
this.alphaStart = 1.0;
|
||||||
|
this.alphaFinish = 0.1;
|
||||||
|
this.color_red_group = 0;
|
||||||
|
this.color_green_group = 0;
|
||||||
|
this.color_blue_group = 0;
|
||||||
|
this.colorSpread_red_group = 0;
|
||||||
|
this.colorSpread_green_group = 0;
|
||||||
|
this.colorSpread_blue_group = 0;
|
||||||
|
this.colorStart_red_group = 0;
|
||||||
|
this.colorStart_green_group = 0;
|
||||||
|
this.colorStart_blue_group = 0;
|
||||||
|
this.colorFinish_red_group = 0;
|
||||||
|
this.colorFinish_green_group = 0;
|
||||||
|
this.colorFinish_blue_group = 0;
|
||||||
|
this.azimuthStart = -PI / 2.0;
|
||||||
|
this.azimuthFinish = PI / 2.0;
|
||||||
|
this.emitAccceleration_x_group = 0.01;
|
||||||
|
this.emitAccceleration_y_group = 0.01;
|
||||||
|
this.emitAccceleration_z_group = 0.01;
|
||||||
|
this.emitDimensions_x_group = 0.01;
|
||||||
|
this.emitDimensions_y_group = 0.01;
|
||||||
|
this.emitDimensions_z_group = 0.01;
|
||||||
|
this.emitOrientation_x_group = 0.01;
|
||||||
|
this.emitOrientation_y_group = 0.01;
|
||||||
|
this.emitOrientation_z_group = 0.01;
|
||||||
|
this.emitOrientation_w_group = 0.01;
|
||||||
|
this.emitRate = 0.1;
|
||||||
|
this.emitSpeed = 0.1;
|
||||||
|
this.polarStart = 0.01;
|
||||||
|
this.polarFinish = 2.0 * DEG_TO_RAD;
|
||||||
|
this.speedSpread = 0.1;
|
||||||
|
this.radiusSpread = 0.035;
|
||||||
|
this.radiusStart = 0.0;
|
||||||
|
this.radiusFinish = 0.0;
|
||||||
|
this.velocitySpread = 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//we need a way to keep track of our gui controllers
|
||||||
|
var controllers = [];
|
||||||
|
window.onload = function() {
|
||||||
|
|
||||||
|
//instantiate our object
|
||||||
|
var particleExplorer = new ParticleExplorer();
|
||||||
|
|
||||||
|
//whether or not to autoplace
|
||||||
|
var gui = new dat.GUI({
|
||||||
|
autoPlace: false
|
||||||
|
});
|
||||||
|
|
||||||
|
//if not autoplacing, put gui in a custom container
|
||||||
|
if (gui.autoPlace === false) {
|
||||||
|
|
||||||
|
var customContainer = document.getElementById('my-gui-container');
|
||||||
|
customContainer.appendChild(gui.domElement);
|
||||||
|
gui.width = 400;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//add save settings ability (try not to use localstorage)
|
||||||
|
gui.remember(particleExplorer);
|
||||||
|
|
||||||
|
//get object keys
|
||||||
|
var particleKeys = _.keys(particleExplorer);
|
||||||
|
|
||||||
|
//for each key...
|
||||||
|
_.each(particleKeys, function(key) {
|
||||||
|
//add this key as a controller to the gui
|
||||||
|
var controller = gui.add(particleExplorer, key);
|
||||||
|
if (key.indexOf('_group') > -1) {
|
||||||
|
controller.shouldGroup = true;
|
||||||
|
} else {
|
||||||
|
controller.shouldGroup = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//keep track of our controller
|
||||||
|
controllers.push(controller);
|
||||||
|
|
||||||
|
//hook into change events for this gui controller
|
||||||
|
controller.onChange(function(value) {
|
||||||
|
// Fires on every change, drag, keypress, etc.
|
||||||
|
// writeDataToInterface(this.property, value, this.shouldGroup)
|
||||||
|
});
|
||||||
|
|
||||||
|
controller.onFinishChange(function(value) {
|
||||||
|
console.log('should group?', controller.shouldGroup)
|
||||||
|
// Fires when a controller loses focus.
|
||||||
|
writeDataToInterface(this.property, value, this.shouldGroup)
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
function writeDataToInterface(property, value, shouldGroup) {
|
||||||
|
console.log('shouldgrouppppp', shouldGroup)
|
||||||
|
var group = null;
|
||||||
|
var groupProperty = null;
|
||||||
|
var groupProperties = null;
|
||||||
|
if (shouldGroup) {
|
||||||
|
var separated = property.slice(0, property.indexOf('_group')).split("_")
|
||||||
|
group = separated[0];
|
||||||
|
groupProperty = separated[1];
|
||||||
|
var groupString = group.toString();
|
||||||
|
var groupPropertyString = groupProperty.toString();
|
||||||
|
var groupProperties = {}
|
||||||
|
groupProperties[group] = {};
|
||||||
|
groupProperties[group][groupProperty] = value
|
||||||
|
console.log(groupProperties)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
type: "particleExplorer_update",
|
||||||
|
shouldGroup: shouldGroup,
|
||||||
|
groupProperties: groupProperties,
|
||||||
|
singleProperty: {}
|
||||||
|
}
|
||||||
|
|
||||||
|
data['singleProperty'][property] = value
|
||||||
|
|
||||||
|
var stringifiedData = JSON.stringify(data)
|
||||||
|
|
||||||
|
console.log('stringifiedData', stringifiedData)
|
||||||
|
if (typeof EventBridge !== 'undefined') {
|
||||||
|
EventBridge.emitWebEvent(
|
||||||
|
stringifiedData
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
1607
examples/particle_explorer/old.html
Normal file
1607
examples/particle_explorer/old.html
Normal file
File diff suppressed because it is too large
Load diff
173
examples/particle_explorer/particleExplorer.js
Normal file
173
examples/particle_explorer/particleExplorer.js
Normal file
|
|
@ -0,0 +1,173 @@
|
||||||
|
//
|
||||||
|
// particleExplorer.js
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// Created by James B. Pollack @imgntnon 9/26/2015
|
||||||
|
// Copyright 2014 High Fidelity, Inc.
|
||||||
|
//
|
||||||
|
// Interface side of the App.
|
||||||
|
// Quickly edit the aesthetics of a particle system. This is an example of a new, easy way to do two way bindings between dynamically created GUI and in-world entities.
|
||||||
|
//
|
||||||
|
// Distributed under the Apache License, Version 2.0.
|
||||||
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||||
|
//
|
||||||
|
// todo: folders, color pickers, animation settings, scale gui width with window resizing
|
||||||
|
//
|
||||||
|
var boxPoint,
|
||||||
|
spawnPoint,
|
||||||
|
animation = {
|
||||||
|
fps: 30,
|
||||||
|
frameIndex: 0,
|
||||||
|
running: true,
|
||||||
|
firstFrame: 0,
|
||||||
|
lastFrame: 30,
|
||||||
|
loop: true
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var boxPoint = Vec3.sum(MyAvatar.position, Vec3.multiply(4.0, Quat.getFront(Camera.getOrientation())));
|
||||||
|
boxPoint = Vec3.sum(boxPoint, {
|
||||||
|
x: 0.0,
|
||||||
|
y: -0.5,
|
||||||
|
z: 0.0
|
||||||
|
});
|
||||||
|
spawnPoint = Vec3.sum(boxPoint, {
|
||||||
|
x: 0.0,
|
||||||
|
y: 1.0,
|
||||||
|
z: 0.0
|
||||||
|
});
|
||||||
|
|
||||||
|
var PI = 3.141593,
|
||||||
|
DEG_TO_RAD = PI / 180.0;
|
||||||
|
|
||||||
|
BlankBox = function() {
|
||||||
|
this.animationIsPlaying = true;
|
||||||
|
this.accelerationSpread_x_group = 0.1;
|
||||||
|
this.accelerationSpread_y_group = 0.1;
|
||||||
|
this.accelerationSpread_z_group = 0.1;
|
||||||
|
this.alpha = 0.5;
|
||||||
|
this.alphaStart = 1.0;
|
||||||
|
this.alphaFinish = 0.1;
|
||||||
|
this.color_red_group = 0;
|
||||||
|
this.color_green_group = 0;
|
||||||
|
this.color_blue_group = 0;
|
||||||
|
this.colorSpread_red_group = 0;
|
||||||
|
this.colorSpread_green_group = 0;
|
||||||
|
this.colorSpread_blue_group = 0;
|
||||||
|
this.colorStart_red_group = 0;
|
||||||
|
this.colorStart_green_group = 0;
|
||||||
|
this.colorStart_blue_group = 0;
|
||||||
|
this.colorFinish_red_group = 0;
|
||||||
|
this.colorFinish_green_group = 0;
|
||||||
|
this.colorFinish_blue_group = 0;
|
||||||
|
this.azimuthStart = -PI / 2.0;
|
||||||
|
this.azimuthFinish = PI / 2.0;
|
||||||
|
this.emitAccceleration_x_group = 0.01;
|
||||||
|
this.emitAccceleration_y_group = 0.01;
|
||||||
|
this.emitAccceleration_z_group = 0.01;
|
||||||
|
this.emitDimensions_x_group = 0.01;
|
||||||
|
this.emitDimensions_y_group = 0.01;
|
||||||
|
this.emitDimensions_z_group = 0.01;
|
||||||
|
this.emitOrientation_x_group = 0.01;
|
||||||
|
this.emitOrientation_y_group = 0.01;
|
||||||
|
this.emitOrientation_z_group = 0.01;
|
||||||
|
this.emitOrientation_w_group = 0.01;
|
||||||
|
this.emitRate = 0.1;
|
||||||
|
this.emitSpeed = 0.1;
|
||||||
|
this.polarStart = 0.01;
|
||||||
|
this.polarFinish = 2.0 * DEG_TO_RAD;
|
||||||
|
this.speedSpread = 0.1;
|
||||||
|
this.radiusSpread = 0.035;
|
||||||
|
this.radiusStart = 0.0;
|
||||||
|
this.radiusFinish = 0.0;
|
||||||
|
this.velocitySpread = 0;
|
||||||
|
//
|
||||||
|
this.type = "ParticleEffect";
|
||||||
|
this.name = "ParticlesTest Emitter";
|
||||||
|
this.position = spawnPoint;
|
||||||
|
this.textures = "https://hifi-public.s3.amazonaws.com/alan/Particles/Particle-Sprite-Smoke-1.png";
|
||||||
|
this.lifespan = 5.0;
|
||||||
|
this.visible = false;
|
||||||
|
this.locked = false;
|
||||||
|
this.animationSettings = animation;
|
||||||
|
this.lifetime = 3600 // 1 hour; just in case
|
||||||
|
}
|
||||||
|
|
||||||
|
var blankBox = new BlankBox();
|
||||||
|
|
||||||
|
var box = Entities.addEntity({
|
||||||
|
type: "Box",
|
||||||
|
name: "ParticlesTest Box",
|
||||||
|
position: boxPoint,
|
||||||
|
rotation: {
|
||||||
|
x: -0.7071067690849304,
|
||||||
|
y: 0,
|
||||||
|
z: 0,
|
||||||
|
w: 0.7071067690849304
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
x: 0.3,
|
||||||
|
y: 0.3,
|
||||||
|
z: 0.3
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
red: 128,
|
||||||
|
green: 128,
|
||||||
|
blue: 128
|
||||||
|
},
|
||||||
|
lifetime: 3600, // 1 hour; just in case
|
||||||
|
visible: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var testParticles = Entities.addEntity(blankBox);
|
||||||
|
|
||||||
|
SettingsWindow = function() {
|
||||||
|
var _this = this;
|
||||||
|
this.webWindow = null;
|
||||||
|
this.init = function() {
|
||||||
|
_this.webWindow = new WebWindow('ParticleExplorer', Script.resolvePath('index.html'), 400, 600, true);
|
||||||
|
_this.webWindow.setVisible(true);
|
||||||
|
_this.webWindow.eventBridge.webEventReceived.connect(_this.onWebEventReceived);
|
||||||
|
print('INIT testParticles' + testParticles)
|
||||||
|
};
|
||||||
|
this.onWebEventReceived = function(data) {
|
||||||
|
print('DATA ' + data)
|
||||||
|
|
||||||
|
|
||||||
|
var _data = JSON.parse(data)
|
||||||
|
if (_data.type !== 'particleExplorer_update') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (_data.shouldGroup === true) {
|
||||||
|
print('USE GROUP PROPERTIES')
|
||||||
|
editEntity(_data.groupProperties)
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
print('USE A SINGLE PROPERTY')
|
||||||
|
editEntity(_data.singleProperty)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function editEntity(properties) {
|
||||||
|
// print('TEST PARTICLES??' + testParticles)
|
||||||
|
print('PROPS' + JSON.stringify(properties));
|
||||||
|
Entities.editEntity(testParticles, properties);
|
||||||
|
var currentProperties = Entities.getEntityProperties(testParticles)
|
||||||
|
print('CURRENT PROPS', JSON.stringify(currentProperties))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var settingsWindow = new SettingsWindow();
|
||||||
|
settingsWindow.init();
|
||||||
|
|
||||||
|
function cleanup() {
|
||||||
|
Entities.deleteEntity(testParticles);
|
||||||
|
Entities.deleteEntity(box);
|
||||||
|
}
|
||||||
|
Script.scriptEnding.connect(cleanup);
|
||||||
6
examples/particle_explorer/underscore-min.js
vendored
Normal file
6
examples/particle_explorer/underscore-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue