Skip to content

Instantly share code, notes, and snippets.

@bryik

bryik/.block

Last active Nov 15, 2016
Embed
What would you like to do?
Knock Down and Rebuild
license: mit

Knock down and rebuild

Originally a test comparing the 'shakiness' of spheres to boxes--spheres are stable while boxes shake if stacked.

However, I got sidetracked into making a loop. Strangely, attempting to update the position of an entity with a dynamic-body failed (nothing happened). The work-around is to remove the dynamic-body, re-position, and then add the dynamic-body component once-more (i.e. turn physics off for the entity, move, and then turn it on again).

A Pen by bryik on CodePen.

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/8a76a783c2ba3d4779e92a892cc31fb0757fa4df/dist/aframe-extras.physics.min.js"></script>
<a-scene antialias="true" physics>
<!-- Camera -->
<a-entity position="0 1.6 0">
<a-entity camera look-controls wasd-controls></a-entity>
</a-entity>
<a-entity id='container' position="0 1 -3">
<a-entity id="jenga" position="0 0.2 0"></a-entity>
<a-box id='platform' width='2' depth='2' height='0.1' color='grey' static-body></a-box>
</a-entity>
<a-plane rotation="-90 0 0" position='0 0 -1.5' width="4" height="4" color="black" static-body></a-plane>
<a-sky color="white"></a-sky>
</a-scene>
<script>
var colorScale = d3.scaleSequential(d3.interpolatePlasma);
var jenga = d3.select('#jenga');
var container = d3.select('#container');
var dataset = []; // 10, 9, 8...1
for (var i = 10; i > 0; i--) {
dataset.push(i);
}
// Create tower of spheres
jenga.selectAll('a-sphere')
.data(dataset)
.enter()
.append('a-sphere')
.attr('radius', '0.1')
.attr('color', function(d, i) {
return colorScale(i / 10);
})
.attr('position', function(d, i) {
return '0 ' + (i * 0.2) + ' 0';
})
.attr('dynamic-body', '')
.call(start);
function start () {
// Knock it down
container.append('a-sphere')
.attr('id', 'ignition')
.attr('radius', '0.1')
.attr('color', 'red')
.attr('position', '0.1 10 0')
.attr('dynamic-body', '');
var t = d3.timeout(rebuild, 10000); // Reset tower of spheres after 10 seconds
}
function rebuild () {
// Remove ignition sphere
d3.select('#ignition')
.remove();
// Update spheres, stack them up again
jenga.selectAll('a-sphere')
.data(dataset)
.attr('dynamic-body', null) // <- Interesting, tower cannot be rebuilt if dynamic-body is on
.attr('radius', '0.1')
.attr('color', function(d, i) {
return colorScale(i / 10);
})
.attr('position', function(d, i) {
return '0 ' + (i * 0.2) + ' 0';
})
.attr('dynamic-body', '') // <- Turn physics back on
.call(start); // Knock it down again
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment