#004 CSVファイルを用いた作品　

2020_0718~0722

こんにちは。センバクです。今日はCSVファイルをつかった作品を紹介します。

OpenProcessing: https://www.openprocessing.org/sketch/935720

CSVデータを使うのは初めてで、すこし手こずったので、備忘録も兼ねてコードと、説明を書いておきます。

●表からデータを縦1列取り出してつかう方法

これはどんな作品かというと、CSVファイルになっている表のデータから、いろんな単語を格納している一列分を取得して、それをランダムにふたつ表示し、「は」「です」をはさみ、へんてこな文章を作るものです。クリックするとリフレッシュして新たな文が生み出されます。

全体のコードはこんなふうになっています。

let table;
let tango = [];

function preload() {
	// CSVファイルをよみこむ-----------------------
	table = loadTable('zenkoku.csv', 'csv', 'header');
}

function setup() {
	createCanvas(600, 600);
	for (let i = 0; i < table.getRowCount(); i++) {
		// i行の3列めから値を得て変数に代入（０列からスタートなことに注意）
		tango[i] = table.getString(i, 3);
	}
}

function draw() {
	background("#f4f1de");//いいクリーム色
	bunmaker()
	noLoop();
}

function bunmaker() {
	translate(width/2,height/2);
	textSize(20);
	textAlign(CENTER, CENTER);

	//単語と単語を「は」とかでつなぎたい-----------------
	let bun = random(tango) + "は" + random(tango) + "です";
	text(bun, 0, 0);
}
function mousePressed() {
	redraw();
  }

function preload() でCSVファイルを読み込みます。

CSVファイルは、sketch.jsやindex.htmlと同じフォルダの中に放り込んでおけば大丈夫です。わかりやすい名前をつけておくといいと思います。ここで使ったデータが全国のこどもから集めた単語のデータだったので、’zenkoku.csv’という名前にしておきました。

function preload() {
	// CSVファイルをよみこむ-----------------------
	table = loadTable('zenkoku.csv', 'csv', 'header');
}

loadTable()でテーブル（表）データを取り込み、変数に代入します。変数名はここでは、table とかがわかりやすいと思います。

loadTable( ‘ファイル名’ , ‘ファイル形式’ , ‘ヘッダー’ ); です。

ヘッダーがある表の場合は、’header’とかきます。なければたぶん書かなくていいです。ヘッダーは、一行目の項目名みたいなやつです「日付」「名前」とか、そういうのが書いてるやつ…。それを取ってくるデータから除外してくれたりするようです。べんり。

(load table :reference https://p5js.org/reference/#/p5/loadTable)

そして、setup関数の中で、お好みの列のデータを取っていきましょう。

わたしは４列目のデータが欲しかった。列も行も、0スタートなので、４列目は0,1,2,3　３ですね。３！

行と列、わたしはいつも忘れるのですが、行が横、列が縦ですね。

	for (let i = 0; i < table.getRowCount(); i++) {
		// i行の3列めから値を得て変数に代入（０列からスタートなことに注意）
		tango[i] = table.getString(i, 3);
	}

とってきたいデータが文字列なので、.getString()でデータを取得しています。この()の中で、取ってくる（行,列)を指定します。

forループで、テーブルを1行ずつ、1行目の3列目、２行目の３列目、３行目の３列目…と、インクリメントながら最後の行まで、取っていきます。取ってくるデータが複数個なので、tangoという変数の中に、配列として入れています。単語が入っている列だったので、こういう変数名にしましたが、わかりやすい好きな名前をつけてあげてください。

あとはもう 変数tangoくんは４列目のデータなので、random(tango)で４列目に書かれていた単語たちをランダムで表示できるようになります！わーい。

	//単語と単語を「は」とかでつなぎたい-----------------
	let bun = random(tango) + "は" + random(tango) + "です";
	text(bun, 0, 0);

変数内の単語と、「は」「です」などの文字列つないで表示するにはどうしたらいいんだろう？と思いましたが、上のように足し算した変数をつくり、それをtext()につっこむことで解決しました。text()内でやってもいいんかもな。

<参考>　p5.jsのレファレンス、『processingを始めよう』Casey Reas、Ben Fry著、船田 巧訳 、こちらのブログ(https://himco.jp/2019/02/28/11_1%EF%BC%9A%E8%A1%A8%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB-p5-js-javascript/)を参考にさせていただきました。

———————————————————————————————————–

このコード、当初は「原稿用紙にランダムな文章を表示する」というものを作ろうとしたものでした。ひらがなをランダムに表示するのはできたのですが、思った以上に文章味が出ない。

だったら単語の塊をどこかのデータから取ってきて、ところどころ意味が通るようにしたらどうだろう…？と、CSVデータの読み込みを思いつきました。先日機械学習の学習サイト？kaggleを教えてもらい、titanicチャレンジをしてみたので、データをcreativeCodingで使ってみたかったというのもあります。

読み込めた単語データを原稿用紙に表示させるには、もうひと頑張り必要そうでめげそうな予感がするので、とりあえずこのデータで遊んでみたいと考え、今回のコードに至りました。

できた文章生成機をみせたところこどもに大好評。なんども実行しては笑い転げていました。うれしい。

他にもバリエーションを作りました。日本語単語、絵にするのむずかしい！

つくる過程で調べたこともメモしておきます。

●日本語を縦書きにしたい。

text(‘あいうえお’,x,y,w,h);でw*hのテキストボックスの中に文字を収めてくれるようなのですが、日本語だとうまくできず、苦労しました。

こちらの方の記事を読んで、縦書きできるようになりました。

https://qiita.com/motokiohkubo/items/c5fa4a1cda402b86f5d4

var wCount = 10;　

を　= 1; にすると一文字ずつ改行できます！ただ、「ー」横棒は縦にならないので、うーん、どうしようかなあ、というところです。

●文字数をカウントしたい。

.lengthで文字の数をカウントできる。文字数*フォントサイズで文字の長さがわかる!

●CSVファイル、権利を要確認！

ネット上にいろいろなデータ、公開されていますが、使用したいときはちゃんと権利を確認しましょう…！