master
km0 2 years ago
parent 25ad8954eb
commit 7d1a608951

BIN
.DS_Store vendored

Binary file not shown.

@ -16,14 +16,15 @@
</head>
<body>
<section id="sticker-container"></section>
<section id="sticker-fix-container"></section>
<section class="page--header">
<header>
<h1 class="title">About</h1>
<!-- <h2 class="subtitle">Sub--title</h2> -->
</header>
<nav>
<a href=".." data-sticker="Back"></a>
<a href="/" data-sticker="Home"></a>
<a href=".." data-sticker-fix="Back"></a>
<a href="/" data-sticker-fix="Home"></a>
</nav>
</section>
<main class="page--content">

@ -0,0 +1,56 @@
{
"vlcsnap-2021-10-25-10h54m02s729.png": {
"description": "A lot of onigiry"
},
"img.png": {
"description": ""
},
"Conformal_grid_before_Mobius_transformation.svg.png": {
"description": ""
},
"etre.png": {
"description": ""
},
"pp.png": {
"description": ""
},
"download.png": {
"description": ""
},
"one_to_one_translation.jpg": {
"description": "* istruzioni per l'uso per traduzione_poesia_italiano_inglese\r\nBenvenuto in traduzione_poesia (1)!\r\n\r\nVorrei che traducessi questa poesia in inglese. Puoi utilizzare un traduttore per ottenere la traduzione di singole parole, ma spero che farai del tuo meglio per fare una scelta ponderata sulla parola che utilizzerai. Ogni parola ha il suo potere!\r\n\r\nQuesta raccolta di traduzioni far\u00e0 parte del materiale che mi servir\u00e0 per utilizzare la mia funzione mashup(), che pu\u00f2 essere utilizzata solo con testi con lo stesso numero di righe. Pertanto, ti chiedo gentilmente di creare gli spazi accanto al testo, in ordine, e creando uno spazio per riga. In questo modo il contenuto estratto sar\u00e0 pronto per essere elaborato.\r\n\r\nIn pratica:\r\n\r\n .a Fai clic e trascina per creare lo spazio in cui inserire la traduzione (riga per riga, in ordine, uno spazio per riga)\r\n .b Fai clic su '' inserisci '' o fai clic sulla '' x '' se non \u00e8 come volevi\r\n\r\nGrazie per la partecipazione!\r\nTorna presto sul nostro sito per vedere come \u00e8 stato utilizzato il tuo contributo :)"
},
"free_fun_translation.jpg": {
"description": "*usage instructions for vernacular translation experiment\r\n\r\n''there is NOT a single way, a most correct way, or a best way to translate a poem.'' \r\n\r\nFollowing this quote, I would like you to translate this poem to the language you prefer/feel more comfortable with/your mother tongue. You can use a translator to obtain the translation of single words, but i hope you will do \r\n\r\nyour best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nInteract with this text as you prefer and translate it in the way you feel, word by word, using negative space, writing on the text, off the text, following the lines or not? \r\n\r\n .a Click and drag to create the space(s) where you want to insert your translation\r\n .b Click ''insert'' or click on the ''x'' if it's not as you wanted\r\n\r\nThank you! Come back to our website to see how your contribution has been used :)"
},
"korean.jpg": {
"description": "\r\nWelcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create a big box next to the text and then insert your translation in the box, in order, line by line. This is so that the content extracted will be ready to be processed!\r\n\r\nIn practice:\r\n\r\n.a Click and drag to create the space where to insert your translation (line by line, in order)\r\n.b Click ''insert'' or click on the ''x'' if it's not as you want\r\nc. Come back on our website soon to see how your contribution has been used.\r\n\r\nThank you for your participation!\r\n:)\r\n"
},
"bulgarian.jpg": {
"description": "Welcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create the spaces next to the text, in order, and one space per line. This is so that the content extracted will be ready to be processed.\r\n\r\n .b Click and drag to create the space where you want to insert your translation (line by line, in order, one space per line)\r\n .c Click ''insert'' or click on the ''x'' if it's not as you want\r\n\r\nThank you for your participation!\r\nGet back on our website soon to see how your contribution has been used."
},
"dutch.jpg": {
"description": "Welcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create the spaces next to the text, in order, and one space per line. This is so that the content extracted will be ready to be processed.\r\n\r\n .b Click and drag to create the space where you want to insert your translation (line by line, in order, one space per line)\r\n .c Click ''insert'' or click on the ''x'' if it's not as you want\r\n\r\nThank you for your participation!\r\nGet back on our website soon to see how your contribution has been used."
},
"french.jpg": {
"description": "Welcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create the spaces next to the text, in order, and one space per line. This is so that the content extracted will be ready to be processed.\r\n\r\n .b Click and drag to create the space where you want to insert your translation (line by line, in order, one space per line)\r\n .c Click ''insert'' or click on the ''x'' if it's not as you want\r\n\r\nThank you for your participation!\r\nGet back on our website soon to see how your contribution has been used."
},
"greek.jpg": {
"description": "Welcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create the spaces next to the text, in order, and one space per line. This is so that the content extracted will be ready to be processed.\r\n\r\n .b Click and drag to create the space where you want to insert your translation (line by line, in order, one space per line)\r\n .c Click ''insert'' or click on the ''x'' if it's not as you want\r\n\r\nThank you for your participation!\r\nGet back on our website soon to see how your contribution has been used."
},
"german.jpg": {
"description": "Welcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create the spaces next to the text, in order, and one space per line. This is so that the content extracted will be ready to be processed.\r\n\r\n .b Click and drag to create the space where you want to insert your translation (line by line, in order, one space per line)\r\n .c Click ''insert'' or click on the ''x'' if it's not as you want\r\n\r\nThank you for your participation!\r\nGet back on our website soon to see how your contribution has been used."
},
"italian.jpg": {
"description": "Welcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create the spaces next to the text, in order, and one space per line. This is so that the content extracted will be ready to be processed.\r\n\r\n .b Click and drag to create the space where you want to insert your translation (line by line, in order, one space per line)\r\n .c Click ''insert'' or click on the ''x'' if it's not as you want\r\n\r\nThank you for your participation!\r\nGet back on our website soon to see how your contribution has been used."
},
"spanish.jpg": {
"description": "Welcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create the spaces next to the text, in order, and one space per line. This is so that the content extracted will be ready to be processed.\r\n\r\n .b Click and drag to create the space where you want to insert your translation (line by line, in order, one space per line)\r\n .c Click ''insert'' or click on the ''x'' if it's not as you want\r\n\r\nThank you for your participation!\r\nGet back on our website soon to see how your contribution has been used."
},
"thai.jpg": {
"description": "*usage instructions for many_to_one_poem_translation\r\n\r\nWelcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create a big box next to the text and then insert your translation in the box, in order, line by line. This is so that the content extracted will be ready to be processed!\r\n\r\nIn practice:\r\n\r\n.a Click and drag to create the space where to insert your translation (line by line, in order)\r\n.b Click ''insert'' or click on the ''x'' if it's not as you want\r\nc. Come back on our website soon to see how your contribution has been used.\r\n\r\nThank you for your participation!\r\n:)\r\n"
},
"rejection_map.jpg": {
"description": "Rejection Map\r\nA Situated Topography of Rejection\r\n\r\nYou are invited to share your experiences with rejection in the city of Rotterdam. Please be aware that your descriptions will be visible for others to read. Your contribution is voluntary and anonymous: You decide what moments and details you want to share and there is no data collected that traces back to you. As rejection is a sensitive topic, you should only share intimate things if you feel comfortable and safe. When sharing moments that involve other individuals, please be mindful that they might not want to be exposed.\r\n\r\n\r\n1. Open the link to the Annotation Compass. You can see the map of Rotterdam\r\n\r\n2. Look at the map and try to think of a moment of rejection you experienced in a certain area in Rotterdam\r\n\r\n3. Use your cursor to select this specific area of the map where you can insert your first experience. It can be a quite small area (if you want to select a building) or a bigger one (if your experience includes a whole neighborhood).\r\n\r\n4. Please choose your own way to describe your moment of rejection. It can be short or long; formal or informal; personal or distanced; poetic or pragmatic; cryptic or explicit; anecdotal or out of context; using vernacular or academic language, slang or mother tongue; using whole sentences, single words, single letters or punctuation only \u2026 Do whatever you feel most comfortable with.\r\n\r\n5. Click \u201dinsert\u201c to save your first description or \u201dx\u201c if you want to delete it.\r\n\r\n6. Follow the same steps to add more moments of rejection if you like. If several moments relate to the same space or area, they can overlap.\r\n\r\nThank you for sharing!\r\n\r\n\r\n[Map of Rotterdam \u00a9 OpenStreetMap contributors]"
}
}

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SI16 - Learning how to walk while catwalking</title>
<!-- style -->
<link rel="stylesheet" href="./static/css/variables.css" />
<link rel="stylesheet" href="./static/css/global.css" />
<link rel="stylesheet" href="./static/css/function.css" />
<!-- script -->
<script src="./static/js/lodash.js"></script>
<script src="./static/js/spawnSticker.js" defer></script>
</head>
<body>
<section id="sticker-container"></section>
<section id="sticker-fix-container"></section>
<section class="page--header">
<header>
<h1 class="title">Shout</h1>
<!-- <h2 class="subtitle">Sub--title</h2> -->
</header>
<nav>
<a href=".." data-sticker-fix="Back"></a>
<a href="/" data-sticker-fix="Home"></a>
</nav>
</section>
<main class="page--content">
<div class="description">
Qui dolor voluptate nostrud laboris. Culpa laboris culpa velit ea. In commodo
eiusmod reprehenderit enim adipisicing.
</div>
<div class="function-io">
<div class="input">
<h3>Input</h3>
<ul>
<li>Text [str]</li>
<li>Volume [int]</li>
</ul>
</div>
<div class="process" data-sticker="Shout"></div>
<div class="output">
<h3>Output</h3>
<ul>
<li>Shouted Text [str]</li>
</ul>
</div>
</div>
<div class="endpoints">
<h3>Enpoints</h3>
<code>
https://hub.xpub.nl/soupboat/si16-app/api/shout/?text=&lt;text&gt;&volume=&lt;volume&gt;
</code>
<div>Example</div>
<code> https://hub.xpub.nl/soupboat/si16-app/api/shout/?text=Hello&volume=5 </code>
</div>
<div class="playground"></div>
<div class="notebook"></div>
</main>
<section class="page--footer">
<footer>Special Issue 16—Learning How to Walk while Catwalking</footer>
</section>
</body>
</html>

@ -17,14 +17,15 @@
</head>
<body>
<section id="sticker-container"></section>
<section id="sticker-fixed-container"></section>
<section class="page--header">
<header>
<h1 class="title">My friend came to try it</h1>
<!-- <h2 class="subtitle">Sub--title</h2> -->
</header>
<nav>
<a href=".." data-sticker="Back"></a>
<a href="/" data-sticker="Home"></a>
<a href=".." data-fixed_sticker="Back"></a>
<a href="/" data-fixed_sticker="Home"></a>
</nav>
</section>
<main class="page--content chat">

BIN
static/.DS_Store vendored

Binary file not shown.

@ -0,0 +1,42 @@
.description {
grid-column: 1 / span 2;
}
.function-io {
margin: 60px 0;
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
place-items: start;
grid-gap: 30px;
}
.function-io > * {
width: 100%;
height: 100%;
}
.function-io .input,
.function-io .output {
background-color: white;
aspect-ratio: 1;
border-radius: 50%;
}
.function-io h3 {
margin: 0;
}
.function-io ul {
font-family: "Necto";
list-style: none;
padding: 0;
}
.endpoints {
grid-column: 1 / -1;
}
.endpoints code {
background-color: white;
}

@ -7,6 +7,7 @@ body {
font-family: var(--font);
font-size: var(--text);
line-height: 1.4;
overflow-x: hidden;
}
h1,
@ -29,13 +30,28 @@ a {
color: currentColor;
}
.sticker {
text-decoration: none;
code {
font-family: "Necto";
}
/* STICKER CONTAINER */
#sticker-container {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
pointer-events: none;
z-index: 100;
min-height: 100vh;
height: 100%;
}
#sticker-fix-container {
position: fixed;
left: 0;
top: 0;
@ -44,7 +60,10 @@ a {
pointer-events: none;
z-index: 1000;
z-index: 300;
min-height: 100vh;
height: 100%;
}
.sticker {
@ -57,6 +76,7 @@ a {
font-size: 18px;
padding: 0 6px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
text-decoration: none;
}
*[data-sticker] {
@ -67,7 +87,7 @@ a {
.page--header {
position: fixed;
z-index: 100;
z-index: 200;
top: 60px;
left: 50%;
@ -93,24 +113,22 @@ header {
border-radius: var(--radius);
background-color: var(--background);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
min-height: 64px;
height: 48px; /* comment this in page with multiple elements in the header */
flex-basis: 48px;
padding: 0 12px;
padding: 0px 12px;
}
.page--header .title {
/* flex-grow: 0; */
/* flex-shrink: 1; */
/* line-height: 1; */
margin: 0;
/* padding: 0 12px; */
}
.page--header .subtitle {
margin: 0;
margin-bottom: 6px;
/* padding: 0 12px; */
}
.title + .subtitle {
margin-top: -6px;
line-height: 1;
margin: 6px 0;
}
nav {
@ -119,8 +137,8 @@ nav {
.page--header nav a {
display: inline-block;
width: 64px;
height: 64px;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid currentColor;
background-color: var(--background);

@ -14,6 +14,7 @@
.negative {
position: relative;
visibility: hidden;
cursor: pointer;
background-color: var(--background);
border-radius: var(--radius);

@ -22,7 +22,7 @@ tr:last-of-type {
}
td {
padding: 24px 0;+++
padding: 24px 0;
}
td.title {

Binary file not shown.

Binary file not shown.

@ -32,3 +32,11 @@
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Necto";
src: url("./Necto-Mono.woff2") format("woff2"), url("./Necto-Mono.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}

@ -5,13 +5,12 @@ var throttleSpawn = _.throttle(spawnSticker, 400);
Array.from(negativeStickers).forEach((spawner) => {
spawner.addEventListener("click", (e) => spawnSticker(e));
// spawner.addEventListener("mousemove", (e) => throttleSpawn(e));
});
function spawnSticker(e) {
e.preventDefault();
e.stopPropagation();
let position = { x: e.clientX, y: e.clientY };
let position = { x: e.pageX, y: e.pageY };
getFromNegative(e.target, position);
}

@ -1,19 +1,41 @@
//
//
// Container is positioned absolute and the stickers scroll
const stickerSpawners = document.querySelectorAll("[data-sticker]");
const container = document.getElementById("sticker-container");
var throttleSpawn = _.throttle(spawnSticker, 400);
Array.from(stickerSpawners).forEach((spawner) => {
spawner.addEventListener("mousemove", (e) => throttleSpawn(e));
});
// spawnSticker(spawner, e);
function spawnSticker(e) {
let position = { x: e.clientX, y: e.clientY };
let position = { x: e.pageX, y: e.pageY };
let content = e.target.dataset.sticker;
createSticker(content, position);
container.appendChild(createSticker(content, position));
}
//
// Container is positioned fixed and the stickers remain in overlay
// (useful for the fixed header)
const fixedStickerSpawners = document.querySelectorAll("[data-sticker-fix]");
const fixedContainer = document.getElementById("sticker-fix-container");
var throttleFixedSpawn = _.throttle(spawnFixedSticker, 400);
Array.from(fixedStickerSpawners).forEach((spawner) => {
spawner.addEventListener("mousemove", (e) => throttleFixedSpawn(e));
});
function spawnFixedSticker(e) {
let position = { x: e.clientX, y: e.clientY };
let content = e.target.dataset.stickerFix;
fixedContainer.appendChild(createSticker(content, position));
}
//
//
// the sticker element is the same for both function
function createSticker(content, position) {
sticker = document.createElement("div");
sticker.classList.add("sticker");
@ -26,5 +48,5 @@ function createSticker(content, position) {
rotate(${Math.random() * 40 - 20}deg)
`;
container.appendChild(sticker);
return sticker;
}

Loading…
Cancel
Save