juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

logo flicker prevent redundant function binds, update text color directly

Browse Source
This commit is contained in:
Kevin Ngo
2018-09-20 18:00:03 -07:00
parent eb234e7999
commit 2804a41bb6
2 changed files with 36 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/logoflicker.js
View File

@@ -1,29 +1,49 @@
AFRAME.registerComponent('logoflicker', {
dependencies: ['text'],
schema: {
default: 1000.0,
delay: {default: 1000.0},
},
init: function () {
this.defaultColor = this.el.components['text'].data.color;
this.setOff = this.setOff.bind(this);
this.setOn = this.setOn.bind(this);
this.defaultColor = new THREE.Color().setStyle(this.el.components.text.data.color);
this.color = new THREE.Color().setStyle('#0A0228');
this.colorUniform = this.el.components.text.material.uniforms.color.value;
this.sparks = document.getElementById('logosparks');
this.sparkPositions = [
{ position: new THREE.Vector3(0, 0.1, 0) },
{ position: new THREE.Vector3(0.5, 1.2, 0) },
{ position: new THREE.Vector3(0, 1.2, 0) }
{position: new THREE.Vector3(0, 0.1, 0)},
{position: new THREE.Vector3(0.5, 1.2, 0)},
{position: new THREE.Vector3(0, 1.2, 0)}
];
this.setOn();
},
setOff: function () {
this.el.setAttribute('text', {color: '#0a0228'});
this.sparks.emit('flicker',
this.sparkPositions[Math.floor(Math.random() * this.sparkPositions.length)]);
setTimeout(this.setOn.bind(this),
50 + Math.floor(Math.random() * 100));
setOff: function () {
this.colorUniform.x = this.color.r;
this.colorUniform.y = this.color.g;
this.colorUniform.z = this.color.b;
this.colorUniform.needsUpdate = true;
this.sparks.emit('logoflicker',
this.sparkPositions[Math.floor(Math.random() * this.sparkPositions.length)],
false);
setTimeout(this.setOn,
50 + Math.floor(Math.random() * 100));
},
setOn: function () {
this.el.setAttribute('text', {color: this.defaultColor});
setTimeout(this.setOff.bind(this),
Math.floor((this.data * 3 / 10) + Math.random() * this.data));
this.colorUniform.x = this.defaultColor.r;
this.colorUniform.y = this.defaultColor.g;
this.colorUniform.z = this.defaultColor.b;
this.colorUniform.needsUpdate = true;
setTimeout(this.setOff,
Math.floor((this.data.delay * 3 / 10) + Math.random() * this.data.delay));
}
});

4
src/templates/stage.html
View File

@@ -45,14 +45,14 @@
</a-entity>
<a-entity id="logo" position="0 5.0 -7.5">
<a-entity id="logosparks" particleplayer="src:#logoSparks; scale: 1.4; pscale: 0.4; count: 10; dur: 600; on:flicker" position="-3.8 0.5 0.05"></a-entity>
<a-entity id="logosparks" particleplayer="src: #logoSparks; scale: 1.4; pscale: 0.4; count: 10; dur: 600; on: logoflicker" position="-3.8 0.5 0.05"></a-entity>
<a-entity mixin="font" text="width: 35; value: PER SABER; align: center; color: #ff666a" position="0.974 0 0"></a-entity>
<a-entity mixin="font" text="width: 35; value: PER SABER; align: center; color: #ff1a1f" position="0.974 0 -0.1"></a-entity>
<a-entity mixin="font" text="width: 35; value: PER SABER; align: center; color: #0a0228" position="0.974 0 -0.2"></a-entity>
<a-entity mixin="font" text="width: 35; value: S; align: center; color: #ff666a" position="-4.601 0 0"></a-entity>
<a-entity mixin="font" text="width: 35; value: U; align: center; color: #ff666a" position="-3.632 0 0" logoflicker="1200"></a-entity>
<a-entity mixin="font" text="width: 35; value: U; align: center; color: #ff666a" position="-3.632 0 0" logoflicker="delay: 1200"></a-entity>
<a-entity mixin="font" text="width: 35; value: S; align: center; color: #ff1a1f" position="-4.601 0 -0.1"></a-entity>
<a-entity mixin="font" text="width: 35; value: U; align: center; color: #ff1a1f" position="-3.632 0 -0.1"></a-entity>