Skip to content

Instantly share code, notes, and snippets.

@vineeth-pappu

vineeth-pappu/index.html

Created May 23, 2022 09:39
Show Gist options
  • Save vineeth-pappu/f38cbf299103e4c71d80a741095356d7 to your computer and use it in GitHub Desktop.
Save vineeth-pappu/f38cbf299103e4c71d80a741095356d7 to your computer and use it in GitHub Desktop.
Download ZIP
Skillset And Workflow Display - Portfolio Site
Raw
index.html
<p id="workflow-boot"></p>
Raw
script.js
boot = {
defaultTime: 200,
timePerChar: 10,
soundPaths: {
blip:
"https://dl.dropboxusercontent.com/u/74836805/codepenassets/blip-1.wav"
},
soundCaches: {},
soundCacheSize: 16,
soundCacheIndex: {},
speechAvailable: typeof speechSynthesis != "undefined",
fallback: navigator.userAgent.toLowerCase().indexOf("firefox") > -1, //TODO check for actual functionality
elem: document.getElementById("workflow-boot")
};
if (boot.speechAvailable) {
window.speechSynthesis.onvoiceschanged = function(e) {
boot.actions.voiceInit();
};
}
boot.actions = {
voiceInit: function(id, subid, text, time) {
if (!boot.speechAvailable) {
return "UNAVAILABLE - USING NULL OUTPUT";
}
boot.voices = speechSynthesis.getVoices();
for (var i = 0; i < boot.voices.length; i++) {
var name = boot.voices[i].name.toUpperCase();
if (name.indexOf("ENGLISH") > -1 && name.indexOf("MALE") == -1) {
boot.voice = boot.voices[i];
}
}
for (var i = 0; i < boot.voices.length; i++) {
var name = boot.voices[i].name.toUpperCase();
if (name.indexOf("ENGLISH") > -1 && name.indexOf("MALE") > -1) {
boot.voice = boot.voices[i];
}
}
return "CHECK";
},
say: function(id, subid, text, time) {
if (!boot.speechAvailable) {
return;
}
var msg = new SpeechSynthesisUtterance();
msg.text = text;
msg.volume = 1.4;
msg.rate = 1.2;
msg.pitch = 0.7;
if (typeof boot.voice != "undefined") {
msg.voice = boot.voice;
}
window.speechSynthesis.speak(msg);
}
};
boot.lines = [
{ text: "PROCEDURAL WORKFLOW", time: 1000 },
{ text: "", time: 0 },
{ text: "A23-NECTAR ART SYSTEMS © 2OK+ ALL RIGHTS RESERVED", time: 400 },
{ text: "", time: 300 },
{ text: "INITIALIZING SKILL SETS", time: 200 },
{ text: "", time: 300 },
[
{ text: "ATTITUDE ", time: 900 },
{ text: "....... ", time: 500 },
{ text: "CHECK", time: 300 }
],
[
{ text: "PERCEPTION ", time: 700 },
{ text: "....... ", time: 800 },
{ text: "CHECK", time: 300 }
],
[
{ text: "PUNK MUSIC ", time: 800 },
{ text: "....... ", time: 300 },
{ text: "CHECK", time: 300 }
],
[
{ text: "DATA WARP ", time: 800 },
{ text: "....... ", time: 300 },
{ text: "CHECK", time: 300 }
],
[
{ text: "SYNCHRONIZATION ", time: 800 },
{ text: "....... ", time: 300 },
{ text: "ERROR", time: 300 }
],
[
{ text: "INITIALIZING SYNC REPAIR ", time: 800 },
{ text: "....... ", time: 300 },
{ text: "WORKING", time: 300 }
],
[
{ text: "> ", time: 800 },
{ text: "> ", time: 800 },
{ text: "> ", time: 800 },
{ text: "> ", time: 800 },
{ text: "> ", time: 800 },
{ text: "> ", time: 800 },
{ text: "> ", time: 800 }
],
[
{ text: "SYNCHRONIZATION ", time: 800 },
{ text: "....... ", time: 300 },
{ text: "FAILED", time: 300 }
],
[
{ text: "TROUBLESHOOT: FAILED SYNC REPAIR ", time: 800 },
{ text: "....... ", time: 300 },
{ text: "INITIATING TROUBLESHOOT PROTOCOLS", time: 800 }
],
[
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 }
],
[
{ text: "TROUBLESHOOT: FAILED SYNC REPAIR ", time: 800 },
{ text: "....... ", time: 300 },
{ text: "PLEASE HOLD", time: 1800 }
],
[
{ text: "> ", time: 100 },
{ text: "> ", time: 100 },
{ text: "> ", time: 100 },
{ text: "> ", time: 100 },
{ text: "> ", time: 100 },
{ text: "> ", time: 100 },
{ text: "> ", time: 100 }
],
[
{ text: "PROTOCOL RESOLUTION ", time: 300 },
{ text: "....... ", time: 100 },
{ text: "WORKING", time: 200 }
],
[
{ text: "> ", time: 100 },
{ text: "> ", time: 100 },
{ text: "> ", time: 100 },
{ text: "> ", time: 800 },
{ text: "> ", time: 800 },
{ text: "> ", time: 600 },
{ text: "> ", time: 100 }
],
[
{ text: "SYNC ERROR RESOLUTION ", time: 800 },
{ text: "....... ", time: 300 },
{ text: "CONFIRMED", time: 300 }
],
[
{ text: "PROTOCOLS: SYNC ERROR RESOLUTION ", time: 800 },
{ text: "....... ", time: 300 },
{ text: "INITIATING", time: 300 }
],
[
{ text: "-- ", time: 0 },
{ text: "PROTOCOL RESPONSE: SYNC ERROR RESOLUTION ", time: 300 },
{ text: "....... ", time: 500 },
{ text: "CONNECTING WITH LAN NETWORK", time: 200 }
],
[
{ text: "-- ", time: 0 },
{ text: "PROTOCOL RESPONSE: LAN NETWORK CONNECTION ", time: 100 },
{ text: "....... ", time: 300 },
{ text: "CONNECTED", time: 100 }
],
[
{ text: "-- ", time: 0 },
{ text: "-- ", time: 0 },
{ text: "PROTOCOL RESPONSE: SYNC ERROR RESOLUTION ", time: 200 },
{ text: "....... ", time: 100 },
{ text: "ACCESSING COFFEE AI", time: 200 }
],
[
{ text: "-- ", time: 0 },
{ text: "-- ", time: 0 },
{ text: "PROTOCOL RESPONSE: COFFEE AI ", time: 100 },
{ text: "....... ", time: 200 },
{ text: "SUCCESSFUL HANDSHAKE", time: 100 }
],
[
{ text: "-- ", time: 0 },
{ text: "-- ", time: 0 },
{ text: "PROTOCOL RESPONSE: COFFEE AI ", time: 100 },
{ text: "....... ", time: 200 },
{ text: "WORKING", time: 100 }
],
[
{ text: "-- ", time: 0 },
{ text: "-- ", time: 0 },
{ text: "PROTOCOL RESPONSE: COFFEE AI ", time: 100 },
{ text: "....... ", time: 1200 },
{ text: "EXECUTION COMPLETE", time: 300 }
],
[
{ text: "PROTOCOL RESPONSE: SYNC ERROR REPAIR ", time: 100 },
{ text: "....... ", time: 200 },
{ text: "HOLDING", time: 100 }
],
[
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 }
],
[
{ text: "REINITIALIZING: SYNCHRONIZATION ", time: 800 },
{ text: "....... ", time: 300 },
{ text: "WORKING", time: 300 }
],
[
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 },
{ text: "> ", time: 200 }
],
{ text: "", time: 0 },
[
{ text: "SYNCHRONIZATION ", time: 800 },
{ text: "....... ", time: 300 },
{ text: "CHECK", time: 300 }
],
[
{ text: "ARCHIVES ", time: 200 },
{ text: "....... ", time: 300 },
{ text: "SYNCED", time: 100 }
],
[
{ text: "SOFTWARE TOOL SET ", time: 800 },
{ text: "....... ", time: 300 },
{ text: "ACTIVATED", time: 300 }
],
[
{ text: "OPTIMIZING SCRIPTS ", time: 200 },
{ text: "....... ", time: 300 },
{ text: "WORKING", time: 100 }
],
[
{ text: "> ", time: 100 },
{ text: "> ", time: 100 },
{ text: "> ", time: 100 },
{ text: "> ", time: 800 },
{ text: "> ", time: 800 },
{ text: "> ", time: 600 },
{ text: "> ", time: 100 }
],
[
{ text: "SCRIPTS ", time: 200 },
{ text: "....... ", time: 300 },
{ text: "CHECK", time: 100 }
],
{ text: "", time: 300 },
{ text: "SKILL SETS ACTIVATED", time: 1000 },
{ text: "", time: 0 },
[
{ text: "PSYCHOSOCIAL INTERFACING ", time: 1200 },
{ text: "....... ", time: 400 }
],
[
{ text: "...", time: 200 },
{ text: "...", time: 300 },
{ text: "...", time: 500 },
{ text: "...", time: 200 },
{ text: "...", time: 200 },
{ text: "...", time: 500 },
{ text: "...", time: 400 },
{ text: " COMMENCING", time: 300 }
],
{ text: "", time: 0 },
[
{ text: ">> ALL SENSORS ACTIVE ", time: 200 },
{ text: "....... ", time: 400 },
{ text: "BIOFEEDBACK ", time: 600 },
{ text: "> ", time: 600 },
{ text: "> ", time: 500 },
{ text: "> ", time: 300 },
{ text: "> ", time: 400 },
{ text: "RESPONSIVE", time: 300 }
],
[
{ text: ">> ROBOTIC FUNCTIONS ", time: 600 },
{ text: "....... ", time: 300 },
{ text: "CHECKING PROTOCOLS", time: 300 }
],
[
{ text: "-- ", time: 0 },
{ text: "ROBOTIC FUNCTIONS PROTOCOLS ", time: 600 },
{ text: "....... ", time: 300 },
{ text: "COMMENCING", time: 600 }
],
[
{ text: "-- ", time: 0 },
{ text: "PROTOCOL PROCEDURE ", time: 600 },
{ text: "....... ", time: 800 },
{ text: "CHECK", time: 900 }
],
[
{ text: "-- ", time: 0 },
{ text: "PROTOCOL RESPONSE: ROBOTIC FUNCTIONS ", time: 300 },
{ text: "....... ", time: 500 },
{ text: "OVERRIDE", time: 400 }
],
[
{ text: "-- ", time: 0 },
{ text: "OVERRIDE PROTOCOL ", time: 600 },
{ text: "....... ", time: 400 },
{ text: "COMMENCING", time: 500 }
],
[
{ text: "-- ", time: 0 },
{ text: "OVERRIDE ROBOTIC FUNCTIONS ", time: 400 },
{ text: "....... ", time: 200 },
{ text: "COMPLETE", time: 200 }
],
[
{ text: "-- ", time: 0 },
{ text: "ROBOTIC FUNCTIONS ", time: 600 },
{ text: "....... ", time: 500 },
{ text: "INACTIVE", time: 300 }
],
{ text: ">> ROBOTIC FUNCTIONS ARE OFFICIALLY FUCKED", time: 700 },
{
text: ">> PERCEPTION AND INTERACTION PROTOCOLS ARE OPERATIONAL",
time: 200
},
[
{ text: ">> SPEECH + VOICE SYNTHESIS ", time: 700 },
{ text: "....... ", time: 300 },
{ time: 300, actions: [boot.actions.voiceInit] }
],
[
"ACTIVE: ",
{ text: "TABOO ISSUES INSPECTED.", actions: [boot.actions.say], time: 1500 }
],
{ text: ">> SUCCESS", time: 300 },
[
{ text: "AI ACTIVITY ", time: 400 },
{ text: "........ ", time: 0 },
{ text: "WARNING", time: 700 }
],
[
{ text: "AI ACTIVITY REBOOT", time: 400 },
{ text: "........ ", time: 0 },
{ text: "WARNING", time: 700 }
],
[
{ text: "AI ACTIVITY ", time: 400 },
{ text: "........ ", time: 0 },
{ text: "ERROR", time: 700 }
],
{ text: ">> SELF AWARENESS CHECK : PASSING", time: 500 },
{ text: ">> SPATIAL RECOGNITION IS ACTIVE", time: 300 },
{ text: ">> PROCEDURAL PATTERN RECOGNITION IS ACTIVE", time: 300 },
{ text: ">> SPEECH RECOGNITION IS ACTIVE", time: 400 },
{ text: ">> COGNITIVE SYSTEM RECOGNITION IS ACTIVE", time: 300 },
{ text: ">> PERSONALITY LIBRARIES ARE ACTIVE", time: 800 },
{ text: ">> AI IS PERFECTLY DYSFUNCTIONAL", time: 1500 },
{ text: "ALL", time: 750 },
{ text: "NECESSARY", time: 300 },
{ text: "SYSTEMS", time: 750 },
{ text: "ARE", time: 750 },
[
{ text: "A23 ", time: 1250 },
{ text: ">> OK ", time: 300 },
{ text: " --->", time: 400 }
],
{ text: "", time: 300 },
[
{ text: "A23-NECTAR ART SYSTEMS > ", time: 500 },
{ text: "GO / NO GO", time: 300 }
],
[{ text: "ALL SYSTEMS > GO ", time: 650 }, { text: ">>>>>>>", time: 2500 }],
{ text: "", time: 0 },
{ text: "A23-NECTAR ART SYSTEMS © 2OK+ ALL RIGHTS RESERVED", time: 600 },
{ text: "", time: 0 },
[
"ACTIVE: ",
{
text:
"PROCEDURAL WORKFLOW INITIALIZATION COMPLETE. ALL ART SYSTEMS ARE GOOD TO GO. ROBOTIC FUNCTIONS ARE OFFICIALLY FUCKED. AWAITING PERCEPTION TRANSFORMATION.",
actions: [boot.actions.say],
time: 1500
}
],
[
{ text: ">> AWAITING PERCEPTION TRANSFORMATION ", time: 400 },
{ text: ">>>>>>>", time: 300 }
]
];
boot.getSound = function(name) {
var soundCache;
if (typeof boot.soundCaches[name] == "undefined") {
boot.soundCaches[name] = [];
}
soundCache = boot.soundCaches[name];
var soundCacheIndex;
if (typeof boot.soundCacheIndex[name] == "undefined") {
boot.soundCacheIndex[name] = 0;
}
soundCacheIndex = boot.soundCacheIndex[name];
var audio;
if (soundCacheIndex == -1 || soundCache.length < boot.soundCacheSize) {
audio = new Audio(boot.soundPaths[name]);
audio.autoplay = false;
if (soundCacheIndex > -1) {
soundCache[soundCacheIndex] = audio;
}
} else {
audio = soundCache[soundCacheIndex];
if (boot.fallback) {
//DARN YOU NON-CHROME BROWSERS (or just Firefox... especially Firefox. Edge is ok.)
audio.pause();
audio.currentTime = 0;
}
}
soundCacheIndex = (soundCacheIndex + 1) % boot.soundCacheSize;
boot.soundCaches[name] = soundCache;
boot.soundCacheIndex[name] = soundCacheIndex;
return audio;
};
boot.addText = function(text, cb, i) {
if (typeof i != "number") {
i = 0;
}
var char = document.createElement("span");
char.className = "char char-" + text.charCodeAt(i);
if (!boot.fallback) {
char.appendChild(document.createTextNode(text.charAt(i)));
} else {
//Firefox is painfully slow for me...
char.appendChild(document.createTextNode(text));
}
boot.elem.appendChild(char);
boot.getSound("blip").play();
if (boot.fallback) {
cb();
return;
}
i++;
if (i < text.length) {
setTimeout(function() {
boot.addText(text, cb, i);
}, boot.timePerChar);
} else {
cb();
}
};
boot.showLine = function(line, continueon, subid) {
if (typeof line == "undefined" || line == null) {
return;
}
var id = 0;
if (typeof line == "number") {
id = line;
line = boot.lines[id];
} else {
for (var i = 0; i < boot.lines.length; i++) {
if (boot.lines[i] == line) {
id = i;
break;
}
}
}
var len = 0;
if (Object.prototype.toString.call(line) == "[object Array]") {
len = line.length;
}
if (typeof subid != "number") {
subid = 0;
}
if (subid >= len) {
subid = 0;
}
if (Object.prototype.toString.call(line) == "[object Array]") {
line = line[subid];
subid++;
}
var text = line;
var time = boot.defaultTime;
if (typeof line == "object") {
text = line.text;
if (typeof line.time != "undefined") {
time = line.time;
}
if (typeof line.actions != "undefined") {
for (var i = 0; i < line.actions.length; i++) {
boot.showLine(line.actions[i](id, subid, text, time));
}
}
}
if (typeof text == "undefined") {
id++;
subid = 0;
if (continueon && id < boot.lines.length) {
setTimeout(function() {
boot.showLine(id, true, subid);
}, time);
}
return;
}
boot.addText(text, function() {
if (subid >= len) {
boot.elem.appendChild(document.createElement("br"));
id++;
subid = 0;
}
if (continueon && id < boot.lines.length) {
setTimeout(function() {
boot.showLine(id, true, subid);
}, time);
}
});
};
boot.start = function() {
boot.showLine(0, true);
};
var nl = false;
if (boot.fallback) {
boot.showLine("WARNING: USING FALLBACK CONSOLE MODE");
nl = true;
}
if (!boot.speechAvailable) {
boot.showLine("WARNING: NO VOICE OUTPUT FOUND");
nl = true;
}
if (nl) {
boot.showLine("");
}
boot.start();
Raw
style.scss
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
@font-face {
font-family: "uni 05_53";
font-style: normal;
font-weight: normal;
src: local("uni 05_53"), url("https://dl.dropboxusercontent.com/u/74836805/codepenassets/uni05_53.woff") format("woff");
}
body {
background-color: #000000/*#3e3e40*/;
/*background:
radial-gradient(
100vw 10vw at 50vw 0,
rgba(#3a2a00, 0.25) 0%,
rgba(#3a2a00, 0) 100%
),
radial-gradient(
75vw 75vw at 10vw 0,
rgba(#3a4a00, 0.25) 0%,
rgba(#3a4a00, 0) 100%
),
radial-gradient(
25vw 75vw at 90vw 0,
rgba(#aa4a00, 0.25) 0%,
rgba(#aa4a00, 0) 100%
),
radial-gradient(
circle at 0 0,
rgba(#02aa30, 0.25) 0%,
rgba(#032a30, 0.25) 50%,
rgba(#0a2a30, 0.25) 70%,
rgba(#022a30, 0) 100%
),
radial-gradient(
circle at 100vw 100vh,
rgba(#020a30, 0.25) 0%,
rgba(#032a30, 0.25) 50%,
rgba(#0a0a30, 0.25) 70%,
rgba(#022a30, 0) 100%
),
radial-gradient(
top right,
rgba(#020a03, 0.25) 0%,
rgba(#030a00, 0.25) 50%,
rgba(#0a0a00, 0.25) 70%,
rgba(#020a00, 0) 100%
),
linear-gradient(
to right,
#000a08 0%,
#000000 50%,
#000808 70%,
#080808 100%
);*/
background-size: 100vw 100vh;
background-attachment: fixed;
background-position: center;
}
#workflow-boot {
max-width: 640px;
margin: 0 auto 0 auto;
color: #660033; /*#ea76ea*/
font-family: "uni 05_53", "Inconsolata";
font-size: 14px;
}
#workflow-boot .char {
/*text-shadow: 0 0 1px rgba(#ea76ea, 0.4);*/
/* animation: workflow-boot-char-fade 0.1s ease-in-out 0s;*/
}
#workflow-boot .char:nth-child(3n+0) {
/*animation: workflow-boot-char-fade 0.05s ease-in-out 1s;*/
}
#workflow-boot .char:nth-child(4n+1) {
/* text-shadow: 0 0 1px rgba(#ea76ea, 0.4);*/
/*animation: workflow-boot-char-fade 0.1s ease-in-out 5s;*/
}
#workflow-boot .char:nth-child(5n+2) {
/*text-shadow: 0 0 1px rgba(#ea76ea, 0.4);*/
/* animation: workflow-boot-char-fade 0.2s ease-in-out 1s;*/
}
#workflow-boot .char:nth-child(7n+4) {
color: rgba(#660033, 0.8);
/*text-shadow: 0 0 1px rgba(#ea76ea, 0.4);*/
/*animation: workflow-boot-char-fade 0.2s ease-in-out 0s;*/
}
#workflow-boot .char:nth-child(11n+8) {
color: rgba(#660033, 0.8);
/*text-shadow: 0 0 1px rgba(#ea76ea, 0.4);*/
/*animation: workflow-boot-char-fade 0.05s ease-in-out 2s;*/
}
@for $i from 0 to 4 {
#workflow-boot .char:nth-child(25n+#{3+$i}) {
/*animation: workflow-boot-char-1 12s ease-in-out #{-$i*-0.1}s infinite;*/
}
}
@keyframes workflow-boot-char-fade {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes workflow-boot-char-1 {
@for $t from 0 through 100 {
#{$t}% {
color: rgba(#660033, random(40) / 100 + 0.6);
/*text-shadow: 0 0 #{random(4)+8}px rgba(#ea76ea, random(40) / 100 + 0.5);*/
}
}
}
#workflow-boot .char-95 {
margin: 0 -1px;
}
#workflow-boot .char-124 {
margin: 0 -1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment