Skip to content

Instantly share code, notes, and snippets.

@trusktr

trusktr/safari-bug.js

Created September 20, 2017 07:25
Show Gist options
  • Save trusktr/dc81228d5271ae1e8f38f19f4f64b474 to your computer and use it in GitHub Desktop.
Save trusktr/dc81228d5271ae1e8f38f19f4f64b474 to your computer and use it in GitHub Desktop.
Download ZIP
Code for Issues
Raw
safari-bug.js
(function(require,exports,module){
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// //
// client/imports/apps/polydance.vue //
// //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
var __vue_script__, __vue_template__; __vue_script__ = (function(){ var _regenerator = require("babel-runtime/regenerator");
//
var _regenerator2 = _interopRequireDefault(_regenerator); //
//
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } //
//
module.watch(require("pepjs")); //
var TWEEN = void 0; //
module.watch(require("tween.js"), { //
"default": function (v) { //
TWEEN = v; //
} //
}, 0); //
var geometry = void 0; //
module.watch(require("csg"), { //
"default": function (v) { //
geometry = v; //
} //
}, 1); //
var color = void 0; //
module.watch(require("tinycolor2"), { //
"default": function (v) { //
color = v; //
} //
}, 2); //
var Motor = void 0; //
module.watch(require("infamous/core/Motor"), { //
"default": function (v) { //
Motor = v; //
} //
}, 3); //
module.watch(require("infamous/html")); //
var sleep = void 0; //
module.watch(require("awaitbox/timers/sleep"), { //
"default": function (v) { //
sleep = v; //
} //
}, 4); //
//if (!window.AudioContext && window.webkitAudioContext) // 13
//window.AudioContext = window.webkitAudioContext // 14
var colors = { // 16
skyblue_: color('#1a95d9'), // 17
hotpink_: color('#d11482'), // 18
limegreen_: color('#90e818'), // 19
yellow_: color('#fdb833'), // 20
teal_: color('#28c9f6') // 21
}; // 16
var outerTrapezoidRingZPos = 50; // 24
var innerQuadRingZPos = -50; // 25
module.exportDefault({ //
data: function () { // 28
return { // 28
ready: false, // 29
// nothing will render until this is true // 29
circle1Radius: 105, // 31
circle3Radius: 34, // 32
circle4Radius: 22, // 34
circle1Range: _.range(48), // 36
circle2Range: _.range(24), // 37
circle3Range: _.range(24), // 38
circle4Range: _.range(12), // 39
circle2TriangleRings: _.range(5), // 41
innerTriangleSizes: _.range(4, 14, 2), // 43
triangleColumnAnimParam: 0, // 45
outerTrapezoidRingZPos: outerTrapezoidRingZPos, // 47
innerQuadRingZPos: innerQuadRingZPos, // 48
audioBufferLength: 0, // 50
color1AnimParam: 0.5, // 52
individualQuadFlipRotations: [], // 54
skyblue_: colors.skyblue_, // 56
hotpink_: colors.hotpink_, // 57
limegreen_: colors.limegreen_, // 58
yellow_: colors.yellow_, // 59
teal_: colors.teal_ // 60
}; // 28
}, // 28
computed: { // 63
triangleRingPositions: function () { // 64
var newTriangleRingPositions = []; // 65
var zInterval = (this.outerTrapezoidRingZPos - this.innerQuadRingZPos) / 5; // 67
var n = 5; // 69
//
while (n--) { // 70
newTriangleRingPositions[n] = this.innerQuadRingZPos + zInterval / 2 + n * zInterval; // 71
} // 70
//
return newTriangleRingPositions; // 73
}, // 74
circle2triangleRadii: function () { // 76
var circle2InnerRadius = this.circle3Radius + 8; // 77
var spacing = 4; // 78
return [circle2InnerRadius, circle2InnerRadius + spacing * 1 + 4, circle2InnerRadius + spacing * 2 + 4 + 6, circle2InnerRadius + spacing * 3 + 4 + 6 + 8, circle2InnerRadius + spacing * 4 + 4 + 6 + 8 + 10];
}, // 86
colorRotation: function () { // 88
return this.color1AnimParam * 360 - 180; // 89
}, // 90
hotpink: function () { // 92
return this.hotpink_.clone().spin(this.colorRotation); // 93
}, // 94
skyblue: function () { // 95
return this.skyblue_.clone().spin(this.colorRotation); // 96
}, // 97
yellow: function () { // 98
return this.yellow_.clone().spin(this.colorRotation); // 99
}, // 100
teal: function () { // 101
return this.teal_.clone().spin(this.colorRotation); // 102
}, // 103
limegreen: function () { // 104
return this.limegreen_.clone().spin(this.colorRotation); // 105
}, // 106
circle1Colors: function () { // 108
return discreteGradient(this.circle1Range.length, this.hotpink, this.skyblue, this.hotpink); // 109
}, // 113
circle2Colors: function () { // 115
return discreteGradient(this.circle2Range.length, this.skyblue, this.hotpink, this.yellow, this.hotpink, this.skyblue);
}, // 120
circle3Colors: function () { // 122
return discreteGradient(this.circle3Range.length, this.teal, this.limegreen, this.yellow, this.limegreen, this.teal);
}, // 127
circle4Colors: function () { // 129
return discreteGradient(this.circle4Range.length, this.teal, this.limegreen, this.yellow, this.limegreen, this.teal);
}, // 134
audioDataArray: function () { // 136
return new Uint8Array(this.audioBufferLength); // 137
} // 138
}, // 63
methods: { // 141
// Vue components don't have a constructor, so we use initialize // 142
// and call it on mount. // 143
initialize: function () { // 144
if (this.isInitialized) return; // 145
this.isInitialized = true; // 146
this.audioIsStarted = false; // 148
this.audioAnalyser = null; // 149
this.startAudio(); // init values in individualQuadFlipRotations // 151
//
var individualQuadFlipRotations = this.individualQuadFlipRotations = []; // 154
var i = 48; // 155
//
while (i--) { // 156
individualQuadFlipRotations[i] = 0; // 156
} // 156
}, // 157
startAudio: function () { // 159
this.audioIsStarted = true; ///////////////////////////////// AUDIO // 160
//
var audio = new AudioContext(); // make audio source node // 162
//
var audioElement = document.createElement('audio'); // 165
audioElement.setAttribute('src', '/UnionMystica.mp3'); // 166
audioElement.setAttribute('autoplay', 'true'); // 167
document.body.appendChild(audioElement); // 168
var source = audio.createMediaElementSource(audioElement); // create an analyser node to analize the data, and connect source to
// it. We don't need to output to the AudioContext destination node, // 172
// since it is already playing from the audio element. // 173
//
this.audioAnalyser = audio.createAnalyser(); // 174
this.audioAnalyser.fftSize = 2048; // default 2048 // 175
//
this.audioBufferLength = this.audioAnalyser.frequencyBinCount; //this.audioBufferLength = this.audioAnalyser.fftSize;
//
source.connect(this.audioAnalyser); // connect to the speakers // 178
//
this.audioAnalyser.connect(audio.destination); ///////////////////////////////////////// // 181
}, // 183
showVisual: function _callee() { // 185
var _this = this; // 141
//
var _$refs, container, circleRoot, deviceOrientation1, deviceOrientation2, deviceOrientation3, mouseXRatio, mouseYRatio, triangleColumnTween;
//
return _regenerator2.default.async(function _callee$(_context) { // 141
while (1) { // 141
switch (_context.prev = _context.next) { // 141
case 0: // 141
_$refs = this.$refs, container = _$refs.container, circleRoot = _$refs.circleRoot; // 141
deviceOrientation1 = { // 188
x: 0, // 188
y: 0, // 188
z: 0 // 188
}; // 188
deviceOrientation2 = { // 189
x: 0, // 189
y: 0, // 189
z: 0 // 189
}; // 189
deviceOrientation3 = { // 190
x: 0, // 190
y: 0, // 190
z: 0 //this.receiveBroadcastOrientations(deviceOrientation1, deviceOrientation2, deviceOrientation3)
//
}; // 190
mouseXRatio = 0; // 193
mouseYRatio = 0; // 194
container.setAttribute('touch-action', 'none'); // polyfill // 195
//
container.style['touch-events'] = 'none'; // native // 196
//
container.addEventListener('mousemove', function (e) {}); // 197
container.addEventListener('pointermove', function (e) { // 199
e.preventDefault(); // just in case // 200
//
mouseXRatio = e.clientX / window.innerWidth; // 201
mouseYRatio = e.clientY / window.innerHeight; // 202
}); // 203
_context.next = 12; // 141
return _regenerator2.default.awrap(circleRoot.mountPromise); // 141
//
case 12: // 141
triangleColumnTween = new TWEEN.Tween(this); // 207
triangleColumnTween.__done = false; // 208
triangleColumnTween.__started = false; // 209
triangleColumnTween.to({ // 210
triangleColumnAnimParam: 1 // 211
}, 2000) //.to({p:-1}, 2000) // 211
.easing(TWEEN.Easing.Cubic.InOut).onComplete(function () { // 210
return triangleColumnTween.__done = true; // 214
}).onStart(function () { // 214
return triangleColumnTween.__started = true; // 215
}).repeat(Infinity).yoyo(true) // how? // 215
.start().update(performance.now()); // actually starts it. // 210
//
Motor.addRenderTask(function (time) { // 221
if (_this.audioIsStarted) _this.audioAnalyser.getByteTimeDomainData(_this.audioDataArray); // TODO set this with state
//
circleRoot.rotation.x = mouseYRatio * 60 - 30; // 226
circleRoot.rotation.y = mouseXRatio * 60 - 30; // 227
if (triangleColumnTween.__started && !triangleColumnTween.__done) triangleColumnTween.update(time); //this.color1AnimParam = deviceOrientation2.z / 360
//
_this.color1AnimParam = mouseXRatio; //this.outerTrapezoidRingZPos = deviceOrientation3.y
//this.innerQuadRingZPos = -deviceOrientation3.y // 236
//
_this.outerTrapezoidRingZPos = mouseYRatio * 90 - 45; // 237
_this.innerQuadRingZPos = -mouseYRatio * 90 - 45; // 238
_this.ready = true; // 240
}); // 241
//
case 17: // 141
case "end": // 141
return _context.stop(); // 141
} // 141
} // 141
}, null, this); // 141
}, // 141
colorToString: function (color) { // 244
color = color.toRgb(); // 245
return color.r / 255 + " " + color.g / 255 + " " + color.b / 255 + " " + color.a; // 246
}, // 247
columnTriangleRotation: function (index) { // 249
var animParam = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; // 255
var numItems = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 5; // 255
var startAngle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0; // 255
var endAngle = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 360; // 255
var interval = 1 / numItems; // 256
var startPoint = interval * index; // 257
var endPoint = startPoint + interval; // 258
var angle = 0; // 259
//
if (animParam >= startPoint && animParam < endPoint) { // 261
var intervalPortion = (animParam - startPoint) / interval; // 262
angle = (endAngle - startAngle) * intervalPortion + startAngle; // 263
} else if (animParam < startPoint) { // 264
angle = startAngle; // 266
} else if (animParam >= endPoint) { // 267
angle = endAngle; // 269
} // 270
//
return angle; // 272
}, // 273
receiveBroadcastOrientations: function (deviceOrientation1, deviceOrientation2, deviceOrientation3) { // 275
var streamer = new Meteor.Streamer('orientation'); // 276
streamer.on('orientation1', function (data) { // 278
Object.assign(deviceOrientation1, data); // 279
}); // 280
streamer.on('error', function (e) { // 281
throw e; // 281
}); // 281
streamer.on('ready', function () { // 282
return console.log('streamer client ready'); // 282
}); // 282
streamer.on('orientation2', function (data) { // 284
Object.assign(deviceOrientation2, data); // 285
}); // 286
streamer.on('error', function (e) { // 287
throw e; // 287
}); // 287
streamer.on('ready', function () { // 288
return console.log('broadcast client ready'); // 288
}); // 288
streamer.on('orientation3', function (data) { // 290
Object.assign(deviceOrientation3, data); // 291
}); // 292
streamer.on('error', function (e) { // 293
throw e; // 293
}); // 293
streamer.on('ready', function () { // 294
return console.log('broadcast3 client ready'); // 294
}); //////////////////////////////////////// // 294
//const broadcast1 = new Meteor.Broadcast('orientation1') // 298
//broadcast1.on('data', data => { // 299
//Object.assign(deviceOrientation1, data) // 300
//}) // 301
//broadcast1.on('error', e => {throw e}) // 302
//broadcast1.on('ready', () => console.log('broadcast1 client ready')) // 303
//const broadcast2 = new Meteor.Broadcast('orientation2') // 305
//broadcast2.on('data', data => { // 306
//Object.assign(deviceOrientation2, data) // 307
//}) // 308
//broadcast2.on('error', e => {throw e}) // 309
//broadcast2.on('ready', () => console.log('broadcast2 client ready')) // 310
//const broadcast3 = new Meteor.Broadcast('orientation3') // 312
//broadcast3.on('data', data => { // 313
//Object.assign(deviceOrientation3, data) // 314
//}) // 315
//broadcast3.on('error', e => {throw e}) // 316
//broadcast3.on('ready', () => console.log('broadcast3 client ready')) // 317
}, // 318
// Is mapAudioDataToFewerUnits a good name for this? // 320
mapAudioDataToFewerUnits: function (numberOfUnits) { // 321
var newAudioDatum = []; // 322
var audioDatumPerUnit = Math.floor(this.audioDataArray.length / numberOfUnits); // normalize. (based off MDN tutorials, I'm guessing 128 is the max size of the values?).
//
for (var i = 0; i < numberOfUnits; i += 1) { // 326
var audioDatumSumForUnit = 0; // 327
//
for (var j = i * audioDatumPerUnit, l2 = j + audioDatumPerUnit; j < l2; j += 1) { // 329
audioDatumSumForUnit += this.audioDataArray[j] / 128 / audioDatumPerUnit; // 330
} // 331
//
newAudioDatum.push(audioDatumSumForUnit); // 333
} // 334
//
return newAudioDatum; // 336
}, // 337
circle1TrapezoidAudioDatum: function () { // 339
return this.mapAudioDataToFewerUnits(this.circle1Range.length); // 340
}, // 341
circle3QuadAudioDatum: function () { // 342
return this.mapAudioDataToFewerUnits(this.circle3Range.length); // 343
} // 344
}, // 141
mounted: function _callee2() { // 347
return _regenerator2.default.async(function _callee2$(_context2) { // 27
while (1) { // 27
switch (_context2.prev = _context2.next) { // 27
case 0: // 27
this.initialize(); // 348
_context2.next = 3; // 27
return _regenerator2.default.awrap(sleep(1000)); // 27
//
case 3: // 27
this.showVisual(); // 351
//
case 4: // 27
case "end": // 27
return _context2.stop(); // 27
} // 27
} // 27
}, null, this); // 27
} // 27
}); // 27
//
// XXX We can further improve perf by accepting an array to put values into. // 355
// We can also cache the interval calculations of the conditional check in the // 356
// inner loop. // 357
function discreteGradient(n) { // 358
var numberOfColors = arguments.length <= 1 ? 0 : arguments.length - 1; // 359
var numberOfColorTransitions = numberOfColors - 1; // 360
var interval = Math.floor(n / numberOfColorTransitions); // 361
var discreteColors = []; // for each discrete color that we will have // 362
//
for (var i = 0; i < n; i += 1) { // 365
// see which color interval the the discrete color will fall in so we // 367
// know which two colors to mix with `.mix()`. // 368
for (var j = 0; j < numberOfColorTransitions; j += 1) { // 369
if (i >= j * interval && i < (j + 1) * interval) { // 370
discreteColors.push( // mix this color with the next color by a certain percent // 371
// based on the interval // 373
color.mix(arguments.length <= j + 1 ? undefined : arguments[j + 1], arguments.length <= j + 1 + 1 ? undefined : arguments[j + 1 + 1], 100 / (interval - 1) * (i % interval)));
} // 376
} // 377
} // 378
//
return discreteColors; // 380
} // 381
//
return require('/client/imports/apps/polydance.vue').default; //
})(); //
__vue_script__ = __vue_script__ || {};var __vue_options__ = (typeof __vue_script__ === "function" ? //
(__vue_script__.options || (__vue_script__.options = {})) //
: __vue_script__);__vue_options__.render = function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",style:({ visibility: _vm.ready ? 'visible' : 'hidden', width: '100%', height: '100%', position: 'relative' })},[_c('motor-scene',{ref:"scene",attrs:{"webglenabled":"true","background":((_vm.colorToString(_vm.hotpink.clone().darken(38))) + " 1")}},[_c('motor-node',{ref:"outer",attrs:{"id":"outer","sizemode":"proportional proportional","proportionalsize":"1 1"}},[_c('motor-node',{ref:"circleRoot",attrs:{"position":"0 0 -50"}},[_c('motor-node',{ref:"outerTinyTriangles",attrs:{"position":("0 0 " + _vm.outerTrapezoidRingZPos),"rotation":"0 0 90"}},_vm._l((_vm.circle1Range),function(n){return _c('motor-node',{key:n,attrs:{"rotation":("0 0 " + (n * 360/48 + 360/48/2))}},[_c('motor-node',{attrs:{"color":_vm.colorToString(_vm.limegreen),"mesh":"isotriangle","absolutesize":"4.6 4.6","position":("0 " + (_vm.circle1Radius + 25) + " " + (1 * ( (_vm.circle1TrapezoidAudioDatum()[n]-1) * 120 + 1 ))),"rotation":"0 0 180"}})],1)})),_vm._v(" "),_c('motor-node',{ref:"circle1",attrs:{"position":("0 0 " + _vm.outerTrapezoidRingZPos),"rotation":"0 0 90"}},_vm._l((_vm.circle1Range),function(n){return _c('motor-node',{key:n,attrs:{"rotation":("0 0 " + (n * 360/48))}},[_c('motor-node',{attrs:{"rotation":("0 " + (_vm.individualQuadFlipRotations[n]) + " 0")}},[_c('motor-node',{attrs:{"color":_vm.colorToString(_vm.circle1Colors[n]),"mesh":"symtrap","absolutesize":("10 " + (16 * ((_vm.circle1TrapezoidAudioDatum()[n]-1) * 5 + 1))),"position":("0 " + _vm.circle1Radius + " 0"),"rotation":"60 0 0"}})],1)],1)})),_vm._v(" "),_c('motor-node',{ref:"innerTinyTriangles",attrs:{"position":("0 0 " + _vm.outerTrapezoidRingZPos),"rotation":"0 0 90"}},_vm._l((_vm.circle2Range),function(n){return _c('motor-node',{key:n,attrs:{"rotation":("0 0 " + (n * 360/24 + 360/24/2))}},[_c('motor-node',{attrs:{"color":_vm.colorToString(_vm.limegreen.clone().setAlpha(1)),"mesh":"isotriangle","absolutesize":"4.6 4.6","position":("0 " + (_vm.circle1Radius + -10) + " " + (1 * ((_vm.circle3QuadAudioDatum()[n]-1) * 60 + 1)))}})],1)})),_vm._v(" "),_vm._l((_vm.circle2TriangleRings),function(t){return _c('motor-node',{key:t,attrs:{"position":("0 0 " + (_vm.triangleRingPositions[t])),"rotation":"0 0 90"}},_vm._l((_vm.circle2Range),function(n){return _c('motor-node',{key:n,attrs:{"rotation":("0 0 " + (n * 360/24))}},[_c('motor-node',{attrs:{"rotation":((_vm.columnTriangleRotation(t, _vm.triangleColumnAnimParam) + 60) + " 0 0"),"position":("0 " + (_vm.circle2triangleRadii[t]) + " 0"),"absolutesize":((_vm.innerTriangleSizes[t]) + " " + (_vm.innerTriangleSizes[t] * 1.10) + " 0"),"mesh":"isotriangle","color":_vm.colorToString(_vm.circle2Colors[n])}})],1)}))}),_vm._v(" "),_c('motor-node',{ref:"circle3",attrs:{"position":("0 0 " + _vm.innerQuadRingZPos),"rotation":"0 0 90"}},_vm._l((_vm.circle3Range),function(n){return _c('motor-node',{key:n,attrs:{"rotation":("0 0 " + (n * 360/24))}},[_c('motor-node',{attrs:{"mesh":"quad","position":("0 " + _vm.circle3Radius + " 0"),"absolutesize":("6 " + (4 * ((_vm.circle3QuadAudioDatum()[n]-1) * 5 + 1))),"color":_vm.colorToString(_vm.circle3Colors[n])}})],1)})),_vm._v(" "),_c('motor-node',{ref:"circle4",attrs:{"rotation":"0 0 -90","position":("0 0 " + _vm.innerQuadRingZPos)}},_vm._l((_vm.circle4Range),function(n){return _c('motor-node',{key:n,attrs:{"rotation":("0 0 " + (n * 360/12))}},[_c('motor-node',{attrs:{"mesh":"isotriangle","absolutesize":"5 5","position":("0 " + _vm.circle4Radius + " 0"),"color":_vm.colorToString(_vm.circle4Colors[n])}})],1)}))],2)],1)],1)],1)};
__vue_options__.staticRenderFns = []; //
__vue_options__.render._withStripped = true; //
__vue_options__._scopeId = 'data-v-403a34ce';__vue_options__.packageName = 'null'; //
__vue_options__.name = __vue_options__.name || 'polydance';module.export('default', exports.default = __vue_script__);exports.__esModule = true;
if(!window.__vue_hot__){ //
window.__vue_hot_pending__ = window.__vue_hot_pending__ || {}; //
window.__vue_hot_pending__['data-v-403a34ce'] = __vue_script__; //
} else { //
window.__vue_hot__.createRecord('data-v-403a34ce', __vue_script__); //
} //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
}
//# sourceMappingURL=/dynamic/client/imports/apps/7b486f9bb6ef7aa7af2ce3694ecfb3d8c95fe394.map
)
//# sourceURL=/client/imports/apps/polydance.vue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment