<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>A House of Dust</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Berkshire+Swash');
</style>
<!--
***** Workshop Details *****
participant name: INCLUDE YOUR NAME HERE
location: Northeastern, Room 342, Curry Student Center
date: February 23, 2018
instructors: Mindy Seu, Lillian-Yvonne Bertram
< http://www.mindyseu.com/ >
< https://www.lillianyvonnebertram.com/ >
***** Credits *****
This source material was taken from Nick Montfort's adaptation of A House of Dust:
< http://nickm.com/memslam/a_house_of_dust.html >
< http://nickm.com/ >
It includes the cleaner version created by Laurel Schwulst for her Naming Generator Workshop:
< http://veryinteractive.net/workshops/naming-generator >
< http://laurelschwulst.com/ >
***** Source Material *****
Source 1: Title, Author, Date
< url >
Source 2: Title, Author, Date
< url >
***** START CSS *****
-->
<style>
body {
margin: 75px;
/* You can change the colors, font, and so on below */
font-size: 20px;
font-family: "Courier New", Courier, monospace;
text-transform: ; /* uppercase, lowercase, capitalize */
color:aqua; /* red, blue, hex #, etc */
text-align: ; /* center, left, right, justify */
text-decoration: ; /* overline, line-through, underline */
letter-spacing: ; /* 3px, -3px, etc */
word-spacing: ; /* 10px, 20px, etc */
line-height: ; /* 0.8, 2.5, etc. */
background-color: salmon;
text-shadow: 1px 2px 3px yellow; /* left, down, color --> "2px 5px Xpx(dropshadow)red" */
/* left, down, blur, color --> "2px 5px 10px red" */
p.thicker {
font-weight: 900;
}
}
.list-one {
font-size: 40px;
font-family: 'Berkshire Swash', cursive;
}
}
.list-two {
text-indent: 1em;
letter-spacing: -3px;
}
.list-three {
text-indent: 2em;
}
.list-four {
text-indent: 3em;
}
p {
margin-bottom: 2em;
}
</style>
<!--
***** END CSS *****
-->
<!--
***** START JAVASCRIPT *****
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// list one content
var one = [
"a house of wood",
"a house of brick",
"a house of broken dishes",
"a house of discarded clothing",
"a house of dust",
"a house of glass",
"a house of leaves",
"a house of mud",
"a house of paper",
"a house of plastic",
"a house of roots",
"a house of sand",
"a house of steel",
"a house of stone",
"a house of straw",
"a house of tin",
"a house of weeds"
];
// list two content
var two = [
"underwater",
"among other houses",
"among small hills",
"among high montains",
"by a river",
"by an abandoned lake",
"in a cold, windy climate",
"in a desert",
"in a deserted airport",
"in a deserted church",
"in a deserted factory",
"in a hot climate",
"in a metropolis",
"in a place with both heavy rain and bright sun",
"in an overpopulated area",
"in dense woods",
"in green mossy terrain",
"in heavy jungle undergrowth",
"in Japan",
"in Michigan",
"in southern France",
"inside a mountain",
"on an island",
"on the sea",
"on open ground",
];
// list three content
var three = [
"using natural light",
"using all available lighting",
"using candles",
"using electricity"
];
// list four content
var four = [
"inhabited by very tall people",
"inhabited by all races of men reprensented wearing predominantly red clothing",
"inhabited by american indians",
"inhabited by children and old people",
"inhabited by collectors of all types",
"inhabited by fishermen and families",
"inhabited by french and german speaking people",
"inhabited by friends",
"inhabited by horses and birds",
"inhabited by little boys",
"inhabited by lovers",
"inhabited by negros wearing all colors",
"inhabited by people from many walks of life",
"inhabited by people speaking many languages wearing little or no clothing",
"inhabited by people who eat a great deal",
"inhabited by people who enjoy eating together",
"inhabited by people who love to read",
"inhabited by people who sleep almost all the time",
"inhabited by people who sleep very little",
"inhabited by various birds and fish",
"inhabited by vegetarians",
"inhabited by friends and enemies"
];
// This is a very common randomizing function.
// It takes a list (array) and returns one at random.
function select_random(x){
y = x[Math.floor(Math.random()*x.length)];
return y;
}
// This is the generator function
function generate(){
// Select a random item from each list
var selected_one = select_random(one);
var selected_two = select_random(two);
var selected_three = select_random(three);
var selected_four = select_random(four);
// Make a paragraph and then add the selected (random) item from each list list
$('body').append('<p>');
$('body').append('<div class="list-one">' + selected_one + '</div>');
$('body').append('<div class="list-two">' + selected_two + '</div>');
$('body').append('<div class="list-three">' + selected_three + '</div>');
$('body').append('<div class="list-four">' + selected_four + '</div>');
$('body').append('</p>');
}
// Run the generator every two seconds ("2000" in the code below)
function timeout() {
setTimeout(function () {
generate();
timeout();
}, 2000);
}
generate();
timeout();
});
</script>
<!--
***** END JAVASCRIPT *****
-->
</head>
<body>
<!--
This is the visible portion.
If you want your words or phrases to go side-by-side, change...
<div></div>
to
<span></span>
in the code below.
-->
</body>
</html>