add code example

content/docs/2023/mediaart-programming2/5/_index.md

@@ -12,3 +12,168 @@ params:
 ## スライド
 
 {{< embed_pdf >}}
+
+## テキスト操作のサンプルコード
+
+### load_text.js(ファイルの読み込み)
+
+```js
+//ファイル読み込みライブラリを使用
+const fs = require("fs");
+//ファイル名の指定（./はこのjsファイルと同階層にあることを明示）
+const src = "./henshin.txt";
+//ファイルを読み込み
+const bytes = fs.readFileSync(src);
+//バイト列から文字列に
+const txt = bytes.toString();
+console.log(txt);
+```
+
+{{< button href="load_text.js">}}load_text.js{{< /button >}}
+
+### text_as_array.js （文字列から文字をインデックスで取り出す）
+
+文字列オブジェクトはJavascriptの中では配列のように`str[idx]`として先頭から`idx`番目の文字を取り出せます。
+
+```js
+//ファイル読み込みライブラリを使用
+const fs = require("fs");
+//ファイル名の指定（./はこのjsファイルと同階層にあることを明示）
+const src = "./henshin.txt";
+//ファイルを読み込み
+const bytes = fs.readFileSync(src);
+//バイト列から文字列に
+const txt = bytes.toString();
+//配列として先頭から100文字コンソールに表示
+for (let i =0;i<100;i++) {
+    console.log(txt[i])
+}
+```
+
+{{< button href="text_as_array.js">}}text_as_array.js{{< /button >}}
+
+### text_as_array2.js （文字列を文字の配列オブジェクトにする）
+
+より明確に1文字ずつを要素とした配列オブジェクトにすることもできます。
+
+こちらのやり方だと、配列を変換する`map`や`filter`、`reduce`などの便利な関数が使えます。
+
+```js
+//ファイル読み込みライブラリを使用
+const fs = require("fs");
+//ファイル名の指定（./はこのjsファイルと同階層にあることを明示）
+const src = "./henshin.txt";
+//ファイルを読み込み
+const bytes = fs.readFileSync(src);
+//バイト列から文字列に
+const txt = bytes.toString();
+//文字の配列にする
+const arr = Array.from(txt);
+console.log(arr);
+```
+
+{{< button href="text_as_array2.js">}}text_as_array2.js{{< /button >}}
+
+### text_sort.js （文字列を文字コード順でソート）
+
+```js
+//ファイル読み込みライブラリを使用
+const fs = require("fs");
+//ファイル名の指定（./はこのjsファイルと同階層にあることを明示）
+const src = "./henshin.txt";
+//ファイルを読み込み
+const bytes = fs.readFileSync(src);
+//バイト列から文字列に
+const txt = bytes.toString();
+//文字の配列にする
+const arr = Array.from(txt);
+//配列を文字コード順でソート
+const sorted = arr.sort();
+//ソートした配列を（区切り文字なしで）結合
+const sorted_str = sorted.join("");
+//ファイルに保存
+fs.writeFileSync("henshin_sorted.txt",sorted_str);
+```
+{{< button href="text_sort.js">}}text_sort.js{{< /button >}}
+
+### text_reversed.js （文字列を前後逆転）
+
+```js
+//ファイル読み込みライブラリを使用
+const fs = require("fs");
+//ファイル名の指定（./はこのjsファイルと同階層にあることを明示）
+const src = "./henshin.txt";
+//ファイルを読み込み
+const bytes = fs.readFileSync(src);
+//バイト列から文字列に
+const txt = bytes.toString();
+//文字の配列にする
+const arr = Array.from(txt);
+//配列を反転
+const reversed = arr.reverse();
+//反転した配列を（区切り文字なしで）結合
+const reversed_str = reversed.join("");
+//ファイルに保存
+fs.writeFileSync("henshin_reversed.txt",reversed_str);
+```
+
+{{< button href="text_reversed.js">}}text_reversed.js{{< /button >}}
+
+### text_unicode_shift.js （文字列のUnicodeコードポイントを一つずつずらす）
+
+```js
+//ファイル読み込みライブラリを使用
+const fs = require("fs");
+//ファイル名の指定（./はこのjsファイルと同階層にあることを明示）
+const src = "./henshin.txt";
+//ファイルを読み込み
+const bytes = fs.readFileSync(src);
+//バイト列から文字列に
+const txt = bytes.toString();
+//文字の配列にする
+const arr = Array.from(txt);
+//配列の文字コードを1つ隣へずらす
+const shifted = arr.map( c => String.fromCodePoint(c.codePointAt(0)+1));
+//ソートした配列を（区切り文字なしで）結合
+const shifted_str = shifted.join("");
+//ファイルに保存
+fs.writeFileSync("henshin_shifted.txt",shifted_str);
+```
+
+{{< button href="text_unicode_shift.js">}}text_unicode_shift.js{{< /button >}}
+
+### text_unicode_shift_grad.js （文字列のUnicodeコードポイントをずらす確率を段々上げていく）
+
+
+```js
+//ファイル読み込みライブラリを使用
+const fs = require("fs");
+//ファイル名の指定（./はこのjsファイルと同階層にあることを明示）
+const src = "./henshin.txt";
+//ファイルを読み込み
+const bytes = fs.readFileSync(src);
+//バイト列から文字列に
+const txt = bytes.toString();
+//文字の配列にする
+const arr = Array.from(txt);
+
+//文字コードをずらす確率
+let probability = 0.0;
+const shifted = arr.map(c => {
+    //配列の最初：0%-最後:100%になるように確率を変更していく
+    probability += 1 / arr.length;
+    //randomは0~1の乱数
+    if (Math.random() < probability) {
+        //配列の文字コードを1つ隣へずらす
+        return String.fromCodePoint(c.codePointAt(0) + 1)
+    } else {
+        return c
+    }
+});
+//ソートした配列を（区切り文字なしで）結合
+const shifted_str = shifted.join("");
+//ファイルに保存
+fs.writeFileSync("henshin_shifted_grad.txt", shifted_str);
+```
+
+{{< button href="text_unicode_shift_grad.js">}}text_unicode_shift_grad.js{{< /button >}}

content/docs/2023/mediaart-programming2/5/load_text.js

@@ -0,0 +1,9 @@
+//ファイル読み込みライブラリを使用
+const fs = require("fs");
+//ファイル名の指定（./はこのjsファイルと同階層にあることを明示）
+const src = "./henshin.txt";
+//ファイルを読み込み
+const bytes = fs.readFileSync(src);
+//バイト列から文字列に
+const txt = bytes.toString();
+console.log(txt);

content/docs/2023/mediaart-programming2/5/map2_txt_basic.js

@@ -0,0 +1,69 @@
+const fs = require("fs");
+//青空文庫から落としたファイルの場合、一度shift-jisからutf-8に変換すること。
+//例で使用したのはフランツ・カフカ「変身」
+//https://www.aozora.gr.jp/cards/001235/card49866.html
+const src = "henshin.txt";
+//ファイルをテキストデータとして読み込み
+const txt = fs.readFileSync(src).toString();
+
+//長いデータの中身を見てみたい場合は、頭の1000文字だけ取り出してコンソールに流すなどする
+// const summary = txt.slice(0,1000);
+// console.log(summary)
+
+// 主人公の名前だけを抜き出して空白に置き換える
+const no_gregor = txt.replace(/グレゴール/gm, "《    》");
+
+fs.writeFileSync("henshin_nogregor.txt", no_gregor);
+
+let only_gregor = "";
+let lines = txt.split(/\n/);
+
+//逆に、主人公の名前以外は全て◻︎で置き換えてみよう
+for (l of lines) {
+    const array = l.split("グレゴール");
+    if (array.length > 1) {
+        only_gregor += array.map((s) => "□".repeat(s.length)).join('グレゴール');
+    } else {
+        only_gregor += "□".repeat(array[0].length)
+    }
+    only_gregor += "\n"
+}
+fs.writeFileSync("henshin_onlygregor.txt", only_gregor);
+
+//会話だけを抜き出してみる
+let only_spoken_words = "";
+for (l of lines) {
+    // let matches=  l.match(/「(.*)」/g);
+    let matches = l.match(/「([^」]+)」/g);
+    if (matches != null) {
+        only_spoken_words += matches.join("\n") + "\n"
+    }
+}
+fs.writeFileSync("henshin_onlyspokenwords.txt", only_spoken_words);
+
+//会話の中で!で終わるものだけを抜き出してみる
+let excramation = "";
+for (l of lines) {
+    let matches = l.match(/(?!。|　|「)([^。　「]*?)！/g);
+    if (matches != null) {
+        excramation += matches.join("\n") + "\n"
+    }
+}
+
+fs.writeFileSync("henshin_excramation.txt", excramation);
+
+
+//テキストを文字の配列として扱い、後半に行くにつれて文字コードを確率的にずらしていく
+let nextunicode = "";
+let probability = 0.0;
+const tarray = Array.from(txt);
+for (const c of tarray) {
+    if (c.at(0) == "\n") {
+        nextunicode += "\n";
+    } else {
+        nextunicode += String.fromCodePoint(c.codePointAt(0) + Math.floor(Math.random() * probability * 6));
+    }
+    probability += 1 / tarray.length;
+}
+
+fs.writeFileSync("henshin_nextunicode.txt", nextunicode);

content/docs/2023/mediaart-programming2/5/text_as_array.js

@@ -0,0 +1,12 @@
+//ファイル読み込みライブラリを使用
+const fs = require("fs");
+//ファイル名の指定（./はこのjsファイルと同階層にあることを明示）
+const src = "./henshin.txt";
+//ファイルを読み込み
+const bytes = fs.readFileSync(src);
+//バイト列から文字列に
+const txt = bytes.toString();
+//配列として先頭から100文字コンソールに表示
+for (let i =0;i<100;i++) {
+    console.log(txt[i])
+}

content/docs/2023/mediaart-programming2/5/text_as_array2.js

@@ -0,0 +1,11 @@
+//ファイル読み込みライブラリを使用
+const fs = require("fs");
+//ファイル名の指定（./はこのjsファイルと同階層にあることを明示）
+const src = "./henshin.txt";
+//ファイルを読み込み
+const bytes = fs.readFileSync(src);
+//バイト列から文字列に
+const txt = bytes.toString();
+//文字の配列にする
+const arr = Array.from(txt);
+console.log(arr);

content/docs/2023/mediaart-programming2/5/text_reversed.js

@@ -0,0 +1,16 @@
+//ファイル読み込みライブラリを使用
+const fs = require("fs");
+//ファイル名の指定（./はこのjsファイルと同階層にあることを明示）
+const src = "./henshin.txt";
+//ファイルを読み込み
+const bytes = fs.readFileSync(src);
+//バイト列から文字列に
+const txt = bytes.toString();
+//文字の配列にする
+const arr = Array.from(txt);
+//配列を反転
+const reversed = arr.reverse();
+//反転した配列を（区切り文字なしで）結合
+const reversed_str = reversed.join("");
+//ファイルに保存
+fs.writeFileSync("henshin_reversed.txt",reversed_str);

content/docs/2023/mediaart-programming2/5/text_sort.js

@@ -0,0 +1,16 @@
+//ファイル読み込みライブラリを使用
+const fs = require("fs");
+//ファイル名の指定（./はこのjsファイルと同階層にあることを明示）
+const src = "./henshin.txt";
+//ファイルを読み込み
+const bytes = fs.readFileSync(src);
+//バイト列から文字列に
+const txt = bytes.toString();
+//文字の配列にする
+const arr = Array.from(txt);
+//配列を文字コード順でソート
+const sorted = arr.sort();
+//ソートした配列を（区切り文字なしで）結合
+const sorted_str = sorted.join("");
+//ファイルに保存
+fs.writeFileSync("henshin_sorted.txt",sorted_str);

content/docs/2023/mediaart-programming2/5/text_unicode_shift.js

@@ -0,0 +1,16 @@
+//ファイル読み込みライブラリを使用
+const fs = require("fs");
+//ファイル名の指定（./はこのjsファイルと同階層にあることを明示）
+const src = "./henshin.txt";
+//ファイルを読み込み
+const bytes = fs.readFileSync(src);
+//バイト列から文字列に
+const txt = bytes.toString();
+//文字の配列にする
+const arr = Array.from(txt);
+//配列の文字コードを1つ隣へずらす
+const shifted = arr.map( c => String.fromCodePoint(c.codePointAt(0)+1));
+//ソートした配列を（区切り文字なしで）結合
+const shifted_str = shifted.join("");
+//ファイルに保存
+fs.writeFileSync("henshin_shifted.txt",shifted_str);

content/docs/2023/mediaart-programming2/5/text_unicode_shift_grad.js

@@ -0,0 +1,28 @@
+//ファイル読み込みライブラリを使用
+const fs = require("fs");
+//ファイル名の指定（./はこのjsファイルと同階層にあることを明示）
+const src = "./henshin.txt";
+//ファイルを読み込み
+const bytes = fs.readFileSync(src);
+//バイト列から文字列に
+const txt = bytes.toString();
+//文字の配列にする
+const arr = Array.from(txt);
+
+//文字コードをずらす確率
+let probability = 0.0;
+const shifted = arr.map(c => {
+    //配列の最初：0%-最後:100%になるように確率を変更していく
+    probability += 1 / arr.length;
+    //randomは0~1の乱数
+    if (Math.random() < probability) {
+        //配列の文字コードを1つ隣へずらす
+        return String.fromCodePoint(c.codePointAt(0) + 1)
+    } else {
+        return c
+    }
+});
+//ソートした配列を（区切り文字なしで）結合
+const shifted_str = shifted.join("");
+//ファイルに保存
+fs.writeFileSync("henshin_shifted_grad.txt", shifted_str);

content/docs/2023/mediaart-programming2/_index.md

@@ -14,11 +14,11 @@ bookCollapseSection: true
 ## 授業概要
 
 本授業では、プログラミングを手段に用いるさまざまな実践を通して、テクノロジーを批評的視座で捉える表現のための基礎知識を身につけることを目指す。メディアアートと呼ばれることのある表現の中でも、映像や音楽をコンピューターで作るものではなく、プログラミングやコンピューターを使うことそれ自体が表現の問いやテーマであるものを中心に扱う。全15回の授業中で大きく次の3つのテーマを扱う。
+
 1. 詩とコンピューティング
 2. 再帰とプログラミング言語
 3. インターネットと公共財
 
-
 ## 到達目標・カリキュラム上の位置付け	
 
 本授業の到達目標は、履修者がプログラミングを中心とした実践を通して、コンピューターという情報機器の仕組みについてより高度に理解し、自らの制作の手段として導入できるようになることである。
@@ -29,20 +29,22 @@ bookCollapseSection: true
 
 内容は進行状況に応じて変更になる可能性があります。
 
+（大学公式のシラバスから一部更新されています）。
+
 1. （10/6）. オリエンテーション
-2. （10/13）. ターミナルを扱ってみる/10 Print
+2. （10/13） ターミナルを扱ってみる/10 Print
-3. （10/20）. テキストから作る音：Bytebeat
+3. （10/20） グリッチ入門：画像と音の相互変換
-4. （10/27）. グリッチ入門：画像と音の相互変換
+4. （10/27） テキストから作る音：Bytebeat
-5. （10/31 水曜振替）. コンピューターに詩を書かせる
+5. （10/31　火曜振替） 配列としてのテキストデータ
-6. （11/7）. 難解プログラミング言語と芸術
+6. （11/7）Node.jsでのライブラリ利用/単語レベルでのテキスト操作
-7. （11/14）. 二次元のプログラム(Befunge)
+7. （11/14）実行可能なテキスト：L-Systemとプログラミング言語1
-8. （11/24）. プログラミング言語自体を作る.1
+8. （11/24）実行可能なテキスト：L-Systemとプログラミング言語2/難解プログラミング言語と芸術
-9. （12/1） プログラミング言語自体を作る.2
+9. （12/1） インターネットと公共財1/HTMLとスクリーンショット詐欺
-10. （12/8）. インターネットと公共財.1 (HTMLとWeb)
+10. （12/8）インターネットと公共財2/スクレイピングによる表現
-11. （12/15）. インターネットと公共財.2 (スクレイピング)
+11. （12/15）インターネットと公共財3/スクレイピングによる表現2
-12. （12/22）. ゲスト講義
+12. （12/22）課題制作相談会
-13. （1/5）. 課題制作.1
+13. （1/5） 課題制作.1
-14. （1/12）. 課題製作.2
+14. （1/19）課題製作.2 (1/12は休講です)
 15. （1/26）.課題発表、講評、まとめ