mirror of
https://github.com/overte-org/overte.git
synced 2025-04-20 03:44:02 +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