Merge branch 'main' of https://git.xpub.nl/XPUB/SI20
commit
cc1ac60ec7
@ -0,0 +1 @@
|
|||||||
|
.vscode
|
||||||
@ -1,3 +0,0 @@
|
|||||||
wassup: content list for booklet please write down content you want in the booklet(add files of content you want yourself)
|
|
||||||
|
|
||||||
01 Pacifist Fortnite (4 pages)
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
from glob import glob
|
|
||||||
import os
|
|
||||||
|
|
||||||
# https://devdocs.io/python~3.9/library/glob#glob.glob
|
|
||||||
files = glob("content/**", recursive=True)
|
|
||||||
print(files)
|
|
||||||
print("---------")
|
|
||||||
|
|
||||||
for file in files:
|
|
||||||
#print(file)
|
|
||||||
if file.endswith(".md"):
|
|
||||||
print("===========")
|
|
||||||
print(file)
|
|
||||||
|
|
||||||
html_file = file.replace(".md", ".html")
|
|
||||||
pandoc_cmd = "pandoc -f markdown -t html " + file + " -o " + html_file
|
|
||||||
print(pandoc_cmd)
|
|
||||||
|
|
||||||
# pandoc_cmd = f"pandoc -f markdown -t html { file } -o { html_file }"
|
|
||||||
|
|
||||||
#os.system(pandoc_cmd)
|
|
||||||
print("html file saved!")
|
|
||||||
|
|
||||||
# ---------------
|
|
||||||
# We find all the HTML files,
|
|
||||||
# read the content,
|
|
||||||
# and then collect all that content into a variable called "all_html"
|
|
||||||
|
|
||||||
html_files = glob("content/**", recursive=True)
|
|
||||||
print("---------")
|
|
||||||
|
|
||||||
all_html = ""
|
|
||||||
|
|
||||||
for html_file in html_files:
|
|
||||||
if html_file.endswith(".html"):
|
|
||||||
print(html_file)
|
|
||||||
|
|
||||||
# open the html file and read the content
|
|
||||||
html = open(html_file).read()
|
|
||||||
|
|
||||||
# add this content to all_html
|
|
||||||
all_html = all_html + html
|
|
||||||
|
|
||||||
print("----------")
|
|
||||||
print(all_html)
|
|
||||||
|
|
||||||
template = f"""<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<script src="paged.js/paged.polyfill.js"></script>
|
|
||||||
<link href="paged.js/pagedjs.css" rel="stylesheet" type="text/css">
|
|
||||||
<link href="print.css" rel="stylesheet" type="text/css" media="print">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{ all_html }
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
"""
|
|
||||||
|
|
||||||
output = open("booklet.html", "w")
|
|
||||||
output.write(template)
|
|
||||||
|
|
||||||
# Now open this page in the browser, remember: paged.js needs to be accessed through a webserver.
|
|
||||||
|
|
||||||
# To run a webserver locally, you can use:
|
|
||||||
# cd SI20/booklet/
|
|
||||||
# python3 -m http.server
|
|
||||||
# localhost:8000/booklet.html
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
from glob import glob
|
|
||||||
import os
|
|
||||||
files = glob("content/**", recursive=True)
|
|
||||||
print(files)
|
|
||||||
print("----------")
|
|
||||||
|
|
||||||
for file in files:
|
|
||||||
#print(file)
|
|
||||||
if file.endswith(".md"):
|
|
||||||
print(file)
|
|
||||||
|
|
||||||
html_file = file.replace(".md" , ".html")
|
|
||||||
pandoc_cmd = "pandoc -f markdown -t html" + file + "-o "
|
|
||||||
|
|
||||||
os.system(pandoc_cmd)
|
|
||||||
print("html file saved!")
|
|
||||||
|
|
||||||
|
|
||||||
html_files = glob("content/**", recursive=True)
|
|
||||||
print("----------")
|
|
||||||
|
|
||||||
all_html = ""
|
|
||||||
|
|
||||||
for html_file in html_files:
|
|
||||||
if file.endswith(".html"):
|
|
||||||
print(html_file)
|
|
||||||
#open the html file and read teh content
|
|
||||||
html = open(html_file).read()
|
|
||||||
|
|
||||||
# add this content to all_html
|
|
||||||
all_html += html
|
|
||||||
|
|
||||||
print("------------")
|
|
||||||
print(all_html)
|
|
||||||
|
|
||||||
output = open()
|
|
||||||
Binary file not shown.
@ -1 +0,0 @@
|
|||||||
yay
|
|
||||||
@ -1 +0,0 @@
|
|||||||
#the superstructure text adventure game
|
|
||||||
@ -1 +0,0 @@
|
|||||||
.
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
hello
|
|
||||||
|
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title></title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<script src="paged.js/paged.polyfill.js"></script>
|
||||||
|
<link href="paged.js/pagedjs.css" rel="stylesheet" type="text/css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="stylesheet.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="contenteo">{{ content }}</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
p{color: blue;}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
wassup
|
||||||
|
|
||||||
|
This folder is now all the content for the web and booklet for SIXX.
|
||||||
|
|
||||||
|
# index.html
|
||||||
|
This is the home page for the website
|
||||||
|
|
||||||
|
# style.css
|
||||||
|
🥲
|
||||||
|
|
||||||
|
# 00-booklet folder
|
||||||
|
This is the folder for everything relating to the print version of this information.
|
||||||
|
|
||||||
|
# subfolders
|
||||||
|
These contain all the content for the website and booklet, markdown, images, css and anything else applying to individual sections.
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="generator" content="pandoc" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>textadventureaglaia</title>
|
||||||
|
<style>
|
||||||
|
code{white-space: pre-wrap;}
|
||||||
|
span.smallcaps{font-variant: small-caps;}
|
||||||
|
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||||
|
div.column{flex: auto; overflow-x: auto;}
|
||||||
|
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||||
|
ul.task-list{list-style: none;}
|
||||||
|
ul.task-list li input[type="checkbox"] {
|
||||||
|
width: 0.8em;
|
||||||
|
margin: 0 0.8em 0.2em -1.6em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 id="the-superstructure-text-adventure-game"></h1>click-click, the clicking game a matter of accumulation</h1><br>
|
||||||
|
<p>I wasn't aware about the existence of the clicking games a couple of months ago. When I played for the first time, I couldn't understand why people are intrigued enough in order to devote themselves in clicking . I still struggle a little bit to understand. My main intention was to create a clicking game that would highlight the act of clicking to the player through the interface of the screen. People would see a hand clicking in their screen and then at the next stage a person in front of a screen (with a hand clicking) clicking etc. My poor java script skills didn't allow me to materialise my initial idea, so eventually I came up with really simple version of the click_click game. People click on the click button that makes a "click" sound. Every time they click, a new button is generated. The aim is to click so as to accumulate bricks. A repetitive performance. You click you gain. The end of the game is when you full your screen and build a wall out of click buttons. Then the screen clears automatically and a small victory message appears. What happens when the only function to be performed is clicking? Nothing I guess</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>click</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="graduation.css">
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<span id = "parentbutton"><button onclick = "addbutton1()">click</button></span>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- script to create new button -->
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var countclicks = 0;
|
||||||
|
function addbutton1() {
|
||||||
|
|
||||||
|
var myspan = document.getElementById("parentbutton");
|
||||||
|
|
||||||
|
// creating button element
|
||||||
|
var newbutton = document.createElement('BUTTON');
|
||||||
|
|
||||||
|
// creating text to be
|
||||||
|
//displayed on button
|
||||||
|
var text = document.createTextNode("click");
|
||||||
|
|
||||||
|
// appending text to button
|
||||||
|
newbutton.appendChild(text);
|
||||||
|
|
||||||
|
// appending button to div
|
||||||
|
myspan.appendChild(newbutton);
|
||||||
|
|
||||||
|
// giving the button a click attribute
|
||||||
|
newbutton.setAttribute("onclick","addbutton1()");
|
||||||
|
|
||||||
|
// add click sound to buttons
|
||||||
|
const audio = new Audio("https://www.fesliyanstudios.com/play-mp3/387");
|
||||||
|
audio.play();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// total sum of clicks and cleaning of the screen frim buttons
|
||||||
|
countclicks = countclicks + 1;
|
||||||
|
console.log("countclicks", countclicks);
|
||||||
|
|
||||||
|
if (countclicks >= 406){
|
||||||
|
|
||||||
|
document.body.innerHTML = "";
|
||||||
|
|
||||||
|
alert("Congratulations buddy! You clicked 406 times and you built an entire wall out of clicks. What a productive day!");
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
body{
|
||||||
|
background-color: rgb(179, 107, 179);
|
||||||
|
color: rgb(232, 243, 247);
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
padding: 0,2em;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
color: rgb(94, 46, 139);
|
||||||
|
width: 2.55cm;
|
||||||
|
background-color: rgb(179, 107, 179);
|
||||||
|
border-color: rgb(204, 127, 204);
|
||||||
|
padding: 1px;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
}
|
||||||
|
button:hover{
|
||||||
|
text-shadow: 3px 3px 5px red, 0 0 1em rgb(221, 6, 24), 0 0 0.2em blue;
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="generator" content="pandoc" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>colophon</title>
|
||||||
|
<style>
|
||||||
|
code{white-space: pre-wrap;}
|
||||||
|
span.smallcaps{font-variant: small-caps;}
|
||||||
|
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||||
|
div.column{flex: auto; overflow-x: auto;}
|
||||||
|
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||||
|
ul.task-list{list-style: none;}
|
||||||
|
ul.task-list li input[type="checkbox"] {
|
||||||
|
width: 0.8em;
|
||||||
|
margin: 0 0.8em 0.2em -1.6em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>SI20</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
from glob import glob
|
||||||
|
import os
|
||||||
|
import subprocess
|
||||||
|
import jinja2
|
||||||
|
|
||||||
|
# https://devdocs.io/python~3.9/library/glob#glob.glob
|
||||||
|
# files = glob("content/**", recursive=True)
|
||||||
|
# print(files)
|
||||||
|
print("---------")
|
||||||
|
|
||||||
|
all_html = ""
|
||||||
|
all_md = ""
|
||||||
|
html=[]
|
||||||
|
|
||||||
|
folders = glob("content/*")
|
||||||
|
print(folders)
|
||||||
|
|
||||||
|
for folder in folders:
|
||||||
|
files = glob(folder + "/*")
|
||||||
|
print(files)
|
||||||
|
print("************")
|
||||||
|
|
||||||
|
for file in files:
|
||||||
|
#print(file)
|
||||||
|
if file.endswith(".md"):
|
||||||
|
print("===========")
|
||||||
|
file = file.replace(" ", "\ ")
|
||||||
|
print(file)
|
||||||
|
|
||||||
|
# html_file = file.replace(".md", ".html")
|
||||||
|
# pandoc_cmd = "pandoc -s -c style.css -f markdown -t html " + file + " -o " + html_file
|
||||||
|
# os.system(pandoc_cmd)
|
||||||
|
# print("standalone html files saved!")
|
||||||
|
|
||||||
|
pandoc2 = "pandoc -f markdown -t html " + file
|
||||||
|
html_data = subprocess.run(pandoc2, capture_output=True, text=True).stdout
|
||||||
|
print("html_data: ", html_data)
|
||||||
|
|
||||||
|
# #editing the html before creatings the main file
|
||||||
|
# # filename = os.path.basename(file)
|
||||||
|
# # print("filename", filename)
|
||||||
|
# # html_data = html_data.replace('<img src="','<img src="' + folder + '/')
|
||||||
|
|
||||||
|
# print("This is the html data: ", html_data)
|
||||||
|
|
||||||
|
# # and then collect all that content into a variable called "all_html"
|
||||||
|
# # add this content to all_html
|
||||||
|
# all_html = all_html + html_data
|
||||||
|
html.append(html_data)
|
||||||
|
|
||||||
|
md_data = open(file).read()
|
||||||
|
all_md += "\n"+md_data
|
||||||
|
|
||||||
|
#create md and use pandoc to convert to html
|
||||||
|
output = open("booklet.md", "w")
|
||||||
|
output.write(all_md)
|
||||||
|
output.close()
|
||||||
|
# pandoc_md = "pandoc -s --toc -c style.css -f markdown -t html booklet.md -o booklet.html"
|
||||||
|
# os.system(pandoc_md)
|
||||||
|
print("booklet md files saved!")
|
||||||
|
|
||||||
|
env = jinja2.Environment(loader=jinja2.FileSystemLoader("."))
|
||||||
|
template = env.get_template("booklet.template.html")
|
||||||
|
booklet_html = template.render(content=html)
|
||||||
|
print("this is the html: ", booklet_html)
|
||||||
|
output = open("booklet.html", "w")
|
||||||
|
output.write(booklet_html)
|
||||||
|
output.close()
|
||||||
|
print("booklet html files saved!")
|
||||||
|
|
||||||
|
#take all the css files and write to main css
|
||||||
|
|
||||||
|
|
||||||
|
# Now open this page in the browser, remember: paged.js needs to be accessed through a webserver.
|
||||||
|
|
||||||
|
# To run a webserver locally, you can use:
|
||||||
|
# cd SI20/booklet/
|
||||||
|
# python3 -m http.server
|
||||||
|
# localhost:8000/booklet.html
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="generator" content="pandoc" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>index</title>
|
||||||
|
<style>
|
||||||
|
code{white-space: pre-wrap;}
|
||||||
|
span.smallcaps{font-variant: small-caps;}
|
||||||
|
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||||
|
div.column{flex: auto; overflow-x: auto;}
|
||||||
|
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||||
|
ul.task-list{list-style: none;}
|
||||||
|
ul.task-list li input[type="checkbox"] {
|
||||||
|
width: 0.8em;
|
||||||
|
margin: 0 0.8em 0.2em -1.6em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>The history of Tarot Cards According to History</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="generator" content="pandoc" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>some-gossip-on-gossip</title>
|
||||||
|
<style>
|
||||||
|
code{white-space: pre-wrap;}
|
||||||
|
span.smallcaps{font-variant: small-caps;}
|
||||||
|
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||||
|
div.column{flex: auto; overflow-x: auto;}
|
||||||
|
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||||
|
ul.task-list{list-style: none;}
|
||||||
|
ul.task-list li input[type="checkbox"] {
|
||||||
|
width: 0.8em;
|
||||||
|
margin: 0 0.8em 0.2em -1.6em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Some Gossip on gossip</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 719 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 813 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
@ -0,0 +1,32 @@
|
|||||||
|
---
|
||||||
|
title: Holographic Oracle Deck
|
||||||
|
author: Boyana and Cara
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
:::::{#holo-deck .has-images}
|
||||||
|
# Holographic Oracle Deck
|
||||||
|
## 'Crystals & Energy' is a holographic oracle deck exploring a range of energy sources through the magical (mystical) nature of crystals as energy-storing matter
|
||||||
|
|
||||||
|
'Crystals & Energy' is a holographic oracle deck exploring a range of energy sources through the magical (mystical) nature of crystals and minerals as energy-storing matter.
|
||||||
|
|
||||||
|
Lidia and Artemis, Special Issue 20 guest editors, asked us to modify an oracle deck of our choice. We, Cara and Boyana, prototyped a holographic oracle deck where a type of crystal is coupled with a type of energy resource in a single card in an attempt to talk about the global energy crisis we are facing today. It (the deck) provides an educational experience through the use of a DIY prism and complimentary audiovisual materials, together serving as an immersive learning environment.
|
||||||
|
|
||||||
|
After a quick research, we decided to couple Aquamarine and Liquified Natural Gas (LNG) which we thought would fit nicely as a first example of such a card.
|
||||||
|
|
||||||
|
Why Aquamarine? It looks like water that has been crystallised; stored energy; compression; solidified; being put under pressure or exposed to a specific temperature so that it changes its state (from liquid to solid).
|
||||||
|
Why LNG? It is natural gas that has been liquified; compressed; liquified; being put under pressure or exposed to a specific temperature so it changes its state (from gas to liquid); stores energy that can be channelled later.
|
||||||
|
|
||||||
|
Then, we wrote a short poem weaving the two elements into the everyday narrative. Later this poem served as a script to create a voice narration (one-minute-long audio piece) that went into the video creation process. Although the final text is a slight deviation from our initial idea, we felt inspired by the conversation we had with Steve earlier that day. He talked about his childhood memories of collecting rocks in notebooks, perhaps similar to what geologists do when they document their discoveries. He also mentioned a few things about caverns and a mine (later turned into a museum) located near the city where he used to live.
|
||||||
|
|
||||||
|
To visualise the card, we used a hologram video maker app. The process was easy and fun. All we had to do was simply find a hi-res image of the Aquamarine crystal on a black surface and upload it into the app. Lastly, we made a model of a pyramid prism so that we can demonstrate the prototype fully. To get the full holographic effect, we had to put it on top of a phone screen and play the video, which we uploaded on YouTube and embedded the link onto a website.
|
||||||
|
|
||||||
|
We saw in this prototype a potential to provide new knowledge, create an engaging and fun learning experience around energy sources, and add a sense of magic to everyday life. By combining these different elements, we were hoping to create an unusual experience that can help people better understand and appreciate the importance of energy sources and sustainability. It will be interesting to see how our prototype evolves and what kind of impact it could have on people's perceptions of these topics.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
:::::
|
||||||
@ -1,11 +1,42 @@
|
|||||||
<head>
|
<head>
|
||||||
<style>
|
<style>
|
||||||
h1,
|
body{
|
||||||
h2{
|
|
||||||
font-family: Times;
|
font-family: Times;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
text-shadow: 2px 2px #ddd;
|
/* background-color: #000; */
|
||||||
|
/* color: #ccc; */
|
||||||
|
max-width: 30rem;
|
||||||
|
margin: 2rem auto;
|
||||||
|
line-height: 1.3;
|
||||||
|
letter-spacing: 0.1px;
|
||||||
|
}
|
||||||
|
::selection{
|
||||||
|
background-color: #53018e;
|
||||||
|
color: #ccc;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<h1>Ultimate interactive 1001 Items Console - Collectors edition (working title)</h2>
|
<body>
|
||||||
|
<p>XPUB & PNF present: </p>
|
||||||
|
<h1>CONSOLE</h1>
|
||||||
|
|
||||||
|
<p>Special Issue XX Launch<br>
|
||||||
|
Page Not Found, Den Haag<br>
|
||||||
|
19:00-21:00<br>
|
||||||
|
31.03.23 </p>
|
||||||
|
|
||||||
|
<p>Console is an oracle; an emotional first aid kit that helps you help yourself.
|
||||||
|
Console invites you to open the box and discover ways of healing;
|
||||||
|
Console provides shelter for your dreams, memories and worries.
|
||||||
|
Face the past and encounter your fortune.
|
||||||
|
Console gives you a new vantage point; a set of rituals and practices that help you cope and care;
|
||||||
|
Console asks everyday questions that give magical answers.
|
||||||
|
Are you ready to play? </p>
|
||||||
|
|
||||||
|
<p>This is a free event, no registration is required.</p>
|
||||||
|
|
||||||
|
<p>XPUB is the Master of Arts in Fine Art and Design: Experimental Publishing of the Piet Zwart Institute. XPUB focuses on the acts of making things public and creating publics in the age of post-digital networks.</p>
|
||||||
|
|
||||||
|
<!-- <a href="./spin-wheel/">Wheel of Fortune</a>
|
||||||
|
<a>Oracolotto</a> -->
|
||||||
|
</body>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
---
|
||||||
|
title: Long Time
|
||||||
|
author:
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
:::::{#tetris .has-images}
|
||||||
|
# Long Time
|
||||||
|
## Six Sigma Fortune Telling
|
||||||
|
|
||||||
|
While the future cannot be predicted with certainty, present understanding in various scientific fields allows for the prediction of some far-future events, if only in the broadest outline. These fields include astrophysics, particle physics, evolutionary biology, plate tectonics and sociology. The far future begins after the current millennium comes to an end, starting with the 4th millennium in 3001 CE, and continues until the furthest reaches of future time. This timeline includes alternative future events that address unresolved scientific questions, and is in fact not six sigma accurate at all.
|
||||||
|
|
||||||
|
This timeline (based on Wikipedia's [Timeline of the Far Future](https://en.wikipedia.org/wiki/Timeline_of_the_far_future)) claims to make accurate predictions far into the future at timescales that are difficult to comprehend; beyond our lifetimes, beyond the death of the earth, beyond the death of atoms. The scientific method claims to have an intense relationship to the material world which is "orders of magnitude" more accurate than other ways of interacting with and understanding where we are. The scientist often pits themself as "against" the fortune-teller, the tarot reader, or the mystic, and yet they make even bigger claims about our collective future. Is there any way to disprove the scientist's method in their own mind?
|
||||||
|
|
||||||
|
This web-based game attempts to highlight the uselessness of this approach. Sometimes a human can have no effect on the extreme truth that science offers, or to put it more usefully, sometimes science has nothing to offer humans. This timeline uses scientific and objective distance to avoid the most inevitable and obvious event in the future: your own death. Death is non-relational: no one can die in one's place, and we cannot understand our own death through the death of others (Heidegger, Being and Time, 1962). Just like the scientist, the philosopher doesn't have much to offer solace here. So where do we go to talk about death?
|
||||||
|
|
||||||
|
|
||||||
|
:::::
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="generator" content="pandoc" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>interpretationtext</title>
|
||||||
|
<style>
|
||||||
|
code{white-space: pre-wrap;}
|
||||||
|
span.smallcaps{font-variant: small-caps;}
|
||||||
|
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||||
|
div.column{flex: auto; overflow-x: auto;}
|
||||||
|
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||||
|
ul.task-list{list-style: none;}
|
||||||
|
ul.task-list li input[type="checkbox"] {
|
||||||
|
width: 0.8em;
|
||||||
|
margin: 0 0.8em 0.2em -1.6em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>yay</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 2.0 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
@ -0,0 +1,27 @@
|
|||||||
|
---
|
||||||
|
title: Fortnite
|
||||||
|
author: Stephen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
:::::{#fortnite .has-images}
|
||||||
|
# Sometimes the world as it is and the world as it could be are devastatingly close to each other.
|
||||||
|
|
||||||
|
Is there any point in imagining something that is so similar to the nightmare we already live in? The future is a dream but it's just that dream where you remember putting your keys somewhere but where, and you're wandering around looking for them for what feels like hours. Was it real or not isnt important you were still there. Why are we staying here, what's even here for us? If you don't get them, they'll get you first. Then you wake up and you still can't find the fucking keys. But sometimes it's sunny and you're standing there and there's something cinematic about the whole thing, is it worth it just to be there for that maybe. There's really no difference between a dream about falling and a dream about flying.
|
||||||
|
|
||||||
|
:::::
|
||||||
|
:::::{#fortnite .hide-on-web}
|
||||||
|
You search the entire planet, all seven planets, drinking every last drop, and still no fucking keys. You're just watching the whole thing anyway so enjoy it I guess. If you get the rifle you can use the scope on it to see things in the distance, but then again maybe you don't need to see that far. The start is always the best part. Maybe I left them in the bathroom for some reason? Can I help them, even one of them? They are all so busy killing each other I don't think they can hear. The forests are beautiful here. One time I sat down with some of the bots and really got to know them. Until the players arrive they just sit there together, chatting. They're really nice actually. And then a player ran up beside us, saw that we weren't trying to hurt them, and left. Maybe they were helped, or changed somehow.
|
||||||
|
|
||||||
|
The only reason I'm still here is because you're still here.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
:::::
|
||||||
@ -0,0 +1 @@
|
|||||||
|
#fortnite p{color: purple}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 433 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="generator" content="pandoc" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>caratextadv</title>
|
||||||
|
<style>
|
||||||
|
code{white-space: pre-wrap;}
|
||||||
|
span.smallcaps{font-variant: small-caps;}
|
||||||
|
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||||
|
div.column{flex: auto; overflow-x: auto;}
|
||||||
|
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||||
|
ul.task-list{list-style: none;}
|
||||||
|
ul.task-list li input[type="checkbox"] {
|
||||||
|
width: 0.8em;
|
||||||
|
margin: 0 0.8em 0.2em -1.6em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>i deleted it woops. i want to write a paragraph about my mindfulness
|
||||||
|
game here.</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
rituals_archive will go here
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 7.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 MiB |
@ -0,0 +1,68 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<!--css-->
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||||
|
|
||||||
|
<title>Wheel of Fortune</title>
|
||||||
|
|
||||||
|
<!--P5.MIN.JS-->
|
||||||
|
<script src="p5.min.js" ></script>
|
||||||
|
<script>
|
||||||
|
console.log("hey there");
|
||||||
|
function preload(){
|
||||||
|
img=loadImage('wheel-of-fortune')
|
||||||
|
}
|
||||||
|
function setup() {
|
||||||
|
createCanvas(windowWidth, windowHeight);
|
||||||
|
button = createButton("spin the wheel!");
|
||||||
|
button.position(windowWidth/2-250, windowHeight/2);
|
||||||
|
button.mousePressed(spin);
|
||||||
|
}
|
||||||
|
|
||||||
|
var spinning = 1;
|
||||||
|
var currentSpinning = 0;
|
||||||
|
function spin(){
|
||||||
|
spinning = 1800 + random(0,500);
|
||||||
|
currentSpinning = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function card(){
|
||||||
|
rect(0, 0, 55, 55);
|
||||||
|
console.log("hey pop up here");
|
||||||
|
}
|
||||||
|
function draw() {
|
||||||
|
background(220);
|
||||||
|
imageMode(CENTER);
|
||||||
|
angleMode(DEGREES);
|
||||||
|
translate (windowWidth/2, windowHeight/2);
|
||||||
|
rotate(currentSpinning);
|
||||||
|
image (img,0,0,200,200);
|
||||||
|
currentSpinning = currentSpinning+10;
|
||||||
|
if (currentSpinning > spinning){
|
||||||
|
currentSpinning = spinning;
|
||||||
|
card();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="bg-image"></div>
|
||||||
|
<div class="bg-text">
|
||||||
|
<h1>Spin the Wheel of Fortune!</h1>
|
||||||
|
<p>Welcome, my dear!
|
||||||
|
|
||||||
|
<br>This exercise you are about to start revolves around healing, in a sense of reconnecting to what is essential and authentic about yourself. As we understand the true nature of our suffering, we can evoke compassion for ourselves as we move through our uncomfortable feelings on the path to healing and peace.
|
||||||
|
|
||||||
|
<br>Here are a few things I prepared for you before you begin:
|
||||||
|
<br>Have a strong sense of intention to commit to this exercise for some time.
|
||||||
|
<br>Find a quiet room, free of distraction.
|
||||||
|
<br>Get a notebook and a pen. Handwriting will engage your mind more actively and profoundly, help you connect with yourself, and enable the tracing of your progress over time.
|
||||||
|
|
||||||
|
<br>I will be guiding you through a series of carefully collected questions written by different authors, some well-known and others unknown. You begin the exercise by spinning the Wheel of Fortune you will find at https://issue.xpub.nl/20/wheel.
|
||||||
|
After a few seconds, a question appears on the screen. Then, you take a photo slide from the deck and try to thankful of an answer to that question by looking at it and the tiny film simultaneously.</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,53 @@
|
|||||||
|
html {
|
||||||
|
position: relative; /* Make the html element a positioned parent */
|
||||||
|
}
|
||||||
|
|
||||||
|
html::before { /* Add a pseudo-element to the html element */
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: -1; /* Set a negative z-index to move the pseudo-element below the content */
|
||||||
|
background: url(bg-images/bg1.jpg) no-repeat center center fixed;
|
||||||
|
-webkit-background-size: cover;
|
||||||
|
-moz-background-size: cover;
|
||||||
|
-o-background-size: cover;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
/* Add animation properties */
|
||||||
|
-webkit-animation: spin 100s linear infinite;
|
||||||
|
-moz-animation: spin 100s linear infinite;
|
||||||
|
-ms-animation: spin 100s linear infinite;
|
||||||
|
-o-animation: spin 100s linear infinite;
|
||||||
|
animation: spin 100s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Define the spin animation */
|
||||||
|
@keyframes spin {
|
||||||
|
from {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
-moz-transform: rotate(0deg);
|
||||||
|
-ms-transform: rotate(0deg);
|
||||||
|
-o-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
-moz-transform: rotate(360deg);
|
||||||
|
-ms-transform: rotate(360deg);
|
||||||
|
-o-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
title: Tetris Fantasies
|
||||||
|
author:
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
:::::{#tetris .has-images}
|
||||||
|
# Tetris Fantasies
|
||||||
|
### Death, Geometry and the Structure of the Individual
|
||||||
|
|
||||||
|
Tetris is a game where a single player is encouraged to organise the chaos given to them from above, a limited space for play of ten by twenty units leads to a limited ability to approach the perfection implied by the simple shapes that are encountered in the world (always a collection of four squares, in their seven permutations). The harnesses of time and gravity make perfection impossible in this world; instead the player can only attempt, approach, increase their efficiency. A life's function approaching the limit, there is no way to win, only to get higher and higher scores, to live as long as possible through increased throughput. Death is inevitable in Tetris, and each passing block seems to come faster than the last. Why does it feel like everything just keeps getting harder?
|
||||||
|
|
||||||
|
There are many squares to be organised in tetris, an infinite number apparently, but there is only one player organising them. Other people can only be seen by this individual in faint ghosts; their high scores that are there only to be beaten. And the current player can only hope to reach those people through leaving their own mark on the high score table. Employee-of-the-month, world's-best-mom. But maybe there is an alternative, a world where there is more to each falling tetromino than simply an obstacle to be overcome, a problem to be solved. Maybe there is a story behind the fatal pixels, a bigger space than the 10 x 20 grid on the screen. Maybe there are humans out there with more to them than what they produce.
|
||||||
|
|
||||||
|
This fanfic takes the form of a series of hand-drawn illustrations depicting fantastical tetris pieces, each of which is accompanied by a fragment of a story. The cards can be read and arranged in any order, intentionally removing the linear and framed limits of the original tetris, although the illustration and text on any one card have a relationship to eachother of some sort.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--  -->
|
||||||
|
|
||||||
|
:::::
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@ -0,0 +1,32 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="generator" content="pandoc" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>textadventureaglaia</title>
|
||||||
|
<style>
|
||||||
|
code{white-space: pre-wrap;}
|
||||||
|
span.smallcaps{font-variant: small-caps;}
|
||||||
|
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||||||
|
div.column{flex: auto; overflow-x: auto;}
|
||||||
|
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||||
|
ul.task-list{list-style: none;}
|
||||||
|
ul.task-list li input[type="checkbox"] {
|
||||||
|
width: 0.8em;
|
||||||
|
margin: 0 0.8em 0.2em -1.6em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 id="the-superstructure-text-adventure-game"></h1>Super(de)construction, a text-adventure game</h1><br>
|
||||||
|
<p>My text-adventure game was (first and foremost a struggle and) an attempt to dive a little bit into the world of python and deal peacefully with the potential trauma of coding. The first unsuccessful try started by making a map on paper with all the possible rooms, corridors, spaces and the potential inputs of the player. It was proved to be a too ambitious plan though. So this was the time when the super(de)construction game was born! My intention was to make a fan fiction text adventure game(!) of the marxist superstructure theory. There are three basic rooms where the player can navigate : the Base-ment, the Apparatus and the Megaroom. People can grab specific "objects" from each room and check their inventory (for example you can have unpaidlabour, church, mostlywhitemen from base-ment, apparatus and megaroom respectively in the same bag!). The aim of the game is to accumulate enough points in order to bring eventually the revolution and win. The fermentation and the radicalization happen only in the base-ment.
|
||||||
|
Will you be part of the revolutionary class?</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
# the superstructure text adventure game
|
||||||
Loading…
Reference in New Issue