diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5fc26d2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/static/img +/static/html +/static/video diff --git a/.ipynb_checkpoints/flask_boat-checkpoint.py b/.ipynb_checkpoints/flask_boat-checkpoint.py new file mode 100644 index 0000000..35f8070 --- /dev/null +++ b/.ipynb_checkpoints/flask_boat-checkpoint.py @@ -0,0 +1,122 @@ +# IMPORT +import os + +from flask import Flask, render_template, request, url_for, redirect, jsonify, abort, send_from_directory +import markdown +import frontmatter +from datetime import datetime + + +# FUNCTIONS + + +def list_files(folder, remove_ext=False): + ''' Read all the functions in a folder ''' + names = [] + for entry in os.scandir(folder): + # add to the list only proper files + if entry.is_file(follow_symlinks=False): + # remove the extension from the filename + n = os.path.splitext(entry.name)[0] + if remove_ext: + n = entry.name + names.append(n) + return names + + +def list_folders(folder): + ''' Return all the folders in a folder ''' + names = [] + for entry in os.scandir(folder): + # add to the list only proper files + if not entry.name.startswith('.') and entry.is_dir(): + # remove the extension from the filename + names.append(entry.name) + return names + + +def get_md_contents(filename, directory='./contents'): + ''' Return contents from a filename as frontmatter handler ''' + with open(f"{directory}/{filename}", "r") as f: + metadata, content = frontmatter.parse(f.read()) + html_content = markdown.markdown(content, extensions=['markdown.extensions.attr_list','markdown.extensions.codehilite','markdown.extensions.fenced_code']) + return metadata, html_content + + +# FLASK APP +base_url = "~kamo" +projects = 'projects' + +# create flask application +app = Flask(__name__, + static_url_path=f'/soupboat/{base_url}/static', + static_folder=f'/soupboat/{base_url}/static') +# Markdown(app, extensions=['extra']) +# app.jinja_env.extend(jinja2_highlight_cssclass = 'codehilite') + + +# add the base_url variable to all the flask templates +@app.context_processor +def set_base_url(): + return dict(base_url=base_url) + + +# Homepage +@app.route(f"/{base_url}/") +def home_page(): + + # get the basic info of the website from the /contents/home.md file + meta, content = get_md_contents("home.md") + projects_list = [] + for project in list_folders("./projects"): + project_info = get_md_contents("documentation.md", + f"./{projects}/{project}")[0] + project_date = datetime.strptime(project_info['date'], '%d/%m/%Y') + project_info['date'] = datetime.strftime(project_date, '%d %b, %y') + project_info['categories'].sort() + + project_info['slug'] = project + projects_list.append(project_info) + + projects_list.sort(reverse=True, key=lambda project: datetime.strptime( + project['date'], '%d %b, %y')) + + # get the list of the projects, the functions, and the corpora + home = { + **meta, + "content": content, + "projects": projects_list + } + return render_template("home.html", **home) + + +# For generic pages we can include a common template and change only the contents +@app.route(f"/{base_url}//") +def dynamic_page(slug=None): + # meta is a dictionary that contains all the attributes in the markdown file (ex: title, description, soup, etc) + # content is the body of the md file aka the text content + # in this way we can access those frontmatter attributes in jinja simply using the variables title, description, soup, etc + meta, content = get_md_contents(f"{slug}.md") + return render_template("page.html", **meta, content=content) + + +# Single project +@app.route(f"/{base_url}/projects//") +def p_info(project=None): + meta, content = get_md_contents("documentation.md", + f"./{projects}/{project}") + template = 'project.html' + if 'template' in meta: + template = meta['template'] + return render_template(template, **meta, content=content) + + + + +@app.route(f'/{base_url}/projects//') +def sendStaticFiles(project, filename): + return send_from_directory(app.root_path + f'/projects/{project}/', filename, conditional=True) + + +# RUN +app.run(port="3132") diff --git a/09-28-2021-lifeboats/index.html b/09-28-2021-lifeboats/index.html deleted file mode 100644 index 3de1f5d..0000000 --- a/09-28-2021-lifeboats/index.html +++ /dev/null @@ -1,165 +0,0 @@ - - - - - - - ⛵ Lifeboats - 09.28.2021 - - - - - - -
-

Text Traversing

-
- Cara + Mitsa + Emma + Famo
- @Special Issue 09.28.2021 - back -
-
-

Text Traversing

-
    -
  • - --> Which texts will you traverse? will you make a "quote landscape" from - the different texts brought today or stay with one single text? -
    • -
  • - --> Identify patterns / gather observations / draw the relations between the - words/paragraphs/sounds -
    • -
  • - --> What are markers of orientation you would like to set for this text? -
    • -
  • --> Where should the reader turn?
    • -
  • - --> What are the rhythms in the text and how can they be - amplified/interrupted/multiplied? -
    • -
  • --> Make a score or a diagram or a script to be performed out loud
    • -
-
- -
- What if we could use some excerpts from all of what we are reading now as lifeboats - in a sea of text? An attempt to play around with the continous permutations between - contents and contexts. - -

- Aviation is the same as seafaring,
- it’s the science of getting lost -

-

- Italian is a pretty sad case
- Greece and Cyprus are all a lie
- Let us smash some straight assholes -

- -

- The isolation module has an air of sadness
- Wait a second, because I lose you all the time
- It is impossible to separate the software from the human -

- -

- Many things disappear in the sea
- The sirens are taken for wonders
- “Who is doing the talking?,” he asks—“At least two voices” -

- -

- The cat is too clean to want to be human.
- Charge the space with your own memory
- But is it Heaven or Las Vegas? -

- -

- Listen carefully for the voices inside the code and the voices inside your mind -
- Everyday I’m so eager to see that red-haired girl on the monitor
- Shame on the worker shame on the slave -

- -

- The archive protects the software analyst
- The map is not the territory
- Where do I feel at home? -

- -
-
-
- Humans have always lived in a hybrid environment surrounded by artificial and - natural objects. The artificial and the natural are not two separate realms, nor - are artificial objects simply instruments with which to conquer the natural; - instead, they constitute a dynamic system that conditions human experience and - existence. And precisely because the artificial is constantly developing toward - greater concretization, it demands constant reflection on its singular - historical condition. The milieu in which we live has also changed. Videotapes - have been replaced by YouTube videos, and dinner invitations are no longer - issued through letters, less and less by telephone calls and e- mails, but more - often by Facebook event invitations. These objects are basically data, sharable - and controllable; they can be made visible or invisible through the - configuration of the system. This book proposes to conduct an investigation of - these digital objects. The reader may already have different ideas of what a - digital object is, for example, a bug, a virus, a hardware component, a gadget, - a piece of code, a bunch of binary numbers. To allow for a more focused - investigation, I will limit the scope of this book to data. By digital objects, - I mean objects that take shape on a screen or hide in the back end of a computer - program, composed of data and metadata regulated by structures or schemas. - Metadata literally means data about data. Schemas are structures that give - semantic and functional meaning to the metadata; in computation, they are also - called ontologies— a word that has immediate associations with philosophy. -
-
- - -
- - diff --git a/09-28-2021-lifeboats/start.js b/09-28-2021-lifeboats/start.js deleted file mode 100644 index 2d39222..0000000 --- a/09-28-2021-lifeboats/start.js +++ /dev/null @@ -1,35 +0,0 @@ -let background = document.getElementById("background"); -let stanze = document.getElementsByClassName("stanza"); -let reset = document.getElementById("reset"); - -reset.addEventListener("click", (e) => { - quotes = getQuotes(); - lifeboat = lifeboats(); - offset = Math.floor((Math.random() * background.innerHTML.length) / 2); -}); - -let sea = background.innerHTML; -let quotes = getQuotes(); -let lifeboat = lifeboats(); -let offset = 0; - -setInterval(() => moveText(), 100); - -function getQuotes() { - let stanza = stanze[Math.floor(Math.random() * stanze.length)]; - return stanza.getElementsByClassName("quote"); -} - -function lifeboats() { - let boats = ""; - Array.from(quotes).forEach((quote) => { - boats += quote.outerHTML; - }); - return boats; -} - -function moveText() { - let text = sea.slice(0, offset) + lifeboat + sea.slice(offset); - background.innerHTML = text; - offset++; -} diff --git a/09-28-2021-lifeboats/style.css b/09-28-2021-lifeboats/style.css deleted file mode 100644 index 9e82efe..0000000 --- a/09-28-2021-lifeboats/style.css +++ /dev/null @@ -1,111 +0,0 @@ -html, -body { - margin: 0; - font-size: 1.125rem; - line-height: 1.4; -} - -.title { - text-align: center; - margin-top: 32px; - margin-bottom: 0; -} - -.meta { - text-align: center; - margin-bottom: 32px; -} - -.contents { - padding: 0 32px; -} - -.contents > * { - max-width: 800px; - margin: 0 auto; -} - -.intro { - background-color: tomato; - border-radius: 16px; - padding: 16px; - margin: 16px auto; -} -.intro h2 { - margin-top: 0; - margin-bottom: 16px; - font-weight: normal; -} - -.process h2, -.process p { - text-align: center; -} - -ul { - margin: 0; - padding: 0; - list-style: none; -} - -li + li { - margin-top: 1em; -} - -a { - color: tomato; -} - -a::after { - content: "⤴"; -} - -.process { - margin: 32px auto; -} - -.demo { - margin: 0 auto; - max-width: 1200px; - margin-top: 32px; - font-size: 1.5rem; -} - -#reset { - display: block; - margin: 0 auto; - border: none; - background: none; - text-align: center; - font-size: 1.125rem; - color: tomato; - text-decoration: underline wavy tomato 2px; - - cursor: pointer; - - transition: width 10s ease-out; - width: 100px; -} - -#reset:hover { - width: 400px; -} - -.background { - color: currentColor; - margin: 32px; - line-height: 1.6; - text-align: justify; - word-break: break-all; -} - -.quote { - background-color: white; - color: tomato; - padding: 0 0.3em; - border-radius: 1em; -} - -.hidden { - display: none; -} diff --git a/10-05-2021-weaving/files/.ipynb_checkpoints/result-checkpoint.html b/10-05-2021-weaving/files/.ipynb_checkpoints/result-checkpoint.html deleted file mode 100644 index 3a637d8..0000000 --- a/10-05-2021-weaving/files/.ipynb_checkpoints/result-checkpoint.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - Document - - - -
- - ThispublicationistheViolencelands.Hundredsinitialofresulttroopsofaresearchbreakintoaprojectthatbeganincity.Atthat2010momentwhentheAnneTeresaDecitystartsrecordingKeersmaekeraddressedthefollowingitspain.Bodiesquestionaretotornme.Iandpunctured.paraphrase:IamInhabitantsmemorisetheassaultrevivinginmystuttersfourearlyworksandfragmentsrefractedinwhichImyselfbytrauma.BeforewillthedanceInternetforthelastisswitchedofftime.Isthis,thousandsofphoneancamerasoccasionlighttowritetheseup.Peoplechoreographiesdown?Faserisktheirlivesto,recordFourtheMovementstothehellsurroundingthemMusicofSteveReich.Astheyfrantically(call1982and),RosastexteachotherdanstRosas(1983,theircommunicationerupts)into,hundredsElena'sAriaofstar-shapednetworks(1984),.OthersthrowsignalsandintoBartok/Mikrokosmosthe(originallycalledvoidofsocialMikrokosmos,1987mediaandencryptedmessaging),werehopingtobeperformedtheywillbeinarowforpickedupbysomeonethe.firstMeanwhiletime.The,theenvironmentseriesformedunderthecapturestraces.Unpavedtitleground``registersEarlyWorks''thetracksofwasgoingtoenablelongcolumnsofarmouredavehiclesreflective.insightintofourLeavesonvegetationdistinctivedirectionsinthereceivethesootofdevelopmenttheirofexhaustchoreographyinawhilethesoillargeoeuvre.FaseabsorbsandretainsthewasidentifyingDechemicalsKeersmaeker'sreleasedbybanned - -
- - diff --git a/10-05-2021-weaving/files/.ipynb_checkpoints/style-checkpoint.css b/10-05-2021-weaving/files/.ipynb_checkpoints/style-checkpoint.css deleted file mode 100644 index 49ccdca..0000000 --- a/10-05-2021-weaving/files/.ipynb_checkpoints/style-checkpoint.css +++ /dev/null @@ -1,21 +0,0 @@ -html { - font-size: 2rem; -} - -.text { - text-align: justify; - max-width: 60ch; - margin: 50px auto; -} - -span::after { - content: " "; -} - -.text1 { - color: red; -} - -.text2 { - color: blue; -} diff --git a/10-05-2021-weaving/files/.ipynb_checkpoints/unthought-checkpoint.txt b/10-05-2021-weaving/files/.ipynb_checkpoints/unthought-checkpoint.txt deleted file mode 100644 index a0552fa..0000000 --- a/10-05-2021-weaving/files/.ipynb_checkpoints/unthought-checkpoint.txt +++ /dev/null @@ -1 +0,0 @@ -Violence lands. Hundreds of troops break into a city. At that moment the city starts recording its pain. Bodies are torn and punctured. Inhabitants memorise the assault in stutters and fragments refracted by trauma. Before the Internet is switched off, thousands of phone cameras light up. People risk their lives to record the hell surrounding them. As they frantically call and text each other, their communication erupts into hundreds of star-shaped networks. Others throw signals into the void of social media and encrypted messaging, hoping they will be picked up by someone. Meanwhile, the environment captures traces. Unpaved ground registers the tracks of long columns of armoured vehicles. Leaves on vegetation receive the soot of their exhaust while the soil absorbs and retains the identifying chemicals released by banned ammunition. The broken concrete of shattered homes records the hammering collision of projectiles. Pillars of smoke and debris are sucked up into the atmosphere, rising until they mix with the clouds, anchoring this strange weather at the places the bombs hit \ No newline at end of file diff --git a/10-05-2021-weaving/files/.ipynb_checkpoints/weave-checkpoint.py b/10-05-2021-weaving/files/.ipynb_checkpoints/weave-checkpoint.py deleted file mode 100644 index 15d5b98..0000000 --- a/10-05-2021-weaving/files/.ipynb_checkpoints/weave-checkpoint.py +++ /dev/null @@ -1,88 +0,0 @@ -import nltk -from nltk.tokenize import word_tokenize - -# open two text files as text1 and text2 -with open('./rosas.txt', 'r') as result1: - text1 = result1.read() - -with open('./unthought.txt', 'r') as result2: - text2 = result2.read() - - -# HTML TOKENIZER (word + span) -# return a list of tag from a text -# each item in the list is transformed into a html tag, -# with the class defined by the text_class argument -# -# es: to_html('Lorem ipsum dolor', 'test') -# return -# [ -# "Lorem", -# "ipsum", -# "dolor" -# ] - -def to_html(text, text_class): - text_html = [] - text_list = word_tokenize(text) - for word in text_list: - text_html += ['' + word + ''] - return text_html - - -# WEAVER -# weave two texts following a pattern structured as a string of A and B -# es: ABABAAAABBBB -# the repetition argument specifies how many times the pattern is repeated -# the start1 and start2 arguments specify the starting point in the texts' array -# it returns a string - -def weave(text1, text2, pattern, repetition, start1=0, start2=0): - embroidery = '' - text1_cursor = start1 - text2_cursor = start2 - repeated_pattern = pattern * repetition - for choice in repeated_pattern: - if choice == 'A': - embroidery += text1[text1_cursor] - text1_cursor += 1 - if choice == 'B': - embroidery += text2[text2_cursor] - text2_cursor += 1 - return embroidery - -# DEMO - - -text_a = to_html(text1, 'text1') -text_b = to_html(text2, 'text2') -text_embroidery = weave(text_a, text_b, 'AAAABBBBABABAAABBB', 16) - -# BASIC HTML5 boilerplate -html_boilerplate = ''' - - - - - - - Document - - - -
- - {{{contents}}} - -
- - -''' - - -# the {{{contents}}} line will be replaced with our text_embroidery -html_out = html_boilerplate.replace('{{{contents}}}', text_embroidery) - -# Write the results in the index.html file -with open('result.html', 'w') as index: - index.write(html_out) diff --git a/10-05-2021-weaving/files/result.html b/10-05-2021-weaving/files/result.html deleted file mode 100644 index 3a637d8..0000000 --- a/10-05-2021-weaving/files/result.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - Document - - - -
- - ThispublicationistheViolencelands.Hundredsinitialofresulttroopsofaresearchbreakintoaprojectthatbeganincity.Atthat2010momentwhentheAnneTeresaDecitystartsrecordingKeersmaekeraddressedthefollowingitspain.Bodiesquestionaretotornme.Iandpunctured.paraphrase:IamInhabitantsmemorisetheassaultrevivinginmystuttersfourearlyworksandfragmentsrefractedinwhichImyselfbytrauma.BeforewillthedanceInternetforthelastisswitchedofftime.Isthis,thousandsofphoneancamerasoccasionlighttowritetheseup.Peoplechoreographiesdown?Faserisktheirlivesto,recordFourtheMovementstothehellsurroundingthemMusicofSteveReich.Astheyfrantically(call1982and),RosastexteachotherdanstRosas(1983,theircommunicationerupts)into,hundredsElena'sAriaofstar-shapednetworks(1984),.OthersthrowsignalsandintoBartok/Mikrokosmosthe(originallycalledvoidofsocialMikrokosmos,1987mediaandencryptedmessaging),werehopingtobeperformedtheywillbeinarowforpickedupbysomeonethe.firstMeanwhiletime.The,theenvironmentseriesformedunderthecapturestraces.Unpavedtitleground``registersEarlyWorks''thetracksofwasgoingtoenablelongcolumnsofarmouredavehiclesreflective.insightintofourLeavesonvegetationdistinctivedirectionsinthereceivethesootofdevelopmenttheirofexhaustchoreographyinawhilethesoillargeoeuvre.FaseabsorbsandretainsthewasidentifyingDechemicalsKeersmaeker'sreleasedbybanned - -
- - diff --git a/10-05-2021-weaving/files/rosas.txt b/10-05-2021-weaving/files/rosas.txt deleted file mode 100644 index 6b92dd1..0000000 --- a/10-05-2021-weaving/files/rosas.txt +++ /dev/null @@ -1,20 +0,0 @@ -This publication is the initial result of a research project that began -in 2010 when Anne Teresa De Keersmaeker addressed the following question -to me . I paraphrase: I am reviving my four early works in which I myself -will dance for the last time . Is this an occasion to write these choreographies down? Fase, Four Movements to the Music of Steve Reich (1982) , -Rosas danst Rosas (1983) , Elena's Aria (1984) , and Bartok/Mikrokosmos -(originally called Mikrokosmos, 1 987) were to be performed in a row for -the first time . The series formed under the title "Early Works" was going -to enable a reflective insight into four distinctive directions in the -development of choreography in a large oeuvre. Fase was De Keersmaeker ' s -first programmatic statement of formal-abstract choreography to the music -of a composer who will return several times in her oeuvre; Rosas danst -Rosas confirmed a rigorous structural approach to choreographic composition as well as dramaturgical development with solely choreographic -means and gave rise to a new dance idiom and style known as Rosas; -Elena's Aria pointed to the theatrical strain of composing words close -to movement and uncovered choreographic structure in the absence of -music; the choreography to Bart6k' s String Quartet No. 4 reasserted the -choreographer' s conunitment to classical music, a case of dexterous intertwining of distinct compositional principles of music and dance which -is nowadays becoming rather exceptional . These four works introduce four -lines that run through more than forty choreographies De Keersmaeker has -made to this day . \ No newline at end of file diff --git a/10-05-2021-weaving/files/style.css b/10-05-2021-weaving/files/style.css deleted file mode 100644 index 49ccdca..0000000 --- a/10-05-2021-weaving/files/style.css +++ /dev/null @@ -1,21 +0,0 @@ -html { - font-size: 2rem; -} - -.text { - text-align: justify; - max-width: 60ch; - margin: 50px auto; -} - -span::after { - content: " "; -} - -.text1 { - color: red; -} - -.text2 { - color: blue; -} diff --git a/10-05-2021-weaving/files/unthought.txt b/10-05-2021-weaving/files/unthought.txt deleted file mode 100644 index a0552fa..0000000 --- a/10-05-2021-weaving/files/unthought.txt +++ /dev/null @@ -1 +0,0 @@ -Violence lands. Hundreds of troops break into a city. At that moment the city starts recording its pain. Bodies are torn and punctured. Inhabitants memorise the assault in stutters and fragments refracted by trauma. Before the Internet is switched off, thousands of phone cameras light up. People risk their lives to record the hell surrounding them. As they frantically call and text each other, their communication erupts into hundreds of star-shaped networks. Others throw signals into the void of social media and encrypted messaging, hoping they will be picked up by someone. Meanwhile, the environment captures traces. Unpaved ground registers the tracks of long columns of armoured vehicles. Leaves on vegetation receive the soot of their exhaust while the soil absorbs and retains the identifying chemicals released by banned ammunition. The broken concrete of shattered homes records the hammering collision of projectiles. Pillars of smoke and debris are sucked up into the atmosphere, rising until they mix with the clouds, anchoring this strange weather at the places the bombs hit \ No newline at end of file diff --git a/10-05-2021-weaving/files/weave.py b/10-05-2021-weaving/files/weave.py deleted file mode 100644 index 15d5b98..0000000 --- a/10-05-2021-weaving/files/weave.py +++ /dev/null @@ -1,88 +0,0 @@ -import nltk -from nltk.tokenize import word_tokenize - -# open two text files as text1 and text2 -with open('./rosas.txt', 'r') as result1: - text1 = result1.read() - -with open('./unthought.txt', 'r') as result2: - text2 = result2.read() - - -# HTML TOKENIZER (word + span) -# return a list of tag from a text -# each item in the list is transformed into a html tag, -# with the class defined by the text_class argument -# -# es: to_html('Lorem ipsum dolor', 'test') -# return -# [ -# "Lorem", -# "ipsum", -# "dolor" -# ] - -def to_html(text, text_class): - text_html = [] - text_list = word_tokenize(text) - for word in text_list: - text_html += ['' + word + ''] - return text_html - - -# WEAVER -# weave two texts following a pattern structured as a string of A and B -# es: ABABAAAABBBB -# the repetition argument specifies how many times the pattern is repeated -# the start1 and start2 arguments specify the starting point in the texts' array -# it returns a string - -def weave(text1, text2, pattern, repetition, start1=0, start2=0): - embroidery = '' - text1_cursor = start1 - text2_cursor = start2 - repeated_pattern = pattern * repetition - for choice in repeated_pattern: - if choice == 'A': - embroidery += text1[text1_cursor] - text1_cursor += 1 - if choice == 'B': - embroidery += text2[text2_cursor] - text2_cursor += 1 - return embroidery - -# DEMO - - -text_a = to_html(text1, 'text1') -text_b = to_html(text2, 'text2') -text_embroidery = weave(text_a, text_b, 'AAAABBBBABABAAABBB', 16) - -# BASIC HTML5 boilerplate -html_boilerplate = ''' - - - - - - - Document - - - -
- - {{{contents}}} - -
- - -''' - - -# the {{{contents}}} line will be replaced with our text_embroidery -html_out = html_boilerplate.replace('{{{contents}}}', text_embroidery) - -# Write the results in the index.html file -with open('result.html', 'w') as index: - index.write(html_out) diff --git a/10-05-2021-weaving/index.html b/10-05-2021-weaving/index.html deleted file mode 100644 index b1e4cae..0000000 --- a/10-05-2021-weaving/index.html +++ /dev/null @@ -1,286 +0,0 @@ - - - - - - - Weaving - 05-10-2021 - - - - - -
-

Text Weaving

-
- Jian + Emma + Camo
- @Prototyping 05.10.2021 - back -
-
-

Slow Processing

-
    -
  • - ~ if nltk is a form of mapping language, vltk is a form of mapping language - from a particular vantage point -
    • -
  • - ~ pick a text or a collection of texts from the pad from last week or the - one of this week -
    • -
  • - ~ choose a linguistic pattern to apply over the text, for example: all - verbs, every third word of a sentence, the 50 most used words, collocations - you observe, words with multiple meanings, x of y, question marks etc. the - processing can be both manual or automatic. -
    • -
  • ~ what is the output?
    • -
-
- -
- Weave two texts, like warp and weft
- link to the pad
- link to the repo - -

- word1 word2 word3 WORD1 WORD2 WORD3
- word1 WORD1 word2 WORD2 word3 WORD3 -

- -

- Code is made of essentialy 2 functions: -

    -
  • 1. the former is for splitting a text into a list of elements (atm it splits the txt in single words, but could be made to work with phrases or even chapters). With this function we process two texts for the second function.
    • -
  • 2. the latter takes the two arrays and a pattern structured as a string alternating A and B es: 'ABAB', 'AAABBB'.
    • -
-

- -
-
-# 1. HTML TOKENIZER (word + span)
-# return a list of tag from a text
-# each item in the list is transformed into a html < span> tag,
-# with the class defined by the text_class argument
-#
-# es: to_html('Lorem ipsum dolor', 'test')
-# return
-# [
-    #   "< span class='test'>Lorem",
-    #   "< span class='test'>ipsum",
-    #   "< span class='test'>dolor"
-# ]
-
-def to_html(text, text_class):
-    text_html = []
-    text_list = word_tokenize(text)
-    for word in text_list:
-        text_html += ['< span class="' + text_class + '">' + word + '']
-    return text_html
-
-# 2. WEAVER
-# weave two texts following a pattern structured as a string of A and B
-# es: ABABAAAABBBB
-# the repetition argument specifies how many times the pattern is repeated
-# the start1 and start2 arguments specify the starting point in the texts' array
-# it returns a string
-
-def weave(text1, text2, pattern, repetition, start1=0, start2=0):
-    embroidery = ''
-    text1_cursor = start1
-    text2_cursor = start2
-    repeated_pattern = pattern * repetition
-    for choice in repeated_pattern:
-        if choice == 'A':
-            embroidery += text1[text1_cursor]
-            text1_cursor += 1
-        if choice == 'B':
-            embroidery += text2[text2_cursor]
-            text2_cursor += 1
-    return embroidery
-
-
-# DEMO
-
-text_a = to_html('Lorem ipsum dolor', 'text1')
-text_b = to_html('Sit amet pariatur magna', 'text2')
-text_embroidery = weave(text_a, text_b, 'ABBAB', 1)
-
-# BASIC HTML5 boilerplate
-
-html_boilerplate = '''
-< !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 > Document 
-		< link rel="stylesheet" href="style.css" />
-	< /head >
-	< body >
-		< div class= "text">
-
-            {{{contents}}}    
-        
-        < /div>
-	< /body>
-< /html>
-'''
-
-# the {{{contents}}} line will be replaced with our text_embroidery
-html_out = html_boilerplate.replace('{{{contents}}}', text_embroidery)
-print(html_out)
-
-
- -

Demo

- Starting from a excerpts of A Choreographer’s Score: Fase, Rosas danst Rosas, Elena’s Aria, Bartók and Investigative Aesthetics with the pattern AAAABBBBABABAAABBB the result is: - -
- ThispublicationistheViolencelands.Hundredsinitialofresulttroopsofaresearchbreakintoaprojectthatbeganincity.Atthat2010momentwhentheAnneTeresaDecitystartsrecordingKeersmaekeraddressedthefollowingitspain.Bodiesquestionaretotornme.Iandpunctured.paraphrase:IamInhabitantsmemorisetheassaultrevivinginmystuttersfourearlyworksandfragmentsrefractedinwhichImyselfbytrauma.BeforewillthedanceInternetforthelastisswitchedofftime.Isthis,thousandsofphoneancamerasoccasionlighttowritetheseup.Peoplechoreographiesdown?Faserisktheirlivesto,recordFourtheMovementstothehellsurroundingthemMusicofSteveReich.Astheyfrantically(call1982and),RosastexteachotherdanstRosas(1983,theircommunicationerupts)into,hundredsElena'sAriaofstar-shapednetworks(1984),.OthersthrowsignalsandintoBartok/Mikrokosmosthe(originallycalledvoidofsocialMikrokosmos,1987mediaandencryptedmessaging),werehopingtobeperformedtheywillbeinarowforpickedupbysomeonethe.firstMeanwhiletime.The,theenvironmentseriesformedunderthecapturestraces.Unpavedtitleground``registersEarlyWorks''thetracksofwasgoingtoenablelongcolumnsofarmouredavehiclesreflective.insightintofourLeavesonvegetationdistinctivedirectionsinthereceivethesootofdevelopmenttheirofexhaustchoreographyinawhilethesoillargeoeuvre.FaseabsorbsandretainsthewasidentifyingDechemicalsKeersmaeker'sreleasedbybanned -
- -
-
- - diff --git a/10-05-2021-weaving/style.css b/10-05-2021-weaving/style.css deleted file mode 100644 index e2de00c..0000000 --- a/10-05-2021-weaving/style.css +++ /dev/null @@ -1,87 +0,0 @@ -html, -body { - margin: 0; - font-size: 1.125rem; - line-height: 1.4; -} - -.title { - text-align: center; - margin-top: 32px; - margin-bottom: 0; -} - -.meta { - text-align: center; - margin-bottom: 32px; -} - -.contents { - max-width: 800px; - margin: 0 auto; - padding: 0 32px; -} - -.intro { - background-color: tomato; - border-radius: 16px; - padding: 16px; -} - -h2 { - margin-top: 0; - margin-bottom: 16px; - font-weight: normal; -} - -ul { - margin: 0; - padding: 0; - list-style: none; -} - -li + li { - margin-top: 1em; -} - -a { - color: tomato; -} - -a::after { - content: "⤴"; -} - -.process { - margin: 32px auto; -} - -pre.prettyprint { - padding: 8px !important; - font-size: 14px; - white-space: pre-wrap; -} - -.result { - margin: 16px auto; - width: 100%; - text-align: justify; - padding: 8px; - border: 2px dotted currentColor; -} - -.text1 { - color: currentColor; -} - -.text2 { - color: dodgerblue; -} - -.result span::after { - content: " "; -} - -.demo { - margin-top: 32px; -} diff --git a/10-06-2021-chat_reader/Generative Baloon.vl b/10-06-2021-chat_reader/Generative Baloon.vl deleted file mode 100644 index 1b5021f..0000000 --- a/10-06-2021-chat_reader/Generative Baloon.vl +++ /dev/null @@ -1,2014 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 9 - Comment - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Toggle - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 9 - Comment - - - - - - - - 9 - Comment - - - - - - - - 9 - Comment - - - - - - - - - - - - - - - - - - 9 - Comment - - - - - - - - - - - - - 9 - Comment - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Toggle - - - - - - - - - - - - - - - - - - - - s - - - - - - - - - - - - - - - - - - - - - s - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Bang - - - - - - - - 9 - Comment - - - - - - - - 9 - Comment - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 9999 - 0.001 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Bang - - - - - - - - - - - - - 9 - Comment - - - - - - - - - - - - - Consectetur occaecat eu aute et exercitation cillum tempor incididunt esse culpa irure sit. Dolor amet dolore laboris ea velit. Aliquip sunt eu et elit enim exercitation amet. - Commodo Lorem velit pariatur nostrud quis labore sint et. - Enim culpa amet elit dolore id laborum. - Ea aute excepteur eiusmod aliquip dolor laborum. - Eu deserunt ut cupidatat exercitation veniam labore laborum minim veniam elit. - Amet do consequat fugiat occaecat nisi ut amet nisi. - Exercitation sit elit amet pariatur aute elit. - Nisi deserunt magna esse mollit consectetur nisi dolore adipisicing ullamco ullamco culpa. Laboris incididunt esse irure reprehenderit et laboris cupidatat laboris. - Labore elit culpa veniam est in dolore in excepteur non reprehenderit. Anim irure deserunt ullamco magna. - Nulla nostrud anim tempor aliquip id in. - - - - - - - - - - - - - 9 - Comment - - - - - - - - - - - - - - - - - - - - - - - - - Toggle - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 9 - Comment - - - - - - - - 9 - Comment - - - - - - - - - - - - - - - - - - - - Directory - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 9 - Comment - - - - - - - - 9 - Comment - - - - - - - - 9 - Comment - - - - - - - - 9 - Comment - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Toggle - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/10-06-2021-chat_reader/MIX-OF-SAUCES.csv b/10-06-2021-chat_reader/MIX-OF-SAUCES.csv deleted file mode 100644 index 74febf9..0000000 --- a/10-06-2021-chat_reader/MIX-OF-SAUCES.csv +++ /dev/null @@ -1,149 +0,0 @@ -text,author,image,tag -since we are exposed to several topics relates to orientation / disorientation / editing / so we could help(?) the readers to navigate different texts ,yellow,,"navigation, orientation" -(accessibility),gray,,accessibility -bridges between different registers,lime,,addressing -(also consider how you have been doing this already).,sky,, -disruption  ( make you aware of the materiality of the text) / it isn't just a voice in your head / / people being able to interact from different directions,acqua,,"disruption, materiality, orientation" -break down the hierarchy of text and language,acqua,,"hierarchy, addressing" -(also through forms of reading/reading templates/formats),violet,,"materiality, forms" -the reader can navigate through the reader we are creating,acqua,image,navigation -what are we trying to communicate?,acqua,,purpose -"reader = navigation of readers, layers on layers, different voices inside the text, easy/different types of experiences, to access in different ways to the content/texts/language",acqua,,"addressing, accessibility, plurality" -Use really well known texts,acqua,,source -(like a pop song),yellow,,popular -", we could disrupt these texts and find a way to record and accumulate everyone's experience",acqua,,"disruption, aggregation" -"if you make a footprint, someone can follow the footprint and it can become a road",acqua,,navigation -" >>> ""Navigation is, above all, a synthetic operation. First, it’s the ongoing mediation of intentionality with the contingency of unknown or accidental events. Navigation is not destination, but it is not entirely divorced from destination either. It’s a movement of inclination requiring markers of orientation."" (Orientation in a Big World...)",green,,"navigation, orientation" -some disruption can be overlapped some of them can be a unique experience,acqua,,"disruption, experience" -interesting to see different roads,acqua,,exploration -overlapping different paths __DRAW__(Chae will add some drawings,yellow,,plurality -Alex would love to join),light gray,,participation -<3,green,,positivity -there are different modes of reading,acqua,,plurality - (and different modes of address),gray,,plurality -Divers/inclusive topics go in hand with formats,violet,,"accessibility, inclusivity" -The reader should have an introduction / editorial,gray,,"accessibility, inclusivity" -Ideas:,none,none,title -we want the text to be performative,acqua,,performative -we create the terms of readership,red,,fruition -"** choose not intellectual texts to also have something popular, trying to make it !!!accessible!!! to everyone ",acqua,,"popular, academic, addressing" -reading and writing each other's experiences,violet,,"performative, experience" -(poetry <3),light gray,,"positivity, poetry" -Make sth accessible that is normally not accessible to everyone,red,,"accessibility, addressing" -(we can use intellectual text and make it accessible and more personal),yellow,,"addressing, accessibility" -something relatable as a starting point,green,,addressing -"connecting the ""easy"" texts to the ""serious"" ones, to see where they match,",acqua,,"popular, addressing" -(comparing that way different ways of addressing),gray,,exploration -"mapping a train of thoughts that are present / / part of us, our culture, our lives, but that haven't been traced yet, things we all know but never really connected",acqua,,"addressing, poetry, relation" -SUBJECT:,red,,purpose -how we are reading as a group?,acqua,,"performance, plurality" -collective act of reading,orange,,"plurality, performance" -exquisite corpse,green,,"plurality, performance" -<3,violet,,positivity --disruption of text - realising the materiality of text,light gray,,"disruption, materiality" --connection between inputs - how the reader navigates,light gray,,"relation, navigation" -"-generate new content - lighter, fun, exercising, poetic, popular (be more inclusive), balance, everyone could relate, accessibility  ",light gray,,"addressing, popular, inclusivity, accessibility" --not only texts,light gray,,source -YES,yellow,,positivity -please,green,,positivity -"""UNLESS WE CALL EVERYTHING A TEXT!""",red,,source -a reader where you don't only just read,green,,"performative, source" --different reading experiences,light gray,,"performative, experience, exploration" --a common topic or purpose,light gray,,source --everyone to bring knowledge to our reader; to share knowledge (situated knowledges),blue,,"addressing, accessibility, knowledge" -situated ,yellow,,"addressing, knowledge" -knowledge ,orange,,"addressing, knowledge" -Donna Haraway,yellow,,"addressing, knowledge, people" -<3,orange,,positivity -<3333,red,,"positivity, lot of" -(?spelling?),yellow,,source --aggregation of public,orange,,"addressing, accessibility, experience" --reading as a mesh - or - text as a mesh ,orange,,"source, materiality" -<3,yellow,,positivity -demystify the text,gray,,"source, accessibility" -<3,yellow,,positivity -"(culture access can be a rabbit hole, maybe what we are doing is kind of flipping and playing w that idea?)",light green,,culture -"we want the text to be performative, we create the terms of readership",light blue,,"editorial, methods" -"( position, making decisions ex. what type of texts we will use?)",yellow,,"editorial, methods" -Criteria for content,beige,,editorial -I like the slogan positions making decisions ha ha,grass green,,editorial -ADRESSED ,lila,,"title, methods" -" -1>Accessible (multiple layers of accessibility: Physical, contextual, intelligible, linguistically, visually, etc)",lila,,accessibility -2>Performative,lila,,"navigation, editorial" -3> Multiplayer,orange,,navigation -4> Navigation: readers can navigate through the reader choosing their own path?,pastel blue,,navigation -"5>ever-evolving ""product""?",just blue,,"editorial, methods" -yes pls,orange,,"agreeing, positivity" -> no finite shape? ,lila,,format -"when the public uses it, it changes? ooooooo si (a text changes everytime you read it --> interpretations)",pastel blue,,"format, navigation" -So we want it to be participative?,red,,"editorial, navigation" -it could be nice. ,orange,,"positivity, cheering up" -"thank you, BUT?",just blue,,hesitation -__LOL__ ,yellow,,"positivity, cheering up" -but maybe maybe maybe could be a mesh of partecipative,orange,,hesitation -(this word is great),lila,,"positivity, cheering up" -is this a word joke i don't get? or is there just a spelling mistake hahaha,red,,hesitation -" i wouldn't say dependant, more like fed by, that, as we already said, can leads to different results/interpretations?",just blue,,editorial -maybe partecipation could be seen as a thriving of our contents. like you leave the onions in the cellar and after 1 month they are a nice plantsssss oppssss,orange,,"navigation, editorial" - ___LOL___,just blue,,"positivity, cheering up" -text as a seed,orange,,methods -text gardening / grow a text,green ,,methods -I water a text.,red,,methods -text grows/turns into something else when you water it ,light green,,methods -"maybe a finite object so we don't need people to ""finish"" it, but when they start using it, the next user will find something different from the one before and so on?",just blue,,"navigation, editorial" -like a toolkit ,grass green,,methods -(lov e this word),just blue,,agreeing -+1+1+1+1,orange,,"agreeing, participation" -but also a platform (NLTK),grass green,,"navigation, editorial" -as a sandbox,orange,,"navigation, editorial" -"SOUP & BOAT AT THE SAME TIME, you can eat it but also use it to navigate 😏😏😏😏😏",grass green,,methods -USE METHODS YOU ARE ALREADY USING!!! (in prototyping &c),bb blue,,"methods, prototyping" -use methods you don't understand,sea foam,,"methods, comprehension" - cast a spell,clementine,,spell -DIFFERENT EXPERIENCES  in the same reader ,sky blue,,"experience, different but same" -"Remixing texts, ",raspberry,,"remix, text" -hijack narratives,bubblegum,,"hijack, text" -hacking texts,sea foam,,"hijack, text" -recontextualise texts,raspberry,,"recontextualize, text" - <3 ,fog,,"emoji, positivity" -agency of the reader and agency of the readers,clementine,,"agency, reader" - (https://en.wikipedia.org/wiki/Hopscotch_(Cortázar_novel),bubblegum,,reference -"give the reader the POWER TO DECIDE, ",sky blue,,"reader, power, decision" -to decide = to orientate :'),moss green,,"decision, orientation" -make people get their own experience from the same starting point,sky blue,,"experience, position" -"authority vs popularity: it could be interesting to also work on the way different texts circulate and their specific formats like f.e. highbrow text have bibliography, rap songs don't, etc ",lime green,,"authority, popularity, circulation, format" -fake bibliography and made up references eheh ahah nagarestani cites spondgebob,clementine,,"fake, references" -marcel broodthaers-museum department of eagles (a museum with only authoritarian labels and with no objects),dentist blue,,authtority -<3,lime green,,"emoji, positivity" -what makes a text intellectual and what makes a text popular?,dentist blue,,"text, intellect, popularity" -it's fine not to understand everything,sky blue,,comprehension -<3,bubblegum,,"emoji, positivity" -<3,sea foam,,"emoji, positivity" -<3,fog,,"emoji, positivity" -<3 Maybe we should just try to NOT understand a single thing? LOL,raspberry,,"emoji, positivity" -not EVERYTHING has to be accessible ------> but maybe accessible in every person's way? ,sky blue,,"accessibility, personal" - sometimes the path to access something is harsh but necessary ? ?? ?,clementine,,"path, accesibility, hardship, necessity" -" maybe everyone needs different ways to access stuff, but we give for granted that everyone has the same knowledge/capabilities/experience (exemple: at school, not eeryone learns in the same way, and having a strincted way of teaching might not be the right method for every kid)",sky blue,,"accessibility, experience" -a text changes everytime you read it,sky blue,,"text, change" - --> interpretations,lime green,,comprehension -squeeze into someone's ,sky blue,,intervention -intimacy,lime green,,familiarity -____SEXALERT___,sky blue,,warning -😏,lime green,,"emoji, inside joke" -hahaha,raspberry,,reaction - and attention span,lime green,, -(k),raspberry,, -"putting the reader in context, putting ourselves in context, ",sky blue,, -Once I read an interview I think it was Murakami saying that if he could make it to a reader's bedroom and have that connection with someone that reads him in a room in a city wherever and whenever that might be enough.,honeydew,, -"+as a person who is still struggling reading text in English, to processing the horrifying/English text into something that I can easily read and be part of the group and participate was really empowering -ex) to be not to be text : I don't really understand the whole text so I just get rid of everything and just leave ""to + verb"" and it was really fun/understandable/poetic and empowering",lemon,, -yessss giving up on understanding the text and giving value to it in the sense of the disconnected bits that we understand can also be indeed empowering and poetic in a way ,lime green,, -!! connect to disconnect,sea foam,, -"ongoing annotation device like: - if im reading and i dont understand i can put a note and someone can reply ecc ecc ecc so the text becomes something populated by the readerssss",clementine,, - ---> this also creates a layering of comments and other texts in different times/moments (text as time-lapse),lime green,, - yes yes yes pls,clementine,, -chance-based reading / i-ching ,sea foam,, - wow!!! python is xxi century i ching,clementine,, -<- facts,sea foam,, diff --git a/10-06-2021-chat_reader/assets/14782033951_9ba59598c9_m.jpg b/10-06-2021-chat_reader/assets/14782033951_9ba59598c9_m.jpg deleted file mode 100644 index 92c83ef..0000000 Binary files a/10-06-2021-chat_reader/assets/14782033951_9ba59598c9_m.jpg and /dev/null differ diff --git a/10-06-2021-chat_reader/assets/71KJCLS+k7L._AC_SX522_.jpg b/10-06-2021-chat_reader/assets/71KJCLS+k7L._AC_SX522_.jpg deleted file mode 100644 index 1c2da4a..0000000 Binary files a/10-06-2021-chat_reader/assets/71KJCLS+k7L._AC_SX522_.jpg and /dev/null differ diff --git a/10-06-2021-chat_reader/assets/Tagging1.jpg b/10-06-2021-chat_reader/assets/Tagging1.jpg deleted file mode 100644 index 15c628b..0000000 Binary files a/10-06-2021-chat_reader/assets/Tagging1.jpg and /dev/null differ diff --git a/10-06-2021-chat_reader/assets/havigating.png b/10-06-2021-chat_reader/assets/havigating.png deleted file mode 100644 index bfd5c4b..0000000 Binary files a/10-06-2021-chat_reader/assets/havigating.png and /dev/null differ diff --git a/10-06-2021-chat_reader/assets/images.jpg b/10-06-2021-chat_reader/assets/images.jpg deleted file mode 100644 index 033613b..0000000 Binary files a/10-06-2021-chat_reader/assets/images.jpg and /dev/null differ diff --git a/10-06-2021-chat_reader/assets/index.jpg b/10-06-2021-chat_reader/assets/index.jpg deleted file mode 100644 index 4274fe7..0000000 Binary files a/10-06-2021-chat_reader/assets/index.jpg and /dev/null differ diff --git a/10-06-2021-chat_reader/assets/lol.jpg b/10-06-2021-chat_reader/assets/lol.jpg deleted file mode 100644 index 8de6d3c..0000000 Binary files a/10-06-2021-chat_reader/assets/lol.jpg and /dev/null differ diff --git a/10-06-2021-chat_reader/assets/participative.jpg b/10-06-2021-chat_reader/assets/participative.jpg deleted file mode 100644 index 87eb94e..0000000 Binary files a/10-06-2021-chat_reader/assets/participative.jpg and /dev/null differ diff --git a/10-06-2021-chat_reader/assets/pop-song.png b/10-06-2021-chat_reader/assets/pop-song.png deleted file mode 100644 index 081c231..0000000 Binary files a/10-06-2021-chat_reader/assets/pop-song.png and /dev/null differ diff --git a/10-06-2021-chat_reader/assets/text-gardening.jpg b/10-06-2021-chat_reader/assets/text-gardening.jpg deleted file mode 100644 index fde42b9..0000000 Binary files a/10-06-2021-chat_reader/assets/text-gardening.jpg and /dev/null differ diff --git a/10-06-2021-chat_reader/chat.css b/10-06-2021-chat_reader/chat.css deleted file mode 100644 index ab07550..0000000 --- a/10-06-2021-chat_reader/chat.css +++ /dev/null @@ -1,172 +0,0 @@ -html, -body { - font-size: 1.125rem; - font-family: Arial, Helvetica, sans-serif; -} - -.meta { - margin: 16px; -} - -.meta .back { - display: inline-block; -} - -.info { - border: 1px solid tomato; - border-radius: 16px; - display: none; - margin: 16px; - padding: 16px; -} - -.info.show { - display: inline-block; -} - -#info-button { - border: 1px solid tomato; - border-radius: 16px; - display: inline-block; - width: 32px; - height: 32px; - margin: 16px; - color: tomato; - background-color: transparent; - font-size: 1.125rem; - cursor: pointer; - transform: translate(0); - transition: transform 0.4s ease-out; -} - -#info-button.active { - background-color: tomato; - color: white; -} - -input[type="file"] { - display: none; -} - -.info .file-upload, -input[type="submit"] { - cursor: pointer; - background-color: transparent; - font-size: 16px; - padding: 0; - line-height: 1; - border: none; - border-bottom: 1px solid tomato; - color: tomato; -} - -#categories { - border-radius: 16px; - display: block; - margin: 16px; - margin-top: 32px; - margin-bottom: 64px; -} - -.tag { - display: inline-block; - border: 1px solid currentColor; - padding: 0 0.5ch; - border-radius: 1em; - margin: 4px; - transform: translate(0); - transition: transform 0.4s ease-out; - text-transform: capitalize; - user-select: none; -} - -.tag:hover, -#show-info:hover { - transition: transform 0.1s ease-in; - transform: translateY(-4px); - cursor: pointer; -} - -.tag.active { - background-color: tomato; - color: white; -} - -.tag.all { - background-color: transparent; - color: currentColor; -} - -.all-button { - font-size: 1.125rem; - display: inline-block; - background-color: transparent; - border: 1px solid currentColor; - padding: 0 0.5ch; - border-radius: 1em; - margin: 4px; - cursor: pointer; -} - -.all-button.active { - background-color: tomato; - color: white; -} - -#chat-container { - padding: 0 8px; - margin: 0 auto; - display: flex; - justify-content: flex-start; - align-items: center; - flex-wrap: wrap; -} - -.baloon { - display: none; - position: relative; - background-color: #fff; - border-radius: 16px; - padding: 16px; - margin: 16px; - max-width: 40ch; - line-height: 1.4; -} - -.baloon.active { - display: inline-block; -} - -.baloon .author { - font-family: "Times New Roman", Times, serif; - position: absolute; - top: 0; - margin: 0; - transform: translateY(-24px); - color: tomato; - white-space: pre; -} - -.baloon .contents { - margin: 0; -} - -.baloon .category { - color: #fcc; -} - -.category::after { - content: ", "; -} - -/* .category::before { - content: "#"; -} */ - -.category:first-of-type::before { - content: " "; -} - -.category:last-of-type::after { - content: ""; -} diff --git a/10-06-2021-chat_reader/chat.html b/10-06-2021-chat_reader/chat.html deleted file mode 100644 index ed778c9..0000000 --- a/10-06-2021-chat_reader/chat.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - Chat a pad - WIP - - - - - -
- back -
-
- You can also upload a CSV file with the following headers: - text; author; image; tag; -
- -
- -
-
-
- -
- -
-
- - diff --git a/10-06-2021-chat_reader/csv_to_chat.js b/10-06-2021-chat_reader/csv_to_chat.js deleted file mode 100644 index a11fd9a..0000000 --- a/10-06-2021-chat_reader/csv_to_chat.js +++ /dev/null @@ -1,265 +0,0 @@ -// https://sebhastian.com/javascript-csv-to-array/ -// file reader code from here - -const myForm = document.getElementById("myForm"); -const csvFile = document.getElementById("csvFile"); -const categoriesContainer = document.getElementById("categories"); -const activeAllButton = document.getElementById("active-all"); -const chatContainer = document.getElementById("chat-container"); -const infoButton = document.getElementById("info-button"); -const infoPanel = document.getElementById("info"); - -// Filter Categories - -let tags = []; -let selectedTopics = new Set(); -let allActive; -let TagList; -let baloonList; - -// Activate all tags - -function ShowAllTags() { - TagList.forEach((tag) => { - selectedTopics.add(tag.getAttribute("data-tag")); - tag.classList.add("active"); - tag.setAttribute("aria-expanded", "true"); - }); - allActive = true; - showSelectedBaloons(); -} - -function allActiveCheck() { - if (TagList.length === selectedTopics.size) { - allActive = true; - TagList.forEach((tag) => tag.classList.add("all")); - // categoriesContainer.firstElementChild.classList.add("active"); - } else { - allActive = false; - TagList.forEach((tag) => tag.classList.remove("all")); - // categoriesContainer.firstElementChild.classList.remove("active"); - } -} - -// Event Listenerss - -categoriesContainer.addEventListener("click", (e) => { - if (e.target.tagName === "LI") { - conditionalToggle(e.target); - showSelectedBaloons(); - } -}); - -activeAllButton.addEventListener("click", (e) => { - activeAllButton.classList.add("active"); - activeAllButton.setAttribute("aria-expanded", "true"); - ShowAllTags(); -}); - -infoButton.addEventListener("click", (e) => { - infoPanel.classList.toggle("show"); - infoButton.classList.toggle("active"); -}); - -// Functions - -function conditionalToggle(element) { - if (allActive) { - TagList.forEach((tag) => { - selectedTopics.delete(tag.getAttribute("data-tag")); - tag.classList.remove("active"); - tag.setAttribute("aria-expanded", "false"); - }); - activeAllButton.classList.remove("active"); - allActive = false; - } - - if (element.classList.contains("active")) { - element.classList.remove("active"); - element.setAttribute("aria-expanded", "false"); - selectedTopics.delete(element.getAttribute("data-tag")); - } else { - element.classList.add("active"); - element.setAttribute("aria-expanded", "true"); - selectedTopics.add(element.getAttribute("data-tag")); - } - - allActive = TagList.length == selectedTopics.size; - - if (allActive) { - activeAllButton.classList.add("active"); - activeAllButton.setAttribute("aria-expanded", "true"); - } -} - -function showSelectedBaloons() { - baloonList.forEach((baloon) => baloon.classList.remove("active")); - - selectedTopics.forEach((topic) => { - let selectedBaloons = baloonList.filter((el) => { - topic = topic.replaceAll(" ", "-"); - return el.classList.contains(topic); - }); - selectedBaloons.forEach((baloon) => { - baloon.classList.add("active"); - }); - }); - - allActiveCheck(); -} - -// Standard CSV - -window.onload = function () { - const data = csvToArray(defaultCSV); - - data.forEach((baloon) => { - let baloonTag = []; - if (baloon.tag) { - let tag = baloon.tag.split(",").map((t) => t.trim()); - tags = [...tags, ...tag]; - baloonTag = [...tag]; - } - - chatContainer.appendChild(createBaloon(baloon.text, baloon.author, baloonTag)); - }); - - baloonList = [...document.getElementsByClassName("baloon")]; - - let unique = new Set(tags); - unique.forEach((tag) => { - categoriesContainer.appendChild(createTag(tag)); - }); - - TagList = document.querySelectorAll("[data-tag]"); - ShowAllTags(); -}; - -// Custom CSV loader - -myForm.addEventListener("submit", function (e) { - e.preventDefault(); - const input = csvFile.files[0]; - const reader = new FileReader(); - - reader.onload = function (e) { - const text = e.target.result; - const data = csvToArray(text); - - baloonList = []; - tags = []; - selectedTopics.clear(); - chatContainer.innerHTML = ""; - categoriesContainer.innerHTML = ""; - - data.forEach((baloon) => { - let baloonTag = []; - if (baloon.tag) { - console.log(baloon.tag); - let tag = baloon.tag.split(",").map((t) => t.trim()); - tags = [...tags, ...tag]; - baloonTag = [...tag]; - } - if (baloon.author && baloon.text && baloon.tag) - chatContainer.appendChild(createBaloon(baloon.text, baloon.author, baloonTag)); - }); - - baloonList = [...document.getElementsByClassName("baloon")]; - - console.log(tags); - - let unique = new Set(tags); - unique.forEach((tag) => { - console.log(tag); - categoriesContainer.appendChild(createTag(tag)); - }); - - TagList = document.querySelectorAll("[data-tag]"); - ShowAllTags(); - }; - - reader.readAsText(input); -}); - -// Create an array of object from a CSV file - -function csvToArray(str, delimiter = ";") { - // slice from start of text to the first \n index - // use split to create an array from string by delimiter - const headers = str.slice(0, str.indexOf("\n")).split(delimiter); - - // slice from \n index + 1 to the end of the text - // use split to create an array of each csv value row - const rows = str.slice(str.indexOf("\n") + 1).split("\n"); - - // Map the rows - // split values from each row into an array - // use headers.reduce to create an object - // object properties derived from headers:values - // the object passed as an element of the array - const arr = rows.map(function (row) { - const values = row.split(delimiter); - const el = headers.reduce(function (object, header, index) { - object[header] = values[index]; - return object; - }, {}); - return el; - }); - - // return the array - return arr; -} - -// Create Baloon - -function createBaloon(text, username, tags) { - let baloon = document.createElement("div"); - baloon.classList.add("baloon"); - - let contents; - let author; - - if (text) { - contents = document.createElement("p"); - contents.classList.add("contents"); - contents.innerHTML = text; - baloon.appendChild(contents); - } - - if (username) { - author = document.createElement("span"); - author.classList.add("author"); - author.innerHTML = username; - baloon.appendChild(author); - } - - if (tags) { - tags.forEach((tag) => { - let category = document.createElement("span"); - category.innerHTML = tag; - category.classList.add("category"); - if (text) contents.appendChild(category); - - tag = tag.replaceAll(" ", "-"); - baloon.classList.add(tag); - }); - } - - return baloon; -} - -// Create Tag - -function createTag(tag) { - let chip = document.createElement("li"); - chip.classList.add("tag"); - chip.setAttribute("data-tag", tag); - chip.setAttribute("tabindex", 0); - chip.innerHTML = tag; - return chip; -} - -// wops sorry......... this is for the default chat contents - -const defaultCSV = - 'text;author;image;tag\nsince we are exposed to several topics relates to orientation / disorientation / editing / so we could help(?) the readers to navigate different texts ;yellow;;navigation, orientation\n(accessibility);gray;;accessibility\nbridges between different registers;lime;;addressing\n(also consider how you have been doing this already).;sky;;\ndisruption\u00A0 ( make you aware of the materiality of the text) / it isn\'t just a voice in your head / / people being able to interact from different directions;acqua;;disruption, materiality, orientation\nbreak down the hierarchy of text and language;acqua;;hierarchy, addressing\n(also through forms of reading/reading templates/formats);violet;;materiality, forms\nthe reader can navigate through the reader we are creating;acqua;image;navigation\nwhat are we trying to communicate?;acqua;;purpose\nreader = navigation of readers, layers on layers, different voices inside the text, easy/different types of experiences, to access in different ways to the content/texts/language;acqua;;addressing, accessibility, plurality\nUse really well known texts;acqua;;source\n(like a pop song);yellow;image;popular\n, we could disrupt these texts and find a way to record and accumulate everyone\'s experience;acqua;;disruption, aggregation\nif you make a footprint, someone can follow the footprint and it can become a road;acqua;;navigation\n" >>> ""Navigation is, above all, a synthetic operation. First, it\u2019s the ongoing mediation of intentionality with the contingency of unknown or accidental events. Navigation is not destination, but it is not entirely divorced from destination either. It\u2019s a movement of inclination requiring markers of orientation."" (Orientation in a Big World...)";green;;navigation, orientation\nsome disruption can be overlapped some of them can be a unique experience;acqua;;disruption, experience\ninteresting to see different roads;acqua;;exploration\noverlapping different paths __DRAW__(Chae will add some drawings;yellow;;plurality\nAlex would love to join);light gray;;participation\n<3;green;;positivity\nthere are different modes of reading;acqua;;plurality\n (and different modes of address);gray;;plurality\nDivers/inclusive topics go in hand with formats;violet;;accessibility, inclusivity\nThe reader should have an introduction / editorial;gray;;accessibility, inclusivity\nIdeas:;none;;title\nwe want the text to be performative;acqua;;performative\nwe create the terms of readership;red;;fruition\n** choose not intellectual texts to also have something popular, trying to make it !!!accessible!!! to everyone\u00A0;acqua;;popular, academic, addressing\nreading and writing each other\'s experiences;violet;;performative, experience\n(poetry <3);light gray;;positivity, poetry\nMake sth accessible that is normally not accessible to everyone;red;;accessibility, addressing\n(we can use intellectual text and make it accessible and more personal);yellow;;addressing, accessibility\nsomething relatable as a starting point;green;;addressing\n"connecting the ""easy"" texts to the ""serious"" ones, to see where they match,";acqua;;popular, addressing\n(comparing that way different ways of addressing);gray;;exploration\nmapping a train of thoughts that are present / / part of us, our culture, our lives, but that haven\'t been traced yet, things we all know but never really connected;acqua;;addressing, poetry, relation\nSUBJECT:;red;;purpose\nhow we are reading as a group?;acqua;;performance, plurality\ncollective act of reading;orange;;plurality, performance\nexquisite corpse;green;;plurality, performance\n<3;violet;;positivity\n-disruption of text - realising the materiality of text;light gray;;disruption, materiality\n-connection between inputs - how the reader navigates;light gray;;relation, navigation\n-generate new content - lighter, fun, exercising, poetic, popular (be more inclusive), balance, everyone could relate, accessibility\u00A0\u00A0;light gray;;addressing, popular, inclusivity, accessibility\n-not only texts;light gray;;source\nYES;yellow;;positivity\nplease;green;;positivity\n"""UNLESS WE CALL EVERYTHING A TEXT!""";red;;source\na reader where you don\'t only just read;green;;performative, source\n-different reading experiences;light gray;;performative, experience, exploration\n-a common topic or purpose;light gray;;source\n"-everyone to bring knowledge to our reader; to share knowledge (situated knowledges)";blue;;addressing, accessibility, knowledge\nsituated ;yellow;;addressing, knowledge\nknowledge ;orange;;addressing, knowledge\nDonna Haraway;yellow;;addressing, knowledge, people\n<3;orange;;positivity\n<3333;red;;positivity, lot of\n(?spelling?);yellow;;source\n-aggregation of public;orange;;addressing, accessibility, experience\n-reading as a mesh - or - text as a mesh\u00A0;orange;;source, materiality\n<3;yellow;;positivity\ndemystify the text;gray;;source, accessibility\n<3;yellow;;positivity\n(culture access can be a rabbit hole, maybe what we are doing is kind of flipping and playing w that idea?);light green;;culture\nwe want the text to be performative, we create the terms of readership;light blue;;editorial, methods\n( position, making decisions ex. what type of texts we will use?);yellow;;editorial, methods\nCriteria for content;beige;;editorial\nI like the slogan positions making decisions ha ha;grass green;;editorial\nADRESSED ;lila;;title, methods\n"\n1>Accessible (multiple layers of accessibility: Physical, contextual, intelligible, linguistically, visually, etc)";lila;;accessibility\n2>Performative;lila;;navigation, editorial\n3> Multiplayer;orange;;navigation\n4> Navigation: readers can navigate through the reader choosing their own path?;pastel blue;;navigation\n"5>ever-evolving ""product""?";just blue;;editorial, methods\nyes pls;orange;;agreeing, positivity\n> no finite shape? ;lila;;format\nwhen the public uses it, it changes? ooooooo si (a text changes everytime you read it --> interpretations);pastel blue;;format, navigation\nSo we want it to be participative?;red;;editorial, navigation\nit could be nice. ;orange;;positivity, cheering up\nthank you, BUT?;just blue;;hesitation\n__LOL__ ;yellow;;positivity, cheering up\nbut maybe maybe maybe could be a mesh of partecipative;orange;;hesitation\n(this word is great);lila;;positivity, cheering up\nis this a word joke i don\'t get? or is there just a spelling mistake hahaha;red;;hesitation\n i wouldn\'t say dependant, more like fed by, that, as we already said, can leads to different results/interpretations?;just blue;;editorial\nmaybe partecipation could be seen as a thriving of our contents. like you leave the onions in the cellar and after 1 month they are a nice plantsssss oppssss;orange;;navigation, editorial\n ___LOL___;just blue;;positivity, cheering up\ntext as a seed;orange;;methods\ntext gardening / grow a text;green ;;methods\nI water a text.;red;;methods\ntext grows/turns into something else when you water it ;light green;;methods\n"maybe a finite object so we don\'t need people to ""finish"" it, but when they start using it, the next user will find something different from the one before and so on?";just blue;;navigation, editorial\nlike a toolkit ;grass green;;methods\n(lov e this word);just blue;;agreeing\n+1+1+1+1;orange;;agreeing, participation\nbut also a platform (NLTK);grass green;;navigation, editorial\nas a sandbox;orange;;navigation, editorial\nSOUP & BOAT AT THE SAME TIME, you can eat it but also use it to navigate \uD83D\uDE0F\uD83D\uDE0F\uD83D\uDE0F\uD83D\uDE0F\uD83D\uDE0F;grass green;;methods\nUSE METHODS YOU ARE ALREADY USING!!! (in prototyping &c);bb blue;;methods, prototyping\nuse methods you don\'t understand;sea foam;;methods, comprehension\n\u00A0cast a spell;clementine;;spell\nDIFFERENT EXPERIENCES\u00A0 in the same reader\u00A0;sky blue;;experience, different but same\nRemixing texts,\u00A0;raspberry;;remix, text\nhijack narratives;bubblegum;;hijack, text\nhacking texts;sea foam;;hijack, text\nrecontextualise texts;raspberry;;recontextualize, text\n\u00A0<3\u00A0;fog;;emoji, positivity\nagency of the reader and agency of the readers;clementine;;agency, reader\n\u00A0(https://en.wikipedia.org/wiki/Hopscotch_(Cort\u00E1zar_novel);bubblegum;;reference\ngive the reader the POWER TO DECIDE,\u00A0;sky blue;;reader, power, decision\nto decide = to orientate :\');moss green;;decision, orientation\nmake people get their own experience from the same starting point;sky blue;;experience, position\nauthority vs popularity: it could be interesting to also work on the way different texts circulate and their specific formats like f.e. highbrow text have bibliography, rap songs don\'t, etc\u00A0;lime green;;authority, popularity, circulation, format\nfake bibliography and made up references eheh ahah nagarestani cites spondgebob;clementine;;fake, references\nmarcel broodthaers-museum department of eagles (a museum with only authoritarian labels and with no objects);dentist blue;;authtority\n<3;lime green;;emoji, positivity\nwhat makes a text intellectual and what makes a text popular?;dentist blue;;text, intellect, popularity\nit\'s fine not to understand everything;sky blue;;comprehension \n<3;bubblegum;;emoji, positivity\n<3;sea foam;;emoji, positivity\n<3;fog;;emoji, positivity\n<3 Maybe we should just try to NOT understand a single thing? LOL;raspberry;;emoji, positivity\nnot EVERYTHING has to be accessible ------> but maybe accessible in every person\'s way?\u00A0;sky blue;;accessibility, personal\n\u00A0sometimes the path to access something is harsh but necessary ? ?? ?;clementine;;path, accesibility, hardship, necessity\n\u00A0maybe everyone needs different ways to access stuff, but we give for granted that everyone has the same knowledge/capabilities/experience (exemple: at school, not eeryone learns in the same way, and having a strincted way of teaching might not be the right method for every kid);sky blue;;accessibility, experience\na text changes everytime you read it;sky blue;;text, change\n\u00A0--> interpretations;lime green;;comprehension \nsqueeze into someone\'s\u00A0;sky blue;;intervention\nintimacy;lime green;;familiarity\n____SEXALERT___;sky blue;;warning\n\uD83D\uDE0F;lime green;;emoji, inside joke\nhahaha;raspberry;;reaction\n\u00A0and\u00A0attention\u00A0span;lime green;;\n(k);raspberry;;\nputting the reader in context, putting ourselves in context,\u00A0;sky blue;;\nOnce I read an interview I think it was Murakami saying that if he could make it to a reader\'s bedroom and have that connection with someone that reads him in a room in a city wherever and whenever that might be enough.;honeydew;;\n"+as a person who is still struggling reading text in English, to processing the horrifying/English text into something that I can easily read and be part of the group and participate was really empowering\nex) to be not to be text : I don\'t really understand the whole text so I just get rid of everything and just leave ""to + verb"" and it was really fun/understandable/poetic and empowering";lemon;;\nyessss giving up on understanding the text and giving value to it in the sense of the disconnected bits that we understand can also be indeed empowering and poetic in a way\u00A0;lime green;;\n!! connect to disconnect;sea foam;;\n"ongoing annotation device like:\n if im reading and i dont understand i can put a note and someone can reply ecc ecc ecc so the text becomes something populated by the readerssss";clementine;;\n\u00A0---> this also creates a layering of comments and other texts in different times/moments (text as time-lapse);lime green;;\n\u00A0yes yes yes pls;clementine;;\nchance-based reading / i-ching\u00A0;sea foam;;\n\u00A0wow!!! python is xxi century i ching;clementine;;\n<- facts;sea foam;;\n'; diff --git a/10-06-2021-chat_reader/documentation.mp4 b/10-06-2021-chat_reader/documentation.mp4 deleted file mode 100644 index 693868b..0000000 Binary files a/10-06-2021-chat_reader/documentation.mp4 and /dev/null differ diff --git a/10-06-2021-chat_reader/index.html b/10-06-2021-chat_reader/index.html deleted file mode 100644 index 26e2c5e..0000000 --- a/10-06-2021-chat_reader/index.html +++ /dev/null @@ -1,106 +0,0 @@ - - - - - - - - Mix of Sauces (chat_pad) - 06-10-2021 - - - - - - -
-

Mix of Sauces

-
- Al + Supi + Camo
- @Reading Writing Research 06.10.2021 - back -
-
-

Reader Prototyping

-
    -
  • - ~ take suggested methods, use something we already used already - work on it, - elaborate, don't exclude what we've been doing with Manetta, Michael and - Cristina -
    • -
  • - ~ go in smaller groups/individually and make a prototype - network of texts, - something visual, reworking of something and what it can be a sensible way - to explain to people -
    • -
  • - ~ come together at 15:30? and we share what we've done - talk about how can - we stitch it together to make a 'reader'. -
    • -
-
- -
- -

Aggregating different things ~ output: chat form

- -

Demo (web)

- super work in progress → Chat___a____pad - -

Demo (vvvv)

- - - -

Levels:

-

- -

    -
  • 🏸 1 touch the inputs,
    • -
  • 🏸 2 overlap/merge them a bit
    • -
  • 🏸 3 mesh them completely
    • -
- -

- -

Process:

- -

-

    -
  • - 🏏 take an academic text and turn it into a chat - translating into vernacular; -
    • -
  • 🏏 simplify the text
    • -
  • 🏏 break it into chats
    • -
  • 🏏 illustrate some bits
    • -
- - Starting from a difficult but relatable text: our - multi voiced pad of the day.
- Parsed here: - Spreadsheet ghost -

- -

Rules to manipulate text:

- -
    -
  • 🏑 table of contents - shorts contents - tag them
    • -
  • 🏑 turn into chat bubbles
    • -
  • 🏑 illustrate a few
    • -
- -

Rules of text simplification (as ⛳️objective⛳️ as possible):

-
    -
  • 🏓 simple sentences
    • -
  • 🏓 on point
    • -
  • 🏓 short paragraphs and short chapter
    • -
  • 🏓 title on each paragraph
    • -
  • 🏓 text could become image caption/illustrate chapters/graphs?
    • -
  • 🏓 page number
    • -
  • 🏓 navigation (table of contents)
    • -
-
- - -
- - - \ No newline at end of file diff --git a/10-06-2021-chat_reader/readme.md b/10-06-2021-chat_reader/readme.md deleted file mode 100644 index ee721f3..0000000 --- a/10-06-2021-chat_reader/readme.md +++ /dev/null @@ -1,11 +0,0 @@ -reference: -https://pad.xpub.nl/p/mix_of_sauces - -original text -https://pad.xpub.nl/p/SP_16_0610 - -chat archive -https://cryptpad.fr/sheet/#/3/sheet/edit/16a0948f1c482b711c81808a853ff566/ - -in order to make Generative Baloon.vl works you need to download vvvv gamma ! -https://visualprogramming.net/ diff --git a/10-06-2021-chat_reader/style.css b/10-06-2021-chat_reader/style.css deleted file mode 100644 index 49fc58c..0000000 --- a/10-06-2021-chat_reader/style.css +++ /dev/null @@ -1,96 +0,0 @@ -html, -body { - margin: 0; - font-size: 1.125rem; - line-height: 1.4; -} - -.title { - text-align: center; - margin-top: 32px; - margin-bottom: 0; -} - -.meta { - text-align: center; - margin-bottom: 32px; -} - -.contents { - max-width: 800px; - margin: 0 auto; - margin-bottom: 64px; - padding: 0 32px; -} - -.intro { - background-color: tomato; - border-radius: 16px; - padding: 16px; -} - -h2 { - margin-top: 0; - margin-bottom: 16px; - font-weight: normal; -} - -ul { - margin: 16px 0; - padding: 0; - list-style: none; -} - -li + li { - margin-top: 0.25em; -} - -a { - color: tomato; -} - -a::after { - content: "⤴"; -} - -.process { - margin: 32px auto; -} - -pre.prettyprint { - padding: 8px !important; - font-size: 14px; - white-space: pre-wrap; -} - -.result { - margin: 32px auto; - width: 100%; - text-align: justify; -} - -.text1 { - color: currentColor; -} - -.text2 { - color: dodgerblue; -} - -.result span::after { - content: " "; -} - -.demo { - margin-top: 32px; -} - -.video-demo { - width: 100%; -} - -video { - border: 1px solid tomato; - margin: 0 auto; - max-width: 100%; -} diff --git a/10-06-2021-chat_reader/test.csv b/10-06-2021-chat_reader/test.csv deleted file mode 100644 index 92c5700..0000000 --- a/10-06-2021-chat_reader/test.csv +++ /dev/null @@ -1,73 +0,0 @@ -id;author;city;text;tag; -7392142605;Newmarket york region;toronto;It was hard to try and stop and talk to you as Yonge St;interaction; -7392142605;Newmarket york region;toronto;If you do read these I would like to talk to you;interaction; -7391965442;Parkdale city of toronto;toronto;I was walking behind you on the way to the fruit market;intro; -7391965442;Parkdale city of toronto;toronto;what did you pick up that I commented on? you were wearing blue jeans and hard not to notice no bra;more; -7391065464;Ontario city of toronto;toronto;I am looking for Karen Mitchell that lived in Ajax back in the 90’s;interaction; -7390587001;Markland city of toronto;toronto;You were playing tennis but the person you were Playing with wasn’t really interested and being nice;intro; -7390221230;Don Mills Station city of toronto;toronto;We looked at each other for few times near the escalator;interaction; -7379986424;"Leslieville, Toronto city of toronto";toronto;I saw you in line at the Service Ontario on Leslie and Lakeshore on Friday;intro; -7379986424;"Leslieville;Toronto city of toronto";toronto;I saw you in line at the Service Ontario on Leslie and Lakeshore on Friday;description; -7379986424;"Leslieville, Toronto city of toronto";toronto;I saw you take off your mask to take your photo;description; -7379986424;"Leslieville, Toronto city of toronto";toronto;I really wanted to say hello;afterthought; -7389728877;Ossington city of toronto;toronto;I think you were carrying a lunch boxcooler;afterthought; -7389728877;Ossington city of toronto;toronto;we exchanged some words;more; -7389183809;Bloor-Yonge city of toronto;toronto;I was on my bike at Bloor;intro; -7389183809;Bloor-Yonge city of toronto;toronto;and I turned around;more; -7389183809;Bloor-Yonge city of toronto;toronto;Just wanted to apologize for bailing on that conversation so quick;afterthought; -7388823431;city of toronto;toronto;You were sitting behind me at the game on Friday October 1st;intro; -7388823431;city of toronto;toronto;You were wearing a baby blue jersey and have the nicest blue eyes I've ever seen;intro; -7388823431;city of toronto;toronto;Would love to talk more; about Italian relief pitchers and hopefully catch a playoff game with you;interaction; -7388368654;Dundas/lansdowne city of toronto;toronto;We smiled at each other behind our masks in the store;interaction; -7388352009;Keele & Grandravine city of toronto;toronto;I wanted to stay to longer and wait for you to say hi;afterthought; -7385930780;Toronto city of toronto;toronto;Total longshot…looking for Paula McRoberts who went to Morse St or Queen A in the 60’s;interaction; -7384187529;sunnyside beach near Roncesvalles city of toronto;toronto;You were riding your bike there and I was walking towards the bridge;intro; -7384187529;sunnyside beach near Roncesvalles city of toronto;toronto;You turned your bike around and started riding towards me and tried talking to me;interaction; -7384187529;sunnyside beach near Roncesvalles city of toronto;toronto;You turned your bike around and started riding towards me and tried talking to me;more; -7384187529;sunnyside beach near Roncesvalles city of toronto;toronto;I was a bit startled and scared and told you I was going home;more; -7384187529;sunnyside beach near Roncesvalles city of toronto;toronto;I wish I would have talked to you and have thought about it a lot since;interaction; -7383712311;Bathurst/New Westminister Plaza city of toronto;toronto;I saw you go in to Organic Garage for a bit of shopping;intro; -7383712311;Bathurst/New Westminister Plaza city of toronto;toronto;I saw you go in to Organic Garage for a bit of shopping;description; -7383223759;Oshawa durham region;toronto;We just talked for a while;interaction; -7383223759;Oshawa durham region;toronto;you were very upset and wanted to know how to forget;afterthought; -7383223759;Oshawa durham region;toronto;I'd love to talk more; please message and I can see how you're doing;interaction; -7382384372;Toronto city of toronto;toronto;or what I shared with you that I am extremely passionate about;interaction; -7382384372;Toronto city of toronto;toronto;or what I shared with you that I am extremely passionate about;more; -7382256657;mississauga;toronto;If you see this Nayan ? (I think that's the name I heard);afterthought; -7382151049;Liberty Village city of toronto;toronto;I think you (m) were wearing either dark green pants and a navy shirt or the opposite of that;afterthought; -7382151049;Liberty Village city of toronto;toronto;you looked youngish;interaction; -7382151049;Liberty Village city of toronto;toronto;I just wanted to say thank you again;afterthought; -7382151049;Liberty Village city of toronto;toronto;I wanted you to know I got home in time for my interview;afterthought; -7381969105;Bathurst & Steele’s city of toronto;toronto;A&W shared two smokes & waved goodbye;interaction; -7381969105;Bathurst & Steele’s city of toronto;toronto;A&W shared two smokes & waved goodbye;more; -7381917478;Sherbourne Station - Toronto city of toronto;toronto;You told me you're just returning from London;more; -7381794579;city of toronto;toronto;You were walking south on woodbine when we crossed paths;intro; -7381794579;city of toronto;toronto;Maybe it’s an east end thing but I was surprised when you smiled back;interaction; -7381390197;Toronto city of toronto;toronto;Tell me where I told you where I use to live so I know it was you;more; -7381355833;down town Toronto city of toronto;toronto;the sun was setting around 7:30pmYou looked like Lee Pace in black shorts and a blue sweater with your two scruffy looking dogs;description; -7381355833;down town Toronto city of toronto;toronto;the sun was setting around 7:30pmYou looked like Lee Pace in black shorts and a blue sweater with your two scruffy looking dogs;interaction; -7381355833;down town Toronto city of toronto;toronto;I was in black spandex;intro; -7381355833;down town Toronto city of toronto;toronto;I think I might have stared at you a little long;interaction; -7381355833;down town Toronto city of toronto;toronto;I think I might have stared at you a little long;afterthought; -7381355833;down town Toronto city of toronto;toronto;I can't stop thinking about what other physical activities we could get up to;more; -7380442488;Toronto city of toronto;toronto;you have beautiful eyes and we also talked about Starbucks;interaction; -7380363262;Bathurst & New Westminster in Thornhill city of toronto;toronto;I was driving in my SUV and passed you in the plaza when you were heading to Starbucks;intro; -7380363262;Bathurst & New Westminster in Thornhill city of toronto;toronto;I was late for work;intro; -7380360699;Ajax durham region;toronto;You were wearing a pretty black dress at petsmart with your mom and gave me some advice on what to buy for my dog;intro; -7380287962;Mississauga mississauga;toronto;I completely forgot to get your digits in the high we were in;afterthought; -7380050759;city of toronto;toronto;We smiled at each other a few times before I had to cross the street yesterday afternoon I think you’re cute;interaction; -7380050759;city of toronto;toronto;We smiled at each other a few times before I had to cross the street yesterday afternoon I think you’re cute;afterthought; -7379593265;mississauga;toronto;You were the beautiful girl riding your bike north on Hurontario;intro; -7379593265;mississauga;toronto;We exchanged a couple of glances and hope we can talk more;;interaction; -7379593265;mississauga;toronto;We exchanged a couple of glances and hope we can talk more;;more; -7379398378;Pickering durham region;toronto;To the cute girl who found money and returned it to the owner;more; -7378160965;Vaughan / Woodbridge york region;toronto;I got beside you at the light told you about your light and we had a short chat;more; -7378160965;Vaughan / Woodbridge york region;toronto;I can’t stop thinking about you maybe just grab a coffee one day or chat I remember your plate so respond with that so I know it’s you Covid boring this may not be so boring;more; -7376729136;TORONTO city of toronto;toronto;You were wearing a tank top and shorts;intro; -7376729136;TORONTO city of toronto;toronto;I really wanted to talk some more;;interaction; -7376729136;TORONTO city of toronto;toronto;I really wanted to talk some more;;afterthought; -7375765288;Mississauga mississauga;toronto;She saw me I didn't had mask and I was covering my face with my t;description; -7374845251;501J Queen city of toronto;toronto;talked about the books we're reading and other things;interaction; -7374845251;501J Queen city of toronto;toronto;reply with the name of the book you were reading;description; -7373966430;Mississauga mississauga;toronto;I was working out with a hat (Male) on Sun Aug 29th around 5ish pm;intro; -7373270597;Toronto city of toronto;toronto;You smiled and it was a beautiful smile;interaction; \ No newline at end of file diff --git a/10-12-2021-cam-transcript/barber.jpg b/10-12-2021-cam-transcript/barber.jpg deleted file mode 100644 index 416918e..0000000 Binary files a/10-12-2021-cam-transcript/barber.jpg and /dev/null differ diff --git a/10-12-2021-cam-transcript/cows.jpg b/10-12-2021-cam-transcript/cows.jpg deleted file mode 100644 index 6ed43f8..0000000 Binary files a/10-12-2021-cam-transcript/cows.jpg and /dev/null differ diff --git a/10-12-2021-cam-transcript/index.html b/10-12-2021-cam-transcript/index.html deleted file mode 100644 index 1650628..0000000 --- a/10-12-2021-cam-transcript/index.html +++ /dev/null @@ -1,215 +0,0 @@ - - - - - - - Insecam Transcript - - - - - still from a shoes shop in russia -
-

#1

-
-

- The smell of new cheap shoes
- The sound of russian in the background
- People leaving untidy items around holding other shops' bags while checking shoes - with the other hand
- wearing too many clothes but outside it's cold, not worth it to take off the - jacket
- and hold it an employee shows a customer some high leather boots assortment of - waterproof padded jackets in different colors
- long&just washed high quality russian girls' hair -

-

- Red head woman, indecisive
- Sales woman, nonchalantly wearing her face-mask right below nose
- There is 50% sales on a selection of items
- Small girl shopping for a new pair of shoes, school is starting in a few days
- Young woman just entered, she is not planning to buy anything
- But she seems like she will, easy target
- Her friend is exhausted, she will wait sitted on the bench till she takes a - decision
- Red head is still in the store
- Girl sitted on the bench is only checking pairs within her arm reach
- Possible target audience of the shop: small girls, young girls, older women
- Girl sitted on the bench received a text message -

-

- The pattern on the floor tiles sets the stage for new sales offer:
- -50% on some shiny new boots.
- Yet kids are not intrested:
- they prefer to bounce from red tile to red tile
- in order to spin the speed of shoes shopping.
- A woman is not shure of buy a pair of shoes.
- She focuses on the materials and the quality of construction.
- She weighs the price and how renowed the firm is.
- Then she puts the pair back on the shelf.
- An old lady picks it up again.
- She feels observed.
- She feels not confident about her opinions about these shoes.
- She peeps other people choices, considering other pairs of shoes.
- She strolls through the shop.
- Then returns to the initial ones. -

-
-
- still from a barber shop in france -
-

#2

-
-

- Noisy space
- Blow dryer is on
- Face-mask seem required but the heat under is unbearable
- A man doesn't seem to have much to do
- He is chatty
- Chatting to a girl sitting
- He doesn't sit, I find it pretty annoying
- Just sit if you are talking for so long!!!
- The man crosses and un-crosses his legs, seem nervous
- Is he nervous because of the sitted girl?
- I would say so
- WHY DON'T YOU SIT
- I can't see the sitted girl's face at all
- A standing man, turning his back to the camera is talking to a sitted pair of leg -
- I bet the hairdresser is also bothered by him
- She is eying his reflection in the mirror
- Her crossed legs on the armchair has not un-crossed, shows how tensed he makes her - feel
- Dude just sit! -

-

- The smell of shampoo and cleanness
- The mysterious crossed legs from a girl which we are not able to see more
- Is the guy standing next to her bending over to kiss her?
- The deafening sound of the hairdryer
- The feel of hot air on your neck
- THe reflection of the hairdresser in the mirror behind
- The feel of expectation - how am I gonna look? - for sure it was worth the money.
- The cold, slippery touch of these fake leather seats.
- The standarization of clothing items such as the square pattern shirt, the denim - jeans he wears or the black sneakers and black leggins she wears
- AH! new customer, new hairdresser in frame.
- He sits, she starts washing his hair.
- I wonder when was the last time I went to the hairdresser.
- Should I get a haircut myself -

-

- Try to focus on the floor tiles, once again.
- And think to the worker that has put them in place.
- Hey, you did a great job under the seats in front of the mirrors, why you messed up - everything on the other side of the room?
- Now there is a guy standing on this feng-shui-wraking-four-tiles-inlays, trying to pickup a girl.
- She's hidden from our point of view and we just see a pair of legs.
- You can see how the barber is listening to their conversation,
- Hidden among the noise of a red blowdrier.
- She seems to focus on the blond hairs she's drying but that's just a cover.
- The guy is insicure.
- He relies more on the infrastructure of the barbershop than on his own body.
- He tries to seem cool and steady, and then two other people enter the barbershop.
- Or better: they were outside our field of view.
- One is a barber, the other one a hair owner.
-

-
-
- still from a cow stable -
-

#3

-
-

- One cow seem to be full of milk
- Her milk sack just lies on the hay like a full bag of marbles
- She got up, wonder how
- Are they slow or is the camera lagging?
- Nodding left and right
- They seem lost in a space that yet hosts them since months
- Common just cheer up
- A younger cow is approaching
- She has more white than brown, makes her look even younger, as if her pattern wasn't - yet finished
- How would it feel to be inside a cow stomach?
- Warm, dark, and silent
- Agitation in the stable!
- One seem especially lazy
- Hay is wet
- A farmer passed by
- The lazy one got up
- I feel your pressure sister
- Like when a manager comes and checks you at work -

-

- Unknown number of cows in an unknown-sized farm
- Two cows in frame, three bits of cows coming out of the frame.
- The realisation that whatever you might be doing or busy with, these cows are - there.
- The realisation that whatever you might be busy with is somehow more fun than being - a cow?
- - The cow has some hay on top. Who put it there? How could it fall there? did it get - stuck somehow
- - Two new pattern cows come in the frame.
- New gang? did they know each other already? Do they care about being brown or - patterned?
- - What is out of the frame? Wondering about that and the sound we cannot hear.
- Is it cold? well probably, its in Augsburg.
- - The cows melt in the background, such a rich brown palette.
- EH Human in frame. quickly, crossed the frame in diagonal and left through the upper - right corner. -

-

- How do you define a group of cows?
- A flock of cows?
- A storm of cows?
- A crowd of cows?
- A family of cows?
- A team of cows?
- A herd of cows?
- A drove of cows?
- - I will just call them by their name.
- From this aerial point of view you can recognize flora, in the right bottom corner - of the view
- Luca, relaxed in the left corner, with a concern on her rear right leg,
- Notalie enter the stage, followed by Sofia.
- Natalie is mooing about the haircut the farmer did to her.
- Her black&white pattern should have been taken more in consideration during the grooming.
- Sofia agrees, but then turns away from Natalie.
- (I see some not-so-hidden envy here)
- It happens when you keep so many gracious gracing animals in a such small place. -

-
-
- -
-

Cam Transcript

-
- Kimberley + Carmen + Kamo
- SI16 - with Cristina and Manetta - back -
- -
-

Video Transcribing

-
    -
  • In groups of 2-3:
    • -
  • 1. Decide on a video to transcribe (max 10 min)
    • -
  • - 2. If you can't decide on one, take 3-5 minutes to think about a subject of everyday - knowledge that is particular to a location/group. Record yourself telling the story -
    • -
  • 3. Transcribe individually either the video or your own recording
    • -
  • 4. Compare the transcriptions
    • -
-
-
- - - diff --git a/10-12-2021-cam-transcript/shoes.jpg b/10-12-2021-cam-transcript/shoes.jpg deleted file mode 100644 index 4b93893..0000000 Binary files a/10-12-2021-cam-transcript/shoes.jpg and /dev/null differ diff --git a/cms.js b/cms.js deleted file mode 100644 index eaf2abe..0000000 --- a/cms.js +++ /dev/null @@ -1,65 +0,0 @@ -const table = document.getElementById("table"); - -fetch("./cms.json") - .then((response) => { - return response.json(); - }) - .then((data) => populateContents(data)); - -function populateContents(data) { - data.projects.reverse().forEach((project) => addRow(project)); -} - -function addRow(project) { - let row = document.createElement("tr"); - - let title = document.createElement("td"); - title.classList.add("title"); - row.appendChild(title); - - let titleUrl = document.createElement("a"); - titleUrl.href = project.url; - titleUrl.innerHTML = project.title; - title.appendChild(titleUrl); - - let links = document.createElement("td"); - links.classList.add("links"); - if (project.pad) { - let padLink = document.createElement("a"); - padLink.href = project.pad; - padLink.innerHTML = "pad"; - links.appendChild(padLink); - } - if (project.git) { - let gitLink = document.createElement("a"); - gitLink.href = project.git; - gitLink.innerHTML = "git"; - links.appendChild(gitLink); - } - if (project.links.length) { - project.links.forEach((url) => { - let link = document.createElement("a"); - link.href = url.url; - link.innerHTML = url.title; - links.appendChild(link); - }); - } - row.appendChild(links); - - let categories = document.createElement("td"); - categories.classList.add("categories"); - project.categories.forEach((tag) => { - let category = document.createElement("span"); - category.classList.add("tag"); - category.innerHTML = tag; - categories.appendChild(category); - }); - row.appendChild(categories); - - let date = document.createElement("td"); - date.classList.add("date"); - date.innerHTML = project.date; - row.appendChild(date); - - table.appendChild(row); -} diff --git a/cms.json b/cms.json deleted file mode 100644 index a4577bd..0000000 --- a/cms.json +++ /dev/null @@ -1,102 +0,0 @@ -{ - "projects": [ - { - "title": "Text Lifeboats", - "date": "Sep 28, 2021", - "url": "09-28-2021-lifeboats/", - "git": "", - "pad": "https://pad.xpub.nl/p/collab_week3", - "links": [], - "categories": [ - "JS", - "Text" - ] - }, - { - "title": "Text Weaving", - "date": "Oct 5, 2021", - "url": "10-05-2021-weaving/", - "git": "https://git.xpub.nl/kamo/text_weaving", - "pad": "https://pad.xpub.nl/p/replacing_cats", - "links": [], - "categories": [ - "Python", - "NLTK", - "Text" - ] - }, - { - "title": "Chat Reader", - "date": "Oct 6, 2021", - "url": "10-06-2021-chat_reader/", - "git": "https://git.xpub.nl/kamo/chat-reader", - "pad": "https://pad.xpub.nl/p/SP16_0510", - "links": [], - "categories": [ - "JS", - "Chat", - "Text" - ] - }, - { - "title": "Cam Transcript", - "date": "Oct 12, 2021", - "url": "10-12-2021-cam-transcript/", - "git": "", - "pad": "https://pad.xpub.nl/p/cam-stranscript", - "links": [], - "categories": [ - "Text", - "Video" - ] - }, - { - "title": "Rejection 🧠⛈️", - "date": "Oct 19, 2021", - "url": "../rejection/", - "git": "", - "pad": "https://pad.xpub.nl/p/GroupMeeting_18102021", - "links": [ - { - "url": "https://pad.xpub.nl/p/Rejection_Glossary", - "title": "Glossary" - }, - { - "url": "https://pzwiki.wdka.nl/mediadesign/Rejection", - "title": "Wiki" - } - ], - "categories": [ - "SI16", - "Process" - ] - }, - { - "title": "🥣 Soup-gen", - "date": "Oct 19, 2021", - "url": "../soup-gen/", - "git": "https://git.xpub.nl/grgr/soup-gen", - "pad": "", - "links": [], - "categories": [ - "Web", - "CMS", - "Long Term" - ] - }, - { - "title": "🎵 K-PUB", - "date": "Oct 21, 2021", - "url": "../k-pub/", - "git": "https://git.xpub.nl/grgr/k-pub", - "pad": "", - "links": [], - "categories": [ - "Event", - "vvvv", - "Text", - "Long Term" - ] - } - ] -} \ No newline at end of file diff --git a/contents/.ipynb_checkpoints/archive-checkpoint.md b/contents/.ipynb_checkpoints/archive-checkpoint.md new file mode 100644 index 0000000..671d9b0 --- /dev/null +++ b/contents/.ipynb_checkpoints/archive-checkpoint.md @@ -0,0 +1,30 @@ +--- +title: Trimester 1 + 2 +css: recap.css +cover: recap/cover.jpg +cover_alt: dinosaurs +--- + +## SI16 - Learning How To Walk While Catwalking + +Our Special Issue is a toolkit to mess around with language: from its standard taxonomies and tags, to its modes of organizing information and its shaping knowledge. With these tools we want to legitimize failures and amatorial practices by proposing a more vernacular understanding of language. In this Special Issue 16, We approach the text as a texture, a malleable clay tablet, a space for foreign input and extensive modifications, for cut-up and for collage, for collective agency and participation. Not a surface but a volume, in which the text is not only text, but a shared space. We work to sort out several meanings from the same text. We intend to blur our roles as authors, users and public because this is an act of collective world building. + +### Contribution + +I contributed on the overall [structure](/soupboat/~kamo/projects/si16-structure-proposal/), the [backend](/soupboat/~kamo/projects/si16-backend/) and the [frontend](/soupboat/~kamo/projects/si16-frontend-design/) ![frontend](/soupboat/~kamo/static/img/si16-frontend/Snippet%20Research.jpg), and the [visual identity](https://www.are.na/si16-visual-identity). The [Concrete Label](https://pad.xpub.nl/p/AGAINST_FILTERING) project started with Supi to annotate concrete poetry to create vernacular corpora ![concrete labels](https://i.pinimg.com/originals/9a/12/3c/9a123c7d889520fa01fd4b07a7becdbd.jpg) ![concrete label](https://pzwiki.wdka.nl/mw-mediadesign/images/a/aa/Labeling.jpg) ![concrete label](https://pzwiki.wdka.nl/mw-mediadesign/images/7/7f/Label_1.jpg) became the [Annotation Compass](/soupboat/~kamo/projects/annotation-compass/) ![anotation compass](/soupboat/~kamo/static/img/recap/compass.png), a tool to annotate images collectively. + +We managed to achieve a lot: a distribuited API, a familiar CMS based on Jupiter Notebooks ![jupit](/soupboat/~kamo/static/img/recap/jupiter.jpg), a coherent environment with room for [customization](/soupboat/si16/projects/annotation-compass/rejection_map/), and a shared understanding of a complex topic ![anotation compass](/soupboat/~kamo/static/img/recap/api.jpg). I tried to document these processes both in the soupboat and directly in the code ![git](/soupboat/~kamo/static/img/recap/git.jpg). + +## SI17 This Box Found You For A Reason7 + +Dear Player, I found you for a reason. Welcome to my productive space. Here play meets work. Time is ordered in unusual ways and patterns unravel. Together, we mess with the boundaries between leisure and labour. How are your boundaries? Maybe you shouldn’t go to work tomorrow. But could you really follow your own schedule? Would you be more productive if you chose when to work? + + +### Contribution + +The iterations of the work and the ideas were a lot, and the time passed on the readings was really effective to generate thoughts about the [relations within the public](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-multi-player/), the [jigsaw puzzle as a form of encryption ](https://hub.xpub.nl/soupboat/~kamo/projects/chaotic-evil-puzzles/) of our contents, the loot box as a [decorator or skin](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-decorator/) for other pubblications, [ways to seal](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-sealing-device/) ![sealing device](https://hub.xpub.nl/soupboat/~kamo/static/img/seals1.jpg) the boot lox instead of opening it, or ways to hack its inner [temporality](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-temporality/) ![temporality](/soupboat/~kamo/static/img/recap/temporality.jpg). + +When we entered the production phase I worked with Mitsa, Supi and Erica as part of the team 1, in charge of the contents of the boot lox. We approached the different contents with the idea of a common ground such as the [post-it](https://pad.xpub.nl/p/post-it). ![post-it identity](https://hub.xpub.nl/soupboat/~kamo/static/img/post-it/orange-katamari.svg) We worked with a surface to [gather the contents](https://git.xpub.nl/kamo/post-it-contents) ![post it contents](/soupboat/~kamo/static/img/recap/contents.png) and with another one to [generate the results](https://git.xpub.nl/kamo/postit) ![post flask](/soupboat/~kamo/static/img/recap/post-flask.png) ![post flask](/soupboat/~kamo/static/img/recap/post-flask-2.png). + +With the help of the group I also managed to give value to things I did such as the xquisite branch ![xbranch](/soupboat/~kamo/static/img/recap/xquisite.jpg) ![xbranch](/soupboat/~kamo/static/img/recap/xquisite-2.jpg) and the mimic-loot box research ![mimic](/soupboat/~kamo/static/img/recap/mimic.jpg), that ultimately ended as contents in the final pubblication. + diff --git a/contents/.ipynb_checkpoints/brera-checkpoint.md b/contents/.ipynb_checkpoints/brera-checkpoint.md new file mode 100644 index 0000000..54ee981 --- /dev/null +++ b/contents/.ipynb_checkpoints/brera-checkpoint.md @@ -0,0 +1,70 @@ +--- +title: appunti x brera +description: proto slide +css: brera.css +--- + +## Ricerca + +Ciao io mi chiamo FRANCESCO e la mia passione è sviluppare _software site specific_, cioè: che rispondono alla forma delle comunità in cui emergono. In questo modo è possibile generare relazioni e strumenti slegati dalle specifiche imposte dall'industria. + +Il mio background è: vario (musica, video, animazione, graphic design, web design, programmazione, danza, ) e questo è il motivo per cui il mio portfolio è: altrettanto vario. + +Ciò che accomuna i lavori è un approccio infrastrutturale: ogni progetto è anche il modo per avviare un discorso sul tipo di strumenti e interfacce che quella particolare situazione richiede o offre. + +A un certo punto questo metodo diventa anche una riflessione sull'ecologia del software: come scegliamo i nostri strumenti? Cosa implica usare un'applicazione, un linguaggio, una tecnologia rispetto ad un'altra? Che relazioni si creano tra sviluppatore e utente, tra artista e pubblico? Ecc. + +## Pratica + +Strategie per affrontare la complessità contemporanea: + +### rappresentare → intuizione e sintesi +- interfacce per accedere alla complessità, +- forme intuitive contro forme razionali, +- sintesi contro semplificazione, + +### documentare → narrazione situata +- distanza critica tra il mondo e i mezzi usati per documentarlo. +- un approccio che slega il reale dal fotorealistico (decolonizzare l'immagine?) + +### abitare → esplorazione epistemologica +- esplorare una condizione dall'interno per rinegoziarne i limiti e il possibile +- accettare la complicità coi problemi e farne un punto di forza + +## Lavori + + + +### Object Oriented Choreography + + +È una performance collaborativa: danzatrice nel VR interagisce con il pubblico. + +Concept: Affrontare l'informazione digitale attraverso diversi tipi di intelligenza: corpo e parola. Costruire un modello in scala delle piattaforme digitali contemporanee e usarlo come dispositivo drammaturgico. + +![ooc @bg](/soupboat/~kamo/static/img/brera/ooc-bg.png) +![ooc @romaeuropa](/soupboat/~kamo/static/img/brera/ooc.jpg) + +Sviluppo: tesi, Triennale, RomaEuropa, futuro + +Materiali: foto, video, UI, schemi, testo + +### Un \* Salta + +- Ricerca per un internet locale +- Progetto e Viaggio in senegal +- Pubblicazione e riflessioni + +### Frana Futura + +Ricerche per un documentario 3D che mette in relazione la condizione idrogeologica ligure e le realtà che la abitano. + +![frana futura slice](/soupboat/~kamo/static/img/brera/ff-1.jpg) + +![frana futura gruppo del sale](/soupboat/~kamo/static/img/brera/ff-sale.jpg) + +### XPUB + +- Relazione tra sistemi complessi e ambienti in cui vengono sviluppati +- Temi +- metodi \ No newline at end of file diff --git a/contents/.ipynb_checkpoints/home-checkpoint.md b/contents/.ipynb_checkpoints/home-checkpoint.md new file mode 100644 index 0000000..83ec2b8 --- /dev/null +++ b/contents/.ipynb_checkpoints/home-checkpoint.md @@ -0,0 +1,14 @@ +--- +title: Documentation workout +description: hello this is a log of francesco +--- + +Hello these are some logs from kamo. I like to develop software to inhabit complexity with visual and performative outcomes. You can find here a lot of works in progress and some finished projects. My resolution for these 2 years is to get good in documenting things I do. +So this is basically workout. + +Ciao + +## TO DO## + +- Dark mood +- Fix chat reader \ No newline at end of file diff --git a/contents/.ipynb_checkpoints/recap-checkpoint.md b/contents/.ipynb_checkpoints/recap-checkpoint.md new file mode 100644 index 0000000..f86b4fb --- /dev/null +++ b/contents/.ipynb_checkpoints/recap-checkpoint.md @@ -0,0 +1,105 @@ +--- +title: Transcript of my assessment from the future +css: recap.css +cover: recap/cover.jpg +cover_alt: dinosaurs +--- + +## Hello + +This months in XPUB were a lot of fun. At the beginning I was terrorized because of the moving, new people, new places, different language, so probably to cope with the stress I had an initial outburst of energies. Now I'm trying to stay calm. + +## Purpose + +Lately I've been interested in programming. Probably because it's a playful way to interact with reality starting from abstraction. Something like theory but with instant and tangible outputs. Something like incantation or psychokinesis. + +I'm into the development of site-specific software. Codes that inhabit and interact with a community. Coding as a form of care. Programming as a way to facilitate _agency-on_ and _comprehension-of_ complex systems. I'm learning how to approach complexity as an environment. How a work can be complex without forcing the result being complicated. + +## Methods + +I like to propose ideas to the group. Sometimes the idea [does not deliver](/soupboat/~kamo/projects/loot-box-sealing-device/) ![sealing device](/soupboat/~kamo/static/img/test-3d.jpg), sometimes it lands but the results are [catastrophic](/soupboat/~kamo/projects/si16-structure-proposal/) ![si16 api](/soupboat/~kamo/static/img/recap/si16-api.jpg), sometimes the outcomes are [unexpected](/soupboat/~kamo/projects/annotation-compass/) ![annotation compass](/soupboat/~kamo/static/img/recap/annotation compass.jpg), and sometimes they [unexpectedly work](/soupboat/padliography/) ![padliography](/soupboat/~kamo/static/img/recap/padliography.jpg). + +My main interest is the ecology around these ideas. How it can be enriched and transformed by different voices, and the kind of play and space that it offers. I'm trying to shift from _developing crazy things_ to _developing meaningful things_. Meaningful especially in relation to the environment and the other people involved in the process. To be meaningful an idea should stands on its own, but functioning as a starting point, more than a finite result. + +I get easily _bored-of_ or _carried-away-by_ my train of thoughts, so I need to rely on others. That's why I always collaborate with someone else and rarely do things alone. + + +## Outputs + +### Warm up + +During the first month every day was a fest and we developed everything that came to our mind. To have the Soupboat felt empowering. A place to call home in the internet. ![cms00](/soupboat/~kamo/static/img/recap/cms00.jpg) ![cms01](/soupboat/~kamo/static/img/recap/cms01.jpg) Not really a critical approach maybe, but an ecstatic condition. + +Together with Erica we tried to develop a [shared cookbook](/soupboat/soup-gen/) ![soup gen](/soupboat/~kamo/static/img/recap/soup-gen-1.jpg) ![soup gen](/soupboat/~kamo/static/img/recap/soup-gen-2.jpg), then a [birthday cards collector](/soupboat/b-say/) ![birth day cards](/soupboat/~kamo/static/img/recap/bsay.png) to spawn best wishes in the Soupboat homepage at each birthday, some prototypes for the [karaoke as a form of republishing](/soupboat/k-pub/) ![k-pub](/soupboat/~kamo/static/img/recap/kpub.jpg), a way to track all [our pads](/soupboat/padliography/) ![padliography](/soupboat/~kamo/static/img/recap/padliography.jpg) through the media wiki API. + +During the group exercise I collaborated to the [text lifeboats](/soupboat/~kamo/static/html/lifeboats/) ![lifeboats](/soupboat/~kamo/static/img/recap/lifeboats.gif) and different ways to [weave](/soupboat/~kamo/static/html/weaving/) texts together ![weaving](/soupboat/~kamo/static/img/recap/weaving.png) to generate new meanings, transforming a complex writings into an [abstract chat](/soupboat/~kamo/static/html/chat-reader/chat.html) ![chat reader](/soupboat/~kamo/static/img/recap/chat-reader.png), and the [insecam livestream transcription](/soupboat/~kamo/static/html/cam-transcript/) ![webcam transcript](/soupboat/~kamo/static/html/cam-transcript/shoes.jpg) ![webcam transcript](/soupboat/~kamo/static/html/cam-transcript/barber.jpg) ![webcam transcript](/soupboat/~kamo/static/html/cam-transcript/cows.jpg). + +### SI16 + +I like what we did for the SI16. The concept of using an API as a form of pubblishing was [mindblowing](/soupboat/~kamo/projects/api-worldbuilding/). The approach proposed during the prototyping sessions was extremely stimulating, even if sometimes frightening to [rewind](/soupboat/~kamo/projects/si16-API-express-prototype/) and [rewind](/soupboat/~kamo/projects/si16-API-strapi-nuxt-prototype/) and [redo](/soupboat/~kamo/projects/si16-backend/) things differently ![backend prototypes](/soupboat/~kamo/static/img/api_bikes.jpg). I feel sorry if at some point I pushed for something that someone perceived as a failure. I get that it's a matter of perspective: from my point of view what's important is the process and the ways we work together, while for someone else a concrete outcome is more important. I need to keep in mind that both sides are legit and valid. + +I contributed on the overall [structure](/soupboat/~kamo/projects/si16-structure-proposal/), the [backend](/soupboat/~kamo/projects/si16-backend/) and the [frontend](/soupboat/~kamo/projects/si16-frontend-design/) ![frontend](/soupboat/~kamo/static/img/si16-frontend/Snippet%20Research.jpg), and the [visual identity](https://www.are.na/si16-visual-identity). The [Concrete Label](https://pad.xpub.nl/p/AGAINST_FILTERING) project started with Supi to annotate concrete poetry to create vernacular corpora ![concrete labels](https://i.pinimg.com/originals/9a/12/3c/9a123c7d889520fa01fd4b07a7becdbd.jpg) ![concrete label](https://pzwiki.wdka.nl/mw-mediadesign/images/a/aa/Labeling.jpg) ![concrete label](https://pzwiki.wdka.nl/mw-mediadesign/images/7/7f/Label_1.jpg) became the [Annotation Compass](/soupboat/~kamo/projects/annotation-compass/) ![anotation compass](/soupboat/~kamo/static/img/recap/compass.png), a tool to annotate images collectively. + +We managed to achieve a lot: a distribuited API, a familiar CMS based on Jupiter Notebooks ![jupit](/soupboat/~kamo/static/img/recap/jupiter.jpg), a coherent environment with room for [customization](/soupboat/si16/projects/annotation-compass/rejection_map/), and a shared understanding of a complex topic ![anotation compass](/soupboat/~kamo/static/img/recap/api.jpg). I tried to document these processes both in the soupboat and directly in the code ![git](/soupboat/~kamo/static/img/recap/git.jpg). This required a lot of effort since I've always had a bad relation with documentation, probably because I'm an over-analitical-critical-shy person. + +We failed in finishing things. The event-mode of the website as well as the API key circulation remain a draft. The workload was crazy, especially considered the technical difficulty of the overall project that led to unbalanced shares of work. + + +### Slow down + +After the winter break we slowed down, and spent more time studying the special issue's materials. Together with Erica, Mitsa, Chae, and Alex we read through all the text together. The ideology excercise with [noise canceling headphones](https://pad.xpub.nl/p/noice_cancelling_devices_turns_off_also_your_inner), the [critical karaoke](https://hub.xpub.nl/soupboat/postit/generate/karaoke) about gamification ![karaoke](https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/8/8d/Karaoke-final-5.jpg/1200px-Karaoke-final-5.jpg), the katamari fanfiction ![katamari](/soupboat/~kamo/static/img/recap/katamari.jpg), the [replace('mimic','loot box')](https://hub.xpub.nl/soupboat/postit/generate/mimic) research ![mimic](https://hub.xpub.nl/soupboat/~kamo/static/img/The_Mimic.png), and the gravitational approach to mapping the theme of gamification ![gravity](https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/7/73/Map_monetization.jpg/450px-Map_monetization.jpg) were all results of a moment with more critical focus on the contents and less on technical experiments. + +At the beginning of the accademic year we applied to Room for Sound with the k-pub karaoke project, but timing and covid messed up with our plans, and in february after a couple of day of residency we decided to step back in order to focus more on less things. ![k-pub](/soupboat/~kamo/static/img/recap/karaoke2.jpg) Room for Sound understood our needs and proposed us to retry later on this year. + +The plan now is to continue working on the karaoke format as a moment in which different forms of public meet each others: ![kara](https://hub.xpub.nl/soupboat/~kamo/static/img/k-pub/karaoke_recipe.png) there is a text and writing aspect, a musical and sonic one, it's a collective and personal performative moment, and it's something already present in the collective imaginary. So it could be a good generative device. + +### SI17 + +The process of SI17 was much more mindful than the previous one. As a group we put a lot of effort into the facilitation and organization of the work. The tired but cheering way we arrived at the launch is a sign of success. + +The iterations of the work and the ideas were a lot, and the time passed on the readings was really effective to generate thoughts about the [relations within the public](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-multi-player/), the [jigsaw puzzle as a form of encryption ](https://hub.xpub.nl/soupboat/~kamo/projects/chaotic-evil-puzzles/) of our contents, the loot box as a [decorator or skin](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-decorator/) for other pubblications, [ways to seal](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-sealing-device/) ![sealing device](https://hub.xpub.nl/soupboat/~kamo/static/img/seals1.jpg) the boot lox instead of opening it, or ways to hack its inner [temporality](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-temporality/) ![temporality](/soupboat/~kamo/static/img/recap/temporality.jpg). + +When we entered the production phase I worked with Mitsa, Supi and Erica as part of the team 1, in charge of the contents of the boot lox. We approached the different contents with the idea of a common ground such as the [post-it](https://pad.xpub.nl/p/post-it). ![post-it identity](https://hub.xpub.nl/soupboat/~kamo/static/img/post-it/orange-katamari.svg) We worked with a surface to [gather the contents](https://git.xpub.nl/kamo/post-it-contents) ![post it contents](/soupboat/~kamo/static/img/recap/contents.png) and with another one to [generate the results](https://git.xpub.nl/kamo/postit) ![post flask](/soupboat/~kamo/static/img/recap/post-flask.png) ![post flask](/soupboat/~kamo/static/img/recap/post-flask-2.png). When Supi said that the way we worked made her rethink inDesign I was happy. Even if the perceived workload at some point was insane (tell me more about the blurred line between leisure and labor), the overall experience was super great, and we managed to work well together with a common pace. + +Things went wrong only in the last days before sending the print, when we didn't manage to share the work in a fair way. To me this was a great loss since it was the main stake of the entire process. We had several reflections about this and then managed to recover the group morale working together on the website. + +To keep things simple is difficult, but important. At the end I think the issue website ![issue 17 website](/soupboat/~kamo/static/img/recap/issue17.jpg) is great, since we did it altogether. It's not a problem if it's not technically interesting or flexible or modular or what else. I accepted that there are other parameters to create value and meaning. With the help of the group I also managed to give value to things I did such as the xquisite branch ![xbranch](/soupboat/~kamo/static/img/recap/xquisite.jpg) ![xbranch](/soupboat/~kamo/static/img/recap/xquisite-2.jpg) and the mimic-loot box research ![mimic](/soupboat/~kamo/static/img/recap/mimic.jpg), that ultimately ended as contents in the final pubblication. + +Some moments were super hard: a certain Monday during spring break we should have decided on something to move on, but every proposal was rejected. It was really difficult, especially since there were valid ideas on the table. ![puzzle](https://hub.xpub.nl/soupboat/~kamo/static/img/100-boxes.jpg) ![puzzle](https://hub.xpub.nl/soupboat/~kamo/static/img/catchy-puzzles.jpg) ![puzzle](https://hub.xpub.nl/soupboat/~grgr/static/img/jigmix.png) ![puzzle](https://hub.xpub.nl/soupboat/~kamo/static/img/xchange-puzzle.jpg) Usually I'm not really attached to my proposals and I'm always ready to give up to something in favor of something else. What I find really difficult it's to give up to something without a real alternative. + +## Further developing interests + + + + +- How different forms of intelligence can interact with complexity (language, body, intuition, logic, emotion) +- Coding as a form of care instead of control +- Design pattern (OOP) +- Learn how to play the accordion. + + + \ No newline at end of file diff --git a/contents/.ipynb_checkpoints/test-highlight-checkpoint.md b/contents/.ipynb_checkpoints/test-highlight-checkpoint.md new file mode 100644 index 0000000..1f88cc3 --- /dev/null +++ b/contents/.ipynb_checkpoints/test-highlight-checkpoint.md @@ -0,0 +1,33 @@ +--- +title: test highlight +--- + +```json +{ + "image": "filename.jpg", + "position": {"x": 12, "y": 97}, + "size": {"width": 43, "height": 18}, + "text": "Content of the annotation", + "timestamp": "Wed, 01 Dec 2021 14:04:00 GMT", + "userID": 123456789 +} +``` + +```css +.highlight .kn { color: #fb660a; font-weight: bold } /* Keyword.Namespace */ +.highlight .kp { color: #fb660a } /* Keyword.Pseudo */ +.highlight .kr { color: #fb660a; font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #cdcaa9; font-weight: bold } /* Keyword.Type */ +.highlight .ld { color: #ffffff } /* Literal.Date */ +.highlight .m { color: #0086f7; font-weight: bold } /* Literal.Number */ +.highlight .s { color: #0086d2 } /* Literal.String */ +.highlight .na { color: #ff0086; font-weight: bold } /* Name.Attribute */ +.highlight .nb { color: #ffffff } /* Name.Builtin */ +.highlight .nc { color: #ffffff } /* Name.Class */ +.highlight .no { color: #0086d2 } /* Name.Constant */ +``` + +```python +def repeat(text, times): + return (text * times) +``` \ No newline at end of file diff --git a/contents/.ipynb_checkpoints/tmtti-checkpoint.md b/contents/.ipynb_checkpoints/tmtti-checkpoint.md new file mode 100644 index 0000000..5096fbb --- /dev/null +++ b/contents/.ipynb_checkpoints/tmtti-checkpoint.md @@ -0,0 +1,155 @@ +--- +title: TMTTI +--- + +## Take me to the internet + +Visual design & coding fundamentals + +Workshop for Master’s Degree in Communication for International Relations (MICRI) students at IULM University +From April 26 to May 17, 2022 +20 hours remote workshop + +### Instructor + +Manuel Ehrenfeld +me@manuelehrenfeld.info + +Assistant +Francesco Luzzana + +### Description + +During this workshop we will explore novel digital aesthetics and narrative formats for online publications. Participants will research and co-design a series of articles exploring the different kinds of narrations Internat generates around relevant and urgent topic such as the environmental crisis. + + +### Method + +Through an iterative process of hands-on exercises, readings and discussions, participants will develop the socio-technical awareness necessary to critically orientate and navigate the opportunities and constraints of the digital space. + + +### Learning outcomes +By the end of the workshop participants will: +- Be familiar with a range of design practices, UX/UI patterns and understand basic web terminology. +- Explore novel digital aesthetics and narrative formats. +- Participate in the creation of a digital publication. + +### Topics +- Understanding the post-digital landscape. +- Making another web: from hand-made to brutalist websites. +- New tools: On finding resources and inspiration. +- Collective curation strategies. +- Alternative Content Management Systems. + +### Tools +- [Visual studio code](https://code.visualstudio.com) +- [Figma](https://www.figma.com) +- [are.na](are.na) + + +### Readings and resources +- [Performing the Feed - Paul Soulellis](https://soulellis.com/writing/nov2017/) +- [Too much world - Is the internet dead? - Hito Steyerl](https://www.e-flux.com/journal/49/60004/too-much-world-is-the-internet-dead/) + + + +# Proposal + + +## The Bestiary of the Internet + + +_A Bestiary of the Internet seeks to capture this precise moment when the information and reality merge and mesh into one new hybrid body. What happens when technologies and their unintended consequences become so ubiquitous that it is difficult to define what is “real” or not? What does it mean to live in a hybrid environment made of organic and digital matter? What new specimens are currently populating our devices at the beginning of the 21st century?_ +Versioning from [Bestiary of the Anthropocene](https://www.onomatopee.net/exhibition/bestiary_of-_the_antropocene/) + +A lexicon on internet narratives: each contribution focuses on the same topic but from a different format: IG_story, TikTok_lip-sync, Twitter_thread, Twitch_stream, Youtube_video, Medium_article, Substack_newsletter, etc. In this way specific yet broad issues such as the environmental crisis can be explored from multiple points of view, while at the same time navigating the wide spectrum of digital narratives. + +While it is not a remedy, internet for sure is a remediator: it takes every traditional media and digests it into new forms. This crossbreading of informations gives birth to a complex reality. One of the most challenging aspect of our time is to _orientate ourselves in_ and _build meaning out_ of this post-digital landscape. + +Hence a guide to navigate this web. From the idea of medieval bestiaries and the hyper-stimulated visual culture of today, this issue of Networked Magazine works as a lens through the different reflections of information and culture. How do we choose reliable sources when scrolling the updates? How can we spot fake news and clickbaits in the age of digital journalism? Where to land some context around this sea of user-generated contents? + +#TODO: WRITE last paragraph about reposting and republishing, curation vs aggregation of contents, screenshot documentary + + +## Timetable + +Iterative process: 3x times the same thing, but with more and more focus and building up. + + +### from our side: preparation week +- Research and design mockups for the Bestiary of the Internet +- Think and select the main topic, if necesary + +### 26th April: +First iteration: presentation and contents mockup. +Focus on interests and intuitions. + +Morning: +Introduction, portfolio, previous issues. +Presentation and Figma mockup of the Bestiary of the Internet. + +Afternoon: +Compiling together the list of formats to investigate. +(starting from IG_story, TikTok_lip-sync, Twitter_thread, Twitch_stream, Youtube_video, Medium_article, Substack_newsletter) +Individual or couple exercise: each group picks a format and gather material. + +Outcome: +Using Figma for multiplayer work and the idea of screenshooting as documentary practice, the outcome of the first day is a rough aggregation of visual contents. +Each group brings at least 10~15 screenshots of the picked format. +They are displayed in the same space (Figma), quick round of presention of the findings. + +Homework: refine findings. +Write a short report starting from these questions: +- What's the context around these sources and formats? +- How and where do your contents interact with the public discourse? +- How do those contents interact with other formats and how they are perceived? +- How to distinguish between meaningfull and non meaningfull sources? +Each group adjusts their findings based on the report. + + +### from our side: during the 2 weeks inbetween +- Second round design and working prototype of the Bestiary +- Are.na as alternative CMS +- Design with Screenshot in mind + +### 9th May +Second iteration: from contents to articles. +Focus on contents and sources. + +Morning: +Check-in and presentation of the report and materials from each group. +Presentation of the working prototype. +Are.na as CMS. + +Afternoon: +Each group uploads the findings on Are.na. Each contribution uses the report to organize the structure of the channel. +Besides screenshots, each channel is enriched with other texts, links and references. +Individual tutorial with the groups. + +Outcomes: +Using Are.na as a networked CMS, the contents are polished and organized in a critical way. +The outcome of the second iteration is an online-not-yet-published version of the Bestiary. + +Homework: adjust contents with the design. +Each one bring an index proposal. +(How to order and organize the contributions in the final outcome) + +### from our side: during the week inbetween +- Adjust design and prototype + + +### 17th May +Third iteration: polishing and publishing. +Focus on aesthetics and narrations. + +Morning: +Deciding on the index and adjusting the order on Are.na +Individual tutorial for final adjustments and polishing. + +Afternoon: +Individual tutorial for final adjustments and polishing. +Publishing and presentation round on the online version. + +Outcomes: pubblication of the issue! + + diff --git a/contents/archive.md b/contents/archive.md new file mode 100644 index 0000000..671d9b0 --- /dev/null +++ b/contents/archive.md @@ -0,0 +1,30 @@ +--- +title: Trimester 1 + 2 +css: recap.css +cover: recap/cover.jpg +cover_alt: dinosaurs +--- + +## SI16 - Learning How To Walk While Catwalking + +Our Special Issue is a toolkit to mess around with language: from its standard taxonomies and tags, to its modes of organizing information and its shaping knowledge. With these tools we want to legitimize failures and amatorial practices by proposing a more vernacular understanding of language. In this Special Issue 16, We approach the text as a texture, a malleable clay tablet, a space for foreign input and extensive modifications, for cut-up and for collage, for collective agency and participation. Not a surface but a volume, in which the text is not only text, but a shared space. We work to sort out several meanings from the same text. We intend to blur our roles as authors, users and public because this is an act of collective world building. + +### Contribution + +I contributed on the overall [structure](/soupboat/~kamo/projects/si16-structure-proposal/), the [backend](/soupboat/~kamo/projects/si16-backend/) and the [frontend](/soupboat/~kamo/projects/si16-frontend-design/) ![frontend](/soupboat/~kamo/static/img/si16-frontend/Snippet%20Research.jpg), and the [visual identity](https://www.are.na/si16-visual-identity). The [Concrete Label](https://pad.xpub.nl/p/AGAINST_FILTERING) project started with Supi to annotate concrete poetry to create vernacular corpora ![concrete labels](https://i.pinimg.com/originals/9a/12/3c/9a123c7d889520fa01fd4b07a7becdbd.jpg) ![concrete label](https://pzwiki.wdka.nl/mw-mediadesign/images/a/aa/Labeling.jpg) ![concrete label](https://pzwiki.wdka.nl/mw-mediadesign/images/7/7f/Label_1.jpg) became the [Annotation Compass](/soupboat/~kamo/projects/annotation-compass/) ![anotation compass](/soupboat/~kamo/static/img/recap/compass.png), a tool to annotate images collectively. + +We managed to achieve a lot: a distribuited API, a familiar CMS based on Jupiter Notebooks ![jupit](/soupboat/~kamo/static/img/recap/jupiter.jpg), a coherent environment with room for [customization](/soupboat/si16/projects/annotation-compass/rejection_map/), and a shared understanding of a complex topic ![anotation compass](/soupboat/~kamo/static/img/recap/api.jpg). I tried to document these processes both in the soupboat and directly in the code ![git](/soupboat/~kamo/static/img/recap/git.jpg). + +## SI17 This Box Found You For A Reason7 + +Dear Player, I found you for a reason. Welcome to my productive space. Here play meets work. Time is ordered in unusual ways and patterns unravel. Together, we mess with the boundaries between leisure and labour. How are your boundaries? Maybe you shouldn’t go to work tomorrow. But could you really follow your own schedule? Would you be more productive if you chose when to work? + + +### Contribution + +The iterations of the work and the ideas were a lot, and the time passed on the readings was really effective to generate thoughts about the [relations within the public](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-multi-player/), the [jigsaw puzzle as a form of encryption ](https://hub.xpub.nl/soupboat/~kamo/projects/chaotic-evil-puzzles/) of our contents, the loot box as a [decorator or skin](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-decorator/) for other pubblications, [ways to seal](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-sealing-device/) ![sealing device](https://hub.xpub.nl/soupboat/~kamo/static/img/seals1.jpg) the boot lox instead of opening it, or ways to hack its inner [temporality](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-temporality/) ![temporality](/soupboat/~kamo/static/img/recap/temporality.jpg). + +When we entered the production phase I worked with Mitsa, Supi and Erica as part of the team 1, in charge of the contents of the boot lox. We approached the different contents with the idea of a common ground such as the [post-it](https://pad.xpub.nl/p/post-it). ![post-it identity](https://hub.xpub.nl/soupboat/~kamo/static/img/post-it/orange-katamari.svg) We worked with a surface to [gather the contents](https://git.xpub.nl/kamo/post-it-contents) ![post it contents](/soupboat/~kamo/static/img/recap/contents.png) and with another one to [generate the results](https://git.xpub.nl/kamo/postit) ![post flask](/soupboat/~kamo/static/img/recap/post-flask.png) ![post flask](/soupboat/~kamo/static/img/recap/post-flask-2.png). + +With the help of the group I also managed to give value to things I did such as the xquisite branch ![xbranch](/soupboat/~kamo/static/img/recap/xquisite.jpg) ![xbranch](/soupboat/~kamo/static/img/recap/xquisite-2.jpg) and the mimic-loot box research ![mimic](/soupboat/~kamo/static/img/recap/mimic.jpg), that ultimately ended as contents in the final pubblication. + diff --git a/contents/brera.md b/contents/brera.md new file mode 100644 index 0000000..54ee981 --- /dev/null +++ b/contents/brera.md @@ -0,0 +1,70 @@ +--- +title: appunti x brera +description: proto slide +css: brera.css +--- + +## Ricerca + +Ciao io mi chiamo FRANCESCO e la mia passione è sviluppare _software site specific_, cioè: che rispondono alla forma delle comunità in cui emergono. In questo modo è possibile generare relazioni e strumenti slegati dalle specifiche imposte dall'industria. + +Il mio background è: vario (musica, video, animazione, graphic design, web design, programmazione, danza, ) e questo è il motivo per cui il mio portfolio è: altrettanto vario. + +Ciò che accomuna i lavori è un approccio infrastrutturale: ogni progetto è anche il modo per avviare un discorso sul tipo di strumenti e interfacce che quella particolare situazione richiede o offre. + +A un certo punto questo metodo diventa anche una riflessione sull'ecologia del software: come scegliamo i nostri strumenti? Cosa implica usare un'applicazione, un linguaggio, una tecnologia rispetto ad un'altra? Che relazioni si creano tra sviluppatore e utente, tra artista e pubblico? Ecc. + +## Pratica + +Strategie per affrontare la complessità contemporanea: + +### rappresentare → intuizione e sintesi +- interfacce per accedere alla complessità, +- forme intuitive contro forme razionali, +- sintesi contro semplificazione, + +### documentare → narrazione situata +- distanza critica tra il mondo e i mezzi usati per documentarlo. +- un approccio che slega il reale dal fotorealistico (decolonizzare l'immagine?) + +### abitare → esplorazione epistemologica +- esplorare una condizione dall'interno per rinegoziarne i limiti e il possibile +- accettare la complicità coi problemi e farne un punto di forza + +## Lavori + + + +### Object Oriented Choreography + + +È una performance collaborativa: danzatrice nel VR interagisce con il pubblico. + +Concept: Affrontare l'informazione digitale attraverso diversi tipi di intelligenza: corpo e parola. Costruire un modello in scala delle piattaforme digitali contemporanee e usarlo come dispositivo drammaturgico. + +![ooc @bg](/soupboat/~kamo/static/img/brera/ooc-bg.png) +![ooc @romaeuropa](/soupboat/~kamo/static/img/brera/ooc.jpg) + +Sviluppo: tesi, Triennale, RomaEuropa, futuro + +Materiali: foto, video, UI, schemi, testo + +### Un \* Salta + +- Ricerca per un internet locale +- Progetto e Viaggio in senegal +- Pubblicazione e riflessioni + +### Frana Futura + +Ricerche per un documentario 3D che mette in relazione la condizione idrogeologica ligure e le realtà che la abitano. + +![frana futura slice](/soupboat/~kamo/static/img/brera/ff-1.jpg) + +![frana futura gruppo del sale](/soupboat/~kamo/static/img/brera/ff-sale.jpg) + +### XPUB + +- Relazione tra sistemi complessi e ambienti in cui vengono sviluppati +- Temi +- metodi \ No newline at end of file diff --git a/contents/home.md b/contents/home.md new file mode 100644 index 0000000..83ec2b8 --- /dev/null +++ b/contents/home.md @@ -0,0 +1,14 @@ +--- +title: Documentation workout +description: hello this is a log of francesco +--- + +Hello these are some logs from kamo. I like to develop software to inhabit complexity with visual and performative outcomes. You can find here a lot of works in progress and some finished projects. My resolution for these 2 years is to get good in documenting things I do. +So this is basically workout. + +Ciao + +## TO DO## + +- Dark mood +- Fix chat reader \ No newline at end of file diff --git a/contents/recap.md b/contents/recap.md new file mode 100644 index 0000000..f86b4fb --- /dev/null +++ b/contents/recap.md @@ -0,0 +1,105 @@ +--- +title: Transcript of my assessment from the future +css: recap.css +cover: recap/cover.jpg +cover_alt: dinosaurs +--- + +## Hello + +This months in XPUB were a lot of fun. At the beginning I was terrorized because of the moving, new people, new places, different language, so probably to cope with the stress I had an initial outburst of energies. Now I'm trying to stay calm. + +## Purpose + +Lately I've been interested in programming. Probably because it's a playful way to interact with reality starting from abstraction. Something like theory but with instant and tangible outputs. Something like incantation or psychokinesis. + +I'm into the development of site-specific software. Codes that inhabit and interact with a community. Coding as a form of care. Programming as a way to facilitate _agency-on_ and _comprehension-of_ complex systems. I'm learning how to approach complexity as an environment. How a work can be complex without forcing the result being complicated. + +## Methods + +I like to propose ideas to the group. Sometimes the idea [does not deliver](/soupboat/~kamo/projects/loot-box-sealing-device/) ![sealing device](/soupboat/~kamo/static/img/test-3d.jpg), sometimes it lands but the results are [catastrophic](/soupboat/~kamo/projects/si16-structure-proposal/) ![si16 api](/soupboat/~kamo/static/img/recap/si16-api.jpg), sometimes the outcomes are [unexpected](/soupboat/~kamo/projects/annotation-compass/) ![annotation compass](/soupboat/~kamo/static/img/recap/annotation compass.jpg), and sometimes they [unexpectedly work](/soupboat/padliography/) ![padliography](/soupboat/~kamo/static/img/recap/padliography.jpg). + +My main interest is the ecology around these ideas. How it can be enriched and transformed by different voices, and the kind of play and space that it offers. I'm trying to shift from _developing crazy things_ to _developing meaningful things_. Meaningful especially in relation to the environment and the other people involved in the process. To be meaningful an idea should stands on its own, but functioning as a starting point, more than a finite result. + +I get easily _bored-of_ or _carried-away-by_ my train of thoughts, so I need to rely on others. That's why I always collaborate with someone else and rarely do things alone. + + +## Outputs + +### Warm up + +During the first month every day was a fest and we developed everything that came to our mind. To have the Soupboat felt empowering. A place to call home in the internet. ![cms00](/soupboat/~kamo/static/img/recap/cms00.jpg) ![cms01](/soupboat/~kamo/static/img/recap/cms01.jpg) Not really a critical approach maybe, but an ecstatic condition. + +Together with Erica we tried to develop a [shared cookbook](/soupboat/soup-gen/) ![soup gen](/soupboat/~kamo/static/img/recap/soup-gen-1.jpg) ![soup gen](/soupboat/~kamo/static/img/recap/soup-gen-2.jpg), then a [birthday cards collector](/soupboat/b-say/) ![birth day cards](/soupboat/~kamo/static/img/recap/bsay.png) to spawn best wishes in the Soupboat homepage at each birthday, some prototypes for the [karaoke as a form of republishing](/soupboat/k-pub/) ![k-pub](/soupboat/~kamo/static/img/recap/kpub.jpg), a way to track all [our pads](/soupboat/padliography/) ![padliography](/soupboat/~kamo/static/img/recap/padliography.jpg) through the media wiki API. + +During the group exercise I collaborated to the [text lifeboats](/soupboat/~kamo/static/html/lifeboats/) ![lifeboats](/soupboat/~kamo/static/img/recap/lifeboats.gif) and different ways to [weave](/soupboat/~kamo/static/html/weaving/) texts together ![weaving](/soupboat/~kamo/static/img/recap/weaving.png) to generate new meanings, transforming a complex writings into an [abstract chat](/soupboat/~kamo/static/html/chat-reader/chat.html) ![chat reader](/soupboat/~kamo/static/img/recap/chat-reader.png), and the [insecam livestream transcription](/soupboat/~kamo/static/html/cam-transcript/) ![webcam transcript](/soupboat/~kamo/static/html/cam-transcript/shoes.jpg) ![webcam transcript](/soupboat/~kamo/static/html/cam-transcript/barber.jpg) ![webcam transcript](/soupboat/~kamo/static/html/cam-transcript/cows.jpg). + +### SI16 + +I like what we did for the SI16. The concept of using an API as a form of pubblishing was [mindblowing](/soupboat/~kamo/projects/api-worldbuilding/). The approach proposed during the prototyping sessions was extremely stimulating, even if sometimes frightening to [rewind](/soupboat/~kamo/projects/si16-API-express-prototype/) and [rewind](/soupboat/~kamo/projects/si16-API-strapi-nuxt-prototype/) and [redo](/soupboat/~kamo/projects/si16-backend/) things differently ![backend prototypes](/soupboat/~kamo/static/img/api_bikes.jpg). I feel sorry if at some point I pushed for something that someone perceived as a failure. I get that it's a matter of perspective: from my point of view what's important is the process and the ways we work together, while for someone else a concrete outcome is more important. I need to keep in mind that both sides are legit and valid. + +I contributed on the overall [structure](/soupboat/~kamo/projects/si16-structure-proposal/), the [backend](/soupboat/~kamo/projects/si16-backend/) and the [frontend](/soupboat/~kamo/projects/si16-frontend-design/) ![frontend](/soupboat/~kamo/static/img/si16-frontend/Snippet%20Research.jpg), and the [visual identity](https://www.are.na/si16-visual-identity). The [Concrete Label](https://pad.xpub.nl/p/AGAINST_FILTERING) project started with Supi to annotate concrete poetry to create vernacular corpora ![concrete labels](https://i.pinimg.com/originals/9a/12/3c/9a123c7d889520fa01fd4b07a7becdbd.jpg) ![concrete label](https://pzwiki.wdka.nl/mw-mediadesign/images/a/aa/Labeling.jpg) ![concrete label](https://pzwiki.wdka.nl/mw-mediadesign/images/7/7f/Label_1.jpg) became the [Annotation Compass](/soupboat/~kamo/projects/annotation-compass/) ![anotation compass](/soupboat/~kamo/static/img/recap/compass.png), a tool to annotate images collectively. + +We managed to achieve a lot: a distribuited API, a familiar CMS based on Jupiter Notebooks ![jupit](/soupboat/~kamo/static/img/recap/jupiter.jpg), a coherent environment with room for [customization](/soupboat/si16/projects/annotation-compass/rejection_map/), and a shared understanding of a complex topic ![anotation compass](/soupboat/~kamo/static/img/recap/api.jpg). I tried to document these processes both in the soupboat and directly in the code ![git](/soupboat/~kamo/static/img/recap/git.jpg). This required a lot of effort since I've always had a bad relation with documentation, probably because I'm an over-analitical-critical-shy person. + +We failed in finishing things. The event-mode of the website as well as the API key circulation remain a draft. The workload was crazy, especially considered the technical difficulty of the overall project that led to unbalanced shares of work. + + +### Slow down + +After the winter break we slowed down, and spent more time studying the special issue's materials. Together with Erica, Mitsa, Chae, and Alex we read through all the text together. The ideology excercise with [noise canceling headphones](https://pad.xpub.nl/p/noice_cancelling_devices_turns_off_also_your_inner), the [critical karaoke](https://hub.xpub.nl/soupboat/postit/generate/karaoke) about gamification ![karaoke](https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/8/8d/Karaoke-final-5.jpg/1200px-Karaoke-final-5.jpg), the katamari fanfiction ![katamari](/soupboat/~kamo/static/img/recap/katamari.jpg), the [replace('mimic','loot box')](https://hub.xpub.nl/soupboat/postit/generate/mimic) research ![mimic](https://hub.xpub.nl/soupboat/~kamo/static/img/The_Mimic.png), and the gravitational approach to mapping the theme of gamification ![gravity](https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/7/73/Map_monetization.jpg/450px-Map_monetization.jpg) were all results of a moment with more critical focus on the contents and less on technical experiments. + +At the beginning of the accademic year we applied to Room for Sound with the k-pub karaoke project, but timing and covid messed up with our plans, and in february after a couple of day of residency we decided to step back in order to focus more on less things. ![k-pub](/soupboat/~kamo/static/img/recap/karaoke2.jpg) Room for Sound understood our needs and proposed us to retry later on this year. + +The plan now is to continue working on the karaoke format as a moment in which different forms of public meet each others: ![kara](https://hub.xpub.nl/soupboat/~kamo/static/img/k-pub/karaoke_recipe.png) there is a text and writing aspect, a musical and sonic one, it's a collective and personal performative moment, and it's something already present in the collective imaginary. So it could be a good generative device. + +### SI17 + +The process of SI17 was much more mindful than the previous one. As a group we put a lot of effort into the facilitation and organization of the work. The tired but cheering way we arrived at the launch is a sign of success. + +The iterations of the work and the ideas were a lot, and the time passed on the readings was really effective to generate thoughts about the [relations within the public](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-multi-player/), the [jigsaw puzzle as a form of encryption ](https://hub.xpub.nl/soupboat/~kamo/projects/chaotic-evil-puzzles/) of our contents, the loot box as a [decorator or skin](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-decorator/) for other pubblications, [ways to seal](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-sealing-device/) ![sealing device](https://hub.xpub.nl/soupboat/~kamo/static/img/seals1.jpg) the boot lox instead of opening it, or ways to hack its inner [temporality](https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-temporality/) ![temporality](/soupboat/~kamo/static/img/recap/temporality.jpg). + +When we entered the production phase I worked with Mitsa, Supi and Erica as part of the team 1, in charge of the contents of the boot lox. We approached the different contents with the idea of a common ground such as the [post-it](https://pad.xpub.nl/p/post-it). ![post-it identity](https://hub.xpub.nl/soupboat/~kamo/static/img/post-it/orange-katamari.svg) We worked with a surface to [gather the contents](https://git.xpub.nl/kamo/post-it-contents) ![post it contents](/soupboat/~kamo/static/img/recap/contents.png) and with another one to [generate the results](https://git.xpub.nl/kamo/postit) ![post flask](/soupboat/~kamo/static/img/recap/post-flask.png) ![post flask](/soupboat/~kamo/static/img/recap/post-flask-2.png). When Supi said that the way we worked made her rethink inDesign I was happy. Even if the perceived workload at some point was insane (tell me more about the blurred line between leisure and labor), the overall experience was super great, and we managed to work well together with a common pace. + +Things went wrong only in the last days before sending the print, when we didn't manage to share the work in a fair way. To me this was a great loss since it was the main stake of the entire process. We had several reflections about this and then managed to recover the group morale working together on the website. + +To keep things simple is difficult, but important. At the end I think the issue website ![issue 17 website](/soupboat/~kamo/static/img/recap/issue17.jpg) is great, since we did it altogether. It's not a problem if it's not technically interesting or flexible or modular or what else. I accepted that there are other parameters to create value and meaning. With the help of the group I also managed to give value to things I did such as the xquisite branch ![xbranch](/soupboat/~kamo/static/img/recap/xquisite.jpg) ![xbranch](/soupboat/~kamo/static/img/recap/xquisite-2.jpg) and the mimic-loot box research ![mimic](/soupboat/~kamo/static/img/recap/mimic.jpg), that ultimately ended as contents in the final pubblication. + +Some moments were super hard: a certain Monday during spring break we should have decided on something to move on, but every proposal was rejected. It was really difficult, especially since there were valid ideas on the table. ![puzzle](https://hub.xpub.nl/soupboat/~kamo/static/img/100-boxes.jpg) ![puzzle](https://hub.xpub.nl/soupboat/~kamo/static/img/catchy-puzzles.jpg) ![puzzle](https://hub.xpub.nl/soupboat/~grgr/static/img/jigmix.png) ![puzzle](https://hub.xpub.nl/soupboat/~kamo/static/img/xchange-puzzle.jpg) Usually I'm not really attached to my proposals and I'm always ready to give up to something in favor of something else. What I find really difficult it's to give up to something without a real alternative. + +## Further developing interests + + + + +- How different forms of intelligence can interact with complexity (language, body, intuition, logic, emotion) +- Coding as a form of care instead of control +- Design pattern (OOP) +- Learn how to play the accordion. + + + \ No newline at end of file diff --git a/contents/test-highlight.md b/contents/test-highlight.md new file mode 100644 index 0000000..1f88cc3 --- /dev/null +++ b/contents/test-highlight.md @@ -0,0 +1,33 @@ +--- +title: test highlight +--- + +```json +{ + "image": "filename.jpg", + "position": {"x": 12, "y": 97}, + "size": {"width": 43, "height": 18}, + "text": "Content of the annotation", + "timestamp": "Wed, 01 Dec 2021 14:04:00 GMT", + "userID": 123456789 +} +``` + +```css +.highlight .kn { color: #fb660a; font-weight: bold } /* Keyword.Namespace */ +.highlight .kp { color: #fb660a } /* Keyword.Pseudo */ +.highlight .kr { color: #fb660a; font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #cdcaa9; font-weight: bold } /* Keyword.Type */ +.highlight .ld { color: #ffffff } /* Literal.Date */ +.highlight .m { color: #0086f7; font-weight: bold } /* Literal.Number */ +.highlight .s { color: #0086d2 } /* Literal.String */ +.highlight .na { color: #ff0086; font-weight: bold } /* Name.Attribute */ +.highlight .nb { color: #ffffff } /* Name.Builtin */ +.highlight .nc { color: #ffffff } /* Name.Class */ +.highlight .no { color: #0086d2 } /* Name.Constant */ +``` + +```python +def repeat(text, times): + return (text * times) +``` \ No newline at end of file diff --git a/contents/tmtti.md b/contents/tmtti.md new file mode 100644 index 0000000..5096fbb --- /dev/null +++ b/contents/tmtti.md @@ -0,0 +1,155 @@ +--- +title: TMTTI +--- + +## Take me to the internet + +Visual design & coding fundamentals + +Workshop for Master’s Degree in Communication for International Relations (MICRI) students at IULM University +From April 26 to May 17, 2022 +20 hours remote workshop + +### Instructor + +Manuel Ehrenfeld +me@manuelehrenfeld.info + +Assistant +Francesco Luzzana + +### Description + +During this workshop we will explore novel digital aesthetics and narrative formats for online publications. Participants will research and co-design a series of articles exploring the different kinds of narrations Internat generates around relevant and urgent topic such as the environmental crisis. + + +### Method + +Through an iterative process of hands-on exercises, readings and discussions, participants will develop the socio-technical awareness necessary to critically orientate and navigate the opportunities and constraints of the digital space. + + +### Learning outcomes +By the end of the workshop participants will: +- Be familiar with a range of design practices, UX/UI patterns and understand basic web terminology. +- Explore novel digital aesthetics and narrative formats. +- Participate in the creation of a digital publication. + +### Topics +- Understanding the post-digital landscape. +- Making another web: from hand-made to brutalist websites. +- New tools: On finding resources and inspiration. +- Collective curation strategies. +- Alternative Content Management Systems. + +### Tools +- [Visual studio code](https://code.visualstudio.com) +- [Figma](https://www.figma.com) +- [are.na](are.na) + + +### Readings and resources +- [Performing the Feed - Paul Soulellis](https://soulellis.com/writing/nov2017/) +- [Too much world - Is the internet dead? - Hito Steyerl](https://www.e-flux.com/journal/49/60004/too-much-world-is-the-internet-dead/) + + + +# Proposal + + +## The Bestiary of the Internet + + +_A Bestiary of the Internet seeks to capture this precise moment when the information and reality merge and mesh into one new hybrid body. What happens when technologies and their unintended consequences become so ubiquitous that it is difficult to define what is “real” or not? What does it mean to live in a hybrid environment made of organic and digital matter? What new specimens are currently populating our devices at the beginning of the 21st century?_ +Versioning from [Bestiary of the Anthropocene](https://www.onomatopee.net/exhibition/bestiary_of-_the_antropocene/) + +A lexicon on internet narratives: each contribution focuses on the same topic but from a different format: IG_story, TikTok_lip-sync, Twitter_thread, Twitch_stream, Youtube_video, Medium_article, Substack_newsletter, etc. In this way specific yet broad issues such as the environmental crisis can be explored from multiple points of view, while at the same time navigating the wide spectrum of digital narratives. + +While it is not a remedy, internet for sure is a remediator: it takes every traditional media and digests it into new forms. This crossbreading of informations gives birth to a complex reality. One of the most challenging aspect of our time is to _orientate ourselves in_ and _build meaning out_ of this post-digital landscape. + +Hence a guide to navigate this web. From the idea of medieval bestiaries and the hyper-stimulated visual culture of today, this issue of Networked Magazine works as a lens through the different reflections of information and culture. How do we choose reliable sources when scrolling the updates? How can we spot fake news and clickbaits in the age of digital journalism? Where to land some context around this sea of user-generated contents? + +#TODO: WRITE last paragraph about reposting and republishing, curation vs aggregation of contents, screenshot documentary + + +## Timetable + +Iterative process: 3x times the same thing, but with more and more focus and building up. + + +### from our side: preparation week +- Research and design mockups for the Bestiary of the Internet +- Think and select the main topic, if necesary + +### 26th April: +First iteration: presentation and contents mockup. +Focus on interests and intuitions. + +Morning: +Introduction, portfolio, previous issues. +Presentation and Figma mockup of the Bestiary of the Internet. + +Afternoon: +Compiling together the list of formats to investigate. +(starting from IG_story, TikTok_lip-sync, Twitter_thread, Twitch_stream, Youtube_video, Medium_article, Substack_newsletter) +Individual or couple exercise: each group picks a format and gather material. + +Outcome: +Using Figma for multiplayer work and the idea of screenshooting as documentary practice, the outcome of the first day is a rough aggregation of visual contents. +Each group brings at least 10~15 screenshots of the picked format. +They are displayed in the same space (Figma), quick round of presention of the findings. + +Homework: refine findings. +Write a short report starting from these questions: +- What's the context around these sources and formats? +- How and where do your contents interact with the public discourse? +- How do those contents interact with other formats and how they are perceived? +- How to distinguish between meaningfull and non meaningfull sources? +Each group adjusts their findings based on the report. + + +### from our side: during the 2 weeks inbetween +- Second round design and working prototype of the Bestiary +- Are.na as alternative CMS +- Design with Screenshot in mind + +### 9th May +Second iteration: from contents to articles. +Focus on contents and sources. + +Morning: +Check-in and presentation of the report and materials from each group. +Presentation of the working prototype. +Are.na as CMS. + +Afternoon: +Each group uploads the findings on Are.na. Each contribution uses the report to organize the structure of the channel. +Besides screenshots, each channel is enriched with other texts, links and references. +Individual tutorial with the groups. + +Outcomes: +Using Are.na as a networked CMS, the contents are polished and organized in a critical way. +The outcome of the second iteration is an online-not-yet-published version of the Bestiary. + +Homework: adjust contents with the design. +Each one bring an index proposal. +(How to order and organize the contributions in the final outcome) + +### from our side: during the week inbetween +- Adjust design and prototype + + +### 17th May +Third iteration: polishing and publishing. +Focus on aesthetics and narrations. + +Morning: +Deciding on the index and adjusting the order on Are.na +Individual tutorial for final adjustments and polishing. + +Afternoon: +Individual tutorial for final adjustments and polishing. +Publishing and presentation round on the online version. + +Outcomes: pubblication of the issue! + + diff --git a/flask_boat.py b/flask_boat.py new file mode 100644 index 0000000..35f8070 --- /dev/null +++ b/flask_boat.py @@ -0,0 +1,122 @@ +# IMPORT +import os + +from flask import Flask, render_template, request, url_for, redirect, jsonify, abort, send_from_directory +import markdown +import frontmatter +from datetime import datetime + + +# FUNCTIONS + + +def list_files(folder, remove_ext=False): + ''' Read all the functions in a folder ''' + names = [] + for entry in os.scandir(folder): + # add to the list only proper files + if entry.is_file(follow_symlinks=False): + # remove the extension from the filename + n = os.path.splitext(entry.name)[0] + if remove_ext: + n = entry.name + names.append(n) + return names + + +def list_folders(folder): + ''' Return all the folders in a folder ''' + names = [] + for entry in os.scandir(folder): + # add to the list only proper files + if not entry.name.startswith('.') and entry.is_dir(): + # remove the extension from the filename + names.append(entry.name) + return names + + +def get_md_contents(filename, directory='./contents'): + ''' Return contents from a filename as frontmatter handler ''' + with open(f"{directory}/{filename}", "r") as f: + metadata, content = frontmatter.parse(f.read()) + html_content = markdown.markdown(content, extensions=['markdown.extensions.attr_list','markdown.extensions.codehilite','markdown.extensions.fenced_code']) + return metadata, html_content + + +# FLASK APP +base_url = "~kamo" +projects = 'projects' + +# create flask application +app = Flask(__name__, + static_url_path=f'/soupboat/{base_url}/static', + static_folder=f'/soupboat/{base_url}/static') +# Markdown(app, extensions=['extra']) +# app.jinja_env.extend(jinja2_highlight_cssclass = 'codehilite') + + +# add the base_url variable to all the flask templates +@app.context_processor +def set_base_url(): + return dict(base_url=base_url) + + +# Homepage +@app.route(f"/{base_url}/") +def home_page(): + + # get the basic info of the website from the /contents/home.md file + meta, content = get_md_contents("home.md") + projects_list = [] + for project in list_folders("./projects"): + project_info = get_md_contents("documentation.md", + f"./{projects}/{project}")[0] + project_date = datetime.strptime(project_info['date'], '%d/%m/%Y') + project_info['date'] = datetime.strftime(project_date, '%d %b, %y') + project_info['categories'].sort() + + project_info['slug'] = project + projects_list.append(project_info) + + projects_list.sort(reverse=True, key=lambda project: datetime.strptime( + project['date'], '%d %b, %y')) + + # get the list of the projects, the functions, and the corpora + home = { + **meta, + "content": content, + "projects": projects_list + } + return render_template("home.html", **home) + + +# For generic pages we can include a common template and change only the contents +@app.route(f"/{base_url}//") +def dynamic_page(slug=None): + # meta is a dictionary that contains all the attributes in the markdown file (ex: title, description, soup, etc) + # content is the body of the md file aka the text content + # in this way we can access those frontmatter attributes in jinja simply using the variables title, description, soup, etc + meta, content = get_md_contents(f"{slug}.md") + return render_template("page.html", **meta, content=content) + + +# Single project +@app.route(f"/{base_url}/projects//") +def p_info(project=None): + meta, content = get_md_contents("documentation.md", + f"./{projects}/{project}") + template = 'project.html' + if 'template' in meta: + template = meta['template'] + return render_template(template, **meta, content=content) + + + + +@app.route(f'/{base_url}/projects//') +def sendStaticFiles(project, filename): + return send_from_directory(app.root_path + f'/projects/{project}/', filename, conditional=True) + + +# RUN +app.run(port="3132") diff --git a/font/font.css b/font/font.css deleted file mode 100644 index 158d353..0000000 --- a/font/font.css +++ /dev/null @@ -1,11 +0,0 @@ -@font-face { - font-family: "Ortica"; - font-weight: bold; - src: url("./Ortica-Bold.woff2") format("woff2"), url("./Ortica-Bold.woff") format("woff"); -} - -@font-face { - font-family: "Ortica"; - font-weight: normal; - src: url("./Ortica-Light.woff2") format("woff2"), url("./Ortica-Light.woff") format("woff"); -} diff --git a/index.html b/index.html deleted file mode 100644 index aba9938..0000000 --- a/index.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - Kamo - - - - - - -

probably hungry

-
- hello this is a log of francesco also and only known as - kamo - back to the soupboat -
- - - -
- - diff --git a/name.js b/name.js deleted file mode 100644 index 8ca489a..0000000 --- a/name.js +++ /dev/null @@ -1,36 +0,0 @@ -const nameSpace = document.getElementById("name-space"); - -const list = [ - "kamo", - "sumo", - "camo", - "gamo", - "fra", - "salamino", - "zuppetta", - "soup eater", - "soul eater", - "sound eater", - "k", - "eheheh", - "🗿", - "🐡", - "fridge haunter", - "fridge hunter", - "fridge terror", - "niiiice", - "slice", - "BUT", -]; - -function randomName() { - return list[Math.floor(Math.random() * list.length)]; -} - -setInterval(() => { - nameSpace.innerHTML = randomName(); - nameSpace.classList.add("rotate"); - setTimeout(() => { - nameSpace.classList.remove("rotate"); - }, 5000); -}, 5000); diff --git a/projects/annotation-compass/.ipynb_checkpoints/documentation-checkpoint.md b/projects/annotation-compass/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..7e94058 --- /dev/null +++ b/projects/annotation-compass/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,128 @@ +--- +title: Annotation Compass +description: A tool for gathering situated impressions in order to create individual, vernacular and poetic readings of various inputs +date: 10/12/2021 +cover: +url: /soupboat/si16/annotation-compass/ +git: https://git.xpub.nl/kamo/collecting-labels +pad: https://pad.xpub.nl/p/sunday +links: + - url: https://hub.xpub.nl/soupboat/selection-process/ + title: wip presentation +categories: + - Web + - SI16 + - Label + - Tool +--- + + +This project is a multiplayer branch of the Concrete Label tool, developed in the context of the SI16 &&& is a super collaboration with Supi, Jian, Kim, Alex, and Emma. The description is a porting of the documentation that you can find along with the various showcases on the [SI16 website](https://hub.xpub.nl/soupboat/si16/projects/annotation-compass/). + +How do we bring multi-vocality in the work of annotation? The Annotation Compass builds composites from aggregated vernacular impressions, rich of their subjectivity and situatedness. It is the outcome of a three months journey questioning the relationship between vernacular languages and natural language processing tools. + +## First Experiments + +### The living-room + +![Supi's livingroom](/soupboat/~kamo/static/img/map_description_H.jpg) + +For this experiment, four of us were gathered in a living-room. + +- Number of participants: 4 +- Location: Supi's living room +- Aim: Map out each participant's impressions of the living room. +- Material: The living room's floor plan, InDesign, computers..... +- Time-frame: 5 minutes +- Instructions: individually annotate the floor plan with impressions of the living room + +After removing the floor plan and looking at the subjective annotations of this experiment, we observed that each outcome forms another 'space'. Each person's set of annotations brings a unique perspective of the living room , an 'individual map'. We then layered the individual maps and the compilation resulted in a vernacular picture of the space. This alternative understanding of the space can only be given to a reader through those descriptions. + +### Still from Michael Snow's Wavelength + +![Michael Snow, Wavelength](https://pzwiki.wdka.nl/mw-mediadesign/images/3/3e/Selection_process_2.png) + +The same method was applied to the photograph of a room. Each of us used a different set of coloured sticky notes and took 5 minutes to physically annotate the picture on the same surface. The picture was then removed from the background, resulting in a similar outcome as the experiment described above. + +From these observations, our interest on subjective annotations that could flow in a common understanding of an image grew. As a tool to collect situated impressions, we elaborated the idea of the Annotation Compass. + +On a given surface, such as an image, the tool facilitates the collection of annotations and their coordinates from various users simultaneously. These annotations represent individual knowledges and perspectives in regards to the given surface. + +![Michael Snow, Wavelength](https://pzwiki.wdka.nl/mw-mediadesign/images/3/32/Selection_process_3.png) +![Michael Snow, Wavelength](https://pzwiki.wdka.nl/mw-mediadesign/images/2/2b/Selection_process_4.png) + +## Instructions + +To use this tool, let's consider the "host" any person interested in gathering annotation on a specific image; and the "guest" any person invited by the host to annotate the image. + +### Process for the host + +1. upload an image +2. add a text to explain the context of the image or to give instructions and helpful advice to the guests +3. send link to guests and invite them to annotate +4. download a json-file or text-file that contains the collected data that was gathered so far +5. try the different functions of SI16 to filter the collected dat + +### Process for the guest + +1. open the link sent by the host +2. read the information attached to the image by the host +3. use the cursor to select a specific area that you want to annotate +4. write and insert your annotation(s)a + +## The data + +The Tool not only archives the annotations, but also additional meta-data that can be helpful to analyze the outcome. The collected data is stored in a "json-file" that comes as a list of labels. In each label, one can find the file name of the annotated image, the coordinates of the annotation, the dimension of the annotation 'box', the annotation itself, the index number of the annotation and a user identification: + +```json +{ + "image": "filename.jpg", + "position": {"x": 12, "y": 97}, + "size": {"width": 43, "height": 18}, + "text": "Content of the annotation", + "timestamp": "Wed, 01 Dec 2021 14:04:00 GMT", + "userID": 123456789 +} +``` + +- `image`: a reference to the filename of the image +- `position`: x and y coordinates given in percentage, relative to the top left corner of the image +- `size`: width and height given in percentage, relative to the size of the image +- `text`: the text content of the label +- `timestamp`: the moment in which the label was uploaded +- `userID`: a random generated id to keep track of the autorship of the labels + +__for the future:__ at some point could be intresting to something like a `components` property, in order to make the tool more flexible and open to plugin or integration. Ideally this property is a list of components, and each one can add some kind of info or metadata for specific usecases, without the need to rewrite all the code to make room for that. + +The outcome provided by the Annotation Compass is ever-changing: whenever an individual adds an annotation, the data grows. + +After applying the tool to different projects we observed that the collected data can offer a reflexion on the so called "objective": It provides individual perceptions and builds a common experience by including a multiplicity of impressions rather than one objective definition. In conclusion, the Tool can be used to provide alternative ways to define images, images of space, texts, and anything else annotatable. + +## Possible applications of the tool: + +- Ask individuals to annotate the space they are in at the moment. +- Ask individuals to annotate a space from memory. +- Ask individuals to annotate imaginary spaces. (e.g. a space from a dream, a fictional space they know from a novel, a place that exists but they never went …) +- Ask individuals to annotate a space before and after they went for the first time. +- Invite individuals to a space and ask them to annotate it as a performative act that is situated not only in space but also time. +- Ask individuals to annotate a space whenever they want (unlimited access). +- Ask individuals to annotate a public space. +- Ask individuals to annotate a whole city, country, continent … +- Ask individuals to annotate a private space. +- Ask individuals to annotate an indoor space (bedroom, library, central station, theatre …) +- Ask individuals to annotate an outdoor space (park, market place, beach …) +- Ask specific groups to annotate a space (queer, teenagers, people with disabilities, immigrants …) +- Ask individuals to annotate specific things, e.g. emotions, colors, surfaces, light … +- Ask individuals to only use specific glyphs (e.g. ! ? and –) or emojis to annotate the space to include those not confident using words. +- Encourage individuals to use their mother tongue / slang / informal language to annotate a space. +- Ask only one individual to give many annotations of a space over time (daily diary, yearly check-in …) +- Ask individuals to annotate different spaces (e.g. their own living rooms) +- Ask individuals to annotate a space without using a standard map but rather an empty sheet as a starting point. +- Ask individuals to annotate a space without using a standard map but rather an individual map or vernacular map as a starting point. +- Ask individuals to annotate a space without using a standard map but rather a photograph of a space as a starting point. +- Ask individuals to annotate a space in real life (e.g. using sticky notes, writing on plexiglass, interview) and use the tool to insert the data afterwards. +- annotate a photograph (portrait, scene, landscape …) +- annotate a painting +- annotate a text +- annotate a song/sound +- misusing the tool diff --git a/projects/annotation-compass/documentation.md b/projects/annotation-compass/documentation.md new file mode 100644 index 0000000..7e94058 --- /dev/null +++ b/projects/annotation-compass/documentation.md @@ -0,0 +1,128 @@ +--- +title: Annotation Compass +description: A tool for gathering situated impressions in order to create individual, vernacular and poetic readings of various inputs +date: 10/12/2021 +cover: +url: /soupboat/si16/annotation-compass/ +git: https://git.xpub.nl/kamo/collecting-labels +pad: https://pad.xpub.nl/p/sunday +links: + - url: https://hub.xpub.nl/soupboat/selection-process/ + title: wip presentation +categories: + - Web + - SI16 + - Label + - Tool +--- + + +This project is a multiplayer branch of the Concrete Label tool, developed in the context of the SI16 &&& is a super collaboration with Supi, Jian, Kim, Alex, and Emma. The description is a porting of the documentation that you can find along with the various showcases on the [SI16 website](https://hub.xpub.nl/soupboat/si16/projects/annotation-compass/). + +How do we bring multi-vocality in the work of annotation? The Annotation Compass builds composites from aggregated vernacular impressions, rich of their subjectivity and situatedness. It is the outcome of a three months journey questioning the relationship between vernacular languages and natural language processing tools. + +## First Experiments + +### The living-room + +![Supi's livingroom](/soupboat/~kamo/static/img/map_description_H.jpg) + +For this experiment, four of us were gathered in a living-room. + +- Number of participants: 4 +- Location: Supi's living room +- Aim: Map out each participant's impressions of the living room. +- Material: The living room's floor plan, InDesign, computers..... +- Time-frame: 5 minutes +- Instructions: individually annotate the floor plan with impressions of the living room + +After removing the floor plan and looking at the subjective annotations of this experiment, we observed that each outcome forms another 'space'. Each person's set of annotations brings a unique perspective of the living room , an 'individual map'. We then layered the individual maps and the compilation resulted in a vernacular picture of the space. This alternative understanding of the space can only be given to a reader through those descriptions. + +### Still from Michael Snow's Wavelength + +![Michael Snow, Wavelength](https://pzwiki.wdka.nl/mw-mediadesign/images/3/3e/Selection_process_2.png) + +The same method was applied to the photograph of a room. Each of us used a different set of coloured sticky notes and took 5 minutes to physically annotate the picture on the same surface. The picture was then removed from the background, resulting in a similar outcome as the experiment described above. + +From these observations, our interest on subjective annotations that could flow in a common understanding of an image grew. As a tool to collect situated impressions, we elaborated the idea of the Annotation Compass. + +On a given surface, such as an image, the tool facilitates the collection of annotations and their coordinates from various users simultaneously. These annotations represent individual knowledges and perspectives in regards to the given surface. + +![Michael Snow, Wavelength](https://pzwiki.wdka.nl/mw-mediadesign/images/3/32/Selection_process_3.png) +![Michael Snow, Wavelength](https://pzwiki.wdka.nl/mw-mediadesign/images/2/2b/Selection_process_4.png) + +## Instructions + +To use this tool, let's consider the "host" any person interested in gathering annotation on a specific image; and the "guest" any person invited by the host to annotate the image. + +### Process for the host + +1. upload an image +2. add a text to explain the context of the image or to give instructions and helpful advice to the guests +3. send link to guests and invite them to annotate +4. download a json-file or text-file that contains the collected data that was gathered so far +5. try the different functions of SI16 to filter the collected dat + +### Process for the guest + +1. open the link sent by the host +2. read the information attached to the image by the host +3. use the cursor to select a specific area that you want to annotate +4. write and insert your annotation(s)a + +## The data + +The Tool not only archives the annotations, but also additional meta-data that can be helpful to analyze the outcome. The collected data is stored in a "json-file" that comes as a list of labels. In each label, one can find the file name of the annotated image, the coordinates of the annotation, the dimension of the annotation 'box', the annotation itself, the index number of the annotation and a user identification: + +```json +{ + "image": "filename.jpg", + "position": {"x": 12, "y": 97}, + "size": {"width": 43, "height": 18}, + "text": "Content of the annotation", + "timestamp": "Wed, 01 Dec 2021 14:04:00 GMT", + "userID": 123456789 +} +``` + +- `image`: a reference to the filename of the image +- `position`: x and y coordinates given in percentage, relative to the top left corner of the image +- `size`: width and height given in percentage, relative to the size of the image +- `text`: the text content of the label +- `timestamp`: the moment in which the label was uploaded +- `userID`: a random generated id to keep track of the autorship of the labels + +__for the future:__ at some point could be intresting to something like a `components` property, in order to make the tool more flexible and open to plugin or integration. Ideally this property is a list of components, and each one can add some kind of info or metadata for specific usecases, without the need to rewrite all the code to make room for that. + +The outcome provided by the Annotation Compass is ever-changing: whenever an individual adds an annotation, the data grows. + +After applying the tool to different projects we observed that the collected data can offer a reflexion on the so called "objective": It provides individual perceptions and builds a common experience by including a multiplicity of impressions rather than one objective definition. In conclusion, the Tool can be used to provide alternative ways to define images, images of space, texts, and anything else annotatable. + +## Possible applications of the tool: + +- Ask individuals to annotate the space they are in at the moment. +- Ask individuals to annotate a space from memory. +- Ask individuals to annotate imaginary spaces. (e.g. a space from a dream, a fictional space they know from a novel, a place that exists but they never went …) +- Ask individuals to annotate a space before and after they went for the first time. +- Invite individuals to a space and ask them to annotate it as a performative act that is situated not only in space but also time. +- Ask individuals to annotate a space whenever they want (unlimited access). +- Ask individuals to annotate a public space. +- Ask individuals to annotate a whole city, country, continent … +- Ask individuals to annotate a private space. +- Ask individuals to annotate an indoor space (bedroom, library, central station, theatre …) +- Ask individuals to annotate an outdoor space (park, market place, beach …) +- Ask specific groups to annotate a space (queer, teenagers, people with disabilities, immigrants …) +- Ask individuals to annotate specific things, e.g. emotions, colors, surfaces, light … +- Ask individuals to only use specific glyphs (e.g. ! ? and –) or emojis to annotate the space to include those not confident using words. +- Encourage individuals to use their mother tongue / slang / informal language to annotate a space. +- Ask only one individual to give many annotations of a space over time (daily diary, yearly check-in …) +- Ask individuals to annotate different spaces (e.g. their own living rooms) +- Ask individuals to annotate a space without using a standard map but rather an empty sheet as a starting point. +- Ask individuals to annotate a space without using a standard map but rather an individual map or vernacular map as a starting point. +- Ask individuals to annotate a space without using a standard map but rather a photograph of a space as a starting point. +- Ask individuals to annotate a space in real life (e.g. using sticky notes, writing on plexiglass, interview) and use the tool to insert the data afterwards. +- annotate a photograph (portrait, scene, landscape …) +- annotate a painting +- annotate a text +- annotate a song/sound +- misusing the tool diff --git a/projects/api-worldbuilding/.ipynb_checkpoints/documentation-checkpoint.md b/projects/api-worldbuilding/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..b4a4486 --- /dev/null +++ b/projects/api-worldbuilding/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,100 @@ +--- +title: Chimeric API +description: What Can API Learn from Poetics and World-building? +categories: + - API +cover: chimera.jpg +cover_alt: a chimera +date: 10/11/2021 +--- + +_An original essay from Tiger Dingsun in which the terms graphic design are replaced with API. Read the original text here: [Chimeric Worlding](https://tdingsun.github.io/worlding/)_ + +![Phylogenetic diagrams](/soupboat/~kamo/static/img/title-img.png) +_Various frameworks for phylogenetic diagrams – right-to-left rectangular layout (A), bottom-up rectangular layout (B), top-down rectangular layout (Dendrogram) (C), rotated rectangular layout (D), bottom-up slanted layout (E), top-down slanted layout (Cladogram) (F), circular layout (G), circular inward layout (H and I)._ + +## Introduction + +I think I’ll start with that tired question of whether API development is authorship. + +I turn to contemporary discourse in translation theory, where there is the idea that translation is an act of authorship, as the translator inevitably has to make countless decisions in creating the translation. There is no such thing as a perfect translation, no such thing as the platonic copy of a text. The point of a translation isn’t, and can’t be, perfect imitation. Instead, the point is to give new life and new meaning to an original text. + +Insofar as API development is fundamentally structured around the act of intersemiotic translation, then, it follows that API development is authorship. + +So this question of “are designers authors” isn’t actually that interesting, and also probably isn’t actually the locus of the feelings around this debate.. Afterall, copywriters also author texts, but often they author texts in service of a brand. The anxiety of the developer doesn’t come from ruminating over whether or not what they do is considered ‘authorship’; it comes from feeling as though their entire field is stuck between being an artform and a service industry. + +What I am interested in, beyond this revelation that design is authorship, is in what kinds of texts we are creating, and in the potentials of developing a sense of poetics in API development. Poetics – how a text’s different elements come together and produce certain effects onto the reader – sounds a lot like what developers are already concerned with, but thinking about API development production through these terms in an under-explored avenue for API development beyond pure functionalism. In particular, I am interested in the poetics, the frameworks, and the tropes used by literatures like poetry or speculative fiction in order to engage their readers with worlds with their own internal systems of logic – worlds which relate to ours, but also lie within a field of hybridity and contradiction. Can API development do this too? My goal is to outline a methodology for developers to think of their practice as worldbuilding, and to consider the potentials and poetics that lie in such an endeavor. + +## API development and Poetics + +![Arab Apocalypse](/soupboat/~kamo/static/img/adnan.gif) +_Excerpt from Etel Adnan's The Arab Apocalypse_ + +There are already many things that the field of API development and poetry share. Poetry seeks to make new meaning through novel configurations of elements (words) from an already established system (language). API development, being related to the organization and presentation of information, can also be seen as making meaning through novel configuration of various elements, which are not just limited to language and text, but also might include images, symbolic meaning, and visual culture writ large. Poetry, more so than other literatures, is concerned not only with the denotative meaning of words, but also the meaning that arises from the aesthetic quality of words (things like phonaesthetics, sound symbolism, rhyme, metre). In dealing with typography, developers are also interested in both the denotative meaning and aesthetic qualities of a text they are working with. Both have a playful relationship to structure, sometimes adhering to, and sometimes breaking, form. + +However, one thing that API development does not often do, that poetry does, is making a world, to provide a rich context for their work that reaches towards the poetic, the fantastical, the improbable, the mythological. This is extremely worthwhile for developers to pursue, because worldbuilding allows for the potential for narratives to sprawl out nonlinearly. It invites a non-teleological reading (reading without a prescribed goal) of the text, (or image, or whatever the object of API development is) and offers a point of resistance against API development’s primary function as lubricant for the smooth flow of capital (be it economic, or otherwise), which relies on a singular, totalizing interpretation of the world. + +## A Methodology for Worldbuilding + +![Diagram from Jacques Maritain's Creative Intuition in Art and Poetry](/soupboat/~kamo/static/img/maritain.jpg) + +_Diagram from Jacques Maritain's Creative Intuition in Art and Poetry_ + +The ways in which poets develop their own sense of poetics varies, but in general one could describe it as a complex interaction between systems of cultural and historic signifiers and a poet’s own idiosyncratic, hermeneutic system of symbols, images, and other poetic devices, as well as their own logic of how those symbols relate to one another. After all, I would imagine that most poets want their texts to be somewhat understandable by their audience. By combining signifiers that are already familiar to their audience with more personal narratives, images, and symbols, the poet creates entry points into the more untranslatable parts of their psyche. This is related to what the artist Ian Cheng might call ‘worlding’. Cheng writes on his website, + +_“Worlding [is] a vital practice to help us navigate darkness, maintain agency despite indeterminacy, and appreciate the multitude of Worlds we can choose to live in and create. Whether you are creating art, games, institutions, religions, or life itself: LIVE TO WORLD AND WORLD TO LIVE!”_ + +He further writes in another blog post: + +_We could say a World is something like a gated garden. A World has borders. A World has laws. A World has values. A World has dysfunction. A World can grow up. A World has members who live in it. A World gives its members permission to act differently than outside of it. A World incentivizes its members to keep it alive, often with the pleasures of its dysfunction. A World counts certain actions inside it as relevant and meaningful. A World undergoes reformations and disruptions. A World has mythic figures. A World is a container for all the possible stories of itself. A World manifests evidence of itself in its members, emissaries, symbols, tangible artifacts, and media, yet it is always something more._ + +What’s most interesting to me here is this interplay between constraints and possibilities. Poets constrain their work using various structures, but also build upon and selectively break apart those structures by incorporating their own idiosyncratic use of language. Through offering both references to (perhaps multiple) systems of shared references and collective knowledge and one's own personal frameworks, poets create new worlds from this combination of different shared frameworks for interpreting reality and the poets own personal reality, worlds that the audience is able to semi-inhabit, and explore over time. + +![Thoughts, Language, Culture](/soupboat/~kamo/static/img/thoughts.png) +_Diagram of the relationship between Thought, Language, and Culture from Ariel Vázquez Carranza's essay What is Language for Sociolinguists?_ + +This suggests a methodology that might be of use to developers. Although creating novel structures and novel logics to govern our making necessarily limits any semiotic elements that have to adhere to these structures, these structures also imply the existence of an expandable world within which that logic holds true. The key here is this combination of “internal” and “external” (of which there may be many, which may contradict each other) systems of meaning. This is one way to view the way poets develop their own sense of poetics—how the different elements of a text all fit together, and produce both linguistic and extralinguistic (sensorial? synesthetic?) effects onto the reader. developers, too, can develop their own visual language in the same way that a poet might develop any number of poetic frameworks through which to interpret reality, by fitting together multiple external and internal systems of meaning. We are already adept at invoking widely shared, conventional systems of meaning in order to make our work function on the basis of clarity, but it is also possible for clarity to exist simultaneously with another, murkier kind of effect that comes from fortifying conventional logic with a developer’s own internal logic. + +![Chimera](/soupboat/~kamo/static/img/chimera.jpg) +_The mythological chimera_ + +I might call this methodology “chimeric worlding”, to emphasize the fact that these worlds, which developers and their audience cohabitate through their work, are cobbled together from the DNA of various other worlds, and are richer because of this multiplicity. And I choose this word “chimeric” not only for its meaning in the biological sense, i.e., “composed of material (such as DNA or polypeptide) from more than one organism”, but also for its more metaphorical sense: “1) existing only as the product of unchecked imagination, fantastically visionary or improbable, 2) given to fantastic schemes.” (Merriam-Webster) + +Under the methodology of chimeric worlding, there is a call for epistemic disobedience, as the decolonial theorist Walter Mignolo calls it, for we all operate under symbolic systems of oppression. As developers we have the ability to take those pervasive systems and strip them for parts, combining them with other, more marginalized knowledge. We can take what has been deemed ‘esoterica’ or ‘folk’, and give them equal importance with conventional structures of knowledge, this so-called ‘rationality’ or ‘common sense’ that has been naturalized. So much of what is considered ‘good’ or ‘correct’ or ‘legible’ design comes from these naturalized conventions. Part of this methodology of “chimeric worlding” involves the possibility of co-opting the aesthetics of structuralism, while recognizing it’s inherent arbitrariness, and to see that this arbitrariness is in fact emancipatory, and enables us to layer multiple logics and systems of knowledge. There’s an opportunity here to mine history and culture of various frameworks as inspiration for organizing content, and for developing one’s own individualized visual language. (Responsibly, of course, but here is where I might invoke my identity as a queer designer of color operating in the Western world, to say that I am interested in co-opting white knowledge as well as utilizing structures from my own culture. This is why, for example, I am interested in both Taoist cosmology, as well as the aesthetics and lore of Christian mythology, even though I have absolutely zero cultural connection to Christianity). + +## Demons, Folklore, and Speculative Fiction + +![Vampire Weekend](/soupboat/~kamo/static/img/vampire_weekend.jpg) +_Art direction for Vampire Weekend's album Father of the Bride, featuring a re-interpreted Tree of the Sephiroth from Judaic Mysticism_ + +“Chimeric worlding” also has a relationship to sacred geometry, to numerology, to mandalas, magic circles, to cosmologies, to mythos. There are all of these old frameworks of graphically organizing the universe and all that it contains, and how it all functions. One form of “chimeric worlding” might be for developers to draw visual and compositional inspiration from mysticism. Consider the five elements used in many traditional Chinese practices to explain various phenomena. Consider the four humors, used in medieval Western European theories of anatomy. + +![Sigils](/soupboat/~kamo/static/img/2.png) +_Worldbuilding Sigils for the 72 Demons in the Ars Goetia_ + +Consider, for example, the Ars Goetia, that Western medieval taxonomy of 72 demons. Each of these 72 demons were associated with their own sigil, and they obviously weren’t called developers back then, but some developer had to create these sigils, these compositions of line, circles, and crosses. By associating this system of sigils with an already existing lore around demonic organizational hierarchy, this designer is able to connect their (somewhat arbitrary) designs with the existing Western eschatological tradition, loading whatever they are making with the invitation for the audience to step into a world where texts and graphic symbols operate under some hidden logic, and have greater power than in conventional reality. + +![HxH](/soupboat/~kamo/static/img/nen.jpeg) +_An explanation of the power system in the anime series Hunter x Hunter, which is extremely specific to the world of the series, yet still based in historico-religious ideas of 'aura' or 'qi'._ + +Sci-fi and fantasy writers have been doing this sort of thing for a while now, to create worlds that are new and yet related to ours. It has also been commonly troped in many anime franchises. “chimeric worlding” also definitely owes a lot to the genre of magical realism, especially in the way that magical realism often operates through epistemic disobedience, by disrupting conventional logic and reasoning. Many of these narratives operate under fictional structures and power systems that draw from various cultural, historical, and religious/spiritual/mystical frameworks, while combining that with other logics and inventions that expand upon those already existing frameworks, in order to flesh out the world in which their narratives play out. + +![Digimon](/soupboat/~kamo/static/img/digimon.png) +_12 Digimon based off of the 12 animals in the Chinese Zodiac. There are also 7 Digimon based off of the Seven Deadly Sins._ + +More literally, this relationship between fictional worlds and broader culture and history is evident in the fact that much of worldbuilding heavily references various world mythologies, folktales and religions (everything from Thor in the Marvel Cinematic Universe to vampires and werewolves in the Twilight franchise), but in a way that flattens it and makes it more malleable. It’s like secularized mysticism, or playful mythos. And what is mythos, if not narrative and epistemological frameworks for understanding the world? But this play with culture also happens at various levels of abstraction. For example, elemental systems (like in Pokemon, or Naruto, or Avatar the Last Airbender) originate from any number of different theories of the atomic makeup of matter (the four classical elements of fire, water, earth, air, the 5 elemental system in East Asia of fire, water, earth, metal, wood). The taxonomic system in Digimon comes from a more recent, technological framework of relationships between data, viruses, and vaccines. In Full Metal Alchemist, which establishes a magic system based on multiple historical-cultural definitions of alchemy, the antagonists are organized around the seven deadly sins from Christian philosophy. Other examples include references to tarot cards (Cardcaptor Sakura, Persona 4, Shin Megami Tensei), chakras (Naruto), different musical genres (Trolls World Tour), taxonomies of virtues, personality traits, or emotions (Digimon again, and even the Pixar movie Inside Out), divisions of labor in a dystopian imagining of society (Hunger Games, plus a slew of other YA dystopian series) or different theories of the relationship between mind, body, and soul (too many to count). + +There are all of these ways that writers expand a world through it’s lore, and the great thing about that is that building up a lore suggests the existence of even more lore, that just happens to have not yet been made explicit to the audience, and is open to speculation. This is the kind of thing that fuels fandom. What if developers could create worlds capable of garnering fan theories, multiple interpretations, and wild reimaginings? It would mean a depth of engagement with API development beyond the singular goal of clarity and communication. + +## Expanding the Limits of API development + +![Culture](/soupboat/~kamo/static/img/4.png) + +If developers only rely on a set of conventions and references that are legible to the dominant culture, then they will inevitably just create things that are meant to be consumed as efficiently as possible, and nothing else. However, if designers only relied on a personal set of symbols and signifiers that are only meaningful to them, their work will be completely useless to others. The field of API development is oriented towards the public, and therein lies its strength. But it can be easy to forget that a public is made of individuals, and it can be hard to create things that both offer up entry points for the audience, and broadly opens up a field of interpretation. “chimeric worlding” helps the developer maintain cohesion in their body of work without feeling one-note. Because if the developer develops a rich, hybridized, internal logic through which their body of work functions, even without explicitly explaining that logic, the audience is able to slowly piece that together, and excavate the lore of the world that is created. + +![Culture](/soupboat/~kamo/static/img/5.png) +_Worldbuilding Poetry and speculative fiction already do this. developers can, too.)_ + +It bears clarifying, that this methodology is not one that tells you to throw away all structure, to throw away all of your legacy Western European API development education and sensibilities. It is a methodology that tells you to provincialize that education, to appropriate and reconfigure it as parts of new hybrids, and to consider it just one tool out of many possible tools, one structure out of many possible structures. This methodology is not one that is anti-structure. It is just pro- multivarious and contradictory and ambiguous and poetic structures. + +As an analogy, I might say that this methodology is not one that says to make and then ultimately break the grid. Because the truth is, I, and most other developers, like grids. So instead of breaking the grid, I want to make the grid my own, to claim its aesthetics for myself, and to imbue the grid itself with rich layers of connotative meaning and custom logics. The “chimeric worlding’ version of a grid is a grid that binds itself to the texts and images that lay on top of it, wrapping around it and becoming the bones of a world. And the audience doesn’t necessarily have to understand it all. The paradox is that clarity can, in fact, co-exist with poetic ambiguity and the openness of interpretation. Legibility can co-exist with illegibility. This ambiguous structure (or perhaps structural ambiguity?) signals to the audience that there is a world here, and that it is worth engaging with, and even if they can only catch a glimpse at first, there are hidden depths to discover. diff --git a/projects/api-worldbuilding/documentation.md b/projects/api-worldbuilding/documentation.md new file mode 100644 index 0000000..b4a4486 --- /dev/null +++ b/projects/api-worldbuilding/documentation.md @@ -0,0 +1,100 @@ +--- +title: Chimeric API +description: What Can API Learn from Poetics and World-building? +categories: + - API +cover: chimera.jpg +cover_alt: a chimera +date: 10/11/2021 +--- + +_An original essay from Tiger Dingsun in which the terms graphic design are replaced with API. Read the original text here: [Chimeric Worlding](https://tdingsun.github.io/worlding/)_ + +![Phylogenetic diagrams](/soupboat/~kamo/static/img/title-img.png) +_Various frameworks for phylogenetic diagrams – right-to-left rectangular layout (A), bottom-up rectangular layout (B), top-down rectangular layout (Dendrogram) (C), rotated rectangular layout (D), bottom-up slanted layout (E), top-down slanted layout (Cladogram) (F), circular layout (G), circular inward layout (H and I)._ + +## Introduction + +I think I’ll start with that tired question of whether API development is authorship. + +I turn to contemporary discourse in translation theory, where there is the idea that translation is an act of authorship, as the translator inevitably has to make countless decisions in creating the translation. There is no such thing as a perfect translation, no such thing as the platonic copy of a text. The point of a translation isn’t, and can’t be, perfect imitation. Instead, the point is to give new life and new meaning to an original text. + +Insofar as API development is fundamentally structured around the act of intersemiotic translation, then, it follows that API development is authorship. + +So this question of “are designers authors” isn’t actually that interesting, and also probably isn’t actually the locus of the feelings around this debate.. Afterall, copywriters also author texts, but often they author texts in service of a brand. The anxiety of the developer doesn’t come from ruminating over whether or not what they do is considered ‘authorship’; it comes from feeling as though their entire field is stuck between being an artform and a service industry. + +What I am interested in, beyond this revelation that design is authorship, is in what kinds of texts we are creating, and in the potentials of developing a sense of poetics in API development. Poetics – how a text’s different elements come together and produce certain effects onto the reader – sounds a lot like what developers are already concerned with, but thinking about API development production through these terms in an under-explored avenue for API development beyond pure functionalism. In particular, I am interested in the poetics, the frameworks, and the tropes used by literatures like poetry or speculative fiction in order to engage their readers with worlds with their own internal systems of logic – worlds which relate to ours, but also lie within a field of hybridity and contradiction. Can API development do this too? My goal is to outline a methodology for developers to think of their practice as worldbuilding, and to consider the potentials and poetics that lie in such an endeavor. + +## API development and Poetics + +![Arab Apocalypse](/soupboat/~kamo/static/img/adnan.gif) +_Excerpt from Etel Adnan's The Arab Apocalypse_ + +There are already many things that the field of API development and poetry share. Poetry seeks to make new meaning through novel configurations of elements (words) from an already established system (language). API development, being related to the organization and presentation of information, can also be seen as making meaning through novel configuration of various elements, which are not just limited to language and text, but also might include images, symbolic meaning, and visual culture writ large. Poetry, more so than other literatures, is concerned not only with the denotative meaning of words, but also the meaning that arises from the aesthetic quality of words (things like phonaesthetics, sound symbolism, rhyme, metre). In dealing with typography, developers are also interested in both the denotative meaning and aesthetic qualities of a text they are working with. Both have a playful relationship to structure, sometimes adhering to, and sometimes breaking, form. + +However, one thing that API development does not often do, that poetry does, is making a world, to provide a rich context for their work that reaches towards the poetic, the fantastical, the improbable, the mythological. This is extremely worthwhile for developers to pursue, because worldbuilding allows for the potential for narratives to sprawl out nonlinearly. It invites a non-teleological reading (reading without a prescribed goal) of the text, (or image, or whatever the object of API development is) and offers a point of resistance against API development’s primary function as lubricant for the smooth flow of capital (be it economic, or otherwise), which relies on a singular, totalizing interpretation of the world. + +## A Methodology for Worldbuilding + +![Diagram from Jacques Maritain's Creative Intuition in Art and Poetry](/soupboat/~kamo/static/img/maritain.jpg) + +_Diagram from Jacques Maritain's Creative Intuition in Art and Poetry_ + +The ways in which poets develop their own sense of poetics varies, but in general one could describe it as a complex interaction between systems of cultural and historic signifiers and a poet’s own idiosyncratic, hermeneutic system of symbols, images, and other poetic devices, as well as their own logic of how those symbols relate to one another. After all, I would imagine that most poets want their texts to be somewhat understandable by their audience. By combining signifiers that are already familiar to their audience with more personal narratives, images, and symbols, the poet creates entry points into the more untranslatable parts of their psyche. This is related to what the artist Ian Cheng might call ‘worlding’. Cheng writes on his website, + +_“Worlding [is] a vital practice to help us navigate darkness, maintain agency despite indeterminacy, and appreciate the multitude of Worlds we can choose to live in and create. Whether you are creating art, games, institutions, religions, or life itself: LIVE TO WORLD AND WORLD TO LIVE!”_ + +He further writes in another blog post: + +_We could say a World is something like a gated garden. A World has borders. A World has laws. A World has values. A World has dysfunction. A World can grow up. A World has members who live in it. A World gives its members permission to act differently than outside of it. A World incentivizes its members to keep it alive, often with the pleasures of its dysfunction. A World counts certain actions inside it as relevant and meaningful. A World undergoes reformations and disruptions. A World has mythic figures. A World is a container for all the possible stories of itself. A World manifests evidence of itself in its members, emissaries, symbols, tangible artifacts, and media, yet it is always something more._ + +What’s most interesting to me here is this interplay between constraints and possibilities. Poets constrain their work using various structures, but also build upon and selectively break apart those structures by incorporating their own idiosyncratic use of language. Through offering both references to (perhaps multiple) systems of shared references and collective knowledge and one's own personal frameworks, poets create new worlds from this combination of different shared frameworks for interpreting reality and the poets own personal reality, worlds that the audience is able to semi-inhabit, and explore over time. + +![Thoughts, Language, Culture](/soupboat/~kamo/static/img/thoughts.png) +_Diagram of the relationship between Thought, Language, and Culture from Ariel Vázquez Carranza's essay What is Language for Sociolinguists?_ + +This suggests a methodology that might be of use to developers. Although creating novel structures and novel logics to govern our making necessarily limits any semiotic elements that have to adhere to these structures, these structures also imply the existence of an expandable world within which that logic holds true. The key here is this combination of “internal” and “external” (of which there may be many, which may contradict each other) systems of meaning. This is one way to view the way poets develop their own sense of poetics—how the different elements of a text all fit together, and produce both linguistic and extralinguistic (sensorial? synesthetic?) effects onto the reader. developers, too, can develop their own visual language in the same way that a poet might develop any number of poetic frameworks through which to interpret reality, by fitting together multiple external and internal systems of meaning. We are already adept at invoking widely shared, conventional systems of meaning in order to make our work function on the basis of clarity, but it is also possible for clarity to exist simultaneously with another, murkier kind of effect that comes from fortifying conventional logic with a developer’s own internal logic. + +![Chimera](/soupboat/~kamo/static/img/chimera.jpg) +_The mythological chimera_ + +I might call this methodology “chimeric worlding”, to emphasize the fact that these worlds, which developers and their audience cohabitate through their work, are cobbled together from the DNA of various other worlds, and are richer because of this multiplicity. And I choose this word “chimeric” not only for its meaning in the biological sense, i.e., “composed of material (such as DNA or polypeptide) from more than one organism”, but also for its more metaphorical sense: “1) existing only as the product of unchecked imagination, fantastically visionary or improbable, 2) given to fantastic schemes.” (Merriam-Webster) + +Under the methodology of chimeric worlding, there is a call for epistemic disobedience, as the decolonial theorist Walter Mignolo calls it, for we all operate under symbolic systems of oppression. As developers we have the ability to take those pervasive systems and strip them for parts, combining them with other, more marginalized knowledge. We can take what has been deemed ‘esoterica’ or ‘folk’, and give them equal importance with conventional structures of knowledge, this so-called ‘rationality’ or ‘common sense’ that has been naturalized. So much of what is considered ‘good’ or ‘correct’ or ‘legible’ design comes from these naturalized conventions. Part of this methodology of “chimeric worlding” involves the possibility of co-opting the aesthetics of structuralism, while recognizing it’s inherent arbitrariness, and to see that this arbitrariness is in fact emancipatory, and enables us to layer multiple logics and systems of knowledge. There’s an opportunity here to mine history and culture of various frameworks as inspiration for organizing content, and for developing one’s own individualized visual language. (Responsibly, of course, but here is where I might invoke my identity as a queer designer of color operating in the Western world, to say that I am interested in co-opting white knowledge as well as utilizing structures from my own culture. This is why, for example, I am interested in both Taoist cosmology, as well as the aesthetics and lore of Christian mythology, even though I have absolutely zero cultural connection to Christianity). + +## Demons, Folklore, and Speculative Fiction + +![Vampire Weekend](/soupboat/~kamo/static/img/vampire_weekend.jpg) +_Art direction for Vampire Weekend's album Father of the Bride, featuring a re-interpreted Tree of the Sephiroth from Judaic Mysticism_ + +“Chimeric worlding” also has a relationship to sacred geometry, to numerology, to mandalas, magic circles, to cosmologies, to mythos. There are all of these old frameworks of graphically organizing the universe and all that it contains, and how it all functions. One form of “chimeric worlding” might be for developers to draw visual and compositional inspiration from mysticism. Consider the five elements used in many traditional Chinese practices to explain various phenomena. Consider the four humors, used in medieval Western European theories of anatomy. + +![Sigils](/soupboat/~kamo/static/img/2.png) +_Worldbuilding Sigils for the 72 Demons in the Ars Goetia_ + +Consider, for example, the Ars Goetia, that Western medieval taxonomy of 72 demons. Each of these 72 demons were associated with their own sigil, and they obviously weren’t called developers back then, but some developer had to create these sigils, these compositions of line, circles, and crosses. By associating this system of sigils with an already existing lore around demonic organizational hierarchy, this designer is able to connect their (somewhat arbitrary) designs with the existing Western eschatological tradition, loading whatever they are making with the invitation for the audience to step into a world where texts and graphic symbols operate under some hidden logic, and have greater power than in conventional reality. + +![HxH](/soupboat/~kamo/static/img/nen.jpeg) +_An explanation of the power system in the anime series Hunter x Hunter, which is extremely specific to the world of the series, yet still based in historico-religious ideas of 'aura' or 'qi'._ + +Sci-fi and fantasy writers have been doing this sort of thing for a while now, to create worlds that are new and yet related to ours. It has also been commonly troped in many anime franchises. “chimeric worlding” also definitely owes a lot to the genre of magical realism, especially in the way that magical realism often operates through epistemic disobedience, by disrupting conventional logic and reasoning. Many of these narratives operate under fictional structures and power systems that draw from various cultural, historical, and religious/spiritual/mystical frameworks, while combining that with other logics and inventions that expand upon those already existing frameworks, in order to flesh out the world in which their narratives play out. + +![Digimon](/soupboat/~kamo/static/img/digimon.png) +_12 Digimon based off of the 12 animals in the Chinese Zodiac. There are also 7 Digimon based off of the Seven Deadly Sins._ + +More literally, this relationship between fictional worlds and broader culture and history is evident in the fact that much of worldbuilding heavily references various world mythologies, folktales and religions (everything from Thor in the Marvel Cinematic Universe to vampires and werewolves in the Twilight franchise), but in a way that flattens it and makes it more malleable. It’s like secularized mysticism, or playful mythos. And what is mythos, if not narrative and epistemological frameworks for understanding the world? But this play with culture also happens at various levels of abstraction. For example, elemental systems (like in Pokemon, or Naruto, or Avatar the Last Airbender) originate from any number of different theories of the atomic makeup of matter (the four classical elements of fire, water, earth, air, the 5 elemental system in East Asia of fire, water, earth, metal, wood). The taxonomic system in Digimon comes from a more recent, technological framework of relationships between data, viruses, and vaccines. In Full Metal Alchemist, which establishes a magic system based on multiple historical-cultural definitions of alchemy, the antagonists are organized around the seven deadly sins from Christian philosophy. Other examples include references to tarot cards (Cardcaptor Sakura, Persona 4, Shin Megami Tensei), chakras (Naruto), different musical genres (Trolls World Tour), taxonomies of virtues, personality traits, or emotions (Digimon again, and even the Pixar movie Inside Out), divisions of labor in a dystopian imagining of society (Hunger Games, plus a slew of other YA dystopian series) or different theories of the relationship between mind, body, and soul (too many to count). + +There are all of these ways that writers expand a world through it’s lore, and the great thing about that is that building up a lore suggests the existence of even more lore, that just happens to have not yet been made explicit to the audience, and is open to speculation. This is the kind of thing that fuels fandom. What if developers could create worlds capable of garnering fan theories, multiple interpretations, and wild reimaginings? It would mean a depth of engagement with API development beyond the singular goal of clarity and communication. + +## Expanding the Limits of API development + +![Culture](/soupboat/~kamo/static/img/4.png) + +If developers only rely on a set of conventions and references that are legible to the dominant culture, then they will inevitably just create things that are meant to be consumed as efficiently as possible, and nothing else. However, if designers only relied on a personal set of symbols and signifiers that are only meaningful to them, their work will be completely useless to others. The field of API development is oriented towards the public, and therein lies its strength. But it can be easy to forget that a public is made of individuals, and it can be hard to create things that both offer up entry points for the audience, and broadly opens up a field of interpretation. “chimeric worlding” helps the developer maintain cohesion in their body of work without feeling one-note. Because if the developer develops a rich, hybridized, internal logic through which their body of work functions, even without explicitly explaining that logic, the audience is able to slowly piece that together, and excavate the lore of the world that is created. + +![Culture](/soupboat/~kamo/static/img/5.png) +_Worldbuilding Poetry and speculative fiction already do this. developers can, too.)_ + +It bears clarifying, that this methodology is not one that tells you to throw away all structure, to throw away all of your legacy Western European API development education and sensibilities. It is a methodology that tells you to provincialize that education, to appropriate and reconfigure it as parts of new hybrids, and to consider it just one tool out of many possible tools, one structure out of many possible structures. This methodology is not one that is anti-structure. It is just pro- multivarious and contradictory and ambiguous and poetic structures. + +As an analogy, I might say that this methodology is not one that says to make and then ultimately break the grid. Because the truth is, I, and most other developers, like grids. So instead of breaking the grid, I want to make the grid my own, to claim its aesthetics for myself, and to imbue the grid itself with rich layers of connotative meaning and custom logics. The “chimeric worlding’ version of a grid is a grid that binds itself to the texts and images that lay on top of it, wrapping around it and becoming the bones of a world. And the audience doesn’t necessarily have to understand it all. The paradox is that clarity can, in fact, co-exist with poetic ambiguity and the openness of interpretation. Legibility can co-exist with illegibility. This ambiguous structure (or perhaps structural ambiguity?) signals to the audience that there is a world here, and that it is worth engaging with, and even if they can only catch a glimpse at first, there are hidden depths to discover. diff --git a/projects/cam-transcript/.ipynb_checkpoints/documentation-checkpoint.md b/projects/cam-transcript/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..a374446 --- /dev/null +++ b/projects/cam-transcript/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,25 @@ +--- +title: Cam Transcript +date: 12/10/2021 +pad: https://pad.xpub.nl/p/cam-stranscript +project: cam-transcript +description: 10 minutes transcription from Insecam webcams +categories: + - Text + - Video +--- + + + +## Video Transcribing + +[SI16 - with Cristina and Manetta](https://pad.xpub.nl/p/SP16_1210) + +In groups of 2-3: + +1. Decide a video to transcribe (max 10 min) +2. If you can't decide on one, take 3-5 minutes to think about a subject of everyday knowledge that is particular to a location/group. Record yourself telling the story +3. Transcribe individually either the video or your own recording +4. Compare the transcriptions + +fun with Kimberley + Carmen \ No newline at end of file diff --git a/projects/cam-transcript/documentation.md b/projects/cam-transcript/documentation.md new file mode 100644 index 0000000..a374446 --- /dev/null +++ b/projects/cam-transcript/documentation.md @@ -0,0 +1,25 @@ +--- +title: Cam Transcript +date: 12/10/2021 +pad: https://pad.xpub.nl/p/cam-stranscript +project: cam-transcript +description: 10 minutes transcription from Insecam webcams +categories: + - Text + - Video +--- + + + +## Video Transcribing + +[SI16 - with Cristina and Manetta](https://pad.xpub.nl/p/SP16_1210) + +In groups of 2-3: + +1. Decide a video to transcribe (max 10 min) +2. If you can't decide on one, take 3-5 minutes to think about a subject of everyday knowledge that is particular to a location/group. Record yourself telling the story +3. Transcribe individually either the video or your own recording +4. Compare the transcriptions + +fun with Kimberley + Carmen \ No newline at end of file diff --git a/projects/chameleon/.ipynb_checkpoints/documentation-checkpoint.md b/projects/chameleon/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..83640ec --- /dev/null +++ b/projects/chameleon/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,31 @@ +--- +title: Chameleon RRPG 🦎 +description: A Random Role Play Game to inject micro scripted actions in daily life +date: 01/03/2022 +categories: + - Games +cover: KecleonCelestialStorm122.jpg +cover_alt: The chameleon pokemon named Keckleon +template: cards.html +cards: + - KecleonCelestialStorm122.jpg + - KecleonLostThunder161.jpg + - KecleonLostThunder162.jpg +css: cards.css +--- + +The game requires a social context and can be played by any number of players. + +Each player is a chameleon that mimetize from the others. the chameleon hidden awaits for its prey: usuallly a random insect. + +At the beginning of the game each chameleon is assigned with a random insect: a secret simple action to be done with a certain degree of absurd (provide examples) + +If the chameleon manages to catch its insect without being noticed from the others the game continue. + +When all the chameleons have eaten they win together. + +If a chameleon finds out that another one is eating, it moves faster its sticky tongue to steal the prey. he win, but everyone else loose and the game ends. + +If the chameleon who tried to steal the instect was wrong and the other was not eating but just mimetizing as always, the latter is hit by the sticky tongue in one eye, and the game continues. + +To facilitate the mimecy and the secrecy the chameleons have developed a simple website from which each participant could receive an insect, and notify when it eats it. when everyone have notified their lunch the website ring and give an award to everyone diff --git a/projects/chameleon/documentation.md b/projects/chameleon/documentation.md new file mode 100644 index 0000000..c18f7fb --- /dev/null +++ b/projects/chameleon/documentation.md @@ -0,0 +1,32 @@ +--- +title: Chameleon RRPG 🦎 +description: A Random Role Play Game to inject micro scripted actions in daily life +date: 01/03/2022 +categories: + - Games +cover: KecleonCelestialStorm122.jpg +cover_alt: The chameleon pokemon named Keckleon +template: cards.html +cards: + - KecleonCelestialStorm122.jpg + - KecleonLostThunder161.jpg + - KecleonLostThunder162.jpg +css: cards.css +--- + +The game requires a social context and can be played by any number of players. + +Each player is a chameleon that mimetize from the others. the chameleon hidden awaits for its prey: usuallly a random insect. + +At the beginning of the game each chameleon is assigned with a random insect: a secret simple action to be done with a certain degree of absurd (provide examples) + +If the chameleon manages to catch its insect without being noticed from the others the game continue. + +When all the chameleons have eaten they win together. + +If a chameleon finds out that another one is eating, it moves faster its sticky tongue to steal the prey. he win, but everyone else loose and the game ends. + +If the chameleon who tried to steal the instect was wrong and the other was not eating but just mimetizing as always, the latter is hit by the sticky tongue in one eye, and the game continues. + +To facilitate the mimecy and the secrecy the chameleons have developed a simple website from which each participant could receive an insect, and notify when it eats it. when everyone have notified their lunch the website ring and give an award to everyone + diff --git a/projects/chaotic-evil-puzzles/.ipynb_checkpoints/documentation-checkpoint.md b/projects/chaotic-evil-puzzles/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..5b75ac7 --- /dev/null +++ b/projects/chaotic-evil-puzzles/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,193 @@ +--- +title: Chaotic evil puzzles +description: Jigsaw puzzle as a form of encryption of our SI17 +date: 18/02/2022 +cover: 91AC-jbMPsL._AC_SL1500_.jpg +cover_alt: white japanes jigsaw puzzle +git: https://git.xpub.nl/kamo/chaospuzzles +categories: + - Proposal + - SI17 + - Games +--- + +## There are 100 lot boxes with 100 different jigsaw puzzles of 100 pieces.* +![100 boxes compose the face of aymeric if seen from a precise point of view](https://hub.xpub.nl/soupboat/~kamo/static/img/100-boxes.jpg) +_\* (exact quantities to be defined)_ + +## The picture on each puzzles is a content related to our experiments, games and researches for the SI17 +![sample of contents for the puzzles](https://hub.xpub.nl/soupboat/~kamo/static/img/catchy-puzzles.jpg) + +Each puzzle is an A2 sized image displaying the works we did during this trimester, designed in a way that can be interesting for the players to buy it, even for the sake of doing a jigsaw puzzle itself. + +_f.e. A puzzle could be the rules for an RPG; or the map of a bitsy game with some critical texts about gamification; a generated maze, a fan fiction, the glossary, the list of one sentence games, etc._ + +In other words, the collection of puzzles will be a sort of inventory of our research framed in the form of jigsaw. + +## The pieces are scattered through all the loot boxes, in a way that each one contains parts of multiple puzzles. +![shuffle of the jiigsaw pieces](https://hub.xpub.nl/soupboat/~grgr/static/img/jigmix.png) + +This could be done in a meaningful way: the idea is not to have total random pieces, but legible fragments from each content. + +## When players buy the loot box they can compose the puzzle, but the result is a patchwork of different images. +![in each loot box there is a patchwork of different puzzles](https://hub.xpub.nl/soupboat/~grgr/static/img/patchworks.png) + +If the puzzles have different images but the same pieces pattern, each loot box can have a complete puzzle, but with mixed pieces. In this way we can avoid the frustration that having an incomplete jigsaw puzzle could cause. + +## On the website of SI17 the players can upload their fragments, and compose together an online version to complete all the jigsaw puzzles. +![demo web interface](https://hub.xpub.nl/soupboat/~kamo/static/img/puzzle-web.jpg) + +We can numerate or identify each piece of the puzzles with a code. This could be done when we generate the pattern of the puzzle with Python 👀. To upload a fragment of puzzle, the player is required to insert the code of the pieces, and maybe take a picture. In this way we can be sure that only who has the fragment can insert it online. + + +## Optional feature: users can upload pictures of their fragments and we could have a collective documentation of the work. +![demo upload pictures](https://hub.xpub.nl/soupboat/~kamo/static/img/share-puzzle.jpg) +_This is not unpaid work, it's participation_ + +Nice feature for the website could be that you can see the digital version of the puzzle, but on mouse :hover we could show the pictures from the public. A puzzle of photos of puzzles. This could be challenging but funny to develop. + +## On the website of SI17 there is a community section for exchanging the fragments and complete the puzzle +![demo xchange puzzle fragments](https://hub.xpub.nl/soupboat/~kamo/static/img/xchange-puzzle.jpg) + +The community section with users and exchange etc could be tricky, but we can stay as simple as possible and do it with Flask. The exchange section should exclude by design the speculation on the pieces or money. A fragment for a fragment. + +## On the website of SI17 the public can access to the experiments, games and researches as well +![demo other contents on the website](https://hub.xpub.nl/soupboat/~grgr/static/img/lootbweb.png) + +In this way we can provide access to the contents such as the bitsy games, the karaoke video, the ruleset of our games, the reading list, etc. + +### Risk / Benefit assessment + +PROS ++ simple to make ++ accessible because it's a well known game ++ a lot of design ++ not to much code ++ use what we already have ++ interesting interaction with the public ++ performative element ready for the launch ++ multiple temporalities (individual puzzle, contents, shared puzzles) ++ world building + +CONS: +- not an API 👀 +- i don't like puzzles +- people mught not appreciate the fact of missing parts of their puzzle, but we're here to subvert it, and contents will be available online anyways + +### Bonus: summary workflow + +![production](https://hub.xpub.nl/soupboat/~kamo/static/img/puzzle-production.jpg) +The process to make the puzzles could be easy as design - print - cut - shuffle - package, nothing more (+ website) + +![box](https://hub.xpub.nl/soupboat/~grgr/static/img/puzzle-box.jpg) +The loot box could provide a context and the instruction of the game, as well as the link to the website. + + +## Scenario + +Mapping the chaotic evil puzzles in the through the different scenari + +### of the form + +_scenario 1: The lootbox is a physical box that contains something_ + +Fragments of several puzzles. + +### of the feature + +_scenario 7: The items in the loot-box are complementary and it is necessary to connect with other loot-box owners in order to assemble the pieces together._ + +There is a single player aspect and there is a collaborative aspect. These two components could be mediated by an online platform, such as the online shared puzzles, but could also work offline if people just combine the pieces of their loot boxes. + +### of the contents + +_scenario 2: The loot box is a collection of the prototyped games (and researches!) we did so far curated in some kind of form_ + +The jigsaw puzzle is just a form of encryption of our contents. A shared surface in which we can publish really different things such as a fan fiction, a board game, a link to a video karaoke or a videogame, an essay, the characters of a roleplaying game, etc. + +_scenario 3: The loot box is a collection of mini-games + an ultimate game that has to be performed with other players that purcahsed the LB_ + +There are several layers of playability and access: + +1. to solve the fragments (single player jigsaw) +2. to access the contents (games, texts, etc. ) +3. to combine the fragments (ultimate multiplayer game, re-distribuition of the loot boxes contents) + + +_scenario 6: The lootbox contains a series of jigsaw puzzles but their pieces are scattered through all the boxes and there is a platform online where you can see the missing tiles._ + +Nothing to declare. + + +## Prototype (look at git!) + +This is a rough prototype for generating ready-to-print jigsaw puzzles as well as a way to track their completion in a shared platform. +The idea is to have several puzzles and mix their pieces, in a way that invites the players to collaborate in order to solve them. + +This prototype covers two aspects of the process: the first is to split an image into pieces, tracking every piece with an ID and store the relation between adjacent tiles. The second concerns the online platform, and it is a Flask application that permits to upload cluster of pieces in order to share them with the other players and unlocking the full puzzle. + +### To install the project: + +1. Clone the repo +2. Create a virtual environment + ``` + $ python3 -m venv venv + ``` +3. Activate the virtual environment + ``` + $ . venv/bin/activate + ``` +4. Install the dependencies + ``` + $ pip install -e . + ``` +5. Set the environmental variables for flask + ``` + $ export FLASK_APP=flaskr + $ export FLASK_ENV=development + $ flask run + ``` +6. The Flask application will be accessible on your browser at `localhost:5000`. If you try to navigate there you will see a blank page. This is because we need to generate some puzzles to display. + +### Generating the contents + +The first thing to do then is to run the `split.py` script: + +``` +python3 chaospuzzles/split.py +``` + +This will take the Katamari demo picture from `static/img` and will split it in tiles. The tiles will be used to compose the clusters when a player upload it online. In this way we can be super flexible in the randomization / distribuition of the pieces. + +You can tweak the parameters at the end of the split.py file. This is temporary, later on it would be nice to have an interface to prepare the puzzle. + +### Completing the puzzles + +If you reload the website, you will see a link pointing to the Katamari page. Here we will find an empty frame, and a form to insert new pieces. + +Try it! You can find the IDs for the pieces in the `chaospuzzles/puzzles/katamari/katamari_retro.png` image. This is the picture generated in order to be printed behind the puzzle and let every piece to have a unique ID. + +By design an valid cluster is a group of adjacent pieces. + +Keep in mind that this is a wip and rough prototype so everything need to be polished a lot. We count on your imagination to fill the lack of design, UI and UX here. Imagination is the best modern feature of 2022! + +Thanks and see you sun ☀️ + + + + + +## memos + +- play with quantities and distribuition of pieces (1 piece only, large groups, variations, etc) +- play with puzzle pattern: alternative to the mainstream shape of the tiles +- pieces naming system +- And then the aim is to exchange pieces or something and rebuild the original puzzles? (can this be a critical approach?) (does this make sense only if there are as many puzzles as loot boxes?) +- short term puzzles (link to multimedia contents, puzzle shards) +- long term puzzles (hidden messages, 1 word in each puzzles and a secret sentence) +- size and quantity +- The jigsaw puzzles results should be secret? There would be much more mistery. Can we reveal only during the launch, but not on the loot boxes? Maybe is a compromise, but maybe is not necessary. Should we reveal them only in the website meanwhile they are completed? Could be. +- [Generate Jigsaw Puzzle with python](https://github.com/jkenlooper/piecemaker) +- [How To Laser Cut a Jigsaw Puzzle](https://www.youtube.com/watch?v=xqhOrY8unn4) +- [Jigsaw puzzle generator](https://draradech.github.io/jigsaw/index.html) +- [Fractlal Jigsaw](https://proceduraljigsaw.github.io/Fractalpuzzlejs/) diff --git a/projects/chaotic-evil-puzzles/documentation.md b/projects/chaotic-evil-puzzles/documentation.md new file mode 100644 index 0000000..5b75ac7 --- /dev/null +++ b/projects/chaotic-evil-puzzles/documentation.md @@ -0,0 +1,193 @@ +--- +title: Chaotic evil puzzles +description: Jigsaw puzzle as a form of encryption of our SI17 +date: 18/02/2022 +cover: 91AC-jbMPsL._AC_SL1500_.jpg +cover_alt: white japanes jigsaw puzzle +git: https://git.xpub.nl/kamo/chaospuzzles +categories: + - Proposal + - SI17 + - Games +--- + +## There are 100 lot boxes with 100 different jigsaw puzzles of 100 pieces.* +![100 boxes compose the face of aymeric if seen from a precise point of view](https://hub.xpub.nl/soupboat/~kamo/static/img/100-boxes.jpg) +_\* (exact quantities to be defined)_ + +## The picture on each puzzles is a content related to our experiments, games and researches for the SI17 +![sample of contents for the puzzles](https://hub.xpub.nl/soupboat/~kamo/static/img/catchy-puzzles.jpg) + +Each puzzle is an A2 sized image displaying the works we did during this trimester, designed in a way that can be interesting for the players to buy it, even for the sake of doing a jigsaw puzzle itself. + +_f.e. A puzzle could be the rules for an RPG; or the map of a bitsy game with some critical texts about gamification; a generated maze, a fan fiction, the glossary, the list of one sentence games, etc._ + +In other words, the collection of puzzles will be a sort of inventory of our research framed in the form of jigsaw. + +## The pieces are scattered through all the loot boxes, in a way that each one contains parts of multiple puzzles. +![shuffle of the jiigsaw pieces](https://hub.xpub.nl/soupboat/~grgr/static/img/jigmix.png) + +This could be done in a meaningful way: the idea is not to have total random pieces, but legible fragments from each content. + +## When players buy the loot box they can compose the puzzle, but the result is a patchwork of different images. +![in each loot box there is a patchwork of different puzzles](https://hub.xpub.nl/soupboat/~grgr/static/img/patchworks.png) + +If the puzzles have different images but the same pieces pattern, each loot box can have a complete puzzle, but with mixed pieces. In this way we can avoid the frustration that having an incomplete jigsaw puzzle could cause. + +## On the website of SI17 the players can upload their fragments, and compose together an online version to complete all the jigsaw puzzles. +![demo web interface](https://hub.xpub.nl/soupboat/~kamo/static/img/puzzle-web.jpg) + +We can numerate or identify each piece of the puzzles with a code. This could be done when we generate the pattern of the puzzle with Python 👀. To upload a fragment of puzzle, the player is required to insert the code of the pieces, and maybe take a picture. In this way we can be sure that only who has the fragment can insert it online. + + +## Optional feature: users can upload pictures of their fragments and we could have a collective documentation of the work. +![demo upload pictures](https://hub.xpub.nl/soupboat/~kamo/static/img/share-puzzle.jpg) +_This is not unpaid work, it's participation_ + +Nice feature for the website could be that you can see the digital version of the puzzle, but on mouse :hover we could show the pictures from the public. A puzzle of photos of puzzles. This could be challenging but funny to develop. + +## On the website of SI17 there is a community section for exchanging the fragments and complete the puzzle +![demo xchange puzzle fragments](https://hub.xpub.nl/soupboat/~kamo/static/img/xchange-puzzle.jpg) + +The community section with users and exchange etc could be tricky, but we can stay as simple as possible and do it with Flask. The exchange section should exclude by design the speculation on the pieces or money. A fragment for a fragment. + +## On the website of SI17 the public can access to the experiments, games and researches as well +![demo other contents on the website](https://hub.xpub.nl/soupboat/~grgr/static/img/lootbweb.png) + +In this way we can provide access to the contents such as the bitsy games, the karaoke video, the ruleset of our games, the reading list, etc. + +### Risk / Benefit assessment + +PROS ++ simple to make ++ accessible because it's a well known game ++ a lot of design ++ not to much code ++ use what we already have ++ interesting interaction with the public ++ performative element ready for the launch ++ multiple temporalities (individual puzzle, contents, shared puzzles) ++ world building + +CONS: +- not an API 👀 +- i don't like puzzles +- people mught not appreciate the fact of missing parts of their puzzle, but we're here to subvert it, and contents will be available online anyways + +### Bonus: summary workflow + +![production](https://hub.xpub.nl/soupboat/~kamo/static/img/puzzle-production.jpg) +The process to make the puzzles could be easy as design - print - cut - shuffle - package, nothing more (+ website) + +![box](https://hub.xpub.nl/soupboat/~grgr/static/img/puzzle-box.jpg) +The loot box could provide a context and the instruction of the game, as well as the link to the website. + + +## Scenario + +Mapping the chaotic evil puzzles in the through the different scenari + +### of the form + +_scenario 1: The lootbox is a physical box that contains something_ + +Fragments of several puzzles. + +### of the feature + +_scenario 7: The items in the loot-box are complementary and it is necessary to connect with other loot-box owners in order to assemble the pieces together._ + +There is a single player aspect and there is a collaborative aspect. These two components could be mediated by an online platform, such as the online shared puzzles, but could also work offline if people just combine the pieces of their loot boxes. + +### of the contents + +_scenario 2: The loot box is a collection of the prototyped games (and researches!) we did so far curated in some kind of form_ + +The jigsaw puzzle is just a form of encryption of our contents. A shared surface in which we can publish really different things such as a fan fiction, a board game, a link to a video karaoke or a videogame, an essay, the characters of a roleplaying game, etc. + +_scenario 3: The loot box is a collection of mini-games + an ultimate game that has to be performed with other players that purcahsed the LB_ + +There are several layers of playability and access: + +1. to solve the fragments (single player jigsaw) +2. to access the contents (games, texts, etc. ) +3. to combine the fragments (ultimate multiplayer game, re-distribuition of the loot boxes contents) + + +_scenario 6: The lootbox contains a series of jigsaw puzzles but their pieces are scattered through all the boxes and there is a platform online where you can see the missing tiles._ + +Nothing to declare. + + +## Prototype (look at git!) + +This is a rough prototype for generating ready-to-print jigsaw puzzles as well as a way to track their completion in a shared platform. +The idea is to have several puzzles and mix their pieces, in a way that invites the players to collaborate in order to solve them. + +This prototype covers two aspects of the process: the first is to split an image into pieces, tracking every piece with an ID and store the relation between adjacent tiles. The second concerns the online platform, and it is a Flask application that permits to upload cluster of pieces in order to share them with the other players and unlocking the full puzzle. + +### To install the project: + +1. Clone the repo +2. Create a virtual environment + ``` + $ python3 -m venv venv + ``` +3. Activate the virtual environment + ``` + $ . venv/bin/activate + ``` +4. Install the dependencies + ``` + $ pip install -e . + ``` +5. Set the environmental variables for flask + ``` + $ export FLASK_APP=flaskr + $ export FLASK_ENV=development + $ flask run + ``` +6. The Flask application will be accessible on your browser at `localhost:5000`. If you try to navigate there you will see a blank page. This is because we need to generate some puzzles to display. + +### Generating the contents + +The first thing to do then is to run the `split.py` script: + +``` +python3 chaospuzzles/split.py +``` + +This will take the Katamari demo picture from `static/img` and will split it in tiles. The tiles will be used to compose the clusters when a player upload it online. In this way we can be super flexible in the randomization / distribuition of the pieces. + +You can tweak the parameters at the end of the split.py file. This is temporary, later on it would be nice to have an interface to prepare the puzzle. + +### Completing the puzzles + +If you reload the website, you will see a link pointing to the Katamari page. Here we will find an empty frame, and a form to insert new pieces. + +Try it! You can find the IDs for the pieces in the `chaospuzzles/puzzles/katamari/katamari_retro.png` image. This is the picture generated in order to be printed behind the puzzle and let every piece to have a unique ID. + +By design an valid cluster is a group of adjacent pieces. + +Keep in mind that this is a wip and rough prototype so everything need to be polished a lot. We count on your imagination to fill the lack of design, UI and UX here. Imagination is the best modern feature of 2022! + +Thanks and see you sun ☀️ + + + + + +## memos + +- play with quantities and distribuition of pieces (1 piece only, large groups, variations, etc) +- play with puzzle pattern: alternative to the mainstream shape of the tiles +- pieces naming system +- And then the aim is to exchange pieces or something and rebuild the original puzzles? (can this be a critical approach?) (does this make sense only if there are as many puzzles as loot boxes?) +- short term puzzles (link to multimedia contents, puzzle shards) +- long term puzzles (hidden messages, 1 word in each puzzles and a secret sentence) +- size and quantity +- The jigsaw puzzles results should be secret? There would be much more mistery. Can we reveal only during the launch, but not on the loot boxes? Maybe is a compromise, but maybe is not necessary. Should we reveal them only in the website meanwhile they are completed? Could be. +- [Generate Jigsaw Puzzle with python](https://github.com/jkenlooper/piecemaker) +- [How To Laser Cut a Jigsaw Puzzle](https://www.youtube.com/watch?v=xqhOrY8unn4) +- [Jigsaw puzzle generator](https://draradech.github.io/jigsaw/index.html) +- [Fractlal Jigsaw](https://proceduraljigsaw.github.io/Fractalpuzzlejs/) diff --git a/projects/chaotic-evil-puzzles/test-pieces b/projects/chaotic-evil-puzzles/test-pieces new file mode 160000 index 0000000..1c992bf --- /dev/null +++ b/projects/chaotic-evil-puzzles/test-pieces @@ -0,0 +1 @@ +Subproject commit 1c992bfd6afd8a533927a8ba54e678123c175fd8 diff --git a/projects/chat-reader/.ipynb_checkpoints/documentation-checkpoint.md b/projects/chat-reader/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..aedd2b4 --- /dev/null +++ b/projects/chat-reader/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,58 @@ +--- +title: Chat Reader +description: Transform a text (ok no, actually a CSV file) into a chat +date: 06/10/2021 +project: chat-reader +git: https://git.xpub.nl/kamo/chat-reader +pad: https://pad.xpub.nl/p/SP16_0510 +categories: + - JS + - Chat + - Text +--- + +## Reader Prototyping + +- take suggested methods, use something we already used already - work on it, elaborate, don't exclude what we've been doing with Manetta, Michael and Cristina go in smaller groups/individually and make a prototype - network of texts, +- something visual, reworking of something and what it can be a sensible way to explain to people +- come together at 15:30? and we share what we've done - talk about how can we stitch it together to make a reader + +## Aggregating different things ~ output: chat form + +### Levels + +- 🏸 1 touch the inputs +- 🏸 2 overlap/merge them a bit +- 🏸 3 mesh them completely + +### Process + +- 🏏 take an academic text and turn it into a chat - translating into vernacular; +- 🏏 simplify the text +- 🏏 break it into chats +- 🏏 illustrate some bits + +Starting from a difficult but relatable text: our [multi voiced pad](https://pad.xpub.nl/p/SP16_0510) of the day. +Parsed here: [Spreadsheet ghost](https://cryptpad.fr/sheet/#/2/sheet/edit/N5uOS8x5Nu28ZiXPSk+kF-um/) + +### Rules to manipulate text: + +- 🏑 table of contents - shorts contents - tag them +- 🏑 turn into chat bubbles +- 🏑 illustrate a few + +### Rules of text simplification (as ⛳️ objective ⛳️ as possible): + +- 🏓 simple sentences +- 🏓 on point +- 🏓 short paragraphs and short chapter +- 🏓 title on each paragraph +- 🏓 text could become image caption/illustrate chapters/graphs? +- 🏓 page number +- 🏓 navigation (table of contents) + + +### Demo online: [Chat_a_pad](/soupboat/~kamo/static/html/chat-reader/chat.html) + +### Demo offline: + diff --git a/projects/chat-reader/documentation.md b/projects/chat-reader/documentation.md new file mode 100644 index 0000000..aedd2b4 --- /dev/null +++ b/projects/chat-reader/documentation.md @@ -0,0 +1,58 @@ +--- +title: Chat Reader +description: Transform a text (ok no, actually a CSV file) into a chat +date: 06/10/2021 +project: chat-reader +git: https://git.xpub.nl/kamo/chat-reader +pad: https://pad.xpub.nl/p/SP16_0510 +categories: + - JS + - Chat + - Text +--- + +## Reader Prototyping + +- take suggested methods, use something we already used already - work on it, elaborate, don't exclude what we've been doing with Manetta, Michael and Cristina go in smaller groups/individually and make a prototype - network of texts, +- something visual, reworking of something and what it can be a sensible way to explain to people +- come together at 15:30? and we share what we've done - talk about how can we stitch it together to make a reader + +## Aggregating different things ~ output: chat form + +### Levels + +- 🏸 1 touch the inputs +- 🏸 2 overlap/merge them a bit +- 🏸 3 mesh them completely + +### Process + +- 🏏 take an academic text and turn it into a chat - translating into vernacular; +- 🏏 simplify the text +- 🏏 break it into chats +- 🏏 illustrate some bits + +Starting from a difficult but relatable text: our [multi voiced pad](https://pad.xpub.nl/p/SP16_0510) of the day. +Parsed here: [Spreadsheet ghost](https://cryptpad.fr/sheet/#/2/sheet/edit/N5uOS8x5Nu28ZiXPSk+kF-um/) + +### Rules to manipulate text: + +- 🏑 table of contents - shorts contents - tag them +- 🏑 turn into chat bubbles +- 🏑 illustrate a few + +### Rules of text simplification (as ⛳️ objective ⛳️ as possible): + +- 🏓 simple sentences +- 🏓 on point +- 🏓 short paragraphs and short chapter +- 🏓 title on each paragraph +- 🏓 text could become image caption/illustrate chapters/graphs? +- 🏓 page number +- 🏓 navigation (table of contents) + + +### Demo online: [Chat_a_pad](/soupboat/~kamo/static/html/chat-reader/chat.html) + +### Demo offline: + diff --git a/projects/cms-00/.ipynb_checkpoints/documentation-checkpoint.md b/projects/cms-00/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..c039776 --- /dev/null +++ b/projects/cms-00/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,51 @@ +--- +title: Soupboat CMS 00 +description: Micro JSON→HTML CMS for the first trimester +cover: cms00.jpg +cover_alt: Notebook drawing of a dog saying dog and a Microsoft clipper saying pig with ancient hieroglyphs +date: 24/12/2021 +git: https://git.xpub.nl/kamo/kamo-soupbato +project: cms00 +categories: + - CMS + - JS +--- + +## A micro CMS + +During the first weeks at XPUB I spent some time trying to figure out how to archive and log the various projects going on. I felt to do it here in the Soupboat, because it's more flexible and playful than the wiki, that remains of course the source of truth and the future-proof archiving system etc. etc. 👹👺 + +After the second page though I was already ultra annoyed by the fact of rewriting or copy-pasting the HTML from a page to the other to keep at least a bit of style and structure and add contents manually. I wrote then a bit of code to have a default page and then used a JSON file filled with a list of projects. The script traversed this list and created a table with the basic informations about each one. + +The model for a project was something like that: + +```json +{ + "title": "Text Weaving", + "date": "Oct 5, 2021", + "url": "10-05-2021-weaving/", + "git": "https://git.xpub.nl/kamo/text_weaving", + "pad": "https://pad.xpub.nl/p/replacing_cats", + "links": [ + { + "url": "", + "title": "", + } + ], + "categories": [ + "Python", + "NLTK", + "Text" + ] +}, +``` + +Each proj has a title, a date, an URL to a dedicated page. Then a list of links: the git repository for sharing the source code and the pad, that are the two most common types of link, and then a list of generic other links, each one composed by an URL and a title. There is also a list of categories, in order to give some hints about the project. + +The dedicated page for a project could have been something somewhere in the Soupboat, or a subfolder in my personal folder. + +The structure of the whole thing was: an `index.html` page with a `cms.js` script and a `cms.json` file. (Such imagination in these filenames). Then a `style.css` and a `global.css` for sharing the style with the various projects. + +Not really a revolutionary CMS but a starting point. Ah ah + +I'm writing this while im migrating everything into a flask based one, that will use more or less the same structure we developed for the SI16! Really happy with it. Good night diff --git a/projects/cms-00/documentation.md b/projects/cms-00/documentation.md new file mode 100644 index 0000000..c039776 --- /dev/null +++ b/projects/cms-00/documentation.md @@ -0,0 +1,51 @@ +--- +title: Soupboat CMS 00 +description: Micro JSON→HTML CMS for the first trimester +cover: cms00.jpg +cover_alt: Notebook drawing of a dog saying dog and a Microsoft clipper saying pig with ancient hieroglyphs +date: 24/12/2021 +git: https://git.xpub.nl/kamo/kamo-soupbato +project: cms00 +categories: + - CMS + - JS +--- + +## A micro CMS + +During the first weeks at XPUB I spent some time trying to figure out how to archive and log the various projects going on. I felt to do it here in the Soupboat, because it's more flexible and playful than the wiki, that remains of course the source of truth and the future-proof archiving system etc. etc. 👹👺 + +After the second page though I was already ultra annoyed by the fact of rewriting or copy-pasting the HTML from a page to the other to keep at least a bit of style and structure and add contents manually. I wrote then a bit of code to have a default page and then used a JSON file filled with a list of projects. The script traversed this list and created a table with the basic informations about each one. + +The model for a project was something like that: + +```json +{ + "title": "Text Weaving", + "date": "Oct 5, 2021", + "url": "10-05-2021-weaving/", + "git": "https://git.xpub.nl/kamo/text_weaving", + "pad": "https://pad.xpub.nl/p/replacing_cats", + "links": [ + { + "url": "", + "title": "", + } + ], + "categories": [ + "Python", + "NLTK", + "Text" + ] +}, +``` + +Each proj has a title, a date, an URL to a dedicated page. Then a list of links: the git repository for sharing the source code and the pad, that are the two most common types of link, and then a list of generic other links, each one composed by an URL and a title. There is also a list of categories, in order to give some hints about the project. + +The dedicated page for a project could have been something somewhere in the Soupboat, or a subfolder in my personal folder. + +The structure of the whole thing was: an `index.html` page with a `cms.js` script and a `cms.json` file. (Such imagination in these filenames). Then a `style.css` and a `global.css` for sharing the style with the various projects. + +Not really a revolutionary CMS but a starting point. Ah ah + +I'm writing this while im migrating everything into a flask based one, that will use more or less the same structure we developed for the SI16! Really happy with it. Good night diff --git a/projects/concrete-label/.ipynb_checkpoints/documentation-checkpoint.md b/projects/concrete-label/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..a02cb00 --- /dev/null +++ b/projects/concrete-label/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,21 @@ +--- +title: Concrete 🎏 Label +date: 01/11/2021 +description: A tool for annotating visual contents +git: https://git.xpub.nl/kamo/concrete-label +pad: https://pad.xpub.nl/p/AGAINST_FILTERING +categories: + - Web + - Text + - Label + - Tool +--- + + +How could computer read concrete & visual poetry? How does computer navigate through text objects in which layout and graphical elements play a fundamental role? + +With this tool you can upload an image and then annotate it spatially. In doing so you generate a transcription of the image that keeps track of the order of your annotations (and so the visual path you take when reading the image), as well as their position and size. + +Neither the image nor the labels nor the transcription will be uploaded online. Everything happen in your browser. + +__a join research with Supi 👹👺__ \ No newline at end of file diff --git a/projects/concrete-label/documentation.md b/projects/concrete-label/documentation.md new file mode 100644 index 0000000..a02cb00 --- /dev/null +++ b/projects/concrete-label/documentation.md @@ -0,0 +1,21 @@ +--- +title: Concrete 🎏 Label +date: 01/11/2021 +description: A tool for annotating visual contents +git: https://git.xpub.nl/kamo/concrete-label +pad: https://pad.xpub.nl/p/AGAINST_FILTERING +categories: + - Web + - Text + - Label + - Tool +--- + + +How could computer read concrete & visual poetry? How does computer navigate through text objects in which layout and graphical elements play a fundamental role? + +With this tool you can upload an image and then annotate it spatially. In doing so you generate a transcription of the image that keeps track of the order of your annotations (and so the visual path you take when reading the image), as well as their position and size. + +Neither the image nor the labels nor the transcription will be uploaded online. Everything happen in your browser. + +__a join research with Supi 👹👺__ \ No newline at end of file diff --git a/projects/k-pub/.ipynb_checkpoints/documentation-checkpoint.md b/projects/k-pub/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..1999147 --- /dev/null +++ b/projects/k-pub/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,76 @@ +--- +title: 🎵 K-PUB +date: 21/10/2021 +url: /soupboat/k-pub/ +description: Karaoke as a mean of republishing +git: https://git.xpub.nl/grgr/k-pub +categories: + - Event + - vvvv + - Text + - Long Term +--- + +## Karaoke as a mean of republishing + +The idea is easy: take some songs, take some texts, and merge them through the logic of karaoke. +For our first issue we want to work with Simon Weil's diaries as text material and Franco Battiato's songs as musical starting point. + +Using a popular and performative device such as karaoke we want to join different voices. Not only the ones from the people singing, but also from all the different authors that participate in this event: the writer of texts, the composer of musical bases and the musicians that will perform them. +This project started as a joke and eventually growed because we saw a lot of potential in it. + +![karaoke recipe](/soupboat/~kamo/static/img/k-pub/karaoke_recipe.png) + +## Christmas Update + +Ok we got the room of the little Room for Sound at WdkA: nice. +So here is a list of things we need and a list of things to do: + +### TODO: + +- text from simone weil + - select excerpts + - excerpts to lyrics +- audio from franco battiato + - select songs + - find or write midi files + - sound design + - performance mode +- visual + - finish setup record mode (excerpts → lyrics) + - setup playback mode + - design + - development +- performance + - call musicians + - space setup + - technical setup + - comunication + - documentation + - pubblication +- residency + - daily contents to be published on their radio (readings, log, musical experiemnts...) + +### workflow for 1 song: + +1. select text excerpts +2. select song +3. song to midi + 1. if there is already a midi: cleanup: split and join tracks meaningfully + 2. if not: song transcription +4. karaoke recording + 1. input: midi song, text excerpts + 2. process: performative conversion, excerpt to lyrics tool + 3. output: karaoke midi song with text track +5. karaoke performance + 1. input: karaoke midi song + 2. output: karaoke text, karaoke midi + 1. midi → text, display the text for singin along + 2. midi → audio, for live playing and real time sound design of the song + 3. midi → visual, for live visual effects + +### people we need: +- musician (at least 1 to start with) (micalis? gambas? others?) +- visual (open call? or we can do it on our own for this) +- event logic & logistic (chae? gersande? etc? if anyone wants to take care of the setup it would be super cool) +- documentation (pinto? carmen? etc?) \ No newline at end of file diff --git a/projects/k-pub/documentation.md b/projects/k-pub/documentation.md new file mode 100644 index 0000000..1999147 --- /dev/null +++ b/projects/k-pub/documentation.md @@ -0,0 +1,76 @@ +--- +title: 🎵 K-PUB +date: 21/10/2021 +url: /soupboat/k-pub/ +description: Karaoke as a mean of republishing +git: https://git.xpub.nl/grgr/k-pub +categories: + - Event + - vvvv + - Text + - Long Term +--- + +## Karaoke as a mean of republishing + +The idea is easy: take some songs, take some texts, and merge them through the logic of karaoke. +For our first issue we want to work with Simon Weil's diaries as text material and Franco Battiato's songs as musical starting point. + +Using a popular and performative device such as karaoke we want to join different voices. Not only the ones from the people singing, but also from all the different authors that participate in this event: the writer of texts, the composer of musical bases and the musicians that will perform them. +This project started as a joke and eventually growed because we saw a lot of potential in it. + +![karaoke recipe](/soupboat/~kamo/static/img/k-pub/karaoke_recipe.png) + +## Christmas Update + +Ok we got the room of the little Room for Sound at WdkA: nice. +So here is a list of things we need and a list of things to do: + +### TODO: + +- text from simone weil + - select excerpts + - excerpts to lyrics +- audio from franco battiato + - select songs + - find or write midi files + - sound design + - performance mode +- visual + - finish setup record mode (excerpts → lyrics) + - setup playback mode + - design + - development +- performance + - call musicians + - space setup + - technical setup + - comunication + - documentation + - pubblication +- residency + - daily contents to be published on their radio (readings, log, musical experiemnts...) + +### workflow for 1 song: + +1. select text excerpts +2. select song +3. song to midi + 1. if there is already a midi: cleanup: split and join tracks meaningfully + 2. if not: song transcription +4. karaoke recording + 1. input: midi song, text excerpts + 2. process: performative conversion, excerpt to lyrics tool + 3. output: karaoke midi song with text track +5. karaoke performance + 1. input: karaoke midi song + 2. output: karaoke text, karaoke midi + 1. midi → text, display the text for singin along + 2. midi → audio, for live playing and real time sound design of the song + 3. midi → visual, for live visual effects + +### people we need: +- musician (at least 1 to start with) (micalis? gambas? others?) +- visual (open call? or we can do it on our own for this) +- event logic & logistic (chae? gersande? etc? if anyone wants to take care of the setup it would be super cool) +- documentation (pinto? carmen? etc?) \ No newline at end of file diff --git a/projects/katamari-fanfic/.ipynb_checkpoints/documentation-checkpoint.md b/projects/katamari-fanfic/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..fed7a4f --- /dev/null +++ b/projects/katamari-fanfic/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,24 @@ +--- +title: A Katamari Fanfiction +description: What's left when you roll on everything? +date: 09/02/2022 +pad: https://pad.xpub.nl/p/katamari-fanfiction +link: + - title: Ideology + url: https://pad.xpub.nl/p/katamari-damacy +project: katamari +cover: frog.png +cover_alt: 3d frog from katamari +categories: + - SI17 + - Games + - Text +--- + +## Modding narrative + +`After lunch we will be writing fanfic based on the games you played and analysed this week!` Lidia said this. + +We played Katamari Damacy this week → We wrote a fan faction about it → We approached the fanfiction with empathyzing with the most inanimate things of the game → So we focused on the prince and the objects of the game → We left the King of all Cosmos in the backgroud, since he talks already a lot in the original game. → Suggested soundtrack for the reading: [katamari OST](https://www.youtube.com/watch?v=QAA6hq9RL-4) + +Fun fictious with Mitsa and Erica \ No newline at end of file diff --git a/projects/katamari-fanfic/.ipynb_checkpoints/katamari-post-it-checkpoint.ipynb b/projects/katamari-fanfic/.ipynb_checkpoints/katamari-post-it-checkpoint.ipynb new file mode 100644 index 0000000..9247765 --- /dev/null +++ b/projects/katamari-fanfic/.ipynb_checkpoints/katamari-post-it-checkpoint.ipynb @@ -0,0 +1,79 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 7, + "id": "ba7a2054-5b27-46e7-aad7-14d0fe1d7a00", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "hello book \n", + "hello book hello shelves \n", + "hello book hello shelves hello supermarket \n", + "hello book hello shelves hello supermarket hello street \n", + "hello book hello shelves hello supermarket hello street hello car \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder hello children \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder hello children hello \n" + ] + } + ], + "source": [ + "text = \"hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder hello children hello\"\n", + "things = text.split('hello')\n", + "output = ''\n", + "for thing in things[1:]:\n", + " output = output + f'hello {thing.strip()} '\n", + " print(output)" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "35b17264-b530-4a19-ad5d-e3027fcee1dd", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/projects/katamari-fanfic/documentation.md b/projects/katamari-fanfic/documentation.md new file mode 100644 index 0000000..fed7a4f --- /dev/null +++ b/projects/katamari-fanfic/documentation.md @@ -0,0 +1,24 @@ +--- +title: A Katamari Fanfiction +description: What's left when you roll on everything? +date: 09/02/2022 +pad: https://pad.xpub.nl/p/katamari-fanfiction +link: + - title: Ideology + url: https://pad.xpub.nl/p/katamari-damacy +project: katamari +cover: frog.png +cover_alt: 3d frog from katamari +categories: + - SI17 + - Games + - Text +--- + +## Modding narrative + +`After lunch we will be writing fanfic based on the games you played and analysed this week!` Lidia said this. + +We played Katamari Damacy this week → We wrote a fan faction about it → We approached the fanfiction with empathyzing with the most inanimate things of the game → So we focused on the prince and the objects of the game → We left the King of all Cosmos in the backgroud, since he talks already a lot in the original game. → Suggested soundtrack for the reading: [katamari OST](https://www.youtube.com/watch?v=QAA6hq9RL-4) + +Fun fictious with Mitsa and Erica \ No newline at end of file diff --git a/projects/katamari-fanfic/katamari-post-it.ipynb b/projects/katamari-fanfic/katamari-post-it.ipynb new file mode 100644 index 0000000..86a3c8c --- /dev/null +++ b/projects/katamari-fanfic/katamari-post-it.ipynb @@ -0,0 +1,218 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 8, + "id": "ba7a2054-5b27-46e7-aad7-14d0fe1d7a00", + "metadata": {}, + "outputs": [], + "source": [ + "def katamari(text, separator='hello'):\n", + " things = text.split(separator)\n", + " output = ''\n", + " for thing in things[1:]:\n", + " output = output + f'hello {thing.strip()} '\n", + " print(output)" + ] + }, + { + "cell_type": "code", + "execution_count": 9, + "id": "35b17264-b530-4a19-ad5d-e3027fcee1dd", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "hello moon \n", + "hello moon hello earth \n", + "hello moon hello earth hello rings of saturn \n", + "hello moon hello earth hello rings of saturn hello orbital elements \n", + "hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars \n", + "hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way \n", + "hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars \n", + "hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars \n", + "hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars hello soundtrack \n", + "hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars hello soundtrack hello marimba \n", + "hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars hello soundtrack hello marimba hello calimba \n", + "hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars hello soundtrack hello marimba hello calimba hello mazinga \n" + ] + } + ], + "source": [ + "katamari('hello moon hello earth hello rings of saturn hello orbital elements hello fixed stars hello milky way hello popping stars hello shooting stars hello soundtrack hello marimba hello calimba hello mazinga')" + ] + }, + { + "cell_type": "code", + "execution_count": 10, + "id": "1752882a-1226-4408-9deb-fc2e31321412", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "hello book \n", + "hello book hello shelves \n", + "hello book hello shelves hello supermarket \n", + "hello book hello shelves hello supermarket hello street \n", + "hello book hello shelves hello supermarket hello street hello car \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder hello children \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder hello children hello \n" + ] + } + ], + "source": [ + "katamari('hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder hello children hello')" + ] + }, + { + "cell_type": "code", + "execution_count": 11, + "id": "97c2a743-263b-49da-9632-70e80918e72d", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "hello king \n", + "hello king hello queen \n", + "hello king hello queen hello prince \n", + "hello king hello queen hello prince hello \n" + ] + } + ], + "source": [ + "katamari('hello king hello queen hello prince hello')" + ] + }, + { + "cell_type": "code", + "execution_count": 12, + "id": "d0b7860a-e65b-4f5a-b532-e61df1145742", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "hello frog \n", + "hello frog hello giraffe \n", + "hello frog hello giraffe hello lipstick \n", + "hello frog hello giraffe hello lipstick hello rubber \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello nietche \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello nietche hello beach \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello nietche hello beach hello whale \n", + "hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello nietche hello beach hello whale hello waves \n" + ] + } + ], + "source": [ + "katamari('hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello candy hello treasure hello television hello window hello chair hello fire extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello nietche hello beach hello whale hello waves')" + ] + }, + { + "cell_type": "code", + "execution_count": 13, + "id": "5e0d5cfb-a9df-4337-ac4c-523d93250841", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "hello book \n", + "hello book hello shelves \n", + "hello book hello shelves hello supermarket \n", + "hello book hello shelves hello supermarket hello street \n", + "hello book hello shelves hello supermarket hello street hello car \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder hello children \n", + "hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder hello children hello \n" + ] + } + ], + "source": [ + "katamari('hello book hello shelves hello supermarket hello street hello car hello ceo of the city public transportation system hello playstation hello carpet hello giraffe hello frog hello ball hello dust hello microbs hello crown hello corona hello clown hello mine hello mineral hello anti men mine hello gun hello killer hello kinder hello children hello')" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "825a8878-cbcf-4cfa-b7e3-fa9ed0cd71fc", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/projects/lifeboats/.ipynb_checkpoints/documentation-checkpoint.md b/projects/lifeboats/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..14e701c --- /dev/null +++ b/projects/lifeboats/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,27 @@ +--- +title: Text ⛵ Lifeboats +description: What if we could use some excerpts from all of what we are reading now as lifeboats in a sea of text? +date: 28/09/2021 +project: lifeboats +pad: https://pad.xpub.nl/p/collab_week3 +categories: + - JS + - Text +--- + +## Text Traversing + +- Which texts will you traverse? will you make a "quote landscape" from + the different texts brought today or stay with one single text? +- Identify patterns / gather observations / draw the relations between the + words/paragraphs/sounds +- What are markers of orientation you would like to set for this text? +- Where should the reader turn? +- What are the rhythms in the text and how can they be amplified/interrupted/multiplied? +- Make a score or a diagram or a script to be performed out loud + +## Process + +What if we could use some excerpts from all of what we are reading now as lifeboats +in a sea of text? An attempt to play around with the continous permutations between +contents and contexts. diff --git a/projects/lifeboats/documentation.md b/projects/lifeboats/documentation.md new file mode 100644 index 0000000..14e701c --- /dev/null +++ b/projects/lifeboats/documentation.md @@ -0,0 +1,27 @@ +--- +title: Text ⛵ Lifeboats +description: What if we could use some excerpts from all of what we are reading now as lifeboats in a sea of text? +date: 28/09/2021 +project: lifeboats +pad: https://pad.xpub.nl/p/collab_week3 +categories: + - JS + - Text +--- + +## Text Traversing + +- Which texts will you traverse? will you make a "quote landscape" from + the different texts brought today or stay with one single text? +- Identify patterns / gather observations / draw the relations between the + words/paragraphs/sounds +- What are markers of orientation you would like to set for this text? +- Where should the reader turn? +- What are the rhythms in the text and how can they be amplified/interrupted/multiplied? +- Make a score or a diagram or a script to be performed out loud + +## Process + +What if we could use some excerpts from all of what we are reading now as lifeboats +in a sea of text? An attempt to play around with the continous permutations between +contents and contexts. diff --git a/projects/lifespan/.ipynb_checkpoints/documentation-checkpoint.md b/projects/lifespan/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..32e8d5e --- /dev/null +++ b/projects/lifespan/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,24 @@ +--- +title: Deciduous Time Everlasting Internet +description: Design the lifespan of a website +date: 01/04/2022 +categories: + - Workshop + - Web +url: https://hub.xpub.nl/soupboat/constr/lifespan/ +cover: clock.jpg +cover_alt: reflected clock in the xpub studio +--- + +## Design with constraints + +Together with Carmen we approached the workshop of [Raphaël Bastide](https://raphaelbastide.com/) working on the lifespan of a website. The idea was to create a website that disappears, an online space that the user can visit only once. Scarcity against the refresh. + +We used some pictures of clocks as main contents. I wrote a [simple tool](https://hub.xpub.nl/soupboat/constr/lifespan/transform.html) to help us centering the photos on the center of each clock in the web page. Then we stacked every image on top of each other. This pile of clocks disappears in front of the user, almost exploding at the end. + +Then the website it's gone. +Lifspan: 10s on each browser. +It was nice until it lasted. + +See the other super nice results from the workshop [here](https://hub.xpub.nl/soupboat/constr/) + \ No newline at end of file diff --git a/projects/lifespan/documentation.md b/projects/lifespan/documentation.md new file mode 100644 index 0000000..32e8d5e --- /dev/null +++ b/projects/lifespan/documentation.md @@ -0,0 +1,24 @@ +--- +title: Deciduous Time Everlasting Internet +description: Design the lifespan of a website +date: 01/04/2022 +categories: + - Workshop + - Web +url: https://hub.xpub.nl/soupboat/constr/lifespan/ +cover: clock.jpg +cover_alt: reflected clock in the xpub studio +--- + +## Design with constraints + +Together with Carmen we approached the workshop of [Raphaël Bastide](https://raphaelbastide.com/) working on the lifespan of a website. The idea was to create a website that disappears, an online space that the user can visit only once. Scarcity against the refresh. + +We used some pictures of clocks as main contents. I wrote a [simple tool](https://hub.xpub.nl/soupboat/constr/lifespan/transform.html) to help us centering the photos on the center of each clock in the web page. Then we stacked every image on top of each other. This pile of clocks disappears in front of the user, almost exploding at the end. + +Then the website it's gone. +Lifspan: 10s on each browser. +It was nice until it lasted. + +See the other super nice results from the workshop [here](https://hub.xpub.nl/soupboat/constr/) + \ No newline at end of file diff --git a/projects/loot-box-decorator/.ipynb_checkpoints/documentation-checkpoint.md b/projects/loot-box-decorator/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..a8ae996 --- /dev/null +++ b/projects/loot-box-decorator/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,107 @@ +--- +title: Loot Box as a Decorator +date: 11/02/2022 +description: Hermit crab in the book store +cover: 080.png +cover_alt: A Slowbro, notoriously slow pokemon +categories: + - SI17 + - Games + - Research +--- + +## 3 intuitions come together + +Right now: + +1. A _loot box_ within a context as such: a book store +2. A _loot box_ within a temporality +3. A _loot box_ with different kinds of public + +Over me 🦶🦶 🥁 🦵🦵 📀---- + + + +### Context + +A _lolt box_ accellerates and forces the mechanics of an environment. In some games it can speed up some tedious process, in other it offers a specific special instant rewarding. Our _loot bbx_ inhabits a book store, or more in general a cultural space. In which ways can we hack through the normal functioning of such place? At a certain point today I thought: _ah, we could fill it with the last page of every books in Page Not Found_, just to say something about the presumed shortcuts that the _loat box_ promises to the player. The idea is kinda fun, but then what? So maybe no. + +### Temporality + +A couple of days ago I wrote some notes about the temporality of the _loto box_. In 1 sentence the idea is: if the _lot bx_ is a mechanism of instant rewarding, we could hijack and inflate its tempo and then fill it with our contents. Instead of opening in 30 seconds, the _loot bocs_ takes one hour. Meanwhile we can deliver our messages. + +Today I read _Play like a feminist_ by _Shira Chess_ and guess what: there's an entire part about the temporality of leisure → 🤯 + +There is something really important we should keep in mind: we are aiming to a public that is etherogeneous. The intersectional approach that Chess advocates it's a reminder that we can inflate the temporality of the _loot biusch_, but not everyone will have access to it. So we need to think at both the limits of this spectrum, and put them in a meaningful relation. + +### Public + +As said: our public could be complex. For sure there will be some ultra publishing nerd that will sip all our soup and will be happy with it, but isn't 1 of our goals to reach also the world outside XPUB? _Chess_ in her book writes about micro temporality, little timespans carved between work shifts or commutes. She has a point when writes that with smartphones leisure time is more affordable and is detached from the rigid tempo of labour. + +## Decorator + +Combining these three aspects the question is: can we create a relation between who can spend an hour at PNF waiting for the _loot bosx_ and who cannot? + +Enter the _boot lox_ as a decorator. + +A decorator is something that adorn something else. In Python and object-oriented programming in general is also a name of a design pattern that adds some functionality to other functions. We used it already also with Flask! A _oobt olx_ as a decorator means that we could attach it to other pubblication at PNF. Something like an hermit crab inside other shells or that spiky things that bites the tail of a Slowpoke. + + +### The setup + +1. The physical decorator, that is a digital manufactured object produced on demand +2. A catalogue of books that can be decorated +3. A website with a digital loot box + +### The process + +1. As a part of the research we compose a bibliography that is also a statement i.e: _away from the cis white west guys gang_. This bibliography could be site specific for PNF or the other places we will distribute our SI17. We should choose to sell our pubblication in book stores or spaces that want to host this bibliography in their inventory. In this way we can use our SI17 as a device to reclaim space for marginal and subaltern voices. + +2. The decorator inhabits this bibliography. It is presented as a special offer in which you can buy one of the book from the bibliography and receive a decorated version of it. Maybe we can sort out some kind of discount mechanism using part of the budget we have. The point is to favor access. + +3. The deal is that the production of the decorator has a certain temporality: if we imagine it as something that is 3D printed or laser cutted or CNC carved on demand, it involves a little waiting time. During this waiting time we can transform the book shop in a library, and offer full access to the titles in our bibliography. + +4. In exchange we ask to the reader for some insights, notes or excerpts from the books. Those will be inserted in the inventory of our loot box. + +5. This loot box can be accessed online from the website of SI17. It works exaclty as a classic one, except that we offer it for free. The content is a collection of thoughts questioning the issue of our project, in the context around our bibliography and readers. It could be an effective way to offer our research to that kind of public that has no means to access it. + +6. To open the online loot box and get one (more or less random?) excerpt, the user is asked to draw a decorator. This could be made with a super simple web interface. The drawing will be the next digital manufactured decorator. + +7. In the website of SI17 we can keep track of the decorators as well as the exceprts, in a process of inventory and world building. + + +## Skin care routine + +This idea of decorator is somehow similar to the concept of skin (in videogame terms). Here our decorator acts as cosmetic in the same way a fancy hat decorates your sniper in Team Fortress 2. + +In the game itself the skin is nothing more than a visual candy. But once you look at the turbulence it puts in motion in the game superstructure, you realize that the kind of power-up it offers is something that acts in the social sphere around the game. (See: peer pressure, emotional commitment, skins gambling, product placement, collectibles) + +A loot of lot boxes promise rare skins, and by doing so it lures in players. We could subvert this process by taking the skin out of the box. + +Instead of opening it to get a new skin, you design a new skin (the decorator!) to open the loot box. + + + + + + + + diff --git a/projects/loot-box-decorator/documentation.md b/projects/loot-box-decorator/documentation.md new file mode 100644 index 0000000..a8ae996 --- /dev/null +++ b/projects/loot-box-decorator/documentation.md @@ -0,0 +1,107 @@ +--- +title: Loot Box as a Decorator +date: 11/02/2022 +description: Hermit crab in the book store +cover: 080.png +cover_alt: A Slowbro, notoriously slow pokemon +categories: + - SI17 + - Games + - Research +--- + +## 3 intuitions come together + +Right now: + +1. A _loot box_ within a context as such: a book store +2. A _loot box_ within a temporality +3. A _loot box_ with different kinds of public + +Over me 🦶🦶 🥁 🦵🦵 📀---- + + + +### Context + +A _lolt box_ accellerates and forces the mechanics of an environment. In some games it can speed up some tedious process, in other it offers a specific special instant rewarding. Our _loot bbx_ inhabits a book store, or more in general a cultural space. In which ways can we hack through the normal functioning of such place? At a certain point today I thought: _ah, we could fill it with the last page of every books in Page Not Found_, just to say something about the presumed shortcuts that the _loat box_ promises to the player. The idea is kinda fun, but then what? So maybe no. + +### Temporality + +A couple of days ago I wrote some notes about the temporality of the _loto box_. In 1 sentence the idea is: if the _lot bx_ is a mechanism of instant rewarding, we could hijack and inflate its tempo and then fill it with our contents. Instead of opening in 30 seconds, the _loot bocs_ takes one hour. Meanwhile we can deliver our messages. + +Today I read _Play like a feminist_ by _Shira Chess_ and guess what: there's an entire part about the temporality of leisure → 🤯 + +There is something really important we should keep in mind: we are aiming to a public that is etherogeneous. The intersectional approach that Chess advocates it's a reminder that we can inflate the temporality of the _loot biusch_, but not everyone will have access to it. So we need to think at both the limits of this spectrum, and put them in a meaningful relation. + +### Public + +As said: our public could be complex. For sure there will be some ultra publishing nerd that will sip all our soup and will be happy with it, but isn't 1 of our goals to reach also the world outside XPUB? _Chess_ in her book writes about micro temporality, little timespans carved between work shifts or commutes. She has a point when writes that with smartphones leisure time is more affordable and is detached from the rigid tempo of labour. + +## Decorator + +Combining these three aspects the question is: can we create a relation between who can spend an hour at PNF waiting for the _loot bosx_ and who cannot? + +Enter the _boot lox_ as a decorator. + +A decorator is something that adorn something else. In Python and object-oriented programming in general is also a name of a design pattern that adds some functionality to other functions. We used it already also with Flask! A _oobt olx_ as a decorator means that we could attach it to other pubblication at PNF. Something like an hermit crab inside other shells or that spiky things that bites the tail of a Slowpoke. + + +### The setup + +1. The physical decorator, that is a digital manufactured object produced on demand +2. A catalogue of books that can be decorated +3. A website with a digital loot box + +### The process + +1. As a part of the research we compose a bibliography that is also a statement i.e: _away from the cis white west guys gang_. This bibliography could be site specific for PNF or the other places we will distribute our SI17. We should choose to sell our pubblication in book stores or spaces that want to host this bibliography in their inventory. In this way we can use our SI17 as a device to reclaim space for marginal and subaltern voices. + +2. The decorator inhabits this bibliography. It is presented as a special offer in which you can buy one of the book from the bibliography and receive a decorated version of it. Maybe we can sort out some kind of discount mechanism using part of the budget we have. The point is to favor access. + +3. The deal is that the production of the decorator has a certain temporality: if we imagine it as something that is 3D printed or laser cutted or CNC carved on demand, it involves a little waiting time. During this waiting time we can transform the book shop in a library, and offer full access to the titles in our bibliography. + +4. In exchange we ask to the reader for some insights, notes or excerpts from the books. Those will be inserted in the inventory of our loot box. + +5. This loot box can be accessed online from the website of SI17. It works exaclty as a classic one, except that we offer it for free. The content is a collection of thoughts questioning the issue of our project, in the context around our bibliography and readers. It could be an effective way to offer our research to that kind of public that has no means to access it. + +6. To open the online loot box and get one (more or less random?) excerpt, the user is asked to draw a decorator. This could be made with a super simple web interface. The drawing will be the next digital manufactured decorator. + +7. In the website of SI17 we can keep track of the decorators as well as the exceprts, in a process of inventory and world building. + + +## Skin care routine + +This idea of decorator is somehow similar to the concept of skin (in videogame terms). Here our decorator acts as cosmetic in the same way a fancy hat decorates your sniper in Team Fortress 2. + +In the game itself the skin is nothing more than a visual candy. But once you look at the turbulence it puts in motion in the game superstructure, you realize that the kind of power-up it offers is something that acts in the social sphere around the game. (See: peer pressure, emotional commitment, skins gambling, product placement, collectibles) + +A loot of lot boxes promise rare skins, and by doing so it lures in players. We could subvert this process by taking the skin out of the box. + +Instead of opening it to get a new skin, you design a new skin (the decorator!) to open the loot box. + + + + + + + + diff --git a/projects/loot-box-multi-player/.ipynb_checkpoints/documentation-checkpoint.md b/projects/loot-box-multi-player/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..d3fcc89 --- /dev/null +++ b/projects/loot-box-multi-player/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,30 @@ +--- +title: Multi Player Loot Box +date: 04/02/2022 +description: Notes to generate relations within the public +cover: lost-in-time-2.png +cover_alt: Bugs bunny lost in time cut scene +categories: + - SI17 + - Games + - Research +--- + +If the public of the classical loot box is made of individuals that are easier to exploit, our SI17 could research on ways to generate relations within the public. + + + +## Homogeneous public? + +The classical loot box assumes two main things: + +* That the public is an homogeneous group of individual users +* That the relation between the loot box and its public should be always the same + +The loot box offers a limited amount of agency to the player. There is no quality in the interaction with it. The only way to use and access its content is to open it (and this usually means to pay). From the point of view of the loot box every player is the same, an their abilities or features or uniqueness have no meaning at all. One could say that the loot box is a popular device since is an object with a common interface for everyone, but is this really the case? + +The interaction with the loot box has no quality, but for sure it implies some kind of quantity. To access is it required to spend a certain amount of money or time. This quantifiable expense is presented as a flat access scheme with homogeneous outcomes, but it is not. The effects of spending hundred €€€ in Fortnite skins are different for a kid and a streamer, for example. [While the streamer on Twitch spends 800€ in a row](https://www.youtube.com/watch?v=EXy83qr9jrI) to gain a thousandfold through sponsorizations and views, the average kid just throws away half of his mother's monthly income. + +The public of the loot box is not homogeneous. + +Keeping that in mind, we could rethink the basic way of interaction with the loot box. What if we offer something different from the flat price scheme? What if someone can pay less to access to the contents and someone else must pay more? Could this be a way to inject different qualities in the interaction with the loot box? diff --git a/projects/loot-box-multi-player/documentation.md b/projects/loot-box-multi-player/documentation.md new file mode 100644 index 0000000..d3fcc89 --- /dev/null +++ b/projects/loot-box-multi-player/documentation.md @@ -0,0 +1,30 @@ +--- +title: Multi Player Loot Box +date: 04/02/2022 +description: Notes to generate relations within the public +cover: lost-in-time-2.png +cover_alt: Bugs bunny lost in time cut scene +categories: + - SI17 + - Games + - Research +--- + +If the public of the classical loot box is made of individuals that are easier to exploit, our SI17 could research on ways to generate relations within the public. + + + +## Homogeneous public? + +The classical loot box assumes two main things: + +* That the public is an homogeneous group of individual users +* That the relation between the loot box and its public should be always the same + +The loot box offers a limited amount of agency to the player. There is no quality in the interaction with it. The only way to use and access its content is to open it (and this usually means to pay). From the point of view of the loot box every player is the same, an their abilities or features or uniqueness have no meaning at all. One could say that the loot box is a popular device since is an object with a common interface for everyone, but is this really the case? + +The interaction with the loot box has no quality, but for sure it implies some kind of quantity. To access is it required to spend a certain amount of money or time. This quantifiable expense is presented as a flat access scheme with homogeneous outcomes, but it is not. The effects of spending hundred €€€ in Fortnite skins are different for a kid and a streamer, for example. [While the streamer on Twitch spends 800€ in a row](https://www.youtube.com/watch?v=EXy83qr9jrI) to gain a thousandfold through sponsorizations and views, the average kid just throws away half of his mother's monthly income. + +The public of the loot box is not homogeneous. + +Keeping that in mind, we could rethink the basic way of interaction with the loot box. What if we offer something different from the flat price scheme? What if someone can pay less to access to the contents and someone else must pay more? Could this be a way to inject different qualities in the interaction with the loot box? diff --git a/projects/loot-box-sealing-device/.ipynb_checkpoints/documentation-checkpoint.md b/projects/loot-box-sealing-device/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..f9dc21d --- /dev/null +++ b/projects/loot-box-sealing-device/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,104 @@ +--- +title: LOOT—BOX—SEALING—DEVICE +date: 04/02/2022 +description: Closing Pandora's 3D large jar +categories: + - SI17 + - Games + - Proposal +cover: test-3d.jpg +cover_alt: 3d sculpted loot boxes +--- + +## 3D printed loot box? + +This is an idea that follows some intuitions regarding the [temporality of the loot box](/soupboat/~kamo/projects/loot-box-temporality/). + +Imagine the loot box being 3D printed, and especially 3D printed on demand when the player want to buy it at Page Not Found or Varia or any other place we are going to distribute our work. 3D printing is a slow process, and in order to create a small piece you need to wait let's say an hour. When someone want to buy our loot box goes to PNF and ask for it, the 3d printing process begins and during the waiting time the player can access and navigate through the contents of our special issue. These contents are contained inside the temporality of the l~b, but they are not consumed instantaneously. + +![3d sculpted loot boxes](/soupboat/~kamo/static/img/test-4d.jpg) + +How do we want to deliver these contents? It could be related to the way of production of the physical l~b, for instance each player could contribute and shape the 3d model for the next player during the waiting time, and we can aggregate and collect narrations within and around the tools used in order to do so. + +In order to cover the expenses of a similar process part of the SI17 budget could cover the cost for some small 3D printers and printing material. The term of services of our special issue could allocate a certain amount of money from each purchase to self sustain the process (buying new printing material, etc) + + +![3d sculpted loot boxes](/soupboat/~kamo/static/img/test-5d.jpg) + + + +## The loot—box—sealing—device + +In the movie _The NeverEnding Story_ based on the novel by Michael Ende, the two main characters are linked together by the Auryn. In the (fictional) real world the Auryn is a sigil on the cover of the (fictional) Neverending Story book that tells the tales of the land of Fantasia. In Fantasia, the Auryn is a magic medalion that the hero wears during his mission. + + +![Auryn from Neverending Story](/soupboat/~kamo/static/img/book_AURYN.jpg) +![Auryn from Neverending Story](/soupboat/~kamo/static/img/atreyu_AURYN.jpg) + +Here the Auryn acts as a seal: by removing it from the cover of the book the magical world of Fantasia begins to leak inside the (fictional) real world. Later on it will be the main character to fall inside the (fictional) book of the Neverending Story. + +This plot from Michael Ende resembles what happens when we play a game. Thanks to a weird device like a table game, a console or just a set of shared principles, we are able to flow into the [magic circle](https://en.wikipedia.org/wiki/Magic_circle_(virtual_worlds)). In the novel this happens with the main character reading a book, and while it's true that every cultural object offers a certain degree of immersivity, the kind of agency, interaction and participation in the NeverEnding Story is something that reminds me more the act of playing. + +![3d sculpted seals](/soupboat/~kamo/static/img/seals1.jpg) + +To elaborate more on the 3D printed loot box: we could have a book and using the 3d printer to seal it with a new 3d sigil every time! In a way it is like __sealing the loot box instead of opening it__. As in the NeverEnding Story (but this is a recurrent magical trope) we would have a sigil connecting who is reading the book with another player. This connection will be not with a fictional character, but with a real person: the one that bought the previous book. There is something like the [reciprocity](https://pzwiki.wdka.nl/mediadesign/Glossary_of_productive_play#Reciprocity) descripted by Mausse here, but is a reciprocity swimming backstroke: the player receives a gift from a past uknown fellow player, and leaves one for a future unkown one. In this way the reciprocity chain (sounds weird) goes spiral. + +![3d sculpted seals](/soupboat/~kamo/static/img/seals2.jpg) + + + + +## Overview + +Here a brief description of the different pieces that compose the loot—box—sealing—device + +1. The pubblication is composed of 2 main parts: a base and a superstructure. omg sorry +2. The base is the same for every copy, and it's where the main contents are. (imagine it like a book) +3. The superstructure is dynamic, it is produced and added to the base when and where the pubblication is purchased by someone. (imagine it like a 3d printed something) +4. The production of the superstructure inflates the temporality of the loot box: our narration can inhabit this timespan. +5. While someone wait for the 3d sigil to be printed we can offer a _temporary safe zone_: a checkpoint at PNF (or other locations) +6. In this _temporary safe zone_ the player can leave something for the next player by designing the next sigil and +7. In this _temporary safe zone_ the player can be guided through the contents of the pubblication while waiting for the superstructure to be produced +8. When a new copy of the pubblication is bought, a sigil is 3d printed and then uploaded on the website of the SI17 as documentation + + + + +### 1. Physical pubblication (a book? a box? something) +I don't really know which kind of contents, but since we are reading a lot could be intresting to prepare a critical reader about the loot box issues, collecting different perspectives and heterogeneous voices? Then production mode ok and then we print say 100 copies. Our magical technical book binding team figures out the best way in which we can add some dynamic components or 3D addition to the cover-object-book, but we don't do that yet. We just leave the pubblications without the 3d cherry on the cake. + +### 2. A custom 3d sculpting software +_Note that the process could be also implemented with totally different techniques based on digital manufacturing like wood working with cnc, laser cut, etc endless possibilities, but let's say we want these exoterical 3d printed sigils._ + +We can develop a simple 3D sculpting software that even people not used to 3D modeling could use. Something like this [SculptGL](https://stephaneginier.com/sculptgl/). This is not super easy to do, but not as hard as an API. We could start from some open source thing and then customize it in the way we need. [Blender](https://www.blender.org/) is written in Python and has a super nice API for programming custom plugins, for example. + +Side note totally (not totally) unrelated: plugin republishing? 🤯 Ahah it would be great to publish some excerpts from Simone Weil inside the UI of Blender or Photoshop or whatever. Injecting culture in the cultural industry tools. + + +### 3. Some templates for the 3d sigil + +- material and practical needs +- SI17 visual identity as a starting point +- SI17 contents as orientation +- SI17 world building as heading + +(wip) + +### 4. A 3D Printing device + +- A 3D printer +- Some interface to sculpt the next 3d seal (aka 1 pc) +- A nice setup for display everything (checkpoint? treasure chest? loot box?) + +(wip) + +### 5. A website + +- Info +- Inventory that keep track of the sigils (world building) + +(wip) + + + + diff --git a/projects/loot-box-sealing-device/documentation.md b/projects/loot-box-sealing-device/documentation.md new file mode 100644 index 0000000..f9dc21d --- /dev/null +++ b/projects/loot-box-sealing-device/documentation.md @@ -0,0 +1,104 @@ +--- +title: LOOT—BOX—SEALING—DEVICE +date: 04/02/2022 +description: Closing Pandora's 3D large jar +categories: + - SI17 + - Games + - Proposal +cover: test-3d.jpg +cover_alt: 3d sculpted loot boxes +--- + +## 3D printed loot box? + +This is an idea that follows some intuitions regarding the [temporality of the loot box](/soupboat/~kamo/projects/loot-box-temporality/). + +Imagine the loot box being 3D printed, and especially 3D printed on demand when the player want to buy it at Page Not Found or Varia or any other place we are going to distribute our work. 3D printing is a slow process, and in order to create a small piece you need to wait let's say an hour. When someone want to buy our loot box goes to PNF and ask for it, the 3d printing process begins and during the waiting time the player can access and navigate through the contents of our special issue. These contents are contained inside the temporality of the l~b, but they are not consumed instantaneously. + +![3d sculpted loot boxes](/soupboat/~kamo/static/img/test-4d.jpg) + +How do we want to deliver these contents? It could be related to the way of production of the physical l~b, for instance each player could contribute and shape the 3d model for the next player during the waiting time, and we can aggregate and collect narrations within and around the tools used in order to do so. + +In order to cover the expenses of a similar process part of the SI17 budget could cover the cost for some small 3D printers and printing material. The term of services of our special issue could allocate a certain amount of money from each purchase to self sustain the process (buying new printing material, etc) + + +![3d sculpted loot boxes](/soupboat/~kamo/static/img/test-5d.jpg) + + + +## The loot—box—sealing—device + +In the movie _The NeverEnding Story_ based on the novel by Michael Ende, the two main characters are linked together by the Auryn. In the (fictional) real world the Auryn is a sigil on the cover of the (fictional) Neverending Story book that tells the tales of the land of Fantasia. In Fantasia, the Auryn is a magic medalion that the hero wears during his mission. + + +![Auryn from Neverending Story](/soupboat/~kamo/static/img/book_AURYN.jpg) +![Auryn from Neverending Story](/soupboat/~kamo/static/img/atreyu_AURYN.jpg) + +Here the Auryn acts as a seal: by removing it from the cover of the book the magical world of Fantasia begins to leak inside the (fictional) real world. Later on it will be the main character to fall inside the (fictional) book of the Neverending Story. + +This plot from Michael Ende resembles what happens when we play a game. Thanks to a weird device like a table game, a console or just a set of shared principles, we are able to flow into the [magic circle](https://en.wikipedia.org/wiki/Magic_circle_(virtual_worlds)). In the novel this happens with the main character reading a book, and while it's true that every cultural object offers a certain degree of immersivity, the kind of agency, interaction and participation in the NeverEnding Story is something that reminds me more the act of playing. + +![3d sculpted seals](/soupboat/~kamo/static/img/seals1.jpg) + +To elaborate more on the 3D printed loot box: we could have a book and using the 3d printer to seal it with a new 3d sigil every time! In a way it is like __sealing the loot box instead of opening it__. As in the NeverEnding Story (but this is a recurrent magical trope) we would have a sigil connecting who is reading the book with another player. This connection will be not with a fictional character, but with a real person: the one that bought the previous book. There is something like the [reciprocity](https://pzwiki.wdka.nl/mediadesign/Glossary_of_productive_play#Reciprocity) descripted by Mausse here, but is a reciprocity swimming backstroke: the player receives a gift from a past uknown fellow player, and leaves one for a future unkown one. In this way the reciprocity chain (sounds weird) goes spiral. + +![3d sculpted seals](/soupboat/~kamo/static/img/seals2.jpg) + + + + +## Overview + +Here a brief description of the different pieces that compose the loot—box—sealing—device + +1. The pubblication is composed of 2 main parts: a base and a superstructure. omg sorry +2. The base is the same for every copy, and it's where the main contents are. (imagine it like a book) +3. The superstructure is dynamic, it is produced and added to the base when and where the pubblication is purchased by someone. (imagine it like a 3d printed something) +4. The production of the superstructure inflates the temporality of the loot box: our narration can inhabit this timespan. +5. While someone wait for the 3d sigil to be printed we can offer a _temporary safe zone_: a checkpoint at PNF (or other locations) +6. In this _temporary safe zone_ the player can leave something for the next player by designing the next sigil and +7. In this _temporary safe zone_ the player can be guided through the contents of the pubblication while waiting for the superstructure to be produced +8. When a new copy of the pubblication is bought, a sigil is 3d printed and then uploaded on the website of the SI17 as documentation + + + + +### 1. Physical pubblication (a book? a box? something) +I don't really know which kind of contents, but since we are reading a lot could be intresting to prepare a critical reader about the loot box issues, collecting different perspectives and heterogeneous voices? Then production mode ok and then we print say 100 copies. Our magical technical book binding team figures out the best way in which we can add some dynamic components or 3D addition to the cover-object-book, but we don't do that yet. We just leave the pubblications without the 3d cherry on the cake. + +### 2. A custom 3d sculpting software +_Note that the process could be also implemented with totally different techniques based on digital manufacturing like wood working with cnc, laser cut, etc endless possibilities, but let's say we want these exoterical 3d printed sigils._ + +We can develop a simple 3D sculpting software that even people not used to 3D modeling could use. Something like this [SculptGL](https://stephaneginier.com/sculptgl/). This is not super easy to do, but not as hard as an API. We could start from some open source thing and then customize it in the way we need. [Blender](https://www.blender.org/) is written in Python and has a super nice API for programming custom plugins, for example. + +Side note totally (not totally) unrelated: plugin republishing? 🤯 Ahah it would be great to publish some excerpts from Simone Weil inside the UI of Blender or Photoshop or whatever. Injecting culture in the cultural industry tools. + + +### 3. Some templates for the 3d sigil + +- material and practical needs +- SI17 visual identity as a starting point +- SI17 contents as orientation +- SI17 world building as heading + +(wip) + +### 4. A 3D Printing device + +- A 3D printer +- Some interface to sculpt the next 3d seal (aka 1 pc) +- A nice setup for display everything (checkpoint? treasure chest? loot box?) + +(wip) + +### 5. A website + +- Info +- Inventory that keep track of the sigils (world building) + +(wip) + + + + diff --git a/projects/loot-box-temporality/.ipynb_checkpoints/documentation-checkpoint.md b/projects/loot-box-temporality/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..ead11de --- /dev/null +++ b/projects/loot-box-temporality/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,32 @@ +--- +title: Temporality of the loot box +date: 01/02/2022 +description: Against instant rewarding +cover: sheep_raider.jpg +cover_alt: Sheep raider nice game of when i was la monte young +categories: + - SI17 + - Games + - Research +--- + +## Bill Viola opens a loot box + +The loot box implies a specific temporal dimension: the one with instant rewarding. When a player opens the loot box she receives immediate feedback. Sometimes it is dressed up with an aesthetic of suspense, but this is just cosmetics and the built-up climax often becomes just something undesired that the user wants (and even pay) to skip. + +In order to work with the idea of the loot box without re-enacting its toxic behavior and mechanics it could be interesting to hijack its temporality. By inflating the time between the purchasing and the result, we could create space for dig deeper in this complex and delicate topic. + + +Loot box +`pay ●-->○ get` + +SI17 Loot Box +`pay ●--things could happen here-->○ get` + +This approach could help us in filling the loot box (tempo) without falling for the same addictive schemes that the industry is implementing for exploiting the players. + +__Inflating the loot box means that the player could reclaim her own leisure time.__ If we focus on the temporal fruition of the l~b we can imagine to produce not only an object, but a time slot that the person from the public can reserve for herself. If we define this time slot as leisure time then we could create a sacred and safe space to take a rest and to arrest the acceleration of capital. Something like a checkpoint, speaking from a gaming point of view. + +An approach to deal with the temporal aspect in a way that doesn't feel forced could be to rely on _real-yet-slow-time_ processes for the material production of the special issue. A digital manufacturing production could make a lot of sense in this context. 👀 + +See the [loot—box—sealing—device](/soupboat/~kamo/projects/loot-box-sealing-device/) for a concrete and 3d example \ No newline at end of file diff --git a/projects/loot-box-temporality/documentation.md b/projects/loot-box-temporality/documentation.md new file mode 100644 index 0000000..ead11de --- /dev/null +++ b/projects/loot-box-temporality/documentation.md @@ -0,0 +1,32 @@ +--- +title: Temporality of the loot box +date: 01/02/2022 +description: Against instant rewarding +cover: sheep_raider.jpg +cover_alt: Sheep raider nice game of when i was la monte young +categories: + - SI17 + - Games + - Research +--- + +## Bill Viola opens a loot box + +The loot box implies a specific temporal dimension: the one with instant rewarding. When a player opens the loot box she receives immediate feedback. Sometimes it is dressed up with an aesthetic of suspense, but this is just cosmetics and the built-up climax often becomes just something undesired that the user wants (and even pay) to skip. + +In order to work with the idea of the loot box without re-enacting its toxic behavior and mechanics it could be interesting to hijack its temporality. By inflating the time between the purchasing and the result, we could create space for dig deeper in this complex and delicate topic. + + +Loot box +`pay ●-->○ get` + +SI17 Loot Box +`pay ●--things could happen here-->○ get` + +This approach could help us in filling the loot box (tempo) without falling for the same addictive schemes that the industry is implementing for exploiting the players. + +__Inflating the loot box means that the player could reclaim her own leisure time.__ If we focus on the temporal fruition of the l~b we can imagine to produce not only an object, but a time slot that the person from the public can reserve for herself. If we define this time slot as leisure time then we could create a sacred and safe space to take a rest and to arrest the acceleration of capital. Something like a checkpoint, speaking from a gaming point of view. + +An approach to deal with the temporal aspect in a way that doesn't feel forced could be to rely on _real-yet-slow-time_ processes for the material production of the special issue. A digital manufacturing production could make a lot of sense in this context. 👀 + +See the [loot—box—sealing—device](/soupboat/~kamo/projects/loot-box-sealing-device/) for a concrete and 3d example \ No newline at end of file diff --git a/projects/mimic/.ipynb_checkpoints/documentation-checkpoint.md b/projects/mimic/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..3ddaf3d --- /dev/null +++ b/projects/mimic/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,34 @@ +--- +title: Mimic research 📦 +description: Exploring a tricky treasure trope +date: 04/02/2022 +categories: + - SI17 + - Research + - Games +cover: The_Mimic.png +cover_alt: A mimic from Runescape +--- + +## 2 different types of treasure chest + +In RPG games the Mimic is a monster that appears as a treasure chest. When a player tries to interact with it in order to get the contents of the chest, it reveals its true nature and attacks her. The name of the Mimic come from its act of mimesis: this creature is like a predator that disguises itself in order to sneak up on its prey. + +A treasure chest in a game can be seen as a _temporary safe zone_ because it interrupts the flow of incoming threats by offering a reward to the player. The Mimic endangers this _temporary safe zone_, and breaks a kind of contract between the player and the game. The treasure chest is transformed in a risky russian roulette, that inoculates danger in the safe zones of a narration. + +I'm tempted to write here that the loot box is something like a _meta mimic_: an object that promises an in-game reward, but produces a damage to the player. What's more is that this damage is inflicted in the real world, not to the player but to the person. What's then the difference between a loot box and a Mimic? + +Starting from the [Dungeons and Dragons' Mimic](https://en.wikipedia.org/wiki/Mimic_(Dungeons_%26_Dragons)) I'd like to explore the evolution and the ecology of the mimic through different games. How do the game designers choose where Mimics spawn? What are the relations between those creatures, the level design, the stress of the player, as well as her expectations and trust in the game world? Are there similarities in the way the Mimics and the loot boxes are presented to the player? + +__TODO: amazon package but has fangs__ + + \ No newline at end of file diff --git a/projects/mimic/documentation.md b/projects/mimic/documentation.md new file mode 100644 index 0000000..3ddaf3d --- /dev/null +++ b/projects/mimic/documentation.md @@ -0,0 +1,34 @@ +--- +title: Mimic research 📦 +description: Exploring a tricky treasure trope +date: 04/02/2022 +categories: + - SI17 + - Research + - Games +cover: The_Mimic.png +cover_alt: A mimic from Runescape +--- + +## 2 different types of treasure chest + +In RPG games the Mimic is a monster that appears as a treasure chest. When a player tries to interact with it in order to get the contents of the chest, it reveals its true nature and attacks her. The name of the Mimic come from its act of mimesis: this creature is like a predator that disguises itself in order to sneak up on its prey. + +A treasure chest in a game can be seen as a _temporary safe zone_ because it interrupts the flow of incoming threats by offering a reward to the player. The Mimic endangers this _temporary safe zone_, and breaks a kind of contract between the player and the game. The treasure chest is transformed in a risky russian roulette, that inoculates danger in the safe zones of a narration. + +I'm tempted to write here that the loot box is something like a _meta mimic_: an object that promises an in-game reward, but produces a damage to the player. What's more is that this damage is inflicted in the real world, not to the player but to the person. What's then the difference between a loot box and a Mimic? + +Starting from the [Dungeons and Dragons' Mimic](https://en.wikipedia.org/wiki/Mimic_(Dungeons_%26_Dragons)) I'd like to explore the evolution and the ecology of the mimic through different games. How do the game designers choose where Mimics spawn? What are the relations between those creatures, the level design, the stress of the player, as well as her expectations and trust in the game world? Are there similarities in the way the Mimics and the loot boxes are presented to the player? + +__TODO: amazon package but has fangs__ + + \ No newline at end of file diff --git a/projects/notation-system/.ipynb_checkpoints/documentation-checkpoint.md b/projects/notation-system/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..ca1e770 --- /dev/null +++ b/projects/notation-system/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,44 @@ +--- +title: Notation system for 2 or + fingers +description: Drawing and performing scores with Chae +date: 20/04/2022 +categories: + - Notation + - Drawings + - Sound +links: + - url: https://hub.xpub.nl/soupboat/SI18/notations/chamo/initial-vanila.mp3 + title: 🎵 + - url: https://hub.xpub.nl/soupboat/SI18/notations/chamo/linzen-tefalexpress.mp3 + title: 🎶 + - url: https://hub.xpub.nl/soupboat/SI18/notations/chamo/ + title: Cover +cover: monstro.jpg +cover_alt: a nice statue at venice biennale 2022 +pad: https://pad.xpub.nl/p/notation_experiment_0420 +css: rotating.css + +--- + +A notation system made with Chae during Steve's class. + +Here are the instructions and some examples. + +``` +1. You need at least two participants +2. Each participant chooses one word. It can be a word that exist, or gibberish. +3. The score is a collective drawing in which each line should cross at least another one. +4. The score has no orientation, we suggest to draw it on a circular sheet. +5. Follow the score with your finger and interpret it with your chosen word. +6. When fingers meet, swap the word. +``` + + + + + + + + + + diff --git a/projects/notation-system/documentation.md b/projects/notation-system/documentation.md new file mode 100644 index 0000000..ca1e770 --- /dev/null +++ b/projects/notation-system/documentation.md @@ -0,0 +1,44 @@ +--- +title: Notation system for 2 or + fingers +description: Drawing and performing scores with Chae +date: 20/04/2022 +categories: + - Notation + - Drawings + - Sound +links: + - url: https://hub.xpub.nl/soupboat/SI18/notations/chamo/initial-vanila.mp3 + title: 🎵 + - url: https://hub.xpub.nl/soupboat/SI18/notations/chamo/linzen-tefalexpress.mp3 + title: 🎶 + - url: https://hub.xpub.nl/soupboat/SI18/notations/chamo/ + title: Cover +cover: monstro.jpg +cover_alt: a nice statue at venice biennale 2022 +pad: https://pad.xpub.nl/p/notation_experiment_0420 +css: rotating.css + +--- + +A notation system made with Chae during Steve's class. + +Here are the instructions and some examples. + +``` +1. You need at least two participants +2. Each participant chooses one word. It can be a word that exist, or gibberish. +3. The score is a collective drawing in which each line should cross at least another one. +4. The score has no orientation, we suggest to draw it on a circular sheet. +5. Follow the score with your finger and interpret it with your chosen word. +6. When fingers meet, swap the word. +``` + + + + + + + + + + diff --git a/projects/notation-system/notation_big.png b/projects/notation-system/notation_big.png new file mode 100644 index 0000000..7c53a9f Binary files /dev/null and b/projects/notation-system/notation_big.png differ diff --git a/projects/notation-system/notation_medium.png b/projects/notation-system/notation_medium.png new file mode 100644 index 0000000..646c2e6 Binary files /dev/null and b/projects/notation-system/notation_medium.png differ diff --git a/projects/notation-system/notation_small.png b/projects/notation-system/notation_small.png new file mode 100644 index 0000000..538966b Binary files /dev/null and b/projects/notation-system/notation_small.png differ diff --git a/projects/padliography/.ipynb_checkpoints/documentation-checkpoint.md b/projects/padliography/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..eaf8ddf --- /dev/null +++ b/projects/padliography/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,15 @@ +--- +title: 🏓 PADliography +date: 28/10/2021 +url: /soupboat/padliography/ +git: https://git.xpub.nl/kamo/PADliography +description: Fetching all our pads from the PZI wiki with API magic +links: + - url: https://pzwiki.wdka.nl/mediadesign/Padliography + title: Wiki +categories: + - Web + - CMS + - Utility + - Long Term +--- \ No newline at end of file diff --git a/projects/padliography/documentation.md b/projects/padliography/documentation.md new file mode 100644 index 0000000..eaf8ddf --- /dev/null +++ b/projects/padliography/documentation.md @@ -0,0 +1,15 @@ +--- +title: 🏓 PADliography +date: 28/10/2021 +url: /soupboat/padliography/ +git: https://git.xpub.nl/kamo/PADliography +description: Fetching all our pads from the PZI wiki with API magic +links: + - url: https://pzwiki.wdka.nl/mediadesign/Padliography + title: Wiki +categories: + - Web + - CMS + - Utility + - Long Term +--- \ No newline at end of file diff --git a/projects/pimp/.ipynb_checkpoints/documentation-checkpoint.md b/projects/pimp/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..0f23984 --- /dev/null +++ b/projects/pimp/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,10 @@ +--- +title: Pimp the Soupboat WS +date: 28/10/2021 +url: /soupboat/pimp/ +description: Crash HTML_CSS workshop for our dear XPUB1 fellows +pad: https://pad.xpub.nl/p/pimp_my_soupboat +categories: + - Workshop + - Web +--- \ No newline at end of file diff --git a/projects/pimp/documentation.md b/projects/pimp/documentation.md new file mode 100644 index 0000000..0f23984 --- /dev/null +++ b/projects/pimp/documentation.md @@ -0,0 +1,10 @@ +--- +title: Pimp the Soupboat WS +date: 28/10/2021 +url: /soupboat/pimp/ +description: Crash HTML_CSS workshop for our dear XPUB1 fellows +pad: https://pad.xpub.nl/p/pimp_my_soupboat +categories: + - Workshop + - Web +--- \ No newline at end of file diff --git a/projects/plotter-pattern/.ipynb_checkpoints/documentation-checkpoint.md b/projects/plotter-pattern/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..f5096b3 --- /dev/null +++ b/projects/plotter-pattern/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,40 @@ +--- +title: Plotter Pattern +description: Parametric graphics to be plotted with the plotter +date: 25/04/2022 +categories: + - vvvv + - CG + - Print +cover: ebrains cut.jpg +cover_alt: connectivity lines from the ebrains.eu identity +--- + +Manetta and Joseph after an archaeological excavation in the XPUB studio found an HP7440A Pen Plotter. We spent a couple of hours to connect it to a Raspberry Pi and try to draw something. It worked. Nice. + +I tried to print some Connectivity Lines from the [EBRAINS](https://ebrains.eu) identity. It was the first thing I worked on when joined [Non-Linear](https://non-linear.com) two years ago. Since in the website the lines are rendered as dynamic SVG converting them in HPGL was straightforward. + +![connectivity lines](lines.svg) +![connectivity lines](ebrains cut.jpg) +TODO: scan this + +This plotter can work with multiple pens, so we can prepare drawings with different colors. Here some test made with [vvvv](https://visualprogramming.net/). Need to experiment a bit with the workflow to generate graphics and then converting them to HPGL. One possible way is to export each color as SVG and then compose the different layers in Inkscape in order to specifcy the different pens etc. I'll try to print them after the May break + + +
+ + + + + + + + + +
\ No newline at end of file diff --git a/projects/plotter-pattern/.ipynb_checkpoints/ebrains cut-checkpoint.jpg b/projects/plotter-pattern/.ipynb_checkpoints/ebrains cut-checkpoint.jpg new file mode 100644 index 0000000..d10f345 Binary files /dev/null and b/projects/plotter-pattern/.ipynb_checkpoints/ebrains cut-checkpoint.jpg differ diff --git a/projects/plotter-pattern/documentation.md b/projects/plotter-pattern/documentation.md new file mode 100644 index 0000000..f5096b3 --- /dev/null +++ b/projects/plotter-pattern/documentation.md @@ -0,0 +1,40 @@ +--- +title: Plotter Pattern +description: Parametric graphics to be plotted with the plotter +date: 25/04/2022 +categories: + - vvvv + - CG + - Print +cover: ebrains cut.jpg +cover_alt: connectivity lines from the ebrains.eu identity +--- + +Manetta and Joseph after an archaeological excavation in the XPUB studio found an HP7440A Pen Plotter. We spent a couple of hours to connect it to a Raspberry Pi and try to draw something. It worked. Nice. + +I tried to print some Connectivity Lines from the [EBRAINS](https://ebrains.eu) identity. It was the first thing I worked on when joined [Non-Linear](https://non-linear.com) two years ago. Since in the website the lines are rendered as dynamic SVG converting them in HPGL was straightforward. + +![connectivity lines](lines.svg) +![connectivity lines](ebrains cut.jpg) +TODO: scan this + +This plotter can work with multiple pens, so we can prepare drawings with different colors. Here some test made with [vvvv](https://visualprogramming.net/). Need to experiment a bit with the workflow to generate graphics and then converting them to HPGL. One possible way is to export each color as SVG and then compose the different layers in Inkscape in order to specifcy the different pens etc. I'll try to print them after the May break + + +
+ + + + + + + + + +
\ No newline at end of file diff --git a/projects/plotter-pattern/ebrains cut.jpg b/projects/plotter-pattern/ebrains cut.jpg new file mode 100644 index 0000000..d10f345 Binary files /dev/null and b/projects/plotter-pattern/ebrains cut.jpg differ diff --git a/projects/plotter-pattern/lines.svg b/projects/plotter-pattern/lines.svg new file mode 100644 index 0000000..aaa9753 --- /dev/null +++ b/projects/plotter-pattern/lines.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + diff --git a/projects/plotter-pattern/perlin plotter 4.mov b/projects/plotter-pattern/perlin plotter 4.mov new file mode 100644 index 0000000..2988c66 Binary files /dev/null and b/projects/plotter-pattern/perlin plotter 4.mov differ diff --git a/projects/plotter-pattern/perlin plotter 5.mov b/projects/plotter-pattern/perlin plotter 5.mov new file mode 100644 index 0000000..1fc4741 Binary files /dev/null and b/projects/plotter-pattern/perlin plotter 5.mov differ diff --git a/projects/plotter-pattern/perlin plotter 8.mov b/projects/plotter-pattern/perlin plotter 8.mov new file mode 100644 index 0000000..5047a13 Binary files /dev/null and b/projects/plotter-pattern/perlin plotter 8.mov differ diff --git a/projects/post-flask/.ipynb_checkpoints/documentation-checkpoint.md b/projects/post-flask/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..0e6de96 --- /dev/null +++ b/projects/post-flask/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,109 @@ +--- +title: we printed 85 000 postit for real +description: Web-to-print post-it generator app +date: 15/03/2022 +categories: + - Web + - SI17 + - Print +cover: production-line-al.jpg +cover_alt: rejected proposal for si17 cover with a dog +git: https://git.xpub.nl/kamo/postit +url: https://hub.xpub.nl/soupboat/postit/ +--- + + +## Working on contents together + +For SI17 we produced a pubblication in 850 postit. Fun and funny, but at some point also crazy. +We generated the postit hell starting from the experiments and researches we did in the second trim, in a way to make room for each contribution but still a common ground. + +After gathering all the materials we started splitting them to fit the postit format. We opted for self sustaining sentence approach. Each post-it is a concluded statement. Some of them invites a more linear narration, some others can just be combined with different variation. + +To manage the contents and detach them from the layout and design of the postit, we set up a repository in git. Find more info [here](/soupboat/~kamo/projects/postit-contents/). + +In the [postit page](https://hub.xpub.nl/soupboat/postit/) it's possible to generate the contributions included in the loot box. The Contributions list it's basically an index of the pubblication. Since we have two kind of loot boxes we implemented a switch to change color also for the post-it. + +## Structure + +The post-it generator is a web app built with Flask and Frontmatter. It uses the `postit-contents` repo as submodule, in order to manage the two things indipendently. In this way the work can advance on both sides without mess to much with the structure of each part of the project. + +The postit flask app has these modules: + +- a `dump.py` module to load the contents from the markdown files and generate a `contents.json` file with a list of postit, organized by contribution + +- a `crosswords.py` module to generate the cells for the Crossword Imaginary Grid Game (that are created dinamically starting from the words in each crossword) + +- a `prefix.py` module to manage the url prefixer for hosting the app in the soupboat + +and a couple of blueprints + +- a `home.py` blueprint to serve a homepage with the list of contributions, the color switch, etc. + +- a `generate.py` blueprint to manage the generation of the contributions, with two endpoints: one to generate all the contents and one for just the single contributions. It loads the `contents.json` file and + +additionally we implemented also a git hook to regenerate the contents when something new is pushed on the `postit-contents` repo, but didn't manage to make it works right now. There are some issues in the python-git module, and we were a bit in a rush. + +The `postit.html` template takes care of all the possible modules we developed for the layout, that at the moment are: + +- Picture postit, with a monochromatic image that follow the main color of the pubblication (orange or purple) +```yaml + - pic: cover.jpg + alt: this is a picture +``` +- Image postit, with content indipendent from the pubblication's color scheme + +```yaml + - img: cover.jpg + alt: this is an image +``` +- Card postit, for The Leader card game, that is a motivational take on Quartet. Each card has an ID, a quote and scores for motivation, empathy, vision and positivity. +```yaml + - card: A1 + quote: If life is a game, play the game + motivation: 90 + empathy: 20 + vision: 40 + positivity: 50 +``` +- Definition postit, for the Crossword Imaginary Grid Game. This come in two versions: one for the pubblication and one for the launch event. The former has the following properties: word is the final word, that will not be printed on the postit but it will be used to generate the cell for the imaginary grid. The definition is the definition of the word. The direction can be V (vertical) or H (horizontal), and start is a point in a grid composed by letters on the x axys and numbers on the y axis. Category is the category of the crossword. Each category is a complete crossword. Ask Emma for more infos she's the mastermind. For the launch we have also a different version with just the definition, the direction and the category. +```yaml + - word: Counterculture + definition: It can be present as disturbance + direction: V + start: C16 + category: Ideology +``` +- The mimic colophon is a mess and not really the reusable module fair, I put it here just for sake of completion. +```yaml + - type: mimic-colophon + original: original text + original-credits: Austin Wood + original-action: published + original-date: May 03, 2017 + current: current text + current-credits: XPUB + current-action: '.replace("mimic", "loot box")' + current-date: March 25, 2022 + +``` +- Dialogue postit is a layout that permit to put contents in the four corner of the postit, using the cardinal directions properties. NW will be top left, NE top right, SW bottom left, SE bottom right. Super usefull for the NIM dialogue and to combine some single word sentences in the definition of loot box. +```yaml +- nw: top left + ne: top right + sw: bottom left + se: bottom right +``` + +- Standard text post it it's a normal string entry in the contents list. +```yaml + - Hello a simple text +``` + +All the postit but the images and some really specific layouts (like the cards) have a footer with the title of the contribution and a progress bar instead of the page number. We decided on that in order to have the position of the contribution to be free in the loot box and not constrained to a single order. The progress bar is calculated on the amount of contents for contribution and it's funny and less strict than numbers. + +For the karaoke we slightly modified it in order to recall the animation that karaoke lyrics often have. Then there are some easter eggs scattered around just for fun. + +Find the code commented in git! + +The Web-to-print part is managed with [Paged.js](https://pagedjs.org/). \ No newline at end of file diff --git a/projects/post-flask/documentation.md b/projects/post-flask/documentation.md new file mode 100644 index 0000000..0e6de96 --- /dev/null +++ b/projects/post-flask/documentation.md @@ -0,0 +1,109 @@ +--- +title: we printed 85 000 postit for real +description: Web-to-print post-it generator app +date: 15/03/2022 +categories: + - Web + - SI17 + - Print +cover: production-line-al.jpg +cover_alt: rejected proposal for si17 cover with a dog +git: https://git.xpub.nl/kamo/postit +url: https://hub.xpub.nl/soupboat/postit/ +--- + + +## Working on contents together + +For SI17 we produced a pubblication in 850 postit. Fun and funny, but at some point also crazy. +We generated the postit hell starting from the experiments and researches we did in the second trim, in a way to make room for each contribution but still a common ground. + +After gathering all the materials we started splitting them to fit the postit format. We opted for self sustaining sentence approach. Each post-it is a concluded statement. Some of them invites a more linear narration, some others can just be combined with different variation. + +To manage the contents and detach them from the layout and design of the postit, we set up a repository in git. Find more info [here](/soupboat/~kamo/projects/postit-contents/). + +In the [postit page](https://hub.xpub.nl/soupboat/postit/) it's possible to generate the contributions included in the loot box. The Contributions list it's basically an index of the pubblication. Since we have two kind of loot boxes we implemented a switch to change color also for the post-it. + +## Structure + +The post-it generator is a web app built with Flask and Frontmatter. It uses the `postit-contents` repo as submodule, in order to manage the two things indipendently. In this way the work can advance on both sides without mess to much with the structure of each part of the project. + +The postit flask app has these modules: + +- a `dump.py` module to load the contents from the markdown files and generate a `contents.json` file with a list of postit, organized by contribution + +- a `crosswords.py` module to generate the cells for the Crossword Imaginary Grid Game (that are created dinamically starting from the words in each crossword) + +- a `prefix.py` module to manage the url prefixer for hosting the app in the soupboat + +and a couple of blueprints + +- a `home.py` blueprint to serve a homepage with the list of contributions, the color switch, etc. + +- a `generate.py` blueprint to manage the generation of the contributions, with two endpoints: one to generate all the contents and one for just the single contributions. It loads the `contents.json` file and + +additionally we implemented also a git hook to regenerate the contents when something new is pushed on the `postit-contents` repo, but didn't manage to make it works right now. There are some issues in the python-git module, and we were a bit in a rush. + +The `postit.html` template takes care of all the possible modules we developed for the layout, that at the moment are: + +- Picture postit, with a monochromatic image that follow the main color of the pubblication (orange or purple) +```yaml + - pic: cover.jpg + alt: this is a picture +``` +- Image postit, with content indipendent from the pubblication's color scheme + +```yaml + - img: cover.jpg + alt: this is an image +``` +- Card postit, for The Leader card game, that is a motivational take on Quartet. Each card has an ID, a quote and scores for motivation, empathy, vision and positivity. +```yaml + - card: A1 + quote: If life is a game, play the game + motivation: 90 + empathy: 20 + vision: 40 + positivity: 50 +``` +- Definition postit, for the Crossword Imaginary Grid Game. This come in two versions: one for the pubblication and one for the launch event. The former has the following properties: word is the final word, that will not be printed on the postit but it will be used to generate the cell for the imaginary grid. The definition is the definition of the word. The direction can be V (vertical) or H (horizontal), and start is a point in a grid composed by letters on the x axys and numbers on the y axis. Category is the category of the crossword. Each category is a complete crossword. Ask Emma for more infos she's the mastermind. For the launch we have also a different version with just the definition, the direction and the category. +```yaml + - word: Counterculture + definition: It can be present as disturbance + direction: V + start: C16 + category: Ideology +``` +- The mimic colophon is a mess and not really the reusable module fair, I put it here just for sake of completion. +```yaml + - type: mimic-colophon + original: original text + original-credits: Austin Wood + original-action: published + original-date: May 03, 2017 + current: current text + current-credits: XPUB + current-action: '.replace("mimic", "loot box")' + current-date: March 25, 2022 + +``` +- Dialogue postit is a layout that permit to put contents in the four corner of the postit, using the cardinal directions properties. NW will be top left, NE top right, SW bottom left, SE bottom right. Super usefull for the NIM dialogue and to combine some single word sentences in the definition of loot box. +```yaml +- nw: top left + ne: top right + sw: bottom left + se: bottom right +``` + +- Standard text post it it's a normal string entry in the contents list. +```yaml + - Hello a simple text +``` + +All the postit but the images and some really specific layouts (like the cards) have a footer with the title of the contribution and a progress bar instead of the page number. We decided on that in order to have the position of the contribution to be free in the loot box and not constrained to a single order. The progress bar is calculated on the amount of contents for contribution and it's funny and less strict than numbers. + +For the karaoke we slightly modified it in order to recall the animation that karaoke lyrics often have. Then there are some easter eggs scattered around just for fun. + +Find the code commented in git! + +The Web-to-print part is managed with [Paged.js](https://pagedjs.org/). \ No newline at end of file diff --git a/projects/postit-contents/.ipynb_checkpoints/documentation-checkpoint.md b/projects/postit-contents/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..f7d7201 --- /dev/null +++ b/projects/postit-contents/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,67 @@ +--- +title: Post-it Contents +description: A repo to organize SI17 contents in a post-it guise +date: 10/03/2022 +categories: + - SI17 +cover: susi.jpg +cover_alt: Fake sushi and a sweet cat +git: https://git.xpub.nl/kamo/post-it-contents +pad: https://pad.xpub.nl/p/post-it +links: + - url: https://cryptpad.fr/sheet/#/3/sheet/edit/aaea5af41598230eb698c38018dd7d24/ + title: Contents +--- + +## We are making 50000 post-it + +The loot box contains a series of post-it blocks + +Why the post-its: + +- because they're a modular surface and offer an interesting format that also reminds the to-do list, the corporate strategies for collective brainstorming and organization, or the form of self- management. it's visually accessible, relatable and familiar. +- Interesting possibilities for further distribution and exchange. +- The format of the post-it blocks it's open to material experiments, since the block is just a bunch of sheets glued together. In this way we can adapt the shape of the sheets to fit the- contents while remaining in the same common surface/format. + +![exchange model](https://hub.xpub.nl/soupboat/~grgr/static/img/exchange_model1.png) + +## Post-it blocks + +each contribution is formatted as post-it block. + +feature: we can experiment with the format of each block in relation to the contents +feature: the post-it blocks can be enjoyed as mini booklets (linear access) +feature: the post-it blocks can be enjoyed as modular elements to be attached on a map (complex access) + +optional features: + +- the blocks can be collectible and exchanged by the players +- in each block the contents are repeated many times so that you can give part if the block to people that don't buy the LB and or +- Exchange with other customer +- Also, if in each block the contents are reapeted many times the player can easily experiment with the contents, use them and connect them with different contents, play with their quantities in forming a puzzle, give them to other people and spread them in many different ways. + +![distribuition model](https://hub.xpub.nl/soupboat/~grgr/static/img/model_distribution2.png) + +## Contents organization + +- Each block is a folder +- In each folder there is a `contents.md` file and media resources such as images +- `contents.md` contains the meta and the contents of each contribuition, formatted as a YAML list + +example: + +```yaml +--- +title: One-sentence game ideas +contents: + - you are in an empty room with 13 doors that are portals to 13 different worlds. + - 5 min slow-mo epidemics, visual transmitted + - every crisis is a simulation of another crisis + - img: game.jpg + alt: Game description + - you receive a point for each moving/floating tile on the street you encounter + - thermoSTATE - The state where no citizen has to feel cold +--- +``` + +The entries in the contents list can be simple strings or images. To insert an image we are using the YAML object notation, specifying the `img` filename and the `alt` description that can be used in the layout. Images can be URL or file placed in the project folder. diff --git a/projects/postit-contents/documentation.md b/projects/postit-contents/documentation.md new file mode 100644 index 0000000..f7d7201 --- /dev/null +++ b/projects/postit-contents/documentation.md @@ -0,0 +1,67 @@ +--- +title: Post-it Contents +description: A repo to organize SI17 contents in a post-it guise +date: 10/03/2022 +categories: + - SI17 +cover: susi.jpg +cover_alt: Fake sushi and a sweet cat +git: https://git.xpub.nl/kamo/post-it-contents +pad: https://pad.xpub.nl/p/post-it +links: + - url: https://cryptpad.fr/sheet/#/3/sheet/edit/aaea5af41598230eb698c38018dd7d24/ + title: Contents +--- + +## We are making 50000 post-it + +The loot box contains a series of post-it blocks + +Why the post-its: + +- because they're a modular surface and offer an interesting format that also reminds the to-do list, the corporate strategies for collective brainstorming and organization, or the form of self- management. it's visually accessible, relatable and familiar. +- Interesting possibilities for further distribution and exchange. +- The format of the post-it blocks it's open to material experiments, since the block is just a bunch of sheets glued together. In this way we can adapt the shape of the sheets to fit the- contents while remaining in the same common surface/format. + +![exchange model](https://hub.xpub.nl/soupboat/~grgr/static/img/exchange_model1.png) + +## Post-it blocks + +each contribution is formatted as post-it block. + +feature: we can experiment with the format of each block in relation to the contents +feature: the post-it blocks can be enjoyed as mini booklets (linear access) +feature: the post-it blocks can be enjoyed as modular elements to be attached on a map (complex access) + +optional features: + +- the blocks can be collectible and exchanged by the players +- in each block the contents are repeated many times so that you can give part if the block to people that don't buy the LB and or +- Exchange with other customer +- Also, if in each block the contents are reapeted many times the player can easily experiment with the contents, use them and connect them with different contents, play with their quantities in forming a puzzle, give them to other people and spread them in many different ways. + +![distribuition model](https://hub.xpub.nl/soupboat/~grgr/static/img/model_distribution2.png) + +## Contents organization + +- Each block is a folder +- In each folder there is a `contents.md` file and media resources such as images +- `contents.md` contains the meta and the contents of each contribuition, formatted as a YAML list + +example: + +```yaml +--- +title: One-sentence game ideas +contents: + - you are in an empty room with 13 doors that are portals to 13 different worlds. + - 5 min slow-mo epidemics, visual transmitted + - every crisis is a simulation of another crisis + - img: game.jpg + alt: Game description + - you receive a point for each moving/floating tile on the street you encounter + - thermoSTATE - The state where no citizen has to feel cold +--- +``` + +The entries in the contents list can be simple strings or images. To insert an image we are using the YAML object notation, specifying the `img` filename and the `alt` description that can be used in the layout. Images can be URL or file placed in the project folder. diff --git a/projects/postit-gen/.ipynb_checkpoints/documentation-checkpoint.md b/projects/postit-gen/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..b8a467b --- /dev/null +++ b/projects/postit-gen/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,92 @@ +--- +title: Post it generator +description: Prototype for web-to-print postit +categories: + - Web + - Print + - SI17 +git: https://git.xpub.nl/kamo/postit-gen +cover: susi.jpg +cover_alt: fake sushi +date: 08/03/2022 +--- + +## POST-IT GENERATOR + +~~TO AUGMENT OUR PRODUCTIVITY HERE IS A SCRIPT THAT~~ +Generate post-it blocks from markdown files. + +### Install + +Clone the repo + +`git clone https://git.xpub.nl/kamo/postit-gen.git` + +Move to the cloned folder + +`cd postit-gen` + +Create a virtual environment + +`python3 -m venv venv` + +and activate it + +`. venv/bin/activate` + +Then you can install the repo + +`pip3 install -e .` + +### How to use + +The package offers two scripts: `template.py` and `generate.py`. + +`template.py` generate a template folder with a markdown file that can be used as a starting point for formatting the contents. + +`python3 template.py -f test` + +Will generate a `test` folder, with the markdown template for the contents. + +The `contents.md` file has these properties: + +- `title`, the title of the block +- `folder`, the base folder in which the files are +- `page_width`, the width of the page for the printing +- `page_height`, the height of the page for the printing +- `post_width`, the width of the post-it for the printing +- `post_height`, the height of the post-it for the printing +- `margin`, the margin for the page +- `unit`, the measure unit in which the measures are expressed, default is _mm_ +- `background`, the color of the post-its. Accept all the format CSS specs accept. Default is _white_. +- `contents`, a list of contents to put in the post-it block. Each entry is a post-it. + +All these parameters are formatted in [YAML](https://it.wikipedia.org/wiki/YAML). + +After setting all the parameters to match your needs, you can fill the contents. ATM you can insert text and images, in the form of a list. + +```yaml +contents: + - A flat with no floors + - Hello, where are you, what can you see from there? + - type: image + src: game.png +``` + +Usually each entry of the list will be considered as a string. If you want to insert an image you will need to provide a `type: image`, and a `src: `. + +In this way: + +```yaml +contents: + - type: image + src: +``` + +Once you inserted your contents, you can run the `generate.py` script, specifying the working folder from which you want to take the contents. + +`python3 generate.py -f test` + +It will take the contents inside the `test` folder and will generate a ready-to-print HTML file, serving it with a simple http-server at `http://localhost:8000/test`. Opening that link you can preview your post-it blocks. Each entry of the `contents` list is now a page in the document (in the print mode!) + +TODO: link css file in the template to work directly on the preview. diff --git a/projects/postit-gen/documentation.md b/projects/postit-gen/documentation.md new file mode 100644 index 0000000..b8a467b --- /dev/null +++ b/projects/postit-gen/documentation.md @@ -0,0 +1,92 @@ +--- +title: Post it generator +description: Prototype for web-to-print postit +categories: + - Web + - Print + - SI17 +git: https://git.xpub.nl/kamo/postit-gen +cover: susi.jpg +cover_alt: fake sushi +date: 08/03/2022 +--- + +## POST-IT GENERATOR + +~~TO AUGMENT OUR PRODUCTIVITY HERE IS A SCRIPT THAT~~ +Generate post-it blocks from markdown files. + +### Install + +Clone the repo + +`git clone https://git.xpub.nl/kamo/postit-gen.git` + +Move to the cloned folder + +`cd postit-gen` + +Create a virtual environment + +`python3 -m venv venv` + +and activate it + +`. venv/bin/activate` + +Then you can install the repo + +`pip3 install -e .` + +### How to use + +The package offers two scripts: `template.py` and `generate.py`. + +`template.py` generate a template folder with a markdown file that can be used as a starting point for formatting the contents. + +`python3 template.py -f test` + +Will generate a `test` folder, with the markdown template for the contents. + +The `contents.md` file has these properties: + +- `title`, the title of the block +- `folder`, the base folder in which the files are +- `page_width`, the width of the page for the printing +- `page_height`, the height of the page for the printing +- `post_width`, the width of the post-it for the printing +- `post_height`, the height of the post-it for the printing +- `margin`, the margin for the page +- `unit`, the measure unit in which the measures are expressed, default is _mm_ +- `background`, the color of the post-its. Accept all the format CSS specs accept. Default is _white_. +- `contents`, a list of contents to put in the post-it block. Each entry is a post-it. + +All these parameters are formatted in [YAML](https://it.wikipedia.org/wiki/YAML). + +After setting all the parameters to match your needs, you can fill the contents. ATM you can insert text and images, in the form of a list. + +```yaml +contents: + - A flat with no floors + - Hello, where are you, what can you see from there? + - type: image + src: game.png +``` + +Usually each entry of the list will be considered as a string. If you want to insert an image you will need to provide a `type: image`, and a `src: `. + +In this way: + +```yaml +contents: + - type: image + src: +``` + +Once you inserted your contents, you can run the `generate.py` script, specifying the working folder from which you want to take the contents. + +`python3 generate.py -f test` + +It will take the contents inside the `test` folder and will generate a ready-to-print HTML file, serving it with a simple http-server at `http://localhost:8000/test`. Opening that link you can preview your post-it blocks. Each entry of the `contents` list is now a page in the document (in the print mode!) + +TODO: link css file in the template to work directly on the preview. diff --git a/projects/postit-gen/proto-post-it/.ipynb_checkpoints/PythonPDFPostits-checkpoint.ipynb b/projects/postit-gen/proto-post-it/.ipynb_checkpoints/PythonPDFPostits-checkpoint.ipynb new file mode 100644 index 0000000..620690e --- /dev/null +++ b/projects/postit-gen/proto-post-it/.ipynb_checkpoints/PythonPDFPostits-checkpoint.ipynb @@ -0,0 +1,1486 @@ +{ + "cells": [ + { + "cell_type": "markdown", + "id": "4014e69f-fb17-445e-bf02-a5e226979574", + "metadata": { + "tags": [] + }, + "source": [ + "## Scripted PDF generation with reportlab\n", + "\n", + "Reportlab is a python library that can generate PDFs. It provides a \"canvas\" object that gives very precise controls to create/draw on pages of a PDF. There are lots of drawing commands that you can use see [the docs in the RL userguide](\n", + "https://www.reportlab.com/docs/reportlab-userguide.pdf#page=11)." + ] + }, + { + "cell_type": "markdown", + "id": "e6ab8442-b778-41d1-ac9d-49c26e799345", + "metadata": { + "tags": [] + }, + "source": [ + "### Draw a grid\n" + ] + }, + { + "cell_type": "code", + "execution_count": 1, + "id": "1366adcc-fbb7-4bc6-80f7-86dda20dbccf", + "metadata": {}, + "outputs": [], + "source": [ + "from reportlab.pdfgen.canvas import Canvas\n", + "from reportlab.lib.pagesizes import A4, A0\n", + "from reportlab.lib.units import inch, cm, mm\n", + "import sys\n", + "from reportlab.pdfbase.ttfonts import TTFont, pdfmetrics" + ] + }, + { + "cell_type": "code", + "execution_count": 2, + "id": "9f72bd73-c2e2-4b49-8f48-378fed3fa11a", + "metadata": {}, + "outputs": [], + "source": [ + "# Normally you can use a built in page size like A0, A4\n", + "# c = Canvas(\"grid.pdf\", pagesize=A0, bottomup=0)" + ] + }, + { + "cell_type": "code", + "execution_count": 3, + "id": "8649fc44-18e8-4869-8c53-aec397b3a5d4", + "metadata": {}, + "outputs": [], + "source": [ + "# But we make a custom size with pagew & pageh\n", + "# nb the bottomup option this makes 0,0 the top left of page as you might expect (but it isn't the default)" + ] + }, + { + "cell_type": "code", + "execution_count": 4, + "id": "21d33c4e-93c3-4ba3-9019-5abf9d334816", + "metadata": {}, + "outputs": [], + "source": [ + "pagew, pageh = 75*mm, 75*mm\n", + "c = Canvas(\"grid.pdf\", pagesize=(pagew, pageh), bottomup=0)" + ] + }, + { + "cell_type": "markdown", + "id": "53cfea16-a6f7-4f3c-b58c-9df93808390e", + "metadata": {}, + "source": [ + "and don't forget about the question mark to get docs" + ] + }, + { + "cell_type": "code", + "execution_count": 5, + "id": "0551a95c-6739-4986-8714-e82a48bc8a8d", + "metadata": {}, + "outputs": [ + { + "data": { + "text/plain": [ + "\u001b[0;31mSignature:\u001b[0m \u001b[0mc\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mline\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mx1\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0my1\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mx2\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0my2\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n", + "\u001b[0;31mDocstring:\u001b[0m\n", + "draw a line segment from (x1,y1) to (x2,y2) (with color, thickness and\n", + "other attributes determined by the current graphics state).\n", + "\u001b[0;31mFile:\u001b[0m /usr/local/lib/python3.7/dist-packages/reportlab/pdfgen/canvas.py\n", + "\u001b[0;31mType:\u001b[0m method\n" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "c.line?" + ] + }, + { + "cell_type": "code", + "execution_count": 6, + "id": "f24545dc-cb32-4097-a87d-44a323997d83", + "metadata": {}, + "outputs": [ + { + "data": { + "text/plain": [ + "\u001b[0;31mSignature:\u001b[0m \u001b[0mc\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0msetLineWidth\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidth\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n", + "\u001b[0;31mDocstring:\u001b[0m \n", + "\u001b[0;31mFile:\u001b[0m /usr/local/lib/python3.7/dist-packages/reportlab/pdfgen/canvas.py\n", + "\u001b[0;31mType:\u001b[0m method\n" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "c.setLineWidth?" + ] + }, + { + "cell_type": "code", + "execution_count": 7, + "id": "2d84fe70-de02-4dcd-9209-edb2c72c5218", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "(2383.937007874016, 3370.393700787402)\n", + "21.259842519685044\n" + ] + } + ], + "source": [ + "colw = pagew/10\n", + "print (A0)\n", + "print (colw)" + ] + }, + { + "cell_type": "code", + "execution_count": 8, + "id": "f57e7e6a-c44c-4c78-9854-e1e74c6441ae", + "metadata": {}, + "outputs": [], + "source": [ + "for x in range(10):\n", + " c.line(x*colw, 0, x*colw, pageh)" + ] + }, + { + "cell_type": "code", + "execution_count": 9, + "id": "e04e1107-5eaa-4f25-9da9-c166463efd3c", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "21.259842519685044\n" + ] + } + ], + "source": [ + "colh = pageh/10\n", + "print (colh)\n", + "for y in range(10):\n", + " c.line(0, y*colh, pagew, y*colh)" + ] + }, + { + "cell_type": "code", + "execution_count": 10, + "id": "ca2afe5f-bbbc-4308-993a-e8d93d85ad17", + "metadata": {}, + "outputs": [], + "source": [ + "c.showPage() # always shave a page to finish it...\n", + "c.save() # finally writes the PDF" + ] + }, + { + "cell_type": "markdown", + "id": "ce4e9a55-5ba9-4728-9013-af280369fe1a", + "metadata": {}, + "source": [ + "### Make a PDF with blank pages" + ] + }, + { + "cell_type": "code", + "execution_count": 11, + "id": "4d27924b-9527-44e0-b74f-65427b7e6751", + "metadata": {}, + "outputs": [], + "source": [ + "from reportlab.pdfgen.canvas import Canvas\n", + "from reportlab.lib.pagesizes import letter, A4\n", + "from reportlab.lib.units import mm, cm\n", + "# from reportlab.pdfbase.ttfonts import TTFont, pdfmetrics\n", + "\n", + "size = (75*mm, 75*mm)\n", + "pages=10\n", + "c = Canvas(\"blank.pdf\", pagesize=size)\n", + "for i in range(pages):\n", + " # c.setPageSize(size)\n", + " c.showPage()\n", + "c.save()" + ] + }, + { + "cell_type": "markdown", + "id": "17d5bbe7-c955-4a97-8922-cd97be8733de", + "metadata": {}, + "source": [ + "## Make simple text titles\n", + "\n", + "Report lab's canvas doesn't do word wrapping / line breaking, but if you are OK with manually placing type you can use it." + ] + }, + { + "cell_type": "code", + "execution_count": 12, + "id": "fd519538-dc94-4845-a25f-8fffa93828ec", + "metadata": {}, + "outputs": [], + "source": [ + "from reportlab.pdfbase.ttfonts import TTFont" + ] + }, + { + "cell_type": "code", + "execution_count": 14, + "id": "04b984ee-8fe7-46f4-8b67-d2f199b50033", + "metadata": {}, + "outputs": [], + "source": [ + "from reportlab.pdfgen.canvas import Canvas\n", + "from reportlab.lib.pagesizes import letter, A4\n", + "from reportlab.lib.units import mm, cm\n", + "# from reportlab.pdfbase.ttfonts import TTFont, pdfmetrics\n", + "\n", + "titles = (\"One\", \"Two\", \"Three\", \"Four\")\n", + "\n", + "size = (75*mm, 75*mm)\n", + "pages=10\n", + "\n", + "pdfmetrics.registerFont(TTFont('SI17', 'SpecialIssue17-Regular.ttf'))\n", + "\n", + "c = Canvas(\"titles.pdf\", pagesize=size, bottomup=0)\n", + "for title in titles:\n", + " c.setFont('SI17', 32)\n", + " c.drawString(5*mm, 15*mm, title.upper()) # nb the 2nd number is the distance (from top) to the baseline of the text\n", + " # c.setPageSize(size)\n", + " c.showPage()\n", + "c.save()" + ] + }, + { + "cell_type": "markdown", + "id": "b49c0bb2-b93b-4803-8ee8-a0335a1b3e04", + "metadata": { + "tags": [] + }, + "source": [ + "### Convert a folder of images to PDF\n", + "\n", + "Let's download some (public domain) game tiles from Kenney.nl" + ] + }, + { + "cell_type": "code", + "execution_count": 14, + "id": "4fdf8977-3dd8-4dc7-a360-92cd0a0c14e5", + "metadata": { + "tags": [] + }, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "--2022-03-10 13:19:25-- https://www.kenney.nl/content/3-assets/14-monochrome-rpg/kenney_monochromerpg.zip\n", + "Resolving www.kenney.nl (www.kenney.nl)... 149.210.216.123\n", + "Connecting to www.kenney.nl (www.kenney.nl)|149.210.216.123|:443... connected.\n", + "HTTP request sent, awaiting response... 200 OK\n", + "Length: 387381 (378K) [application/zip]\n", + "Saving to: ‘kenney_monochromerpg.zip’\n", + "\n", + "kenney_monochromerp 100%[===================>] 378.30K --.-KB/s in 0.03s \n", + "\n", + "2022-03-10 13:19:25 (14.1 MB/s) - ‘kenney_monochromerpg.zip’ saved [387381/387381]\n", + "\n" + ] + } + ], + "source": [ + "!wget https://www.kenney.nl/content/3-assets/14-monochrome-rpg/kenney_monochromerpg.zip" + ] + }, + { + "cell_type": "code", + "execution_count": 15, + "id": "7c824ff2-ab03-43e8-9472-9a01b3172d9d", + "metadata": { + "scrolled": true, + "tags": [] + }, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "Archive: kenney_monochromerpg.zip\n", + " creating: kenney/Dot Matrix/\n", + " creating: kenney/Dot Matrix/Sprites/\n", + " inflating: kenney/Dot Matrix/Sprites/character0.png \n", + " inflating: kenney/Dot Matrix/Sprites/character1.png \n", + " inflating: kenney/Dot Matrix/Sprites/character2.png \n", + " inflating: kenney/Dot Matrix/Sprites/character3.png \n", + " inflating: kenney/Dot Matrix/Sprites/enemy0.png \n", + " inflating: kenney/Dot Matrix/Sprites/enemy1.png \n", + " inflating: kenney/Dot Matrix/Sprites/enemy2.png \n", + " inflating: kenney/Dot Matrix/Sprites/heart0.png \n", + " inflating: kenney/Dot Matrix/Sprites/heart1.png \n", + " inflating: kenney/Dot Matrix/Sprites/heart2.png \n", + " inflating: kenney/Dot Matrix/Sprites/item0.png \n", + " creating: kenney/Dot Matrix/Tilemap/\n", + " inflating: kenney/Dot Matrix/Tilemap/tilemap.png \n", + " inflating: kenney/Dot Matrix/Tilemap/tilemap_packed.png \n", + " creating: kenney/Dot Matrix/Tiles/\n", + " inflating: kenney/Dot Matrix/Tiles/tile_0000.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0001.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0002.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0003.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0004.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0005.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0006.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0007.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0008.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0009.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0010.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0011.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0012.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0013.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0014.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0015.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0016.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0017.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0018.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0019.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0020.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0021.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0022.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0023.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0024.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0025.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0026.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0027.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0028.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0029.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0030.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0031.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0032.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0033.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0034.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0035.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0036.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0037.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0038.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0039.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0040.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0041.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0042.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0043.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0044.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0045.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0046.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0047.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0048.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0049.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0050.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0051.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0052.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0053.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0054.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0055.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0056.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0057.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0058.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0059.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0060.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0061.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0062.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0063.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0064.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0065.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0066.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0067.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0068.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0069.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0070.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0071.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0072.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0073.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0074.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0075.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0076.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0077.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0078.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0079.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0080.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0081.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0082.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0083.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0084.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0085.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0086.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0087.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0088.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0089.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0090.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0091.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0092.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0093.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0094.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0095.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0096.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0097.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0098.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0099.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0100.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0101.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0102.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0103.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0104.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0105.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0106.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0107.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0108.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0109.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0110.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0111.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0112.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0113.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0114.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0115.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0116.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0117.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0118.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0119.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0120.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0121.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0122.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0123.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0124.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0125.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0126.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0127.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0128.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0129.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0130.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0131.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0132.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0133.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0134.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0135.png \n", + " inflating: kenney/Dot Matrix/Tilesheet.txt \n", + " creating: kenney/Monochrome/\n", + " creating: kenney/Monochrome/Tilemap/\n", + " inflating: kenney/Monochrome/Tilemap/tilemap.png \n", + " inflating: kenney/Monochrome/Tilemap/tilemap_packed.png \n", + " creating: kenney/Monochrome/Tiles/\n", + " inflating: kenney/Monochrome/Tiles/tile_0000.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0001.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0002.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0003.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0004.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0005.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0006.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0007.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0008.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0009.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0010.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0011.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0012.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0013.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0014.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0015.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0016.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0017.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0018.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0019.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0020.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0021.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0022.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0023.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0024.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0025.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0026.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0027.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0028.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0029.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0030.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0031.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0032.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0033.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0034.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0035.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0036.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0037.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0038.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0039.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0040.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0041.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0042.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0043.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0044.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0045.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0046.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0047.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0048.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0049.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0050.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0051.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0052.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0053.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0054.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0055.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0056.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0057.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0058.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0059.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0060.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0061.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0062.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0063.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0064.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0065.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0066.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0067.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0068.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0069.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0070.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0071.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0072.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0073.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0074.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0075.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0076.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0077.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0078.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0079.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0080.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0081.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0082.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0083.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0084.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0085.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0086.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0087.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0088.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0089.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0090.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0091.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0092.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0093.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0094.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0095.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0096.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0097.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0098.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0099.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0100.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0101.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0102.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0103.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0104.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0105.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0106.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0107.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0108.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0109.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0110.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0111.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0112.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0113.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0114.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0115.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0116.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0117.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0118.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0119.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0120.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0121.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0122.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0123.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0124.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0125.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0126.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0127.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0128.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0129.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0130.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0131.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0132.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0133.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0134.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0135.png \n", + " inflating: kenney/Monochrome/Tilesheet.txt \n", + " inflating: kenney/Instructions.url \n", + " inflating: kenney/License.txt \n", + " inflating: kenney/Preview.png \n", + " inflating: kenney/Sample.png \n", + " inflating: kenney/Visit Kenney.url \n", + " inflating: kenney/Visit Patreon.url \n", + " creating: kenney/Default/\n", + " creating: kenney/Default/Tilemap/\n", + " inflating: kenney/Default/Tilemap/tilemap.png \n", + " inflating: kenney/Default/Tilemap/tilemap_packed.png \n", + " creating: kenney/Default/Tiles/\n", + " inflating: kenney/Default/Tiles/tile_0000.png \n", + " inflating: kenney/Default/Tiles/tile_0001.png \n", + " inflating: kenney/Default/Tiles/tile_0002.png \n", + " inflating: kenney/Default/Tiles/tile_0003.png \n", + " inflating: kenney/Default/Tiles/tile_0004.png \n", + " inflating: kenney/Default/Tiles/tile_0005.png \n", + " inflating: kenney/Default/Tiles/tile_0006.png \n", + " inflating: kenney/Default/Tiles/tile_0007.png \n", + " inflating: kenney/Default/Tiles/tile_0008.png \n", + " inflating: kenney/Default/Tiles/tile_0009.png \n", + " inflating: kenney/Default/Tiles/tile_0010.png \n", + " inflating: kenney/Default/Tiles/tile_0011.png \n", + " inflating: kenney/Default/Tiles/tile_0012.png \n", + " inflating: kenney/Default/Tiles/tile_0013.png \n", + " inflating: kenney/Default/Tiles/tile_0014.png \n", + " inflating: kenney/Default/Tiles/tile_0015.png \n", + " inflating: kenney/Default/Tiles/tile_0016.png \n", + " inflating: kenney/Default/Tiles/tile_0017.png \n", + " inflating: kenney/Default/Tiles/tile_0018.png \n", + " inflating: kenney/Default/Tiles/tile_0019.png \n", + " inflating: kenney/Default/Tiles/tile_0020.png \n", + " inflating: kenney/Default/Tiles/tile_0021.png \n", + " inflating: kenney/Default/Tiles/tile_0022.png \n", + " inflating: kenney/Default/Tiles/tile_0023.png \n", + " inflating: kenney/Default/Tiles/tile_0024.png \n", + " inflating: kenney/Default/Tiles/tile_0025.png \n", + " inflating: kenney/Default/Tiles/tile_0026.png \n", + " inflating: kenney/Default/Tiles/tile_0027.png \n", + " inflating: kenney/Default/Tiles/tile_0028.png \n", + " inflating: kenney/Default/Tiles/tile_0029.png \n", + " inflating: kenney/Default/Tiles/tile_0030.png \n", + " inflating: kenney/Default/Tiles/tile_0031.png \n", + " inflating: kenney/Default/Tiles/tile_0032.png \n", + " inflating: kenney/Default/Tiles/tile_0033.png \n", + " inflating: kenney/Default/Tiles/tile_0034.png \n", + " inflating: kenney/Default/Tiles/tile_0035.png \n", + " inflating: kenney/Default/Tiles/tile_0036.png \n", + " inflating: kenney/Default/Tiles/tile_0037.png \n", + " inflating: kenney/Default/Tiles/tile_0038.png \n", + " inflating: kenney/Default/Tiles/tile_0039.png \n", + " inflating: kenney/Default/Tiles/tile_0040.png \n", + " inflating: kenney/Default/Tiles/tile_0041.png \n", + " inflating: kenney/Default/Tiles/tile_0042.png \n", + " inflating: kenney/Default/Tiles/tile_0043.png \n", + " inflating: kenney/Default/Tiles/tile_0044.png \n", + " inflating: kenney/Default/Tiles/tile_0045.png \n", + " inflating: kenney/Default/Tiles/tile_0046.png \n", + " inflating: kenney/Default/Tiles/tile_0047.png \n", + " inflating: kenney/Default/Tiles/tile_0048.png \n", + " inflating: kenney/Default/Tiles/tile_0049.png \n", + " inflating: kenney/Default/Tiles/tile_0050.png \n", + " inflating: kenney/Default/Tiles/tile_0051.png \n", + " inflating: kenney/Default/Tiles/tile_0052.png \n", + " inflating: kenney/Default/Tiles/tile_0053.png \n", + " inflating: kenney/Default/Tiles/tile_0054.png \n", + " inflating: kenney/Default/Tiles/tile_0055.png \n", + " inflating: kenney/Default/Tiles/tile_0056.png \n", + " inflating: kenney/Default/Tiles/tile_0057.png \n", + " inflating: kenney/Default/Tiles/tile_0058.png \n", + " inflating: kenney/Default/Tiles/tile_0059.png \n", + " inflating: kenney/Default/Tiles/tile_0060.png \n", + " inflating: kenney/Default/Tiles/tile_0061.png \n", + " inflating: kenney/Default/Tiles/tile_0062.png \n", + " inflating: kenney/Default/Tiles/tile_0063.png \n", + " inflating: kenney/Default/Tiles/tile_0064.png \n", + " inflating: kenney/Default/Tiles/tile_0065.png \n", + " inflating: kenney/Default/Tiles/tile_0066.png \n", + " inflating: kenney/Default/Tiles/tile_0067.png \n", + " inflating: kenney/Default/Tiles/tile_0068.png \n", + " inflating: kenney/Default/Tiles/tile_0069.png \n", + " inflating: kenney/Default/Tiles/tile_0070.png \n", + " inflating: kenney/Default/Tiles/tile_0071.png \n", + " inflating: kenney/Default/Tiles/tile_0072.png \n", + " inflating: kenney/Default/Tiles/tile_0073.png \n", + " inflating: kenney/Default/Tiles/tile_0074.png \n", + " inflating: kenney/Default/Tiles/tile_0075.png \n", + " inflating: kenney/Default/Tiles/tile_0076.png \n", + " inflating: kenney/Default/Tiles/tile_0077.png \n", + " inflating: kenney/Default/Tiles/tile_0078.png \n", + " inflating: kenney/Default/Tiles/tile_0079.png \n", + " inflating: kenney/Default/Tiles/tile_0080.png \n", + " inflating: kenney/Default/Tiles/tile_0081.png \n", + " inflating: kenney/Default/Tiles/tile_0082.png \n", + " inflating: kenney/Default/Tiles/tile_0083.png \n", + " inflating: kenney/Default/Tiles/tile_0084.png \n", + " inflating: kenney/Default/Tiles/tile_0085.png \n", + " inflating: kenney/Default/Tiles/tile_0086.png \n", + " inflating: kenney/Default/Tiles/tile_0087.png \n", + " inflating: kenney/Default/Tiles/tile_0088.png \n", + " inflating: kenney/Default/Tiles/tile_0089.png \n", + " inflating: kenney/Default/Tiles/tile_0090.png \n", + " inflating: kenney/Default/Tiles/tile_0091.png \n", + " inflating: kenney/Default/Tiles/tile_0092.png \n", + " inflating: kenney/Default/Tiles/tile_0093.png \n", + " inflating: kenney/Default/Tiles/tile_0094.png \n", + " inflating: kenney/Default/Tiles/tile_0095.png \n", + " inflating: kenney/Default/Tiles/tile_0096.png \n", + " inflating: kenney/Default/Tiles/tile_0097.png \n", + " inflating: kenney/Default/Tiles/tile_0098.png \n", + " inflating: kenney/Default/Tiles/tile_0099.png \n", + " inflating: kenney/Default/Tiles/tile_0100.png \n", + " inflating: kenney/Default/Tiles/tile_0101.png \n", + " inflating: kenney/Default/Tiles/tile_0102.png \n", + " inflating: kenney/Default/Tiles/tile_0103.png \n", + " inflating: kenney/Default/Tiles/tile_0104.png \n", + " inflating: kenney/Default/Tiles/tile_0105.png \n", + " inflating: kenney/Default/Tiles/tile_0106.png \n", + " inflating: kenney/Default/Tiles/tile_0107.png \n", + " inflating: kenney/Default/Tiles/tile_0108.png \n", + " inflating: kenney/Default/Tiles/tile_0109.png \n", + " inflating: kenney/Default/Tiles/tile_0110.png \n", + " inflating: kenney/Default/Tiles/tile_0111.png \n", + " inflating: kenney/Default/Tiles/tile_0112.png \n", + " inflating: kenney/Default/Tiles/tile_0113.png \n", + " inflating: kenney/Default/Tiles/tile_0114.png \n", + " inflating: kenney/Default/Tiles/tile_0115.png \n", + " inflating: kenney/Default/Tiles/tile_0116.png \n", + " inflating: kenney/Default/Tiles/tile_0117.png \n", + " inflating: kenney/Default/Tiles/tile_0118.png \n", + " inflating: kenney/Default/Tiles/tile_0119.png \n", + " inflating: kenney/Default/Tiles/tile_0120.png \n", + " inflating: kenney/Default/Tiles/tile_0121.png \n", + " inflating: kenney/Default/Tiles/tile_0122.png \n", + " inflating: kenney/Default/Tiles/tile_0123.png \n", + " inflating: kenney/Default/Tiles/tile_0124.png \n", + " inflating: kenney/Default/Tiles/tile_0125.png \n", + " inflating: kenney/Default/Tiles/tile_0126.png \n", + " inflating: kenney/Default/Tiles/tile_0127.png \n", + " inflating: kenney/Default/Tiles/tile_0128.png \n", + " inflating: kenney/Default/Tiles/tile_0129.png \n", + " inflating: kenney/Default/Tiles/tile_0130.png \n", + " inflating: kenney/Default/Tiles/tile_0131.png \n", + " inflating: kenney/Default/Tiles/tile_0132.png \n", + " inflating: kenney/Default/Tiles/tile_0133.png \n", + " inflating: kenney/Default/Tiles/tile_0134.png \n", + " inflating: kenney/Default/Tiles/tile_0135.png \n", + " inflating: kenney/Default/Tilesheet.txt \n" + ] + } + ], + "source": [ + "!unzip kenney_monochromerpg.zip -d kenney" + ] + }, + { + "cell_type": "code", + "execution_count": 16, + "id": "dc9ed718-422b-4856-b2d2-33c6ad57a2c6", + "metadata": { + "tags": [] + }, + "outputs": [], + "source": [ + "# We use PIL (python image library, actually now called Pillow) to open images" + ] + }, + { + "cell_type": "code", + "execution_count": 17, + "id": "a7a29210-ee5a-41d5-baa6-54d54ea5f799", + "metadata": { + "tags": [] + }, + "outputs": [], + "source": [ + "from PIL import Image\n", + "from reportlab.pdfgen.canvas import Canvas\n", + "from reportlab.lib.pagesizes import letter, A4\n", + "from reportlab.lib.units import mm, cm\n", + "# from reportlab.pdfbase.ttfonts import TTFont, pdfmetrics\n", + "from pathlib import Path\n", + "\n", + "# size=A6\n", + "size = (75*mm, 75*mm)\n", + "\n", + "c = Canvas(\"tiles.pdf\", pagesize=size)\n", + "# Convert all the png files in the Kenney download (folder named Default from the zip above)\n", + "images = Path(\"kenney/Default/Tiles\")\n", + "for imagepath in images.glob(\"*.png\"):\n", + " image = Image.open(imagepath)\n", + " c.drawInlineImage(image, 0,0, width=75*mm,height=75*mm)\n", + " # show page saves the current page & starts a new one\n", + " c.showPage()\n", + "c.save()" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "a8633b0d-a43b-4225-9fc2-b3c4c54a86db", + "metadata": {}, + "outputs": [], + "source": [] + }, + { + "cell_type": "markdown", + "id": "23cb5859-af12-4df6-9656-4aad0ecec81d", + "metadata": {}, + "source": [ + "## Webpage to PDF with weasyprint\n", + "\n", + "* https://doc.courtbouillon.org/weasyprint/stable/first_steps.html#quickstart\n", + "* https://doc.courtbouillon.org/weasyprint/stable/first_steps.html?highlight=page%20size\n" + ] + }, + { + "cell_type": "code", + "execution_count": 18, + "id": "49cd545c-acb7-4cad-8824-1bb9be50a420", + "metadata": {}, + "outputs": [], + "source": [ + "from weasyprint import HTML, CSS" + ] + }, + { + "cell_type": "code", + "execution_count": 19, + "id": "b8cd94eb-eae9-4f7b-b847-2fbbbb141e9a", + "metadata": {}, + "outputs": [], + "source": [ + "url = \"https://www.ruetir.com/2022/03/09/bold-statement-loot-boxes-in-football-game-fifa-now-allowed/\"\n", + "css = CSS(string='@page { size: 75mm 75mm; margin: 0mm }')\n", + "HTML(url).write_pdf('bold-statement-loot-boxes.pdf', stylesheets=[css])" + ] + }, + { + "cell_type": "markdown", + "id": "3c7627fb-1e55-49a5-a2f6-be97e888b740", + "metadata": {}, + "source": [ + "so like the first part ... D=titles.pdf etc just names the PDF, when you then say D2 after the command **cat** it takes adds page 2 of titles.pdf to the eventual *output* (so **cat** starts the command and **output** then ends it + the name of the file to save, it's a little weird syntax, but super useful!!!!" + ] + }, + { + "cell_type": "code", + "execution_count": 22, + "id": "c5efc479-8109-46b0-bbe1-7214de6c055c", + "metadata": {}, + "outputs": [], + "source": [ + "!pdftk A=grid.pdf B=bold-statement-loot-boxes.pdf C=tiles.pdf D=titles.pdf cat D1 A D2 B D3 C output all.pdf" + ] + }, + { + "cell_type": "code", + "execution_count": 23, + "id": "cb2cbf7b-9e03-48de-b7c0-f6a089f8e850", + "metadata": { + "scrolled": true, + "tags": [] + }, + "outputs": [ + { + "data": { + "text/plain": [ + "PDFTK(1)\t\t General Commands Manual\t\t PDFTK(1)\n", + "\n", + "NAME\n", + " pdftk - A handy tool for manipulating PDF\n", + "\n", + "SYNOPSIS\n", + " pdftk \n", + "\t [ input_pw ]\n", + "\t [ ]\n", + "\t [ output ]\n", + "\t [ encrypt_40bit | encrypt_128bit ]\n", + "\t [ allow ]\n", + "\t [ owner_pw ]\n", + "\t [ user_pw ]\n", + "\t [ flatten ] [ need_appearances ]\n", + "\t [ compress | uncompress ]\n", + "\t [ keep_first_id | keep_final_id ] [ drop_xfa ] [ drop_xmp ]\n", + "\t [ verbose ] [ dont_ask | do_ask ]\n", + " Where:\n", + "\t may be empty, or:\n", + "\t [ cat | shuffle | burst | rotate |\n", + "\t generate_fdf | fill_form |\n", + "\t background | multibackground |\n", + "\t stamp | multistamp |\n", + "\t dump_data | dump_data_utf8 |\n", + "\t dump_data_fields | dump_data_fields_utf8 |\n", + "\t dump_data_annots |\n", + "\t update_info | update_info_utf8 |\n", + "\t attach_files | unpack_files ]\n", + "\n", + " For Complete Help: pdftk --help\n", + "\n", + "DESCRIPTION\n", + " If PDF is electronic paper, then pdftk is an electronic staple-remover,\n", + " hole-punch, binder, secret-decoder-ring, and X-Ray-glasses. Pdftk is a\n", + " simple tool for doing everyday things with PDF documents. Use it to:\n", + "\n", + " * Merge PDF Documents or Collate PDF Page Scans\n", + " * Split PDF Pages into a New Document\n", + " * Rotate PDF Documents or Pages\n", + " * Decrypt Input as Necessary (Password Required)\n", + " * Encrypt Output as Desired\n", + " * Fill PDF Forms with X/FDF Data and/or Flatten Forms\n", + " * Generate FDF Data Stencils from PDF Forms\n", + " * Apply a Background Watermark or a Foreground Stamp\n", + " * Report PDF Metrics, Bookmarks and Metadata\n", + " * Add/Update PDF Bookmarks or Metadata\n", + " * Attach Files to PDF Pages or the PDF Document\n", + " * Unpack PDF Attachments\n", + " * Burst a PDF Document into Single Pages\n", + " * Uncompress and Re-Compress Page Streams\n", + " * Repair Corrupted PDF (Where Possible)\n", + "\n", + "OPTIONS\n", + " A summary of options is included below.\n", + "\n", + " --help, -h\n", + "\t Show this summary of options.\n", + "\n", + " \n", + "\t A list of the input PDF files. If you plan to combine these PDFs\n", + "\t (without using handles) then list files in the order you want\n", + "\t them combined. Use - to pass a single PDF into pdftk via stdin.\n", + "\t Input files can be associated with handles, where a handle is\n", + "\t one or more upper-case letters:\n", + "\n", + "\t =\n", + "\n", + "\t Handles are often omitted. They are useful when specifying PDF\n", + "\t passwords or page ranges, later.\n", + "\n", + "\t For example: A=input1.pdf QT=input2.pdf M=input3.pdf\n", + "\n", + " [input_pw ]\n", + "\t Input PDF owner passwords, if necessary, are associated with\n", + "\t files by using their handles:\n", + "\n", + "\t =\n", + "\n", + "\t If handles are not given, then passwords are associated with in‐\n", + "\t put files by order.\n", + "\n", + "\t Most pdftk features require that encrypted input PDF are accom‐\n", + "\t panied by the ~owner~ password. If the input PDF has no owner\n", + "\t password, then the user password must be given, instead.\tIf the\n", + "\t input PDF has no passwords, then no password should be given.\n", + "\n", + "\t When running in do_ask mode, pdftk will prompt you for a pass‐\n", + "\t word if the supplied password is incorrect or none was given.\n", + "\n", + " [ ]\n", + "\t Available operations are: cat, shuffle, burst, rotate, gener‐\n", + "\t ate_fdf, fill_form, background, multibackground, stamp, multi‐\n", + "\t stamp, dump_data, dump_data_utf8, dump_data_fields,\n", + "\t dump_data_fields_utf8, dump_data_annots, update_info, up‐\n", + "\t date_info_utf8, attach_files, unpack_files. Some operations\n", + "\t takes additional arguments, described below.\n", + "\n", + "\t If this optional argument is omitted, then pdftk runs in 'fil‐\n", + "\t ter' mode. Filter mode takes only one PDF input and creates a\n", + "\t new PDF after applying all of the output options, like encryp‐\n", + "\t tion and compression.\n", + "\n", + "\t cat []\n", + "\t\t Assembles (catenates) pages from input PDFs to create a new\n", + "\t\t PDF. Use cat to merge PDF pages or to split PDF pages from\n", + "\t\t documents. You can also use it to rotate PDF pages. Page or‐\n", + "\t\t der in the new PDF is specified by the order of the given\n", + "\t\t page ranges. Page ranges are described like this:\n", + "\n", + "\t\t [[-[]]][]\n", + "\n", + "\t\t Where the handle identifies one of the input PDF files, and\n", + "\t\t the beginning and ending page numbers are one-based refer‐\n", + "\t\t ences to pages in the PDF file. The qualifier can be even or\n", + "\t\t odd, and the page rotation can be north, south, east, west,\n", + "\t\t left, right, or down.\n", + "\n", + "\t\t If a PDF handle is given but no pages are specified, then the\n", + "\t\t entire PDF is used. If no pages are specified for any of the\n", + "\t\t input PDFs, then the input PDFs' bookmarks are also merged\n", + "\t\t and included in the output.\n", + "\n", + "\t\t If the handle is omitted from the page range, then the pages\n", + "\t\t are taken from the first input PDF.\n", + "\n", + "\t\t The even qualifier causes pdftk to use only the even-numbered\n", + "\t\t PDF pages, so 1-6even yields pages 2, 4 and 6 in that order.\n", + "\t\t 6-1even yields pages 6, 4 and 2 in that order.\n", + "\n", + "\t\t The odd qualifier works similarly to the even.\n", + "\n", + "\t\t The page rotation setting can cause pdftk to rotate pages and\n", + "\t\t documents. Each option sets the page rotation as follows (in\n", + "\t\t degrees): north: 0, east: 90, south: 180, west: 270, left:\n", + "\t\t -90, right: +90, down: +180. left, right, and down make rela‐\n", + "\t\t tive adjustments to a page's rotation.\n", + "\n", + "\t\t If no arguments are passed to cat, then pdftk combines all\n", + "\t\t input PDFs in the order they were given to create the output.\n", + "\n", + "\t\t NOTES:\n", + "\t\t * may be less than .\n", + "\t\t * The keyword end may be used to reference the final page of\n", + "\t\t a document instead of a page number.\n", + "\t\t * Reference a single page by omitting the ending page number.\n", + "\t\t * The handle may be used alone to represent the entire PDF\n", + "\t\t document, e.g., B1-end is the same as B.\n", + "\t\t * You can reference page numbers in reverse order by prefix‐\n", + "\t\t ing them with the letter r. For example, page r1 is the last\n", + "\t\t page of the document, r2 is the next-to-last page of the doc‐\n", + "\t\t ument, and rend is the first page of the document. You can\n", + "\t\t use this prefix in ranges, too, for example r3-r1 is the last\n", + "\t\t three pages of a PDF.\n", + "\n", + "\t\t Page Range Examples without Handles:\n", + "\t\t 1-endeast - rotate entire document 90 degrees\n", + "\t\t 5 11 20 - take single pages from input PDF\n", + "\t\t 5-25oddwest - take odd pages in range, rotate 90 degrees\n", + "\t\t 6-1 - reverse pages in range from input PDF\n", + "\n", + "\t\t Page Range Examples Using Handles:\n", + "\t\t Say A=in1.pdf B=in2.pdf, then:\n", + "\t\t A1-21 - take range from in1.pdf\n", + "\t\t Bend-1odd - take all odd pages from in2.pdf in reverse order\n", + "\t\t A72 - take a single page from in1.pdf\n", + "\t\t A1-21 Beven A72 - assemble pages from both in1.pdf and\n", + "\t\t in2.pdf\n", + "\t\t Awest - rotate entire in1.pdf document 90 degrees\n", + "\t\t B - use all of in2.pdf\n", + "\t\t A2-30evenleft - take the even pages from the range, remove 90\n", + "\t\t degrees from each page's rotation\n", + "\t\t A A - catenate in1.pdf with in1.pdf\n", + "\t\t Aevenwest Aoddeast - apply rotations to even pages, odd pages\n", + "\t\t from in1.pdf\n", + "\t\t Awest Bwest Bdown - catenate rotated documents\n", + "\n", + "\t shuffle []\n", + "\t\t Collates pages from input PDFs to create a new PDF. Works\n", + "\t\t like the cat operation except that it takes one page at a\n", + "\t\t time from each page range to assemble the output PDF.\tIf one\n", + "\t\t range runs out of pages, it continues with the remaining\n", + "\t\t ranges. Ranges can use all of the features described above\n", + "\t\t for cat, like reverse page ranges, multiple ranges from a\n", + "\t\t single PDF, and page rotation. This feature was designed to\n", + "\t\t help collate PDF pages after scanning paper documents.\n", + "\n", + "\t burst Splits a single input PDF document into individual pages.\n", + "\t\t Also creates a report named doc_data.txt which is the same as\n", + "\t\t the output from dump_data. If the output section is omitted,\n", + "\t\t then PDF pages are named: pg_%04d.pdf, e.g.: pg_0001.pdf,\n", + "\t\t pg_0002.pdf, etc. To name these pages yourself, supply a\n", + "\t\t printf-styled format string via the output section. For ex‐\n", + "\t\t ample, if you want pages named: page_01.pdf, page_02.pdf,\n", + "\t\t etc., pass output page_%02d.pdf to pdftk. Encryption can be\n", + "\t\t applied to the output by appending output options such as\n", + "\t\t owner_pw, e.g.:\n", + "\n", + "\t\t pdftk in.pdf burst owner_pw foopass\n", + "\n", + "\t rotate []\n", + "\t\t Takes a single input PDF and rotates just the specified\n", + "\t\t pages. All other pages remain unchanged. The page order re‐\n", + "\t\t mains unchaged. Specify the pages to rotate using the same\n", + "\t\t notation as you would with cat, except you omit the pages\n", + "\t\t that you aren't rotating:\n", + "\n", + "\t\t [[-[]]][]\n", + "\n", + "\t\t The qualifier can be even or odd, and the page rotation can\n", + "\t\t be north, south, east, west, left, right, or down.\n", + "\n", + "\t\t Each option sets the page rotation as follows (in degrees):\n", + "\t\t north: 0, east: 90, south: 180, west: 270, left: -90, right:\n", + "\t\t +90, down: +180. left, right, and down make relative adjust‐\n", + "\t\t ments to a page's rotation.\n", + "\n", + "\t\t The given order of the pages doesn't change the page order in\n", + "\t\t the output.\n", + "\n", + "\t generate_fdf\n", + "\t\t Reads a single input PDF file and generates an FDF file suit‐\n", + "\t\t able for fill_form out of it to the given output filename or\n", + "\t\t (if no output is given) to stdout. Does not create a new\n", + "\t\t PDF.\n", + "\n", + "\t fill_form \n", + "\t\t Fills the single input PDF's form fields with the data from\n", + "\t\t an FDF file, XFDF file or stdin. Enter the data filename af‐\n", + "\t\t ter fill_form, or use - to pass the data via stdin, like so:\n", + "\n", + "\t\t pdftk form.pdf fill_form data.fdf output form.filled.pdf\n", + "\n", + "\t\t If the input FDF file includes Rich Text formatted data in\n", + "\t\t addition to plain text, then the Rich Text data is packed\n", + "\t\t into the form fields as well as the plain text. Pdftk also\n", + "\t\t sets a flag that cues Reader/Acrobat to generate new field\n", + "\t\t appearances based on the Rich Text data. So when the user\n", + "\t\t opens the PDF, the viewer will create the Rich Text appear‐\n", + "\t\t ance on the spot. If the user's PDF viewer does not support\n", + "\t\t Rich Text, then the user will see the plain text data in‐\n", + "\t\t stead. If you flatten this form before Acrobat has a chance\n", + "\t\t to create (and save) new field appearances, then the plain\n", + "\t\t text field data is what you'll see.\n", + "\n", + "\t\t Also see the flatten and need_appearances options.\n", + "\n", + "\t background \n", + "\t\t Applies a PDF watermark to the background of a single input\n", + "\t\t PDF. Pass the background PDF's filename after background\n", + "\t\t like so:\n", + "\n", + "\t\t pdftk in.pdf background back.pdf output out.pdf\n", + "\n", + "\t\t Pdftk uses only the first page from the background PDF and\n", + "\t\t applies it to every page of the input PDF. This page is\n", + "\t\t scaled and rotated as needed to fit the input page. You can\n", + "\t\t use - to pass a background PDF into pdftk via stdin.\n", + "\n", + "\t\t If the input PDF does not have a transparent background (such\n", + "\t\t as a PDF created from page scans) then the resulting back‐\n", + "\t\t ground won't be visible -- use the stamp operation instead.\n", + "\n", + "\t multibackground \n", + "\t\t Same as the background operation, but applies each page of\n", + "\t\t the background PDF to the corresponding page of the input\n", + "\t\t PDF. If the input PDF has more pages than the stamp PDF,\n", + "\t\t then the final stamp page is repeated across these remaining\n", + "\t\t pages in the input PDF.\n", + "\n", + "\t stamp \n", + "\t\t This behaves just like the background operation except it\n", + "\t\t overlays the stamp PDF page on top of the input PDF docu‐\n", + "\t\t ment's pages.\tThis works best if the stamp PDF page has a\n", + "\t\t transparent background.\n", + "\n", + "\t multistamp \n", + "\t\t Same as the stamp operation, but applies each page of the\n", + "\t\t background PDF to the corresponding page of the input PDF.\n", + "\t\t If the input PDF has more pages than the stamp PDF, then the\n", + "\t\t final stamp page is repeated across these remaining pages in\n", + "\t\t the input PDF.\n", + "\n", + "\t dump_data\n", + "\t\t Reads a single input PDF file and reports its metadata, book‐\n", + "\t\t marks (a/k/a outlines), page metrics (media, rotation and la‐\n", + "\t\t bels), data embedded by STAMPtk (see STAMPtk's embed option)\n", + "\t\t and other data to the given output filename or (if no output\n", + "\t\t is given) to stdout. Non-ASCII characters are encoded as XML\n", + "\t\t numerical entities. Does not create a new PDF.\n", + "\n", + "\t dump_data_utf8\n", + "\t\t Same as dump_data excepct that the output is encoded as\n", + "\t\t UTF-8.\n", + "\n", + "\t dump_data_fields\n", + "\t\t Reads a single input PDF file and reports form field statis‐\n", + "\t\t tics to the given output filename or (if no output is given)\n", + "\t\t to stdout. Non-ASCII characters are encoded as XML numerical\n", + "\t\t entities. Does not create a new PDF.\n", + "\n", + "\t dump_data_fields_utf8\n", + "\t\t Same as dump_data_fields excepct that the output is encoded\n", + "\t\t as UTF-8.\n", + "\n", + "\t dump_data_annots\n", + "\t\t This operation currently reports only link annotations.\n", + "\t\t Reads a single input PDF file and reports annotation informa‐\n", + "\t\t tion to the given output filename or (if no output is given)\n", + "\t\t to stdout. Non-ASCII characters are encoded as XML numerical\n", + "\t\t entities. Does not create a new PDF.\n", + "\n", + "\t update_info \n", + "\t\t Changes the bookmarks and metadata in a single PDF's Info\n", + "\t\t dictionary to match the input data file. The input data file\n", + "\t\t uses the same syntax as the output from dump_data. Non-ASCII\n", + "\t\t characters should be encoded as XML numerical entities.\n", + "\n", + "\t\t This operation does not change the metadata stored in the\n", + "\t\t PDF's XMP stream, if it has one. (For this reason you should\n", + "\t\t include a ModDate entry in your updated info with a current\n", + "\t\t date/timestamp, format: D:YYYYMMDDHHmmSS, e.g. D:201307241346\n", + "\t\t -- omitted data after YYYY revert to default values.)\n", + "\n", + "\t\t For example:\n", + "\n", + "\t\t pdftk in.pdf update_info in.info output out.pdf\n", + "\n", + "\t update_info_utf8 \n", + "\t\t Same as update_info except that the input is encoded as\n", + "\t\t UTF-8.\n", + "\n", + "\t attach_files [to_page ]\n", + "\t\t Packs arbitrary files into a PDF using PDF's file attachment\n", + "\t\t features. More than one attachment may be listed after at‐\n", + "\t\t tach_files. Attachments are added at the document level un‐\n", + "\t\t less the optional to_page option is given, in which case the\n", + "\t\t files are attached to the given page number (the first page\n", + "\t\t is 1, the final page is end). For example:\n", + "\n", + "\t\t pdftk in.pdf attach_files table1.html table2.html to_page 6\n", + "\t\t output out.pdf\n", + "\n", + "\t unpack_files\n", + "\t\t Copies all of the attachments from the input PDF into the\n", + "\t\t current folder or to an output directory given after output.\n", + "\t\t For example:\n", + "\n", + "\t\t pdftk report.pdf unpack_files output ~/atts/\n", + "\n", + "\t\t or, interactively:\n", + "\n", + "\t\t pdftk report.pdf unpack_files output PROMPT\n", + "\n", + " [output ]\n", + "\t The output PDF filename may not be set to the name of an input\n", + "\t filename. Use - to output to stdout. When using the dump_data\n", + "\t operation, use output to set the name of the output data file.\n", + "\t When using the unpack_files operation, use output to set the\n", + "\t name of an output directory. When using the burst operation,\n", + "\t you can use output to control the resulting PDF page filenames\n", + "\t (described above).\n", + "\n", + " [encrypt_40bit | encrypt_128bit]\n", + "\t If an output PDF user or owner password is given, output PDF en‐\n", + "\t cryption strength defaults to 128 bits. This can be overridden\n", + "\t by specifying encrypt_40bit.\n", + "\n", + " [allow ]\n", + "\t Permissions are applied to the output PDF only if an encryption\n", + "\t strength is specified or an owner or user password is given. If\n", + "\t permissions are not specified, they default to 'none,' which\n", + "\t means all of the following features are disabled.\n", + "\n", + "\t The permissions section may include one or more of the following\n", + "\t features:\n", + "\n", + "\t Printing\n", + "\t\t Top Quality Printing\n", + "\n", + "\t DegradedPrinting\n", + "\t\t Lower Quality Printing\n", + "\n", + "\t ModifyContents\n", + "\t\t Also allows Assembly\n", + "\n", + "\t Assembly\n", + "\n", + "\t CopyContents\n", + "\t\t Also allows ScreenReaders\n", + "\n", + "\t ScreenReaders\n", + "\n", + "\t ModifyAnnotations\n", + "\t\t Also allows FillIn\n", + "\n", + "\t FillIn\n", + "\n", + "\t AllFeatures\n", + "\t\t Allows the user to perform all of the above, and top\n", + "\t\t quality printing.\n", + "\n", + " [owner_pw ]\n", + "\n", + " [user_pw ]\n", + "\t If an encryption strength is given but no passwords are sup‐\n", + "\t plied, then the owner and user passwords remain empty, which\n", + "\t means that the resulting PDF may be opened and its security pa‐\n", + "\t rameters altered by anybody.\n", + "\n", + " [compress | uncompress]\n", + "\t These are only useful when you want to edit PDF code in a text\n", + "\t editor like vim or emacs. Remove PDF page stream compression by\n", + "\t applying the uncompress filter. Use the compress filter to re‐\n", + "\t store compression.\n", + "\n", + " [flatten]\n", + "\t Use this option to merge an input PDF's interactive form fields\n", + "\t (and their data) with the PDF's pages. Only one input PDF may be\n", + "\t given. Sometimes used with the fill_form operation.\n", + "\n", + " [need_appearances]\n", + "\t Sets a flag that cues Reader/Acrobat to generate new field ap‐\n", + "\t pearances based on the form field values. Use this when filling\n", + "\t a form with non-ASCII text to ensure the best presentation in\n", + "\t Adobe Reader or Acrobat.\tIt won't work when combined with the\n", + "\t flatten option.\n", + "\n", + " [keep_first_id | keep_final_id]\n", + "\t When combining pages from multiple PDFs, use one of these op‐\n", + "\t tions to copy the document ID from either the first or final in‐\n", + "\t put document into the new output PDF. Otherwise pdftk creates a\n", + "\t new document ID for the output PDF. When no operation is given,\n", + "\t pdftk always uses the ID from the (single) input PDF.\n", + "\n", + " [drop_xfa]\n", + "\t If your input PDF is a form created using Acrobat 7 or Adobe De‐\n", + "\t signer, then it probably has XFA data. Filling such a form us‐\n", + "\t ing pdftk yields a PDF with data that fails to display in Acro‐\n", + "\t bat 7 (and 6?). The workaround solution is to remove the form's\n", + "\t XFA data, either before you fill the form using pdftk or at the\n", + "\t time you fill the form. Using this option causes pdftk to omit\n", + "\t the XFA data from the output PDF form.\n", + "\n", + "\t This option is only useful when running pdftk on a single input\n", + "\t PDF. When assembling a PDF from multiple inputs using pdftk,\n", + "\t any XFA data in the input is automatically omitted.\n", + "\n", + " [drop_xmp]\n", + "\t Many PDFs store document metadata using both an Info dictionary\n", + "\t (old school) and an XMP stream (new school). Pdftk's up‐\n", + "\t date_info operation can update the Info dictionary, but not the\n", + "\t XMP stream. The proper remedy for this is to include a ModDate\n", + "\t entry in your updated info with a current date/timestamp. The\n", + "\t date/timestamp format is: D:YYYYMMDDHHmmSS, e.g. D:201307241346\n", + "\t -- omitted data after YYYY revert to default values. This newer\n", + "\t ModDate should cue PDF viewers that the Info metadata is more\n", + "\t current than the XMP data.\n", + "\n", + "\t Alternatively, you might prefer to remove the XMP stream from\n", + "\t the PDF altogether -- that's what this option does. Note that\n", + "\t objects inside the PDF might have their own, separate XMP meta‐\n", + "\t data streams, and that drop_xmp does not remove those. It only\n", + "\t removes the PDF's document-level XMP stream.\n", + "\n", + " [verbose]\n", + "\t By default, pdftk runs quietly. Append verbose to the end and it\n", + "\t will speak up.\n", + "\n", + " [dont_ask | do_ask]\n", + "\t Depending on the compile-time settings (see ASK_ABOUT_WARNINGS),\n", + "\t pdftk might prompt you for further input when it encounters a\n", + "\t problem, such as a bad password. Override this default behavior\n", + "\t by adding dont_ask (so pdftk won't ask you what to do) or do_ask\n", + "\t (so pdftk will ask you what to do).\n", + "\n", + "\t When running in dont_ask mode, pdftk will over-write files with\n", + "\t its output without notice.\n", + "\n", + "EXAMPLES\n", + " Collate scanned pages\n", + "\t pdftk A=even.pdf B=odd.pdf shuffle A B output collated.pdf\n", + "\t or if odd.pdf is in reverse order:\n", + "\t pdftk A=even.pdf B=odd.pdf shuffle A Bend-1 output collated.pdf\n", + "\n", + " Decrypt a PDF\n", + "\t pdftk secured.pdf input_pw foopass output unsecured.pdf\n", + "\n", + " Encrypt a PDF using 128-bit strength (the default), withhold all per‐\n", + " missions (the default)\n", + "\t pdftk 1.pdf output 1.128.pdf owner_pw foopass\n", + "\n", + " Same as above, except password 'baz' must also be used to open output\n", + " PDF\n", + "\t pdftk 1.pdf output 1.128.pdf owner_pw foo user_pw baz\n", + "\n", + " Same as above, except printing is allowed (once the PDF is open)\n", + "\t pdftk 1.pdf output 1.128.pdf owner_pw foo user_pw baz allow printing\n", + "\n", + " Join in1.pdf and in2.pdf into a new PDF, out1.pdf\n", + "\t pdftk in1.pdf in2.pdf cat output out1.pdf\n", + "\t or (using handles):\n", + "\t pdftk A=in1.pdf B=in2.pdf cat A B output out1.pdf\n", + "\t or (using wildcards):\n", + "\t pdftk *.pdf cat output combined.pdf\n", + "\n", + " Remove page 13 from in1.pdf to create out1.pdf\n", + "\t pdftk in.pdf cat 1-12 14-end output out1.pdf\n", + "\t or:\n", + "\t pdftk A=in1.pdf cat A1-12 A14-end output out1.pdf\n", + "\n", + " Apply 40-bit encryption to output, revoking all permissions (the de‐\n", + " fault). Set the owner PW to 'foopass'.\n", + "\t pdftk 1.pdf 2.pdf cat output 3.pdf encrypt_40bit owner_pw foopass\n", + "\n", + " Join two files, one of which requires the password 'foopass'. The out‐\n", + " put is not encrypted.\n", + "\t pdftk A=secured.pdf 2.pdf input_pw A=foopass cat output 3.pdf\n", + "\n", + " Uncompress PDF page streams for editing the PDF in a text editor (e.g.,\n", + " vim, emacs)\n", + "\t pdftk doc.pdf output doc.unc.pdf uncompress\n", + "\n", + " Repair a PDF's corrupted XREF table and stream lengths, if possible\n", + "\t pdftk broken.pdf output fixed.pdf\n", + "\n", + " Burst a single PDF document into pages and dump its data to\n", + " doc_data.txt\n", + "\t pdftk in.pdf burst\n", + "\n", + " Burst a single PDF document into encrypted pages. Allow low-quality\n", + " printing\n", + "\t pdftk in.pdf burst owner_pw foopass allow DegradedPrinting\n", + "\n", + " Write a report on PDF document metadata and bookmarks to report.txt\n", + "\t pdftk in.pdf dump_data output report.txt\n", + "\n", + " Rotate the first PDF page to 90 degrees clockwise\n", + "\t pdftk in.pdf cat 1east 2-end output out.pdf\n", + "\n", + " Rotate an entire PDF document to 180 degrees\n", + "\t pdftk in.pdf cat 1-endsouth output out.pdf\n", + "\n", + "NOTES\n", + " This is a port of pdftk to java. See\n", + " https://gitlab.com/marcvinyals/pdftk\n", + " The original program can be found at www.pdftk.com\n", + "\n", + "AUTHOR\n", + " Original author of pdftk is Sid Steward (sid.steward at pdflabs dot\n", + " com).\n", + "\n", + "\t\t\t\t May 11, 2018\t\t\t PDFTK(1)\n" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "man pdftk" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "b688e8f9-c1be-4982-8323-6fe7cfe10498", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/projects/postit-gen/proto-post-it/.ipynb_checkpoints/blank-checkpoint.pdf b/projects/postit-gen/proto-post-it/.ipynb_checkpoints/blank-checkpoint.pdf new file mode 100644 index 0000000..a0a9a29 --- /dev/null +++ b/projects/postit-gen/proto-post-it/.ipynb_checkpoints/blank-checkpoint.pdf @@ -0,0 +1,239 @@ +%PDF-1.3 +% ReportLab Generated PDF document http://www.reportlab.com +1 0 obj +<< +/F1 2 0 R +>> +endobj +2 0 obj +<< +/BaseFont /Helvetica /Encoding /WinAnsiEncoding /Name /F1 /Subtype /Type1 /Type /Font +>> +endobj +3 0 obj +<< +/Contents 16 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +4 0 obj +<< +/Contents 17 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +5 0 obj +<< +/Contents 18 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +6 0 obj +<< +/Contents 19 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +7 0 obj +<< +/Contents 20 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +8 0 obj +<< +/Contents 21 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +9 0 obj +<< +/Contents 22 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +10 0 obj +<< +/Contents 23 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +11 0 obj +<< +/Contents 24 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +12 0 obj +<< +/Contents 25 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +13 0 obj +<< +/PageMode /UseNone /Pages 15 0 R /Type /Catalog +>> +endobj +14 0 obj +<< +/Author (anonymous) /CreationDate (D:20220311111941+00'00') /Creator (ReportLab PDF Library - www.reportlab.com) /Keywords () /ModDate (D:20220311111941+00'00') /Producer (ReportLab PDF Library - www.reportlab.com) + /Subject (unspecified) /Title (untitled) /Trapped /False +>> +endobj +15 0 obj +<< +/Count 10 /Kids [ 3 0 R 4 0 R 5 0 R 6 0 R 7 0 R 8 0 R 9 0 R 10 0 R 11 0 R 12 0 R ] /Type /Pages +>> +endobj +16 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +17 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +18 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +19 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +20 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +21 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +22 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +23 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +24 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +25 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +xref +0 26 +0000000000 65535 f +0000000073 00000 n +0000000104 00000 n +0000000211 00000 n +0000000416 00000 n +0000000621 00000 n +0000000826 00000 n +0000001031 00000 n +0000001236 00000 n +0000001441 00000 n +0000001646 00000 n +0000001852 00000 n +0000002058 00000 n +0000002264 00000 n +0000002334 00000 n +0000002631 00000 n +0000002749 00000 n +0000002898 00000 n +0000003047 00000 n +0000003196 00000 n +0000003345 00000 n +0000003494 00000 n +0000003643 00000 n +0000003792 00000 n +0000003941 00000 n +0000004090 00000 n +trailer +<< +/ID +[] +% ReportLab generated PDF document -- digest (http://www.reportlab.com) + +/Info 14 0 R +/Root 13 0 R +/Size 26 +>> +startxref +4239 +%%EOF diff --git a/projects/postit-gen/proto-post-it/.ipynb_checkpoints/grid-checkpoint.pdf b/projects/postit-gen/proto-post-it/.ipynb_checkpoints/grid-checkpoint.pdf new file mode 100644 index 0000000..bc22753 --- /dev/null +++ b/projects/postit-gen/proto-post-it/.ipynb_checkpoints/grid-checkpoint.pdf @@ -0,0 +1,68 @@ +%PDF-1.3 +% ReportLab Generated PDF document http://www.reportlab.com +1 0 obj +<< +/F1 2 0 R +>> +endobj +2 0 obj +<< +/BaseFont /Helvetica /Encoding /WinAnsiEncoding /Name /F1 /Subtype /Type1 /Type /Font +>> +endobj +3 0 obj +<< +/Contents 7 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 6 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +4 0 obj +<< +/PageMode /UseNone /Pages 6 0 R /Type /Catalog +>> +endobj +5 0 obj +<< +/Author (anonymous) /CreationDate (D:20220311111931+00'00') /Creator (ReportLab PDF Library - www.reportlab.com) /Keywords () /ModDate (D:20220311111931+00'00') /Producer (ReportLab PDF Library - www.reportlab.com) + /Subject (unspecified) /Title (untitled) /Trapped /False +>> +endobj +6 0 obj +<< +/Count 1 /Kids [ 3 0 R ] /Type /Pages +>> +endobj +7 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 266 +>> +stream +Gar'd3t;iB>\:;V``?WQ`'PSntLdie0k:#)M-$.O4l1$)]YB7>_8Z)/P;Rt5%UW[uY9`Oha7JEq0_Kj/Y.mcLD9;7>>KFlL.\9De$,(tJ9j&EDXM%B`OZuB'j'-Tc.41D)m,7>+6_*c6AEJ0-oimc$J-\R:T\endstream +endobj +xref +0 8 +0000000000 65535 f +0000000073 00000 n +0000000104 00000 n +0000000211 00000 n +0000000414 00000 n +0000000482 00000 n +0000000778 00000 n +0000000837 00000 n +trailer +<< +/ID +[<32832b520cbeb2da7825637602ebb91e><32832b520cbeb2da7825637602ebb91e>] +% ReportLab generated PDF document -- digest (http://www.reportlab.com) + +/Info 5 0 R +/Root 4 0 R +/Size 8 +>> +startxref +1193 +%%EOF diff --git a/projects/postit-gen/proto-post-it/.ipynb_checkpoints/titles-checkpoint.pdf b/projects/postit-gen/proto-post-it/.ipynb_checkpoints/titles-checkpoint.pdf new file mode 100644 index 0000000..fdd0dc3 Binary files /dev/null and b/projects/postit-gen/proto-post-it/.ipynb_checkpoints/titles-checkpoint.pdf differ diff --git a/projects/postit-gen/proto-post-it/PythonPDFPostits.ipynb b/projects/postit-gen/proto-post-it/PythonPDFPostits.ipynb new file mode 100644 index 0000000..737a7ee --- /dev/null +++ b/projects/postit-gen/proto-post-it/PythonPDFPostits.ipynb @@ -0,0 +1,1492 @@ +{ + "cells": [ + { + "cell_type": "markdown", + "id": "4014e69f-fb17-445e-bf02-a5e226979574", + "metadata": { + "tags": [] + }, + "source": [ + "## Scripted PDF generation with reportlab\n", + "\n", + "Reportlab is a python library that can generate PDFs. It provides a \"canvas\" object that gives very precise controls to create/draw on pages of a PDF. There are lots of drawing commands that you can use see [the docs in the RL userguide](\n", + "https://www.reportlab.com/docs/reportlab-userguide.pdf#page=11)." + ] + }, + { + "cell_type": "markdown", + "id": "e6ab8442-b778-41d1-ac9d-49c26e799345", + "metadata": { + "tags": [] + }, + "source": [ + "### Draw a grid\n" + ] + }, + { + "cell_type": "code", + "execution_count": 1, + "id": "1366adcc-fbb7-4bc6-80f7-86dda20dbccf", + "metadata": {}, + "outputs": [], + "source": [ + "from reportlab.pdfgen.canvas import Canvas\n", + "from reportlab.lib.pagesizes import A4, A0\n", + "from reportlab.lib.units import inch, cm, mm\n", + "import sys\n", + "from reportlab.pdfbase.ttfonts import TTFont, pdfmetrics" + ] + }, + { + "cell_type": "code", + "execution_count": 2, + "id": "9f72bd73-c2e2-4b49-8f48-378fed3fa11a", + "metadata": {}, + "outputs": [], + "source": [ + "# Normally you can use a built in page size like A0, A4\n", + "# c = Canvas(\"grid.pdf\", pagesize=A0, bottomup=0)" + ] + }, + { + "cell_type": "code", + "execution_count": 3, + "id": "8649fc44-18e8-4869-8c53-aec397b3a5d4", + "metadata": {}, + "outputs": [], + "source": [ + "# But we make a custom size with pagew & pageh\n", + "# nb the bottomup option this makes 0,0 the top left of page as you might expect (but it isn't the default)" + ] + }, + { + "cell_type": "code", + "execution_count": 4, + "id": "21d33c4e-93c3-4ba3-9019-5abf9d334816", + "metadata": {}, + "outputs": [], + "source": [ + "pagew, pageh = 75*mm, 75*mm\n", + "c = Canvas(\"grid.pdf\", pagesize=(pagew, pageh), bottomup=0)" + ] + }, + { + "cell_type": "markdown", + "id": "53cfea16-a6f7-4f3c-b58c-9df93808390e", + "metadata": {}, + "source": [ + "and don't forget about the question mark to get docs" + ] + }, + { + "cell_type": "code", + "execution_count": 5, + "id": "0551a95c-6739-4986-8714-e82a48bc8a8d", + "metadata": {}, + "outputs": [ + { + "data": { + "text/plain": [ + "\u001b[0;31mSignature:\u001b[0m \u001b[0mc\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mline\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mx1\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0my1\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mx2\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0my2\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n", + "\u001b[0;31mDocstring:\u001b[0m\n", + "draw a line segment from (x1,y1) to (x2,y2) (with color, thickness and\n", + "other attributes determined by the current graphics state).\n", + "\u001b[0;31mFile:\u001b[0m /usr/local/lib/python3.7/dist-packages/reportlab/pdfgen/canvas.py\n", + "\u001b[0;31mType:\u001b[0m method\n" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "c.line?" + ] + }, + { + "cell_type": "code", + "execution_count": 6, + "id": "f24545dc-cb32-4097-a87d-44a323997d83", + "metadata": {}, + "outputs": [ + { + "data": { + "text/plain": [ + "\u001b[0;31mSignature:\u001b[0m \u001b[0mc\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0msetLineWidth\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidth\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n", + "\u001b[0;31mDocstring:\u001b[0m \n", + "\u001b[0;31mFile:\u001b[0m /usr/local/lib/python3.7/dist-packages/reportlab/pdfgen/canvas.py\n", + "\u001b[0;31mType:\u001b[0m method\n" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "c.setLineWidth?" + ] + }, + { + "cell_type": "code", + "execution_count": 7, + "id": "2d84fe70-de02-4dcd-9209-edb2c72c5218", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "(2383.937007874016, 3370.393700787402)\n", + "21.259842519685044\n" + ] + } + ], + "source": [ + "colw = pagew/10\n", + "print (A0)\n", + "print (colw)" + ] + }, + { + "cell_type": "code", + "execution_count": 8, + "id": "f57e7e6a-c44c-4c78-9854-e1e74c6441ae", + "metadata": {}, + "outputs": [], + "source": [ + "for x in range(10):\n", + " c.line(x*colw, 0, x*colw, pageh)" + ] + }, + { + "cell_type": "code", + "execution_count": 9, + "id": "e04e1107-5eaa-4f25-9da9-c166463efd3c", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "21.259842519685044\n" + ] + } + ], + "source": [ + "colh = pageh/10\n", + "print (colh)\n", + "for y in range(10):\n", + " c.line(0, y*colh, pagew, y*colh)" + ] + }, + { + "cell_type": "code", + "execution_count": 10, + "id": "ca2afe5f-bbbc-4308-993a-e8d93d85ad17", + "metadata": {}, + "outputs": [], + "source": [ + "c.showPage() # always shave a page to finish it...\n", + "c.save() # finally writes the PDF" + ] + }, + { + "cell_type": "markdown", + "id": "ce4e9a55-5ba9-4728-9013-af280369fe1a", + "metadata": {}, + "source": [ + "### Make a PDF with blank pages" + ] + }, + { + "cell_type": "code", + "execution_count": 11, + "id": "4d27924b-9527-44e0-b74f-65427b7e6751", + "metadata": {}, + "outputs": [], + "source": [ + "from reportlab.pdfgen.canvas import Canvas\n", + "from reportlab.lib.pagesizes import letter, A4\n", + "from reportlab.lib.units import mm, cm\n", + "# from reportlab.pdfbase.ttfonts import TTFont, pdfmetrics\n", + "\n", + "size = (75*mm, 75*mm)\n", + "pages=10\n", + "c = Canvas(\"blank.pdf\", pagesize=size)\n", + "for i in range(pages):\n", + " # c.setPageSize(size)\n", + " c.showPage()\n", + "c.save()" + ] + }, + { + "cell_type": "markdown", + "id": "17d5bbe7-c955-4a97-8922-cd97be8733de", + "metadata": {}, + "source": [ + "## Make simple text titles\n", + "\n", + "Report lab's canvas doesn't do word wrapping / line breaking, but if you are OK with manually placing type you can use it." + ] + }, + { + "cell_type": "code", + "execution_count": 12, + "id": "fd519538-dc94-4845-a25f-8fffa93828ec", + "metadata": {}, + "outputs": [], + "source": [ + "from reportlab.pdfbase.ttfonts import TTFont" + ] + }, + { + "cell_type": "code", + "execution_count": 15, + "id": "04b984ee-8fe7-46f4-8b67-d2f199b50033", + "metadata": {}, + "outputs": [], + "source": [ + "from reportlab.pdfgen.canvas import Canvas\n", + "from reportlab.lib.pagesizes import letter, A4\n", + "from reportlab.lib.units import mm, cm\n", + "# from reportlab.pdfbase.ttfonts import TTFont, pdfmetrics\n", + "\n", + "titles = (\"One\", \"Two\", \"Three\", \"Four\")\n", + "titles = [\n", + " \n", + " EA cleared of $11 million loot box fine in The Netherlands\n", + "\n", + "\n", + "\n", + "\n", + "size = (75*mm, 75*mm)\n", + "pages=10\n", + "\n", + "pdfmetrics.registerFont(TTFont('SI17', 'SpecialIssue17-Regular.ttf'))\n", + "\n", + "c = Canvas(\"titles.pdf\", pagesize=size, bottomup=0)\n", + "for title in titles:\n", + " c.setFont('SI17', 32)\n", + " c.drawString(5*mm, 15*mm, title.upper()) # nb the 2nd number is the distance (from top) to the baseline of the text\n", + " # c.setPageSize(size)\n", + " c.showPage()\n", + "c.save()" + ] + }, + { + "cell_type": "markdown", + "id": "b49c0bb2-b93b-4803-8ee8-a0335a1b3e04", + "metadata": { + "tags": [] + }, + "source": [ + "### Convert a folder of images to PDF\n", + "\n", + "Let's download some (public domain) game tiles from Kenney.nl" + ] + }, + { + "cell_type": "code", + "execution_count": 14, + "id": "4fdf8977-3dd8-4dc7-a360-92cd0a0c14e5", + "metadata": { + "tags": [] + }, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "--2022-03-10 13:19:25-- https://www.kenney.nl/content/3-assets/14-monochrome-rpg/kenney_monochromerpg.zip\n", + "Resolving www.kenney.nl (www.kenney.nl)... 149.210.216.123\n", + "Connecting to www.kenney.nl (www.kenney.nl)|149.210.216.123|:443... connected.\n", + "HTTP request sent, awaiting response... 200 OK\n", + "Length: 387381 (378K) [application/zip]\n", + "Saving to: ‘kenney_monochromerpg.zip’\n", + "\n", + "kenney_monochromerp 100%[===================>] 378.30K --.-KB/s in 0.03s \n", + "\n", + "2022-03-10 13:19:25 (14.1 MB/s) - ‘kenney_monochromerpg.zip’ saved [387381/387381]\n", + "\n" + ] + } + ], + "source": [ + "!wget https://www.kenney.nl/content/3-assets/14-monochrome-rpg/kenney_monochromerpg.zip" + ] + }, + { + "cell_type": "code", + "execution_count": 15, + "id": "7c824ff2-ab03-43e8-9472-9a01b3172d9d", + "metadata": { + "scrolled": true, + "tags": [] + }, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "Archive: kenney_monochromerpg.zip\n", + " creating: kenney/Dot Matrix/\n", + " creating: kenney/Dot Matrix/Sprites/\n", + " inflating: kenney/Dot Matrix/Sprites/character0.png \n", + " inflating: kenney/Dot Matrix/Sprites/character1.png \n", + " inflating: kenney/Dot Matrix/Sprites/character2.png \n", + " inflating: kenney/Dot Matrix/Sprites/character3.png \n", + " inflating: kenney/Dot Matrix/Sprites/enemy0.png \n", + " inflating: kenney/Dot Matrix/Sprites/enemy1.png \n", + " inflating: kenney/Dot Matrix/Sprites/enemy2.png \n", + " inflating: kenney/Dot Matrix/Sprites/heart0.png \n", + " inflating: kenney/Dot Matrix/Sprites/heart1.png \n", + " inflating: kenney/Dot Matrix/Sprites/heart2.png \n", + " inflating: kenney/Dot Matrix/Sprites/item0.png \n", + " creating: kenney/Dot Matrix/Tilemap/\n", + " inflating: kenney/Dot Matrix/Tilemap/tilemap.png \n", + " inflating: kenney/Dot Matrix/Tilemap/tilemap_packed.png \n", + " creating: kenney/Dot Matrix/Tiles/\n", + " inflating: kenney/Dot Matrix/Tiles/tile_0000.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0001.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0002.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0003.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0004.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0005.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0006.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0007.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0008.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0009.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0010.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0011.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0012.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0013.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0014.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0015.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0016.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0017.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0018.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0019.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0020.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0021.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0022.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0023.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0024.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0025.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0026.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0027.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0028.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0029.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0030.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0031.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0032.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0033.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0034.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0035.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0036.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0037.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0038.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0039.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0040.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0041.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0042.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0043.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0044.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0045.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0046.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0047.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0048.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0049.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0050.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0051.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0052.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0053.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0054.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0055.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0056.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0057.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0058.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0059.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0060.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0061.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0062.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0063.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0064.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0065.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0066.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0067.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0068.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0069.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0070.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0071.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0072.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0073.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0074.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0075.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0076.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0077.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0078.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0079.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0080.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0081.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0082.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0083.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0084.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0085.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0086.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0087.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0088.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0089.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0090.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0091.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0092.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0093.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0094.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0095.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0096.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0097.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0098.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0099.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0100.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0101.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0102.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0103.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0104.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0105.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0106.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0107.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0108.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0109.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0110.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0111.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0112.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0113.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0114.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0115.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0116.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0117.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0118.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0119.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0120.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0121.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0122.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0123.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0124.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0125.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0126.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0127.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0128.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0129.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0130.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0131.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0132.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0133.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0134.png \n", + " inflating: kenney/Dot Matrix/Tiles/tile_0135.png \n", + " inflating: kenney/Dot Matrix/Tilesheet.txt \n", + " creating: kenney/Monochrome/\n", + " creating: kenney/Monochrome/Tilemap/\n", + " inflating: kenney/Monochrome/Tilemap/tilemap.png \n", + " inflating: kenney/Monochrome/Tilemap/tilemap_packed.png \n", + " creating: kenney/Monochrome/Tiles/\n", + " inflating: kenney/Monochrome/Tiles/tile_0000.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0001.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0002.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0003.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0004.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0005.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0006.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0007.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0008.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0009.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0010.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0011.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0012.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0013.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0014.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0015.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0016.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0017.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0018.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0019.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0020.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0021.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0022.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0023.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0024.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0025.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0026.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0027.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0028.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0029.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0030.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0031.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0032.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0033.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0034.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0035.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0036.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0037.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0038.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0039.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0040.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0041.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0042.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0043.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0044.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0045.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0046.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0047.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0048.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0049.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0050.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0051.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0052.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0053.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0054.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0055.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0056.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0057.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0058.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0059.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0060.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0061.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0062.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0063.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0064.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0065.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0066.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0067.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0068.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0069.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0070.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0071.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0072.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0073.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0074.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0075.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0076.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0077.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0078.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0079.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0080.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0081.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0082.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0083.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0084.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0085.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0086.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0087.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0088.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0089.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0090.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0091.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0092.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0093.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0094.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0095.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0096.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0097.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0098.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0099.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0100.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0101.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0102.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0103.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0104.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0105.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0106.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0107.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0108.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0109.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0110.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0111.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0112.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0113.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0114.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0115.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0116.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0117.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0118.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0119.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0120.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0121.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0122.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0123.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0124.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0125.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0126.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0127.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0128.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0129.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0130.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0131.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0132.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0133.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0134.png \n", + " inflating: kenney/Monochrome/Tiles/tile_0135.png \n", + " inflating: kenney/Monochrome/Tilesheet.txt \n", + " inflating: kenney/Instructions.url \n", + " inflating: kenney/License.txt \n", + " inflating: kenney/Preview.png \n", + " inflating: kenney/Sample.png \n", + " inflating: kenney/Visit Kenney.url \n", + " inflating: kenney/Visit Patreon.url \n", + " creating: kenney/Default/\n", + " creating: kenney/Default/Tilemap/\n", + " inflating: kenney/Default/Tilemap/tilemap.png \n", + " inflating: kenney/Default/Tilemap/tilemap_packed.png \n", + " creating: kenney/Default/Tiles/\n", + " inflating: kenney/Default/Tiles/tile_0000.png \n", + " inflating: kenney/Default/Tiles/tile_0001.png \n", + " inflating: kenney/Default/Tiles/tile_0002.png \n", + " inflating: kenney/Default/Tiles/tile_0003.png \n", + " inflating: kenney/Default/Tiles/tile_0004.png \n", + " inflating: kenney/Default/Tiles/tile_0005.png \n", + " inflating: kenney/Default/Tiles/tile_0006.png \n", + " inflating: kenney/Default/Tiles/tile_0007.png \n", + " inflating: kenney/Default/Tiles/tile_0008.png \n", + " inflating: kenney/Default/Tiles/tile_0009.png \n", + " inflating: kenney/Default/Tiles/tile_0010.png \n", + " inflating: kenney/Default/Tiles/tile_0011.png \n", + " inflating: kenney/Default/Tiles/tile_0012.png \n", + " inflating: kenney/Default/Tiles/tile_0013.png \n", + " inflating: kenney/Default/Tiles/tile_0014.png \n", + " inflating: kenney/Default/Tiles/tile_0015.png \n", + " inflating: kenney/Default/Tiles/tile_0016.png \n", + " inflating: kenney/Default/Tiles/tile_0017.png \n", + " inflating: kenney/Default/Tiles/tile_0018.png \n", + " inflating: kenney/Default/Tiles/tile_0019.png \n", + " inflating: kenney/Default/Tiles/tile_0020.png \n", + " inflating: kenney/Default/Tiles/tile_0021.png \n", + " inflating: kenney/Default/Tiles/tile_0022.png \n", + " inflating: kenney/Default/Tiles/tile_0023.png \n", + " inflating: kenney/Default/Tiles/tile_0024.png \n", + " inflating: kenney/Default/Tiles/tile_0025.png \n", + " inflating: kenney/Default/Tiles/tile_0026.png \n", + " inflating: kenney/Default/Tiles/tile_0027.png \n", + " inflating: kenney/Default/Tiles/tile_0028.png \n", + " inflating: kenney/Default/Tiles/tile_0029.png \n", + " inflating: kenney/Default/Tiles/tile_0030.png \n", + " inflating: kenney/Default/Tiles/tile_0031.png \n", + " inflating: kenney/Default/Tiles/tile_0032.png \n", + " inflating: kenney/Default/Tiles/tile_0033.png \n", + " inflating: kenney/Default/Tiles/tile_0034.png \n", + " inflating: kenney/Default/Tiles/tile_0035.png \n", + " inflating: kenney/Default/Tiles/tile_0036.png \n", + " inflating: kenney/Default/Tiles/tile_0037.png \n", + " inflating: kenney/Default/Tiles/tile_0038.png \n", + " inflating: kenney/Default/Tiles/tile_0039.png \n", + " inflating: kenney/Default/Tiles/tile_0040.png \n", + " inflating: kenney/Default/Tiles/tile_0041.png \n", + " inflating: kenney/Default/Tiles/tile_0042.png \n", + " inflating: kenney/Default/Tiles/tile_0043.png \n", + " inflating: kenney/Default/Tiles/tile_0044.png \n", + " inflating: kenney/Default/Tiles/tile_0045.png \n", + " inflating: kenney/Default/Tiles/tile_0046.png \n", + " inflating: kenney/Default/Tiles/tile_0047.png \n", + " inflating: kenney/Default/Tiles/tile_0048.png \n", + " inflating: kenney/Default/Tiles/tile_0049.png \n", + " inflating: kenney/Default/Tiles/tile_0050.png \n", + " inflating: kenney/Default/Tiles/tile_0051.png \n", + " inflating: kenney/Default/Tiles/tile_0052.png \n", + " inflating: kenney/Default/Tiles/tile_0053.png \n", + " inflating: kenney/Default/Tiles/tile_0054.png \n", + " inflating: kenney/Default/Tiles/tile_0055.png \n", + " inflating: kenney/Default/Tiles/tile_0056.png \n", + " inflating: kenney/Default/Tiles/tile_0057.png \n", + " inflating: kenney/Default/Tiles/tile_0058.png \n", + " inflating: kenney/Default/Tiles/tile_0059.png \n", + " inflating: kenney/Default/Tiles/tile_0060.png \n", + " inflating: kenney/Default/Tiles/tile_0061.png \n", + " inflating: kenney/Default/Tiles/tile_0062.png \n", + " inflating: kenney/Default/Tiles/tile_0063.png \n", + " inflating: kenney/Default/Tiles/tile_0064.png \n", + " inflating: kenney/Default/Tiles/tile_0065.png \n", + " inflating: kenney/Default/Tiles/tile_0066.png \n", + " inflating: kenney/Default/Tiles/tile_0067.png \n", + " inflating: kenney/Default/Tiles/tile_0068.png \n", + " inflating: kenney/Default/Tiles/tile_0069.png \n", + " inflating: kenney/Default/Tiles/tile_0070.png \n", + " inflating: kenney/Default/Tiles/tile_0071.png \n", + " inflating: kenney/Default/Tiles/tile_0072.png \n", + " inflating: kenney/Default/Tiles/tile_0073.png \n", + " inflating: kenney/Default/Tiles/tile_0074.png \n", + " inflating: kenney/Default/Tiles/tile_0075.png \n", + " inflating: kenney/Default/Tiles/tile_0076.png \n", + " inflating: kenney/Default/Tiles/tile_0077.png \n", + " inflating: kenney/Default/Tiles/tile_0078.png \n", + " inflating: kenney/Default/Tiles/tile_0079.png \n", + " inflating: kenney/Default/Tiles/tile_0080.png \n", + " inflating: kenney/Default/Tiles/tile_0081.png \n", + " inflating: kenney/Default/Tiles/tile_0082.png \n", + " inflating: kenney/Default/Tiles/tile_0083.png \n", + " inflating: kenney/Default/Tiles/tile_0084.png \n", + " inflating: kenney/Default/Tiles/tile_0085.png \n", + " inflating: kenney/Default/Tiles/tile_0086.png \n", + " inflating: kenney/Default/Tiles/tile_0087.png \n", + " inflating: kenney/Default/Tiles/tile_0088.png \n", + " inflating: kenney/Default/Tiles/tile_0089.png \n", + " inflating: kenney/Default/Tiles/tile_0090.png \n", + " inflating: kenney/Default/Tiles/tile_0091.png \n", + " inflating: kenney/Default/Tiles/tile_0092.png \n", + " inflating: kenney/Default/Tiles/tile_0093.png \n", + " inflating: kenney/Default/Tiles/tile_0094.png \n", + " inflating: kenney/Default/Tiles/tile_0095.png \n", + " inflating: kenney/Default/Tiles/tile_0096.png \n", + " inflating: kenney/Default/Tiles/tile_0097.png \n", + " inflating: kenney/Default/Tiles/tile_0098.png \n", + " inflating: kenney/Default/Tiles/tile_0099.png \n", + " inflating: kenney/Default/Tiles/tile_0100.png \n", + " inflating: kenney/Default/Tiles/tile_0101.png \n", + " inflating: kenney/Default/Tiles/tile_0102.png \n", + " inflating: kenney/Default/Tiles/tile_0103.png \n", + " inflating: kenney/Default/Tiles/tile_0104.png \n", + " inflating: kenney/Default/Tiles/tile_0105.png \n", + " inflating: kenney/Default/Tiles/tile_0106.png \n", + " inflating: kenney/Default/Tiles/tile_0107.png \n", + " inflating: kenney/Default/Tiles/tile_0108.png \n", + " inflating: kenney/Default/Tiles/tile_0109.png \n", + " inflating: kenney/Default/Tiles/tile_0110.png \n", + " inflating: kenney/Default/Tiles/tile_0111.png \n", + " inflating: kenney/Default/Tiles/tile_0112.png \n", + " inflating: kenney/Default/Tiles/tile_0113.png \n", + " inflating: kenney/Default/Tiles/tile_0114.png \n", + " inflating: kenney/Default/Tiles/tile_0115.png \n", + " inflating: kenney/Default/Tiles/tile_0116.png \n", + " inflating: kenney/Default/Tiles/tile_0117.png \n", + " inflating: kenney/Default/Tiles/tile_0118.png \n", + " inflating: kenney/Default/Tiles/tile_0119.png \n", + " inflating: kenney/Default/Tiles/tile_0120.png \n", + " inflating: kenney/Default/Tiles/tile_0121.png \n", + " inflating: kenney/Default/Tiles/tile_0122.png \n", + " inflating: kenney/Default/Tiles/tile_0123.png \n", + " inflating: kenney/Default/Tiles/tile_0124.png \n", + " inflating: kenney/Default/Tiles/tile_0125.png \n", + " inflating: kenney/Default/Tiles/tile_0126.png \n", + " inflating: kenney/Default/Tiles/tile_0127.png \n", + " inflating: kenney/Default/Tiles/tile_0128.png \n", + " inflating: kenney/Default/Tiles/tile_0129.png \n", + " inflating: kenney/Default/Tiles/tile_0130.png \n", + " inflating: kenney/Default/Tiles/tile_0131.png \n", + " inflating: kenney/Default/Tiles/tile_0132.png \n", + " inflating: kenney/Default/Tiles/tile_0133.png \n", + " inflating: kenney/Default/Tiles/tile_0134.png \n", + " inflating: kenney/Default/Tiles/tile_0135.png \n", + " inflating: kenney/Default/Tilesheet.txt \n" + ] + } + ], + "source": [ + "!unzip kenney_monochromerpg.zip -d kenney" + ] + }, + { + "cell_type": "code", + "execution_count": 16, + "id": "dc9ed718-422b-4856-b2d2-33c6ad57a2c6", + "metadata": { + "tags": [] + }, + "outputs": [], + "source": [ + "# We use PIL (python image library, actually now called Pillow) to open images" + ] + }, + { + "cell_type": "code", + "execution_count": 17, + "id": "a7a29210-ee5a-41d5-baa6-54d54ea5f799", + "metadata": { + "tags": [] + }, + "outputs": [], + "source": [ + "from PIL import Image\n", + "from reportlab.pdfgen.canvas import Canvas\n", + "from reportlab.lib.pagesizes import letter, A4\n", + "from reportlab.lib.units import mm, cm\n", + "# from reportlab.pdfbase.ttfonts import TTFont, pdfmetrics\n", + "from pathlib import Path\n", + "\n", + "# size=A6\n", + "size = (75*mm, 75*mm)\n", + "\n", + "c = Canvas(\"tiles.pdf\", pagesize=size)\n", + "# Convert all the png files in the Kenney download (folder named Default from the zip above)\n", + "images = Path(\"kenney/Default/Tiles\")\n", + "for imagepath in images.glob(\"*.png\"):\n", + " image = Image.open(imagepath)\n", + " c.drawInlineImage(image, 0,0, width=75*mm,height=75*mm)\n", + " # show page saves the current page & starts a new one\n", + " c.showPage()\n", + "c.save()" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "a8633b0d-a43b-4225-9fc2-b3c4c54a86db", + "metadata": {}, + "outputs": [], + "source": [] + }, + { + "cell_type": "markdown", + "id": "23cb5859-af12-4df6-9656-4aad0ecec81d", + "metadata": {}, + "source": [ + "## Webpage to PDF with weasyprint\n", + "\n", + "* https://doc.courtbouillon.org/weasyprint/stable/first_steps.html#quickstart\n", + "* https://doc.courtbouillon.org/weasyprint/stable/first_steps.html?highlight=page%20size\n" + ] + }, + { + "cell_type": "code", + "execution_count": 18, + "id": "49cd545c-acb7-4cad-8824-1bb9be50a420", + "metadata": {}, + "outputs": [], + "source": [ + "from weasyprint import HTML, CSS" + ] + }, + { + "cell_type": "code", + "execution_count": 19, + "id": "b8cd94eb-eae9-4f7b-b847-2fbbbb141e9a", + "metadata": {}, + "outputs": [], + "source": [ + "url = \"https://www.ruetir.com/2022/03/09/bold-statement-loot-boxes-in-football-game-fifa-now-allowed/\"\n", + "css = CSS(string='@page { size: 75mm 75mm; margin: 0mm }')\n", + "HTML(url).write_pdf('bold-statement-loot-boxes.pdf', stylesheets=[css])" + ] + }, + { + "cell_type": "markdown", + "id": "3c7627fb-1e55-49a5-a2f6-be97e888b740", + "metadata": {}, + "source": [ + "so like the first part ... D=titles.pdf etc just names the PDF, when you then say D2 after the command **cat** it takes adds page 2 of titles.pdf to the eventual *output* (so **cat** starts the command and **output** then ends it + the name of the file to save, it's a little weird syntax, but super useful!!!!" + ] + }, + { + "cell_type": "code", + "execution_count": 22, + "id": "c5efc479-8109-46b0-bbe1-7214de6c055c", + "metadata": {}, + "outputs": [], + "source": [ + "!pdftk A=grid.pdf B=bold-statement-loot-boxes.pdf C=tiles.pdf D=titles.pdf cat D1 A D2 B D3 C output all.pdf" + ] + }, + { + "cell_type": "code", + "execution_count": 23, + "id": "cb2cbf7b-9e03-48de-b7c0-f6a089f8e850", + "metadata": { + "scrolled": true, + "tags": [] + }, + "outputs": [ + { + "data": { + "text/plain": [ + "PDFTK(1)\t\t General Commands Manual\t\t PDFTK(1)\n", + "\n", + "NAME\n", + " pdftk - A handy tool for manipulating PDF\n", + "\n", + "SYNOPSIS\n", + " pdftk \n", + "\t [ input_pw ]\n", + "\t [ ]\n", + "\t [ output ]\n", + "\t [ encrypt_40bit | encrypt_128bit ]\n", + "\t [ allow ]\n", + "\t [ owner_pw ]\n", + "\t [ user_pw ]\n", + "\t [ flatten ] [ need_appearances ]\n", + "\t [ compress | uncompress ]\n", + "\t [ keep_first_id | keep_final_id ] [ drop_xfa ] [ drop_xmp ]\n", + "\t [ verbose ] [ dont_ask | do_ask ]\n", + " Where:\n", + "\t may be empty, or:\n", + "\t [ cat | shuffle | burst | rotate |\n", + "\t generate_fdf | fill_form |\n", + "\t background | multibackground |\n", + "\t stamp | multistamp |\n", + "\t dump_data | dump_data_utf8 |\n", + "\t dump_data_fields | dump_data_fields_utf8 |\n", + "\t dump_data_annots |\n", + "\t update_info | update_info_utf8 |\n", + "\t attach_files | unpack_files ]\n", + "\n", + " For Complete Help: pdftk --help\n", + "\n", + "DESCRIPTION\n", + " If PDF is electronic paper, then pdftk is an electronic staple-remover,\n", + " hole-punch, binder, secret-decoder-ring, and X-Ray-glasses. Pdftk is a\n", + " simple tool for doing everyday things with PDF documents. Use it to:\n", + "\n", + " * Merge PDF Documents or Collate PDF Page Scans\n", + " * Split PDF Pages into a New Document\n", + " * Rotate PDF Documents or Pages\n", + " * Decrypt Input as Necessary (Password Required)\n", + " * Encrypt Output as Desired\n", + " * Fill PDF Forms with X/FDF Data and/or Flatten Forms\n", + " * Generate FDF Data Stencils from PDF Forms\n", + " * Apply a Background Watermark or a Foreground Stamp\n", + " * Report PDF Metrics, Bookmarks and Metadata\n", + " * Add/Update PDF Bookmarks or Metadata\n", + " * Attach Files to PDF Pages or the PDF Document\n", + " * Unpack PDF Attachments\n", + " * Burst a PDF Document into Single Pages\n", + " * Uncompress and Re-Compress Page Streams\n", + " * Repair Corrupted PDF (Where Possible)\n", + "\n", + "OPTIONS\n", + " A summary of options is included below.\n", + "\n", + " --help, -h\n", + "\t Show this summary of options.\n", + "\n", + " \n", + "\t A list of the input PDF files. If you plan to combine these PDFs\n", + "\t (without using handles) then list files in the order you want\n", + "\t them combined. Use - to pass a single PDF into pdftk via stdin.\n", + "\t Input files can be associated with handles, where a handle is\n", + "\t one or more upper-case letters:\n", + "\n", + "\t =\n", + "\n", + "\t Handles are often omitted. They are useful when specifying PDF\n", + "\t passwords or page ranges, later.\n", + "\n", + "\t For example: A=input1.pdf QT=input2.pdf M=input3.pdf\n", + "\n", + " [input_pw ]\n", + "\t Input PDF owner passwords, if necessary, are associated with\n", + "\t files by using their handles:\n", + "\n", + "\t =\n", + "\n", + "\t If handles are not given, then passwords are associated with in‐\n", + "\t put files by order.\n", + "\n", + "\t Most pdftk features require that encrypted input PDF are accom‐\n", + "\t panied by the ~owner~ password. If the input PDF has no owner\n", + "\t password, then the user password must be given, instead.\tIf the\n", + "\t input PDF has no passwords, then no password should be given.\n", + "\n", + "\t When running in do_ask mode, pdftk will prompt you for a pass‐\n", + "\t word if the supplied password is incorrect or none was given.\n", + "\n", + " [ ]\n", + "\t Available operations are: cat, shuffle, burst, rotate, gener‐\n", + "\t ate_fdf, fill_form, background, multibackground, stamp, multi‐\n", + "\t stamp, dump_data, dump_data_utf8, dump_data_fields,\n", + "\t dump_data_fields_utf8, dump_data_annots, update_info, up‐\n", + "\t date_info_utf8, attach_files, unpack_files. Some operations\n", + "\t takes additional arguments, described below.\n", + "\n", + "\t If this optional argument is omitted, then pdftk runs in 'fil‐\n", + "\t ter' mode. Filter mode takes only one PDF input and creates a\n", + "\t new PDF after applying all of the output options, like encryp‐\n", + "\t tion and compression.\n", + "\n", + "\t cat []\n", + "\t\t Assembles (catenates) pages from input PDFs to create a new\n", + "\t\t PDF. Use cat to merge PDF pages or to split PDF pages from\n", + "\t\t documents. You can also use it to rotate PDF pages. Page or‐\n", + "\t\t der in the new PDF is specified by the order of the given\n", + "\t\t page ranges. Page ranges are described like this:\n", + "\n", + "\t\t [[-[]]][]\n", + "\n", + "\t\t Where the handle identifies one of the input PDF files, and\n", + "\t\t the beginning and ending page numbers are one-based refer‐\n", + "\t\t ences to pages in the PDF file. The qualifier can be even or\n", + "\t\t odd, and the page rotation can be north, south, east, west,\n", + "\t\t left, right, or down.\n", + "\n", + "\t\t If a PDF handle is given but no pages are specified, then the\n", + "\t\t entire PDF is used. If no pages are specified for any of the\n", + "\t\t input PDFs, then the input PDFs' bookmarks are also merged\n", + "\t\t and included in the output.\n", + "\n", + "\t\t If the handle is omitted from the page range, then the pages\n", + "\t\t are taken from the first input PDF.\n", + "\n", + "\t\t The even qualifier causes pdftk to use only the even-numbered\n", + "\t\t PDF pages, so 1-6even yields pages 2, 4 and 6 in that order.\n", + "\t\t 6-1even yields pages 6, 4 and 2 in that order.\n", + "\n", + "\t\t The odd qualifier works similarly to the even.\n", + "\n", + "\t\t The page rotation setting can cause pdftk to rotate pages and\n", + "\t\t documents. Each option sets the page rotation as follows (in\n", + "\t\t degrees): north: 0, east: 90, south: 180, west: 270, left:\n", + "\t\t -90, right: +90, down: +180. left, right, and down make rela‐\n", + "\t\t tive adjustments to a page's rotation.\n", + "\n", + "\t\t If no arguments are passed to cat, then pdftk combines all\n", + "\t\t input PDFs in the order they were given to create the output.\n", + "\n", + "\t\t NOTES:\n", + "\t\t * may be less than .\n", + "\t\t * The keyword end may be used to reference the final page of\n", + "\t\t a document instead of a page number.\n", + "\t\t * Reference a single page by omitting the ending page number.\n", + "\t\t * The handle may be used alone to represent the entire PDF\n", + "\t\t document, e.g., B1-end is the same as B.\n", + "\t\t * You can reference page numbers in reverse order by prefix‐\n", + "\t\t ing them with the letter r. For example, page r1 is the last\n", + "\t\t page of the document, r2 is the next-to-last page of the doc‐\n", + "\t\t ument, and rend is the first page of the document. You can\n", + "\t\t use this prefix in ranges, too, for example r3-r1 is the last\n", + "\t\t three pages of a PDF.\n", + "\n", + "\t\t Page Range Examples without Handles:\n", + "\t\t 1-endeast - rotate entire document 90 degrees\n", + "\t\t 5 11 20 - take single pages from input PDF\n", + "\t\t 5-25oddwest - take odd pages in range, rotate 90 degrees\n", + "\t\t 6-1 - reverse pages in range from input PDF\n", + "\n", + "\t\t Page Range Examples Using Handles:\n", + "\t\t Say A=in1.pdf B=in2.pdf, then:\n", + "\t\t A1-21 - take range from in1.pdf\n", + "\t\t Bend-1odd - take all odd pages from in2.pdf in reverse order\n", + "\t\t A72 - take a single page from in1.pdf\n", + "\t\t A1-21 Beven A72 - assemble pages from both in1.pdf and\n", + "\t\t in2.pdf\n", + "\t\t Awest - rotate entire in1.pdf document 90 degrees\n", + "\t\t B - use all of in2.pdf\n", + "\t\t A2-30evenleft - take the even pages from the range, remove 90\n", + "\t\t degrees from each page's rotation\n", + "\t\t A A - catenate in1.pdf with in1.pdf\n", + "\t\t Aevenwest Aoddeast - apply rotations to even pages, odd pages\n", + "\t\t from in1.pdf\n", + "\t\t Awest Bwest Bdown - catenate rotated documents\n", + "\n", + "\t shuffle []\n", + "\t\t Collates pages from input PDFs to create a new PDF. Works\n", + "\t\t like the cat operation except that it takes one page at a\n", + "\t\t time from each page range to assemble the output PDF.\tIf one\n", + "\t\t range runs out of pages, it continues with the remaining\n", + "\t\t ranges. Ranges can use all of the features described above\n", + "\t\t for cat, like reverse page ranges, multiple ranges from a\n", + "\t\t single PDF, and page rotation. This feature was designed to\n", + "\t\t help collate PDF pages after scanning paper documents.\n", + "\n", + "\t burst Splits a single input PDF document into individual pages.\n", + "\t\t Also creates a report named doc_data.txt which is the same as\n", + "\t\t the output from dump_data. If the output section is omitted,\n", + "\t\t then PDF pages are named: pg_%04d.pdf, e.g.: pg_0001.pdf,\n", + "\t\t pg_0002.pdf, etc. To name these pages yourself, supply a\n", + "\t\t printf-styled format string via the output section. For ex‐\n", + "\t\t ample, if you want pages named: page_01.pdf, page_02.pdf,\n", + "\t\t etc., pass output page_%02d.pdf to pdftk. Encryption can be\n", + "\t\t applied to the output by appending output options such as\n", + "\t\t owner_pw, e.g.:\n", + "\n", + "\t\t pdftk in.pdf burst owner_pw foopass\n", + "\n", + "\t rotate []\n", + "\t\t Takes a single input PDF and rotates just the specified\n", + "\t\t pages. All other pages remain unchanged. The page order re‐\n", + "\t\t mains unchaged. Specify the pages to rotate using the same\n", + "\t\t notation as you would with cat, except you omit the pages\n", + "\t\t that you aren't rotating:\n", + "\n", + "\t\t [[-[]]][]\n", + "\n", + "\t\t The qualifier can be even or odd, and the page rotation can\n", + "\t\t be north, south, east, west, left, right, or down.\n", + "\n", + "\t\t Each option sets the page rotation as follows (in degrees):\n", + "\t\t north: 0, east: 90, south: 180, west: 270, left: -90, right:\n", + "\t\t +90, down: +180. left, right, and down make relative adjust‐\n", + "\t\t ments to a page's rotation.\n", + "\n", + "\t\t The given order of the pages doesn't change the page order in\n", + "\t\t the output.\n", + "\n", + "\t generate_fdf\n", + "\t\t Reads a single input PDF file and generates an FDF file suit‐\n", + "\t\t able for fill_form out of it to the given output filename or\n", + "\t\t (if no output is given) to stdout. Does not create a new\n", + "\t\t PDF.\n", + "\n", + "\t fill_form \n", + "\t\t Fills the single input PDF's form fields with the data from\n", + "\t\t an FDF file, XFDF file or stdin. Enter the data filename af‐\n", + "\t\t ter fill_form, or use - to pass the data via stdin, like so:\n", + "\n", + "\t\t pdftk form.pdf fill_form data.fdf output form.filled.pdf\n", + "\n", + "\t\t If the input FDF file includes Rich Text formatted data in\n", + "\t\t addition to plain text, then the Rich Text data is packed\n", + "\t\t into the form fields as well as the plain text. Pdftk also\n", + "\t\t sets a flag that cues Reader/Acrobat to generate new field\n", + "\t\t appearances based on the Rich Text data. So when the user\n", + "\t\t opens the PDF, the viewer will create the Rich Text appear‐\n", + "\t\t ance on the spot. If the user's PDF viewer does not support\n", + "\t\t Rich Text, then the user will see the plain text data in‐\n", + "\t\t stead. If you flatten this form before Acrobat has a chance\n", + "\t\t to create (and save) new field appearances, then the plain\n", + "\t\t text field data is what you'll see.\n", + "\n", + "\t\t Also see the flatten and need_appearances options.\n", + "\n", + "\t background \n", + "\t\t Applies a PDF watermark to the background of a single input\n", + "\t\t PDF. Pass the background PDF's filename after background\n", + "\t\t like so:\n", + "\n", + "\t\t pdftk in.pdf background back.pdf output out.pdf\n", + "\n", + "\t\t Pdftk uses only the first page from the background PDF and\n", + "\t\t applies it to every page of the input PDF. This page is\n", + "\t\t scaled and rotated as needed to fit the input page. You can\n", + "\t\t use - to pass a background PDF into pdftk via stdin.\n", + "\n", + "\t\t If the input PDF does not have a transparent background (such\n", + "\t\t as a PDF created from page scans) then the resulting back‐\n", + "\t\t ground won't be visible -- use the stamp operation instead.\n", + "\n", + "\t multibackground \n", + "\t\t Same as the background operation, but applies each page of\n", + "\t\t the background PDF to the corresponding page of the input\n", + "\t\t PDF. If the input PDF has more pages than the stamp PDF,\n", + "\t\t then the final stamp page is repeated across these remaining\n", + "\t\t pages in the input PDF.\n", + "\n", + "\t stamp \n", + "\t\t This behaves just like the background operation except it\n", + "\t\t overlays the stamp PDF page on top of the input PDF docu‐\n", + "\t\t ment's pages.\tThis works best if the stamp PDF page has a\n", + "\t\t transparent background.\n", + "\n", + "\t multistamp \n", + "\t\t Same as the stamp operation, but applies each page of the\n", + "\t\t background PDF to the corresponding page of the input PDF.\n", + "\t\t If the input PDF has more pages than the stamp PDF, then the\n", + "\t\t final stamp page is repeated across these remaining pages in\n", + "\t\t the input PDF.\n", + "\n", + "\t dump_data\n", + "\t\t Reads a single input PDF file and reports its metadata, book‐\n", + "\t\t marks (a/k/a outlines), page metrics (media, rotation and la‐\n", + "\t\t bels), data embedded by STAMPtk (see STAMPtk's embed option)\n", + "\t\t and other data to the given output filename or (if no output\n", + "\t\t is given) to stdout. Non-ASCII characters are encoded as XML\n", + "\t\t numerical entities. Does not create a new PDF.\n", + "\n", + "\t dump_data_utf8\n", + "\t\t Same as dump_data excepct that the output is encoded as\n", + "\t\t UTF-8.\n", + "\n", + "\t dump_data_fields\n", + "\t\t Reads a single input PDF file and reports form field statis‐\n", + "\t\t tics to the given output filename or (if no output is given)\n", + "\t\t to stdout. Non-ASCII characters are encoded as XML numerical\n", + "\t\t entities. Does not create a new PDF.\n", + "\n", + "\t dump_data_fields_utf8\n", + "\t\t Same as dump_data_fields excepct that the output is encoded\n", + "\t\t as UTF-8.\n", + "\n", + "\t dump_data_annots\n", + "\t\t This operation currently reports only link annotations.\n", + "\t\t Reads a single input PDF file and reports annotation informa‐\n", + "\t\t tion to the given output filename or (if no output is given)\n", + "\t\t to stdout. Non-ASCII characters are encoded as XML numerical\n", + "\t\t entities. Does not create a new PDF.\n", + "\n", + "\t update_info \n", + "\t\t Changes the bookmarks and metadata in a single PDF's Info\n", + "\t\t dictionary to match the input data file. The input data file\n", + "\t\t uses the same syntax as the output from dump_data. Non-ASCII\n", + "\t\t characters should be encoded as XML numerical entities.\n", + "\n", + "\t\t This operation does not change the metadata stored in the\n", + "\t\t PDF's XMP stream, if it has one. (For this reason you should\n", + "\t\t include a ModDate entry in your updated info with a current\n", + "\t\t date/timestamp, format: D:YYYYMMDDHHmmSS, e.g. D:201307241346\n", + "\t\t -- omitted data after YYYY revert to default values.)\n", + "\n", + "\t\t For example:\n", + "\n", + "\t\t pdftk in.pdf update_info in.info output out.pdf\n", + "\n", + "\t update_info_utf8 \n", + "\t\t Same as update_info except that the input is encoded as\n", + "\t\t UTF-8.\n", + "\n", + "\t attach_files [to_page ]\n", + "\t\t Packs arbitrary files into a PDF using PDF's file attachment\n", + "\t\t features. More than one attachment may be listed after at‐\n", + "\t\t tach_files. Attachments are added at the document level un‐\n", + "\t\t less the optional to_page option is given, in which case the\n", + "\t\t files are attached to the given page number (the first page\n", + "\t\t is 1, the final page is end). For example:\n", + "\n", + "\t\t pdftk in.pdf attach_files table1.html table2.html to_page 6\n", + "\t\t output out.pdf\n", + "\n", + "\t unpack_files\n", + "\t\t Copies all of the attachments from the input PDF into the\n", + "\t\t current folder or to an output directory given after output.\n", + "\t\t For example:\n", + "\n", + "\t\t pdftk report.pdf unpack_files output ~/atts/\n", + "\n", + "\t\t or, interactively:\n", + "\n", + "\t\t pdftk report.pdf unpack_files output PROMPT\n", + "\n", + " [output ]\n", + "\t The output PDF filename may not be set to the name of an input\n", + "\t filename. Use - to output to stdout. When using the dump_data\n", + "\t operation, use output to set the name of the output data file.\n", + "\t When using the unpack_files operation, use output to set the\n", + "\t name of an output directory. When using the burst operation,\n", + "\t you can use output to control the resulting PDF page filenames\n", + "\t (described above).\n", + "\n", + " [encrypt_40bit | encrypt_128bit]\n", + "\t If an output PDF user or owner password is given, output PDF en‐\n", + "\t cryption strength defaults to 128 bits. This can be overridden\n", + "\t by specifying encrypt_40bit.\n", + "\n", + " [allow ]\n", + "\t Permissions are applied to the output PDF only if an encryption\n", + "\t strength is specified or an owner or user password is given. If\n", + "\t permissions are not specified, they default to 'none,' which\n", + "\t means all of the following features are disabled.\n", + "\n", + "\t The permissions section may include one or more of the following\n", + "\t features:\n", + "\n", + "\t Printing\n", + "\t\t Top Quality Printing\n", + "\n", + "\t DegradedPrinting\n", + "\t\t Lower Quality Printing\n", + "\n", + "\t ModifyContents\n", + "\t\t Also allows Assembly\n", + "\n", + "\t Assembly\n", + "\n", + "\t CopyContents\n", + "\t\t Also allows ScreenReaders\n", + "\n", + "\t ScreenReaders\n", + "\n", + "\t ModifyAnnotations\n", + "\t\t Also allows FillIn\n", + "\n", + "\t FillIn\n", + "\n", + "\t AllFeatures\n", + "\t\t Allows the user to perform all of the above, and top\n", + "\t\t quality printing.\n", + "\n", + " [owner_pw ]\n", + "\n", + " [user_pw ]\n", + "\t If an encryption strength is given but no passwords are sup‐\n", + "\t plied, then the owner and user passwords remain empty, which\n", + "\t means that the resulting PDF may be opened and its security pa‐\n", + "\t rameters altered by anybody.\n", + "\n", + " [compress | uncompress]\n", + "\t These are only useful when you want to edit PDF code in a text\n", + "\t editor like vim or emacs. Remove PDF page stream compression by\n", + "\t applying the uncompress filter. Use the compress filter to re‐\n", + "\t store compression.\n", + "\n", + " [flatten]\n", + "\t Use this option to merge an input PDF's interactive form fields\n", + "\t (and their data) with the PDF's pages. Only one input PDF may be\n", + "\t given. Sometimes used with the fill_form operation.\n", + "\n", + " [need_appearances]\n", + "\t Sets a flag that cues Reader/Acrobat to generate new field ap‐\n", + "\t pearances based on the form field values. Use this when filling\n", + "\t a form with non-ASCII text to ensure the best presentation in\n", + "\t Adobe Reader or Acrobat.\tIt won't work when combined with the\n", + "\t flatten option.\n", + "\n", + " [keep_first_id | keep_final_id]\n", + "\t When combining pages from multiple PDFs, use one of these op‐\n", + "\t tions to copy the document ID from either the first or final in‐\n", + "\t put document into the new output PDF. Otherwise pdftk creates a\n", + "\t new document ID for the output PDF. When no operation is given,\n", + "\t pdftk always uses the ID from the (single) input PDF.\n", + "\n", + " [drop_xfa]\n", + "\t If your input PDF is a form created using Acrobat 7 or Adobe De‐\n", + "\t signer, then it probably has XFA data. Filling such a form us‐\n", + "\t ing pdftk yields a PDF with data that fails to display in Acro‐\n", + "\t bat 7 (and 6?). The workaround solution is to remove the form's\n", + "\t XFA data, either before you fill the form using pdftk or at the\n", + "\t time you fill the form. Using this option causes pdftk to omit\n", + "\t the XFA data from the output PDF form.\n", + "\n", + "\t This option is only useful when running pdftk on a single input\n", + "\t PDF. When assembling a PDF from multiple inputs using pdftk,\n", + "\t any XFA data in the input is automatically omitted.\n", + "\n", + " [drop_xmp]\n", + "\t Many PDFs store document metadata using both an Info dictionary\n", + "\t (old school) and an XMP stream (new school). Pdftk's up‐\n", + "\t date_info operation can update the Info dictionary, but not the\n", + "\t XMP stream. The proper remedy for this is to include a ModDate\n", + "\t entry in your updated info with a current date/timestamp. The\n", + "\t date/timestamp format is: D:YYYYMMDDHHmmSS, e.g. D:201307241346\n", + "\t -- omitted data after YYYY revert to default values. This newer\n", + "\t ModDate should cue PDF viewers that the Info metadata is more\n", + "\t current than the XMP data.\n", + "\n", + "\t Alternatively, you might prefer to remove the XMP stream from\n", + "\t the PDF altogether -- that's what this option does. Note that\n", + "\t objects inside the PDF might have their own, separate XMP meta‐\n", + "\t data streams, and that drop_xmp does not remove those. It only\n", + "\t removes the PDF's document-level XMP stream.\n", + "\n", + " [verbose]\n", + "\t By default, pdftk runs quietly. Append verbose to the end and it\n", + "\t will speak up.\n", + "\n", + " [dont_ask | do_ask]\n", + "\t Depending on the compile-time settings (see ASK_ABOUT_WARNINGS),\n", + "\t pdftk might prompt you for further input when it encounters a\n", + "\t problem, such as a bad password. Override this default behavior\n", + "\t by adding dont_ask (so pdftk won't ask you what to do) or do_ask\n", + "\t (so pdftk will ask you what to do).\n", + "\n", + "\t When running in dont_ask mode, pdftk will over-write files with\n", + "\t its output without notice.\n", + "\n", + "EXAMPLES\n", + " Collate scanned pages\n", + "\t pdftk A=even.pdf B=odd.pdf shuffle A B output collated.pdf\n", + "\t or if odd.pdf is in reverse order:\n", + "\t pdftk A=even.pdf B=odd.pdf shuffle A Bend-1 output collated.pdf\n", + "\n", + " Decrypt a PDF\n", + "\t pdftk secured.pdf input_pw foopass output unsecured.pdf\n", + "\n", + " Encrypt a PDF using 128-bit strength (the default), withhold all per‐\n", + " missions (the default)\n", + "\t pdftk 1.pdf output 1.128.pdf owner_pw foopass\n", + "\n", + " Same as above, except password 'baz' must also be used to open output\n", + " PDF\n", + "\t pdftk 1.pdf output 1.128.pdf owner_pw foo user_pw baz\n", + "\n", + " Same as above, except printing is allowed (once the PDF is open)\n", + "\t pdftk 1.pdf output 1.128.pdf owner_pw foo user_pw baz allow printing\n", + "\n", + " Join in1.pdf and in2.pdf into a new PDF, out1.pdf\n", + "\t pdftk in1.pdf in2.pdf cat output out1.pdf\n", + "\t or (using handles):\n", + "\t pdftk A=in1.pdf B=in2.pdf cat A B output out1.pdf\n", + "\t or (using wildcards):\n", + "\t pdftk *.pdf cat output combined.pdf\n", + "\n", + " Remove page 13 from in1.pdf to create out1.pdf\n", + "\t pdftk in.pdf cat 1-12 14-end output out1.pdf\n", + "\t or:\n", + "\t pdftk A=in1.pdf cat A1-12 A14-end output out1.pdf\n", + "\n", + " Apply 40-bit encryption to output, revoking all permissions (the de‐\n", + " fault). Set the owner PW to 'foopass'.\n", + "\t pdftk 1.pdf 2.pdf cat output 3.pdf encrypt_40bit owner_pw foopass\n", + "\n", + " Join two files, one of which requires the password 'foopass'. The out‐\n", + " put is not encrypted.\n", + "\t pdftk A=secured.pdf 2.pdf input_pw A=foopass cat output 3.pdf\n", + "\n", + " Uncompress PDF page streams for editing the PDF in a text editor (e.g.,\n", + " vim, emacs)\n", + "\t pdftk doc.pdf output doc.unc.pdf uncompress\n", + "\n", + " Repair a PDF's corrupted XREF table and stream lengths, if possible\n", + "\t pdftk broken.pdf output fixed.pdf\n", + "\n", + " Burst a single PDF document into pages and dump its data to\n", + " doc_data.txt\n", + "\t pdftk in.pdf burst\n", + "\n", + " Burst a single PDF document into encrypted pages. Allow low-quality\n", + " printing\n", + "\t pdftk in.pdf burst owner_pw foopass allow DegradedPrinting\n", + "\n", + " Write a report on PDF document metadata and bookmarks to report.txt\n", + "\t pdftk in.pdf dump_data output report.txt\n", + "\n", + " Rotate the first PDF page to 90 degrees clockwise\n", + "\t pdftk in.pdf cat 1east 2-end output out.pdf\n", + "\n", + " Rotate an entire PDF document to 180 degrees\n", + "\t pdftk in.pdf cat 1-endsouth output out.pdf\n", + "\n", + "NOTES\n", + " This is a port of pdftk to java. See\n", + " https://gitlab.com/marcvinyals/pdftk\n", + " The original program can be found at www.pdftk.com\n", + "\n", + "AUTHOR\n", + " Original author of pdftk is Sid Steward (sid.steward at pdflabs dot\n", + " com).\n", + "\n", + "\t\t\t\t May 11, 2018\t\t\t PDFTK(1)\n" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "man pdftk" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "b688e8f9-c1be-4982-8323-6fe7cfe10498", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/projects/postit-gen/proto-post-it/SpecialIssue17-Regular.otf b/projects/postit-gen/proto-post-it/SpecialIssue17-Regular.otf new file mode 100644 index 0000000..1dd20dd Binary files /dev/null and b/projects/postit-gen/proto-post-it/SpecialIssue17-Regular.otf differ diff --git a/projects/postit-gen/proto-post-it/SpecialIssue17-Regular.ttf b/projects/postit-gen/proto-post-it/SpecialIssue17-Regular.ttf new file mode 100644 index 0000000..0ceb1f3 Binary files /dev/null and b/projects/postit-gen/proto-post-it/SpecialIssue17-Regular.ttf differ diff --git a/projects/postit-gen/proto-post-it/blank.pdf b/projects/postit-gen/proto-post-it/blank.pdf new file mode 100644 index 0000000..a0a9a29 --- /dev/null +++ b/projects/postit-gen/proto-post-it/blank.pdf @@ -0,0 +1,239 @@ +%PDF-1.3 +% ReportLab Generated PDF document http://www.reportlab.com +1 0 obj +<< +/F1 2 0 R +>> +endobj +2 0 obj +<< +/BaseFont /Helvetica /Encoding /WinAnsiEncoding /Name /F1 /Subtype /Type1 /Type /Font +>> +endobj +3 0 obj +<< +/Contents 16 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +4 0 obj +<< +/Contents 17 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +5 0 obj +<< +/Contents 18 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +6 0 obj +<< +/Contents 19 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +7 0 obj +<< +/Contents 20 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +8 0 obj +<< +/Contents 21 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +9 0 obj +<< +/Contents 22 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +10 0 obj +<< +/Contents 23 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +11 0 obj +<< +/Contents 24 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +12 0 obj +<< +/Contents 25 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 15 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +13 0 obj +<< +/PageMode /UseNone /Pages 15 0 R /Type /Catalog +>> +endobj +14 0 obj +<< +/Author (anonymous) /CreationDate (D:20220311111941+00'00') /Creator (ReportLab PDF Library - www.reportlab.com) /Keywords () /ModDate (D:20220311111941+00'00') /Producer (ReportLab PDF Library - www.reportlab.com) + /Subject (unspecified) /Title (untitled) /Trapped /False +>> +endobj +15 0 obj +<< +/Count 10 /Kids [ 3 0 R 4 0 R 5 0 R 6 0 R 7 0 R 8 0 R 9 0 R 10 0 R 11 0 R 12 0 R ] /Type /Pages +>> +endobj +16 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +17 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +18 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +19 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +20 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +21 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +22 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +23 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +24 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +25 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 59 +>> +stream +GapQh0E=F,0U\H3T\pNYT^QKk?tc>IP,;W#U1^23ihPEM_PP$O!3^,C5Q~>endstream +endobj +xref +0 26 +0000000000 65535 f +0000000073 00000 n +0000000104 00000 n +0000000211 00000 n +0000000416 00000 n +0000000621 00000 n +0000000826 00000 n +0000001031 00000 n +0000001236 00000 n +0000001441 00000 n +0000001646 00000 n +0000001852 00000 n +0000002058 00000 n +0000002264 00000 n +0000002334 00000 n +0000002631 00000 n +0000002749 00000 n +0000002898 00000 n +0000003047 00000 n +0000003196 00000 n +0000003345 00000 n +0000003494 00000 n +0000003643 00000 n +0000003792 00000 n +0000003941 00000 n +0000004090 00000 n +trailer +<< +/ID +[] +% ReportLab generated PDF document -- digest (http://www.reportlab.com) + +/Info 14 0 R +/Root 13 0 R +/Size 26 +>> +startxref +4239 +%%EOF diff --git a/projects/postit-gen/proto-post-it/grid.pdf b/projects/postit-gen/proto-post-it/grid.pdf new file mode 100644 index 0000000..bc22753 --- /dev/null +++ b/projects/postit-gen/proto-post-it/grid.pdf @@ -0,0 +1,68 @@ +%PDF-1.3 +% ReportLab Generated PDF document http://www.reportlab.com +1 0 obj +<< +/F1 2 0 R +>> +endobj +2 0 obj +<< +/BaseFont /Helvetica /Encoding /WinAnsiEncoding /Name /F1 /Subtype /Type1 /Type /Font +>> +endobj +3 0 obj +<< +/Contents 7 0 R /MediaBox [ 0 0 212.5984 212.5984 ] /Parent 6 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +4 0 obj +<< +/PageMode /UseNone /Pages 6 0 R /Type /Catalog +>> +endobj +5 0 obj +<< +/Author (anonymous) /CreationDate (D:20220311111931+00'00') /Creator (ReportLab PDF Library - www.reportlab.com) /Keywords () /ModDate (D:20220311111931+00'00') /Producer (ReportLab PDF Library - www.reportlab.com) + /Subject (unspecified) /Title (untitled) /Trapped /False +>> +endobj +6 0 obj +<< +/Count 1 /Kids [ 3 0 R ] /Type /Pages +>> +endobj +7 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 266 +>> +stream +Gar'd3t;iB>\:;V``?WQ`'PSntLdie0k:#)M-$.O4l1$)]YB7>_8Z)/P;Rt5%UW[uY9`Oha7JEq0_Kj/Y.mcLD9;7>>KFlL.\9De$,(tJ9j&EDXM%B`OZuB'j'-Tc.41D)m,7>+6_*c6AEJ0-oimc$J-\R:T\endstream +endobj +xref +0 8 +0000000000 65535 f +0000000073 00000 n +0000000104 00000 n +0000000211 00000 n +0000000414 00000 n +0000000482 00000 n +0000000778 00000 n +0000000837 00000 n +trailer +<< +/ID +[<32832b520cbeb2da7825637602ebb91e><32832b520cbeb2da7825637602ebb91e>] +% ReportLab generated PDF document -- digest (http://www.reportlab.com) + +/Info 5 0 R +/Root 4 0 R +/Size 8 +>> +startxref +1193 +%%EOF diff --git a/projects/postit-gen/proto-post-it/qrcodes/.ipynb_checkpoints/🖌-checkpoint.png b/projects/postit-gen/proto-post-it/qrcodes/.ipynb_checkpoints/🖌-checkpoint.png new file mode 100644 index 0000000..bbe3f91 Binary files /dev/null and b/projects/postit-gen/proto-post-it/qrcodes/.ipynb_checkpoints/🖌-checkpoint.png differ diff --git a/projects/postit-gen/proto-post-it/qrcodes/.ipynb_checkpoints/🤝-checkpoint.png b/projects/postit-gen/proto-post-it/qrcodes/.ipynb_checkpoints/🤝-checkpoint.png new file mode 100644 index 0000000..432550c Binary files /dev/null and b/projects/postit-gen/proto-post-it/qrcodes/.ipynb_checkpoints/🤝-checkpoint.png differ diff --git a/projects/postit-gen/proto-post-it/qrcodes/issue17.png b/projects/postit-gen/proto-post-it/qrcodes/issue17.png new file mode 100644 index 0000000..b016f6b Binary files /dev/null and b/projects/postit-gen/proto-post-it/qrcodes/issue17.png differ diff --git a/projects/postit-gen/proto-post-it/qrcodes/🍥.png b/projects/postit-gen/proto-post-it/qrcodes/🍥.png new file mode 100644 index 0000000..64e732c Binary files /dev/null and b/projects/postit-gen/proto-post-it/qrcodes/🍥.png differ diff --git a/projects/postit-gen/proto-post-it/qrcodes/🎤.png b/projects/postit-gen/proto-post-it/qrcodes/🎤.png new file mode 100644 index 0000000..1187c83 Binary files /dev/null and b/projects/postit-gen/proto-post-it/qrcodes/🎤.png differ diff --git a/projects/postit-gen/proto-post-it/qrcodes/💬.png b/projects/postit-gen/proto-post-it/qrcodes/💬.png new file mode 100644 index 0000000..f6445cf Binary files /dev/null and b/projects/postit-gen/proto-post-it/qrcodes/💬.png differ diff --git a/projects/postit-gen/proto-post-it/qrcodes/🖌.png b/projects/postit-gen/proto-post-it/qrcodes/🖌.png new file mode 100644 index 0000000..60b87c5 Binary files /dev/null and b/projects/postit-gen/proto-post-it/qrcodes/🖌.png differ diff --git a/projects/postit-gen/proto-post-it/qrcodes/🤝.png b/projects/postit-gen/proto-post-it/qrcodes/🤝.png new file mode 100644 index 0000000..b69c1f7 Binary files /dev/null and b/projects/postit-gen/proto-post-it/qrcodes/🤝.png differ diff --git a/projects/postit-gen/proto-post-it/qrcodes/🧉.png b/projects/postit-gen/proto-post-it/qrcodes/🧉.png new file mode 100644 index 0000000..41bb11e Binary files /dev/null and b/projects/postit-gen/proto-post-it/qrcodes/🧉.png differ diff --git a/projects/postit-gen/proto-post-it/test-map/.ipynb_checkpoints/map-checkpoint.svg b/projects/postit-gen/proto-post-it/test-map/.ipynb_checkpoints/map-checkpoint.svg new file mode 100644 index 0000000..af1bb8d --- /dev/null +++ b/projects/postit-gen/proto-post-it/test-map/.ipynb_checkpoints/map-checkpoint.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/projects/postit-gen/proto-post-it/test-map/.ipynb_checkpoints/test svg map-checkpoint.ipynb b/projects/postit-gen/proto-post-it/test-map/.ipynb_checkpoints/test svg map-checkpoint.ipynb new file mode 100644 index 0000000..2bee8f0 --- /dev/null +++ b/projects/postit-gen/proto-post-it/test-map/.ipynb_checkpoints/test svg map-checkpoint.ipynb @@ -0,0 +1,143 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 1, + "id": "68a8ec84-7d7a-4145-92ca-e35bae9ffe92", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "Defaulting to user installation because normal site-packages is not writeable\n", + "Looking in indexes: https://pypi.org/simple, https://www.piwheels.org/simple\n", + "Collecting svgwrite\n", + " Downloading https://www.piwheels.org/simple/svgwrite/svgwrite-1.4.1-py3-none-any.whl (66 kB)\n", + "\u001b[2K \u001b[90m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\u001b[0m \u001b[32m67.0/67.0 KB\u001b[0m \u001b[31m2.3 MB/s\u001b[0m eta \u001b[36m0:00:00\u001b[0m\n", + "\u001b[?25hInstalling collected packages: svgwrite\n", + "Successfully installed svgwrite-1.4.1\n" + ] + } + ], + "source": [ + "!pip install svgwrite" + ] + }, + { + "cell_type": "code", + "execution_count": 9, + "id": "4d5a776b-5e07-498d-ade3-310bd5d29b22", + "metadata": {}, + "outputs": [ + { + "data": { + "image/svg+xml": [ + "Test" + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "import svgwrite\n", + "from IPython.core.display import SVG, display\n", + "\n", + "dwg = svgwrite.Drawing('test.svg', profile='tiny', size=(595, 842) )\n", + "dwg.add(dwg.line((0, 0), (10, 50), stroke=svgwrite.rgb(10, 10, 16, '%')))\n", + "dwg.add(dwg.text('Test', insert=(0, 0.2)))\n", + "dwg.save()\n", + "\n", + "display(SVG(filename=f'test.svg'))" + ] + }, + { + "cell_type": "code", + "execution_count": 41, + "id": "93b6030a-22e5-44a8-b261-26d64112eb92", + "metadata": {}, + "outputs": [ + { + "data": { + "image/svg+xml": [ + "" + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "import svgwrite\n", + "from svgwrite import cm, mm\n", + "\n", + "width = 210\n", + "height = 297\n", + "\n", + "rows = 6\n", + "columns = 4\n", + "\n", + "cell_size = (width/columns, height/rows)\n", + "\n", + "color = svgwrite.rgb(0,0,0, '%')\n", + "background = svgwrite.rgb(100,95,95,'%')\n", + "\n", + "\n", + "sheet = svgwrite.Drawing('map.svg', profile='tiny', size=(width * mm, height * mm))\n", + "# sheet.add(sheet.rect((0,0), (width * mm, height * mm), fill=background))\n", + "\n", + "grid = sheet.add(sheet.g(id='grid', stroke='gainsboro')).dasharray([10, 10])\n", + "\n", + "\n", + "for row in range(rows + 1):\n", + " y = cell_size[1] * row \n", + " grid.add(sheet.line((0, y * mm), (width * mm, y * mm)))\n", + " \n", + "for col in range(columns + 1):\n", + " x = cell_size[0] * col\n", + " grid.add(sheet.line((x * mm, 0), (x * mm,height * mm)))\n", + "\n", + " \n", + " \n", + "sheet.save()\n", + "display(SVG(filename=f'map.svg'))" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "0e573286-ef9e-42ac-a0e7-2981849a5662", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/projects/postit-gen/proto-post-it/test-map/.ipynb_checkpoints/test-checkpoint.svg b/projects/postit-gen/proto-post-it/test-map/.ipynb_checkpoints/test-checkpoint.svg new file mode 100644 index 0000000..f2c52f4 --- /dev/null +++ b/projects/postit-gen/proto-post-it/test-map/.ipynb_checkpoints/test-checkpoint.svg @@ -0,0 +1,2 @@ + +Test \ No newline at end of file diff --git a/projects/postit-gen/proto-post-it/test-map/.ipynb_checkpoints/test-post-it-checkpoint.ipynb b/projects/postit-gen/proto-post-it/test-map/.ipynb_checkpoints/test-post-it-checkpoint.ipynb new file mode 100644 index 0000000..1e32bc1 --- /dev/null +++ b/projects/postit-gen/proto-post-it/test-map/.ipynb_checkpoints/test-post-it-checkpoint.ipynb @@ -0,0 +1,183 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 1, + "id": "68a8ec84-7d7a-4145-92ca-e35bae9ffe92", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "Defaulting to user installation because normal site-packages is not writeable\n", + "Looking in indexes: https://pypi.org/simple, https://www.piwheels.org/simple\n", + "Collecting svgwrite\n", + " Downloading https://www.piwheels.org/simple/svgwrite/svgwrite-1.4.1-py3-none-any.whl (66 kB)\n", + "\u001b[2K \u001b[90m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\u001b[0m \u001b[32m67.0/67.0 KB\u001b[0m \u001b[31m2.3 MB/s\u001b[0m eta \u001b[36m0:00:00\u001b[0m\n", + "\u001b[?25hInstalling collected packages: svgwrite\n", + "Successfully installed svgwrite-1.4.1\n" + ] + } + ], + "source": [ + "!pip install svgwrite" + ] + }, + { + "cell_type": "code", + "execution_count": 9, + "id": "4d5a776b-5e07-498d-ade3-310bd5d29b22", + "metadata": {}, + "outputs": [ + { + "data": { + "image/svg+xml": [ + "Test" + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "import svgwrite\n", + "from IPython.core.display import SVG, display\n", + "\n", + "dwg = svgwrite.Drawing('test.svg', profile='tiny', size=(595, 842) )\n", + "dwg.add(dwg.line((0, 0), (10, 50), stroke=svgwrite.rgb(10, 10, 16, '%')))\n", + "dwg.add(dwg.text('Test', insert=(0, 0.2)))\n", + "dwg.save()\n", + "\n", + "display(SVG(filename=f'test.svg'))" + ] + }, + { + "cell_type": "code", + "execution_count": 99, + "id": "93b6030a-22e5-44a8-b261-26d64112eb92", + "metadata": {}, + "outputs": [ + { + "data": { + "image/svg+xml": [ + "" + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "import svgwrite\n", + "from svgwrite import cm, mm\n", + "\n", + "import random\n", + "\n", + "# We are using real world sizes in order to match with the post-it placeholders \n", + "\n", + "debug = True\n", + "\n", + "width = 210\n", + "height = 297\n", + "\n", + "rows = 6\n", + "columns = 4\n", + "\n", + "cell_size = (width/columns, height/rows)\n", + "\n", + "color = svgwrite.rgb(0,0,0, '%')\n", + "background = svgwrite.rgb(100,95,95,'%')\n", + "\n", + "\n", + "# setup the SVG\n", + "sheet = svgwrite.Drawing('map.svg', profile='tiny', size=(width * mm, height * mm))\n", + "\n", + "\n", + "# draw debug helper grid\n", + "if debug:\n", + " grid = sheet.add(sheet.g(id='grid', stroke='dodgerblue')).dasharray([5, 5])\n", + "\n", + " for row in range(rows + 1):\n", + " y = cell_size[1] * row \n", + " grid.add(sheet.line((0, y * mm), (width * mm, y * mm)))\n", + "\n", + " for col in range(columns + 1):\n", + " x = cell_size[0] * col\n", + " grid.add(sheet.line((x * mm, 0), (x * mm,height * mm)))\n", + "\n", + "\n", + "# defining the basic shapes\n", + "\n", + "def quad_post(x, y):\n", + " quad_post_size = (50 * mm, 50 * mm)\n", + " return svgwrite.shapes.Rect(insert=(x,y), size=quad_post_size, stroke=color, fill='none')\n", + "\n", + "\n", + "# adding a group for the post-it placeholders\n", + "placeholders = sheet.add(sheet.g(id='placeholders', stroke='black'))\n", + "\n", + "for row in range(rows + 1):\n", + " for col in range(columns + 1):\n", + " if random.random() > 0.5:\n", + " placeholders.add(quad_post(col * cell_size[1] * mm, row * cell_size[0] * mm))\n", + " \n", + " \n", + " \n", + "sheet.save()\n", + "display(SVG(filename=f'map.svg'))" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "0e573286-ef9e-42ac-a0e7-2981849a5662", + "metadata": {}, + "outputs": [], + "source": [] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "5c2e2b89-9e63-4a58-a8a2-65e589d0432b", + "metadata": {}, + "outputs": [], + "source": [] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "f0e007c0-1eba-4a80-b91f-79efcb34442f", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/projects/postit-gen/proto-post-it/test-map/map.svg b/projects/postit-gen/proto-post-it/test-map/map.svg new file mode 100644 index 0000000..4741867 --- /dev/null +++ b/projects/postit-gen/proto-post-it/test-map/map.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/projects/postit-gen/proto-post-it/test-map/test svg map.ipynb b/projects/postit-gen/proto-post-it/test-map/test svg map.ipynb new file mode 100644 index 0000000..917380d --- /dev/null +++ b/projects/postit-gen/proto-post-it/test-map/test svg map.ipynb @@ -0,0 +1,183 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 1, + "id": "68a8ec84-7d7a-4145-92ca-e35bae9ffe92", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "Defaulting to user installation because normal site-packages is not writeable\n", + "Looking in indexes: https://pypi.org/simple, https://www.piwheels.org/simple\n", + "Collecting svgwrite\n", + " Downloading https://www.piwheels.org/simple/svgwrite/svgwrite-1.4.1-py3-none-any.whl (66 kB)\n", + "\u001b[2K \u001b[90m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\u001b[0m \u001b[32m67.0/67.0 KB\u001b[0m \u001b[31m2.3 MB/s\u001b[0m eta \u001b[36m0:00:00\u001b[0m\n", + "\u001b[?25hInstalling collected packages: svgwrite\n", + "Successfully installed svgwrite-1.4.1\n" + ] + } + ], + "source": [ + "!pip install svgwrite" + ] + }, + { + "cell_type": "code", + "execution_count": 9, + "id": "4d5a776b-5e07-498d-ade3-310bd5d29b22", + "metadata": {}, + "outputs": [ + { + "data": { + "image/svg+xml": [ + "Test" + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "import svgwrite\n", + "from IPython.core.display import SVG, display\n", + "\n", + "dwg = svgwrite.Drawing('test.svg', profile='tiny', size=(595, 842) )\n", + "dwg.add(dwg.line((0, 0), (10, 50), stroke=svgwrite.rgb(10, 10, 16, '%')))\n", + "dwg.add(dwg.text('Test', insert=(0, 0.2)))\n", + "dwg.save()\n", + "\n", + "display(SVG(filename=f'test.svg'))" + ] + }, + { + "cell_type": "code", + "execution_count": 102, + "id": "93b6030a-22e5-44a8-b261-26d64112eb92", + "metadata": {}, + "outputs": [ + { + "data": { + "image/svg+xml": [ + "" + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "import svgwrite\n", + "from svgwrite import cm, mm\n", + "\n", + "import random\n", + "\n", + "# We are using real world sizes in order to match with the post-it placeholders \n", + "\n", + "debug = True\n", + "\n", + "width = 210\n", + "height = 297\n", + "\n", + "rows = 6\n", + "columns = 4\n", + "\n", + "cell_size = (width/columns, height/rows)\n", + "\n", + "color = svgwrite.rgb(0,0,0, '%')\n", + "background = svgwrite.rgb(100,95,95,'%')\n", + "\n", + "\n", + "# setup the SVG\n", + "sheet = svgwrite.Drawing('map.svg', profile='tiny', size=(width * mm, height * mm))\n", + "\n", + "\n", + "# draw debug helper grid\n", + "if debug:\n", + " grid = sheet.add(sheet.g(id='grid', stroke='dodgerblue')).dasharray([5, 5])\n", + "\n", + " for row in range(rows + 1):\n", + " y = cell_size[1] * row \n", + " grid.add(sheet.line((0, y * mm), (width * mm, y * mm)))\n", + "\n", + " for col in range(columns + 1):\n", + " x = cell_size[0] * col\n", + " grid.add(sheet.line((x * mm, 0), (x * mm,height * mm)))\n", + "\n", + "\n", + "# defining the basic shapes\n", + "\n", + "def quad_post(x, y):\n", + " quad_post_size = (50 * mm, 50 * mm)\n", + " return svgwrite.shapes.Rect(insert=(x,y), size=quad_post_size, stroke=color, fill='none')\n", + "\n", + "\n", + "# adding a group for the post-it placeholders\n", + "placeholders = sheet.add(sheet.g(id='placeholders', stroke='black'))\n", + "\n", + "for row in range(rows + 1):\n", + " for col in range(columns + 1):\n", + " if random.random() > 0.5:\n", + " placeholders.add(quad_post(col * cell_size[1] * mm, row * cell_size[0] * mm))\n", + " \n", + " \n", + " \n", + "sheet.save()\n", + "display(SVG(filename=f'map.svg'))" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "0e573286-ef9e-42ac-a0e7-2981849a5662", + "metadata": {}, + "outputs": [], + "source": [] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "5c2e2b89-9e63-4a58-a8a2-65e589d0432b", + "metadata": {}, + "outputs": [], + "source": [] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "f0e007c0-1eba-4a80-b91f-79efcb34442f", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/projects/postit-gen/proto-post-it/test-map/test-post-it.ipynb b/projects/postit-gen/proto-post-it/test-map/test-post-it.ipynb new file mode 100644 index 0000000..1e32bc1 --- /dev/null +++ b/projects/postit-gen/proto-post-it/test-map/test-post-it.ipynb @@ -0,0 +1,183 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 1, + "id": "68a8ec84-7d7a-4145-92ca-e35bae9ffe92", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "Defaulting to user installation because normal site-packages is not writeable\n", + "Looking in indexes: https://pypi.org/simple, https://www.piwheels.org/simple\n", + "Collecting svgwrite\n", + " Downloading https://www.piwheels.org/simple/svgwrite/svgwrite-1.4.1-py3-none-any.whl (66 kB)\n", + "\u001b[2K \u001b[90m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\u001b[0m \u001b[32m67.0/67.0 KB\u001b[0m \u001b[31m2.3 MB/s\u001b[0m eta \u001b[36m0:00:00\u001b[0m\n", + "\u001b[?25hInstalling collected packages: svgwrite\n", + "Successfully installed svgwrite-1.4.1\n" + ] + } + ], + "source": [ + "!pip install svgwrite" + ] + }, + { + "cell_type": "code", + "execution_count": 9, + "id": "4d5a776b-5e07-498d-ade3-310bd5d29b22", + "metadata": {}, + "outputs": [ + { + "data": { + "image/svg+xml": [ + "Test" + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "import svgwrite\n", + "from IPython.core.display import SVG, display\n", + "\n", + "dwg = svgwrite.Drawing('test.svg', profile='tiny', size=(595, 842) )\n", + "dwg.add(dwg.line((0, 0), (10, 50), stroke=svgwrite.rgb(10, 10, 16, '%')))\n", + "dwg.add(dwg.text('Test', insert=(0, 0.2)))\n", + "dwg.save()\n", + "\n", + "display(SVG(filename=f'test.svg'))" + ] + }, + { + "cell_type": "code", + "execution_count": 99, + "id": "93b6030a-22e5-44a8-b261-26d64112eb92", + "metadata": {}, + "outputs": [ + { + "data": { + "image/svg+xml": [ + "" + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "import svgwrite\n", + "from svgwrite import cm, mm\n", + "\n", + "import random\n", + "\n", + "# We are using real world sizes in order to match with the post-it placeholders \n", + "\n", + "debug = True\n", + "\n", + "width = 210\n", + "height = 297\n", + "\n", + "rows = 6\n", + "columns = 4\n", + "\n", + "cell_size = (width/columns, height/rows)\n", + "\n", + "color = svgwrite.rgb(0,0,0, '%')\n", + "background = svgwrite.rgb(100,95,95,'%')\n", + "\n", + "\n", + "# setup the SVG\n", + "sheet = svgwrite.Drawing('map.svg', profile='tiny', size=(width * mm, height * mm))\n", + "\n", + "\n", + "# draw debug helper grid\n", + "if debug:\n", + " grid = sheet.add(sheet.g(id='grid', stroke='dodgerblue')).dasharray([5, 5])\n", + "\n", + " for row in range(rows + 1):\n", + " y = cell_size[1] * row \n", + " grid.add(sheet.line((0, y * mm), (width * mm, y * mm)))\n", + "\n", + " for col in range(columns + 1):\n", + " x = cell_size[0] * col\n", + " grid.add(sheet.line((x * mm, 0), (x * mm,height * mm)))\n", + "\n", + "\n", + "# defining the basic shapes\n", + "\n", + "def quad_post(x, y):\n", + " quad_post_size = (50 * mm, 50 * mm)\n", + " return svgwrite.shapes.Rect(insert=(x,y), size=quad_post_size, stroke=color, fill='none')\n", + "\n", + "\n", + "# adding a group for the post-it placeholders\n", + "placeholders = sheet.add(sheet.g(id='placeholders', stroke='black'))\n", + "\n", + "for row in range(rows + 1):\n", + " for col in range(columns + 1):\n", + " if random.random() > 0.5:\n", + " placeholders.add(quad_post(col * cell_size[1] * mm, row * cell_size[0] * mm))\n", + " \n", + " \n", + " \n", + "sheet.save()\n", + "display(SVG(filename=f'map.svg'))" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "0e573286-ef9e-42ac-a0e7-2981849a5662", + "metadata": {}, + "outputs": [], + "source": [] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "5c2e2b89-9e63-4a58-a8a2-65e589d0432b", + "metadata": {}, + "outputs": [], + "source": [] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "f0e007c0-1eba-4a80-b91f-79efcb34442f", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/projects/postit-gen/proto-post-it/test-map/test.svg b/projects/postit-gen/proto-post-it/test-map/test.svg new file mode 100644 index 0000000..f2c52f4 --- /dev/null +++ b/projects/postit-gen/proto-post-it/test-map/test.svg @@ -0,0 +1,2 @@ + +Test \ No newline at end of file diff --git a/projects/postit-gen/proto-post-it/test-post-it/.ipynb_checkpoints/post-it-checkpoint.ipynb b/projects/postit-gen/proto-post-it/test-post-it/.ipynb_checkpoints/post-it-checkpoint.ipynb new file mode 100644 index 0000000..07320e2 --- /dev/null +++ b/projects/postit-gen/proto-post-it/test-post-it/.ipynb_checkpoints/post-it-checkpoint.ipynb @@ -0,0 +1,153 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 56, + "id": "7509b086-30fd-484a-9487-233aba8765f5", + "metadata": {}, + "outputs": [ + { + "data": { + "image/svg+xml": [ + "" + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "import svgwrite\n", + "from svgwrite import cm, mm\n", + "from math import floor\n", + "from IPython.core.display import SVG, display\n", + "import frontmatter\n", + "\n", + "\n", + "debug = True\n", + "\n", + "# We are using real world sizes in order to match with the post-it placeholders \n", + "\n", + "width = 210\n", + "height = 297\n", + "\n", + "postit_width = 70\n", + "postit_height = 70\n", + "\n", + "rows = floor(height / postit_height)\n", + "columns = floor(width / postit_width)\n", + "\n", + "\n", + "color = svgwrite.rgb(0,0,0, '%')\n", + "background = svgwrite.rgb(100,95,95,'%')\n", + "\n", + "\n", + "# setup the SVG\n", + "sheet = svgwrite.Drawing('post-it.svg', profile='tiny', size=(width * mm, height * mm))\n", + "\n", + "\n", + "# draw debug helper grid\n", + "if debug:\n", + " helpers = sheet.add(sheet.g(id='helpers', stroke='dodgerblue')).dasharray([5, 5])\n", + "\n", + " for row in range(rows + 1):\n", + " y = postit_height * row \n", + " helpers.add(sheet.line((0, y * mm), (postit_width * columns * mm, y * mm)))\n", + "\n", + " for col in range(columns + 1):\n", + " x = postit_width * col\n", + " helpers.add(sheet.line((x * mm, 0), (x * mm, postit_height * rows * mm)))\n", + "\n", + "\n", + "import frontmatter\n", + "with open(\"1sentencegames/contents.md\", \"r\") as f:\n", + " metadata, content = frontmatter.parse(f.read())\n", + " contents = metadata['contents']\n", + "\n", + " \n", + "for row in range(rows):\n", + " for col in range(columns):\n", + " \n", + " x = postit_width * col \n", + " y = postit_height * row \n", + " \n", + " \n", + " textArea = sheet.textArea(\n", + " 'hehe',\n", + " insert=(x * mm,y * mm),\n", + " width=postit_width * mm,\n", + " height=postit_height * mm,\n", + " stroke='none',\n", + " fill=color,\n", + " font_size='12px'\n", + " )\n", + " \n", + " sheet.add(textArea)\n", + " \n", + " \n", + " \n", + " \n", + "\n", + " \n", + "\n", + "\n", + " \n", + " \n", + "sheet.save()\n", + "display(SVG(filename=f'post-it.svg'))" + ] + }, + { + "cell_type": "code", + "execution_count": 17, + "id": "d334c0ec-fbbb-4437-b848-a69871fbf983", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "5 min slow-mo epidemics, visual transmitted\n" + ] + } + ], + "source": [ + "\n", + " \n", + " \n" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "72506b55-7151-4407-ab36-0dd5adfc3855", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/projects/postit-gen/proto-post-it/test-post-it/.ipynb_checkpoints/post-it-checkpoint.svg b/projects/postit-gen/proto-post-it/test-post-it/.ipynb_checkpoints/post-it-checkpoint.svg new file mode 100644 index 0000000..dbe2f62 --- /dev/null +++ b/projects/postit-gen/proto-post-it/test-post-it/.ipynb_checkpoints/post-it-checkpoint.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/projects/postit-gen/proto-post-it/test-post-it/1sentencegames/.ipynb_checkpoints/contents-checkpoint.md b/projects/postit-gen/proto-post-it/test-post-it/1sentencegames/.ipynb_checkpoints/contents-checkpoint.md new file mode 100644 index 0000000..6d43b72 --- /dev/null +++ b/projects/postit-gen/proto-post-it/test-post-it/1sentencegames/.ipynb_checkpoints/contents-checkpoint.md @@ -0,0 +1,15 @@ +--- +title: One sentence game ideas +contents: + - you are in an empty room with 13 doors that are portals to 13 different worlds. + - 5 min slow-mo epidemics, visual transmitted + - every crisis is a simulation of another crisis / every crisis is a preparation for another crisis + - you receive a point for each moving/floating tile on the street you encounter + - you sleep and the more you sleep, the more the buildings around the bedroom collapse and the nature starts growing and invading the space + - thermoSTATE - The state where no citizen has to feel cold + - The same day is looping over and over, the goal is to figure out which decision will make you move on to the next day. + - A flat with no floors + - Hello, where are you, what can you see from there? + - you give a gift to someone else, that person gives another gift to someone else + - you meet a person in a corridor, but you're in a supermarket, in Canada<3:D +--- \ No newline at end of file diff --git a/projects/postit-gen/proto-post-it/test-post-it/1sentencegames/contents.md b/projects/postit-gen/proto-post-it/test-post-it/1sentencegames/contents.md new file mode 100644 index 0000000..6d43b72 --- /dev/null +++ b/projects/postit-gen/proto-post-it/test-post-it/1sentencegames/contents.md @@ -0,0 +1,15 @@ +--- +title: One sentence game ideas +contents: + - you are in an empty room with 13 doors that are portals to 13 different worlds. + - 5 min slow-mo epidemics, visual transmitted + - every crisis is a simulation of another crisis / every crisis is a preparation for another crisis + - you receive a point for each moving/floating tile on the street you encounter + - you sleep and the more you sleep, the more the buildings around the bedroom collapse and the nature starts growing and invading the space + - thermoSTATE - The state where no citizen has to feel cold + - The same day is looping over and over, the goal is to figure out which decision will make you move on to the next day. + - A flat with no floors + - Hello, where are you, what can you see from there? + - you give a gift to someone else, that person gives another gift to someone else + - you meet a person in a corridor, but you're in a supermarket, in Canada<3:D +--- \ No newline at end of file diff --git a/projects/postit-gen/proto-post-it/test-post-it/post-it.ipynb b/projects/postit-gen/proto-post-it/test-post-it/post-it.ipynb new file mode 100644 index 0000000..97d6aa2 --- /dev/null +++ b/projects/postit-gen/proto-post-it/test-post-it/post-it.ipynb @@ -0,0 +1,151 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 58, + "id": "7509b086-30fd-484a-9487-233aba8765f5", + "metadata": {}, + "outputs": [ + { + "data": { + "image/svg+xml": [ + "you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds." + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "import svgwrite\n", + "from svgwrite import cm, mm\n", + "from math import floor\n", + "from IPython.core.display import SVG, display\n", + "import frontmatter\n", + "\n", + "\n", + "debug = True\n", + "\n", + "# We are using real world sizes in order to match with the post-it placeholders \n", + "\n", + "width = 210\n", + "height = 297\n", + "\n", + "postit_width = 70\n", + "postit_height = 70\n", + "\n", + "rows = floor(height / postit_height)\n", + "columns = floor(width / postit_width)\n", + "\n", + "\n", + "color = svgwrite.rgb(0,0,0, '%')\n", + "background = svgwrite.rgb(100,95,95,'%')\n", + "\n", + "\n", + "# setup the SVG\n", + "sheet = svgwrite.Drawing('post-it.svg', profile='tiny', size=(width * mm, height * mm))\n", + "\n", + "\n", + "# draw debug helper grid\n", + "if debug:\n", + " helpers = sheet.add(sheet.g(id='helpers', stroke='dodgerblue')).dasharray([5, 5])\n", + "\n", + " for row in range(rows + 1):\n", + " y = postit_height * row \n", + " helpers.add(sheet.line((0, y * mm), (postit_width * columns * mm, y * mm)))\n", + "\n", + " for col in range(columns + 1):\n", + " x = postit_width * col\n", + " helpers.add(sheet.line((x * mm, 0), (x * mm, postit_height * rows * mm)))\n", + "\n", + "\n", + "import frontmatter\n", + "with open(\"1sentencegames/contents.md\", \"r\") as f:\n", + " metadata, content = frontmatter.parse(f.read())\n", + " contents = metadata['contents']\n", + "\n", + " \n", + "for row in range(rows):\n", + " for col in range(columns):\n", + " \n", + " x = postit_width * col \n", + " y = postit_height * row \n", + " \n", + " \n", + " textArea = sheet.text(\n", + " contents[0],\n", + " insert=(x * mm,y * mm),\n", + " stroke='none',\n", + " fill=color,\n", + " font_size='12px'\n", + " )\n", + " \n", + " sheet.add(textArea)\n", + " \n", + " \n", + " \n", + " \n", + "\n", + " \n", + "\n", + "\n", + " \n", + " \n", + "sheet.save()\n", + "display(SVG(filename=f'post-it.svg'))" + ] + }, + { + "cell_type": "code", + "execution_count": 17, + "id": "d334c0ec-fbbb-4437-b848-a69871fbf983", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "5 min slow-mo epidemics, visual transmitted\n" + ] + } + ], + "source": [ + "\n", + " \n", + " \n" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "72506b55-7151-4407-ab36-0dd5adfc3855", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/projects/postit-gen/proto-post-it/test-post-it/post-it.svg b/projects/postit-gen/proto-post-it/test-post-it/post-it.svg new file mode 100644 index 0000000..caade24 --- /dev/null +++ b/projects/postit-gen/proto-post-it/test-post-it/post-it.svg @@ -0,0 +1,2 @@ + +you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds.you are in an empty room with 13 doors that are portals to 13 different worlds. \ No newline at end of file diff --git a/projects/postit-gen/proto-post-it/titles.pdf b/projects/postit-gen/proto-post-it/titles.pdf new file mode 100644 index 0000000..dc77e86 Binary files /dev/null and b/projects/postit-gen/proto-post-it/titles.pdf differ diff --git a/projects/postit-identity/.ipynb_checkpoints/documentation-checkpoint.md b/projects/postit-identity/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..82a9f71 --- /dev/null +++ b/projects/postit-identity/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,119 @@ +--- +title: Post-it Visual Identity +description: How to deliver a pubblication in post-it format +categories: + - SI17 + - Visual +date: 20/03/2022 +cover: postit-id.jpg +cover_alt: various postit +links: + - url: https://www.figma.com/file/wVdpA2iwKN3hT9YXONqXTj/SI17?node-id=0%3A1 + title: Figma +--- + +## Small pages big text + +Working with the post-it format the team1 (supi, mitsa, erica, me) approached the visual identity with two things in mind: + +1. The office aesthetic, that kind of default aura that surrounds workspaces +2. The blurred line between personal writings such as memos and todolists and formal documents. + +We used the post-it format as a module. Short sentences, big font size, different writing styles, few images. The idea was to facilitate a non-linear combination across the original page order of the pubblication. We choose not to put page numbers: instead we opted for a progress bar in each contribution. + +In the body of the post-it we stayed simple using a default sans-serif font. We used the Bitsi font from Supi and Jian for the covers of each contribution and the main index. + + + +## Post-it + +We designed 8 types of post-it: from text and image post-it to complex card layout, we tried to embed the form of every contribution in the generator pipeline. + +### Text + +The basic type of post-it was the text one. We went with a super big font-size and an unexpected alignment. After a certain amount of characters the font-size is set to shrink a bit for a small text version. + +![Text](/soupboat/~kamo/static/img/post-it/text.jpg) +_From What is a loot box?_ + +![Text Small](/soupboat/~kamo/static/img/post-it/small-text.jpg) +_From Life Hacks!_ + + + +### Dialogue + +It can display text in the four corners of the postit. Used for the NIM dialogue and some single word sentence in What is a loot box? + +![Dialogue](/soupboat/~kamo/static/img/post-it/dialogue.jpg) +_Dialogue_ + + + +### Definition and Cell + +Definitions and cells are the main modules for the Crossword Imaginary Grid Game from Emma. Each cell occupies a position in a grid, and is used to build the crossword structure. The definitions indicate a starting point and some hints to guess the word. + +![Image](/soupboat/~kamo/static/img/post-it/definition.jpg) +_Definition_ + +![Picutre](/soupboat/~kamo/static/img/post-it/cell.jpg) +_Cell_ + + + +### Card + + +Card designed starting from the layout Miriam prepared for her version of the game Quartet. + +![Card](/soupboat/~kamo/static/img/post-it/card.jpg) +_Card_ + + + +### Image & Picture + +For images we decided on a full page approach. We have two post-it: image is for normal images, while picture is for graphics that folllow the pubblication main color. Both can display a caption in overlay. + +![Image](/soupboat/~kamo/static/img/post-it/image.jpg) +_From Katamari Fanfic_ + +![Picutre](/soupboat/~kamo/static/img/post-it/picture.jpg) +_From Xquisite Branch_ + + + +### QR code + +For QR code we choose to be as messy as possible. QR carries a specific visual language. We tried to force it into something else by cloning each code in repetition, with a glitchy result. + +![NIM Fanfic](/soupboat/~kamo/static/img/post-it/qr.jpg) +_QR codes_ + + + +### Covers + + +We played a lot with the contributions' cover. The starting point was always the title of the special issue in the bitsi font. On top of that we designed some sketches related to the contents. + +![Katamari](/soupboat/~kamo/static/img/post-it/orange-katamari.svg) +_Katamari Fanfic_ + +![unfinished thoughts](/soupboat/~kamo/static/img/post-it/orange-unfinished-thoughts.svg) +_Unfinished Thoughts_ + +![NIM Fanfic](/soupboat/~kamo/static/img/post-it/orange-nim.svg) +_NIM Fanfic_ + +![Crosswords](/soupboat/~kamo/static/img/post-it/orange-crossword.svg) +_Imaginary Crossword Grig Game_ + + +### Index + +For the index we used the combination of normal and bitsi font. This approach was reused then in the SI17 home page. + +![Index](/soupboat/~kamo/static/img/post-it/index.jpg) +_Index_ diff --git a/projects/postit-identity/documentation.md b/projects/postit-identity/documentation.md new file mode 100644 index 0000000..82a9f71 --- /dev/null +++ b/projects/postit-identity/documentation.md @@ -0,0 +1,119 @@ +--- +title: Post-it Visual Identity +description: How to deliver a pubblication in post-it format +categories: + - SI17 + - Visual +date: 20/03/2022 +cover: postit-id.jpg +cover_alt: various postit +links: + - url: https://www.figma.com/file/wVdpA2iwKN3hT9YXONqXTj/SI17?node-id=0%3A1 + title: Figma +--- + +## Small pages big text + +Working with the post-it format the team1 (supi, mitsa, erica, me) approached the visual identity with two things in mind: + +1. The office aesthetic, that kind of default aura that surrounds workspaces +2. The blurred line between personal writings such as memos and todolists and formal documents. + +We used the post-it format as a module. Short sentences, big font size, different writing styles, few images. The idea was to facilitate a non-linear combination across the original page order of the pubblication. We choose not to put page numbers: instead we opted for a progress bar in each contribution. + +In the body of the post-it we stayed simple using a default sans-serif font. We used the Bitsi font from Supi and Jian for the covers of each contribution and the main index. + + + +## Post-it + +We designed 8 types of post-it: from text and image post-it to complex card layout, we tried to embed the form of every contribution in the generator pipeline. + +### Text + +The basic type of post-it was the text one. We went with a super big font-size and an unexpected alignment. After a certain amount of characters the font-size is set to shrink a bit for a small text version. + +![Text](/soupboat/~kamo/static/img/post-it/text.jpg) +_From What is a loot box?_ + +![Text Small](/soupboat/~kamo/static/img/post-it/small-text.jpg) +_From Life Hacks!_ + + + +### Dialogue + +It can display text in the four corners of the postit. Used for the NIM dialogue and some single word sentence in What is a loot box? + +![Dialogue](/soupboat/~kamo/static/img/post-it/dialogue.jpg) +_Dialogue_ + + + +### Definition and Cell + +Definitions and cells are the main modules for the Crossword Imaginary Grid Game from Emma. Each cell occupies a position in a grid, and is used to build the crossword structure. The definitions indicate a starting point and some hints to guess the word. + +![Image](/soupboat/~kamo/static/img/post-it/definition.jpg) +_Definition_ + +![Picutre](/soupboat/~kamo/static/img/post-it/cell.jpg) +_Cell_ + + + +### Card + + +Card designed starting from the layout Miriam prepared for her version of the game Quartet. + +![Card](/soupboat/~kamo/static/img/post-it/card.jpg) +_Card_ + + + +### Image & Picture + +For images we decided on a full page approach. We have two post-it: image is for normal images, while picture is for graphics that folllow the pubblication main color. Both can display a caption in overlay. + +![Image](/soupboat/~kamo/static/img/post-it/image.jpg) +_From Katamari Fanfic_ + +![Picutre](/soupboat/~kamo/static/img/post-it/picture.jpg) +_From Xquisite Branch_ + + + +### QR code + +For QR code we choose to be as messy as possible. QR carries a specific visual language. We tried to force it into something else by cloning each code in repetition, with a glitchy result. + +![NIM Fanfic](/soupboat/~kamo/static/img/post-it/qr.jpg) +_QR codes_ + + + +### Covers + + +We played a lot with the contributions' cover. The starting point was always the title of the special issue in the bitsi font. On top of that we designed some sketches related to the contents. + +![Katamari](/soupboat/~kamo/static/img/post-it/orange-katamari.svg) +_Katamari Fanfic_ + +![unfinished thoughts](/soupboat/~kamo/static/img/post-it/orange-unfinished-thoughts.svg) +_Unfinished Thoughts_ + +![NIM Fanfic](/soupboat/~kamo/static/img/post-it/orange-nim.svg) +_NIM Fanfic_ + +![Crosswords](/soupboat/~kamo/static/img/post-it/orange-crossword.svg) +_Imaginary Crossword Grig Game_ + + +### Index + +For the index we used the combination of normal and bitsi font. This approach was reused then in the SI17 home page. + +![Index](/soupboat/~kamo/static/img/post-it/index.jpg) +_Index_ diff --git a/projects/rejection/.ipynb_checkpoints/documentation-checkpoint.md b/projects/rejection/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..f81b528 --- /dev/null +++ b/projects/rejection/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,15 @@ +--- +title: Rejection 🧠⛈️ +date: 19/10/2021 +url: /soupboat/rejection/ +description: Round glossary just for fun ok +pad: https://pad.xpub.nl/p/GroupMeeting_18102021 +links: + - url: https://pad.xpub.nl/p/Rejection_Glossary + title: Glossary + - url: https://pzwiki.wdka.nl/mediadesign/Rejection + title: Wiki +categories: + - SI16 + - Process +--- \ No newline at end of file diff --git a/projects/rejection/documentation.md b/projects/rejection/documentation.md new file mode 100644 index 0000000..f81b528 --- /dev/null +++ b/projects/rejection/documentation.md @@ -0,0 +1,15 @@ +--- +title: Rejection 🧠⛈️ +date: 19/10/2021 +url: /soupboat/rejection/ +description: Round glossary just for fun ok +pad: https://pad.xpub.nl/p/GroupMeeting_18102021 +links: + - url: https://pad.xpub.nl/p/Rejection_Glossary + title: Glossary + - url: https://pzwiki.wdka.nl/mediadesign/Rejection + title: Wiki +categories: + - SI16 + - Process +--- \ No newline at end of file diff --git a/projects/si16-API-express-prototype/.ipynb_checkpoints/documentation-checkpoint.md b/projects/si16-API-express-prototype/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..5cecdf8 --- /dev/null +++ b/projects/si16-API-express-prototype/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,40 @@ +--- +title: SI16 API node.js + express prototype +description: Test for an API-based special issue +date: 14/11/2021 +git: +categories: + - Web + - API + - REST + - SI16 +--- + +## Test for an API-based special issue + +- The backend is developed with node.js and express +- Each URL is mapped to a python script. The argument are passed to the script, processed and then returned as JSON +- We start with 2 functions: 1. a find and replace and 2. a shout + +(__update:__ hei this is not active anymore! [but we really did an API at the end!](issue.xpub.nl/16) aha!) + +## Wait what why an API + +![two half bikes attacched with tape and two kids pretty satisfied with their work](/soupboat/~kamo/static/img/api_bikes.jpg) + + +This is to show what an API could be in relation to the exercises we usually do during the prototyping class. +It is a way to render public a piece of work that usually stays behind several layers of accessibility. +The idea of the special issue as an API could be a curated collection of what we are doing since september within a critical context. 🤯 + +### Find and Replace + + +Find a target string in a text and replace it with the given replacement. The parameters are three. + +- `text` the text in which perform the research +- `target` the string we are searching for +- `replacement` the string we want to insert in place of the target + +The endpoint is: +`https://hub.xpub.nl/soupboat/cat-api/replace?text={text}&target={target}&replacement={replacement}` diff --git a/projects/si16-API-express-prototype/documentation.md b/projects/si16-API-express-prototype/documentation.md new file mode 100644 index 0000000..5cecdf8 --- /dev/null +++ b/projects/si16-API-express-prototype/documentation.md @@ -0,0 +1,40 @@ +--- +title: SI16 API node.js + express prototype +description: Test for an API-based special issue +date: 14/11/2021 +git: +categories: + - Web + - API + - REST + - SI16 +--- + +## Test for an API-based special issue + +- The backend is developed with node.js and express +- Each URL is mapped to a python script. The argument are passed to the script, processed and then returned as JSON +- We start with 2 functions: 1. a find and replace and 2. a shout + +(__update:__ hei this is not active anymore! [but we really did an API at the end!](issue.xpub.nl/16) aha!) + +## Wait what why an API + +![two half bikes attacched with tape and two kids pretty satisfied with their work](/soupboat/~kamo/static/img/api_bikes.jpg) + + +This is to show what an API could be in relation to the exercises we usually do during the prototyping class. +It is a way to render public a piece of work that usually stays behind several layers of accessibility. +The idea of the special issue as an API could be a curated collection of what we are doing since september within a critical context. 🤯 + +### Find and Replace + + +Find a target string in a text and replace it with the given replacement. The parameters are three. + +- `text` the text in which perform the research +- `target` the string we are searching for +- `replacement` the string we want to insert in place of the target + +The endpoint is: +`https://hub.xpub.nl/soupboat/cat-api/replace?text={text}&target={target}&replacement={replacement}` diff --git a/projects/si16-API-strapi-nuxt-prototype/.ipynb_checkpoints/documentation-checkpoint.md b/projects/si16-API-strapi-nuxt-prototype/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..7620bbd --- /dev/null +++ b/projects/si16-API-strapi-nuxt-prototype/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,10 @@ +--- +title: SI16 API Strapi-Nuxt prototype +date: 10/11/2021 +description: Test for a node.js backend for the SI16 app +categories: + - JS + - API +--- + +Ehm there should be some videos somewhere sorry \ No newline at end of file diff --git a/projects/si16-API-strapi-nuxt-prototype/documentation.md b/projects/si16-API-strapi-nuxt-prototype/documentation.md new file mode 100644 index 0000000..7620bbd --- /dev/null +++ b/projects/si16-API-strapi-nuxt-prototype/documentation.md @@ -0,0 +1,10 @@ +--- +title: SI16 API Strapi-Nuxt prototype +date: 10/11/2021 +description: Test for a node.js backend for the SI16 app +categories: + - JS + - API +--- + +Ehm there should be some videos somewhere sorry \ No newline at end of file diff --git a/projects/si16-backend/.ipynb_checkpoints/documentation-checkpoint.md b/projects/si16-backend/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..2c45d00 --- /dev/null +++ b/projects/si16-backend/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,74 @@ +--- +title: SI16 Backend +description: Flexible Flask app (~) for the SI16 API +date: 16/12/2021 +cover: SI16_compress.jpg +cover_alt: Varia's window during SI16 launch event +url: /soupboat/si16/ +git: https://git.xpub.nl/grgr/si16-cat-walking/ +categories: + - Python + - SI16 + - Web +--- + +## Familiar and flexible + +Each contribuition to the SI16 API was unique. Both the subgroups' projects and their documentation had different voices, different ways of presenting the contents, and different needs. This specificity required a system that was structured enough to keep together each pace, but remained flexible, in order to let anyone express her own approach to the Special Issue. + +With the SI16 being at the same time a set of functions, a playground to experiment with it, and a list of meaningful projects developed within their context, we structured the backend as an interface between the different parts of the work. + +The main idea was to define a pipeline that was not so different from the processes and technologies we learned and explored during the first trimester. + +## Functions + +We chose to work with the Jupiter Notebook format we were familiar with, as a way to both collect and document our functions. With a common protocol defined within us and some 🐍 pythonic 🐍 (_omg this term is cringe ah ah_) good practices, we wrote a Notebook for each function. In each file there was the definition of the function, as well as a propper documentation and some examples on how to use it. + +A big part of the backend work was to let anyone structure their own notebook freely, deciding how to present the process and the result of each contribuition without forcing a structure. At the end the Flask application was designed to scan all the `notebook` folder and extract from it the function, as well as their input and output, and the documentation. + +With those information we generated an interactive page for [each function](https://hub.xpub.nl/soupboat/si16/functions/) in which the user could try and play around with our functions exposed as an API. + +## Projects + +The organic process of SI16 led us to a collection of several interconnected projects. Each one of them had grown around a specific implementation of the functions we developed for the API. Those complex applications were initally developed as standalone Flask app, and they were merged all together at the end. (_well, ok, after the end to be honest_) + +One thing we could do differently next time is to use Flask's `Blueprints` as a way to work in a more flexible way. At some point we were really struggling about how to manage the code and the collaboration on it. Now that we have an overview of how Python works, it could be nice to develop our projects in a more modular way. BTW we used the documentation pages as a gateway to the projects, in order to have a common starting point. + +Things got a bit complicated when the subgroup I was in started to working on sub-sub-project. And to face that we made the structure open to the possibility to nest projects one into the other, in order to have again flexibility between documentation and interaction on the website, and still a (kinda) structure in the filesystem. + +Actually: we were totally new into this, so probably half of the things we did were not just wrong, but illegal. BTW we are still learning so next time it will be better, deal with it. + +**disclaimer** there are some problems with the xpub git so the source code is still not totally public, but we are working on it. There the code is annotated and each function is documented so I will not go more in detail here for now. + +## Project structure + +``` +si16 +├── contents +├── notebooks +├── projects +│ ├── and-i-wish-that-your-question-has-been-answered +│ ├── annotation-compass +│ │ └── showcases +│ └── etc-portal +├── si16.py +├── static +│ ├── corpora +│ ├── css +│ ├── event +│ ├── font +│ ├── img +│ ├── js +│ └── uploads +└── templates +``` + +- `contents` contains a list of markdown file for generic pages. For example the route `/si16/intro` will search and load the contents from the `intro.md` file in this folder. +- `notebooks` contains a list of Jupiter Notebook files, one for each function we developed for the API. +- `projects` contains a list of folder one for each subgroup project. Each one has a `documentation.md` file with the main contents and process of development. +- `showcases` is a optional folder in each project for nesting other sub projects in the sub project. Convoluted but useful and flexible. +- `si16.py` is the main module for the Flask app and the backend duties. +- `static` contains all the different files that are served statically from the webserver such as images, stylesheets, javascript files, etc. +- `templates` is a Flask folder that contains the HTML templates for generating the frontend pages. + +Ciao ciao diff --git a/projects/si16-backend/documentation.md b/projects/si16-backend/documentation.md new file mode 100644 index 0000000..2c45d00 --- /dev/null +++ b/projects/si16-backend/documentation.md @@ -0,0 +1,74 @@ +--- +title: SI16 Backend +description: Flexible Flask app (~) for the SI16 API +date: 16/12/2021 +cover: SI16_compress.jpg +cover_alt: Varia's window during SI16 launch event +url: /soupboat/si16/ +git: https://git.xpub.nl/grgr/si16-cat-walking/ +categories: + - Python + - SI16 + - Web +--- + +## Familiar and flexible + +Each contribuition to the SI16 API was unique. Both the subgroups' projects and their documentation had different voices, different ways of presenting the contents, and different needs. This specificity required a system that was structured enough to keep together each pace, but remained flexible, in order to let anyone express her own approach to the Special Issue. + +With the SI16 being at the same time a set of functions, a playground to experiment with it, and a list of meaningful projects developed within their context, we structured the backend as an interface between the different parts of the work. + +The main idea was to define a pipeline that was not so different from the processes and technologies we learned and explored during the first trimester. + +## Functions + +We chose to work with the Jupiter Notebook format we were familiar with, as a way to both collect and document our functions. With a common protocol defined within us and some 🐍 pythonic 🐍 (_omg this term is cringe ah ah_) good practices, we wrote a Notebook for each function. In each file there was the definition of the function, as well as a propper documentation and some examples on how to use it. + +A big part of the backend work was to let anyone structure their own notebook freely, deciding how to present the process and the result of each contribuition without forcing a structure. At the end the Flask application was designed to scan all the `notebook` folder and extract from it the function, as well as their input and output, and the documentation. + +With those information we generated an interactive page for [each function](https://hub.xpub.nl/soupboat/si16/functions/) in which the user could try and play around with our functions exposed as an API. + +## Projects + +The organic process of SI16 led us to a collection of several interconnected projects. Each one of them had grown around a specific implementation of the functions we developed for the API. Those complex applications were initally developed as standalone Flask app, and they were merged all together at the end. (_well, ok, after the end to be honest_) + +One thing we could do differently next time is to use Flask's `Blueprints` as a way to work in a more flexible way. At some point we were really struggling about how to manage the code and the collaboration on it. Now that we have an overview of how Python works, it could be nice to develop our projects in a more modular way. BTW we used the documentation pages as a gateway to the projects, in order to have a common starting point. + +Things got a bit complicated when the subgroup I was in started to working on sub-sub-project. And to face that we made the structure open to the possibility to nest projects one into the other, in order to have again flexibility between documentation and interaction on the website, and still a (kinda) structure in the filesystem. + +Actually: we were totally new into this, so probably half of the things we did were not just wrong, but illegal. BTW we are still learning so next time it will be better, deal with it. + +**disclaimer** there are some problems with the xpub git so the source code is still not totally public, but we are working on it. There the code is annotated and each function is documented so I will not go more in detail here for now. + +## Project structure + +``` +si16 +├── contents +├── notebooks +├── projects +│ ├── and-i-wish-that-your-question-has-been-answered +│ ├── annotation-compass +│ │ └── showcases +│ └── etc-portal +├── si16.py +├── static +│ ├── corpora +│ ├── css +│ ├── event +│ ├── font +│ ├── img +│ ├── js +│ └── uploads +└── templates +``` + +- `contents` contains a list of markdown file for generic pages. For example the route `/si16/intro` will search and load the contents from the `intro.md` file in this folder. +- `notebooks` contains a list of Jupiter Notebook files, one for each function we developed for the API. +- `projects` contains a list of folder one for each subgroup project. Each one has a `documentation.md` file with the main contents and process of development. +- `showcases` is a optional folder in each project for nesting other sub projects in the sub project. Convoluted but useful and flexible. +- `si16.py` is the main module for the Flask app and the backend duties. +- `static` contains all the different files that are served statically from the webserver such as images, stylesheets, javascript files, etc. +- `templates` is a Flask folder that contains the HTML templates for generating the frontend pages. + +Ciao ciao diff --git a/projects/si16-frontend-design/.ipynb_checkpoints/documentation-checkpoint.md b/projects/si16-frontend-design/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..172e5cf --- /dev/null +++ b/projects/si16-frontend-design/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,47 @@ +--- +title: SI16 Frontend Proposal +description: Proposal for the SI16 website +date: 08/12/2021 +css: si16-frontend-documentation.css +links: + - url: https://www.figma.com/file/JU1RQpwzzXvCjw9ChX9Ojc/si16-test?node-id=402%3A692 + title: Figma +categories: + - Design + - Web + - SI16 +--- + +## Design proposal + +A super teamwork with Chae, Emma, Supi + the incredible visual package from the Visual Identity group +You can see the final result at [Learning How to Walk while Catwalking](https://issue.xpub.nl/16) + +![Library](/soupboat/~kamo/static/img/si16-frontend/Intro.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/Home.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/About.jpg) + +![Library](/soupboat/~kamo/static/img/si16-frontend/Snippet Research.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/Manifesto.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/Functions.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/Function.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/Projects.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/Project Documentation.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/Showcase.jpg) + diff --git a/projects/si16-frontend-design/documentation.md b/projects/si16-frontend-design/documentation.md new file mode 100644 index 0000000..172e5cf --- /dev/null +++ b/projects/si16-frontend-design/documentation.md @@ -0,0 +1,47 @@ +--- +title: SI16 Frontend Proposal +description: Proposal for the SI16 website +date: 08/12/2021 +css: si16-frontend-documentation.css +links: + - url: https://www.figma.com/file/JU1RQpwzzXvCjw9ChX9Ojc/si16-test?node-id=402%3A692 + title: Figma +categories: + - Design + - Web + - SI16 +--- + +## Design proposal + +A super teamwork with Chae, Emma, Supi + the incredible visual package from the Visual Identity group +You can see the final result at [Learning How to Walk while Catwalking](https://issue.xpub.nl/16) + +![Library](/soupboat/~kamo/static/img/si16-frontend/Intro.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/Home.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/About.jpg) + +![Library](/soupboat/~kamo/static/img/si16-frontend/Snippet Research.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/Manifesto.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/Functions.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/Function.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/Projects.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/Project Documentation.jpg) + + +![Library](/soupboat/~kamo/static/img/si16-frontend/Showcase.jpg) + diff --git a/projects/si16-structure-proposal/.ipynb_checkpoints/documentation-checkpoint.md b/projects/si16-structure-proposal/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..aac38e4 --- /dev/null +++ b/projects/si16-structure-proposal/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,144 @@ +--- +title: SI16 Structure Proposal +description: Imaging the SI16 as an API ecosystem +date: 15/11/2021 +pad: https://pad.xpub.nl/p/SP16_totemical_magic_sorcery +links: + - url: https://www.figma.com/file/y0nfu3v9YHzUV5WtUOC0Fo/?node-id=840%3A51 + title: Figma +categories: + - SI16 + - Proposal +css: structure-proposal.css +--- + +## Overview + +The special issue is composed of three main parts: the library, the projects and the launch event. Each one of these has a slightly different nature, and so can access to different kinds of public. +Imaging the SI16 as an ecosystem around these three faces permits us to create an organic form of public: someone comes for the event and discovers an API, someone else arrives from the code and is introduced to the critical context around it, each project tho is situated in a specific thematic niche and the interactions with the whole ecosystem could provide fresh air to spin mill. + +A systematic approach in the contents' structure enables us to morph our projects without sacrifice the unique nature of each work. What's more is that with a clear data structure we can deliver contents in different forms with less effort and less stress. + +The following structure is a draft. The order of the elements is not defined nor fixed. Some things are not mandatory, but would be nice and useful to have them if we think to the future life of the SP16 after the launch. The idea is to build something easy to scale, to expand, and to update. Something easy to participate. As an ecosystem some parts are more likely to grow and to evolve, and to provide a good soil as starting point maybe is the best thing we can do? + +## 1. Library +### A collection of modules and tools within a context + +The library is the main container of the SP16. It provides a list of algorithms and describes the world in which they operate. This world is our source of truth: it is built from all the corpora we will aggregate and use for the projects, as well as other critical contributions, inquiries about the vernacular, and guide to navigate through all the materials. Ultimately a library, or a toolkit, is orientated. Its political stance stands not only in its contents, but also in the way it grants access to them. The relation between authors and public is not based only on power, but here also in trust, and collaboration, and dependency, and mutuality. + +Hence the library is part contents, part tools, part documentation, part showcase. These sections could be open and do not have to be perceived as finished. A library is always a work in progress, a work that we are starting now, a work that then someone else can continue. + +Beside the contents and their structure, the library also include a showcase section to display all the projects we are working on now. This section strengths the link between the special issue as a publication and the special issue as an event. In order to preserve the original approach of each project an in depth record of each work is provided here. It is perceived as something sprouting from the library. Are the projects and the special issue publication the same thing? Maybe not, but for sure they are deeply related. + +![Library](/soupboat/~kamo/static/img/lib-structure.svg) + +- **Title**, The name of the library +- **Description**, An overview of what it does, how and why does it exist +- **Context**, A collection of materials (researches, essays, excerpts, ...) that situate this library in relation with the vernacular + - **Manifesto**, Our attitude, our purposes, our plan. It could work as an introduction to the special issue + - **Our plan**, A summary of the research in terms of intentions + - **Our attitude**, An overview of the different approaches we used + - **Our purposes**, What do we want to achieve or encourage + - **Materials - Corpora**, Collections of materials used as sources or collected for the projects + - **Corpus**, Single corpus of materials used as sources for the projects + - **Title**, A title for the corpus + - **Description**, An overview of the contents and how they are structured + - **Type**, The kind of materials included + - **Structure**, A description of the structure of the contents + - **Contents**, List of contents + - **...**, [...other corpus in the list] + - **Research and Development**, A collection of contribuitions (researches, essays, excerpts, ...) that situate this library in relation with the vernacular + - **SP16 History**, Evolution of the SP16 work, devlog, excerpts from the pads, etc + - **List of contribuitions**, Collection of essays, excerpts from the texts read in class, piece from the tutors, from us, etc + - **Contribuition**, Single contribuition in the list + - **Title**, Title of the contribuition + - **Description**, Description of the contribution + - **Subject**, Theme of the contribution + - **Contents**, Contents of the contribuition + - **Credits**, Credits and references + - **...**, [...other contribuitions in the list] + - **Guide**, Presentation of the form of the SI16 and its structure, how to read it and navigate it + - **Getting started**, First steps into the SP16 as an API + - **What is a documentation**, How the documentation is structured + - **Learning how to walk while catwalking**, Navigation through the special issue +- **Showcase - List of Projects Documentations**S, howcase of full fledged and meaningful project built within and from the library, list of projects documentations + - **Project Documentation**, Documentation of a project + - **Contents**, Extended description of the project, including the research, the process and the future possibilities + - **Research**, Background of the work, field of intrests, ideas, theory, etc + - **Process**, History of the work, process of development, prototyping, etc + - **Outcomes**, Results of the research and synthesis of the process + - **Direction**, Possibilities for the evolution of the project, new applications, ideas, findings + - **Documentation**, Nice showcase of the work + - **Text**, Textual description of project and key findings + - **Visual**, Visual documentation such as pictures, videos, etc + - **\***, Other specifications are unique for each project + - **References**, Reference to the corpora or materials used and to the tool involved during the production + - **Materials**, Corpora and sources used or created for the project + - **Theory**, References for specific theoric notes + - **Codes**, Modules, functions and parts of the library involved in the work + - **...**, [...other projects documentations in the showcase] +- **List of Modules**, A list of all the different code approaches, or modules, that compose the library + - **Module**, A thematic or reasoned group of functions + - **Title**, The name of the module + - **Decription**, A description of what it does + - **Applications**, Examples of applications that use several functions to build complex procedures + - **List of functions**, A list of functions + - **Function**, A single function in the module + - **Title**, The name of the function or algorithm + - **Description**, A description of what it does + - **Input**, The types of inputs it receives + - **Codes**, The procedure it follows + - **Output**, The types of outputs it returns + - **Example**, Simple and specific examples + - **...**, [...other functions in the module] + - **...**, [...other modules in the library] + +## 2. Project +### Full fledged and meaningful work built within and from the library + +The main feature of having several serious different projects is both that we can explore different shades of the vernacular language processing and that we can access to different kinds of public. It is true that we are in needs for more time now, but at the same time having different projects to work on + + +![Library](/soupboat/~kamo/static/img/proj-structure.svg) + +- **Title**, Title of the project +- **Description**, Description of the project +- **Colophon**, Credits and colophon +- **Project Object**, Concrete outcomes of the project + - **Object**, Concrete result of the work + - **\***, Specifications are unique for each project +- **Project Documentation**, Documentation of the project + - **Contents**, Extended description of the project, including the research, the process and the future possibilities + - **Research**, Background of the work, field of intrests, ideas, theory, etc + - **Process**,History of the work, process of development, prototyping, etc + - **Outcomes**, Results of the research and synthesis of the process + - **Direction**, Possibilities for the evolution of the project, new applications, ideas, findings + - **Documentation**,Nice showcase of the work + - **Text**, Textual description of project and key findings + - **Visual**,Visual documentation such as pictures, videos, etc + - **\***, Other specifications are unique for each project + - **References**, Reference to the corpora or materials used and to the tool involved during the production + - **Corpora**, Corpora and sources used or created for the project + - **Theory/contributions**,References for specific theoric notes + - **Codes**, Modules, functions and parts of the library involved in the work + + +## 3. Launch +### @Varia on 17.12.2021 + +![Library](/soupboat/~kamo/static/img/launch-structure.svg) + +- **Space setup**, Display and physical setup of the space +- **List of presentations**, List of moments in which the different contents of the SP16 are presented to the public + - **Presentation**, Moment like performance, presentation, talk, workshop, panel, etc + - **Title**, Title of the presentation + - **Description**, Description of the presentation + - **Subject**, Theme of the contribution + - **Type**, Kind of presentation: talk, panel, showcase of a project, performance, etc + - **Contents**, Contents and theme of the presentation + - **...**, [...other presentations in the list] +- **List of projects objects**, List of physical outcomes from the projects + - **Project Object**, Concrete outcomes of the project + - **Object**, Concrete result of the work + - **\***, Specifications are unique for each project + - **...**, [...other project object in the list] \ No newline at end of file diff --git a/projects/si16-structure-proposal/documentation.md b/projects/si16-structure-proposal/documentation.md new file mode 100644 index 0000000..aac38e4 --- /dev/null +++ b/projects/si16-structure-proposal/documentation.md @@ -0,0 +1,144 @@ +--- +title: SI16 Structure Proposal +description: Imaging the SI16 as an API ecosystem +date: 15/11/2021 +pad: https://pad.xpub.nl/p/SP16_totemical_magic_sorcery +links: + - url: https://www.figma.com/file/y0nfu3v9YHzUV5WtUOC0Fo/?node-id=840%3A51 + title: Figma +categories: + - SI16 + - Proposal +css: structure-proposal.css +--- + +## Overview + +The special issue is composed of three main parts: the library, the projects and the launch event. Each one of these has a slightly different nature, and so can access to different kinds of public. +Imaging the SI16 as an ecosystem around these three faces permits us to create an organic form of public: someone comes for the event and discovers an API, someone else arrives from the code and is introduced to the critical context around it, each project tho is situated in a specific thematic niche and the interactions with the whole ecosystem could provide fresh air to spin mill. + +A systematic approach in the contents' structure enables us to morph our projects without sacrifice the unique nature of each work. What's more is that with a clear data structure we can deliver contents in different forms with less effort and less stress. + +The following structure is a draft. The order of the elements is not defined nor fixed. Some things are not mandatory, but would be nice and useful to have them if we think to the future life of the SP16 after the launch. The idea is to build something easy to scale, to expand, and to update. Something easy to participate. As an ecosystem some parts are more likely to grow and to evolve, and to provide a good soil as starting point maybe is the best thing we can do? + +## 1. Library +### A collection of modules and tools within a context + +The library is the main container of the SP16. It provides a list of algorithms and describes the world in which they operate. This world is our source of truth: it is built from all the corpora we will aggregate and use for the projects, as well as other critical contributions, inquiries about the vernacular, and guide to navigate through all the materials. Ultimately a library, or a toolkit, is orientated. Its political stance stands not only in its contents, but also in the way it grants access to them. The relation between authors and public is not based only on power, but here also in trust, and collaboration, and dependency, and mutuality. + +Hence the library is part contents, part tools, part documentation, part showcase. These sections could be open and do not have to be perceived as finished. A library is always a work in progress, a work that we are starting now, a work that then someone else can continue. + +Beside the contents and their structure, the library also include a showcase section to display all the projects we are working on now. This section strengths the link between the special issue as a publication and the special issue as an event. In order to preserve the original approach of each project an in depth record of each work is provided here. It is perceived as something sprouting from the library. Are the projects and the special issue publication the same thing? Maybe not, but for sure they are deeply related. + +![Library](/soupboat/~kamo/static/img/lib-structure.svg) + +- **Title**, The name of the library +- **Description**, An overview of what it does, how and why does it exist +- **Context**, A collection of materials (researches, essays, excerpts, ...) that situate this library in relation with the vernacular + - **Manifesto**, Our attitude, our purposes, our plan. It could work as an introduction to the special issue + - **Our plan**, A summary of the research in terms of intentions + - **Our attitude**, An overview of the different approaches we used + - **Our purposes**, What do we want to achieve or encourage + - **Materials - Corpora**, Collections of materials used as sources or collected for the projects + - **Corpus**, Single corpus of materials used as sources for the projects + - **Title**, A title for the corpus + - **Description**, An overview of the contents and how they are structured + - **Type**, The kind of materials included + - **Structure**, A description of the structure of the contents + - **Contents**, List of contents + - **...**, [...other corpus in the list] + - **Research and Development**, A collection of contribuitions (researches, essays, excerpts, ...) that situate this library in relation with the vernacular + - **SP16 History**, Evolution of the SP16 work, devlog, excerpts from the pads, etc + - **List of contribuitions**, Collection of essays, excerpts from the texts read in class, piece from the tutors, from us, etc + - **Contribuition**, Single contribuition in the list + - **Title**, Title of the contribuition + - **Description**, Description of the contribution + - **Subject**, Theme of the contribution + - **Contents**, Contents of the contribuition + - **Credits**, Credits and references + - **...**, [...other contribuitions in the list] + - **Guide**, Presentation of the form of the SI16 and its structure, how to read it and navigate it + - **Getting started**, First steps into the SP16 as an API + - **What is a documentation**, How the documentation is structured + - **Learning how to walk while catwalking**, Navigation through the special issue +- **Showcase - List of Projects Documentations**S, howcase of full fledged and meaningful project built within and from the library, list of projects documentations + - **Project Documentation**, Documentation of a project + - **Contents**, Extended description of the project, including the research, the process and the future possibilities + - **Research**, Background of the work, field of intrests, ideas, theory, etc + - **Process**, History of the work, process of development, prototyping, etc + - **Outcomes**, Results of the research and synthesis of the process + - **Direction**, Possibilities for the evolution of the project, new applications, ideas, findings + - **Documentation**, Nice showcase of the work + - **Text**, Textual description of project and key findings + - **Visual**, Visual documentation such as pictures, videos, etc + - **\***, Other specifications are unique for each project + - **References**, Reference to the corpora or materials used and to the tool involved during the production + - **Materials**, Corpora and sources used or created for the project + - **Theory**, References for specific theoric notes + - **Codes**, Modules, functions and parts of the library involved in the work + - **...**, [...other projects documentations in the showcase] +- **List of Modules**, A list of all the different code approaches, or modules, that compose the library + - **Module**, A thematic or reasoned group of functions + - **Title**, The name of the module + - **Decription**, A description of what it does + - **Applications**, Examples of applications that use several functions to build complex procedures + - **List of functions**, A list of functions + - **Function**, A single function in the module + - **Title**, The name of the function or algorithm + - **Description**, A description of what it does + - **Input**, The types of inputs it receives + - **Codes**, The procedure it follows + - **Output**, The types of outputs it returns + - **Example**, Simple and specific examples + - **...**, [...other functions in the module] + - **...**, [...other modules in the library] + +## 2. Project +### Full fledged and meaningful work built within and from the library + +The main feature of having several serious different projects is both that we can explore different shades of the vernacular language processing and that we can access to different kinds of public. It is true that we are in needs for more time now, but at the same time having different projects to work on + + +![Library](/soupboat/~kamo/static/img/proj-structure.svg) + +- **Title**, Title of the project +- **Description**, Description of the project +- **Colophon**, Credits and colophon +- **Project Object**, Concrete outcomes of the project + - **Object**, Concrete result of the work + - **\***, Specifications are unique for each project +- **Project Documentation**, Documentation of the project + - **Contents**, Extended description of the project, including the research, the process and the future possibilities + - **Research**, Background of the work, field of intrests, ideas, theory, etc + - **Process**,History of the work, process of development, prototyping, etc + - **Outcomes**, Results of the research and synthesis of the process + - **Direction**, Possibilities for the evolution of the project, new applications, ideas, findings + - **Documentation**,Nice showcase of the work + - **Text**, Textual description of project and key findings + - **Visual**,Visual documentation such as pictures, videos, etc + - **\***, Other specifications are unique for each project + - **References**, Reference to the corpora or materials used and to the tool involved during the production + - **Corpora**, Corpora and sources used or created for the project + - **Theory/contributions**,References for specific theoric notes + - **Codes**, Modules, functions and parts of the library involved in the work + + +## 3. Launch +### @Varia on 17.12.2021 + +![Library](/soupboat/~kamo/static/img/launch-structure.svg) + +- **Space setup**, Display and physical setup of the space +- **List of presentations**, List of moments in which the different contents of the SP16 are presented to the public + - **Presentation**, Moment like performance, presentation, talk, workshop, panel, etc + - **Title**, Title of the presentation + - **Description**, Description of the presentation + - **Subject**, Theme of the contribution + - **Type**, Kind of presentation: talk, panel, showcase of a project, performance, etc + - **Contents**, Contents and theme of the presentation + - **...**, [...other presentations in the list] +- **List of projects objects**, List of physical outcomes from the projects + - **Project Object**, Concrete outcomes of the project + - **Object**, Concrete result of the work + - **\***, Specifications are unique for each project + - **...**, [...other project object in the list] \ No newline at end of file diff --git a/projects/si17-homepage/.ipynb_checkpoints/documentation-checkpoint.md b/projects/si17-homepage/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..4cccb52 --- /dev/null +++ b/projects/si17-homepage/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,24 @@ +--- +title: SI17 Homepage +description: A simple static website to host the loot box +date: 22/03/2022 +categories: + - Web + - SI17 +cover: boxes.jpg +cover_alt: orange box or purple box neo? +url: https://issue.xpub.nl/17 +--- + +Together with Mitsa, Erica, and Supi we worked at the homepage for the SI17: This Box Found You For a Reason. + +We needed an online space to fullfill these needs: +- Support the contents of the lootbox and host the online contributions +- Document and promote the work and the physical object +- Distrubute the contents of the loot box for free according to our license + +The result is a single page that recall the small format of the postit by using super big fontsize and super small inline images. We decided to play with the idea of transparency typical of the materials we used for the boxes. The cursor itself mimic the big square side of the loot box. + +The website comes in two colors as the pubblication does. The typeface is an innested Special Issue 17 made by Supi and Jian combined with the most standard sans serif of the internet. + +![SI17 home](/soupboat/~kamo/static/img/si17-home.png) \ No newline at end of file diff --git a/projects/si17-homepage/documentation.md b/projects/si17-homepage/documentation.md new file mode 100644 index 0000000..4cccb52 --- /dev/null +++ b/projects/si17-homepage/documentation.md @@ -0,0 +1,24 @@ +--- +title: SI17 Homepage +description: A simple static website to host the loot box +date: 22/03/2022 +categories: + - Web + - SI17 +cover: boxes.jpg +cover_alt: orange box or purple box neo? +url: https://issue.xpub.nl/17 +--- + +Together with Mitsa, Erica, and Supi we worked at the homepage for the SI17: This Box Found You For a Reason. + +We needed an online space to fullfill these needs: +- Support the contents of the lootbox and host the online contributions +- Document and promote the work and the physical object +- Distrubute the contents of the loot box for free according to our license + +The result is a single page that recall the small format of the postit by using super big fontsize and super small inline images. We decided to play with the idea of transparency typical of the materials we used for the boxes. The cursor itself mimic the big square side of the loot box. + +The website comes in two colors as the pubblication does. The typeface is an innested Special Issue 17 made by Supi and Jian combined with the most standard sans serif of the internet. + +![SI17 home](/soupboat/~kamo/static/img/si17-home.png) \ No newline at end of file diff --git a/projects/si17-public/.ipynb_checkpoints/documentation-checkpoint.md b/projects/si17-public/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..55ac0be --- /dev/null +++ b/projects/si17-public/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,56 @@ +--- +title: SI17 producing the public +description: homeworks for 21/02 +date: 18/02/2022 +pad: https://hub.xpub.nl/soupboat/pad/p/group_meeting_18022022 +categories: + - SI17 +cover: maxresdefault.jpg +cover_alt: giant 3d printed human +--- + +### Which kind of public do we want to produce? + +If the loot box and gamification produce a single player in competition with all the others, I would like to produce a collaborative public. More like a community than a billboard with users ranking. Also I think this is an operation that requires time. Hence the loot box as a shrine: a safe place to build, discover and charge with meanings together. + +### How do we want our public to engage with our loot box? + +I like the idea of different temporalities and the concept of slow processing. Something could be delivered really fast, something could require an entire evening, something could need to wait an entire month. + +We should balance the single player / multi player aspect of the loot box. It would be great to have something that one can enjoy both alone and with others. The collaborative aspect of the loot box should be something possible and encouraged, but not mandatory. + +### What kinds of questions/feelings/thoughts it create ? + +- To feel part of a community or fellows in a shared quest. +- To wonder how vast is the inventory of the loot box. +- To question the idea of competition as necessary for gamification +- To raise awareness on different voices on the topic + +### How the lootbox is going to be presented to our public during our launch event? + +The presentation could perform the contents of the loot box. + + +### How will the launch look like? + +Nice + +### How can the lootboxes be activated by the public in a sustainable an independent way after the launch? + +With a website + +### What is our relationship to PnF? + +I don't know + +### Does the publication relate to PnF? how? + +I don't think so + +### how and where do we sell the lootbox? + +In place that want to host subaltern authors from our reading list. + +### do we sell in other stores? if yes how are they connected? + +We are the connection \ No newline at end of file diff --git a/projects/si17-public/documentation.md b/projects/si17-public/documentation.md new file mode 100644 index 0000000..55ac0be --- /dev/null +++ b/projects/si17-public/documentation.md @@ -0,0 +1,56 @@ +--- +title: SI17 producing the public +description: homeworks for 21/02 +date: 18/02/2022 +pad: https://hub.xpub.nl/soupboat/pad/p/group_meeting_18022022 +categories: + - SI17 +cover: maxresdefault.jpg +cover_alt: giant 3d printed human +--- + +### Which kind of public do we want to produce? + +If the loot box and gamification produce a single player in competition with all the others, I would like to produce a collaborative public. More like a community than a billboard with users ranking. Also I think this is an operation that requires time. Hence the loot box as a shrine: a safe place to build, discover and charge with meanings together. + +### How do we want our public to engage with our loot box? + +I like the idea of different temporalities and the concept of slow processing. Something could be delivered really fast, something could require an entire evening, something could need to wait an entire month. + +We should balance the single player / multi player aspect of the loot box. It would be great to have something that one can enjoy both alone and with others. The collaborative aspect of the loot box should be something possible and encouraged, but not mandatory. + +### What kinds of questions/feelings/thoughts it create ? + +- To feel part of a community or fellows in a shared quest. +- To wonder how vast is the inventory of the loot box. +- To question the idea of competition as necessary for gamification +- To raise awareness on different voices on the topic + +### How the lootbox is going to be presented to our public during our launch event? + +The presentation could perform the contents of the loot box. + + +### How will the launch look like? + +Nice + +### How can the lootboxes be activated by the public in a sustainable an independent way after the launch? + +With a website + +### What is our relationship to PnF? + +I don't know + +### Does the publication relate to PnF? how? + +I don't think so + +### how and where do we sell the lootbox? + +In place that want to host subaltern authors from our reading list. + +### do we sell in other stores? if yes how are they connected? + +We are the connection \ No newline at end of file diff --git a/projects/si18-01-jingles/.ipynb_checkpoints/documentation-checkpoint.md b/projects/si18-01-jingles/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..4be1362 --- /dev/null +++ b/projects/si18-01-jingles/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,156 @@ +--- +title: SI18.01 - Jingles +description: Exploring the sequencer of the Skimmer to make some jjj +date: 18/04/2022 +categories: + - SI18 + - Sound + - Tool +cover: delft.jpg +cover_alt: Birdwathing in Delft +git: https://git.xpub.nl/kamo/skimmer +--- + +## SI18.01 - Skimmer Jingles 0.1.0 + +On wednesday night the [Skimmer](https://hub.xpub.nl/soupboat/~kamo/static/html/skimmer/) started playing some patterns. It is built on top of Tone.js, and use a notation system inspired by Tidal Cycles. + +Each pattern is made by one or more tracks. +Each track is a list of notes. +There is no limit to the length of each track, nor a fixed size. This is interesting because can lead to polirythm and strange loops. + +`[C4, D#4, G4]` + +For this first source the western notation is used. For the future i would like to try other ways of notation or scoring. + +To insert a rest put a dash: + +`[C4, -, G4]` + +And the super nice thing about this notation system is that you can nest lists inside the list. +In doing so the notes in the inner list will take the time of the note they are replacing. +This two E4 will last half of the other notes. + +`[C4, [E4, E4], G4, A4]` + +Now We are a week in advance for the ideal configuration of the Skimmer, but to keep the time and set the rythm I choose to use and explore this early version of the sequencer anyway. + +The idea of jingle caught my eye: a structural element in the radio broadcast that leaves a margin between two different pieces. I like working on something of support, instead of on a real thing. Something behind, or at the side, or below. Maybe it's a way to xscape from responsabilities? Maybe it's a way to cope with insecurity? Maybe it's just super fun and interesting? I don't know. + +Here the scores for the ten patterns recorder for the first audio~zine of the SI18. + + +### A.A jingle like a run-up + +![Run up](https://www.wikihow.com/images/thumb/9/98/Run-up-a-Wall-and-Flip-Step-2-Version-2.jpg/v4-460px-Run-up-a-Wall-and-Flip-Step-2-Version-2.jpg.webp) + +``` +BPM: 23 +[-, -, -, -, -, [A#3, C4, D#4], -, -, -, -, -] +[[A#4, F4, D#4], -, -, -, -, [A#4, F4, -, C3], -, -, -, -, -] +[[C2, C3, C4], -, -, -, -, -, -, C5, - , - , -] +``` + +### B.A jingle like lunch time + +![Lunch time](https://www.wikihow.com/images/thumb/8/82/Pack-a-Lunch-for-a-Teenager-Step-4-Version-3.jpg/v4-460px-Pack-a-Lunch-for-a-Teenager-Step-4-Version-3.jpg.webp) + +``` +BPM: 45 +[[C2, C3, C4], -, -, -, -, -, -, -, -, -, -] +[-, -, -, -, -, -, A#5, -, G5, -, -] +[A#2, C2 ] +``` + +### C.A jingle like quiz about the next track + +![Quiz](https://www.wikihow.com/images/thumb/f/f2/Make-a-Quiz-Step-3-Version-2.jpg/v4-460px-Make-a-Quiz-Step-3-Version-2.jpg.webp) + +``` +BPM: 45 +[[C2, G2, C3]] +[-, [C5, C4, C3], -, -, -, -, -, [C4, E4, G4], -, -, -] +[[C2, C3, C4], -, -, -, -, -, -, -, -, -, -] +[-, -, -, -, -, -, -, -, D4, E4, -] +[[C3, C3], D3] +``` + +### D.A jingle like a rail without trains + +![Rails](https://www.wikihow.com/images/thumb/9/9b/Be-Safe-Around-Trains-Step-22.jpg/v4-460px-Be-Safe-Around-Trains-Step-22.jpg) + +``` +BPM: 95 +[B4, -, -, -, -, -, -, -, B4, C#5, -, A4, E4, F#4, -, -, -, [D5, D#5], -, -] +[D4, -, -, -, -, -, -, -, [D4, C#4, B3], -, -, -, [B2, B3], - , - , - , - , -] +``` + +### E.A jingle like a road between places + +![Road](https://www.wikihow.com/images/thumb/9/9c/Stay-Safe-on-the-Highway-Step-2-Version-2.jpg/v4-460px-Stay-Safe-on-the-Highway-Step-2-Version-2.jpg.webp) + +``` +BPM: 95 +[-, F#4, -, -, E4, -, -, -, -, -, -, [E2, E3, E4], A4, -, -, -, -, [D5, F#5, A5], -, -] +[B4, -, -, -, -, G4, -, -, B4, C#5, -, A4, E4, F#4, -, -, -, [D5, F#5], -, -] +[D4, -, -, -, -, -, -, -, [D4, C#4, B3], -, -, -, [B2, B3], -, -, -, -, -, -, -] +``` + +### F.A jingle like a gradient blurring collors + +![Gradient](https://www.wikihow.com/images/thumb/3/33/Learn-Graphic-Designing-Step-11.jpg/v4-460px-Learn-Graphic-Designing-Step-11.jpg.webp) + +``` +BPM: 120 +[-, -, -, -, -, -, [C4, F3], -, -, -, -, -, -, G5, -, -, -, -, -, -, [C4, -, F4, -], -, -, -, -, -, -, A5] +[-, -, -, -, -, -, -, -, -, -, -, [G5, A5, A4], -, -, -, -, [C4, -, F4, -], -, -, -, -, -, -, A5] +[C4, -, -, F4, -, -, -] +``` + +### G.A jingle like a slinky spring downstairs + +![Spring](https://www.wikihow.com/images_en/thumb/f/fe/Fix-a-Slinky-Step-3-Version-4.jpg/v4-460px-Fix-a-Slinky-Step-3-Version-4.jpg) + +``` +BPM: 140 +[-, -, C4, E4, G4, -, -] +[C4, E4, G4, -, D4, F#4, A4] +``` + +### H.A jingle like the spinner of the loading +![Loading](https://www.wikihow.com/images/thumb/0/0d/Write-a-Progress-Report-Step-12.jpg/v4-460px-Write-a-Progress-Report-Step-12.jpg.webp) + + +``` +BPM: 160 +[C3, D3, F3, -, -, -, -, -, -, -, -, -, -] +[[C3, C4], [D3, D5], [F3, F6], -, -, -, -, -, -, -, -, -, -] +[ -, -, -, -, -, -, -, E4, F4, -, -, -, -] +[-, -, -, -, -, -, -, [E4, E5, E6], [F4, F3, F2], -, -, -, -] +``` + +### I.A jingle like the progress bar and download +![download](https://i.pinimg.com/474x/fb/f1/77/fbf177f350d167f0ee7c4a6f1ef41cae.jpg) +``` +BPM: 180 +[C5, D5, E5, F5, G5, A5, B5, -, - ] +[C3, D3, E3, F3, G3, A3, B3, -] +[C4, D4, E4, F4, G4, A4, B4] +``` + +### L.A jingle like the ginger in between dishes +![ginger](https://www.wikihow.com/images/thumb/e/ee/Cure-Stomach-Ache-with-Ginger-Step-12.jpg/v4-460px-Cure-Stomach-Ache-with-Ginger-Step-12.jpg) +``` +BPM: 220 +[G4, -, G4, -, G4, -, -, -, -, -, -, -, -, -, -, -, F4, -, -, -, -, E2, F2, G2, -, -, -, -, -, -] +[C3, F3, -, C4, -, C4, -, -, -, -, -, -, -, G4, -, -, -, -, -, -, -, E5, F5, G5, -, -, -, -, -, -] +[E4, -, E2, -, E3, -, -, -, -, -, -, -, -, -, -, -, -, C4, A#3, -, -, F3, G3, A#3, -, -, -, -, -, -] +``` + +## The original plan + +Originally the plan was to perform with the instrument on Tuesday morning, and record the live set. The idea of the Skimmer is to use the connected devices as remote speaker, building an array of indipendent channels and hyper~pan through them. Will try that in the next days. + +I really like the idea of an instrument that requires the public to perform. I would like to focus a lot on the way this request is made: which kind of rituality the Skimmer could generate? How can be proposed and how does it ask for consent? To play through someone else's device means to leave the control to someone else and to deal with uncertainty. In a way it could be seen as a trade: the voice in exchange of the word. + +Because of the sunny days + the easter fest + other works to be done the time spent in front of the computer during the weekend was: not a lot. Not enough. That super massive black hole named CONFIGURING NGINX swallowed all Sunday evening. Sad and pitiful. diff --git a/projects/si18-01-jingles/documentation.md b/projects/si18-01-jingles/documentation.md new file mode 100644 index 0000000..4be1362 --- /dev/null +++ b/projects/si18-01-jingles/documentation.md @@ -0,0 +1,156 @@ +--- +title: SI18.01 - Jingles +description: Exploring the sequencer of the Skimmer to make some jjj +date: 18/04/2022 +categories: + - SI18 + - Sound + - Tool +cover: delft.jpg +cover_alt: Birdwathing in Delft +git: https://git.xpub.nl/kamo/skimmer +--- + +## SI18.01 - Skimmer Jingles 0.1.0 + +On wednesday night the [Skimmer](https://hub.xpub.nl/soupboat/~kamo/static/html/skimmer/) started playing some patterns. It is built on top of Tone.js, and use a notation system inspired by Tidal Cycles. + +Each pattern is made by one or more tracks. +Each track is a list of notes. +There is no limit to the length of each track, nor a fixed size. This is interesting because can lead to polirythm and strange loops. + +`[C4, D#4, G4]` + +For this first source the western notation is used. For the future i would like to try other ways of notation or scoring. + +To insert a rest put a dash: + +`[C4, -, G4]` + +And the super nice thing about this notation system is that you can nest lists inside the list. +In doing so the notes in the inner list will take the time of the note they are replacing. +This two E4 will last half of the other notes. + +`[C4, [E4, E4], G4, A4]` + +Now We are a week in advance for the ideal configuration of the Skimmer, but to keep the time and set the rythm I choose to use and explore this early version of the sequencer anyway. + +The idea of jingle caught my eye: a structural element in the radio broadcast that leaves a margin between two different pieces. I like working on something of support, instead of on a real thing. Something behind, or at the side, or below. Maybe it's a way to xscape from responsabilities? Maybe it's a way to cope with insecurity? Maybe it's just super fun and interesting? I don't know. + +Here the scores for the ten patterns recorder for the first audio~zine of the SI18. + + +### A.A jingle like a run-up + +![Run up](https://www.wikihow.com/images/thumb/9/98/Run-up-a-Wall-and-Flip-Step-2-Version-2.jpg/v4-460px-Run-up-a-Wall-and-Flip-Step-2-Version-2.jpg.webp) + +``` +BPM: 23 +[-, -, -, -, -, [A#3, C4, D#4], -, -, -, -, -] +[[A#4, F4, D#4], -, -, -, -, [A#4, F4, -, C3], -, -, -, -, -] +[[C2, C3, C4], -, -, -, -, -, -, C5, - , - , -] +``` + +### B.A jingle like lunch time + +![Lunch time](https://www.wikihow.com/images/thumb/8/82/Pack-a-Lunch-for-a-Teenager-Step-4-Version-3.jpg/v4-460px-Pack-a-Lunch-for-a-Teenager-Step-4-Version-3.jpg.webp) + +``` +BPM: 45 +[[C2, C3, C4], -, -, -, -, -, -, -, -, -, -] +[-, -, -, -, -, -, A#5, -, G5, -, -] +[A#2, C2 ] +``` + +### C.A jingle like quiz about the next track + +![Quiz](https://www.wikihow.com/images/thumb/f/f2/Make-a-Quiz-Step-3-Version-2.jpg/v4-460px-Make-a-Quiz-Step-3-Version-2.jpg.webp) + +``` +BPM: 45 +[[C2, G2, C3]] +[-, [C5, C4, C3], -, -, -, -, -, [C4, E4, G4], -, -, -] +[[C2, C3, C4], -, -, -, -, -, -, -, -, -, -] +[-, -, -, -, -, -, -, -, D4, E4, -] +[[C3, C3], D3] +``` + +### D.A jingle like a rail without trains + +![Rails](https://www.wikihow.com/images/thumb/9/9b/Be-Safe-Around-Trains-Step-22.jpg/v4-460px-Be-Safe-Around-Trains-Step-22.jpg) + +``` +BPM: 95 +[B4, -, -, -, -, -, -, -, B4, C#5, -, A4, E4, F#4, -, -, -, [D5, D#5], -, -] +[D4, -, -, -, -, -, -, -, [D4, C#4, B3], -, -, -, [B2, B3], - , - , - , - , -] +``` + +### E.A jingle like a road between places + +![Road](https://www.wikihow.com/images/thumb/9/9c/Stay-Safe-on-the-Highway-Step-2-Version-2.jpg/v4-460px-Stay-Safe-on-the-Highway-Step-2-Version-2.jpg.webp) + +``` +BPM: 95 +[-, F#4, -, -, E4, -, -, -, -, -, -, [E2, E3, E4], A4, -, -, -, -, [D5, F#5, A5], -, -] +[B4, -, -, -, -, G4, -, -, B4, C#5, -, A4, E4, F#4, -, -, -, [D5, F#5], -, -] +[D4, -, -, -, -, -, -, -, [D4, C#4, B3], -, -, -, [B2, B3], -, -, -, -, -, -, -] +``` + +### F.A jingle like a gradient blurring collors + +![Gradient](https://www.wikihow.com/images/thumb/3/33/Learn-Graphic-Designing-Step-11.jpg/v4-460px-Learn-Graphic-Designing-Step-11.jpg.webp) + +``` +BPM: 120 +[-, -, -, -, -, -, [C4, F3], -, -, -, -, -, -, G5, -, -, -, -, -, -, [C4, -, F4, -], -, -, -, -, -, -, A5] +[-, -, -, -, -, -, -, -, -, -, -, [G5, A5, A4], -, -, -, -, [C4, -, F4, -], -, -, -, -, -, -, A5] +[C4, -, -, F4, -, -, -] +``` + +### G.A jingle like a slinky spring downstairs + +![Spring](https://www.wikihow.com/images_en/thumb/f/fe/Fix-a-Slinky-Step-3-Version-4.jpg/v4-460px-Fix-a-Slinky-Step-3-Version-4.jpg) + +``` +BPM: 140 +[-, -, C4, E4, G4, -, -] +[C4, E4, G4, -, D4, F#4, A4] +``` + +### H.A jingle like the spinner of the loading +![Loading](https://www.wikihow.com/images/thumb/0/0d/Write-a-Progress-Report-Step-12.jpg/v4-460px-Write-a-Progress-Report-Step-12.jpg.webp) + + +``` +BPM: 160 +[C3, D3, F3, -, -, -, -, -, -, -, -, -, -] +[[C3, C4], [D3, D5], [F3, F6], -, -, -, -, -, -, -, -, -, -] +[ -, -, -, -, -, -, -, E4, F4, -, -, -, -] +[-, -, -, -, -, -, -, [E4, E5, E6], [F4, F3, F2], -, -, -, -] +``` + +### I.A jingle like the progress bar and download +![download](https://i.pinimg.com/474x/fb/f1/77/fbf177f350d167f0ee7c4a6f1ef41cae.jpg) +``` +BPM: 180 +[C5, D5, E5, F5, G5, A5, B5, -, - ] +[C3, D3, E3, F3, G3, A3, B3, -] +[C4, D4, E4, F4, G4, A4, B4] +``` + +### L.A jingle like the ginger in between dishes +![ginger](https://www.wikihow.com/images/thumb/e/ee/Cure-Stomach-Ache-with-Ginger-Step-12.jpg/v4-460px-Cure-Stomach-Ache-with-Ginger-Step-12.jpg) +``` +BPM: 220 +[G4, -, G4, -, G4, -, -, -, -, -, -, -, -, -, -, -, F4, -, -, -, -, E2, F2, G2, -, -, -, -, -, -] +[C3, F3, -, C4, -, C4, -, -, -, -, -, -, -, G4, -, -, -, -, -, -, -, E5, F5, G5, -, -, -, -, -, -] +[E4, -, E2, -, E3, -, -, -, -, -, -, -, -, -, -, -, -, C4, A#3, -, -, F3, G3, A#3, -, -, -, -, -, -] +``` + +## The original plan + +Originally the plan was to perform with the instrument on Tuesday morning, and record the live set. The idea of the Skimmer is to use the connected devices as remote speaker, building an array of indipendent channels and hyper~pan through them. Will try that in the next days. + +I really like the idea of an instrument that requires the public to perform. I would like to focus a lot on the way this request is made: which kind of rituality the Skimmer could generate? How can be proposed and how does it ask for consent? To play through someone else's device means to leave the control to someone else and to deal with uncertainty. In a way it could be seen as a trade: the voice in exchange of the word. + +Because of the sunny days + the easter fest + other works to be done the time spent in front of the computer during the weekend was: not a lot. Not enough. That super massive black hole named CONFIGURING NGINX swallowed all Sunday evening. Sad and pitiful. diff --git a/projects/skimmer/.ipynb_checkpoints/documentation-checkpoint.md b/projects/skimmer/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..c7f21ab --- /dev/null +++ b/projects/skimmer/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,53 @@ +--- +title: Skimmer +description: Hyper~panning and displaced speakers +date: 13/04/2022 +categories: + - Tool + - Sound + - SI18 +cover: schimmer.jpg +cover_alt: a nice skimmer and a green blob of ??? +git: https://git.xpub.nl/kamo/skimmer +project: skimmer +--- + +## Hyper~panning and displaced speakers + +The Skimmer is a container for experiments on multi-channel and displaced sound works, developed in the context of SI18. The main concept is a system that streams to various connected clients, using them as speakers. Unlike classical broadcast transmissions where everyone receive the same signal, here each client is an individual channel. In doing so, the Skimmer can have as many channels as many clients are connected. This opens interesting spatial and expressive possibilities that I would like to explore. + +To rely on connected clients and the public as a founding part of the instrument raises questions about instability and contingency in both composition and design. What does it mean for the public to host the instrument, and what does it mean for the performer to be hosted by the public? Which kind of politics and relations are generated? + +The Skimmer works with a lightweight setup: a server application links together a source and the connected clients. Instead of streaming the audio directly from the source to the server, what is shared is a model to generate the sounds. With this approach the stream consists in just messages for modulating the instrument on each client, and the traffic it is super light. This require a sound design oriented to the specs of the clients. +![skimming the notes](/soupboat/~kamo/static/img/clients.jpg) + +## Structure + + +This setup is made by three main parts: + +- Source +- Handle +- Sift + +The source is the instrument that the server and clients share. The recipe of the source is the same when it travel from the pot (server) to the bowls (clients). The handle is the interface that grants the modulation over the source and over the distribution of the contents. The sift is the moment in which the signals are splitted for the different clients. +[wip] + + +![structure with a pot](/soupboat/~kamo/static/img/structure.jpg) + +## Week 00 + +### Plan + +- The source is a dynamic sequences generator, super loosely inspired by the [Tidal](https://tidalcycles.org/) notation. Ideally for each client connected, one sequence is added. +- The handle will be maybe something similar to the [modular spaghetti interface](https://git.xpub.nl/kamo/spaghetti)? (not sure yet, but i like the idea of drawing connections between the source and the clients) +- The sift will be a little server in the Soupboat, not sure yet if with node.js and express (pro: all JS pipeline) or flask (pro: mixed pipeline and familiar pattern) + +![spaghetti setup](/soupboat/~kamo/static/img/spaghetti.jpg) +Prototype of the spaghetti cables interface + +### Process + +- first experiments with tone.js and the dynamic sequences +- polishing the notation for the sequences diff --git a/projects/skimmer/documentation.md b/projects/skimmer/documentation.md new file mode 100644 index 0000000..c7f21ab --- /dev/null +++ b/projects/skimmer/documentation.md @@ -0,0 +1,53 @@ +--- +title: Skimmer +description: Hyper~panning and displaced speakers +date: 13/04/2022 +categories: + - Tool + - Sound + - SI18 +cover: schimmer.jpg +cover_alt: a nice skimmer and a green blob of ??? +git: https://git.xpub.nl/kamo/skimmer +project: skimmer +--- + +## Hyper~panning and displaced speakers + +The Skimmer is a container for experiments on multi-channel and displaced sound works, developed in the context of SI18. The main concept is a system that streams to various connected clients, using them as speakers. Unlike classical broadcast transmissions where everyone receive the same signal, here each client is an individual channel. In doing so, the Skimmer can have as many channels as many clients are connected. This opens interesting spatial and expressive possibilities that I would like to explore. + +To rely on connected clients and the public as a founding part of the instrument raises questions about instability and contingency in both composition and design. What does it mean for the public to host the instrument, and what does it mean for the performer to be hosted by the public? Which kind of politics and relations are generated? + +The Skimmer works with a lightweight setup: a server application links together a source and the connected clients. Instead of streaming the audio directly from the source to the server, what is shared is a model to generate the sounds. With this approach the stream consists in just messages for modulating the instrument on each client, and the traffic it is super light. This require a sound design oriented to the specs of the clients. +![skimming the notes](/soupboat/~kamo/static/img/clients.jpg) + +## Structure + + +This setup is made by three main parts: + +- Source +- Handle +- Sift + +The source is the instrument that the server and clients share. The recipe of the source is the same when it travel from the pot (server) to the bowls (clients). The handle is the interface that grants the modulation over the source and over the distribution of the contents. The sift is the moment in which the signals are splitted for the different clients. +[wip] + + +![structure with a pot](/soupboat/~kamo/static/img/structure.jpg) + +## Week 00 + +### Plan + +- The source is a dynamic sequences generator, super loosely inspired by the [Tidal](https://tidalcycles.org/) notation. Ideally for each client connected, one sequence is added. +- The handle will be maybe something similar to the [modular spaghetti interface](https://git.xpub.nl/kamo/spaghetti)? (not sure yet, but i like the idea of drawing connections between the source and the clients) +- The sift will be a little server in the Soupboat, not sure yet if with node.js and express (pro: all JS pipeline) or flask (pro: mixed pipeline and familiar pattern) + +![spaghetti setup](/soupboat/~kamo/static/img/spaghetti.jpg) +Prototype of the spaghetti cables interface + +### Process + +- first experiments with tone.js and the dynamic sequences +- polishing the notation for the sequences diff --git a/projects/soup-flask/.ipynb_checkpoints/documentation-checkpoint.md b/projects/soup-flask/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..7826a85 --- /dev/null +++ b/projects/soup-flask/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,277 @@ +--- +title: Flask that soup 🥥 +description: Confy Flask setup on the Soupboat +categories: + - Python + - Web +git: https://git.xpub.nl/kamo/soup_app +date: 15/02/2022 +--- + +This is a template for simple and scalable Flask apps on the Soupboat. One of the main feature of this setup is that it enables a seamless work between local development (namely your computer) and the Jupiter Lab environment in the Soupboat. + +This approach proposes these features: + +### Url prefix +The Soupboat has some problems with generated URLs, and when we developed the app for SI16 we had to put every link + '/soupboat/si16', that was more a hack than a real solution. This setup fix it with a middleware that intercepts every request and adds the prefix automatically. + +### Easy debug +To develop directly in Jupiter means to stop and restart continously the app to see the changes. With this setup we can work in locale and push the results when we are happy with them. + +### Modular +Taking advantages of the Flask Blueprint system and Python modules, we can write a legible structure for our app, and then go crazy inside the blueprints of each page or super specific modules. In this way the code remains readable, and the relations between the different components are rendered clearly. + +## Guide + +Create a folder for your project. This will be the root of the app. Create a virtual environment in the folder. Open the terminal and write: + +`python3 -m venv venv` + +This will create a venv folder after a while. Then activate the virtual environment. + +`. venv/bin/activate` + +In this way every package we will install will be in the scope of the virtual environment, and this helps to avoid conflicts between different versions and projects. + +Now we can install Flask. + +`pip3 install flask` + +Once we have installed it, let's create a folder `soup_app` for the Flask application. Here we will put all the modules needed for the flask app. In this folder we can create a `__init__.py` file, in order to make the folder to be recognized as a Python package. + +Here we will initialize a factory for our Flask application. Instead of writing the application directly, we will write a function to generate it depending of the different environemnts. This comes handy when we want to develop our project in locale and then push it in the Soupboat. For more about the concept of factory here's a nice series about design pattern:[Factory Method Pattern](https://www.youtube.com/watch?v=EcFVTgRHJLM). + +The basic structure of the app is something like + +```python +# __init__.py + +# import os to create the folder for the app +import os + +# import flask to init the app, and send_from_directory for the icon file +from flask import Flask, send_from_directory + +# url_prefix module to work either in local and in the soupboat +from . import prefix + + +def create_app(test_config=None): + # Create and configure the Flask App + app = Flask(__name__, instance_relative_config=True) + app.config.from_mapping( + SECRET_KEY="dev", + ) + + + # load the instance config, if it exists, when not testing + if test_config is None: + app.config.from_pyfile("config.py", silent=True) + else: + # load the test config if passed in + app.config.from_mapping(test_config) + + # ensure the instance folder exists + try: + os.makedirs(app.instance_path) + except OSError: + pass + + # create an endpoint for the icon + @app.route("/favicon.ico") + def favicon(): + return send_from_directory( + os.path.join(app.root_path, "static"), + "favicon.ico", + mimetype="image/vnd.microsoft.icon", + ) + + + # here we can import all our blueprints for each endpoints + # home blueprint + from . import home + app.register_blueprint(home.bp) + + + + # register the prefix middleware + # it takes the url prefix from an .env file! + app.wsgi_app = prefix.PrefixMiddleware( + app.wsgi_app, prefix=os.environ.get("URL_PREFIX", "") + ) + + # return the app + return app + +``` + +The home blueprint can be something as easy as + +```python + +# home.py + +from flask import Blueprint + +bp = Blueprint("home", __name__, url_prefix="/") + + +@bp.route("/") +def home(): + return 'Hello world' +``` + +While the prefix it's a bit more abstract: it takes every incoming request and prefix it. + +```python + +# prefix.py + +class PrefixMiddleware(object): + def __init__(self, app, prefix=""): + self.app = app + self.prefix = prefix + + def __call__(self, environ, start_response): + + if environ["PATH_INFO"].startswith(self.prefix): + environ["PATH_INFO"] = environ["PATH_INFO"][len(self.prefix) :] + environ["SCRIPT_NAME"] = self.prefix + return self.app(environ, start_response) + else: + start_response("404", [("Content-Type", "text/plain")]) + return ["This url does not belong to the app.".encode()] + +``` + + +If you execute `flask run` from the terminal now it will complain that there is no flask app defined in the environment variables. We could fix it setting manually the name of the flask app directly in the terminal, but we should do that every time we start the project. + +Hence we will install python-dotenv, a library to use a `.env` file to configure the application. We will use different .env files depending on where we will deploy the application: one for our local development and one for the environment in the soupboat. + +`pip3 install python-dotenv` + +Now we can create in the root of our application (the same folder with the venv and flask-soup directories) a .env file, that the application will recognize automatically. + +The contents for the local development will be something like this: + +```env +FLASK_APP=postit +FLASK_ENV=development +``` + +while in the soupboat we will add the url_prefix property: + +```env +FLASK_APP=postit +FLASK_ENV=development +URL_PREFIX=/soupboat/flask-soup/ +``` + +If you now run `flask run` the application will start at the address `localhost:5000`, and you can debug and play around with things. + +There are a couple of other files we can add in the root directory: + +A `setup.py` module, useful for installing all the dependencies we need for our project (at the moment flask and python-dotenv) + +```python + +# setup.py + +from setuptools import find_packages, setup + +setup( + name="soup_app", + version="1.0.0", + packages=find_packages(), + include_package_data=True, + zip_safe=False, + install_requires=["flask", "python-dotenv"], +) +``` + +and a `config.py`, to fine tuning the different configurations for the application. + +```python + +# config.py + +import os + + +class Config(object): + DEBUG = False + TESTING = False + URL_PREFIX = "" + + +class ProductionConfig(Config): + DEBUG = False + URL_PREFIX = os.environ.get("URL_PREFIX") + + +class DevelopmentConfig(Config): + ENV = "development" + DEVELOPMENT = True + DEBUG = True + +``` + +The last file to create is a `.gitignore` one, in which we will indicate the files that git should ignore when committing our changes. + +I'm using this template atm + +```.gitignore + +# .gitignore + +venv/ + +*.pyc +__pycache__/ +.ipynb_checkpoints + +instance/ + +.pytest_cache/ +.coverage +htmlcov/ + +dist/ +build/ +*.egg-info/ + +.env + +``` + +Notice that the .env file is ignored from your commits, so you will need to create one manually in each environment you wanna work. + +Now you are ready to push the project to a git repo. Create a new one and follow the steps to push your contents on there. + +On the xpub git should be something like: + +``` +git init +git add . +git commit -m 'Init my soup app' +git remote add origin https://git.xpub.nl/your-username/your-repo.git +git push -u origin master +``` + +And if it doesn't complain nice we are ready to go on the soupboat (or wherever) + +TODO: finish this + +steps: + +1. clone the repo in the soupboat +2. create a virtual environment in the cloned folder +3. activate it +4. pip3 install -e . (aka install the dependencies) +5. create a .env file with the prefix +6. setup nginx + + + + diff --git a/projects/soup-flask/documentation.md b/projects/soup-flask/documentation.md new file mode 100644 index 0000000..7826a85 --- /dev/null +++ b/projects/soup-flask/documentation.md @@ -0,0 +1,277 @@ +--- +title: Flask that soup 🥥 +description: Confy Flask setup on the Soupboat +categories: + - Python + - Web +git: https://git.xpub.nl/kamo/soup_app +date: 15/02/2022 +--- + +This is a template for simple and scalable Flask apps on the Soupboat. One of the main feature of this setup is that it enables a seamless work between local development (namely your computer) and the Jupiter Lab environment in the Soupboat. + +This approach proposes these features: + +### Url prefix +The Soupboat has some problems with generated URLs, and when we developed the app for SI16 we had to put every link + '/soupboat/si16', that was more a hack than a real solution. This setup fix it with a middleware that intercepts every request and adds the prefix automatically. + +### Easy debug +To develop directly in Jupiter means to stop and restart continously the app to see the changes. With this setup we can work in locale and push the results when we are happy with them. + +### Modular +Taking advantages of the Flask Blueprint system and Python modules, we can write a legible structure for our app, and then go crazy inside the blueprints of each page or super specific modules. In this way the code remains readable, and the relations between the different components are rendered clearly. + +## Guide + +Create a folder for your project. This will be the root of the app. Create a virtual environment in the folder. Open the terminal and write: + +`python3 -m venv venv` + +This will create a venv folder after a while. Then activate the virtual environment. + +`. venv/bin/activate` + +In this way every package we will install will be in the scope of the virtual environment, and this helps to avoid conflicts between different versions and projects. + +Now we can install Flask. + +`pip3 install flask` + +Once we have installed it, let's create a folder `soup_app` for the Flask application. Here we will put all the modules needed for the flask app. In this folder we can create a `__init__.py` file, in order to make the folder to be recognized as a Python package. + +Here we will initialize a factory for our Flask application. Instead of writing the application directly, we will write a function to generate it depending of the different environemnts. This comes handy when we want to develop our project in locale and then push it in the Soupboat. For more about the concept of factory here's a nice series about design pattern:[Factory Method Pattern](https://www.youtube.com/watch?v=EcFVTgRHJLM). + +The basic structure of the app is something like + +```python +# __init__.py + +# import os to create the folder for the app +import os + +# import flask to init the app, and send_from_directory for the icon file +from flask import Flask, send_from_directory + +# url_prefix module to work either in local and in the soupboat +from . import prefix + + +def create_app(test_config=None): + # Create and configure the Flask App + app = Flask(__name__, instance_relative_config=True) + app.config.from_mapping( + SECRET_KEY="dev", + ) + + + # load the instance config, if it exists, when not testing + if test_config is None: + app.config.from_pyfile("config.py", silent=True) + else: + # load the test config if passed in + app.config.from_mapping(test_config) + + # ensure the instance folder exists + try: + os.makedirs(app.instance_path) + except OSError: + pass + + # create an endpoint for the icon + @app.route("/favicon.ico") + def favicon(): + return send_from_directory( + os.path.join(app.root_path, "static"), + "favicon.ico", + mimetype="image/vnd.microsoft.icon", + ) + + + # here we can import all our blueprints for each endpoints + # home blueprint + from . import home + app.register_blueprint(home.bp) + + + + # register the prefix middleware + # it takes the url prefix from an .env file! + app.wsgi_app = prefix.PrefixMiddleware( + app.wsgi_app, prefix=os.environ.get("URL_PREFIX", "") + ) + + # return the app + return app + +``` + +The home blueprint can be something as easy as + +```python + +# home.py + +from flask import Blueprint + +bp = Blueprint("home", __name__, url_prefix="/") + + +@bp.route("/") +def home(): + return 'Hello world' +``` + +While the prefix it's a bit more abstract: it takes every incoming request and prefix it. + +```python + +# prefix.py + +class PrefixMiddleware(object): + def __init__(self, app, prefix=""): + self.app = app + self.prefix = prefix + + def __call__(self, environ, start_response): + + if environ["PATH_INFO"].startswith(self.prefix): + environ["PATH_INFO"] = environ["PATH_INFO"][len(self.prefix) :] + environ["SCRIPT_NAME"] = self.prefix + return self.app(environ, start_response) + else: + start_response("404", [("Content-Type", "text/plain")]) + return ["This url does not belong to the app.".encode()] + +``` + + +If you execute `flask run` from the terminal now it will complain that there is no flask app defined in the environment variables. We could fix it setting manually the name of the flask app directly in the terminal, but we should do that every time we start the project. + +Hence we will install python-dotenv, a library to use a `.env` file to configure the application. We will use different .env files depending on where we will deploy the application: one for our local development and one for the environment in the soupboat. + +`pip3 install python-dotenv` + +Now we can create in the root of our application (the same folder with the venv and flask-soup directories) a .env file, that the application will recognize automatically. + +The contents for the local development will be something like this: + +```env +FLASK_APP=postit +FLASK_ENV=development +``` + +while in the soupboat we will add the url_prefix property: + +```env +FLASK_APP=postit +FLASK_ENV=development +URL_PREFIX=/soupboat/flask-soup/ +``` + +If you now run `flask run` the application will start at the address `localhost:5000`, and you can debug and play around with things. + +There are a couple of other files we can add in the root directory: + +A `setup.py` module, useful for installing all the dependencies we need for our project (at the moment flask and python-dotenv) + +```python + +# setup.py + +from setuptools import find_packages, setup + +setup( + name="soup_app", + version="1.0.0", + packages=find_packages(), + include_package_data=True, + zip_safe=False, + install_requires=["flask", "python-dotenv"], +) +``` + +and a `config.py`, to fine tuning the different configurations for the application. + +```python + +# config.py + +import os + + +class Config(object): + DEBUG = False + TESTING = False + URL_PREFIX = "" + + +class ProductionConfig(Config): + DEBUG = False + URL_PREFIX = os.environ.get("URL_PREFIX") + + +class DevelopmentConfig(Config): + ENV = "development" + DEVELOPMENT = True + DEBUG = True + +``` + +The last file to create is a `.gitignore` one, in which we will indicate the files that git should ignore when committing our changes. + +I'm using this template atm + +```.gitignore + +# .gitignore + +venv/ + +*.pyc +__pycache__/ +.ipynb_checkpoints + +instance/ + +.pytest_cache/ +.coverage +htmlcov/ + +dist/ +build/ +*.egg-info/ + +.env + +``` + +Notice that the .env file is ignored from your commits, so you will need to create one manually in each environment you wanna work. + +Now you are ready to push the project to a git repo. Create a new one and follow the steps to push your contents on there. + +On the xpub git should be something like: + +``` +git init +git add . +git commit -m 'Init my soup app' +git remote add origin https://git.xpub.nl/your-username/your-repo.git +git push -u origin master +``` + +And if it doesn't complain nice we are ready to go on the soupboat (or wherever) + +TODO: finish this + +steps: + +1. clone the repo in the soupboat +2. create a virtual environment in the cloned folder +3. activate it +4. pip3 install -e . (aka install the dependencies) +5. create a .env file with the prefix +6. setup nginx + + + + diff --git a/projects/soup-gen/.ipynb_checkpoints/documentation-checkpoint.md b/projects/soup-gen/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..dd6eb44 --- /dev/null +++ b/projects/soup-gen/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,11 @@ +--- +title: 🥣 Soup-gen +description: A soup aggregator for the next 2 years +url: /soupboat/soup-gen/ +date: 19/10/2021 +git: https://git.xpub.nl/grgr/soup-gen +categories: + - Web + - CMS + - Long Term +--- \ No newline at end of file diff --git a/projects/soup-gen/documentation.md b/projects/soup-gen/documentation.md new file mode 100644 index 0000000..dd6eb44 --- /dev/null +++ b/projects/soup-gen/documentation.md @@ -0,0 +1,11 @@ +--- +title: 🥣 Soup-gen +description: A soup aggregator for the next 2 years +url: /soupboat/soup-gen/ +date: 19/10/2021 +git: https://git.xpub.nl/grgr/soup-gen +categories: + - Web + - CMS + - Long Term +--- \ No newline at end of file diff --git a/projects/soup-to-wiki/.ipynb_checkpoints/baloons-checkpoint.html b/projects/soup-to-wiki/.ipynb_checkpoints/baloons-checkpoint.html new file mode 100644 index 0000000..bda5dee --- /dev/null +++ b/projects/soup-to-wiki/.ipynb_checkpoints/baloons-checkpoint.html @@ -0,0 +1,71 @@ + + + + + + + Baloons + + + +
    + %for project in projects: + <% + import random + color = "%03x" % random.randint(0xEEE, 0xFFF) + %> +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/${project['slug']}/ ${project['title']}]

    +

    ${project['description']}

    +
    • + %endfor +
+ + diff --git a/projects/soup-to-wiki/.ipynb_checkpoints/baloons_web-checkpoint.html b/projects/soup-to-wiki/.ipynb_checkpoints/baloons_web-checkpoint.html new file mode 100644 index 0000000..1368133 --- /dev/null +++ b/projects/soup-to-wiki/.ipynb_checkpoints/baloons_web-checkpoint.html @@ -0,0 +1,73 @@ + + + + + + + Baloons + + + + + + diff --git a/projects/soup-to-wiki/.ipynb_checkpoints/documentation-checkpoint.md b/projects/soup-to-wiki/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..aa92e76 --- /dev/null +++ b/projects/soup-to-wiki/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,95 @@ +--- +title: Soup to Wiki +description: Teleport this log to the wiki (teleport not ready yet) +date: 12/04/2022 +categories: + - Log + - Wiki +cover: wiki-soup.jpg +cover_alt: wikipedia page for soup sorry +--- + +Since the Soupboat is fragile and temporary (like everything else?), it's nice to keep this documentation updated also in the [Wiki](https://pzwiki.wdka.nl/mediadesign/Main_Page). + +## update 12/04 + +Since the previous version was too messy I tried with a more concise approach. Instead of dumping the whole contents I choose to report only title + description and a link to the project here in the SB. + +The page is generated with [Mako](https://www.makotemplates.org/), started looking at it during the workshop with Brendan. Its syntax seems much more legible than the Jinja2's one. + +The code is more or less the same. Find it in this [notebook](log_to_wiki_2.ipynb). The file for the template is [baloons.html](baloons.html). + +[And this is the result !!!!!](output.html) + +## first attempt 21/02 + + + +ATM i'm using this [notebook](log_to_wiki.ipynb) to do a simple conversion from all the markdown files of these pages to wikitext. In this way it's less painful (but also less curated?) to have the wiki up to date. It uses [pypandoc](https://pypi.org/project/pypandoc/), that is a python wrapper for [pandoc](https://pandoc.org/). + +```python + + +import os +import frontmatter +from datetime import datetime +import pypandoc + +def list_folders(folder): + ''' Return all the folders in a folder ''' + names = [] + for entry in os.scandir(folder): + # add to the list only proper files + if not entry.name.startswith('.') and entry.is_dir(): + # remove the extension from the filename + names.append(entry.name) + return names + +def get_md_contents(filename, directory='./contents'): + ''' Return contents from a filename as frontmatter handler ''' + with open(f"{directory}/{filename}", "r") as f: + metadata, content = frontmatter.parse(f.read()) + return metadata, content + + +# in the projects directory there is a folder for every project. +# The info about the project are in a "documentation.md" file + +folders = list_folders('public_html/projects') +projects = [] + +for folder in folders: + project = get_md_contents('documentation.md', f'public_html/projects/{folder}') + project_date = datetime.strptime(project[0]['date'], '%d/%m/%Y') + project[0]['date'] = datetime.strftime(project_date, '%d %b, %y') + project[0]['categories'].sort() + projects.append(project) + + +# the projects are sorted by date +projects.sort(reverse=False, key=lambda project: datetime.strptime( + project[0]['date'], '%d %b, %y')) + + + +# the variable page will be filled with wikitext +page = '' + +# here we insert a bit of meta info such as the title and the description +for project in projects: + + page = page + f"==={project[0]['title']}=== \n" + page = page + f"''{project[0]['description']}''\n" + page = page + pypandoc.convert_text(project[1], 'mediawiki', format='md', extra_args=['--base-header-level=3']) + +# and then i copy this result and paste it in the wiki +print(page) + + +``` + +there are still problems (as always?) especially with the images, that need to be uploaded manually in the wiki........... maybe i will provide super nice alt description to avoid this tedious workk sorry. + + +ok + diff --git a/projects/soup-to-wiki/.ipynb_checkpoints/log_to_wiki-checkpoint.ipynb b/projects/soup-to-wiki/.ipynb_checkpoints/log_to_wiki-checkpoint.ipynb new file mode 100644 index 0000000..bd6c23d --- /dev/null +++ b/projects/soup-to-wiki/.ipynb_checkpoints/log_to_wiki-checkpoint.ipynb @@ -0,0 +1,1156 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 6, + "id": "6f73330a-e0d5-4d22-a4c7-246b928394e9", + "metadata": {}, + "outputs": [], + "source": [ + "import os\n", + "import frontmatter\n", + "from datetime import datetime\n", + "import pypandoc" + ] + }, + { + "cell_type": "code", + "execution_count": 7, + "id": "3d183b25-72fb-4b90-a639-188a68e02fc1", + "metadata": {}, + "outputs": [], + "source": [ + "def list_folders(folder):\n", + " ''' Return all the folders in a folder '''\n", + " names = []\n", + " for entry in os.scandir(folder):\n", + " # add to the list only proper files\n", + " if not entry.name.startswith('.') and entry.is_dir():\n", + " # remove the extension from the filename\n", + " names.append(entry.name)\n", + " return names\n", + "\n", + "def get_md_contents(filename, directory='./contents'):\n", + " ''' Return contents from a filename as frontmatter handler '''\n", + " with open(f\"{directory}/{filename}\", \"r\") as f:\n", + " metadata, content = frontmatter.parse(f.read())\n", + " return metadata, content\n", + "\n", + "\n" + ] + }, + { + "cell_type": "code", + "execution_count": 15, + "id": "a7b4d409-d42d-4a74-b093-10ace148cc71", + "metadata": { + "scrolled": true, + "tags": [] + }, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "===Text ⛵ Lifeboats=== \n", + "''What if we could use some excerpts from all of what we are reading now as lifeboats in a sea of text?''\n", + "==== Text Traversing ====\n", + "\n", + "* Which texts will you traverse? will you make a “quote landscape” from the different texts brought today or stay with one single text?\n", + "* Identify patterns / gather observations / draw the relations between the words/paragraphs/sounds\n", + "* What are markers of orientation you would like to set for this text?\n", + "* Where should the reader turn?\n", + "* What are the rhythms in the text and how can they be amplified/interrupted/multiplied?\n", + "* Make a score or a diagram or a script to be performed out loud\n", + "\n", + "==== Process ====\n", + "\n", + "What if we could use some excerpts from all of what we are reading now as lifeboats in a sea of text? An attempt to play around with the continous permutations between contents and contexts.\n", + "\n", + "===Text Weaving=== \n", + "''Weave two texts, like warp and weft''\n", + "==== Slow Processing ====\n", + "\n", + "* if ''NLTK'' is a form of mapping language, vltk is a form of mapping language from a particular vantage point\n", + "* pick a text or a collection of texts from the pad from last week or the one of this week\n", + "* choose a linguistic pattern to apply over the text, for example: all verbs, every third word of a sentence, the 50 most used words, collocations you observe, words with multiple meanings, x of y, question marks etc. the processing can be both manual or automatic.\n", + "* what is the output?\n", + "\n", + "Weaved with Jian and Emma\n", + "\n", + "===Chat Reader=== \n", + "''Transform a text (ok no, actually a CSV file) into a chat''\n", + "==== Reader Prototyping ====\n", + "\n", + "* take suggested methods, use something we already used already - work on it, elaborate, don’t exclude what we’ve been doing with Manetta, Michael and Cristina go in smaller groups/individually and make a prototype - network of texts,\n", + "* something visual, reworking of something and what it can be a sensible way to explain to people\n", + "* come together at 15:30? and we share what we’ve done - talk about how can we stitch it together to make a reader\n", + "\n", + "==== Aggregating different things ~ output: chat form ====\n", + "\n", + "===== Levels =====\n", + "\n", + "* 🏸 1 touch the inputs\n", + "* 🏸 2 overlap/merge them a bit\n", + "* 🏸 3 mesh them completely\n", + "\n", + "===== Process =====\n", + "\n", + "* 🏏 take an academic text and turn it into a chat - translating into vernacular;\n", + "* 🏏 simplify the text\n", + "* 🏏 break it into chats\n", + "* 🏏 illustrate some bits\n", + "\n", + "Starting from a difficult but relatable text: our [https://pad.xpub.nl/p/SP16_0510 multi voiced pad] of the day.
\n", + "Parsed here: [https://cryptpad.fr/sheet/#/2/sheet/edit/N5uOS8x5Nu28ZiXPSk+kF-um/ Spreadsheet ghost]\n", + "\n", + "===== Rules to manipulate text: =====\n", + "\n", + "* 🏑 table of contents - shorts contents - tag them\n", + "* 🏑 turn into chat bubbles\n", + "* 🏑 illustrate a few\n", + "\n", + "===== Rules of text simplification (as ⛳️ objective ⛳️ as possible): =====\n", + "\n", + "* 🏓 simple sentences\n", + "* 🏓 on point\n", + "* 🏓 short paragraphs and short chapter\n", + "* 🏓 title on each paragraph\n", + "* 🏓 text could become image caption/illustrate chapters/graphs?\n", + "* 🏓 page number\n", + "* 🏓 navigation (table of contents)\n", + "\n", + "===== Demo online: [[chat/|Chat_a_pad]] =====\n", + "\n", + "===== Demo offline: =====\n", + "\n", + "\n", + "===Cam Transcript=== \n", + "''10 minutes transcription from Insecam webcams''\n", + "==== Video Transcribing ====\n", + "\n", + "[https://pad.xpub.nl/p/SP16_1210 SI16 - with Cristina and Manetta]\n", + "\n", + "In groups of 2-3:\n", + "\n", + "# Decide a video to transcribe (max 10 min)\n", + "# If you can’t decide on one, take 3-5 minutes to think about a subject of everyday knowledge that is particular to a location/group. Record yourself telling the story\n", + "# Transcribe individually either the video or your own recording\n", + "# Compare the transcriptions\n", + "\n", + "fun with Kimberley + Carmen\n", + "\n", + "===🥣 Soup-gen=== \n", + "''A soup aggregator for the next 2 years''\n", + "\n", + "===Rejection 🧠⛈️=== \n", + "''Round glossary just for fun ok''\n", + "\n", + "===🎵 K-PUB=== \n", + "''Karaoke as a mean of republishing''\n", + "==== Karaoke as a mean of republishing ====\n", + "\n", + "The idea is easy: take some songs, take some texts, and merge them through the logic of karaoke. For our first issue we want to work with Simon Weil’s diaries as text material and Franco Battiato’s songs as musical starting point.\n", + "\n", + "Using a popular and performative device such as karaoke we want to join different voices. Not only the ones from the people singing, but also from all the different authors that participate in this event: the writer of texts, the composer of musical bases and the musicians that will perform them. This project started as a joke and eventually growed because we saw a lot of potential in it.\n", + "\n", + "[[File:/soupboat/~kamo/static/img/k-pub/karaoke_recipe.png|frame|none|alt=|caption karaoke recipe]]\n", + "\n", + "==== Christmas Update ====\n", + "\n", + "Ok we got the room of the little Room for Sound at WdkA: nice. So here is a list of things we need and a list of things to do:\n", + "\n", + "===== TODO: =====\n", + "\n", + "* text from simone weil\n", + "** select excerpts\n", + "** excerpts to lyrics\n", + "* audio from franco battiato\n", + "** select songs\n", + "** find or write midi files\n", + "** sound design\n", + "** performance mode\n", + "* visual\n", + "** finish setup record mode (excerpts → lyrics)\n", + "** setup playback mode\n", + "** design\n", + "** development\n", + "* performance\n", + "** call musicians\n", + "** space setup\n", + "** technical setup\n", + "** comunication\n", + "** documentation\n", + "** pubblication\n", + "* residency\n", + "** daily contents to be published on their radio (readings, log, musical experiemnts…)\n", + "\n", + "===== workflow for 1 song: =====\n", + "\n", + "# select text excerpts\n", + "# select song\n", + "# song to midi\n", + "## if there is already a midi: cleanup: split and join tracks meaningfully\n", + "## if not: song transcription\n", + "# karaoke recording\n", + "## input: midi song, text excerpts\n", + "## process: performative conversion, excerpt to lyrics tool\n", + "## output: karaoke midi song with text track\n", + "# karaoke performance\n", + "## input: karaoke midi song\n", + "## output: karaoke text, karaoke midi\n", + "### midi → text, display the text for singin along\n", + "### midi → audio, for live playing and real time sound design of the song\n", + "### midi → visual, for live visual effects\n", + "\n", + "===== people we need: =====\n", + "\n", + "* musician (at least 1 to start with) (micalis? gambas? others?)\n", + "* visual (open call? or we can do it on our own for this)\n", + "* event logic & logistic (chae? gersande? etc? if anyone wants to take care of the setup it would be super cool)\n", + "* documentation (pinto? carmen? etc?)\n", + "\n", + "===🏓 PADliography=== \n", + "''Fetching all our pads from the PZI wiki with API magic''\n", + "\n", + "===Pimp the Soupboat WS=== \n", + "''Crash HTML_CSS workshop for our dear XPUB1 fellows''\n", + "\n", + "===Concrete 🎏 Label=== \n", + "''A tool for annotating visual contents''\n", + "How could computer read concrete & visual poetry? How does computer navigate through text objects in which layout and graphical elements play a fundamental role?\n", + "\n", + "With this tool you can upload an image and then annotate it spatially. In doing so you generate a transcription of the image that keeps track of the order of your annotations (and so the visual path you take when reading the image), as well as their position and size.\n", + "\n", + "Neither the image nor the labels nor the transcription will be uploaded online. Everything happen in your browser.\n", + "\n", + "'''a join research with Supi 👹👺'''\n", + "\n", + "===SI16 API node.js + express prototype=== \n", + "''Test for an API-based special issue''\n", + "==== Test for an API-based special issue ====\n", + "\n", + "* The backend is developed with node.js and express\n", + "* Each URL is mapped to a python script. The argument are passed to the script, processed and then returned as JSON\n", + "* We start with 2 functions: 1. a find and replace and 2. a shout\n", + "\n", + "('''update:''' hei this is not active anymore! [[issue.xpub.nl/16|but we really did an API at the end!]] aha!)\n", + "\n", + "==== Wait what why an API ====\n", + "\n", + "[[File:/soupboat/~kamo/static/img/api_bikes.jpg|frame|none|alt=|caption two half bikes attacched with tape and two kids pretty satisfied with their work]]\n", + "\n", + "This is to show what an API could be in relation to the exercises we usually do during the prototyping class. It is a way to render public a piece of work that usually stays behind several layers of accessibility. The idea of the special issue as an API could be a curated collection of what we are doing since september within a critical context. 🤯\n", + "\n", + "===== Find and Replace =====\n", + "\n", + "Find a target string in a text and replace it with the given replacement. The parameters are three.\n", + "\n", + "* text the text in which perform the research\n", + "* target the string we are searching for\n", + "* replacement the string we want to insert in place of the target\n", + "\n", + "The endpoint is:
\n", + "https://hub.xpub.nl/soupboat/cat-api/replace?text={text}&target={target}&replacement={replacement}\n", + "\n", + "===SI16 Structure Proposal=== \n", + "''Imaging the SI16 as an API ecosystem''\n", + "==== Overview ====\n", + "\n", + "The special issue is composed of three main parts: the library, the projects and the launch event. Each one of these has a slightly different nature, and so can access to different kinds of public. Imaging the SI16 as an ecosystem around these three faces permits us to create an organic form of public: someone comes for the event and discovers an API, someone else arrives from the code and is introduced to the critical context around it, each project tho is situated in a specific thematic niche and the interactions with the whole ecosystem could provide fresh air to spin mill.\n", + "\n", + "A systematic approach in the contents’ structure enables us to morph our projects without sacrifice the unique nature of each work. What’s more is that with a clear data structure we can deliver contents in different forms with less effort and less stress.\n", + "\n", + "The following structure is a draft. The order of the elements is not defined nor fixed. Some things are not mandatory, but would be nice and useful to have them if we think to the future life of the SP16 after the launch. The idea is to build something easy to scale, to expand, and to update. Something easy to participate. As an ecosystem some parts are more likely to grow and to evolve, and to provide a good soil as starting point maybe is the best thing we can do?\n", + "\n", + "==== 1. Library ====\n", + "\n", + "===== A collection of modules and tools within a context =====\n", + "\n", + "The library is the main container of the SP16. It provides a list of algorithms and describes the world in which they operate. This world is our source of truth: it is built from all the corpora we will aggregate and use for the projects, as well as other critical contributions, inquiries about the vernacular, and guide to navigate through all the materials. Ultimately a library, or a toolkit, is orientated. Its political stance stands not only in its contents, but also in the way it grants access to them. The relation between authors and public is not based only on power, but here also in trust, and collaboration, and dependency, and mutuality.\n", + "\n", + "Hence the library is part contents, part tools, part documentation, part showcase. These sections could be open and do not have to be perceived as finished. A library is always a work in progress, a work that we are starting now, a work that then someone else can continue.\n", + "\n", + "Beside the contents and their structure, the library also include a showcase section to display all the projects we are working on now. This section strengths the link between the special issue as a publication and the special issue as an event. In order to preserve the original approach of each project an in depth record of each work is provided here. It is perceived as something sprouting from the library. Are the projects and the special issue publication the same thing? Maybe not, but for sure they are deeply related.\n", + "\n", + "[[File:/soupboat/~kamo/static/img/lib-structure.svg|frame|none|alt=|caption Library]]\n", + "\n", + "* '''Title''', The name of the library\n", + "* '''Description''', An overview of what it does, how and why does it exist\n", + "* '''Context''', A collection of materials (researches, essays, excerpts, …) that situate this library in relation with the vernacular\n", + "** '''Manifesto''', Our attitude, our purposes, our plan. It could work as an introduction to the special issue\n", + "*** '''Our plan''', A summary of the research in terms of intentions\n", + "*** '''Our attitude''', An overview of the different approaches we used\n", + "*** '''Our purposes''', What do we want to achieve or encourage\n", + "** '''Materials - Corpora''', Collections of materials used as sources or collected for the projects\n", + "*** '''Corpus''', Single corpus of materials used as sources for the projects\n", + "**** '''Title''', A title for the corpus\n", + "**** '''Description''', An overview of the contents and how they are structured\n", + "**** '''Type''', The kind of materials included\n", + "**** '''Structure''', A description of the structure of the contents\n", + "**** '''Contents''', List of contents\n", + "*** '''…''', […other corpus in the list]\n", + "** '''Research and Development''', A collection of contribuitions (researches, essays, excerpts, …) that situate this library in relation with the vernacular\n", + "*** '''SP16 History''', Evolution of the SP16 work, devlog, excerpts from the pads, etc\n", + "*** '''List of contribuitions''', Collection of essays, excerpts from the texts read in class, piece from the tutors, from us, etc\n", + "**** '''Contribuition''', Single contribuition in the list\n", + "***** '''Title''', Title of the contribuition\n", + "***** '''Description''', Description of the contribution\n", + "***** '''Subject''', Theme of the contribution\n", + "***** '''Contents''', Contents of the contribuition\n", + "***** '''Credits''', Credits and references\n", + "**** '''…''', […other contribuitions in the list]\n", + "** '''Guide''', Presentation of the form of the SI16 and its structure, how to read it and navigate it\n", + "*** '''Getting started''', First steps into the SP16 as an API\n", + "*** '''What is a documentation''', How the documentation is structured\n", + "*** '''Learning how to walk while catwalking''', Navigation through the special issue\n", + "* '''Showcase - List of Projects Documentations'''S, howcase of full fledged and meaningful project built within and from the library, list of projects documentations\n", + "** '''Project Documentation''', Documentation of a project\n", + "*** '''Contents''', Extended description of the project, including the research, the process and the future possibilities\n", + "**** '''Research''', Background of the work, field of intrests, ideas, theory, etc\n", + "**** '''Process''', History of the work, process of development, prototyping, etc\n", + "**** '''Outcomes''', Results of the research and synthesis of the process\n", + "**** '''Direction''', Possibilities for the evolution of the project, new applications, ideas, findings\n", + "*** '''Documentation''', Nice showcase of the work\n", + "**** '''Text''', Textual description of project and key findings\n", + "**** '''Visual''', Visual documentation such as pictures, videos, etc\n", + "**** '''*''', Other specifications are unique for each project\n", + "*** '''References''', Reference to the corpora or materials used and to the tool involved during the production\n", + "**** '''Materials''', Corpora and sources used or created for the project\n", + "**** '''Theory''', References for specific theoric notes\n", + "**** '''Codes''', Modules, functions and parts of the library involved in the work\n", + "** '''…''', […other projects documentations in the showcase]\n", + "* '''List of Modules''', A list of all the different code approaches, or modules, that compose the library\n", + "** '''Module''', A thematic or reasoned group of functions\n", + "*** '''Title''', The name of the module\n", + "*** '''Decription''', A description of what it does\n", + "*** '''Applications''', Examples of applications that use several functions to build complex procedures\n", + "*** '''List of functions''', A list of functions\n", + "**** '''Function''', A single function in the module\n", + "***** '''Title''', The name of the function or algorithm\n", + "***** '''Description''', A description of what it does\n", + "***** '''Input''', The types of inputs it receives\n", + "***** '''Codes''', The procedure it follows\n", + "***** '''Output''', The types of outputs it returns\n", + "***** '''Example''', Simple and specific examples\n", + "**** '''…''', […other functions in the module]\n", + "*** '''…''', […other modules in the library]\n", + "\n", + "==== 2. Project ====\n", + "\n", + "===== Full fledged and meaningful work built within and from the library =====\n", + "\n", + "The main feature of having several serious different projects is both that we can explore different shades of the vernacular language processing and that we can access to different kinds of public. It is true that we are in needs for more time now, but at the same time having different projects to work on\n", + "\n", + "[[File:/soupboat/~kamo/static/img/proj-structure.svg|frame|none|alt=|caption Library]]\n", + "\n", + "* '''Title''', Title of the project\n", + "* '''Description''', Description of the project\n", + "* '''Colophon''', Credits and colophon\n", + "* '''Project Object''', Concrete outcomes of the project\n", + "** '''Object''', Concrete result of the work\n", + "** '''*''', Specifications are unique for each project\n", + "* '''Project Documentation''', Documentation of the project\n", + "** '''Contents''', Extended description of the project, including the research, the process and the future possibilities\n", + "*** '''Research''', Background of the work, field of intrests, ideas, theory, etc\n", + "*** '''Process''',History of the work, process of development, prototyping, etc\n", + "*** '''Outcomes''', Results of the research and synthesis of the process\n", + "*** '''Direction''', Possibilities for the evolution of the project, new applications, ideas, findings\n", + "** '''Documentation''',Nice showcase of the work\n", + "*** '''Text''', Textual description of project and key findings\n", + "*** '''Visual''',Visual documentation such as pictures, videos, etc\n", + "*** '''*''', Other specifications are unique for each project\n", + "** '''References''', Reference to the corpora or materials used and to the tool involved during the production\n", + "*** '''Corpora''', Corpora and sources used or created for the project\n", + "*** '''Theory/contributions''',References for specific theoric notes\n", + "*** '''Codes''', Modules, functions and parts of the library involved in the work\n", + "\n", + "==== 3. Launch ====\n", + "\n", + "===== @Varia on 17.12.2021 =====\n", + "\n", + "[[File:/soupboat/~kamo/static/img/launch-structure.svg|frame|none|alt=|caption Library]]\n", + "\n", + "* '''Space setup''', Display and physical setup of the space\n", + "* '''List of presentations''', List of moments in which the different contents of the SP16 are presented to the public\n", + "** '''Presentation''', Moment like performance, presentation, talk, workshop, panel, etc\n", + "*** '''Title''', Title of the presentation\n", + "*** '''Description''', Description of the presentation\n", + "*** '''Subject''', Theme of the contribution\n", + "*** '''Type''', Kind of presentation: talk, panel, showcase of a project, performance, etc\n", + "*** '''Contents''', Contents and theme of the presentation\n", + "** '''…''', […other presentations in the list]\n", + "* '''List of projects objects''', List of physical outcomes from the projects\n", + "** '''Project Object''', Concrete outcomes of the project\n", + "*** '''Object''', Concrete result of the work\n", + "*** '''*''', Specifications are unique for each project\n", + "** '''…''', […other project object in the list]\n", + "\n", + "===SI16 API Strapi+Nuxt.js prototype=== \n", + "''Test for a Strapi based backend + Nuxt.js frontend for the SI16''\n", + "A little test for the Special Issue 16 website developed with Nuxt.js for the frontend and Strapi as CMS / backend. Our Python functions can be uploaded in the CMS and then exposed as an API for the public usage.\n", + "\n", + "\n", + "\n", + "===SI16 Frontend Proposal=== \n", + "''Proposal for the SI16 website''\n", + "==== Design proposal ====\n", + "\n", + "A super teamwork with Chae, Emma, Supi + the incredible visual package from the Visual Identity group You can see the final result at [https://issue.xpub.nl/16 Learning How to Walk while Catwalking]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Intro.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Home.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/About.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Snippet%20Research.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Manifesto.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Functions.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Function.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Projects.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Project%20Documentation.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Showcase.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "===Spawn Sticker=== \n", + "''simple & flexible & adhesive''\n", + "A script that let you add stickers on top of HTML elements. To make it works just add a data-sticker attribute to your element. The content of the sticker will be the value of the attribute.\n", + "\n", + "
World
\n", + "
\n", + "\n", + "This script was used for the SI16 - Learning how to walk while cat-walking website. This is a simplified version. In the original one we had to deal with fixed elements (such as the header / nav of the pages) as well as relative ones. So the code there is a bit messier, but this one here it’s simple and clean.\n", + "\n", + "\n", + "
\n", + "

\n", + "How does it work\n", + "

\n", + "The code it’s composed of 3 main functions: one to create the sticker, one to spawn and attach it to an element, and a last one to limit the amount of stickers spawned at once.\n", + "\n", + "
\n", + "\n", + "propper documentation coming sooon\n", + "\n", + "\n", + "
\n", + "\n", + "===Annotation Compass=== \n", + "''A tool for gathering situated impressions in order to create individual, vernacular and poetic readings of various inputs''\n", + "This project is a multiplayer branch of the Concrete Label tool, developed in the context of the SI16 &&& is a super collaboration with Supi, Jian, Kim, Alex, and Emma. The description is a porting of the documentation that you can find along with the various showcases on the [https://hub.xpub.nl/soupboat/si16/projects/annotation-compass/ SI16 website].\n", + "\n", + "How do we bring multi-vocality in the work of annotation? The Annotation Compass builds composites from aggregated vernacular impressions, rich of their subjectivity and situatedness. It is the outcome of a three months journey questioning the relationship between vernacular languages and natural language processing tools.\n", + "\n", + "==== First Experiments ====\n", + "\n", + "===== The living-room =====\n", + "\n", + "[[File:/soupboat/~kamo/static/img/map_description_H.jpg|frame|none|alt=|caption Supi’s livingroom]]\n", + "\n", + "For this experiment, four of us were gathered in a living-room.\n", + "\n", + "* Number of participants: 4\n", + "* Location: Supi’s living room\n", + "* Aim: Map out each participant’s impressions of the living room.\n", + "* Material: The living room’s floor plan, InDesign, computers…..\n", + "* Time-frame: 5 minutes\n", + "* Instructions: individually annotate the floor plan with impressions of the living room\n", + "\n", + "After removing the floor plan and looking at the subjective annotations of this experiment, we observed that each outcome forms another ‘space’. Each person’s set of annotations brings a unique perspective of the living room , an ‘individual map’. We then layered the individual maps and the compilation resulted in a vernacular picture of the space. This alternative understanding of the space can only be given to a reader through those descriptions.\n", + "\n", + "===== Still from Michael Snow’s Wavelength =====\n", + "\n", + "[[File:https://pzwiki.wdka.nl/mw-mediadesign/images/3/3e/Selection_process_2.png|frame|none|alt=|caption Michael Snow, Wavelength]]\n", + "\n", + "The same method was applied to the photograph of a room. Each of us used a different set of coloured sticky notes and took 5 minutes to physically annotate the picture on the same surface. The picture was then removed from the background, resulting in a similar outcome as the experiment described above.\n", + "\n", + "From these observations, our interest on subjective annotations that could flow in a common understanding of an image grew. As a tool to collect situated impressions, we elaborated the idea of the Annotation Compass.\n", + "\n", + "On a given surface, such as an image, the tool facilitates the collection of annotations and their coordinates from various users simultaneously. These annotations represent individual knowledges and perspectives in regards to the given surface.\n", + "\n", + "[[File:https://pzwiki.wdka.nl/mw-mediadesign/images/3/32/Selection_process_3.png|Michael Snow, Wavelength]] [[File:https://pzwiki.wdka.nl/mw-mediadesign/images/2/2b/Selection_process_4.png|Michael Snow, Wavelength]]\n", + "\n", + "==== Instructions ====\n", + "\n", + "To use this tool, let’s consider the “host” any person interested in gathering annotation on a specific image; and the “guest” any person invited by the host to annotate the image.\n", + "\n", + "===== Process for the host =====\n", + "\n", + "# upload an image\n", + "# add a text to explain the context of the image or to give instructions and helpful advice to the guests\n", + "# send link to guests and invite them to annotate\n", + "# download a json-file or text-file that contains the collected data that was gathered so far\n", + "# try the different functions of SI16 to filter the collected dat\n", + "\n", + "===== Process for the guest =====\n", + "\n", + "# open the link sent by the host\n", + "# read the information attached to the image by the host\n", + "# use the cursor to select a specific area that you want to annotate\n", + "# write and insert your annotation(s)a\n", + "\n", + "==== The data ====\n", + "\n", + "The Tool not only archives the annotations, but also additional meta-data that can be helpful to analyze the outcome. The collected data is stored in a “json-file” that comes as a list of labels. In each label, one can find the file name of the annotated image, the coordinates of the annotation, the dimension of the annotation ‘box’, the annotation itself, the index number of the annotation and a user identification:\n", + "\n", + "{\n", + " \"image\": \"filename.jpg\",\n", + " \"position\": {\"x\": 12, \"y\": 97},\n", + " \"size\": {\"width\": 43, \"height\": 18},\n", + " \"text\": \"Content of the annotation\",\n", + " \"timestamp\": \"Wed, 01 Dec 2021 14:04:00 GMT\",\n", + " \"userID\": 123456789\n", + "}\n", + "* image: a reference to the filename of the image\n", + "* position: x and y coordinates given in percentage, relative to the top left corner of the image\n", + "* size: width and height given in percentage, relative to the size of the image\n", + "* text: the text content of the label\n", + "* timestamp: the moment in which the label was uploaded\n", + "* userID: a random generated id to keep track of the autorship of the labels\n", + "\n", + "'''for the future:''' at some point could be intresting to something like a components property, in order to make the tool more flexible and open to plugin or integration. Ideally this property is a list of components, and each one can add some kind of info or metadata for specific usecases, without the need to rewrite all the code to make room for that.\n", + "\n", + "The outcome provided by the Annotation Compass is ever-changing: whenever an individual adds an annotation, the data grows.\n", + "\n", + "After applying the tool to different projects we observed that the collected data can offer a reflexion on the so called “objective”: It provides individual perceptions and builds a common experience by including a multiplicity of impressions rather than one objective definition. In conclusion, the Tool can be used to provide alternative ways to define images, images of space, texts, and anything else annotatable.\n", + "\n", + "==== Possible applications of the tool: ====\n", + "\n", + "* Ask individuals to annotate the space they are in at the moment.\n", + "* Ask individuals to annotate a space from memory.\n", + "* Ask individuals to annotate imaginary spaces. (e.g. a space from a dream, a fictional space they know from a novel, a place that exists but they never went …)\n", + "* Ask individuals to annotate a space before and after they went for the first time.\n", + "* Invite individuals to a space and ask them to annotate it as a performative act that is situated not only in space but also time.\n", + "* Ask individuals to annotate a space whenever they want (unlimited access).\n", + "* Ask individuals to annotate a public space.\n", + "* Ask individuals to annotate a whole city, country, continent …\n", + "* Ask individuals to annotate a private space.\n", + "* Ask individuals to annotate an indoor space (bedroom, library, central station, theatre …)\n", + "* Ask individuals to annotate an outdoor space (park, market place, beach …)\n", + "* Ask specific groups to annotate a space (queer, teenagers, people with disabilities, immigrants …)\n", + "* Ask individuals to annotate specific things, e.g. emotions, colors, surfaces, light …\n", + "* Ask individuals to only use specific glyphs (e.g. ! ? and –) or emojis to annotate the space to include those not confident using words.\n", + "* Encourage individuals to use their mother tongue / slang / informal language to annotate a space.\n", + "* Ask only one individual to give many annotations of a space over time (daily diary, yearly check-in …)\n", + "* Ask individuals to annotate different spaces (e.g. their own living rooms)\n", + "* Ask individuals to annotate a space without using a standard map but rather an empty sheet as a starting point.\n", + "* Ask individuals to annotate a space without using a standard map but rather an individual map or vernacular map as a starting point.\n", + "* Ask individuals to annotate a space without using a standard map but rather a photograph of a space as a starting point.\n", + "* Ask individuals to annotate a space in real life (e.g. using sticky notes, writing on plexiglass, interview) and use the tool to insert the data afterwards.\n", + "* annotate a photograph (portrait, scene, landscape …)\n", + "* annotate a painting\n", + "* annotate a text\n", + "* annotate a song/sound\n", + "* misusing the tool\n", + "\n", + "===SI16 Backend=== \n", + "''Flexible Flask app (~) for the SI16 API''\n", + "==== Familiar and flexible ====\n", + "\n", + "Each contribuition to the SI16 API was unique. Both the subgroups’ projects and their documentation had different voices, different ways of presenting the contents, and different needs. This specificity required a system that was structured enough to keep together each pace, but remained flexible, in order to let anyone express her own approach to the Special Issue.\n", + "\n", + "With the SI16 being at the same time a set of functions, a playground to experiment with it, and a list of meaningful projects developed within their context, we structured the backend as an interface between the different parts of the work.\n", + "\n", + "The main idea was to define a pipeline that was not so different from the processes and technologies we learned and explored during the first trimester.\n", + "\n", + "==== Functions ====\n", + "\n", + "We chose to work with the Jupiter Notebook format we were familiar with, as a way to both collect and document our functions. With a common protocol defined within us and some 🐍 pythonic 🐍 (''omg this term is cringe ah ah'') good practices, we wrote a Notebook for each function. In each file there was the definition of the function, as well as a propper documentation and some examples on how to use it.\n", + "\n", + "A big part of the backend work was to let anyone structure their own notebook freely, deciding how to present the process and the result of each contribuition without forcing a structure. At the end the Flask application was designed to scan all the notebook folder and extract from it the function, as well as their input and output, and the documentation.\n", + "\n", + "With those information we generated an interactive page for [https://hub.xpub.nl/soupboat/si16/functions/ each function] in which the user could try and play around with our functions exposed as an API.\n", + "\n", + "==== Projects ====\n", + "\n", + "The organic process of SI16 led us to a collection of several interconnected projects. Each one of them had grown around a specific implementation of the functions we developed for the API. Those complex applications were initally developed as standalone Flask app, and they were merged all together at the end. (''well, ok, after the end to be honest'')\n", + "\n", + "One thing we could do differently next time is to use Flask’s Blueprints as a way to work in a more flexible way. At some point we were really struggling about how to manage the code and the collaboration on it. Now that we have an overview of how Python works, it could be nice to develop our projects in a more modular way. BTW we used the documentation pages as a gateway to the projects, in order to have a common starting point.\n", + "\n", + "Things got a bit complicated when the subgroup I was in started to working on sub-sub-project. And to face that we made the structure open to the possibility to nest projects one into the other, in order to have again flexibility between documentation and interaction on the website, and still a (kinda) structure in the filesystem.\n", + "\n", + "Actually: we were totally new into this, so probably half of the things we did were not just wrong, but illegal. BTW we are still learning so next time it will be better, deal with it.\n", + "\n", + "'''disclaimer''' there are some problems with the xpub git so the source code is still not totally public, but we are working on it. There the code is annotated and each function is documented so I will not go more in detail here for now.\n", + "\n", + "==== Project structure ====\n", + "\n", + "
si16\n",
+      "├── contents\n",
+      "├── notebooks\n",
+      "├── projects\n",
+      "│   ├── and-i-wish-that-your-question-has-been-answered\n",
+      "│   ├── annotation-compass\n",
+      "│   │   └── showcases\n",
+      "│   └── etc-portal\n",
+      "├── si16.py\n",
+      "├── static\n",
+      "│   ├── corpora\n",
+      "│   ├── css\n",
+      "│   ├── event\n",
+      "│   ├── font\n",
+      "│   ├── img\n",
+      "│   ├── js\n",
+      "│   └── uploads\n",
+      "└── templates
\n", + "* contents contains a list of markdown file for generic pages. For example the route /si16/intro will search and load the contents from the intro.md file in this folder.\n", + "* notebooks contains a list of Jupiter Notebook files, one for each function we developed for the API.\n", + "* projects contains a list of folder one for each subgroup project. Each one has a documentation.md file with the main contents and process of development.\n", + "* showcases is a optional folder in each project for nesting other sub projects in the sub project. Convoluted but useful and flexible.\n", + "* si16.py is the main module for the Flask app and the backend duties.\n", + "* static contains all the different files that are served statically from the webserver such as images, stylesheets, javascript files, etc.\n", + "* templates is a Flask folder that contains the HTML templates for generating the frontend pages.\n", + "\n", + "Ciao ciao\n", + "\n", + "===Soupboat CMS 00=== \n", + "''Micro JSON→HTML CMS for the first trimester''\n", + "==== A micro CMS ====\n", + "\n", + "During the first weeks at XPUB I spent some time trying to figure out how to archive and log the various projects going on. I felt to do it here in the Soupboat, because it’s more flexible and playful than the wiki, that remains of course the source of truth and the future-proof archiving system etc. etc. 👹👺\n", + "\n", + "After the second page though I was already ultra annoyed by the fact of rewriting or copy-pasting the HTML from a page to the other to keep at least a bit of style and structure and add contents manually. I wrote then a bit of code to have a default page and then used a JSON file filled with a list of projects. The script traversed this list and created a table with the basic informations about each one.\n", + "\n", + "The model for a project was something like that:\n", + "\n", + "{\n", + " \"title\": \"Text Weaving\",\n", + " \"date\": \"Oct 5, 2021\",\n", + " \"url\": \"10-05-2021-weaving/\",\n", + " \"git\": \"https://git.xpub.nl/kamo/text_weaving\",\n", + " \"pad\": \"https://pad.xpub.nl/p/replacing_cats\",\n", + " \"links\": [\n", + " {\n", + " \"url\": \"\",\n", + " \"title\": \"\",\n", + " }\n", + " ],\n", + " \"categories\": [\n", + " \"Python\",\n", + " \"NLTK\",\n", + " \"Text\"\n", + " ]\n", + "},\n", + "Each proj has a title, a date, an URL to a dedicated page. Then a list of links: the git repository for sharing the source code and the pad, that are the two most common types of link, and then a list of generic other links, each one composed by an URL and a title. There is also a list of categories, in order to give some hints about the project.\n", + "\n", + "The dedicated page for a project could have been something somewhere in the Soupboat, or a subfolder in my personal folder.\n", + "\n", + "The structure of the whole thing was: an index.html page with a cms.js script and a cms.json file. (Such imagination in these filenames). Then a style.css and a global.css for sharing the style with the various projects.\n", + "\n", + "Not really a revolutionary CMS but a starting point. Ah ah\n", + "\n", + "I’m writing this while im migrating everything into a flask based one, that will use more or less the same structure we developed for the SI16! Really happy with it. Good night\n", + "\n", + "===Temporality of the loot box=== \n", + "''Against instant rewarding''\n", + "==== Bill Viola opens a loot box ====\n", + "\n", + "The loot box implies a specific temporal dimension: the one with instant rewarding. When a player opens the loot box she receives immediate feedback. Sometimes it is dressed up with an aesthetic of suspense, but this is just cosmetics and the built-up climax often becomes just something undesired that the user wants (and even pay) to skip.\n", + "\n", + "In order to work with the idea of the loot box without re-enacting its toxic behavior and mechanics it could be interesting to hijack its temporality. By inflating the time between the purchasing and the result, we could create space for dig deeper in this complex and delicate topic.\n", + "\n", + "Loot box
\n", + "pay ●-->○ get\n", + "\n", + "SI17 Loot Box
\n", + "pay ●--things could happen here-->○ get\n", + "\n", + "This approach could help us in filling the loot box (tempo) without falling for the same addictive schemes that the industry is implementing for exploiting the players.\n", + "\n", + "'''Inflating the loot box means that the player could reclaim her own leisure time.''' If we focus on the temporal fruition of the l~b we can imagine to produce not only an object, but a time slot that the person from the public can reserve for herself. If we define this time slot as leisure time then we could create a sacred and safe space to take a rest and to arrest the acceleration of capital. Something like a checkpoint, speaking from a gaming point of view.\n", + "\n", + "An approach to deal with the temporal aspect in a way that doesn’t feel forced could be to rely on ''real-yet-slow-time'' processes for the material production of the special issue. A digital manufacturing production could make a lot of sense in this context. 👀\n", + "\n", + "See the [[soupboat/~kamo/projects/loot-box-sealing-device/|loot—box—sealing—device]] for a concrete and 3d example\n", + "\n", + "===LOOT—BOX—SEALING—DEVICE=== \n", + "''Closing Pandora's 3D large jar''\n", + "==== 3D printed loot box? ====\n", + "\n", + "This is an idea that follows some intuitions regarding the [[soupboat/~kamo/projects/loot-box-temporality/|temporality of the loot box]].\n", + "\n", + "Imagine the loot box being 3D printed, and especially 3D printed on demand when the player want to buy it at Page Not Found or Varia or any other place we are going to distribute our work. 3D printing is a slow process, and in order to create a small piece you need to wait let’s say an hour. When someone want to buy our loot box goes to PNF and ask for it, the 3d printing process begins and during the waiting time the player can access and navigate through the contents of our special issue. These contents are contained inside the temporality of the l~b, but they are not consumed instantaneously.\n", + "\n", + "[[File:/soupboat/~kamo/static/img/test-4d.jpg|frame|none|alt=|caption 3d sculpted loot boxes]]\n", + "\n", + "How do we want to deliver these contents? It could be related to the way of production of the physical l~b, for instance each player could contribute and shape the 3d model for the next player during the waiting time, and we can aggregate and collect narrations within and around the tools used in order to do so.\n", + "\n", + "In order to cover the expenses of a similar process part of the SI17 budget could cover the cost for some small 3D printers and printing material. The term of services of our special issue could allocate a certain amount of money from each purchase to self sustain the process (buying new printing material, etc)\n", + "\n", + "[[File:/soupboat/~kamo/static/img/test-5d.jpg|frame|none|alt=|caption 3d sculpted loot boxes]]\n", + "\n", + "==== The loot—box—sealing—device ====\n", + "\n", + "In the movie ''The NeverEnding Story'' based on the novel by Michael Ende, the two main characters are linked together by the Auryn. In the (fictional) real world the Auryn is a sigil on the cover of the (fictional) Neverending Story book that tells the tales of the land of Fantasia. In Fantasia, the Auryn is a magic medalion that the hero wears during his mission.\n", + "\n", + "[[File:/soupboat/~kamo/static/img/book_AURYN.jpg|Auryn from Neverending Story]] [[File:/soupboat/~kamo/static/img/atreyu_AURYN.jpg|Auryn from Neverending Story]]\n", + "\n", + "Here the Auryn acts as a seal: by removing it from the cover of the book the magical world of Fantasia begins to leak inside the (fictional) real world. Later on it will be the main character to fall inside the (fictional) book of the Neverending Story.\n", + "\n", + "This plot from Michael Ende resembles what happens when we play a game. Thanks to a weird device like a table game, a console or just a set of shared principles, we are able to flow into the [https://en.wikipedia.org/wiki/Magic_circle_(virtual_worlds) magic circle]. In the novel this happens with the main character reading a book, and while it’s true that every cultural object offers a certain degree of immersivity, the kind of agency, interaction and participation in the NeverEnding Story is something that reminds me more the act of playing.\n", + "\n", + "[[File:/soupboat/~kamo/static/img/seals1.jpg|frame|none|alt=|caption 3d sculpted seals]]\n", + "\n", + "To elaborate more on the 3D printed loot box: we could have a book and using the 3d printer to seal it with a new 3d sigil every time! In a way it is like '''sealing the loot box instead of opening it'''. As in the NeverEnding Story (but this is a recurrent magical trope) we would have a sigil connecting who is reading the book with another player. This connection will be not with a fictional character, but with a real person: the one that bought the previous book. There is something like the [https://pzwiki.wdka.nl/mediadesign/Glossary_of_productive_play#Reciprocity reciprocity] descripted by Mausse here, but is a reciprocity swimming backstroke: the player receives a gift from a past uknown fellow player, and leaves one for a future unkown one. In this way the reciprocity chain (sounds weird) goes spiral.\n", + "\n", + "[[File:/soupboat/~kamo/static/img/seals2.jpg|frame|none|alt=|caption 3d sculpted seals]]\n", + "\n", + "==== Overview ====\n", + "\n", + "Here a brief description of the different pieces that compose the loot—box—sealing—device\n", + "\n", + "# The pubblication is composed of 2 main parts: a base and a superstructure. omg sorry\n", + "# The base is the same for every copy, and it’s where the main contents are. (imagine it like a book)\n", + "# The superstructure is dynamic, it is produced and added to the base when and where the pubblication is purchased by someone. (imagine it like a 3d printed something)\n", + "# The production of the superstructure inflates the temporality of the loot box: our narration can inhabit this timespan.\n", + "# While someone wait for the 3d sigil to be printed we can offer a ''temporary safe zone'': a checkpoint at PNF (or other locations)\n", + "# In this ''temporary safe zone'' the player can leave something for the next player by designing the next sigil and\n", + "# In this ''temporary safe zone'' the player can be guided through the contents of the pubblication while waiting for the superstructure to be produced\n", + "# When a new copy of the pubblication is bought, a sigil is 3d printed and then uploaded on the website of the SI17 as documentation\n", + "\n", + "===== 1. Physical pubblication (a book? a box? something) =====\n", + "\n", + "I don’t really know which kind of contents, but since we are reading a lot could be intresting to prepare a critical reader about the loot box issues, collecting different perspectives and heterogeneous voices? Then production mode ok and then we print say 100 copies. Our magical technical book binding team figures out the best way in which we can add some dynamic components or 3D addition to the cover-object-book, but we don’t do that yet. We just leave the pubblications without the 3d cherry on the cake.\n", + "\n", + "===== 2. A custom 3d sculpting software =====\n", + "\n", + "''Note that the process could be also implemented with totally different techniques based on digital manufacturing like wood working with cnc, laser cut, etc endless possibilities, but let’s say we want these exoterical 3d printed sigils.''\n", + "\n", + "We can develop a simple 3D sculpting software that even people not used to 3D modeling could use. Something like this [https://stephaneginier.com/sculptgl/ SculptGL]. This is not super easy to do, but not as hard as an API. We could start from some open source thing and then customize it in the way we need. [https://www.blender.org/ Blender] is written in Python and has a super nice API for programming custom plugins, for example.\n", + "\n", + "Side note totally (not totally) unrelated: plugin republishing? 🤯 Ahah it would be great to publish some excerpts from Simone Weil inside the UI of Blender or Photoshop or whatever. Injecting culture in the cultural industry tools.\n", + "\n", + "===== 3. Some templates for the 3d sigil =====\n", + "\n", + "* material and practical needs\n", + "* SI17 visual identity as a starting point\n", + "* SI17 contents as orientation\n", + "* SI17 world building as heading\n", + "\n", + "(wip)\n", + "\n", + "===== 4. A 3D Printing device =====\n", + "\n", + "* A 3D printer\n", + "* Some interface to sculpt the next 3d seal (aka 1 pc)\n", + "* A nice setup for display everything (checkpoint? treasure chest? loot box?)\n", + "\n", + "(wip)\n", + "\n", + "===== 5. A website =====\n", + "\n", + "* Info\n", + "* Inventory that keep track of the sigils (world building)\n", + "\n", + "(wip)\n", + "\n", + "\n", + "===Multi Player Loot Box=== \n", + "''Notes to generate relations within the public''\n", + "If the public of the classical loot box is made of individuals that are easier to exploit, our SI17 could research on ways to generate relations within the public.\n", + "\n", + "==== Homogeneous public? ====\n", + "\n", + "The classical loot box assumes two main things:\n", + "\n", + "* That the public is an homogeneous group of individual users\n", + "* That the relation between the loot box and its public should be always the same\n", + "\n", + "The loot box offers a limited amount of agency to the player. There is no quality in the interaction with it. The only way to use and access its content is to open it (and this usually means to pay). From the point of view of the loot box every player is the same, an their abilities or features or uniqueness have no meaning at all. One could say that the loot box is a popular device since is an object with a common interface for everyone, but is this really the case?\n", + "\n", + "The interaction with the loot box has no quality, but for sure it implies some kind of quantity. To access is it required to spend a certain amount of money or time. This quantifiable expense is presented as a flat access scheme with homogeneous outcomes, but it is not. The effects of spending hundred €€€ in Fortnite skins are different for a kid and a streamer, for example. [https://www.youtube.com/watch?v=EXy83qr9jrI While the streamer on Twitch spends 800€ in a row] to gain a thousandfold through sponsorizations and views, the average kid just throws away half of his mother’s monthly income.\n", + "\n", + "The public of the loot box is not homogeneous.\n", + "\n", + "Keeping that in mind, we could rethink the basic way of interaction with the loot box. What if we offer something different from the flat price scheme? What if someone can pay less to access to the contents and someone else must pay more? Could this be a way to inject different qualities in the interaction with the loot box?\n", + "\n", + "===Mimic research 📦=== \n", + "''Exploring a tricky treasure trope''\n", + "==== 2 different types of treasure chest ====\n", + "\n", + "In RPG games the Mimic is a monster that appears as a treasure chest. When a player tries to interact with it in order to get the contents of the chest, it reveals its true nature and attacks her. The name of the Mimic come from its act of mimesis: this creature is like a predator that disguises itself in order to sneak up on its prey.\n", + "\n", + "A treasure chest in a game can be seen as a ''temporary safe zone'' because it interrupts the flow of incoming threats by offering a reward to the player. The Mimic endangers this ''temporary safe zone'', and breaks a kind of contract between the player and the game. The treasure chest is transformed in a risky russian roulette, that inoculates danger in the safe zones of a narration.\n", + "\n", + "I’m tempted to write here that the loot box is something like a ''meta mimic'': an object that promises an in-game reward, but produces a damage to the player. What’s more is that this damage is inflicted in the real world, not to the player but to the person. What’s then the difference between a loot box and a Mimic?\n", + "\n", + "Starting from the [https://en.wikipedia.org/wiki/Mimic_(Dungeons_%26_Dragons) Dungeons and Dragons’ Mimic] I’d like to explore the evolution and the ecology of the mimic through different games. How do the game designers choose where Mimics spawn? What are the relations between those creatures, the level design, the stress of the player, as well as her expectations and trust in the game world? Are there similarities in the way the Mimics and the loot boxes are presented to the player?\n", + "\n", + "'''TODO: amazon package but has fangs'''\n", + "\n", + "\n", + "===A Katamari Fanfiction=== \n", + "''What's left when you roll on everything?''\n", + "==== Modding narrative ====\n", + "\n", + "After lunch we will be writing fanfic based on the games you played and analysed this week! Lidia said this.\n", + "\n", + "We played Katamari Damacy this week → We wrote a fan faction about it → We approached the fanfiction with empathyzing with the most inanimate things of the game → So we focused on the prince and the objects of the game → We left the King of all Cosmos in the backgroud, since he talks already a lot in the original game. → Suggested soundtrack for the reading: [https://www.youtube.com/watch?v=QAA6hq9RL-4 katamari OST]\n", + "\n", + "Fun fictious with Mitsa and Erica\n", + "\n", + "===Loot Box as a Decorator=== \n", + "''Hermit crab in the book store''\n", + "==== 3 intuitions come together ====\n", + "\n", + "Right now:\n", + "\n", + "# A ''loot box'' within a context as such: a book store\n", + "# A ''loot box'' within a temporality\n", + "# A ''loot box'' with different kinds of public\n", + "\n", + "Over me 🦶🦶 🥁 🦵🦵 📀—-\n", + "\n", + "===== Context =====\n", + "\n", + "A ''lolt box'' accellerates and forces the mechanics of an environment. In some games it can speed up some tedious process, in other it offers a specific special instant rewarding. Our ''loot bbx'' inhabits a book store, or more in general a cultural space. In which ways can we hack through the normal functioning of such place? At a certain point today I thought: ''ah, we could fill it with the last page of every books in Page Not Found'', just to say something about the presumed shortcuts that the ''loat box'' promises to the player. The idea is kinda fun, but then what? So maybe no.\n", + "\n", + "===== Temporality =====\n", + "\n", + "A couple of days ago I wrote some notes about the temporality of the ''loto box''. In 1 sentence the idea is: if the ''lot bx'' is a mechanism of instant rewarding, we could hijack and inflate its tempo and then fill it with our contents. Instead of opening in 30 seconds, the ''loot bocs'' takes one hour. Meanwhile we can deliver our messages.\n", + "\n", + "Today I read ''Play like a feminist'' by ''Shira Chess'' and guess what: there’s an entire part about the temporality of leisure → 🤯\n", + "\n", + "There is something really important we should keep in mind: we are aiming to a public that is etherogeneous. The intersectional approach that Chess advocates it’s a reminder that we can inflate the temporality of the ''loot biusch'', but not everyone will have access to it. So we need to think at both the limits of this spectrum, and put them in a meaningful relation.\n", + "\n", + "===== Public =====\n", + "\n", + "As said: our public could be complex. For sure there will be some ultra publishing nerd that will sip all our soup and will be happy with it, but isn’t 1 of our goals to reach also the world outside XPUB? ''Chess'' in her book writes about micro temporality, little timespans carved between work shifts or commutes. She has a point when writes that with smartphones leisure time is more affordable and is detached from the rigid tempo of labour.\n", + "\n", + "==== Decorator ====\n", + "\n", + "Combining these three aspects the question is: can we create a relation between who can spend an hour at PNF waiting for the ''loot bosx'' and who cannot?\n", + "\n", + "Enter the ''boot lox'' as a decorator.\n", + "\n", + "A decorator is something that adorn something else. In Python and object-oriented programming in general is also a name of a design pattern that adds some functionality to other functions. We used it already also with Flask! A ''oobt olx'' as a decorator means that we could attach it to other pubblication at PNF. Something like an hermit crab inside other shells or that spiky things that bites the tail of a Slowpoke.\n", + "\n", + "===== The setup =====\n", + "\n", + "# The physical decorator, that is a digital manufactured object produced on demand\n", + "# A catalogue of books that can be decorated\n", + "# A website with a digital loot box\n", + "\n", + "===== The process =====\n", + "\n", + "# As a part of the research we compose a bibliography that is also a statement i.e: ''away from the cis white west guys gang''. This bibliography could be site specific for PNF or the other places we will distribute our SI17. We should choose to sell our pubblication in book stores or spaces that want to host this bibliography in their inventory. In this way we can use our SI17 as a device to reclaim space for marginal and subaltern voices.\n", + "# The decorator inhabits this bibliography. It is presented as a special offer in which you can buy one of the book from the bibliography and receive a decorated version of it. Maybe we can sort out some kind of discount mechanism using part of the budget we have. The point is to favor access.\n", + "# The deal is that the production of the decorator has a certain temporality: if we imagine it as something that is 3D printed or laser cutted or CNC carved on demand, it involves a little waiting time. During this waiting time we can transform the book shop in a library, and offer full access to the titles in our bibliography.\n", + "# In exchange we ask to the reader for some insights, notes or excerpts from the books. Those will be inserted in the inventory of our loot box.\n", + "# This loot box can be accessed online from the website of SI17. It works exaclty as a classic one, except that we offer it for free. The content is a collection of thoughts questioning the issue of our project, in the context around our bibliography and readers. It could be an effective way to offer our research to that kind of public that has no means to access it.\n", + "# To open the online loot box and get one (more or less random?) excerpt, the user is asked to draw a decorator. This could be made with a super simple web interface. The drawing will be the next digital manufactured decorator.\n", + "# In the website of SI17 we can keep track of the decorators as well as the exceprts, in a process of inventory and world building.\n", + "\n", + "==== Skin care routine ====\n", + "\n", + "This idea of decorator is somehow similar to the concept of skin (in videogame terms). Here our decorator acts as cosmetic in the same way a fancy hat decorates your sniper in Team Fortress 2.\n", + "\n", + "In the game itself the skin is nothing more than a visual candy. But once you look at the turbulence it puts in motion in the game superstructure, you realize that the kind of power-up it offers is something that acts in the social sphere around the game. (See: peer pressure, emotional commitment, skins gambling, product placement, collectibles)\n", + "\n", + "A loot of lot boxes promise rare skins, and by doing so it lures in players. We could subvert this process by taking the skin out of the box.\n", + "\n", + "Instead of opening it to get a new skin, you design a new skin (the decorator!) to open the loot box.\n", + "\n", + "\n", + "===🥐 XQUISITE BRUNCH 🥐=== \n", + "''A branching take on the exquisite corpse game''\n", + "==== An exquisite branch ====\n", + "\n", + "The [https://en.wikipedia.org/wiki/Exquisite_corpse exquisite corpse] is a multiplayer game invented by the surrealists in which the participants compose a drawing or a story together.\n", + "\n", + "Traditionally the game is played on a long piece of paper, and each player draws a part, hiding the drawing to the next person, but leaving some hints. The following fellow continues to draw from there and so on. The result is a weird linear narrative, in which the transition between authors are at the same time smooth and abrupt.\n", + "\n", + "With the xquisite branch I would like to try a digital approach to the game. If the original version is constrained to the single piece of paper and is doomed to be linear, here we can imagine our drawings forking and branching and go in different directions.\n", + "\n", + "The process could be something like:\n", + "\n", + "someone send you a link to continue the drawing and when you are happy with it and upload it you receive a new link to share with others. If you pass the link to just one person the xquisite branch will continue, but if you pass it to several people the drawing will branch, resulting in multiple version with a common starting point.\n", + "\n", + "I would like to try this not only as a multiplayer game, but also as a creative tool. I will ask [https://www.togniser.com/ ser togni] if he want to draw some comics with it. But it could also used for branching meetings aha 🤯\n", + "\n", + "==== TODOs ====\n", + "\n", + "* add name for credits?\n", + "* display name in svg?\n", + "* comment the code\n", + "* remove new from homepage? or\n", + "* add per-new level in the xquisite branches (this makes more sense!)\n", + "\n", + "===Chaotic evil puzzles=== \n", + "''Jigsaw puzzle as a form of encryption of our SI17''\n", + "==== There are 100 lot boxes with 100 different jigsaw puzzles of 100 pieces.*
\n", + "[[File:https://hub.xpub.nl/soupboat/~kamo/static/img/100-boxes.jpg|100 boxes compose the face of aymeric if seen from a precise point of view]] ====\n", + "\n", + "''* (exact quantities to be defined)''\n", + "\n", + "==== The picture on each puzzles is a content related to our experiments, games and researches for the SI17 ====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~kamo/static/img/catchy-puzzles.jpg|frame|none|alt=|caption sample of contents for the puzzles]]\n", + "\n", + "Each puzzle is an A2 sized image displaying the works we did during this trimester, designed in a way that can be interesting for the players to buy it, even for the sake of doing a jigsaw puzzle itself.\n", + "\n", + "''f.e. A puzzle could be the rules for an RPG; or the map of a bitsy game with some critical texts about gamification; a generated maze, a fan fiction, the glossary, the list of one sentence games, etc.''\n", + "\n", + "In other words, the collection of puzzles will be a sort of inventory of our research framed in the form of jigsaw.\n", + "\n", + "==== The pieces are scattered through all the loot boxes, in a way that each one contains parts of multiple puzzles. ====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~grgr/static/img/jigmix.png|frame|none|alt=|caption shuffle of the jiigsaw pieces]]\n", + "\n", + "This could be done in a meaningful way: the idea is not to have total random pieces, but legible fragments from each content.\n", + "\n", + "==== When players buy the loot box they can compose the puzzle, but the result is a patchwork of different images. ====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~grgr/static/img/patchworks.png|frame|none|alt=|caption in each loot box there is a patchwork of different puzzles]]\n", + "\n", + "If the puzzles have different images but the same pieces pattern, each loot box can have a complete puzzle, but with mixed pieces. In this way we can avoid the frustration that having an incomplete jigsaw puzzle could cause.\n", + "\n", + "==== On the website of SI17 the players can upload their fragments, and compose together an online version to complete all the jigsaw puzzles. ====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~kamo/static/img/puzzle-web.jpg|frame|none|alt=|caption demo web interface]]\n", + "\n", + "We can numerate or identify each piece of the puzzles with a code. This could be done when we generate the pattern of the puzzle with Python 👀. To upload a fragment of puzzle, the player is required to insert the code of the pieces, and maybe take a picture. In this way we can be sure that only who has the fragment can insert it online.\n", + "\n", + "==== Optional feature: users can upload pictures of their fragments and we could have a collective documentation of the work. ====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~kamo/static/img/share-puzzle.jpg|demo upload pictures]] ''This is not unpaid work, it’s participation''\n", + "\n", + "Nice feature for the website could be that you can see the digital version of the puzzle, but on mouse :hover we could show the pictures from the public. A puzzle of photos of puzzles. This could be challenging but funny to develop.\n", + "\n", + "==== On the website of SI17 there is a community section for exchanging the fragments and complete the puzzle ====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~kamo/static/img/xchange-puzzle.jpg|frame|none|alt=|caption demo xchange puzzle fragments]]\n", + "\n", + "The community section with users and exchange etc could be tricky, but we can stay as simple as possible and do it with Flask. The exchange section should exclude by design the speculation on the pieces or money. A fragment for a fragment.\n", + "\n", + "==== On the website of SI17 the public can access to the experiments, games and researches as well ====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~grgr/static/img/lootbweb.png|frame|none|alt=|caption demo other contents on the website]]\n", + "\n", + "In this way we can provide access to the contents such as the bitsy games, the karaoke video, the ruleset of our games, the reading list, etc.\n", + "\n", + "===== Risk / Benefit assessment =====\n", + "\n", + "PROS + simple to make + accessible because it’s a well known game + a lot of design + not to much code + use what we already have + interesting interaction with the public + performative element ready for the launch + multiple temporalities (individual puzzle, contents, shared puzzles) + world building\n", + "\n", + "CONS: - not an API 👀 - i don’t like puzzles - people mught not appreciate the fact of missing parts of their puzzle, but we’re here to subvert it, and contents will be available online anyways\n", + "\n", + "===== Bonus: summary workflow =====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~kamo/static/img/puzzle-production.jpg|production]] The process to make the puzzles could be easy as design - print - cut - shuffle - package, nothing more (+ website)\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~grgr/static/img/puzzle-box.jpg|box]] The loot box could provide a context and the instruction of the game, as well as the link to the website.\n", + "\n", + "==== Scenario ====\n", + "\n", + "Mapping the chaotic evil puzzles in the through the different scenari\n", + "\n", + "===== of the form =====\n", + "\n", + "''scenario 1: The lootbox is a physical box that contains something''\n", + "\n", + "Fragments of several puzzles.\n", + "\n", + "===== of the feature =====\n", + "\n", + "''scenario 7: The items in the loot-box are complementary and it is necessary to connect with other loot-box owners in order to assemble the pieces together.''\n", + "\n", + "There is a single player aspect and there is a collaborative aspect. These two components could be mediated by an online platform, such as the online shared puzzles, but could also work offline if people just combine the pieces of their loot boxes.\n", + "\n", + "===== of the contents =====\n", + "\n", + "''scenario 2: The loot box is a collection of the prototyped games (and researches!) we did so far curated in some kind of form''\n", + "\n", + "The jigsaw puzzle is just a form of encryption of our contents. A shared surface in which we can publish really different things such as a fan fiction, a board game, a link to a video karaoke or a videogame, an essay, the characters of a roleplaying game, etc.\n", + "\n", + "''scenario 3: The loot box is a collection of mini-games + an ultimate game that has to be performed with other players that purcahsed the LB''\n", + "\n", + "There are several layers of playability and access:\n", + "\n", + "# to solve the fragments (single player jigsaw)\n", + "# to access the contents (games, texts, etc. )\n", + "# to combine the fragments (ultimate multiplayer game, re-distribuition of the loot boxes contents)\n", + "\n", + "''scenario 6: The lootbox contains a series of jigsaw puzzles but their pieces are scattered through all the boxes and there is a platform online where you can see the missing tiles.''\n", + "\n", + "Nothing to declare.\n", + "\n", + "==== memos ====\n", + "\n", + "* play with quantities and distribuition of pieces (1 piece only, large groups, variations, etc)\n", + "* play with puzzle pattern: alternative to the mainstream shape of the tiles\n", + "* pieces naming system\n", + "* And then the aim is to exchange pieces or something and rebuild the original puzzles? (can this be a critical approach?) (does this make sense only if there are as many puzzles as loot boxes?)\n", + "* short term puzzles (link to multimedia contents, puzzle shards)\n", + "* long term puzzles (hidden messages, 1 word in each puzzles and a secret sentence)\n", + "* size and quantity\n", + "* The jigsaw puzzles results should be secret? There would be much more mistery. Can we reveal only during the launch, but not on the loot boxes? Maybe is a compromise, but maybe is not necessary. Should we reveal them only in the website meanwhile they are completed? Could be.
\n", + "\n", + "* [https://github.com/jkenlooper/piecemaker Generate Jigsaw Puzzle with python]\n", + "* [https://www.youtube.com/watch?v=xqhOrY8unn4 How To Laser Cut a Jigsaw Puzzle]\n", + "* [https://draradech.github.io/jigsaw/index.html Jigsaw puzzle generator]\n", + "* [https://proceduraljigsaw.github.io/Fractalpuzzlejs/ Fractlal Jigsaw]\n", + "\n", + "===SI17 producing the public=== \n", + "''homeworks for 21/02''\n", + "===== Which kind of public do we want to produce? =====\n", + "\n", + "If the loot box and gamification produce a single player in competition with all the others, I would like to produce a collaborative public. More like a community than a billboard with users ranking. Also I think this is an operation that requires time. Hence the loot box as a shrine: a safe place to build, discover and charge with meanings together.\n", + "\n", + "===== How do we want our public to engage with our loot box? =====\n", + "\n", + "I like the idea of different temporalities and the concept of slow processing. Something could be delivered really fast, something could require an entire evening, something could need to wait an entire month.\n", + "\n", + "We should balance the single player / multi player aspect of the loot box. It would be great to have something that one can enjoy both alone and with others. The collaborative aspect of the loot box should be something possible and encouraged, but not mandatory.\n", + "\n", + "===== What kinds of questions/feelings/thoughts it create ? =====\n", + "\n", + "* To feel part of a community or fellows in a shared quest.\n", + "* To wonder how vast is the inventory of the loot box.\n", + "* To question the idea of competition as necessary for gamification\n", + "* To raise awareness on different voices on the topic\n", + "\n", + "===== How the lootbox is going to be presented to our public during our launch event? =====\n", + "\n", + "The presentation could perform the contents of the loot box.\n", + "\n", + "===== How will the launch look like? =====\n", + "\n", + "Nice\n", + "\n", + "===== How can the lootboxes be activated by the public in a sustainable an independent way after the launch? =====\n", + "\n", + "With a website\n", + "\n", + "===== What is our relationship to PnF? =====\n", + "\n", + "I don’t know\n", + "\n", + "===== Does the publication relate to PnF? how? =====\n", + "\n", + "I don’t think so\n", + "\n", + "===== how and where do we sell the lootbox? =====\n", + "\n", + "In place that want to host subaltern authors from our reading list.\n", + "\n", + "===== do we sell in other stores? if yes how are they connected? =====\n", + "\n", + "We are the connection\n", + "\n", + "===test static files in project directory=== \n", + "''it's a test''\n", + "==== Hello this is a test. ====\n", + "\n", + "This image is in the same folder of the project, not in the static one.\n", + "\n", + "[[File:hiroshige.jpg|frame|none|alt=|caption test]]\n", + "\n", + "and it works!\n", + "\n", + "and now also the md file that generates the page [[documentation.md|should be accessible]].\n", + "\n", + "is this a good idea?\n", + "\n", + "\n" + ] + } + ], + "source": [ + "folders = list_folders('public_html/projects')\n", + "projects = []\n", + "\n", + "for folder in folders:\n", + " project = get_md_contents('documentation.md', f'public_html/projects/{folder}')\n", + " project_date = datetime.strptime(project[0]['date'], '%d/%m/%Y')\n", + " project[0]['date'] = datetime.strftime(project_date, '%d %b, %y')\n", + " project[0]['categories'].sort()\n", + " projects.append(project)\n", + "\n", + "projects.sort(reverse=False, key=lambda project: datetime.strptime(\n", + " project[0]['date'], '%d %b, %y'))\n", + " \n", + "page = ''\n", + "\n", + "for project in projects:\n", + " page = page + f\"==={project[0]['title']}=== \\n\"\n", + " page = page + f\"''{project[0]['description']}''\\n\"\n", + " page = page + pypandoc.convert_text(project[1], 'mediawiki', format='md', extra_args=['--base-header-level=3'])\n", + " \n", + "\n", + "print(page)" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "53c9a453-4399-4ec5-b905-3cd739276919", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/projects/soup-to-wiki/.ipynb_checkpoints/log_to_wiki_2-checkpoint.ipynb b/projects/soup-to-wiki/.ipynb_checkpoints/log_to_wiki_2-checkpoint.ipynb new file mode 100644 index 0000000..f204814 --- /dev/null +++ b/projects/soup-to-wiki/.ipynb_checkpoints/log_to_wiki_2-checkpoint.ipynb @@ -0,0 +1,108 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 1, + "id": "6f73330a-e0d5-4d22-a4c7-246b928394e9", + "metadata": {}, + "outputs": [], + "source": [ + "import os\n", + "import frontmatter\n", + "from datetime import datetime\n", + "\n", + "from mako.template import Template\n" + ] + }, + { + "cell_type": "code", + "execution_count": 2, + "id": "3d183b25-72fb-4b90-a639-188a68e02fc1", + "metadata": {}, + "outputs": [], + "source": [ + "def list_folders(folder):\n", + " ''' Return all the folders in a folder '''\n", + " names = []\n", + " for entry in os.scandir(folder):\n", + " # add to the list only proper files\n", + " if not entry.name.startswith('.') and entry.is_dir():\n", + " # remove the extension from the filename\n", + " names.append(entry.name)\n", + " return names\n", + "/\n", + "def get_md_contents(filename, directory='./contents'):\n", + " ''' Return contents from a filename as frontmatter handler '''\n", + " with open(f\"{directory}/{filename}\", \"r\") as f:\n", + " metadata, content = frontmatter.parse(f.read())\n", + " return metadata, content\n", + "\n", + "\n" + ] + }, + { + "cell_type": "code", + "execution_count": 18, + "id": "a7b4d409-d42d-4a74-b093-10ace148cc71", + "metadata": {}, + "outputs": [], + "source": [ + "import mako.runtime\n", + "mako.runtime.UNDEFINED = ''\n", + "\n", + "\n", + "\n", + "folders = list_folders('../')\n", + "projects = []\n", + "\n", + "for folder in folders:\n", + " project, content = get_md_contents('documentation.md', f'../{folder}')\n", + " project_date = datetime.strptime(project['date'], '%d/%m/%Y')\n", + " project['date'] = datetime.strftime(project_date, '%d %b, %y')\n", + " project['slug'] = folder\n", + " project['categories'].sort()\n", + " projects.append(project)\n", + "\n", + "projects.sort(reverse=False, key=lambda project: datetime.strptime(\n", + " project['date'], '%d %b, %y'))\n", + "\n", + "baloons = Template(filename=\"baloons_web.html\")\n", + "\n", + "with open('output.html', 'w') as f:\n", + " f.write(baloons.render(projects=projects))\n", + "\n", + "\n", + "\n" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "faa6e297-3685-415a-8617-f3f4198da21d", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/projects/soup-to-wiki/.ipynb_checkpoints/output-checkpoint.html b/projects/soup-to-wiki/.ipynb_checkpoints/output-checkpoint.html new file mode 100644 index 0000000..1d03f3c --- /dev/null +++ b/projects/soup-to-wiki/.ipynb_checkpoints/output-checkpoint.html @@ -0,0 +1,251 @@ + + + + + + + Baloons + + + +
    + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/lifeboats/ Text ⛵ Lifeboats]

    +

    What if we could use some excerpts from all of what we are reading now as lifeboats in a sea of text?

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/weaving/ Text Weaving]

    +

    Weave two texts, like warp and weft

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/chat-reader/ Chat Reader]

    +

    Transform a text (ok no, actually a CSV file) into a chat

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/cam-transcript/ Cam Transcript]

    +

    10 minutes transcription from Insecam webcams

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/soup-gen/ 🥣 Soup-gen]

    +

    A soup aggregator for the next 2 years

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/rejection/ Rejection 🧠⛈️]

    +

    Round glossary just for fun ok

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/k-pub/ 🎵 K-PUB]

    +

    Karaoke as a mean of republishing

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/padliography/ 🏓 PADliography]

    +

    Fetching all our pads from the PZI wiki with API magic

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/pimp/ Pimp the Soupboat WS]

    +

    Crash HTML_CSS workshop for our dear XPUB1 fellows

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/concrete-label/ Concrete 🎏 Label]

    +

    A tool for annotating visual contents

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/api-worldbuilding/ Chimeric API]

    +

    What Can API Learn from Poetics and World-building?

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/si16-API-strapi-nuxt-prototype/ SI16 API Strapi-Nuxt prototype]

    +

    Test for a node.js backend for the SI16 app

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/si16-API-express-prototype/ SI16 API node.js + express prototype]

    +

    Test for an API-based special issue

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/si16-structure-proposal/ SI16 Structure Proposal]

    +

    Imaging the SI16 as an API ecosystem

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/si16-frontend-design/ SI16 Frontend Proposal]

    +

    Proposal for the SI16 website

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/spawn-sticker/ Spawn Sticker]

    +

    simple & flexible & adhesive

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/annotation-compass/ Annotation Compass]

    +

    A tool for gathering situated impressions in order to create individual, vernacular and poetic readings of various inputs

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/si16-backend/ SI16 Backend]

    +

    Flexible Flask app (~) for the SI16 API

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/cms-00/ Soupboat CMS 00]

    +

    Micro JSON→HTML CMS for the first trimester

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-temporality/ Temporality of the loot box]

    +

    Against instant rewarding

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-sealing-device/ LOOT—BOX—SEALING—DEVICE]

    +

    Closing Pandora's 3D large jar

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-multi-player/ Multi Player Loot Box]

    +

    Notes to generate relations within the public

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/mimic/ Mimic research 📦]

    +

    Exploring a tricky treasure trope

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/katamari-fanfic/ A Katamari Fanfiction]

    +

    What's left when you roll on everything?

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/loot-box-decorator/ Loot Box as a Decorator]

    +

    Hermit crab in the book store

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/xquisite/ 🥐 XQUISITE BRUNCH 🥐]

    +

    A branching take on the exquisite corpse game

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/soup-flask/ Flask that soup 🥥]

    +

    Confy Flask setup on the Soupboat

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/chaotic-evil-puzzles/ Chaotic evil puzzles]

    +

    Jigsaw puzzle as a form of encryption of our SI17

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/si17-public/ SI17 producing the public]

    +

    homeworks for 21/02

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/test-static-files/ test static files in project directory]

    +

    it's a test

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/soup-to-wiki/ Soup to Wiki]

    +

    Teleport this log to the wiki (teleport not ready yet)

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/chameleon/ Chameleon RRPG 🦎]

    +

    A Random Role Play Game to inject micro scripted actions in daily life

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/postit-gen/ Post it generator]

    +

    Prototype for web-to-print postit

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/postit-contents/ Post-it Contents]

    +

    A repo to organize SI17 contents in a post-it guise

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/post-flask/ we printed 85 000 postit for real]

    +

    Web-to-print post-it generator app

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/postit-identity/ Post-it Visual Identity]

    +

    How to deliver a pubblication in post-it format

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/si17-homepage/ SI17 Homepage]

    +

    A simple static website to host the loot box

    +
    • + +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/lifespan/ Deciduous Time Everlasting Internet]

    +

    Design the lifespan of a website

    +
    • +
+ + diff --git a/projects/soup-to-wiki/baloons.html b/projects/soup-to-wiki/baloons.html new file mode 100644 index 0000000..bda5dee --- /dev/null +++ b/projects/soup-to-wiki/baloons.html @@ -0,0 +1,71 @@ + + + + + + + Baloons + + + +
    + %for project in projects: + <% + import random + color = "%03x" % random.randint(0xEEE, 0xFFF) + %> +
  • +

    [https://hub.xpub.nl/soupboat/~kamo/projects/${project['slug']}/ ${project['title']}]

    +

    ${project['description']}

    +
    • + %endfor +
+ + diff --git a/projects/soup-to-wiki/baloons_web.html b/projects/soup-to-wiki/baloons_web.html new file mode 100644 index 0000000..1368133 --- /dev/null +++ b/projects/soup-to-wiki/baloons_web.html @@ -0,0 +1,73 @@ + + + + + + + Baloons + + + + + + diff --git a/projects/soup-to-wiki/documentation.md b/projects/soup-to-wiki/documentation.md new file mode 100644 index 0000000..aa92e76 --- /dev/null +++ b/projects/soup-to-wiki/documentation.md @@ -0,0 +1,95 @@ +--- +title: Soup to Wiki +description: Teleport this log to the wiki (teleport not ready yet) +date: 12/04/2022 +categories: + - Log + - Wiki +cover: wiki-soup.jpg +cover_alt: wikipedia page for soup sorry +--- + +Since the Soupboat is fragile and temporary (like everything else?), it's nice to keep this documentation updated also in the [Wiki](https://pzwiki.wdka.nl/mediadesign/Main_Page). + +## update 12/04 + +Since the previous version was too messy I tried with a more concise approach. Instead of dumping the whole contents I choose to report only title + description and a link to the project here in the SB. + +The page is generated with [Mako](https://www.makotemplates.org/), started looking at it during the workshop with Brendan. Its syntax seems much more legible than the Jinja2's one. + +The code is more or less the same. Find it in this [notebook](log_to_wiki_2.ipynb). The file for the template is [baloons.html](baloons.html). + +[And this is the result !!!!!](output.html) + +## first attempt 21/02 + + + +ATM i'm using this [notebook](log_to_wiki.ipynb) to do a simple conversion from all the markdown files of these pages to wikitext. In this way it's less painful (but also less curated?) to have the wiki up to date. It uses [pypandoc](https://pypi.org/project/pypandoc/), that is a python wrapper for [pandoc](https://pandoc.org/). + +```python + + +import os +import frontmatter +from datetime import datetime +import pypandoc + +def list_folders(folder): + ''' Return all the folders in a folder ''' + names = [] + for entry in os.scandir(folder): + # add to the list only proper files + if not entry.name.startswith('.') and entry.is_dir(): + # remove the extension from the filename + names.append(entry.name) + return names + +def get_md_contents(filename, directory='./contents'): + ''' Return contents from a filename as frontmatter handler ''' + with open(f"{directory}/{filename}", "r") as f: + metadata, content = frontmatter.parse(f.read()) + return metadata, content + + +# in the projects directory there is a folder for every project. +# The info about the project are in a "documentation.md" file + +folders = list_folders('public_html/projects') +projects = [] + +for folder in folders: + project = get_md_contents('documentation.md', f'public_html/projects/{folder}') + project_date = datetime.strptime(project[0]['date'], '%d/%m/%Y') + project[0]['date'] = datetime.strftime(project_date, '%d %b, %y') + project[0]['categories'].sort() + projects.append(project) + + +# the projects are sorted by date +projects.sort(reverse=False, key=lambda project: datetime.strptime( + project[0]['date'], '%d %b, %y')) + + + +# the variable page will be filled with wikitext +page = '' + +# here we insert a bit of meta info such as the title and the description +for project in projects: + + page = page + f"==={project[0]['title']}=== \n" + page = page + f"''{project[0]['description']}''\n" + page = page + pypandoc.convert_text(project[1], 'mediawiki', format='md', extra_args=['--base-header-level=3']) + +# and then i copy this result and paste it in the wiki +print(page) + + +``` + +there are still problems (as always?) especially with the images, that need to be uploaded manually in the wiki........... maybe i will provide super nice alt description to avoid this tedious workk sorry. + + +ok + diff --git a/projects/soup-to-wiki/log_to_wiki.ipynb b/projects/soup-to-wiki/log_to_wiki.ipynb new file mode 100644 index 0000000..3e0acfc --- /dev/null +++ b/projects/soup-to-wiki/log_to_wiki.ipynb @@ -0,0 +1,1175 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 6, + "id": "6f73330a-e0d5-4d22-a4c7-246b928394e9", + "metadata": {}, + "outputs": [], + "source": [ + "import os\n", + "import frontmatter\n", + "from datetime import datetime\n", + "import pypandoc" + ] + }, + { + "cell_type": "code", + "execution_count": 7, + "id": "3d183b25-72fb-4b90-a639-188a68e02fc1", + "metadata": {}, + "outputs": [], + "source": [ + "def list_folders(folder):\n", + " ''' Return all the folders in a folder '''\n", + " names = []\n", + " for entry in os.scandir(folder):\n", + " # add to the list only proper files\n", + " if not entry.name.startswith('.') and entry.is_dir():\n", + " # remove the extension from the filename\n", + " names.append(entry.name)\n", + " return names\n", + "\n", + "def get_md_contents(filename, directory='./contents'):\n", + " ''' Return contents from a filename as frontmatter handler '''\n", + " with open(f\"{directory}/{filename}\", \"r\") as f:\n", + " metadata, content = frontmatter.parse(f.read())\n", + " return metadata, content\n", + "\n", + "\n" + ] + }, + { + "cell_type": "code", + "execution_count": 15, + "id": "a7b4d409-d42d-4a74-b093-10ace148cc71", + "metadata": { + "scrolled": true, + "tags": [] + }, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "===Text ⛵ Lifeboats=== \n", + "''What if we could use some excerpts from all of what we are reading now as lifeboats in a sea of text?''\n", + "==== Text Traversing ====\n", + "\n", + "* Which texts will you traverse? will you make a “quote landscape” from the different texts brought today or stay with one single text?\n", + "* Identify patterns / gather observations / draw the relations between the words/paragraphs/sounds\n", + "* What are markers of orientation you would like to set for this text?\n", + "* Where should the reader turn?\n", + "* What are the rhythms in the text and how can they be amplified/interrupted/multiplied?\n", + "* Make a score or a diagram or a script to be performed out loud\n", + "\n", + "==== Process ====\n", + "\n", + "What if we could use some excerpts from all of what we are reading now as lifeboats in a sea of text? An attempt to play around with the continous permutations between contents and contexts.\n", + "\n", + "===Text Weaving=== \n", + "''Weave two texts, like warp and weft''\n", + "==== Slow Processing ====\n", + "\n", + "* if ''NLTK'' is a form of mapping language, vltk is a form of mapping language from a particular vantage point\n", + "* pick a text or a collection of texts from the pad from last week or the one of this week\n", + "* choose a linguistic pattern to apply over the text, for example: all verbs, every third word of a sentence, the 50 most used words, collocations you observe, words with multiple meanings, x of y, question marks etc. the processing can be both manual or automatic.\n", + "* what is the output?\n", + "\n", + "Weaved with Jian and Emma\n", + "\n", + "===Chat Reader=== \n", + "''Transform a text (ok no, actually a CSV file) into a chat''\n", + "==== Reader Prototyping ====\n", + "\n", + "* take suggested methods, use something we already used already - work on it, elaborate, don’t exclude what we’ve been doing with Manetta, Michael and Cristina go in smaller groups/individually and make a prototype - network of texts,\n", + "* something visual, reworking of something and what it can be a sensible way to explain to people\n", + "* come together at 15:30? and we share what we’ve done - talk about how can we stitch it together to make a reader\n", + "\n", + "==== Aggregating different things ~ output: chat form ====\n", + "\n", + "===== Levels =====\n", + "\n", + "* 🏸 1 touch the inputs\n", + "* 🏸 2 overlap/merge them a bit\n", + "* 🏸 3 mesh them completely\n", + "\n", + "===== Process =====\n", + "\n", + "* 🏏 take an academic text and turn it into a chat - translating into vernacular;\n", + "* 🏏 simplify the text\n", + "* 🏏 break it into chats\n", + "* 🏏 illustrate some bits\n", + "\n", + "Starting from a difficult but relatable text: our [https://pad.xpub.nl/p/SP16_0510 multi voiced pad] of the day.
\n", + "Parsed here: [https://cryptpad.fr/sheet/#/2/sheet/edit/N5uOS8x5Nu28ZiXPSk+kF-um/ Spreadsheet ghost]\n", + "\n", + "===== Rules to manipulate text: =====\n", + "\n", + "* 🏑 table of contents - shorts contents - tag them\n", + "* 🏑 turn into chat bubbles\n", + "* 🏑 illustrate a few\n", + "\n", + "===== Rules of text simplification (as ⛳️ objective ⛳️ as possible): =====\n", + "\n", + "* 🏓 simple sentences\n", + "* 🏓 on point\n", + "* 🏓 short paragraphs and short chapter\n", + "* 🏓 title on each paragraph\n", + "* 🏓 text could become image caption/illustrate chapters/graphs?\n", + "* 🏓 page number\n", + "* 🏓 navigation (table of contents)\n", + "\n", + "===== Demo online: [[chat/|Chat_a_pad]] =====\n", + "\n", + "===== Demo offline: =====\n", + "\n", + "\n", + "===Cam Transcript=== \n", + "''10 minutes transcription from Insecam webcams''\n", + "==== Video Transcribing ====\n", + "\n", + "[https://pad.xpub.nl/p/SP16_1210 SI16 - with Cristina and Manetta]\n", + "\n", + "In groups of 2-3:\n", + "\n", + "# Decide a video to transcribe (max 10 min)\n", + "# If you can’t decide on one, take 3-5 minutes to think about a subject of everyday knowledge that is particular to a location/group. Record yourself telling the story\n", + "# Transcribe individually either the video or your own recording\n", + "# Compare the transcriptions\n", + "\n", + "fun with Kimberley + Carmen\n", + "\n", + "===🥣 Soup-gen=== \n", + "''A soup aggregator for the next 2 years''\n", + "\n", + "===Rejection 🧠⛈️=== \n", + "''Round glossary just for fun ok''\n", + "\n", + "===🎵 K-PUB=== \n", + "''Karaoke as a mean of republishing''\n", + "==== Karaoke as a mean of republishing ====\n", + "\n", + "The idea is easy: take some songs, take some texts, and merge them through the logic of karaoke. For our first issue we want to work with Simon Weil’s diaries as text material and Franco Battiato’s songs as musical starting point.\n", + "\n", + "Using a popular and performative device such as karaoke we want to join different voices. Not only the ones from the people singing, but also from all the different authors that participate in this event: the writer of texts, the composer of musical bases and the musicians that will perform them. This project started as a joke and eventually growed because we saw a lot of potential in it.\n", + "\n", + "[[File:/soupboat/~kamo/static/img/k-pub/karaoke_recipe.png|frame|none|alt=|caption karaoke recipe]]\n", + "\n", + "==== Christmas Update ====\n", + "\n", + "Ok we got the room of the little Room for Sound at WdkA: nice. So here is a list of things we need and a list of things to do:\n", + "\n", + "===== TODO: =====\n", + "\n", + "* text from simone weil\n", + "** select excerpts\n", + "** excerpts to lyrics\n", + "* audio from franco battiato\n", + "** select songs\n", + "** find or write midi files\n", + "** sound design\n", + "** performance mode\n", + "* visual\n", + "** finish setup record mode (excerpts → lyrics)\n", + "** setup playback mode\n", + "** design\n", + "** development\n", + "* performance\n", + "** call musicians\n", + "** space setup\n", + "** technical setup\n", + "** comunication\n", + "** documentation\n", + "** pubblication\n", + "* residency\n", + "** daily contents to be published on their radio (readings, log, musical experiemnts…)\n", + "\n", + "===== workflow for 1 song: =====\n", + "\n", + "# select text excerpts\n", + "# select song\n", + "# song to midi\n", + "## if there is already a midi: cleanup: split and join tracks meaningfully\n", + "## if not: song transcription\n", + "# karaoke recording\n", + "## input: midi song, text excerpts\n", + "## process: performative conversion, excerpt to lyrics tool\n", + "## output: karaoke midi song with text track\n", + "# karaoke performance\n", + "## input: karaoke midi song\n", + "## output: karaoke text, karaoke midi\n", + "### midi → text, display the text for singin along\n", + "### midi → audio, for live playing and real time sound design of the song\n", + "### midi → visual, for live visual effects\n", + "\n", + "===== people we need: =====\n", + "\n", + "* musician (at least 1 to start with) (micalis? gambas? others?)\n", + "* visual (open call? or we can do it on our own for this)\n", + "* event logic & logistic (chae? gersande? etc? if anyone wants to take care of the setup it would be super cool)\n", + "* documentation (pinto? carmen? etc?)\n", + "\n", + "===🏓 PADliography=== \n", + "''Fetching all our pads from the PZI wiki with API magic''\n", + "\n", + "===Pimp the Soupboat WS=== \n", + "''Crash HTML_CSS workshop for our dear XPUB1 fellows''\n", + "\n", + "===Concrete 🎏 Label=== \n", + "''A tool for annotating visual contents''\n", + "How could computer read concrete & visual poetry? How does computer navigate through text objects in which layout and graphical elements play a fundamental role?\n", + "\n", + "With this tool you can upload an image and then annotate it spatially. In doing so you generate a transcription of the image that keeps track of the order of your annotations (and so the visual path you take when reading the image), as well as their position and size.\n", + "\n", + "Neither the image nor the labels nor the transcription will be uploaded online. Everything happen in your browser.\n", + "\n", + "'''a join research with Supi 👹👺'''\n", + "\n", + "===SI16 API node.js + express prototype=== \n", + "''Test for an API-based special issue''\n", + "==== Test for an API-based special issue ====\n", + "\n", + "* The backend is developed with node.js and express\n", + "* Each URL is mapped to a python script. The argument are passed to the script, processed and then returned as JSON\n", + "* We start with 2 functions: 1. a find and replace and 2. a shout\n", + "\n", + "('''update:''' hei this is not active anymore! [[issue.xpub.nl/16|but we really did an API at the end!]] aha!)\n", + "\n", + "==== Wait what why an API ====\n", + "\n", + "[[File:/soupboat/~kamo/static/img/api_bikes.jpg|frame|none|alt=|caption two half bikes attacched with tape and two kids pretty satisfied with their work]]\n", + "\n", + "This is to show what an API could be in relation to the exercises we usually do during the prototyping class. It is a way to render public a piece of work that usually stays behind several layers of accessibility. The idea of the special issue as an API could be a curated collection of what we are doing since september within a critical context. 🤯\n", + "\n", + "===== Find and Replace =====\n", + "\n", + "Find a target string in a text and replace it with the given replacement. The parameters are three.\n", + "\n", + "* text the text in which perform the research\n", + "* target the string we are searching for\n", + "* replacement the string we want to insert in place of the target\n", + "\n", + "The endpoint is:
\n", + "https://hub.xpub.nl/soupboat/cat-api/replace?text={text}&target={target}&replacement={replacement}\n", + "\n", + "===SI16 Structure Proposal=== \n", + "''Imaging the SI16 as an API ecosystem''\n", + "==== Overview ====\n", + "\n", + "The special issue is composed of three main parts: the library, the projects and the launch event. Each one of these has a slightly different nature, and so can access to different kinds of public. Imaging the SI16 as an ecosystem around these three faces permits us to create an organic form of public: someone comes for the event and discovers an API, someone else arrives from the code and is introduced to the critical context around it, each project tho is situated in a specific thematic niche and the interactions with the whole ecosystem could provide fresh air to spin mill.\n", + "\n", + "A systematic approach in the contents’ structure enables us to morph our projects without sacrifice the unique nature of each work. What’s more is that with a clear data structure we can deliver contents in different forms with less effort and less stress.\n", + "\n", + "The following structure is a draft. The order of the elements is not defined nor fixed. Some things are not mandatory, but would be nice and useful to have them if we think to the future life of the SP16 after the launch. The idea is to build something easy to scale, to expand, and to update. Something easy to participate. As an ecosystem some parts are more likely to grow and to evolve, and to provide a good soil as starting point maybe is the best thing we can do?\n", + "\n", + "==== 1. Library ====\n", + "\n", + "===== A collection of modules and tools within a context =====\n", + "\n", + "The library is the main container of the SP16. It provides a list of algorithms and describes the world in which they operate. This world is our source of truth: it is built from all the corpora we will aggregate and use for the projects, as well as other critical contributions, inquiries about the vernacular, and guide to navigate through all the materials. Ultimately a library, or a toolkit, is orientated. Its political stance stands not only in its contents, but also in the way it grants access to them. The relation between authors and public is not based only on power, but here also in trust, and collaboration, and dependency, and mutuality.\n", + "\n", + "Hence the library is part contents, part tools, part documentation, part showcase. These sections could be open and do not have to be perceived as finished. A library is always a work in progress, a work that we are starting now, a work that then someone else can continue.\n", + "\n", + "Beside the contents and their structure, the library also include a showcase section to display all the projects we are working on now. This section strengths the link between the special issue as a publication and the special issue as an event. In order to preserve the original approach of each project an in depth record of each work is provided here. It is perceived as something sprouting from the library. Are the projects and the special issue publication the same thing? Maybe not, but for sure they are deeply related.\n", + "\n", + "[[File:/soupboat/~kamo/static/img/lib-structure.svg|frame|none|alt=|caption Library]]\n", + "\n", + "* '''Title''', The name of the library\n", + "* '''Description''', An overview of what it does, how and why does it exist\n", + "* '''Context''', A collection of materials (researches, essays, excerpts, …) that situate this library in relation with the vernacular\n", + "** '''Manifesto''', Our attitude, our purposes, our plan. It could work as an introduction to the special issue\n", + "*** '''Our plan''', A summary of the research in terms of intentions\n", + "*** '''Our attitude''', An overview of the different approaches we used\n", + "*** '''Our purposes''', What do we want to achieve or encourage\n", + "** '''Materials - Corpora''', Collections of materials used as sources or collected for the projects\n", + "*** '''Corpus''', Single corpus of materials used as sources for the projects\n", + "**** '''Title''', A title for the corpus\n", + "**** '''Description''', An overview of the contents and how they are structured\n", + "**** '''Type''', The kind of materials included\n", + "**** '''Structure''', A description of the structure of the contents\n", + "**** '''Contents''', List of contents\n", + "*** '''…''', […other corpus in the list]\n", + "** '''Research and Development''', A collection of contribuitions (researches, essays, excerpts, …) that situate this library in relation with the vernacular\n", + "*** '''SP16 History''', Evolution of the SP16 work, devlog, excerpts from the pads, etc\n", + "*** '''List of contribuitions''', Collection of essays, excerpts from the texts read in class, piece from the tutors, from us, etc\n", + "**** '''Contribuition''', Single contribuition in the list\n", + "***** '''Title''', Title of the contribuition\n", + "***** '''Description''', Description of the contribution\n", + "***** '''Subject''', Theme of the contribution\n", + "***** '''Contents''', Contents of the contribuition\n", + "***** '''Credits''', Credits and references\n", + "**** '''…''', […other contribuitions in the list]\n", + "** '''Guide''', Presentation of the form of the SI16 and its structure, how to read it and navigate it\n", + "*** '''Getting started''', First steps into the SP16 as an API\n", + "*** '''What is a documentation''', How the documentation is structured\n", + "*** '''Learning how to walk while catwalking''', Navigation through the special issue\n", + "* '''Showcase - List of Projects Documentations'''S, howcase of full fledged and meaningful project built within and from the library, list of projects documentations\n", + "** '''Project Documentation''', Documentation of a project\n", + "*** '''Contents''', Extended description of the project, including the research, the process and the future possibilities\n", + "**** '''Research''', Background of the work, field of intrests, ideas, theory, etc\n", + "**** '''Process''', History of the work, process of development, prototyping, etc\n", + "**** '''Outcomes''', Results of the research and synthesis of the process\n", + "**** '''Direction''', Possibilities for the evolution of the project, new applications, ideas, findings\n", + "*** '''Documentation''', Nice showcase of the work\n", + "**** '''Text''', Textual description of project and key findings\n", + "**** '''Visual''', Visual documentation such as pictures, videos, etc\n", + "**** '''*''', Other specifications are unique for each project\n", + "*** '''References''', Reference to the corpora or materials used and to the tool involved during the production\n", + "**** '''Materials''', Corpora and sources used or created for the project\n", + "**** '''Theory''', References for specific theoric notes\n", + "**** '''Codes''', Modules, functions and parts of the library involved in the work\n", + "** '''…''', […other projects documentations in the showcase]\n", + "* '''List of Modules''', A list of all the different code approaches, or modules, that compose the library\n", + "** '''Module''', A thematic or reasoned group of functions\n", + "*** '''Title''', The name of the module\n", + "*** '''Decription''', A description of what it does\n", + "*** '''Applications''', Examples of applications that use several functions to build complex procedures\n", + "*** '''List of functions''', A list of functions\n", + "**** '''Function''', A single function in the module\n", + "***** '''Title''', The name of the function or algorithm\n", + "***** '''Description''', A description of what it does\n", + "***** '''Input''', The types of inputs it receives\n", + "***** '''Codes''', The procedure it follows\n", + "***** '''Output''', The types of outputs it returns\n", + "***** '''Example''', Simple and specific examples\n", + "**** '''…''', […other functions in the module]\n", + "*** '''…''', […other modules in the library]\n", + "\n", + "==== 2. Project ====\n", + "\n", + "===== Full fledged and meaningful work built within and from the library =====\n", + "\n", + "The main feature of having several serious different projects is both that we can explore different shades of the vernacular language processing and that we can access to different kinds of public. It is true that we are in needs for more time now, but at the same time having different projects to work on\n", + "\n", + "[[File:/soupboat/~kamo/static/img/proj-structure.svg|frame|none|alt=|caption Library]]\n", + "\n", + "* '''Title''', Title of the project\n", + "* '''Description''', Description of the project\n", + "* '''Colophon''', Credits and colophon\n", + "* '''Project Object''', Concrete outcomes of the project\n", + "** '''Object''', Concrete result of the work\n", + "** '''*''', Specifications are unique for each project\n", + "* '''Project Documentation''', Documentation of the project\n", + "** '''Contents''', Extended description of the project, including the research, the process and the future possibilities\n", + "*** '''Research''', Background of the work, field of intrests, ideas, theory, etc\n", + "*** '''Process''',History of the work, process of development, prototyping, etc\n", + "*** '''Outcomes''', Results of the research and synthesis of the process\n", + "*** '''Direction''', Possibilities for the evolution of the project, new applications, ideas, findings\n", + "** '''Documentation''',Nice showcase of the work\n", + "*** '''Text''', Textual description of project and key findings\n", + "*** '''Visual''',Visual documentation such as pictures, videos, etc\n", + "*** '''*''', Other specifications are unique for each project\n", + "** '''References''', Reference to the corpora or materials used and to the tool involved during the production\n", + "*** '''Corpora''', Corpora and sources used or created for the project\n", + "*** '''Theory/contributions''',References for specific theoric notes\n", + "*** '''Codes''', Modules, functions and parts of the library involved in the work\n", + "\n", + "==== 3. Launch ====\n", + "\n", + "===== @Varia on 17.12.2021 =====\n", + "\n", + "[[File:/soupboat/~kamo/static/img/launch-structure.svg|frame|none|alt=|caption Library]]\n", + "\n", + "* '''Space setup''', Display and physical setup of the space\n", + "* '''List of presentations''', List of moments in which the different contents of the SP16 are presented to the public\n", + "** '''Presentation''', Moment like performance, presentation, talk, workshop, panel, etc\n", + "*** '''Title''', Title of the presentation\n", + "*** '''Description''', Description of the presentation\n", + "*** '''Subject''', Theme of the contribution\n", + "*** '''Type''', Kind of presentation: talk, panel, showcase of a project, performance, etc\n", + "*** '''Contents''', Contents and theme of the presentation\n", + "** '''…''', […other presentations in the list]\n", + "* '''List of projects objects''', List of physical outcomes from the projects\n", + "** '''Project Object''', Concrete outcomes of the project\n", + "*** '''Object''', Concrete result of the work\n", + "*** '''*''', Specifications are unique for each project\n", + "** '''…''', […other project object in the list]\n", + "\n", + "===SI16 API Strapi+Nuxt.js prototype=== \n", + "''Test for a Strapi based backend + Nuxt.js frontend for the SI16''\n", + "A little test for the Special Issue 16 website developed with Nuxt.js for the frontend and Strapi as CMS / backend. Our Python functions can be uploaded in the CMS and then exposed as an API for the public usage.\n", + "\n", + "\n", + "\n", + "===SI16 Frontend Proposal=== \n", + "''Proposal for the SI16 website''\n", + "==== Design proposal ====\n", + "\n", + "A super teamwork with Chae, Emma, Supi + the incredible visual package from the Visual Identity group You can see the final result at [https://issue.xpub.nl/16 Learning How to Walk while Catwalking]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Intro.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Home.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/About.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Snippet%20Research.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Manifesto.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Functions.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Function.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Projects.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Project%20Documentation.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "[[File:/soupboat/~kamo/static/img/si16-frontend/Showcase.jpg|frame|none|alt=|caption Library]]\n", + "\n", + "===Spawn Sticker=== \n", + "''simple & flexible & adhesive''\n", + "A script that let you add stickers on top of HTML elements. To make it works just add a data-sticker attribute to your element. The content of the sticker will be the value of the attribute.\n", + "\n", + "
World
\n", + "
\n", + "\n", + "This script was used for the SI16 - Learning how to walk while cat-walking website. This is a simplified version. In the original one we had to deal with fixed elements (such as the header / nav of the pages) as well as relative ones. So the code there is a bit messier, but this one here it’s simple and clean.\n", + "\n", + "\n", + "
\n", + "

\n", + "How does it work\n", + "

\n", + "The code it’s composed of 3 main functions: one to create the sticker, one to spawn and attach it to an element, and a last one to limit the amount of stickers spawned at once.\n", + "\n", + "
\n", + "\n", + "propper documentation coming sooon\n", + "\n", + "\n", + "
\n", + "\n", + "===Annotation Compass=== \n", + "''A tool for gathering situated impressions in order to create individual, vernacular and poetic readings of various inputs''\n", + "This project is a multiplayer branch of the Concrete Label tool, developed in the context of the SI16 &&& is a super collaboration with Supi, Jian, Kim, Alex, and Emma. The description is a porting of the documentation that you can find along with the various showcases on the [https://hub.xpub.nl/soupboat/si16/projects/annotation-compass/ SI16 website].\n", + "\n", + "How do we bring multi-vocality in the work of annotation? The Annotation Compass builds composites from aggregated vernacular impressions, rich of their subjectivity and situatedness. It is the outcome of a three months journey questioning the relationship between vernacular languages and natural language processing tools.\n", + "\n", + "==== First Experiments ====\n", + "\n", + "===== The living-room =====\n", + "\n", + "[[File:/soupboat/~kamo/static/img/map_description_H.jpg|frame|none|alt=|caption Supi’s livingroom]]\n", + "\n", + "For this experiment, four of us were gathered in a living-room.\n", + "\n", + "* Number of participants: 4\n", + "* Location: Supi’s living room\n", + "* Aim: Map out each participant’s impressions of the living room.\n", + "* Material: The living room’s floor plan, InDesign, computers…..\n", + "* Time-frame: 5 minutes\n", + "* Instructions: individually annotate the floor plan with impressions of the living room\n", + "\n", + "After removing the floor plan and looking at the subjective annotations of this experiment, we observed that each outcome forms another ‘space’. Each person’s set of annotations brings a unique perspective of the living room , an ‘individual map’. We then layered the individual maps and the compilation resulted in a vernacular picture of the space. This alternative understanding of the space can only be given to a reader through those descriptions.\n", + "\n", + "===== Still from Michael Snow’s Wavelength =====\n", + "\n", + "[[File:https://pzwiki.wdka.nl/mw-mediadesign/images/3/3e/Selection_process_2.png|frame|none|alt=|caption Michael Snow, Wavelength]]\n", + "\n", + "The same method was applied to the photograph of a room. Each of us used a different set of coloured sticky notes and took 5 minutes to physically annotate the picture on the same surface. The picture was then removed from the background, resulting in a similar outcome as the experiment described above.\n", + "\n", + "From these observations, our interest on subjective annotations that could flow in a common understanding of an image grew. As a tool to collect situated impressions, we elaborated the idea of the Annotation Compass.\n", + "\n", + "On a given surface, such as an image, the tool facilitates the collection of annotations and their coordinates from various users simultaneously. These annotations represent individual knowledges and perspectives in regards to the given surface.\n", + "\n", + "[[File:https://pzwiki.wdka.nl/mw-mediadesign/images/3/32/Selection_process_3.png|Michael Snow, Wavelength]] [[File:https://pzwiki.wdka.nl/mw-mediadesign/images/2/2b/Selection_process_4.png|Michael Snow, Wavelength]]\n", + "\n", + "==== Instructions ====\n", + "\n", + "To use this tool, let’s consider the “host” any person interested in gathering annotation on a specific image; and the “guest” any person invited by the host to annotate the image.\n", + "\n", + "===== Process for the host =====\n", + "\n", + "# upload an image\n", + "# add a text to explain the context of the image or to give instructions and helpful advice to the guests\n", + "# send link to guests and invite them to annotate\n", + "# download a json-file or text-file that contains the collected data that was gathered so far\n", + "# try the different functions of SI16 to filter the collected dat\n", + "\n", + "===== Process for the guest =====\n", + "\n", + "# open the link sent by the host\n", + "# read the information attached to the image by the host\n", + "# use the cursor to select a specific area that you want to annotate\n", + "# write and insert your annotation(s)a\n", + "\n", + "==== The data ====\n", + "\n", + "The Tool not only archives the annotations, but also additional meta-data that can be helpful to analyze the outcome. The collected data is stored in a “json-file” that comes as a list of labels. In each label, one can find the file name of the annotated image, the coordinates of the annotation, the dimension of the annotation ‘box’, the annotation itself, the index number of the annotation and a user identification:\n", + "\n", + "{\n", + " \"image\": \"filename.jpg\",\n", + " \"position\": {\"x\": 12, \"y\": 97},\n", + " \"size\": {\"width\": 43, \"height\": 18},\n", + " \"text\": \"Content of the annotation\",\n", + " \"timestamp\": \"Wed, 01 Dec 2021 14:04:00 GMT\",\n", + " \"userID\": 123456789\n", + "}\n", + "* image: a reference to the filename of the image\n", + "* position: x and y coordinates given in percentage, relative to the top left corner of the image\n", + "* size: width and height given in percentage, relative to the size of the image\n", + "* text: the text content of the label\n", + "* timestamp: the moment in which the label was uploaded\n", + "* userID: a random generated id to keep track of the autorship of the labels\n", + "\n", + "'''for the future:''' at some point could be intresting to something like a components property, in order to make the tool more flexible and open to plugin or integration. Ideally this property is a list of components, and each one can add some kind of info or metadata for specific usecases, without the need to rewrite all the code to make room for that.\n", + "\n", + "The outcome provided by the Annotation Compass is ever-changing: whenever an individual adds an annotation, the data grows.\n", + "\n", + "After applying the tool to different projects we observed that the collected data can offer a reflexion on the so called “objective”: It provides individual perceptions and builds a common experience by including a multiplicity of impressions rather than one objective definition. In conclusion, the Tool can be used to provide alternative ways to define images, images of space, texts, and anything else annotatable.\n", + "\n", + "==== Possible applications of the tool: ====\n", + "\n", + "* Ask individuals to annotate the space they are in at the moment.\n", + "* Ask individuals to annotate a space from memory.\n", + "* Ask individuals to annotate imaginary spaces. (e.g. a space from a dream, a fictional space they know from a novel, a place that exists but they never went …)\n", + "* Ask individuals to annotate a space before and after they went for the first time.\n", + "* Invite individuals to a space and ask them to annotate it as a performative act that is situated not only in space but also time.\n", + "* Ask individuals to annotate a space whenever they want (unlimited access).\n", + "* Ask individuals to annotate a public space.\n", + "* Ask individuals to annotate a whole city, country, continent …\n", + "* Ask individuals to annotate a private space.\n", + "* Ask individuals to annotate an indoor space (bedroom, library, central station, theatre …)\n", + "* Ask individuals to annotate an outdoor space (park, market place, beach …)\n", + "* Ask specific groups to annotate a space (queer, teenagers, people with disabilities, immigrants …)\n", + "* Ask individuals to annotate specific things, e.g. emotions, colors, surfaces, light …\n", + "* Ask individuals to only use specific glyphs (e.g. ! ? and –) or emojis to annotate the space to include those not confident using words.\n", + "* Encourage individuals to use their mother tongue / slang / informal language to annotate a space.\n", + "* Ask only one individual to give many annotations of a space over time (daily diary, yearly check-in …)\n", + "* Ask individuals to annotate different spaces (e.g. their own living rooms)\n", + "* Ask individuals to annotate a space without using a standard map but rather an empty sheet as a starting point.\n", + "* Ask individuals to annotate a space without using a standard map but rather an individual map or vernacular map as a starting point.\n", + "* Ask individuals to annotate a space without using a standard map but rather a photograph of a space as a starting point.\n", + "* Ask individuals to annotate a space in real life (e.g. using sticky notes, writing on plexiglass, interview) and use the tool to insert the data afterwards.\n", + "* annotate a photograph (portrait, scene, landscape …)\n", + "* annotate a painting\n", + "* annotate a text\n", + "* annotate a song/sound\n", + "* misusing the tool\n", + "\n", + "===SI16 Backend=== \n", + "''Flexible Flask app (~) for the SI16 API''\n", + "==== Familiar and flexible ====\n", + "\n", + "Each contribuition to the SI16 API was unique. Both the subgroups’ projects and their documentation had different voices, different ways of presenting the contents, and different needs. This specificity required a system that was structured enough to keep together each pace, but remained flexible, in order to let anyone express her own approach to the Special Issue.\n", + "\n", + "With the SI16 being at the same time a set of functions, a playground to experiment with it, and a list of meaningful projects developed within their context, we structured the backend as an interface between the different parts of the work.\n", + "\n", + "The main idea was to define a pipeline that was not so different from the processes and technologies we learned and explored during the first trimester.\n", + "\n", + "==== Functions ====\n", + "\n", + "We chose to work with the Jupiter Notebook format we were familiar with, as a way to both collect and document our functions. With a common protocol defined within us and some 🐍 pythonic 🐍 (''omg this term is cringe ah ah'') good practices, we wrote a Notebook for each function. In each file there was the definition of the function, as well as a propper documentation and some examples on how to use it.\n", + "\n", + "A big part of the backend work was to let anyone structure their own notebook freely, deciding how to present the process and the result of each contribuition without forcing a structure. At the end the Flask application was designed to scan all the notebook folder and extract from it the function, as well as their input and output, and the documentation.\n", + "\n", + "With those information we generated an interactive page for [https://hub.xpub.nl/soupboat/si16/functions/ each function] in which the user could try and play around with our functions exposed as an API.\n", + "\n", + "==== Projects ====\n", + "\n", + "The organic process of SI16 led us to a collection of several interconnected projects. Each one of them had grown around a specific implementation of the functions we developed for the API. Those complex applications were initally developed as standalone Flask app, and they were merged all together at the end. (''well, ok, after the end to be honest'')\n", + "\n", + "One thing we could do differently next time is to use Flask’s Blueprints as a way to work in a more flexible way. At some point we were really struggling about how to manage the code and the collaboration on it. Now that we have an overview of how Python works, it could be nice to develop our projects in a more modular way. BTW we used the documentation pages as a gateway to the projects, in order to have a common starting point.\n", + "\n", + "Things got a bit complicated when the subgroup I was in started to working on sub-sub-project. And to face that we made the structure open to the possibility to nest projects one into the other, in order to have again flexibility between documentation and interaction on the website, and still a (kinda) structure in the filesystem.\n", + "\n", + "Actually: we were totally new into this, so probably half of the things we did were not just wrong, but illegal. BTW we are still learning so next time it will be better, deal with it.\n", + "\n", + "'''disclaimer''' there are some problems with the xpub git so the source code is still not totally public, but we are working on it. There the code is annotated and each function is documented so I will not go more in detail here for now.\n", + "\n", + "==== Project structure ====\n", + "\n", + "
si16\n",
+      "├── contents\n",
+      "├── notebooks\n",
+      "├── projects\n",
+      "│   ├── and-i-wish-that-your-question-has-been-answered\n",
+      "│   ├── annotation-compass\n",
+      "│   │   └── showcases\n",
+      "│   └── etc-portal\n",
+      "├── si16.py\n",
+      "├── static\n",
+      "│   ├── corpora\n",
+      "│   ├── css\n",
+      "│   ├── event\n",
+      "│   ├── font\n",
+      "│   ├── img\n",
+      "│   ├── js\n",
+      "│   └── uploads\n",
+      "└── templates
\n", + "* contents contains a list of markdown file for generic pages. For example the route /si16/intro will search and load the contents from the intro.md file in this folder.\n", + "* notebooks contains a list of Jupiter Notebook files, one for each function we developed for the API.\n", + "* projects contains a list of folder one for each subgroup project. Each one has a documentation.md file with the main contents and process of development.\n", + "* showcases is a optional folder in each project for nesting other sub projects in the sub project. Convoluted but useful and flexible.\n", + "* si16.py is the main module for the Flask app and the backend duties.\n", + "* static contains all the different files that are served statically from the webserver such as images, stylesheets, javascript files, etc.\n", + "* templates is a Flask folder that contains the HTML templates for generating the frontend pages.\n", + "\n", + "Ciao ciao\n", + "\n", + "===Soupboat CMS 00=== \n", + "''Micro JSON→HTML CMS for the first trimester''\n", + "==== A micro CMS ====\n", + "\n", + "During the first weeks at XPUB I spent some time trying to figure out how to archive and log the various projects going on. I felt to do it here in the Soupboat, because it’s more flexible and playful than the wiki, that remains of course the source of truth and the future-proof archiving system etc. etc. 👹👺\n", + "\n", + "After the second page though I was already ultra annoyed by the fact of rewriting or copy-pasting the HTML from a page to the other to keep at least a bit of style and structure and add contents manually. I wrote then a bit of code to have a default page and then used a JSON file filled with a list of projects. The script traversed this list and created a table with the basic informations about each one.\n", + "\n", + "The model for a project was something like that:\n", + "\n", + "{\n", + " \"title\": \"Text Weaving\",\n", + " \"date\": \"Oct 5, 2021\",\n", + " \"url\": \"10-05-2021-weaving/\",\n", + " \"git\": \"https://git.xpub.nl/kamo/text_weaving\",\n", + " \"pad\": \"https://pad.xpub.nl/p/replacing_cats\",\n", + " \"links\": [\n", + " {\n", + " \"url\": \"\",\n", + " \"title\": \"\",\n", + " }\n", + " ],\n", + " \"categories\": [\n", + " \"Python\",\n", + " \"NLTK\",\n", + " \"Text\"\n", + " ]\n", + "},\n", + "Each proj has a title, a date, an URL to a dedicated page. Then a list of links: the git repository for sharing the source code and the pad, that are the two most common types of link, and then a list of generic other links, each one composed by an URL and a title. There is also a list of categories, in order to give some hints about the project.\n", + "\n", + "The dedicated page for a project could have been something somewhere in the Soupboat, or a subfolder in my personal folder.\n", + "\n", + "The structure of the whole thing was: an index.html page with a cms.js script and a cms.json file. (Such imagination in these filenames). Then a style.css and a global.css for sharing the style with the various projects.\n", + "\n", + "Not really a revolutionary CMS but a starting point. Ah ah\n", + "\n", + "I’m writing this while im migrating everything into a flask based one, that will use more or less the same structure we developed for the SI16! Really happy with it. Good night\n", + "\n", + "===Temporality of the loot box=== \n", + "''Against instant rewarding''\n", + "==== Bill Viola opens a loot box ====\n", + "\n", + "The loot box implies a specific temporal dimension: the one with instant rewarding. When a player opens the loot box she receives immediate feedback. Sometimes it is dressed up with an aesthetic of suspense, but this is just cosmetics and the built-up climax often becomes just something undesired that the user wants (and even pay) to skip.\n", + "\n", + "In order to work with the idea of the loot box without re-enacting its toxic behavior and mechanics it could be interesting to hijack its temporality. By inflating the time between the purchasing and the result, we could create space for dig deeper in this complex and delicate topic.\n", + "\n", + "Loot box
\n", + "pay ●-->○ get\n", + "\n", + "SI17 Loot Box
\n", + "pay ●--things could happen here-->○ get\n", + "\n", + "This approach could help us in filling the loot box (tempo) without falling for the same addictive schemes that the industry is implementing for exploiting the players.\n", + "\n", + "'''Inflating the loot box means that the player could reclaim her own leisure time.''' If we focus on the temporal fruition of the l~b we can imagine to produce not only an object, but a time slot that the person from the public can reserve for herself. If we define this time slot as leisure time then we could create a sacred and safe space to take a rest and to arrest the acceleration of capital. Something like a checkpoint, speaking from a gaming point of view.\n", + "\n", + "An approach to deal with the temporal aspect in a way that doesn’t feel forced could be to rely on ''real-yet-slow-time'' processes for the material production of the special issue. A digital manufacturing production could make a lot of sense in this context. 👀\n", + "\n", + "See the [[soupboat/~kamo/projects/loot-box-sealing-device/|loot—box—sealing—device]] for a concrete and 3d example\n", + "\n", + "===LOOT—BOX—SEALING—DEVICE=== \n", + "''Closing Pandora's 3D large jar''\n", + "==== 3D printed loot box? ====\n", + "\n", + "This is an idea that follows some intuitions regarding the [[soupboat/~kamo/projects/loot-box-temporality/|temporality of the loot box]].\n", + "\n", + "Imagine the loot box being 3D printed, and especially 3D printed on demand when the player want to buy it at Page Not Found or Varia or any other place we are going to distribute our work. 3D printing is a slow process, and in order to create a small piece you need to wait let’s say an hour. When someone want to buy our loot box goes to PNF and ask for it, the 3d printing process begins and during the waiting time the player can access and navigate through the contents of our special issue. These contents are contained inside the temporality of the l~b, but they are not consumed instantaneously.\n", + "\n", + "[[File:/soupboat/~kamo/static/img/test-4d.jpg|frame|none|alt=|caption 3d sculpted loot boxes]]\n", + "\n", + "How do we want to deliver these contents? It could be related to the way of production of the physical l~b, for instance each player could contribute and shape the 3d model for the next player during the waiting time, and we can aggregate and collect narrations within and around the tools used in order to do so.\n", + "\n", + "In order to cover the expenses of a similar process part of the SI17 budget could cover the cost for some small 3D printers and printing material. The term of services of our special issue could allocate a certain amount of money from each purchase to self sustain the process (buying new printing material, etc)\n", + "\n", + "[[File:/soupboat/~kamo/static/img/test-5d.jpg|frame|none|alt=|caption 3d sculpted loot boxes]]\n", + "\n", + "==== The loot—box—sealing—device ====\n", + "\n", + "In the movie ''The NeverEnding Story'' based on the novel by Michael Ende, the two main characters are linked together by the Auryn. In the (fictional) real world the Auryn is a sigil on the cover of the (fictional) Neverending Story book that tells the tales of the land of Fantasia. In Fantasia, the Auryn is a magic medalion that the hero wears during his mission.\n", + "\n", + "[[File:/soupboat/~kamo/static/img/book_AURYN.jpg|Auryn from Neverending Story]] [[File:/soupboat/~kamo/static/img/atreyu_AURYN.jpg|Auryn from Neverending Story]]\n", + "\n", + "Here the Auryn acts as a seal: by removing it from the cover of the book the magical world of Fantasia begins to leak inside the (fictional) real world. Later on it will be the main character to fall inside the (fictional) book of the Neverending Story.\n", + "\n", + "This plot from Michael Ende resembles what happens when we play a game. Thanks to a weird device like a table game, a console or just a set of shared principles, we are able to flow into the [https://en.wikipedia.org/wiki/Magic_circle_(virtual_worlds) magic circle]. In the novel this happens with the main character reading a book, and while it’s true that every cultural object offers a certain degree of immersivity, the kind of agency, interaction and participation in the NeverEnding Story is something that reminds me more the act of playing.\n", + "\n", + "[[File:/soupboat/~kamo/static/img/seals1.jpg|frame|none|alt=|caption 3d sculpted seals]]\n", + "\n", + "To elaborate more on the 3D printed loot box: we could have a book and using the 3d printer to seal it with a new 3d sigil every time! In a way it is like '''sealing the loot box instead of opening it'''. As in the NeverEnding Story (but this is a recurrent magical trope) we would have a sigil connecting who is reading the book with another player. This connection will be not with a fictional character, but with a real person: the one that bought the previous book. There is something like the [https://pzwiki.wdka.nl/mediadesign/Glossary_of_productive_play#Reciprocity reciprocity] descripted by Mausse here, but is a reciprocity swimming backstroke: the player receives a gift from a past uknown fellow player, and leaves one for a future unkown one. In this way the reciprocity chain (sounds weird) goes spiral.\n", + "\n", + "[[File:/soupboat/~kamo/static/img/seals2.jpg|frame|none|alt=|caption 3d sculpted seals]]\n", + "\n", + "==== Overview ====\n", + "\n", + "Here a brief description of the different pieces that compose the loot—box—sealing—device\n", + "\n", + "# The pubblication is composed of 2 main parts: a base and a superstructure. omg sorry\n", + "# The base is the same for every copy, and it’s where the main contents are. (imagine it like a book)\n", + "# The superstructure is dynamic, it is produced and added to the base when and where the pubblication is purchased by someone. (imagine it like a 3d printed something)\n", + "# The production of the superstructure inflates the temporality of the loot box: our narration can inhabit this timespan.\n", + "# While someone wait for the 3d sigil to be printed we can offer a ''temporary safe zone'': a checkpoint at PNF (or other locations)\n", + "# In this ''temporary safe zone'' the player can leave something for the next player by designing the next sigil and\n", + "# In this ''temporary safe zone'' the player can be guided through the contents of the pubblication while waiting for the superstructure to be produced\n", + "# When a new copy of the pubblication is bought, a sigil is 3d printed and then uploaded on the website of the SI17 as documentation\n", + "\n", + "===== 1. Physical pubblication (a book? a box? something) =====\n", + "\n", + "I don’t really know which kind of contents, but since we are reading a lot could be intresting to prepare a critical reader about the loot box issues, collecting different perspectives and heterogeneous voices? Then production mode ok and then we print say 100 copies. Our magical technical book binding team figures out the best way in which we can add some dynamic components or 3D addition to the cover-object-book, but we don’t do that yet. We just leave the pubblications without the 3d cherry on the cake.\n", + "\n", + "===== 2. A custom 3d sculpting software =====\n", + "\n", + "''Note that the process could be also implemented with totally different techniques based on digital manufacturing like wood working with cnc, laser cut, etc endless possibilities, but let’s say we want these exoterical 3d printed sigils.''\n", + "\n", + "We can develop a simple 3D sculpting software that even people not used to 3D modeling could use. Something like this [https://stephaneginier.com/sculptgl/ SculptGL]. This is not super easy to do, but not as hard as an API. We could start from some open source thing and then customize it in the way we need. [https://www.blender.org/ Blender] is written in Python and has a super nice API for programming custom plugins, for example.\n", + "\n", + "Side note totally (not totally) unrelated: plugin republishing? 🤯 Ahah it would be great to publish some excerpts from Simone Weil inside the UI of Blender or Photoshop or whatever. Injecting culture in the cultural industry tools.\n", + "\n", + "===== 3. Some templates for the 3d sigil =====\n", + "\n", + "* material and practical needs\n", + "* SI17 visual identity as a starting point\n", + "* SI17 contents as orientation\n", + "* SI17 world building as heading\n", + "\n", + "(wip)\n", + "\n", + "===== 4. A 3D Printing device =====\n", + "\n", + "* A 3D printer\n", + "* Some interface to sculpt the next 3d seal (aka 1 pc)\n", + "* A nice setup for display everything (checkpoint? treasure chest? loot box?)\n", + "\n", + "(wip)\n", + "\n", + "===== 5. A website =====\n", + "\n", + "* Info\n", + "* Inventory that keep track of the sigils (world building)\n", + "\n", + "(wip)\n", + "\n", + "\n", + "===Multi Player Loot Box=== \n", + "''Notes to generate relations within the public''\n", + "If the public of the classical loot box is made of individuals that are easier to exploit, our SI17 could research on ways to generate relations within the public.\n", + "\n", + "==== Homogeneous public? ====\n", + "\n", + "The classical loot box assumes two main things:\n", + "\n", + "* That the public is an homogeneous group of individual users\n", + "* That the relation between the loot box and its public should be always the same\n", + "\n", + "The loot box offers a limited amount of agency to the player. There is no quality in the interaction with it. The only way to use and access its content is to open it (and this usually means to pay). From the point of view of the loot box every player is the same, an their abilities or features or uniqueness have no meaning at all. One could say that the loot box is a popular device since is an object with a common interface for everyone, but is this really the case?\n", + "\n", + "The interaction with the loot box has no quality, but for sure it implies some kind of quantity. To access is it required to spend a certain amount of money or time. This quantifiable expense is presented as a flat access scheme with homogeneous outcomes, but it is not. The effects of spending hundred €€€ in Fortnite skins are different for a kid and a streamer, for example. [https://www.youtube.com/watch?v=EXy83qr9jrI While the streamer on Twitch spends 800€ in a row] to gain a thousandfold through sponsorizations and views, the average kid just throws away half of his mother’s monthly income.\n", + "\n", + "The public of the loot box is not homogeneous.\n", + "\n", + "Keeping that in mind, we could rethink the basic way of interaction with the loot box. What if we offer something different from the flat price scheme? What if someone can pay less to access to the contents and someone else must pay more? Could this be a way to inject different qualities in the interaction with the loot box?\n", + "\n", + "===Mimic research 📦=== \n", + "''Exploring a tricky treasure trope''\n", + "==== 2 different types of treasure chest ====\n", + "\n", + "In RPG games the Mimic is a monster that appears as a treasure chest. When a player tries to interact with it in order to get the contents of the chest, it reveals its true nature and attacks her. The name of the Mimic come from its act of mimesis: this creature is like a predator that disguises itself in order to sneak up on its prey.\n", + "\n", + "A treasure chest in a game can be seen as a ''temporary safe zone'' because it interrupts the flow of incoming threats by offering a reward to the player. The Mimic endangers this ''temporary safe zone'', and breaks a kind of contract between the player and the game. The treasure chest is transformed in a risky russian roulette, that inoculates danger in the safe zones of a narration.\n", + "\n", + "I’m tempted to write here that the loot box is something like a ''meta mimic'': an object that promises an in-game reward, but produces a damage to the player. What’s more is that this damage is inflicted in the real world, not to the player but to the person. What’s then the difference between a loot box and a Mimic?\n", + "\n", + "Starting from the [https://en.wikipedia.org/wiki/Mimic_(Dungeons_%26_Dragons) Dungeons and Dragons’ Mimic] I’d like to explore the evolution and the ecology of the mimic through different games. How do the game designers choose where Mimics spawn? What are the relations between those creatures, the level design, the stress of the player, as well as her expectations and trust in the game world? Are there similarities in the way the Mimics and the loot boxes are presented to the player?\n", + "\n", + "'''TODO: amazon package but has fangs'''\n", + "\n", + "\n", + "===A Katamari Fanfiction=== \n", + "''What's left when you roll on everything?''\n", + "==== Modding narrative ====\n", + "\n", + "After lunch we will be writing fanfic based on the games you played and analysed this week! Lidia said this.\n", + "\n", + "We played Katamari Damacy this week → We wrote a fan faction about it → We approached the fanfiction with empathyzing with the most inanimate things of the game → So we focused on the prince and the objects of the game → We left the King of all Cosmos in the backgroud, since he talks already a lot in the original game. → Suggested soundtrack for the reading: [https://www.youtube.com/watch?v=QAA6hq9RL-4 katamari OST]\n", + "\n", + "Fun fictious with Mitsa and Erica\n", + "\n", + "===Loot Box as a Decorator=== \n", + "''Hermit crab in the book store''\n", + "==== 3 intuitions come together ====\n", + "\n", + "Right now:\n", + "\n", + "# A ''loot box'' within a context as such: a book store\n", + "# A ''loot box'' within a temporality\n", + "# A ''loot box'' with different kinds of public\n", + "\n", + "Over me 🦶🦶 🥁 🦵🦵 📀—-\n", + "\n", + "===== Context =====\n", + "\n", + "A ''lolt box'' accellerates and forces the mechanics of an environment. In some games it can speed up some tedious process, in other it offers a specific special instant rewarding. Our ''loot bbx'' inhabits a book store, or more in general a cultural space. In which ways can we hack through the normal functioning of such place? At a certain point today I thought: ''ah, we could fill it with the last page of every books in Page Not Found'', just to say something about the presumed shortcuts that the ''loat box'' promises to the player. The idea is kinda fun, but then what? So maybe no.\n", + "\n", + "===== Temporality =====\n", + "\n", + "A couple of days ago I wrote some notes about the temporality of the ''loto box''. In 1 sentence the idea is: if the ''lot bx'' is a mechanism of instant rewarding, we could hijack and inflate its tempo and then fill it with our contents. Instead of opening in 30 seconds, the ''loot bocs'' takes one hour. Meanwhile we can deliver our messages.\n", + "\n", + "Today I read ''Play like a feminist'' by ''Shira Chess'' and guess what: there’s an entire part about the temporality of leisure → 🤯\n", + "\n", + "There is something really important we should keep in mind: we are aiming to a public that is etherogeneous. The intersectional approach that Chess advocates it’s a reminder that we can inflate the temporality of the ''loot biusch'', but not everyone will have access to it. So we need to think at both the limits of this spectrum, and put them in a meaningful relation.\n", + "\n", + "===== Public =====\n", + "\n", + "As said: our public could be complex. For sure there will be some ultra publishing nerd that will sip all our soup and will be happy with it, but isn’t 1 of our goals to reach also the world outside XPUB? ''Chess'' in her book writes about micro temporality, little timespans carved between work shifts or commutes. She has a point when writes that with smartphones leisure time is more affordable and is detached from the rigid tempo of labour.\n", + "\n", + "==== Decorator ====\n", + "\n", + "Combining these three aspects the question is: can we create a relation between who can spend an hour at PNF waiting for the ''loot bosx'' and who cannot?\n", + "\n", + "Enter the ''boot lox'' as a decorator.\n", + "\n", + "A decorator is something that adorn something else. In Python and object-oriented programming in general is also a name of a design pattern that adds some functionality to other functions. We used it already also with Flask! A ''oobt olx'' as a decorator means that we could attach it to other pubblication at PNF. Something like an hermit crab inside other shells or that spiky things that bites the tail of a Slowpoke.\n", + "\n", + "===== The setup =====\n", + "\n", + "# The physical decorator, that is a digital manufactured object produced on demand\n", + "# A catalogue of books that can be decorated\n", + "# A website with a digital loot box\n", + "\n", + "===== The process =====\n", + "\n", + "# As a part of the research we compose a bibliography that is also a statement i.e: ''away from the cis white west guys gang''. This bibliography could be site specific for PNF or the other places we will distribute our SI17. We should choose to sell our pubblication in book stores or spaces that want to host this bibliography in their inventory. In this way we can use our SI17 as a device to reclaim space for marginal and subaltern voices.\n", + "# The decorator inhabits this bibliography. It is presented as a special offer in which you can buy one of the book from the bibliography and receive a decorated version of it. Maybe we can sort out some kind of discount mechanism using part of the budget we have. The point is to favor access.\n", + "# The deal is that the production of the decorator has a certain temporality: if we imagine it as something that is 3D printed or laser cutted or CNC carved on demand, it involves a little waiting time. During this waiting time we can transform the book shop in a library, and offer full access to the titles in our bibliography.\n", + "# In exchange we ask to the reader for some insights, notes or excerpts from the books. Those will be inserted in the inventory of our loot box.\n", + "# This loot box can be accessed online from the website of SI17. It works exaclty as a classic one, except that we offer it for free. The content is a collection of thoughts questioning the issue of our project, in the context around our bibliography and readers. It could be an effective way to offer our research to that kind of public that has no means to access it.\n", + "# To open the online loot box and get one (more or less random?) excerpt, the user is asked to draw a decorator. This could be made with a super simple web interface. The drawing will be the next digital manufactured decorator.\n", + "# In the website of SI17 we can keep track of the decorators as well as the exceprts, in a process of inventory and world building.\n", + "\n", + "==== Skin care routine ====\n", + "\n", + "This idea of decorator is somehow similar to the concept of skin (in videogame terms). Here our decorator acts as cosmetic in the same way a fancy hat decorates your sniper in Team Fortress 2.\n", + "\n", + "In the game itself the skin is nothing more than a visual candy. But once you look at the turbulence it puts in motion in the game superstructure, you realize that the kind of power-up it offers is something that acts in the social sphere around the game. (See: peer pressure, emotional commitment, skins gambling, product placement, collectibles)\n", + "\n", + "A loot of lot boxes promise rare skins, and by doing so it lures in players. We could subvert this process by taking the skin out of the box.\n", + "\n", + "Instead of opening it to get a new skin, you design a new skin (the decorator!) to open the loot box.\n", + "\n", + "\n", + "===🥐 XQUISITE BRUNCH 🥐=== \n", + "''A branching take on the exquisite corpse game''\n", + "==== An exquisite branch ====\n", + "\n", + "The [https://en.wikipedia.org/wiki/Exquisite_corpse exquisite corpse] is a multiplayer game invented by the surrealists in which the participants compose a drawing or a story together.\n", + "\n", + "Traditionally the game is played on a long piece of paper, and each player draws a part, hiding the drawing to the next person, but leaving some hints. The following fellow continues to draw from there and so on. The result is a weird linear narrative, in which the transition between authors are at the same time smooth and abrupt.\n", + "\n", + "With the xquisite branch I would like to try a digital approach to the game. If the original version is constrained to the single piece of paper and is doomed to be linear, here we can imagine our drawings forking and branching and go in different directions.\n", + "\n", + "The process could be something like:\n", + "\n", + "someone send you a link to continue the drawing and when you are happy with it and upload it you receive a new link to share with others. If you pass the link to just one person the xquisite branch will continue, but if you pass it to several people the drawing will branch, resulting in multiple version with a common starting point.\n", + "\n", + "I would like to try this not only as a multiplayer game, but also as a creative tool. I will ask [https://www.togniser.com/ ser togni] if he want to draw some comics with it. But it could also used for branching meetings aha 🤯\n", + "\n", + "==== TODOs ====\n", + "\n", + "* add name for credits?\n", + "* display name in svg?\n", + "* comment the code\n", + "* remove new from homepage? or\n", + "* add per-new level in the xquisite branches (this makes more sense!)\n", + "\n", + "===Chaotic evil puzzles=== \n", + "''Jigsaw puzzle as a form of encryption of our SI17''\n", + "==== There are 100 lot boxes with 100 different jigsaw puzzles of 100 pieces.*
\n", + "[[File:https://hub.xpub.nl/soupboat/~kamo/static/img/100-boxes.jpg|100 boxes compose the face of aymeric if seen from a precise point of view]] ====\n", + "\n", + "''* (exact quantities to be defined)''\n", + "\n", + "==== The picture on each puzzles is a content related to our experiments, games and researches for the SI17 ====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~kamo/static/img/catchy-puzzles.jpg|frame|none|alt=|caption sample of contents for the puzzles]]\n", + "\n", + "Each puzzle is an A2 sized image displaying the works we did during this trimester, designed in a way that can be interesting for the players to buy it, even for the sake of doing a jigsaw puzzle itself.\n", + "\n", + "''f.e. A puzzle could be the rules for an RPG; or the map of a bitsy game with some critical texts about gamification; a generated maze, a fan fiction, the glossary, the list of one sentence games, etc.''\n", + "\n", + "In other words, the collection of puzzles will be a sort of inventory of our research framed in the form of jigsaw.\n", + "\n", + "==== The pieces are scattered through all the loot boxes, in a way that each one contains parts of multiple puzzles. ====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~grgr/static/img/jigmix.png|frame|none|alt=|caption shuffle of the jiigsaw pieces]]\n", + "\n", + "This could be done in a meaningful way: the idea is not to have total random pieces, but legible fragments from each content.\n", + "\n", + "==== When players buy the loot box they can compose the puzzle, but the result is a patchwork of different images. ====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~grgr/static/img/patchworks.png|frame|none|alt=|caption in each loot box there is a patchwork of different puzzles]]\n", + "\n", + "If the puzzles have different images but the same pieces pattern, each loot box can have a complete puzzle, but with mixed pieces. In this way we can avoid the frustration that having an incomplete jigsaw puzzle could cause.\n", + "\n", + "==== On the website of SI17 the players can upload their fragments, and compose together an online version to complete all the jigsaw puzzles. ====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~kamo/static/img/puzzle-web.jpg|frame|none|alt=|caption demo web interface]]\n", + "\n", + "We can numerate or identify each piece of the puzzles with a code. This could be done when we generate the pattern of the puzzle with Python 👀. To upload a fragment of puzzle, the player is required to insert the code of the pieces, and maybe take a picture. In this way we can be sure that only who has the fragment can insert it online.\n", + "\n", + "==== Optional feature: users can upload pictures of their fragments and we could have a collective documentation of the work. ====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~kamo/static/img/share-puzzle.jpg|demo upload pictures]] ''This is not unpaid work, it’s participation''\n", + "\n", + "Nice feature for the website could be that you can see the digital version of the puzzle, but on mouse :hover we could show the pictures from the public. A puzzle of photos of puzzles. This could be challenging but funny to develop.\n", + "\n", + "==== On the website of SI17 there is a community section for exchanging the fragments and complete the puzzle ====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~kamo/static/img/xchange-puzzle.jpg|frame|none|alt=|caption demo xchange puzzle fragments]]\n", + "\n", + "The community section with users and exchange etc could be tricky, but we can stay as simple as possible and do it with Flask. The exchange section should exclude by design the speculation on the pieces or money. A fragment for a fragment.\n", + "\n", + "==== On the website of SI17 the public can access to the experiments, games and researches as well ====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~grgr/static/img/lootbweb.png|frame|none|alt=|caption demo other contents on the website]]\n", + "\n", + "In this way we can provide access to the contents such as the bitsy games, the karaoke video, the ruleset of our games, the reading list, etc.\n", + "\n", + "===== Risk / Benefit assessment =====\n", + "\n", + "PROS + simple to make + accessible because it’s a well known game + a lot of design + not to much code + use what we already have + interesting interaction with the public + performative element ready for the launch + multiple temporalities (individual puzzle, contents, shared puzzles) + world building\n", + "\n", + "CONS: - not an API 👀 - i don’t like puzzles - people mught not appreciate the fact of missing parts of their puzzle, but we’re here to subvert it, and contents will be available online anyways\n", + "\n", + "===== Bonus: summary workflow =====\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~kamo/static/img/puzzle-production.jpg|production]] The process to make the puzzles could be easy as design - print - cut - shuffle - package, nothing more (+ website)\n", + "\n", + "[[File:https://hub.xpub.nl/soupboat/~grgr/static/img/puzzle-box.jpg|box]] The loot box could provide a context and the instruction of the game, as well as the link to the website.\n", + "\n", + "==== Scenario ====\n", + "\n", + "Mapping the chaotic evil puzzles in the through the different scenari\n", + "\n", + "===== of the form =====\n", + "\n", + "''scenario 1: The lootbox is a physical box that contains something''\n", + "\n", + "Fragments of several puzzles.\n", + "\n", + "===== of the feature =====\n", + "\n", + "''scenario 7: The items in the loot-box are complementary and it is necessary to connect with other loot-box owners in order to assemble the pieces together.''\n", + "\n", + "There is a single player aspect and there is a collaborative aspect. These two components could be mediated by an online platform, such as the online shared puzzles, but could also work offline if people just combine the pieces of their loot boxes.\n", + "\n", + "===== of the contents =====\n", + "\n", + "''scenario 2: The loot box is a collection of the prototyped games (and researches!) we did so far curated in some kind of form''\n", + "\n", + "The jigsaw puzzle is just a form of encryption of our contents. A shared surface in which we can publish really different things such as a fan fiction, a board game, a link to a video karaoke or a videogame, an essay, the characters of a roleplaying game, etc.\n", + "\n", + "''scenario 3: The loot box is a collection of mini-games + an ultimate game that has to be performed with other players that purcahsed the LB''\n", + "\n", + "There are several layers of playability and access:\n", + "\n", + "# to solve the fragments (single player jigsaw)\n", + "# to access the contents (games, texts, etc. )\n", + "# to combine the fragments (ultimate multiplayer game, re-distribuition of the loot boxes contents)\n", + "\n", + "''scenario 6: The lootbox contains a series of jigsaw puzzles but their pieces are scattered through all the boxes and there is a platform online where you can see the missing tiles.''\n", + "\n", + "Nothing to declare.\n", + "\n", + "==== memos ====\n", + "\n", + "* play with quantities and distribuition of pieces (1 piece only, large groups, variations, etc)\n", + "* play with puzzle pattern: alternative to the mainstream shape of the tiles\n", + "* pieces naming system\n", + "* And then the aim is to exchange pieces or something and rebuild the original puzzles? (can this be a critical approach?) (does this make sense only if there are as many puzzles as loot boxes?)\n", + "* short term puzzles (link to multimedia contents, puzzle shards)\n", + "* long term puzzles (hidden messages, 1 word in each puzzles and a secret sentence)\n", + "* size and quantity\n", + "* The jigsaw puzzles results should be secret? There would be much more mistery. Can we reveal only during the launch, but not on the loot boxes? Maybe is a compromise, but maybe is not necessary. Should we reveal them only in the website meanwhile they are completed? Could be.
\n", + "\n", + "* [https://github.com/jkenlooper/piecemaker Generate Jigsaw Puzzle with python]\n", + "* [https://www.youtube.com/watch?v=xqhOrY8unn4 How To Laser Cut a Jigsaw Puzzle]\n", + "* [https://draradech.github.io/jigsaw/index.html Jigsaw puzzle generator]\n", + "* [https://proceduraljigsaw.github.io/Fractalpuzzlejs/ Fractlal Jigsaw]\n", + "\n", + "===SI17 producing the public=== \n", + "''homeworks for 21/02''\n", + "===== Which kind of public do we want to produce? =====\n", + "\n", + "If the loot box and gamification produce a single player in competition with all the others, I would like to produce a collaborative public. More like a community than a billboard with users ranking. Also I think this is an operation that requires time. Hence the loot box as a shrine: a safe place to build, discover and charge with meanings together.\n", + "\n", + "===== How do we want our public to engage with our loot box? =====\n", + "\n", + "I like the idea of different temporalities and the concept of slow processing. Something could be delivered really fast, something could require an entire evening, something could need to wait an entire month.\n", + "\n", + "We should balance the single player / multi player aspect of the loot box. It would be great to have something that one can enjoy both alone and with others. The collaborative aspect of the loot box should be something possible and encouraged, but not mandatory.\n", + "\n", + "===== What kinds of questions/feelings/thoughts it create ? =====\n", + "\n", + "* To feel part of a community or fellows in a shared quest.\n", + "* To wonder how vast is the inventory of the loot box.\n", + "* To question the idea of competition as necessary for gamification\n", + "* To raise awareness on different voices on the topic\n", + "\n", + "===== How the lootbox is going to be presented to our public during our launch event? =====\n", + "\n", + "The presentation could perform the contents of the loot box.\n", + "\n", + "===== How will the launch look like? =====\n", + "\n", + "Nice\n", + "\n", + "===== How can the lootboxes be activated by the public in a sustainable an independent way after the launch? =====\n", + "\n", + "With a website\n", + "\n", + "===== What is our relationship to PnF? =====\n", + "\n", + "I don’t know\n", + "\n", + "===== Does the publication relate to PnF? how? =====\n", + "\n", + "I don’t think so\n", + "\n", + "===== how and where do we sell the lootbox? =====\n", + "\n", + "In place that want to host subaltern authors from our reading list.\n", + "\n", + "===== do we sell in other stores? if yes how are they connected? =====\n", + "\n", + "We are the connection\n", + "\n", + "===test static files in project directory=== \n", + "''it's a test''\n", + "==== Hello this is a test. ====\n", + "\n", + "This image is in the same folder of the project, not in the static one.\n", + "\n", + "[[File:hiroshige.jpg|frame|none|alt=|caption test]]\n", + "\n", + "and it works!\n", + "\n", + "and now also the md file that generates the page [[documentation.md|should be accessible]].\n", + "\n", + "is this a good idea?\n", + "\n", + "\n" + ] + } + ], + "source": [ + "folders = list_folders('public_html/projects')\n", + "projects = []\n", + "\n", + "for folder in folders:\n", + " project = get_md_contents('documentation.md', f'public_html/projects/{folder}')\n", + " project_date = datetime.strptime(project[0]['date'], '%d/%m/%Y')\n", + " project[0]['date'] = datetime.strftime(project_date, '%d %b, %y')\n", + " project[0]['categories'].sort()\n", + " projects.append(project)\n", + "\n", + "projects.sort(reverse=False, key=lambda project: datetime.strptime(\n", + " project[0]['date'], '%d %b, %y'))\n", + " \n", + "page = ''\n", + "\n", + "for project in projects:\n", + " page = page + f\"==={project[0]['title']}=== \\n\"\n", + " page = page + f\"''{project[0]['description']}''\\n\"\n", + " page = page + pypandoc.convert_text(project[1], 'mediawiki', format='md', extra_args=['--base-header-level=3'])\n", + " \n", + "\n", + "print(page)" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "53c9a453-4399-4ec5-b905-3cd739276919", + "metadata": {}, + "outputs": [], + "source": [ + "folders = list_folders('public_html/projects')\n", + "projects = []\n", + "\n", + "for folder in folders:\n", + " project = get_md_contents('documentation.md', f'public_html/projects/{folder}')\n", + " project_date = datetime.strptime(project[0]['date'], '%d/%m/%Y')\n", + " project[0]['date'] = datetime.strftime(project_date, '%d %b, %y')\n", + " project[0]['categories'].sort()\n", + " projects.append(project)\n", + "\n", + "projects.sort(reverse=False, key=lambda project: datetime.strptime(\n", + " project[0]['date'], '%d %b, %y'))\n", + " \n", + "page = ''\n", + "\n", + "for project in projects:\n", + " page = page + f\"==={project[0]['title']}=== \\n\"\n", + " page = page + f\"''{project[0]['description']}''\\n\"" + ] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/projects/soup-to-wiki/log_to_wiki_2.ipynb b/projects/soup-to-wiki/log_to_wiki_2.ipynb new file mode 100644 index 0000000..f204814 --- /dev/null +++ b/projects/soup-to-wiki/log_to_wiki_2.ipynb @@ -0,0 +1,108 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 1, + "id": "6f73330a-e0d5-4d22-a4c7-246b928394e9", + "metadata": {}, + "outputs": [], + "source": [ + "import os\n", + "import frontmatter\n", + "from datetime import datetime\n", + "\n", + "from mako.template import Template\n" + ] + }, + { + "cell_type": "code", + "execution_count": 2, + "id": "3d183b25-72fb-4b90-a639-188a68e02fc1", + "metadata": {}, + "outputs": [], + "source": [ + "def list_folders(folder):\n", + " ''' Return all the folders in a folder '''\n", + " names = []\n", + " for entry in os.scandir(folder):\n", + " # add to the list only proper files\n", + " if not entry.name.startswith('.') and entry.is_dir():\n", + " # remove the extension from the filename\n", + " names.append(entry.name)\n", + " return names\n", + "/\n", + "def get_md_contents(filename, directory='./contents'):\n", + " ''' Return contents from a filename as frontmatter handler '''\n", + " with open(f\"{directory}/{filename}\", \"r\") as f:\n", + " metadata, content = frontmatter.parse(f.read())\n", + " return metadata, content\n", + "\n", + "\n" + ] + }, + { + "cell_type": "code", + "execution_count": 18, + "id": "a7b4d409-d42d-4a74-b093-10ace148cc71", + "metadata": {}, + "outputs": [], + "source": [ + "import mako.runtime\n", + "mako.runtime.UNDEFINED = ''\n", + "\n", + "\n", + "\n", + "folders = list_folders('../')\n", + "projects = []\n", + "\n", + "for folder in folders:\n", + " project, content = get_md_contents('documentation.md', f'../{folder}')\n", + " project_date = datetime.strptime(project['date'], '%d/%m/%Y')\n", + " project['date'] = datetime.strftime(project_date, '%d %b, %y')\n", + " project['slug'] = folder\n", + " project['categories'].sort()\n", + " projects.append(project)\n", + "\n", + "projects.sort(reverse=False, key=lambda project: datetime.strptime(\n", + " project['date'], '%d %b, %y'))\n", + "\n", + "baloons = Template(filename=\"baloons_web.html\")\n", + "\n", + "with open('output.html', 'w') as f:\n", + " f.write(baloons.render(projects=projects))\n", + "\n", + "\n", + "\n" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "faa6e297-3685-415a-8617-f3f4198da21d", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/projects/soup-to-wiki/output.html b/projects/soup-to-wiki/output.html new file mode 100644 index 0000000..f1adc7f --- /dev/null +++ b/projects/soup-to-wiki/output.html @@ -0,0 +1,327 @@ + + + + + + + Baloons + + + + + + diff --git a/projects/spawn-sticker/.ipynb_checkpoints/documentation-checkpoint.md b/projects/spawn-sticker/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..f197843 --- /dev/null +++ b/projects/spawn-sticker/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,42 @@ +--- +title: Spawn Sticker +description: simple & flexible & adhesive +categories: + - JS + - Web + - SI16 +script: spawnSticker.js +css: sticker.css +date: 09/12/2021 +git: https://git.xpub.nl/kamo/spawn-sticker +--- + +A script that let you add stickers on top of HTML elements. To make it works just add a `data-sticker` attribute to your element. The content of the sticker will be the value of the attribute. + +```html +
World
+``` + +
+ +This script was used for the SI16 - Learning how to walk while cat-walking website. This is a simplified version. In the original one we had to deal with fixed elements (such as the header / nav of the pages) as well as relative ones. So the code there is a bit messier, but this one here it's simple and clean. + +
+ +

+How does it work +

+ +The code it's composed of 3 main functions: one to create the sticker, one to spawn and attach it to an element, and a last one to limit the amount of stickers spawned at once. + +
+propper documentation coming sooon +
+ + + \ No newline at end of file diff --git a/projects/spawn-sticker/documentation.md b/projects/spawn-sticker/documentation.md new file mode 100644 index 0000000..f197843 --- /dev/null +++ b/projects/spawn-sticker/documentation.md @@ -0,0 +1,42 @@ +--- +title: Spawn Sticker +description: simple & flexible & adhesive +categories: + - JS + - Web + - SI16 +script: spawnSticker.js +css: sticker.css +date: 09/12/2021 +git: https://git.xpub.nl/kamo/spawn-sticker +--- + +A script that let you add stickers on top of HTML elements. To make it works just add a `data-sticker` attribute to your element. The content of the sticker will be the value of the attribute. + +```html +
World
+``` + +
+ +This script was used for the SI16 - Learning how to walk while cat-walking website. This is a simplified version. In the original one we had to deal with fixed elements (such as the header / nav of the pages) as well as relative ones. So the code there is a bit messier, but this one here it's simple and clean. + +
+ +

+How does it work +

+ +The code it's composed of 3 main functions: one to create the sticker, one to spawn and attach it to an element, and a last one to limit the amount of stickers spawned at once. + +
+propper documentation coming sooon +
+ + + \ No newline at end of file diff --git a/projects/test-static-files/.ipynb_checkpoints/documentation-checkpoint.md b/projects/test-static-files/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..27091bf --- /dev/null +++ b/projects/test-static-files/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,22 @@ +--- +title: test static files in project directory +description: it's a test +date: 21/02/2022 +categories: + - NGINX + - Web + - Test +--- + +## Hello this is a test. + +This image is in the same folder of the project, not in the static one. + +![test](hiroshige.jpg) + +and it works! + +and now also the md file that generates the page [should be accessible](documentation.md). + +is this a good idea? + diff --git a/projects/test-static-files/.ipynb_checkpoints/hiroshige-checkpoint.jpg b/projects/test-static-files/.ipynb_checkpoints/hiroshige-checkpoint.jpg new file mode 100644 index 0000000..e4f6662 Binary files /dev/null and b/projects/test-static-files/.ipynb_checkpoints/hiroshige-checkpoint.jpg differ diff --git a/projects/test-static-files/documentation.md b/projects/test-static-files/documentation.md new file mode 100644 index 0000000..27091bf --- /dev/null +++ b/projects/test-static-files/documentation.md @@ -0,0 +1,22 @@ +--- +title: test static files in project directory +description: it's a test +date: 21/02/2022 +categories: + - NGINX + - Web + - Test +--- + +## Hello this is a test. + +This image is in the same folder of the project, not in the static one. + +![test](hiroshige.jpg) + +and it works! + +and now also the md file that generates the page [should be accessible](documentation.md). + +is this a good idea? + diff --git a/projects/test-static-files/hiroshige.jpg b/projects/test-static-files/hiroshige.jpg new file mode 100644 index 0000000..e4f6662 Binary files /dev/null and b/projects/test-static-files/hiroshige.jpg differ diff --git a/projects/weaving/.ipynb_checkpoints/documentation-checkpoint.md b/projects/weaving/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..7fa1d3a --- /dev/null +++ b/projects/weaving/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,27 @@ +--- +title: Text Weaving +description: Weave two texts, like warp and weft +date: 05/10/2021 +git: https://git.xpub.nl/kamo/text_weaving +pad: https://pad.xpub.nl/p/replacing_cats +project: weaving +categories: + - Python + - NLTK + - Text +--- + +## Slow Processing + +- if _NLTK_ is a form of mapping language, vltk is a form of mapping language + from a particular vantage point +- pick a text or a collection of texts from the pad from last week or the + one of this week +- choose a linguistic pattern to apply over the text, for example: all + verbs, every third word of a sentence, the 50 most used words, collocations + you observe, words with multiple meanings, x of y, question marks etc. the + processing can be both manual or automatic. +- what is the output? + + +Weaved with Jian and Emma \ No newline at end of file diff --git a/projects/weaving/documentation.md b/projects/weaving/documentation.md new file mode 100644 index 0000000..7fa1d3a --- /dev/null +++ b/projects/weaving/documentation.md @@ -0,0 +1,27 @@ +--- +title: Text Weaving +description: Weave two texts, like warp and weft +date: 05/10/2021 +git: https://git.xpub.nl/kamo/text_weaving +pad: https://pad.xpub.nl/p/replacing_cats +project: weaving +categories: + - Python + - NLTK + - Text +--- + +## Slow Processing + +- if _NLTK_ is a form of mapping language, vltk is a form of mapping language + from a particular vantage point +- pick a text or a collection of texts from the pad from last week or the + one of this week +- choose a linguistic pattern to apply over the text, for example: all + verbs, every third word of a sentence, the 50 most used words, collocations + you observe, words with multiple meanings, x of y, question marks etc. the + processing can be both manual or automatic. +- what is the output? + + +Weaved with Jian and Emma \ No newline at end of file diff --git a/projects/xquisite/.ipynb_checkpoints/documentation-checkpoint.md b/projects/xquisite/.ipynb_checkpoints/documentation-checkpoint.md new file mode 100644 index 0000000..00110e0 --- /dev/null +++ b/projects/xquisite/.ipynb_checkpoints/documentation-checkpoint.md @@ -0,0 +1,37 @@ +--- +title: 🥐 XQUISITE BRUNCH 🥐 +description: A branching take on the exquisite corpse game +date: 13/02/2022 +categories: + - Web + - Python + - Games +url: /soupboat/xquisite/ +git: https://git.xpub.nl/kamo/exquisite-branch +cover: unità cinofila.jpg +cover_alt: A yellow metal box for anti drug dog +--- + +## An exquisite branch + +The [exquisite corpse](https://en.wikipedia.org/wiki/Exquisite_corpse) is a multiplayer game invented by the surrealists in which the participants compose a drawing or a story together. + +Traditionally the game is played on a long piece of paper, and each player draws a part, hiding the drawing to the next person, but leaving some hints. The following fellow continues to draw from there and so on. The result is a weird linear narrative, in which the transition between authors are at the same time smooth and abrupt. + +With the xquisite branch I would like to try a digital approach to the game. If the original version is constrained to the single piece of paper and is doomed to be linear, here we can imagine our drawings forking and branching and go in different directions. + +The process could be something like: + +someone send you a link to continue the drawing and when you are happy with it and upload it you receive a new link to share with others. If you pass the link to just one person the xquisite branch will continue, but if you pass it to several people the drawing will branch, resulting in multiple version with a common starting point. + +I would like to try this not only as a multiplayer game, but also as a creative tool. I will ask [ser togni](https://www.togniser.com/) if he want to draw some comics with it. But it could also used for branching meetings aha 🤯 + +## TODOs + +- add name for credits? +- display name in svg? +- comment the code + +- remove new from homepage? +or +- add per-new level in the xquisite branches (this makes more sense!) diff --git a/projects/xquisite/documentation.md b/projects/xquisite/documentation.md new file mode 100644 index 0000000..00110e0 --- /dev/null +++ b/projects/xquisite/documentation.md @@ -0,0 +1,37 @@ +--- +title: 🥐 XQUISITE BRUNCH 🥐 +description: A branching take on the exquisite corpse game +date: 13/02/2022 +categories: + - Web + - Python + - Games +url: /soupboat/xquisite/ +git: https://git.xpub.nl/kamo/exquisite-branch +cover: unità cinofila.jpg +cover_alt: A yellow metal box for anti drug dog +--- + +## An exquisite branch + +The [exquisite corpse](https://en.wikipedia.org/wiki/Exquisite_corpse) is a multiplayer game invented by the surrealists in which the participants compose a drawing or a story together. + +Traditionally the game is played on a long piece of paper, and each player draws a part, hiding the drawing to the next person, but leaving some hints. The following fellow continues to draw from there and so on. The result is a weird linear narrative, in which the transition between authors are at the same time smooth and abrupt. + +With the xquisite branch I would like to try a digital approach to the game. If the original version is constrained to the single piece of paper and is doomed to be linear, here we can imagine our drawings forking and branching and go in different directions. + +The process could be something like: + +someone send you a link to continue the drawing and when you are happy with it and upload it you receive a new link to share with others. If you pass the link to just one person the xquisite branch will continue, but if you pass it to several people the drawing will branch, resulting in multiple version with a common starting point. + +I would like to try this not only as a multiplayer game, but also as a creative tool. I will ask [ser togni](https://www.togniser.com/) if he want to draw some comics with it. But it could also used for branching meetings aha 🤯 + +## TODOs + +- add name for credits? +- display name in svg? +- comment the code + +- remove new from homepage? +or +- add per-new level in the xquisite branches (this makes more sense!) diff --git a/static/css/.ipynb_checkpoints/brera-checkpoint.css b/static/css/.ipynb_checkpoints/brera-checkpoint.css new file mode 100644 index 0000000..154b4cb --- /dev/null +++ b/static/css/.ipynb_checkpoints/brera-checkpoint.css @@ -0,0 +1,32 @@ +body { + font-size: 1.5rem; +} + +.title { + text-align: center; +} + +main { + max-width: 40ch; + margin: 0 auto; +} + +nav { + display: none; +} + +h2 { + border-top: 1px solid currentColor; + padding-top: 32px; + margin-top: 48px; +} + +h3 { + background-color: white; + display: inline-block; +} + +img { + width: 40ch; + height: auto; +} \ No newline at end of file diff --git a/static/css/.ipynb_checkpoints/cards-checkpoint.css b/static/css/.ipynb_checkpoints/cards-checkpoint.css new file mode 100644 index 0000000..a5de11a --- /dev/null +++ b/static/css/.ipynb_checkpoints/cards-checkpoint.css @@ -0,0 +1,32 @@ +* { + box-sizing: border-box; +} + +.cards { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + margin: 0; + pointer-events: all; +} + +.cards > * { + flex: 1; + margin: 0 1vw; + max-width: 20vw; + object-fit: contain; +} + +.cards > *:hover { + transform: scale(1.1); +} + +.header--categories { + pointer-events: none; +} + +.header--categories > * { + pointer-events: all; +} \ No newline at end of file diff --git a/static/css/.ipynb_checkpoints/categories-checkpoint.css b/static/css/.ipynb_checkpoints/categories-checkpoint.css new file mode 100644 index 0000000..fa38f90 --- /dev/null +++ b/static/css/.ipynb_checkpoints/categories-checkpoint.css @@ -0,0 +1,37 @@ +.tag[data-tag='SI16']{ +border-left-color: springgreen; +} + +.tag[data-tag='SI17']{ +border-left-color: black; +} + +.tag[data-tag='Web']{ +border-left-color: dodgerblue; +} + +.tag[data-tag='CMS']{ +border-left-color: gainsboro; +} + +.tag[data-tag='Python']{ +border-left-color: salmon; +} + +.tag[data-tag='NLTK']{ +border-left-color: tomato; +} + +.tag[data-tag='JS']{ +border-left-color: orange; +} + +.tag[data-tag='Text']{ +border-left-color: yellow; +} + +.tag[data-tag='Tool']{ +border-left-color: pink; +} + + diff --git a/static/css/.ipynb_checkpoints/global-checkpoint.css b/static/css/.ipynb_checkpoints/global-checkpoint.css new file mode 100644 index 0000000..37d961f --- /dev/null +++ b/static/css/.ipynb_checkpoints/global-checkpoint.css @@ -0,0 +1,112 @@ +html, +body { + background-color: var(--background); + font-size: var(--text); + line-height: 1.4; + font-family: var(--font); +} + +video{ +width: min(1920px, 100%); + +} + +h1, h2, h3 { +font-size: var(--text): + font-weight: bold; +} + +code { + font-family: 'Necto-Mono'; + background-color: white; + color: #333; +} + +pre { + white-space:pre-wrap; + overflow-x: auto; + +} + +/* LINKS */ + +a { + color: currentColor; + text-decoration: none; +} + +a::after { + font-family: Arial, Helvetica, sans-serif; + display: inline-block; + content: "⤴"; + color: var(--accent); + transform: translate(0); + transition: transform 0.6s ease-in; +} + +a:hover::after { + transform: translateY(-4px); + transition: transform 0.1s ease-out; +} + +.stretched-link::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index:100; +} + +*[data-mover]{ + position: absolute; + transition: transform 0.2s ease-out; +} + + +/* RETURN */ + +.back { + display: block; + color: var(--accent); +} + +.back::before { + font-family: Arial, Helvetica, sans-serif; + display: inline-block; + color: var(--accent); + content: "← "; + transform: translateX(0); + transition: transform 0.6s ease-in; +} + +.back:hover::before { + transform: translateX(-4px); + transition: transform 0.1s ease-out; +} + +.back::after { + content: ""; +} + +/* INTRO BOX */ + +.intro { + background-color: var(--accent); + border-radius: 16px; + padding: 16px; +} + +/* LISTS */ + +ul { + margin: 16px 0; +/* padding: 0; */ +/* list-style: none; */ +} + +li + li { + margin-top: 0.25em; +} + diff --git a/static/css/.ipynb_checkpoints/highlight-checkpoint.css b/static/css/.ipynb_checkpoints/highlight-checkpoint.css new file mode 100644 index 0000000..8d31a2e --- /dev/null +++ b/static/css/.ipynb_checkpoints/highlight-checkpoint.css @@ -0,0 +1,77 @@ +.codehilite .hll { background-color: #333333 } +.codehilite .c { color: #008800; font-style: italic; } /* Comment */ +.codehilite .err { color: #333333 } /* Error */ +.codehilite .esc { color: #333333 } /* Escape */ +.codehilite .g { color: #333333 } /* Generic */ +.codehilite .k { color: #fb660a; font-weight: bold } /* Keyword */ +.codehilite .l { color: #333333 } /* Literal */ +.codehilite .n { color: #333333 } /* Name */ +.codehilite .o { color: #333333 } /* Operator */ +.codehilite .x { color: #333333 } /* Other */ +.codehilite .p { color: #333333 } /* Punctuation */ +.codehilite .ch { color: #008800; font-style: italic; } /* Comment.Hashbang */ +.codehilite .cm { color: #008800; font-style: italic; } /* Comment.Multiline */ +.codehilite .cp { color: #ff0007; font-weight: bold; font-style: italic; } /* Comment.Preproc */ +.codehilite .cpf { color: #008800; font-style: italic; } /* Comment.PreprocFile */ +.codehilite .c1 { color: #008800; font-style: italic; } /* Comment.Single */ +.codehilite .cs { color: #008800; font-style: italic; } /* Comment.Special */ +.codehilite .gd { color: #333333 } /* Generic.Deleted */ +.codehilite .ge { color: #333333 } /* Generic.Emph */ +.codehilite .gr { color: #333333 } /* Generic.Error */ +.codehilite .gh { color: #333333; font-weight: bold } /* Generic.Heading */ +.codehilite .gi { color: #333333 } /* Generic.Inserted */ +.codehilite .go { color: #444444; background-color: #222222 } /* Generic.Output */ +.codehilite .gp { color: #333333 } /* Generic.Prompt */ +.codehilite .gs { color: #333333 } /* Generic.Strong */ +.codehilite .gu { color: #333333; font-weight: bold } /* Generic.Subheading */ +.codehilite .gt { color: #333333 } /* Generic.Traceback */ +.codehilite .kc { color: #fb660a; font-weight: bold } /* Keyword.Constant */ +.codehilite .kd { color: #fb660a; font-weight: bold } /* Keyword.Declaration */ +.codehilite .kn { color: #fb660a; font-weight: bold } /* Keyword.Namespace */ +.codehilite .kp { color: #fb660a } /* Keyword.Pseudo */ +.codehilite .kr { color: #fb660a; font-weight: bold } /* Keyword.Reserved */ +.codehilite .kt { color: #cdcaa9; font-weight: bold } /* Keyword.Type */ +.codehilite .ld { color: #333333 } /* Literal.Date */ +.codehilite .m { color: #0086f7; font-weight: bold } /* Literal.Number */ +.codehilite .s { color: #0086d2 } /* Literal.String */ +.codehilite .na { color: #ff0086; font-weight: bold } /* Name.Attribute */ +.codehilite .nb { color: #333333 } /* Name.Builtin */ +.codehilite .nc { color: #333333 } /* Name.Class */ +.codehilite .no { color: #0086d2 } /* Name.Constant */ +.codehilite .nd { color: #333333 } /* Name.Decorator */ +.codehilite .ni { color: #333333 } /* Name.Entity */ +.codehilite .ne { color: #333333 } /* Name.Exception */ +.codehilite .nf { color: #ff0086; font-weight: bold } /* Name.Function */ +.codehilite .nl { color: #333333 } /* Name.Label */ +.codehilite .nn { color: #333333 } /* Name.Namespace */ +.codehilite .nx { color: #333333 } /* Name.Other */ +.codehilite .py { color: #333333 } /* Name.Property */ +.codehilite .nt { color: #fb660a; font-weight: bold } /* Name.Tag */ +.codehilite .nv { color: #fb660a } /* Name.Variable */ +.codehilite .ow { color: #333333 } /* Operator.Word */ +.codehilite .w { color: #888888 } /* Text.Whitespace */ +.codehilite .mb { color: #0086f7; font-weight: bold } /* Literal.Number.Bin */ +.codehilite .mf { color: #0086f7; font-weight: bold } /* Literal.Number.Float */ +.codehilite .mh { color: #0086f7; font-weight: bold } /* Literal.Number.Hex */ +.codehilite .mi { color: #0086f7; font-weight: bold } /* Literal.Number.Integer */ +.codehilite .mo { color: #0086f7; font-weight: bold } /* Literal.Number.Oct */ +.codehilite .sa { color: #0086d2 } /* Literal.String.Affix */ +.codehilite .sb { color: #0086d2 } /* Literal.String.Backtick */ +.codehilite .sc { color: #0086d2 } /* Literal.String.Char */ +.codehilite .dl { color: #0086d2 } /* Literal.String.Delimiter */ +.codehilite .sd { color: #0086d2 } /* Literal.String.Doc */ +.codehilite .s2 { color: #0086d2 } /* Literal.String.Double */ +.codehilite .se { color: #0086d2 } /* Literal.String.Escape */ +.codehilite .sh { color: #0086d2 } /* Literal.String.Heredoc */ +.codehilite .si { color: #0086d2 } /* Literal.String.Interpol */ +.codehilite .sx { color: #0086d2 } /* Literal.String.Other */ +.codehilite .sr { color: #0086d2 } /* Literal.String.Regex */ +.codehilite .s1 { color: #0086d2 } /* Literal.String.Single */ +.codehilite .ss { color: #0086d2 } /* Literal.String.Symbol */ +.codehilite .bp { color: #333333 } /* Name.Builtin.Pseudo */ +.codehilite .fm { color: #ff0086; font-weight: bold } /* Name.Function.Magic */ +.codehilite .vc { color: #fb660a } /* Name.Variable.Class */ +.codehilite .vg { color: #fb660a } /* Name.Variable.Global */ +.codehilite .vi { color: #fb660a } /* Name.Variable.Instance */ +.codehilite .vm { color: #fb660a } /* Name.Variable.Magic */ +.codehilite .il { color: #0086f7; font-weight: bold } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/static/css/.ipynb_checkpoints/home-checkpoint.css b/static/css/.ipynb_checkpoints/home-checkpoint.css new file mode 100644 index 0000000..bcff555 --- /dev/null +++ b/static/css/.ipynb_checkpoints/home-checkpoint.css @@ -0,0 +1,191 @@ +html, +body { + margin: 0; +box-sizing: border-box; +} + +h1,h2,h3,{ +margin: 0 var(--app-margin); +padding: 0; +} + + + + +.content { + padding: 0 var(--app-margin); + margin: 0 auto; + max-width: var(--content-width); +} + +.homepage-intro{ +display: flex; +margin-bottom: 300px; +} + +.homepage-intro > *{ +flex: 1; +flex-basis: 700px; +} + + + +.title--name{ +background-color: white; +margin: 0; +padding: 0; +} + + + + +table { + border-collapse: collapse; + border: 4px solid white; +} + +tr { + position: relative; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-gap: 0; +} + +td { + grid-column: span 1; + border: 3px solid white; + padding: 0; + min-height: 133px; + text-align: left; + vertical-align: top; + } + +td.title { +grid-column: span 4; +} + +td.title .title--description { + +margin-top: 8px; +} + +td.title a { + box-decoration-break: clone; +} + +td.title a::after { +display: none; + +} + +tr:hover { +background-color: white; + color: var(--accent); +} + + + +td.links, td.categories { + grid-column: span 2; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + align-items: flex-start; + align-content: flex-start; +} + +td.links > * { + background-color: white; + margin: 0; + padding: 0 4px; + position: relative; + z-index: 200; +} + + +td.date > * { + display: block; + margin: 0; + background-color: white; +} + + +td.categories { + grid-column: span 1; + flex-direction: column; +} + +.tag { + padding: 0 4px; + background-color: white; + border-left-width: 6px; + border-left-style: solid; + border-left-color: #D5DDE8; +} + + +@media (max-width: 991.98px) { + + .content{ + margin: 0; + padding: 0; + + } + + .homepage-intro{ + padding: 0 var(--app-margin); + display: block; + margin-bottom: 128px; + } + + table { + display: block; + margin: 0; + width: 100%; + border: none; + } + + tr { + position: relative; + display: block; + } + + td, + td.title, + td:first-of-type, + td:last-of-type { + margin: 0; + border: none; + display: block; + width: auto; + min-height: auto; + } + + + tr{ + min-height: 200px; + } + + td * { + padding: 0 var(--app-margin); + } + + td.links, + td.date { + display: none; + } + + td.categories { + margin: 16px 0; + padding: 0 var(--app-margin); + flex-direction: row; + grid-column-gap: 8px; + line-height: 1; + } + + + .tag { + font-size: 18px; + padding: 4px 8px; + } +} diff --git a/static/css/.ipynb_checkpoints/project-checkpoint.css b/static/css/.ipynb_checkpoints/project-checkpoint.css new file mode 100644 index 0000000..f150a51 --- /dev/null +++ b/static/css/.ipynb_checkpoints/project-checkpoint.css @@ -0,0 +1,281 @@ +html, body { +margin: 0; + box-sizing: border-box; +} + +nav { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 400; + background-color: white; +} + +nav a::after{ +display: none; +} + +nav .content-wrapper { + max-width: var(--content-width); + margin: 0 auto; + padding: 0 var(--app-margin); +} + +.content-wrapper { +display: flex; +justify-content: stretch; +} + +.content-wrapper > * { +flex: 1; + margin: 0; +} + +nav .date { +text-align: right; +} + +nav .title { +text-align: center; +} + +code { +background-color: white; +} + +nav .return:hover{ + color: var(--accent); +} + + + +.project--header{ + position: relative; + height: 100vh; + background-color: var(--accent); + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; +} + +.header--cover { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + margin: 0 auto; + +} + +.header--cover img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.header--title { + display: inline-block; + margin: 0; + position: absolute; + font-size: 48px; + z-index: 100; + background-color: white; + + top: 50%; + left: 50%; +/* transform: translate(-50%,-50%); */ + text-align: center; +} + +.header--links { + position: relative; + z-index: 60; + + font-size: 32px; + padding: 0 var(--app-margin); + width: calc(100% - var(--app-margin) * 2); + margin: 0 auto; + margin-bottom: 24px; + max-width: var(--content-width); + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + grid-gap: 8px; + + pointer-events: none; + + +} + +.header--links a { + background-color: white; + pointer-events: all; + +} + +.header--categories { + position: absolute; + left: 0; + top: 32px; + width: 100%; + height: calc(100% - 32px); + z-index: 50; +/* pointer-events: none; */ +} + +.header--categories .tag { + + + + padding: 0 4px; + background-color: white; + border-left-width: 6px; + border-left-style: solid; + border-left-color: #D5DDE8; + +} + + + + + + + +.project--content { + padding: 0 var(--app-margin); + max-width: var(--content-width); + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + margin-top: 48px; + margin-bottom: 96px; +} + +.project--content h2 { + grid-column: 1 / span 3; +} + + +.project--content p, div, code, pre, ul, ol, h3 { + grid-column: 4 / span 5; +} + +.project--content > video, .project--content > img { + grid-column: 1 / -1; + margin: 32px 0; +} + +.project--content p img { + width: 100%; + height: auto; + + +} + + +@media (max-width: 991.98px) { + + nav{ + padding: 0; + } + + nav .date { + display: none; + } + + nav .title { + white-space: nowrap; + text-overflow: ellipsis; + padding: 0 var(--app-margin); + } + + nav .return { + display: inline-block; + position: fixed; + bottom: 24px; + right: 24px; + width: 48px; + height: 48px; + line-height: 48px; + background-color: white; + border-radius: 50%; + text-align: center; + } + + header.project--header { + justify-content: center; + flex-wrap: wrap; + height: auto; + min-height: 100vh; + } + + .header--title, .header--categories, .header--links { + font-size: 1rem; + position: relative; + width: auto; + margin: 0; + padding: var(--app-margin); + transform: none!important; + left: auto; + top: auto; + + } + + h1.header--title { + margin: 0 var(--app-margin); + transform: none!important; + + } + + .header--categories, .header--links { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + height: auto; + grid-gap: 8px; + } + + + .header--categories .tag { + padding: 0 4px; + position: relative; + transform: none!important; + } + + + + + + .project--content{ + display: block; + } + + code { + white-space: pre-wrap; + } + + + +} + +@media print { + + + nav { + position: absolute!important; + top: 0; + left: 0; + } + + main { + padding: 1rem!important; + } + + .return { + display: none!important; + } +} \ No newline at end of file diff --git a/static/css/.ipynb_checkpoints/recap-checkpoint.css b/static/css/.ipynb_checkpoints/recap-checkpoint.css new file mode 100644 index 0000000..640e384 --- /dev/null +++ b/static/css/.ipynb_checkpoints/recap-checkpoint.css @@ -0,0 +1,82 @@ +html, +body { + margin: 0; + font-size: 56px; + line-height: 72px; + + background-color: white; + font-family: serif; +} + + +nav { + display: none; +} + +body { + margin: 16px; + +} + +a { + color: #2ecc71; +} + +a:after { + content: ''; +} + +h1, h2, h3 { + font-weight: normal; + font-size: 1rem; +} + +h2, h3 { + font-style: italic; +} + + +main, h1 { + max-width: 1400px; + margin: 0 auto; +} + +main img { + + display: inline; + height: 1rem; + width: auto; + object-fit: contain; + vertical-align: middle; +} + +main img:hover { + transform: scale(6); +} + + + +h1 { + margin: 1em auto; + color: #2ecc71; +} + +.cover { + width: auto; + height: auto; +} + +.cover:hover{ + transform: none; +} + + +@media (max-width: 700px) { + + html, body { + font-size: 32px; + line-height: 1.4; + } + + +} diff --git a/static/css/.ipynb_checkpoints/rotating-checkpoint.css b/static/css/.ipynb_checkpoints/rotating-checkpoint.css new file mode 100644 index 0000000..9d6fafd --- /dev/null +++ b/static/css/.ipynb_checkpoints/rotating-checkpoint.css @@ -0,0 +1,37 @@ +@-webkit-keyframes rotating /* Safari and Chrome */ { + from { + -webkit-transform: rotate(360deg) ; + -o-transform: rotate(360deg) ; + transform: rotate(360deg) ; + + } + to { + -webkit-transform: rotate(0deg) ; + -o-transform: rotate(0deg) ; + transform: rotate(0deg) ; + } + } + @keyframes rotating { + from { + -ms-transform: rotate(360deg) ; + -moz-transform: rotate(360deg) ; + -webkit-transform: rotate(360deg) ; + -o-transform: rotate(360deg) ; + transform: rotate(360deg) ; + } + to { + -ms-transform: rotate(0deg) ; + -moz-transform: rotate(0deg) ; + -webkit-transform: rotate(0deg) ; + -o-transform: rotate(0deg) ; + transform: rotate(0deg) ; + + } + } + .rotating { + -webkit-animation: rotating 100s linear infinite; + -moz-animation: rotating 100s linear infinite; + -ms-animation: rotating 100s linear infinite; + -o-animation: rotating 100s linear infinite; + animation: rotating 100s linear infinite; + } \ No newline at end of file diff --git a/static/css/.ipynb_checkpoints/si16-frontend-documentation-checkpoint.css b/static/css/.ipynb_checkpoints/si16-frontend-documentation-checkpoint.css new file mode 100644 index 0000000..042c5bd --- /dev/null +++ b/static/css/.ipynb_checkpoints/si16-frontend-documentation-checkpoint.css @@ -0,0 +1,9 @@ +img { + width: 100%; + max-width: 1440px; + margin: 0 auto; +} + +img + img { +margin-top: 24px; +} diff --git a/static/css/.ipynb_checkpoints/sticker-checkpoint.css b/static/css/.ipynb_checkpoints/sticker-checkpoint.css new file mode 100644 index 0000000..f7bfb3b --- /dev/null +++ b/static/css/.ipynb_checkpoints/sticker-checkpoint.css @@ -0,0 +1,18 @@ +.sticker { + position: absolute; + user-select: none; + border: 1px solid currentColor; + white-space: nowrap; + background-color: white; + font-size: 18px; + padding: 0 6px; + box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); + text-decoration: none; + pointer-events: none; + + overflow-wrap: break-word; +} + +*[data-sticker] { + position: relative; +} \ No newline at end of file diff --git a/static/css/.ipynb_checkpoints/structure-proposal-checkpoint.css b/static/css/.ipynb_checkpoints/structure-proposal-checkpoint.css new file mode 100644 index 0000000..5a4171a --- /dev/null +++ b/static/css/.ipynb_checkpoints/structure-proposal-checkpoint.css @@ -0,0 +1,9 @@ +ul{ +list-style: thai; +padding-left: 2ch; +} + +img { +width: 100%; +max-width: min(800px, 100vw); +} diff --git a/static/css/.ipynb_checkpoints/variables-checkpoint.css b/static/css/.ipynb_checkpoints/variables-checkpoint.css new file mode 100644 index 0000000..e5da0fe --- /dev/null +++ b/static/css/.ipynb_checkpoints/variables-checkpoint.css @@ -0,0 +1,11 @@ +@import url("./font/font.css"); + +:root { + --font: "Fivo Sans Modern", sans-serif; + --text: 24px; + --app-margin: 8px; + --content-width: 1440px; + + --background: #EBEEF3; + --accent: mediumturquoise; +} diff --git a/static/css/brera.css b/static/css/brera.css new file mode 100644 index 0000000..154b4cb --- /dev/null +++ b/static/css/brera.css @@ -0,0 +1,32 @@ +body { + font-size: 1.5rem; +} + +.title { + text-align: center; +} + +main { + max-width: 40ch; + margin: 0 auto; +} + +nav { + display: none; +} + +h2 { + border-top: 1px solid currentColor; + padding-top: 32px; + margin-top: 48px; +} + +h3 { + background-color: white; + display: inline-block; +} + +img { + width: 40ch; + height: auto; +} \ No newline at end of file diff --git a/static/css/cards.css b/static/css/cards.css new file mode 100644 index 0000000..a5de11a --- /dev/null +++ b/static/css/cards.css @@ -0,0 +1,32 @@ +* { + box-sizing: border-box; +} + +.cards { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + margin: 0; + pointer-events: all; +} + +.cards > * { + flex: 1; + margin: 0 1vw; + max-width: 20vw; + object-fit: contain; +} + +.cards > *:hover { + transform: scale(1.1); +} + +.header--categories { + pointer-events: none; +} + +.header--categories > * { + pointer-events: all; +} \ No newline at end of file diff --git a/static/css/categories.css b/static/css/categories.css new file mode 100644 index 0000000..fa38f90 --- /dev/null +++ b/static/css/categories.css @@ -0,0 +1,37 @@ +.tag[data-tag='SI16']{ +border-left-color: springgreen; +} + +.tag[data-tag='SI17']{ +border-left-color: black; +} + +.tag[data-tag='Web']{ +border-left-color: dodgerblue; +} + +.tag[data-tag='CMS']{ +border-left-color: gainsboro; +} + +.tag[data-tag='Python']{ +border-left-color: salmon; +} + +.tag[data-tag='NLTK']{ +border-left-color: tomato; +} + +.tag[data-tag='JS']{ +border-left-color: orange; +} + +.tag[data-tag='Text']{ +border-left-color: yellow; +} + +.tag[data-tag='Tool']{ +border-left-color: pink; +} + + diff --git a/global.css b/static/css/global.css similarity index 53% rename from global.css rename to static/css/global.css index c454f6d..37d961f 100644 --- a/global.css +++ b/static/css/global.css @@ -1,12 +1,31 @@ -@import url("./font/font.css"); - html, body { - margin: 0; - background-color: #fdd; - font-size: 1.25rem; + background-color: var(--background); + font-size: var(--text); line-height: 1.4; - font-family: "Ortica", serif; + font-family: var(--font); +} + +video{ +width: min(1920px, 100%); + +} + +h1, h2, h3 { +font-size: var(--text): + font-weight: bold; +} + +code { + font-family: 'Necto-Mono'; + background-color: white; + color: #333; +} + +pre { + white-space:pre-wrap; + overflow-x: auto; + } /* LINKS */ @@ -20,7 +39,7 @@ a::after { font-family: Arial, Helvetica, sans-serif; display: inline-block; content: "⤴"; - color: tomato; + color: var(--accent); transform: translate(0); transition: transform 0.6s ease-in; } @@ -30,17 +49,33 @@ a:hover::after { transition: transform 0.1s ease-out; } +.stretched-link::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index:100; +} + +*[data-mover]{ + position: absolute; + transition: transform 0.2s ease-out; +} + + /* RETURN */ .back { display: block; - color: tomato; + color: var(--accent); } .back::before { font-family: Arial, Helvetica, sans-serif; display: inline-block; - color: tomato; + color: var(--accent); content: "← "; transform: translateX(0); transition: transform 0.6s ease-in; @@ -58,7 +93,7 @@ a:hover::after { /* INTRO BOX */ .intro { - background-color: tomato; + background-color: var(--accent); border-radius: 16px; padding: 16px; } @@ -67,10 +102,11 @@ a:hover::after { ul { margin: 16px 0; - padding: 0; - list-style: none; +/* padding: 0; */ +/* list-style: none; */ } li + li { margin-top: 0.25em; } + diff --git a/static/css/highlight.css b/static/css/highlight.css new file mode 100644 index 0000000..8d31a2e --- /dev/null +++ b/static/css/highlight.css @@ -0,0 +1,77 @@ +.codehilite .hll { background-color: #333333 } +.codehilite .c { color: #008800; font-style: italic; } /* Comment */ +.codehilite .err { color: #333333 } /* Error */ +.codehilite .esc { color: #333333 } /* Escape */ +.codehilite .g { color: #333333 } /* Generic */ +.codehilite .k { color: #fb660a; font-weight: bold } /* Keyword */ +.codehilite .l { color: #333333 } /* Literal */ +.codehilite .n { color: #333333 } /* Name */ +.codehilite .o { color: #333333 } /* Operator */ +.codehilite .x { color: #333333 } /* Other */ +.codehilite .p { color: #333333 } /* Punctuation */ +.codehilite .ch { color: #008800; font-style: italic; } /* Comment.Hashbang */ +.codehilite .cm { color: #008800; font-style: italic; } /* Comment.Multiline */ +.codehilite .cp { color: #ff0007; font-weight: bold; font-style: italic; } /* Comment.Preproc */ +.codehilite .cpf { color: #008800; font-style: italic; } /* Comment.PreprocFile */ +.codehilite .c1 { color: #008800; font-style: italic; } /* Comment.Single */ +.codehilite .cs { color: #008800; font-style: italic; } /* Comment.Special */ +.codehilite .gd { color: #333333 } /* Generic.Deleted */ +.codehilite .ge { color: #333333 } /* Generic.Emph */ +.codehilite .gr { color: #333333 } /* Generic.Error */ +.codehilite .gh { color: #333333; font-weight: bold } /* Generic.Heading */ +.codehilite .gi { color: #333333 } /* Generic.Inserted */ +.codehilite .go { color: #444444; background-color: #222222 } /* Generic.Output */ +.codehilite .gp { color: #333333 } /* Generic.Prompt */ +.codehilite .gs { color: #333333 } /* Generic.Strong */ +.codehilite .gu { color: #333333; font-weight: bold } /* Generic.Subheading */ +.codehilite .gt { color: #333333 } /* Generic.Traceback */ +.codehilite .kc { color: #fb660a; font-weight: bold } /* Keyword.Constant */ +.codehilite .kd { color: #fb660a; font-weight: bold } /* Keyword.Declaration */ +.codehilite .kn { color: #fb660a; font-weight: bold } /* Keyword.Namespace */ +.codehilite .kp { color: #fb660a } /* Keyword.Pseudo */ +.codehilite .kr { color: #fb660a; font-weight: bold } /* Keyword.Reserved */ +.codehilite .kt { color: #cdcaa9; font-weight: bold } /* Keyword.Type */ +.codehilite .ld { color: #333333 } /* Literal.Date */ +.codehilite .m { color: #0086f7; font-weight: bold } /* Literal.Number */ +.codehilite .s { color: #0086d2 } /* Literal.String */ +.codehilite .na { color: #ff0086; font-weight: bold } /* Name.Attribute */ +.codehilite .nb { color: #333333 } /* Name.Builtin */ +.codehilite .nc { color: #333333 } /* Name.Class */ +.codehilite .no { color: #0086d2 } /* Name.Constant */ +.codehilite .nd { color: #333333 } /* Name.Decorator */ +.codehilite .ni { color: #333333 } /* Name.Entity */ +.codehilite .ne { color: #333333 } /* Name.Exception */ +.codehilite .nf { color: #ff0086; font-weight: bold } /* Name.Function */ +.codehilite .nl { color: #333333 } /* Name.Label */ +.codehilite .nn { color: #333333 } /* Name.Namespace */ +.codehilite .nx { color: #333333 } /* Name.Other */ +.codehilite .py { color: #333333 } /* Name.Property */ +.codehilite .nt { color: #fb660a; font-weight: bold } /* Name.Tag */ +.codehilite .nv { color: #fb660a } /* Name.Variable */ +.codehilite .ow { color: #333333 } /* Operator.Word */ +.codehilite .w { color: #888888 } /* Text.Whitespace */ +.codehilite .mb { color: #0086f7; font-weight: bold } /* Literal.Number.Bin */ +.codehilite .mf { color: #0086f7; font-weight: bold } /* Literal.Number.Float */ +.codehilite .mh { color: #0086f7; font-weight: bold } /* Literal.Number.Hex */ +.codehilite .mi { color: #0086f7; font-weight: bold } /* Literal.Number.Integer */ +.codehilite .mo { color: #0086f7; font-weight: bold } /* Literal.Number.Oct */ +.codehilite .sa { color: #0086d2 } /* Literal.String.Affix */ +.codehilite .sb { color: #0086d2 } /* Literal.String.Backtick */ +.codehilite .sc { color: #0086d2 } /* Literal.String.Char */ +.codehilite .dl { color: #0086d2 } /* Literal.String.Delimiter */ +.codehilite .sd { color: #0086d2 } /* Literal.String.Doc */ +.codehilite .s2 { color: #0086d2 } /* Literal.String.Double */ +.codehilite .se { color: #0086d2 } /* Literal.String.Escape */ +.codehilite .sh { color: #0086d2 } /* Literal.String.Heredoc */ +.codehilite .si { color: #0086d2 } /* Literal.String.Interpol */ +.codehilite .sx { color: #0086d2 } /* Literal.String.Other */ +.codehilite .sr { color: #0086d2 } /* Literal.String.Regex */ +.codehilite .s1 { color: #0086d2 } /* Literal.String.Single */ +.codehilite .ss { color: #0086d2 } /* Literal.String.Symbol */ +.codehilite .bp { color: #333333 } /* Name.Builtin.Pseudo */ +.codehilite .fm { color: #ff0086; font-weight: bold } /* Name.Function.Magic */ +.codehilite .vc { color: #fb660a } /* Name.Variable.Class */ +.codehilite .vg { color: #fb660a } /* Name.Variable.Global */ +.codehilite .vi { color: #fb660a } /* Name.Variable.Instance */ +.codehilite .vm { color: #fb660a } /* Name.Variable.Magic */ +.codehilite .il { color: #0086f7; font-weight: bold } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/static/css/home.css b/static/css/home.css new file mode 100644 index 0000000..bcff555 --- /dev/null +++ b/static/css/home.css @@ -0,0 +1,191 @@ +html, +body { + margin: 0; +box-sizing: border-box; +} + +h1,h2,h3,{ +margin: 0 var(--app-margin); +padding: 0; +} + + + + +.content { + padding: 0 var(--app-margin); + margin: 0 auto; + max-width: var(--content-width); +} + +.homepage-intro{ +display: flex; +margin-bottom: 300px; +} + +.homepage-intro > *{ +flex: 1; +flex-basis: 700px; +} + + + +.title--name{ +background-color: white; +margin: 0; +padding: 0; +} + + + + +table { + border-collapse: collapse; + border: 4px solid white; +} + +tr { + position: relative; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-gap: 0; +} + +td { + grid-column: span 1; + border: 3px solid white; + padding: 0; + min-height: 133px; + text-align: left; + vertical-align: top; + } + +td.title { +grid-column: span 4; +} + +td.title .title--description { + +margin-top: 8px; +} + +td.title a { + box-decoration-break: clone; +} + +td.title a::after { +display: none; + +} + +tr:hover { +background-color: white; + color: var(--accent); +} + + + +td.links, td.categories { + grid-column: span 2; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + align-items: flex-start; + align-content: flex-start; +} + +td.links > * { + background-color: white; + margin: 0; + padding: 0 4px; + position: relative; + z-index: 200; +} + + +td.date > * { + display: block; + margin: 0; + background-color: white; +} + + +td.categories { + grid-column: span 1; + flex-direction: column; +} + +.tag { + padding: 0 4px; + background-color: white; + border-left-width: 6px; + border-left-style: solid; + border-left-color: #D5DDE8; +} + + +@media (max-width: 991.98px) { + + .content{ + margin: 0; + padding: 0; + + } + + .homepage-intro{ + padding: 0 var(--app-margin); + display: block; + margin-bottom: 128px; + } + + table { + display: block; + margin: 0; + width: 100%; + border: none; + } + + tr { + position: relative; + display: block; + } + + td, + td.title, + td:first-of-type, + td:last-of-type { + margin: 0; + border: none; + display: block; + width: auto; + min-height: auto; + } + + + tr{ + min-height: 200px; + } + + td * { + padding: 0 var(--app-margin); + } + + td.links, + td.date { + display: none; + } + + td.categories { + margin: 16px 0; + padding: 0 var(--app-margin); + flex-direction: row; + grid-column-gap: 8px; + line-height: 1; + } + + + .tag { + font-size: 18px; + padding: 4px 8px; + } +} diff --git a/static/css/notation_small.jpg b/static/css/notation_small.jpg new file mode 100644 index 0000000..b8f958b Binary files /dev/null and b/static/css/notation_small.jpg differ diff --git a/static/css/project.css b/static/css/project.css new file mode 100644 index 0000000..092bb19 --- /dev/null +++ b/static/css/project.css @@ -0,0 +1,280 @@ +html, body { +margin: 0; + box-sizing: border-box; +} + +nav { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 400; + background-color: white; +} + +nav a::after{ +display: none; +} + +nav .content-wrapper { + max-width: var(--content-width); + margin: 0 auto; + padding: 0 var(--app-margin); +} + +.content-wrapper { +display: flex; +justify-content: stretch; +} + +.content-wrapper > * { +flex: 1; + margin: 0; +} + +nav .date { +text-align: right; +} + +nav .title { +text-align: center; +} + +code { +background-color: white; +} + +nav .return:hover{ + color: var(--accent); +} + + + +.project--header{ + position: relative; + height: 100vh; + background-color: var(--accent); + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; +} + +.header--cover { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + margin: 0 auto; + +} + +.header--cover img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.header--title { + display: inline-block; + margin: 0; + position: absolute; + font-size: 48px; + z-index: 100; + background-color: white; + + top: 50%; + left: 50%; +/* transform: translate(-50%,-50%); */ + text-align: center; +} + +.header--links { + position: relative; + z-index: 60; + + font-size: 32px; + padding: 0 var(--app-margin); + width: calc(100% - var(--app-margin) * 2); + margin: 0 auto; + margin-bottom: 24px; + max-width: var(--content-width); + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + grid-gap: 8px; + + pointer-events: none; + + +} + +.header--links a { + background-color: white; + pointer-events: all; + +} + +.header--categories { + position: absolute; + left: 0; + top: 32px; + width: 100%; + height: calc(100% - 32px); + z-index: 50; +/* pointer-events: none; */ +} + +.header--categories .tag { + + + + padding: 0 4px; + background-color: white; + border-left-width: 6px; + border-left-style: solid; + border-left-color: #D5DDE8; + +} + + + + + + + +.project--content { + padding: 0 var(--app-margin); + max-width: var(--content-width); + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + margin-top: 48px; + margin-bottom: 96px; +} + +.project--content h2 { + grid-column: 1 / span 3; +} + + +.project--content p, div, code, pre, ul, ol, h3 { + grid-column: 4 / span 5; +} + +.project--content > video, .project--content > img { + grid-column: 1 / -1; + margin: 32px 0; +} + +.project--content p img { + width: 100%; + height: auto; + + +} + + +@media (max-width: 991.98px) { + + nav{ + padding: 0; + } + + nav .date { + display: none; + } + + nav .title { + white-space: nowrap; + text-overflow: ellipsis; + padding: 0 var(--app-margin); + } + + nav .return { + display: inline-block; + position: fixed; + bottom: 24px; + right: 24px; + width: 48px; + height: 48px; + line-height: 48px; + background-color: white; + border-radius: 50%; + text-align: center; + } + + header.project--header { + justify-content: center; + flex-wrap: wrap; + height: auto; + min-height: 100vh; + } + + .header--title, .header--categories, .header--links { + font-size: 1rem; + position: relative; + width: auto; + margin: 0; + padding: var(--app-margin); + transform: none!important; + left: auto; + top: auto; + + } + + h1.header--title { + margin: 0 var(--app-margin); + transform: none!important; + + } + + .header--categories, .header--links { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + height: auto; + grid-gap: 8px; + } + + + .header--categories .tag { + padding: 0 4px; + position: relative; + transform: none!important; + } + + + + + + .project--content{ + display: block; + } + + code { + white-space: pre-wrap; + } + + + +} + +@media print { + + nav { + position: absolute!important; + top: 0; + left: 0; + } + + main { + padding: 1rem!important; + } + + .return { + display: none!important; + } +} \ No newline at end of file diff --git a/static/css/recap.css b/static/css/recap.css new file mode 100644 index 0000000..640e384 --- /dev/null +++ b/static/css/recap.css @@ -0,0 +1,82 @@ +html, +body { + margin: 0; + font-size: 56px; + line-height: 72px; + + background-color: white; + font-family: serif; +} + + +nav { + display: none; +} + +body { + margin: 16px; + +} + +a { + color: #2ecc71; +} + +a:after { + content: ''; +} + +h1, h2, h3 { + font-weight: normal; + font-size: 1rem; +} + +h2, h3 { + font-style: italic; +} + + +main, h1 { + max-width: 1400px; + margin: 0 auto; +} + +main img { + + display: inline; + height: 1rem; + width: auto; + object-fit: contain; + vertical-align: middle; +} + +main img:hover { + transform: scale(6); +} + + + +h1 { + margin: 1em auto; + color: #2ecc71; +} + +.cover { + width: auto; + height: auto; +} + +.cover:hover{ + transform: none; +} + + +@media (max-width: 700px) { + + html, body { + font-size: 32px; + line-height: 1.4; + } + + +} diff --git a/static/css/rotating.css b/static/css/rotating.css new file mode 100644 index 0000000..9d6fafd --- /dev/null +++ b/static/css/rotating.css @@ -0,0 +1,37 @@ +@-webkit-keyframes rotating /* Safari and Chrome */ { + from { + -webkit-transform: rotate(360deg) ; + -o-transform: rotate(360deg) ; + transform: rotate(360deg) ; + + } + to { + -webkit-transform: rotate(0deg) ; + -o-transform: rotate(0deg) ; + transform: rotate(0deg) ; + } + } + @keyframes rotating { + from { + -ms-transform: rotate(360deg) ; + -moz-transform: rotate(360deg) ; + -webkit-transform: rotate(360deg) ; + -o-transform: rotate(360deg) ; + transform: rotate(360deg) ; + } + to { + -ms-transform: rotate(0deg) ; + -moz-transform: rotate(0deg) ; + -webkit-transform: rotate(0deg) ; + -o-transform: rotate(0deg) ; + transform: rotate(0deg) ; + + } + } + .rotating { + -webkit-animation: rotating 100s linear infinite; + -moz-animation: rotating 100s linear infinite; + -ms-animation: rotating 100s linear infinite; + -o-animation: rotating 100s linear infinite; + animation: rotating 100s linear infinite; + } \ No newline at end of file diff --git a/static/css/si16-frontend-documentation.css b/static/css/si16-frontend-documentation.css new file mode 100644 index 0000000..042c5bd --- /dev/null +++ b/static/css/si16-frontend-documentation.css @@ -0,0 +1,9 @@ +img { + width: 100%; + max-width: 1440px; + margin: 0 auto; +} + +img + img { +margin-top: 24px; +} diff --git a/static/css/sticker.css b/static/css/sticker.css new file mode 100644 index 0000000..f7bfb3b --- /dev/null +++ b/static/css/sticker.css @@ -0,0 +1,18 @@ +.sticker { + position: absolute; + user-select: none; + border: 1px solid currentColor; + white-space: nowrap; + background-color: white; + font-size: 18px; + padding: 0 6px; + box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); + text-decoration: none; + pointer-events: none; + + overflow-wrap: break-word; +} + +*[data-sticker] { + position: relative; +} \ No newline at end of file diff --git a/static/css/structure-proposal.css b/static/css/structure-proposal.css new file mode 100644 index 0000000..5a4171a --- /dev/null +++ b/static/css/structure-proposal.css @@ -0,0 +1,9 @@ +ul{ +list-style: thai; +padding-left: 2ch; +} + +img { +width: 100%; +max-width: min(800px, 100vw); +} diff --git a/10-12-2021-cam-transcript/style.css b/static/css/transcript.css similarity index 91% rename from 10-12-2021-cam-transcript/style.css rename to static/css/transcript.css index d92e827..4db133b 100644 --- a/10-12-2021-cam-transcript/style.css +++ b/static/css/transcript.css @@ -1,50 +1,50 @@ -html, body{ -margin: 0; - -} - - -body { - font-size: 1.5rem; - line-height: 1.4; -} - -.episode{ - margin: 0 16px; - padding: 0 16px; -} - -img { - width: 100%; - margin-bottom: 32px; -} - -.container { - display: flex; -} - -.container > * { - flex: 1; - flex-basis: 30%; -} - -.container > * + * { - padding-left: 16px; -} - -.meta { - text-align: center; -margin-bottom: 64px; -} - -.outro { - margin: 64px auto; - padding: 0 16px; - border-top: 1px dashed tomato; - padding-top: 64px; - max-width: 1440px; -} - -h1 { - text-align: center; +html, body{ +margin: 0; + +} + + +body { + font-size: 1.5rem; + line-height: 1.4; +} + +.episode{ + margin: 0 16px; + padding: 0 16px; +} + +img { + width: 100%; + margin-bottom: 32px; +} + +.container { + display: flex; +} + +.container > * { + flex: 1; + flex-basis: 30%; +} + +.container > * + * { + padding-left: 16px; +} + +.meta { + text-align: center; +margin-bottom: 64px; +} + +.outro { + margin: 64px auto; + padding: 0 16px; + border-top: 1px dashed tomato; + padding-top: 64px; + max-width: 1440px; +} + +h1 { + text-align: center; } \ No newline at end of file diff --git a/static/css/variables.css b/static/css/variables.css new file mode 100644 index 0000000..e5da0fe --- /dev/null +++ b/static/css/variables.css @@ -0,0 +1,11 @@ +@import url("./font/font.css"); + +:root { + --font: "Fivo Sans Modern", sans-serif; + --text: 24px; + --app-margin: 8px; + --content-width: 1440px; + + --background: #EBEEF3; + --accent: mediumturquoise; +} diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 0000000..7cadaa0 Binary files /dev/null and b/static/favicon.ico differ diff --git a/static/font/.ipynb_checkpoints/font-checkpoint.css b/static/font/.ipynb_checkpoints/font-checkpoint.css new file mode 100644 index 0000000..25234fc --- /dev/null +++ b/static/font/.ipynb_checkpoints/font-checkpoint.css @@ -0,0 +1,35 @@ +@font-face { + font-family: "Ortica"; + font-weight: bold; + src: url("./Ortica-Bold.woff2") format("woff2"), url("./Ortica-Bold.woff") format("woff"); +} + +@font-face { + font-family: "Ortica"; + font-weight: normal; + src: url("./Ortica-Light.woff2") format("woff2"), url("./Ortica-Light.woff") format("woff"); +} + +@font-face { + font-family: 'Fivo Sans Modern'; + src: url('FivoSansModern-Heavy.woff2') format('woff2'), + url('FivoSansModern-Heavy.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Fivo Sans Modern'; + src: url('FivoSansModern-Medium.woff2') format('woff2'), + url('FivoSansModern-Medium.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Necto-Mono"; + font-weight: normal; + src: url("./Necto-Mono.woff2") format("woff2"), url("./Necto-Mono.woff") format("woff"); +} diff --git a/static/font/FivoSansModern-Heavy.woff b/static/font/FivoSansModern-Heavy.woff new file mode 100644 index 0000000..b41d463 Binary files /dev/null and b/static/font/FivoSansModern-Heavy.woff differ diff --git a/static/font/FivoSansModern-Heavy.woff2 b/static/font/FivoSansModern-Heavy.woff2 new file mode 100644 index 0000000..c95752b Binary files /dev/null and b/static/font/FivoSansModern-Heavy.woff2 differ diff --git a/static/font/FivoSansModern-Medium.woff b/static/font/FivoSansModern-Medium.woff new file mode 100644 index 0000000..f5c91ad Binary files /dev/null and b/static/font/FivoSansModern-Medium.woff differ diff --git a/static/font/FivoSansModern-Medium.woff2 b/static/font/FivoSansModern-Medium.woff2 new file mode 100644 index 0000000..722f22e Binary files /dev/null and b/static/font/FivoSansModern-Medium.woff2 differ diff --git a/static/font/Necto-Mono.woff b/static/font/Necto-Mono.woff new file mode 100644 index 0000000..e9306c9 Binary files /dev/null and b/static/font/Necto-Mono.woff differ diff --git a/static/font/Necto-Mono.woff2 b/static/font/Necto-Mono.woff2 new file mode 100644 index 0000000..0b273ef Binary files /dev/null and b/static/font/Necto-Mono.woff2 differ diff --git a/font/Ortica-Bold.woff b/static/font/Ortica-Bold.woff similarity index 100% rename from font/Ortica-Bold.woff rename to static/font/Ortica-Bold.woff diff --git a/font/Ortica-Bold.woff2 b/static/font/Ortica-Bold.woff2 similarity index 100% rename from font/Ortica-Bold.woff2 rename to static/font/Ortica-Bold.woff2 diff --git a/font/Ortica-Light.woff b/static/font/Ortica-Light.woff similarity index 100% rename from font/Ortica-Light.woff rename to static/font/Ortica-Light.woff diff --git a/font/Ortica-Light.woff2 b/static/font/Ortica-Light.woff2 similarity index 100% rename from font/Ortica-Light.woff2 rename to static/font/Ortica-Light.woff2 diff --git a/static/font/font.css b/static/font/font.css new file mode 100644 index 0000000..25234fc --- /dev/null +++ b/static/font/font.css @@ -0,0 +1,35 @@ +@font-face { + font-family: "Ortica"; + font-weight: bold; + src: url("./Ortica-Bold.woff2") format("woff2"), url("./Ortica-Bold.woff") format("woff"); +} + +@font-face { + font-family: "Ortica"; + font-weight: normal; + src: url("./Ortica-Light.woff2") format("woff2"), url("./Ortica-Light.woff") format("woff"); +} + +@font-face { + font-family: 'Fivo Sans Modern'; + src: url('FivoSansModern-Heavy.woff2') format('woff2'), + url('FivoSansModern-Heavy.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Fivo Sans Modern'; + src: url('FivoSansModern-Medium.woff2') format('woff2'), + url('FivoSansModern-Medium.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Necto-Mono"; + font-weight: normal; + src: url("./Necto-Mono.woff2") format("woff2"), url("./Necto-Mono.woff") format("woff"); +} diff --git a/static/js/.ipynb_checkpoints/mover-checkpoint.js b/static/js/.ipynb_checkpoints/mover-checkpoint.js new file mode 100644 index 0000000..3cd46cc --- /dev/null +++ b/static/js/.ipynb_checkpoints/mover-checkpoint.js @@ -0,0 +1,34 @@ +const movers = document.querySelectorAll("[data-mover]"); + +Array.from(movers).forEach(mover=>{ + mover.addEventListener('mouseenter', (e) => move(e)) +}) + +function move(e) { + let amount = parseInt(e.target.dataset.mover) // data attribute mover set the amount of movement + + let offsetCheck = /translate\(-50%, -50%\)/ + let offsetMatch = e.target.style.transform.match(offsetCheck) + + + let transformCheck = /translate\((\d+\.*\d*)vw, (\d+\.*\d*)vh\)/ // check for pattern like translate(12vw, 34vh) + const match = e.target.style.transform.match(transformCheck) + + if (match) { + e.target.style.transform = + `translate( + ${parseInt(match[1]) + Math.random() * amount - amount / 2 }vw, + ${parseInt(match[2]) + Math.random() * amount - amount / 2}vh)` + } else { + e.target.style.transform = + `translate( + ${Math.random() * amount - amount / 2 }vw, + ${Math.random() * amount - amount / 2}vh)` + } + + + if(offsetMatch){ + e.target.style.transform += ' translate(-50%, -50%)' + } +} + diff --git a/static/js/.ipynb_checkpoints/spawnSticker-checkpoint.js b/static/js/.ipynb_checkpoints/spawnSticker-checkpoint.js new file mode 100644 index 0000000..411ef24 --- /dev/null +++ b/static/js/.ipynb_checkpoints/spawnSticker-checkpoint.js @@ -0,0 +1,46 @@ + +const stickerSpawners = document.querySelectorAll("[data-sticker]"); +var throttleSpawn = throttle(spawnSticker, 400); + +Array.from(stickerSpawners).forEach((spawner) => { + spawner.addEventListener("mousemove", (e) => throttleSpawn(e)); +}); + +function spawnSticker(e) { + var rect = e.target.getBoundingClientRect(); + let position = { x: e.clientX - rect.left, y: e.clientY - rect.top }; + let content = e.target.dataset.sticker; + e.originalTarget.appendChild(createSticker(content, position)); +} + + +function createSticker(content, position) { + sticker = document.createElement("span"); + sticker.classList.add("sticker"); + sticker.innerHTML = content; + sticker.style.left = position.x + "px"; + sticker.style.top = position.y + "px"; + + sticker.style.transform = ` + translate(-50%, -50%) + rotate(${Math.random() * 40 - 20}deg) + `; + + return sticker; +} + + +// from https://stackoverflow.com/questions/27078285/simple-throttle-in-javascript + +function throttle (callback, limit) { + var waiting = false; // Initially, we're not waiting + return function () { // We return a throttled function + if (!waiting) { // If we're not waiting + callback.apply(this, arguments); // Execute users function + waiting = true; // Prevent future invocations + setTimeout(function () { // After a period of time + waiting = false; // And allow future invocations + }, limit); + } + } +} \ No newline at end of file diff --git a/static/js/mover.js b/static/js/mover.js new file mode 100644 index 0000000..3cd46cc --- /dev/null +++ b/static/js/mover.js @@ -0,0 +1,34 @@ +const movers = document.querySelectorAll("[data-mover]"); + +Array.from(movers).forEach(mover=>{ + mover.addEventListener('mouseenter', (e) => move(e)) +}) + +function move(e) { + let amount = parseInt(e.target.dataset.mover) // data attribute mover set the amount of movement + + let offsetCheck = /translate\(-50%, -50%\)/ + let offsetMatch = e.target.style.transform.match(offsetCheck) + + + let transformCheck = /translate\((\d+\.*\d*)vw, (\d+\.*\d*)vh\)/ // check for pattern like translate(12vw, 34vh) + const match = e.target.style.transform.match(transformCheck) + + if (match) { + e.target.style.transform = + `translate( + ${parseInt(match[1]) + Math.random() * amount - amount / 2 }vw, + ${parseInt(match[2]) + Math.random() * amount - amount / 2}vh)` + } else { + e.target.style.transform = + `translate( + ${Math.random() * amount - amount / 2 }vw, + ${Math.random() * amount - amount / 2}vh)` + } + + + if(offsetMatch){ + e.target.style.transform += ' translate(-50%, -50%)' + } +} + diff --git a/static/js/roll.js b/static/js/roll.js new file mode 100644 index 0000000..c08ad0a --- /dev/null +++ b/static/js/roll.js @@ -0,0 +1,26 @@ +const baloons = document.getElementsByClassName("baloon"); + +// Threshold Callback + +let threshold = []; +for (let i = 0; i <= 1.0; i += 0.01) { + threshold.push(i); +} + +let callback = (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add("roll"); + observer.unobserve(entry.target); + } + }); +}; + +let observer = new IntersectionObserver(callback, { + rootMargin: "0% 0% -100% 0%", + threshold: threshold, +}); + +Array.from(baloons).forEach((baloon) => { + observer.observe(baloon); +}); diff --git a/static/js/spawnSticker.js b/static/js/spawnSticker.js new file mode 100644 index 0000000..411ef24 --- /dev/null +++ b/static/js/spawnSticker.js @@ -0,0 +1,46 @@ + +const stickerSpawners = document.querySelectorAll("[data-sticker]"); +var throttleSpawn = throttle(spawnSticker, 400); + +Array.from(stickerSpawners).forEach((spawner) => { + spawner.addEventListener("mousemove", (e) => throttleSpawn(e)); +}); + +function spawnSticker(e) { + var rect = e.target.getBoundingClientRect(); + let position = { x: e.clientX - rect.left, y: e.clientY - rect.top }; + let content = e.target.dataset.sticker; + e.originalTarget.appendChild(createSticker(content, position)); +} + + +function createSticker(content, position) { + sticker = document.createElement("span"); + sticker.classList.add("sticker"); + sticker.innerHTML = content; + sticker.style.left = position.x + "px"; + sticker.style.top = position.y + "px"; + + sticker.style.transform = ` + translate(-50%, -50%) + rotate(${Math.random() * 40 - 20}deg) + `; + + return sticker; +} + + +// from https://stackoverflow.com/questions/27078285/simple-throttle-in-javascript + +function throttle (callback, limit) { + var waiting = false; // Initially, we're not waiting + return function () { // We return a throttled function + if (!waiting) { // If we're not waiting + callback.apply(this, arguments); // Execute users function + waiting = true; // Prevent future invocations + setTimeout(function () { // After a period of time + waiting = false; // And allow future invocations + }, limit); + } + } +} \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index 647f1ce..0000000 --- a/style.css +++ /dev/null @@ -1,107 +0,0 @@ -.title { - margin: 32px; -} - -.info { - margin: 32px; - line-height: 1.6; -} - -table { - margin: 0; - width: 100%; - border-collapse: collapse; -} - -tr:nth-child(odd) { - background-color: #ffd0d0; -} - -td { - padding: 24px 16px; - text-align: left; - width: 20%; -} - -td:first-of-type { - padding-left: 32px; -} - -td:last-of-type { - text-align: right; - padding-right: 32px; -} - -.tag { - color: tomato; - border: 1px solid tomato; - display: inline-block; - padding: 4px 16px; - line-height: 1; - border-radius: 1em; - user-select: none; -} - -.tag + .tag { - margin-left: 4px; -} - -#name-space { - display: inline-block; - transform: rotate(0); - transition: all 0.5s ease-out; -} - -#name-space.rotate { - transform: rotate(-1turn); - transition: all 0s linear; -} - -@media (max-width: 991.98px) { - body { - font-size: 1rem; - } - - table { - margin: 0; - width: 100%; - } - - tr { - position: relative; - } - - td, - td:first-of-type, - td:last-of-type { - margin: 0; - padding: 0 32px; - width: auto; - display: block; - } - - td.title { - margin: 16px 0; - font-size: 1.125rem; - } - - td.links { - display: none; - } - - td.categories { - margin: 16px 0; - } - - td.date { - position: absolute; - font-size: 18px; - top: 16px; - right: 0; - } - - .tag { - font-size: 18px; - padding: 4px 8px; - } -} diff --git a/templates/.ipynb_checkpoints/base-checkpoint.html b/templates/.ipynb_checkpoints/base-checkpoint.html new file mode 100644 index 0000000..04ee9f3 --- /dev/null +++ b/templates/.ipynb_checkpoints/base-checkpoint.html @@ -0,0 +1,58 @@ + + + + + + + {% block title %} - {{ title }} {% endblock %} + + + + + + + + + + + + + {% block head %}{% endblock %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

{{ title }}

+ {% block header %} {% endblock %} +
+
{%block content%} {% endblock %}
+ + diff --git a/templates/.ipynb_checkpoints/cards-checkpoint.html b/templates/.ipynb_checkpoints/cards-checkpoint.html new file mode 100644 index 0000000..f0b612b --- /dev/null +++ b/templates/.ipynb_checkpoints/cards-checkpoint.html @@ -0,0 +1,9 @@ +{% extends "project.html" %} + +{% block cover%} +
+ {% for card in cards %} + + {%endfor%} +
+{% endblock %} \ No newline at end of file diff --git a/templates/.ipynb_checkpoints/home-checkpoint.html b/templates/.ipynb_checkpoints/home-checkpoint.html new file mode 100644 index 0000000..bc9b620 --- /dev/null +++ b/templates/.ipynb_checkpoints/home-checkpoint.html @@ -0,0 +1,80 @@ + + + + + + + Kamo {% block title %} - {{ title }} {% endblock %} + + + + + + + + + + + + + + +
+ +
+

{{ title }}

+
{{content|safe}}
+
+ + + {% for project in projects %} + + + + + + + {% endfor %} +
+

+ + {{project.title}} + +

+
+ {% if project.description %} + {{ project.description }} + {% endif %} +
+ 		+ + {% if project.url %} + project + {% endif %} + + {% if project.pad %} + pad + {% endif %} + + {% if project.git %} + git + {% endif %} + + {% if project.links %} + {% for link in project.links %} + {{link.title}} + {% endfor %} + {% endif%} + + + {% for category in project.categories %} + {{category}} + {% endfor %} + + {% if project.date %} + {{project.date}} + {% endif %} +
+
+ + \ No newline at end of file diff --git a/templates/.ipynb_checkpoints/page-checkpoint.html b/templates/.ipynb_checkpoints/page-checkpoint.html new file mode 100644 index 0000000..c66b78e --- /dev/null +++ b/templates/.ipynb_checkpoints/page-checkpoint.html @@ -0,0 +1,42 @@ +{% extends "base.html" %} + + +{% block head %} + + + {% if css %} + + {% endif %} + + {% if script %} + + {% endif %} + + +{% endblock %} + + + +{% block title %} + {{title}} +{% endblock %} + +{% block nav %} + Back +{% endblock %} + + +{% block content%} + + {% if cover %} + {{cover_alt}} + {% endif %} + + + {{ content|safe }} +{% endblock %} diff --git a/templates/.ipynb_checkpoints/project-checkpoint.html b/templates/.ipynb_checkpoints/project-checkpoint.html new file mode 100644 index 0000000..9323379 --- /dev/null +++ b/templates/.ipynb_checkpoints/project-checkpoint.html @@ -0,0 +1,123 @@ + + + + + + + {{ title }} + + + + + + + + + + + + + + + {% if css %} + + {% endif %} + + + + + + + + + {% if script %} + + {% endif %} + + + + {% if description %} + + + + {% endif %} + + {% if cover %} + + + {% endif %} + + + + +
+ + {% block cover %} + {% if cover and cover_alt %} +
+ {{cover_alt}} +
+ {% endif %} + {% endblock %} +

{{ title }}

+ + +
+ + {% if project %} + go to the project + {% endif %} + + + {% if url %} + go to project + {% endif %} + + {% if pad %} + pad + {% endif %} + + {% if git %} + git + {% endif %} + + {% if links %} + {% for link in links %} + {{link.title}} + {% endfor %} + {% endif%} +
+ +
+ {% for category in categories %} + + {{category}} + + {% endfor %} +
+ +
+ + + + +
+ + {{content|safe}} + +
+ + diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..04ee9f3 --- /dev/null +++ b/templates/base.html @@ -0,0 +1,58 @@ + + + + + + + {% block title %} - {{ title }} {% endblock %} + + + + + + + + + + + + + {% block head %}{% endblock %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

{{ title }}

+ {% block header %} {% endblock %} +
+
{%block content%} {% endblock %}
+ + diff --git a/templates/cards.html b/templates/cards.html new file mode 100644 index 0000000..f0b612b --- /dev/null +++ b/templates/cards.html @@ -0,0 +1,9 @@ +{% extends "project.html" %} + +{% block cover%} +
+ {% for card in cards %} + + {%endfor%} +
+{% endblock %} \ No newline at end of file diff --git a/templates/home.html b/templates/home.html new file mode 100644 index 0000000..bc9b620 --- /dev/null +++ b/templates/home.html @@ -0,0 +1,80 @@ + + + + + + + Kamo {% block title %} - {{ title }} {% endblock %} + + + + + + + + + + + + + + +
+ +
+

{{ title }}

+
{{content|safe}}
+
+ + + {% for project in projects %} + + + + + + + {% endfor %} +
+

+ + {{project.title}} + +

+
+ {% if project.description %} + {{ project.description }} + {% endif %} +
+ 		+ + {% if project.url %} + project + {% endif %} + + {% if project.pad %} + pad + {% endif %} + + {% if project.git %} + git + {% endif %} + + {% if project.links %} + {% for link in project.links %} + {{link.title}} + {% endfor %} + {% endif%} + + + {% for category in project.categories %} + {{category}} + {% endfor %} + + {% if project.date %} + {{project.date}} + {% endif %} +
+
+ + \ No newline at end of file diff --git a/templates/page.html b/templates/page.html new file mode 100644 index 0000000..c66b78e --- /dev/null +++ b/templates/page.html @@ -0,0 +1,42 @@ +{% extends "base.html" %} + + +{% block head %} + + + {% if css %} + + {% endif %} + + {% if script %} + + {% endif %} + + +{% endblock %} + + + +{% block title %} + {{title}} +{% endblock %} + +{% block nav %} + Back +{% endblock %} + + +{% block content%} + + {% if cover %} + {{cover_alt}} + {% endif %} + + + {{ content|safe }} +{% endblock %} diff --git a/templates/project.html b/templates/project.html new file mode 100644 index 0000000..9323379 --- /dev/null +++ b/templates/project.html @@ -0,0 +1,123 @@ + + + + + + + {{ title }} + + + + + + + + + + + + + + + {% if css %} + + {% endif %} + + + + + + + + + {% if script %} + + {% endif %} + + + + {% if description %} + + + + {% endif %} + + {% if cover %} + + + {% endif %} + + + + +
+ + {% block cover %} + {% if cover and cover_alt %} +
+ {{cover_alt}} +
+ {% endif %} + {% endblock %} +

{{ title }}

+ + +
+ + {% if project %} + go to the project + {% endif %} + + + {% if url %} + go to project + {% endif %} + + {% if pad %} + pad + {% endif %} + + {% if git %} + git + {% endif %} + + {% if links %} + {% for link in links %} + {{link.title}} + {% endfor %} + {% endif%} +
+ +
+ {% for category in categories %} + + {{category}} + + {% endfor %} +
+ +
+ + + + +
+ + {{content|safe}} + +
+ +