Skip to content

Instantly share code, notes, and snippets.

@kmancher

kmancher/question.html

Last active November 28, 2017 03:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kmancher/d77d7ad69ea06ee6ed2312fc6b6256fa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kmancher/d77d7ad69ea06ee6ed2312fc6b6256fa to your computer and use it in GitHub Desktop.
Download ZIP
divining librarian
Raw
question.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Divining Librarian</title>
<script src="p5/p5.min.js"></script>
<script src="p5/addons/p5.dom.min.js"></script>
<script src="p5/addons/p5.sound.min.js"></script>
<script src="radiating-lines.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- <a class="logo" href="welcome.html"></a>-->
<div class="center">
<div id="answer"></div>
<div id="attribution"></div>
</div>
<div id="bottomButton">
</div>
<script>
var timer;
window.onload= document.onmousemove= document.onkeypress= function(){
clearTimeout(timer);
timer=setTimeout(function(){location= 'welcome.html'},90000);
}
</script>
</body>
</html>
Raw
radiating-lines.js
var vectors = [];
var maxVectors = 40;
//var bg = color(240, 248, 255);
var xFinal, yFinal;
var textField, askButton, heading;
var txt, verse, letters, table;
var resetButton, homeButton;
var writeVerse, writeAuthor, writeTitle;
function preload() {
bg = loadImage("library5.png");
table = loadTable('quotes.csv');
}
function setup() {
createCanvas(windowWidth, windowHeight);
reset();
}
function reset() {
var i;
background(bg);
noLoop();
textField = createInput('enter your question for the divining librarian');
textField.position(windowWidth / 2, windowHeight / 2);
textField.addClass('prompt-type');
// textField.focus();
// textField.value('enter your question for the divining librarian');
textField.mousePressed(askClear);
heading = createP('what are you searching for?');
heading.position(windowWidth / 2, windowHeight / 2 - 100);
heading.addClass('center');
heading.addClass('prompt');
askButton = createButton('ask');
askButton.position(textField.x, textField.y + 50);
askButton.mousePressed(answer);
askButton.hide();
for (i = 0; i < maxVectors; i++) {
vectors[i] = new Vector(
windowWidth / 2,
windowHeight / 2,
random(windowWidth),
random(windowHeight)
);
}
resetButton = createButton('ask again');
resetButton.addClass('bottom-right');
resetButton.hide();
homeButton = createButton('go home');
homeButton.addClass('bottom-left');
homeButton.hide();
bg = loadImage("library5.png");
}
function askClear() {
if (textField.value('enter your question for the divining librarian')) {
textField.value('');
textField.addClass('question-type');
}
}
function draw() {
var j;
background(bg);
for (i = 0; i < vectors.length; i++) {
vectors[i].move();
vectors[i].display();
}
textField.input(drawVector);
}
function drawVector() {
loop();
askButton.show();
askButton.addClass('fadein');
}
function Vector(x1, y1, xFinal, yFinal) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x1;
this.y2 = y1;
this.xFinal = xFinal;
this.yFinal = yFinal;
this.display = function () {
stroke(random(255), 0, 255);
strokeWeight(2);
noFill();
line(this.x1, this.y1, this.x2, this.y2);
}
this.move = function () {
if (frameCount > 800) {
this.x2 = this.xFinal;
this.y2 = this.yFinal;
return;
}
if (this.remainingX() >= 1) {
this.x2 = this.x2 + 1;
} else if (this.remainingX() <= 1) {
this.x2 = this.x2 - 1;
} else {
this.x2 = this.xFinal;
}
if (this.remainingY() >= 1) {
this.y2 = this.y2 + 1;
} else if (this.remainingY() <= 1) {
this.y2 = this.y2 - 1;
} else {
this.y2 = this.yFinal;
}
}
this.remainingX = function () {
return this.xFinal - this.x2;
}
this.remainingY = function () {
return this.yFinal - this.y2;
}
}
function answer() {
// bg = color(240, 248, 255, 20);
// bg = color(0, 10);
bg = color(0, 10);
textField.hide();
askButton.hide();
heading.hide();
writeQuestion = createDiv(textField.value(), 50, 50);
writeQuestion.addClass('question');
writeQuestion.addClass('center');
setTimeout(writeAnswer, 3000);
resetButton.mousePressed(reload);
homeButton.mousePressed(home);
perspective();
}
function writeAnswer() {
frameRate(30);
writeQuestion.addClass('fadeout');
// writeQuestion.hide();
resetButton.show();
resetButton.addClass('fadein');
homeButton.show();
homeButton.addClass('fadein');
var verse = floor(random(99));
// writeVerse = createDiv(table.get(verse, 0), 10, 10, 650, 450);
writeVerse = createDiv(table.get(verse, 0));
writeVerse.parent('answer');
writeVerse.addClass('answer');
writeVerse.addClass('fadein');
writeAuthor = createSpan(table.get(verse, 1));
writeAuthor.parent('attribution');
writeAuthor.addClass('author');
writeAuthor.addClass('fadein');
bullet = createSpan(' &bull; ');
bullet.parent('attribution');
writeAuthor.addClass('author');
writeAuthor.addClass('fadein');
writeTitle = createSpan(table.get(verse, 2));
writeTitle.addClass('title');
writeTitle.parent('attribution');
writeTitle.addClass('fadein');
}
function reload() {
window.location.href = "question.html";
}
function home() {
window.location.href = "welcome.html";
}
function test() {
bg = loadImage("library5.png");
writeVerse.hide();
writeAuthor.hide();
writeTitle.hide();
textField.show();
textField.value('');
askButton.show();
heading.show();
resetButton.hide();
homeButton.hide();
}
Raw
style.css
@font-face {
font-family: GlosaDisplay-Roman;
src: url('assets/GlosaDisplay-Roman.otf');
}
@font-face {
font-family: GlosaText-Roman;
src: url('assets/GlosaText-Roman.otf');
}
@font-face {
font-family: Forza-Light;
src: url('assets/Forza-Light.otf');
}
@font-face {
font-family: Forza-LightItalic;
src: url('assets/Forza-LightItalic.otf');
}
@font-face {
font-family: Forza-Medium;
src: url('assets/Forza-Medium.otf');
}
@font-face {
font-family: Forza-MediumItalic;
src: url('assets/Forza-MediumItalic.otf');
}
@font-face {
font-family: GrotesqueMTStd Light;
src: url('assets/GrotesqueMTStd Light.otf');
}
@font-face {
font-family: GrotesqueMTStd LightItalic;
src: url('assets/GrotesqueMTStd LightItalic.otf');
}
@font-face {
font-family: GrotesqueMTStd;
src: url('assets/GrotesqueMTStd.otf');
}
@font-face {
font-family: GrotesqueMTStd Italic;
src: url('assets/GrotesqueMTStd Italic.otf');
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
html {
font-size: 16px;
}
body {
width: 100%;
margin: 0px auto;
background-color: aliceblue;
}
h1 {
font-family: "GlosaDisplay-Roman", serif;
font-size: 200px;
color: black;
line-height: 140px;
text-transform: uppercase;
padding-bottom: 36px;
}
h2 {
font-family: "GrotesqueMTStd Light", sans-serif;
font-size: 48px;
color: black;
padding-bottom: 48px;
}
input {
border: none;
background: white;
padding: 10px;
/* border-bottom: 1px black solid;*/
font-size: 18px;
font-family: "GlosaText-Roman", sans-serif;
transform: translate(-50%, -50%);
width: 490px;
}
button {
border: 2px solid #000;
background-color: transparent;
padding-top: 11px;
padding-bottom: 7px;
padding-left: 20px;
padding-right: 20px;
margin-top: 36px;
font-size: 16px;
letter-spacing: 2px;
border-radius: 30px;
color: #000;
font-family: "GrotesqueMTStd", sans-serif;
transform: translate(-50%, -50%);
text-transform: uppercase;
}
button.enter {
transform: translate(0%, 0%);
}
button:hover {
border: 2px solid magenta;
color: magenta;
cursor: pointer;
}
.fullScreenDiv{
width: 95%;
height: auto;
bottom: 0px;
/*
top: 30px;
left: 50px;
right: 50px;
*/
position: absolute;
}
.center{
position: fixed; /* or absolute */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 90%;
}
.bottom-right {
position: fixed; /* or absolute */
top: 92%;
left: 46%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
border: 2px solid #fff;
}
.bottom-left {
position: fixed; /* or absolute */
top: 92%;
left: 54%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
border: 2px solid #fff;
}
#bottomButton {
color: red;
background-color: cyan;
}
p {
font-family: "GrotesqueMTStd Light", sans-serif;
color: black;
font-size: 60px;
margin-bottom: 10px;
padding-top: 30px;
text-align: center;
}
.center p {
width: 1100px;
margin: 0 auto;
}
.prompt {
/* transform: translate(-50%, -50%);*/
/* text-align: right;*/
line-height: 48px;
font-size: 60px;
/* letter-spacing: 3px;*/
padding-bottom: 18px;
}
#answer {
/*
position: fixed; or absolute
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 90%;
*/
/* background: cyan;*/
}
.answer {
font-family: "GlosaDisplay-Roman", serif;
font-size: 80px;
color: aliceblue;
}
.question {
font-family: "GrotesqueMTStd Light", sans-serif;
font-size: 24px;
color: white;
text-transform: uppercase;
letter-spacing: 3px;
}
#attribution {
color: aliceblue;
font-size: 18px;
letter-spacing: 2px;
text-transform: uppercase;
padding-top: 24px;
}
.title {
font-family: "GrotesqueMTStd Italic", sans-serif;
}
.author {
font-family: "GrotesqueMTStd", sans-serif;
}
.fadein {
-webkit-animation: fadeIn 4s;
animation: fadeIn 4s;
}
.fadeindelay {
-webkit-animation: fadeInOut 4s 5s;
animation: fadeInOut 4s 5s;
opacity: 0;
}
.fadeout {
-webkit-animation: fadeOut 2s;
animation: fadeOut 2s;
opacity: 0;
}
.fadeinout1 {
-webkit-animation: fadeInOut 4s 2s;
animation: fadeInOut 4s 2s;
opacity: 0;
}
.fadeinout2 {
-webkit-animation: fadeInOut 5s 4s;
animation: fadeInOut 5s 4s;
opacity: 0;
}
.fadeinout3 {
-webkit-animation: fadeInOut 5s 7s;
animation: fadeInOut 5s 7s;
opacity: 0;
}
.fadeinout4 {
-webkit-animation: fadeInOut 5s 9.5s;
animation: fadeInOut 5s 9.5s;
opacity: 0;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
body.welcome {
/* background-image: url("library-full.jpg");*/
background-color: aliceblue;
background-size: cover;
}
@media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: auto;
height: 100%;
}
}
.prompt-type {
color: lightgray;
text-align: center;
}
.question-type {
color: black;
text-align: left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment