Skip to content

GitLab

Commit 23d6c417 authored by ℹ️❤️🖥's avatar ℹ️❤️🖥 Committed by i❤computers
Browse files
Options

Delete clutter of previous versions

parent 4adb3efa
Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 621 deletions
WAAClock.js deleted 100644 → 0
View file @ 4adb3efa
;(function(e,t,n){function i(n,s){if(!t[n]){if(!e[n]){var o=typeof require=="function"&&require;if(!s&&o)return o(n,!0);if(r)return r(n,!0);throw new Error("Cannot find module '"+n+"'")}var u=t[n]={exports:{}};e[n][0].call(u.exports,function(t){var r=e[n][1][t];return i(r?r:t)},u,u.exports)}return t[n].exports}var r=typeof require=="function"&&require;for(var s=0;s<n.length;s++)i(n[s]);return i})({1:[function(require,module,exports){
var WAAClock = require('./lib/WAAClock')
module.exports = WAAClock
if (typeof window !== 'undefined') window.WAAClock = WAAClock
},{"./lib/WAAClock":2}],3:[function(require,module,exports){
// shim for using process in browser
var process = module.exports = {};
process.nextTick = (function () {
var canSetImmediate = typeof window !== 'undefined'
&& window.setImmediate;
var canPost = typeof window !== 'undefined'
&& window.postMessage && window.addEventListener
;
if (canSetImmediate) {
return function (f) { return window.setImmediate(f) };
}
if (canPost) {
var queue = [];
window.addEventListener('message', function (ev) {
var source = ev.source;
if ((source === window || source === null) && ev.data === 'process-tick') {
ev.stopPropagation();
if (queue.length > 0) {
var fn = queue.shift();
fn();
}
}
}, true);
return function nextTick(fn) {
queue.push(fn);
window.postMessage('process-tick', '*');
};
}
return function nextTick(fn) {
setTimeout(fn, 0);
};
})();
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.binding = function (name) {
throw new Error('process.binding is not supported');
}
// TODO(shtylman)
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
},{}],2:[function(require,module,exports){
var process=require("__browserify_process");var isBrowser = (typeof window !== 'undefined')
if (isBrowser && !AudioContext)
throw new Error('This browser doesn\'t seem to support web audio API')
var CLOCK_DEFAULTS = {
toleranceLate: 0.10,
toleranceEarly: 0.001
}
// ==================== Event ==================== //
var Event = function(clock, deadline, func) {
this.clock = clock
this.func = func
this.repeatTime = null
this.toleranceLate = CLOCK_DEFAULTS.toleranceLate
this.toleranceEarly = CLOCK_DEFAULTS.toleranceEarly
this._armed = false
this._latestTime = null
this._earliestTime = null
this.schedule(deadline)
}
// Unschedules the event
Event.prototype.clear = function() {
this.clock._removeEvent(this)
return this
}
// Sets the event to repeat every `time` seconds.
Event.prototype.repeat = function(time) {
if (time === 0)
throw new Error('delay cannot be 0')
this.repeatTime = time
return this
}
// Sets the time tolerance of the event.
// The event will be executed in the interval `[deadline - early, deadline + late]`
// If the clock fails to execute the event in time, the event will be dropped.
Event.prototype.tolerance = function(values) {
if (typeof values.late === 'number')
this.toleranceLate = values.late
if (typeof values.early === 'number')
this.toleranceEarly = values.early
this._update()
return this
}
// Returns true if the event is repeated, false otherwise
Event.prototype.isRepeated = function() { return this.repeatTime !== null }
// Schedules the event to be ran before `deadline`.
// If the time is within the event tolerance, we handle the event immediately
Event.prototype.schedule = function(deadline) {
this._armed = true
this.deadline = deadline
this._update()
if (this.clock.context.currentTime >= this._earliestTime) {
this.clock._removeEvent(this)
this._execute()
}
}
// Executes the event
Event.prototype._execute = function() {
this._armed = false
if (this.clock.context.currentTime < this._latestTime)
this.func(this)
else {
if (this.onexpired) this.onexpired(this)
console.warn('event expired')
}
// In the case `schedule` is called inside `func`, we need to avoid
// overrwriting with yet another `schedule`
if (this._armed === false && this.isRepeated())
this.schedule(this.deadline + this.repeatTime)
}
// This recalculates some cached values and re-insert the event in the clock's list
// to maintain order.
Event.prototype._update = function() {
this._latestTime = this.deadline + this.toleranceLate
this._earliestTime = this.deadline - this.toleranceEarly
this.clock._removeEvent(this)
this.clock._insertEvent(this)
}
// ==================== WAAClock ==================== //
var WAAClock = module.exports = function(context, opts) {
var self = this
opts = opts || {}
this.toleranceEarly = opts.toleranceEarly || CLOCK_DEFAULTS.toleranceEarly
this.toleranceLate = opts.toleranceLate || CLOCK_DEFAULTS.toleranceLate
this.context = context
this._events = []
this._started = false
}
// ---------- Public API ---------- //
// Schedules `func` to run after `delay` seconds.
WAAClock.prototype.setTimeout = function(func, delay) {
return this._createEvent(func, this._absTime(delay))
}
// Schedules `func` to run before `deadline`.
WAAClock.prototype.callbackAtTime = function(func, deadline) {
return this._createEvent(func, deadline)
}
// Stretches `deadline` and `repeat` of all scheduled `events` by `ratio`, keeping
// their relative distance to `tRef`. In fact this is equivalent to changing the tempo.
WAAClock.prototype.timeStretch = function(tRef, events, ratio) {
var self = this
, currentTime = self.context.currentTime
events.forEach(function(event) {
if (event.isRepeated()) event.repeat(event.repeatTime * ratio)
var deadline = tRef + ratio * (event.deadline - tRef)
// If the deadline is too close or past, and the event has a repeat,
// we calculate the next repeat possible in the stretched space.
if (event.isRepeated()) {
while (currentTime >= deadline - event.toleranceEarly)
deadline += event.repeatTime
}
event.schedule(deadline)
})
return events
}
// ---------- Private ---------- //
// Removes all scheduled events and starts the clock
WAAClock.prototype.start = function() {
if (this._started === false) {
var self = this
this._started = true
this._events = []
var bufferSize = 256
// We have to keep a reference to the node to avoid garbage collection
this._clockNode = this.context.createScriptProcessor(bufferSize, 1, 1)
this._clockNode.connect(this.context.destination)
this._clockNode.onaudioprocess = function () {
process.nextTick(function() { self._tick() })
}
}
}
// Stops the clock
WAAClock.prototype.stop = function() {
if (this._started === true) {
this._started = false
this._clockNode.disconnect()
}
}
// This function is ran periodically, and at each tick it executes
// events for which `currentTime` is included in their tolerance interval.
WAAClock.prototype._tick = function() {
var event = this._events.shift()
while(event && event._earliestTime <= this.context.currentTime) {
event._execute()
event = this._events.shift()
}
// Put back the last event
if(event) this._events.unshift(event)
}
// Creates an event and insert it to the list
WAAClock.prototype._createEvent = function(func, deadline) {
var event = new Event(this, deadline, func)
event.tolerance({late: this.toleranceLate, early: this.toleranceEarly})
return event
}
// Inserts an event to the list
WAAClock.prototype._insertEvent = function(event) {
this._events.splice(this._indexByTime(event._earliestTime), 0, event)
}
// Removes an event from the list
WAAClock.prototype._removeEvent = function(event) {
var ind = this._events.indexOf(event)
if (ind !== -1) this._events.splice(ind, 1)
}
// Returns the index of the first event whose deadline is >= to `deadline`
WAAClock.prototype._indexByTime = function(deadline) {
// performs a binary search
var low = 0
, high = this._events.length
, mid
while (low < high) {
mid = Math.floor((low + high) / 2)
if (this._events[mid]._earliestTime < deadline)
low = mid + 1
else high = mid
}
return low
}
// Converts from relative time to absolute time
WAAClock.prototype._absTime = function(relTime) {
return relTime + this.context.currentTime
}
// Converts from absolute time to relative time
WAAClock.prototype._relTime = function(absTime) {
return absTime - this.context.currentTime
}
},{"__browserify_process":3}]},{},[1])
;
\ No newline at end of file
index.html deleted 100644 → 0
View file @ 4adb3efa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vexillology - 99% Invisible</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.0.0/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
html, body {
height: 100%;
}
body {
background-color: rgb(102, 98, 109);
display: flex;
}
article {
font-family: 'Open Sans', sans-serif;
background-color: rgb(255, 233, 125);
padding: 0.5em;
margin: auto;
width: 55%;
text-align: center;
}
p {
font-size: 2em;
display: inline;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .12) 50%);
background-size: 200%;
transition: background .4s ;
}
/*p:hover {*/
/*background-position: -100%;*/
/*}*/
</style>
</head>
<body>
<audio id="excerpt" src="99Pi%20Excerpt.mp3"></audio>
<article>
<p><span id="a">This</span><span id="b"> is</span><span id="c"> 99%</span><span id="d"> Invisible,</span><span id="e"> I'm</span><span
id="f"> Roman</span><span id="g"> Mars.</span></p>
</article>
<script src="bling.js"></script>
<!--<script src="WAAClock.js"></script>-->
<script src="script_controlled.js"></script>
</body>
</html>
\ No newline at end of file
index_controlled.html deleted 100644 → 0
View file @ 4adb3efa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vexillology - 99% Invisible</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.0.0/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
html, body {
height: 100%;
}
body {
background-color: rgb(102, 98, 109);
display: flex;
}
article {
font-family: 'Open Sans', sans-serif;
background-color: rgb(255, 233, 125);
padding: 0.5em;
margin: auto;
width: 55%;
text-align: center;
}
p {
font-size: 2em;
display: inline;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .12) 50%);
background-size: 200%;
transition: background .4s ;
}
</style>
</head>
<body>
<audio id="excerpt" src="99Pi%20Excerpt.mp3"></audio>
<article>
<p><span id="cue-position-1">This</span><span id="cue-position-2"> is</span><span id="cue-position-3"> 99%</span><span id="cue-position-4"> Invisible,</span><span id="cue-position-5"> I'm</span><span id="cue-position-6"> Roman</span><span id="cue-position-7"> Mars.</span></p>
</article>
<script src="bling.js"></script>
<script src="script_controlled.js"></script>
</body>
</html>
\ No newline at end of file
index_popcorn.html deleted 100644 → 0
View file @ 4adb3efa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vexillology - 99% Invisible</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.0.0/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
html, body {
height: 100%;
}
body {
background-color: rgb(102, 98, 109);
display: flex;
}
article {
font-family: 'Open Sans', sans-serif;
background-color: rgb(255, 233, 125);
padding: 0.5em;
margin: auto;
width: 25%;
text-align: center;
transform: scale(3,3);
}
h1 {
background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .12) 50%);
background-size: 200%;
transition: background .4s ;
display: inline;
}
h1:hover {
/*background-position: -100%;*/
}
</style>
</head>
<body>
<audio id="excerpt" src="99Pi%20Excerpt.mp3"></audio>
<div id="footnote"></div>
<article>
<h1>This is 99% Invisible, I'm Roman Mars.</h1>
</article>
<script src="http://popcornjs.org/code/dist/popcorn-complete.js"></script>
<script src="script_popcorn.js"></script>
</body>
</html>
\ No newline at end of file
script.js deleted 100644 → 0
View file @ 4adb3efa
document.addEventListener('DOMContentLoaded', function initializePage() {
'use strict';
var audio = document.getElementById('excerpt');
var audioCtx = new AudioContext();
var audioNode = audioCtx.createMediaElementSource(audio);
var clock = new WAAClock(audioCtx);
audioNode.connect(audioCtx.destination);
var tracks = {};
var cues = [0.330, 0.57, 0.71, 1.38, 2.17, 2.36, 2.64];
var totalLength = 0;
$('p span').forEach(function measureSpanWidths(element, index) {
totalLength += element.getBoundingClientRect().width;
tracks[cues[index] + ""] = {
id: numberToLetter(index),
highlightWidth: totalLength
};
});
var p = $('p')[0];
var currentIndex = 0;
//TODO: switch to tone.js for scheduling
$('article').on('click', function playAudio() {
audio.play().then(function () {
requestAnimationFrame(updateHighlight);
clock.start();
clock.setTimeout(function () {
audio.pause();
audio.currentTime = 0;
clock.stop();
currentIndex = 0;
p.style.backgroundPosition = '0%';
}, 3.3);
});
});
//TODO: when on tone.js, schedule highlights, but make sure it happens on a frame and not the webworker
function updateHighlight() {
if (audio.paused && audio.ended) {
return;
}
var currentCue = cues[currentIndex];
if (audio.currentTime >= currentCue) {
var currentTrack = tracks[currentCue + ""];
p.style.backgroundPosition = ( -( currentTrack.highlightWidth / totalLength ) * 100 ) + '%';
currentIndex++;
}
requestAnimationFrame(updateHighlight);
}
function numberToLetter(number) {
return String.fromCharCode(97 + number);
}
}, false);
script_controlled.js deleted 100644 → 0
View file @ 4adb3efa
document.addEventListener('DOMContentLoaded', function initializePage() {
'use strict';
var audio = document.getElementById('excerpt');
var tracks = {};
var cues = [0.330, 0.57, 0.71, 1.38, 2.17, 2.36, 2.64];
var totalLength = 0;
$('p span').forEach(function measureSpanWidths(element, index) {
totalLength += element.getBoundingClientRect().width;
tracks[cues[index] + ""] = {
id: "cue-position-" + index,
highlightWidth: totalLength
};
});
var playing = false;
$('article').on('click', function playAudio() {
if (!playing) {
audio.play().then(function () {
requestAnimationFrame(updateHighlight);
playing = true;
});
} else {
audio.pause();
resetPlayer();
}
});
audio.on('ended', resetPlayer);
var p = $('p')[0];
var currentIndex = 0;
function updateHighlight() {
if (audio.paused && audio.ended) {
return;
}
var currentCue = cues[currentIndex];
if (audio.currentTime >= currentCue) {
var currentTrack = tracks[currentCue + ""];
p.style.backgroundPosition = ( -( currentTrack.highlightWidth / totalLength ) * 100 ) + '%';
currentIndex++;
}
requestAnimationFrame(updateHighlight);
}
function resetPlayer() {
audio.currentTime = 0;
currentIndex = 0;
p.style.backgroundPosition = '0%';
playing = false;
}
}, false);
script_popcorn.js deleted 100644 → 0
View file @ 4adb3efa
document.addEventListener('DOMContentLoaded', function initializePage() {
var h1 = document.querySelector('article h1');
var fontStyle = window.getComputedStyle(h1).font;
var canvas = document.createElement("canvas");
var context = canvas.getContext('2d');
context.font = fontStyle;
var widthOfEntireText = context.measureText(h1.textContent).width;
var widthSoFar = 0;
Popcorn.plugin("subtitle", {
start: function (event, track) {
widthSoFar += context.measureText(track.text + " ").width;
// this.pause();
// debugger;
// this.play();
if (track === this.getTrackEvents()[this.getTrackEvents().length - 1]) {
widthSoFar = widthOfEntireText;
}
h1.style.backgroundPosition = (-(widthSoFar / widthOfEntireText) * 100) + '%';
},
end: function (event, track) {
if (track === this.getTrackEvents()[this.getTrackEvents().length - 1]) {
this.pause(0);
}
}
});
var p = Popcorn("#excerpt", {
frameAnimation: true
})
.parseSSA("testSub.ssa")
;
h1.onclick = function () {
widthSoFar = 0;
h1.style.backgroundPosition = 0;
p.play();
};
}, false);
testSub.ssa deleted 100644 → 0
View file @ 4adb3efa
[Script Info]
; Script generated by Aegisub 3.2.2
; http://www.aegisub.org/
Title: Default Aegisub file
ScriptType: v4.00+
WrapStyle: 0
ScaledBorderAndShadow: yes
YCbCr Matrix: None
[Aegisub Project Garbage]
Audio File: ../Downloads/99Pi Excerpt.mp3
Video Zoom Percent: 1.000000
Active Line: 1
[V4+ Styles]
Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
Style: Default,Arial,20,&H00FFFFFF,&H000000FF,&H00000000,&H00000000,0,0,0,0,100,100,0,0,1,2,2,2,10,10,10,1
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.33,0:00:00.57,Default,,0,0,0,,This
Dialogue: 0,0:00:00.57,0:00:00.71,Default,,0,0,0,,is
Dialogue: 0,0:00:00.71,0:00:01.38,Default,,0,0,0,,99%
Dialogue: 0,0:00:01.38,0:00:01.95,Default,,0,0,0,,invisible
Dialogue: 0,0:00:02.17,0:00:02.36,Default,,0,0,0,,I'm
Dialogue: 0,0:00:02.36,0:00:02.64,Default,,0,0,0,,Roman
Dialogue: 0,0:00:02.64,0:00:02.90,Default,,0,0,0,,Mars
testSub.vtt deleted 100644 → 0
View file @ 4adb3efa
<
WEBVTT
00:00:00.330 --> 00:00:00.570