はじめてのZine作成 Konva.jsについて書いてみた

はじめに

こんにちは、及川です。前回のアンさんのブログ記事に引き続き、Zine作成についての記事になります。
前回のブログ記事は以下です。 blog.lab.sugimototatsuo.com
ネットワークデザインスタジオの大学院生3名で制作した「カラフルなJavascriptであそぼう p5.js | Konva.js | NestJSのノウハウブック」は以下から詳細を見ることができます。

techbookfest.org

私は、「PART 2　Konva.jsを使った写真デコサイトのつくり⽅」を担当しました。今回は、なぜKonva.jsをハンズオン形式で紹介することにしたのか、また、Zine執筆を振り返って学んだことをまとめたいと思います。

なぜKonva.jsをハンズオン形式で紹介することにしたのか

今回のZine「カラフルなJavascriptであそぼう p5.js | Konva.js | NestJSのノウハウブック」は、3つあるPARTの内容がバラバラです。これはアンさんのブログ記事でも触れられていますが、3人の興味関心にはあまり共通点がなかったためです。そんな中見つけた共通点が「JavaScript」でした。そこで、JavaScriptのライブラリに関するZineを作成することが決まりました。
私は、大学の授業内でJavaScriptを使用したことをきっかけに、オンライン教材や独学で学んできました。最近はもっぱら、JavaScriptの上位互換と言われているTypeScriptを使ってReactやNext.jsを中心に学んでいますが、今回は初心に戻ってJavaScriptを利用した「何か」をテーマに執筆することになりました。

今回私が選んだライブラリ、Konva.jsは、HTML5 2D キャンバスのためのライブラリです。また次のブログで紹介できたらと思いますが、大学学部4年次の卒業制作で大活躍したのがKonva.jsでした。卒業制作を作る際に、Konva.jsのデモ・チュートリアルの豊富さに驚きました。一方で、それぞれのチュートリアルは繋がりがなく、ハンズオン形式で慣れていくタイプの私にはなかなかとっつきづらいとも感じました（Reactなどのチュートリアルがハンズオン形式と認識しています）。もちろん、一長一短あると思うのですが、ハンズオン形式を好む方々にもぜひKonva.jsを気軽に使っていただきたいな、と思い今回の内容ができあがりました。私と同じようにハンズオン形式が好きでKonva.jsに少しでも興味がある方に読んでいただけたら嬉しく思います。

Zine執筆を振り返って

デザイン・コードが固まってからZineを執筆したほうがよいと学んだ
今回のZine執筆では、機能の洗い出し、Figmaでのデザイン作成を行なった後に、コードを書いて、Zineを書いて、コードを書いて、Zineを書いて…というような進め方をしました。理由としては、コードが完成し切ってからZineを執筆すると漏れが出てきそうだと思ったから、また、コード書いている時にふと感じたポイントなどをそのまま原稿に落とし込むことができるのではないかと考えたからです。しかし、1/3程度の執筆を行なったところで、「あれ、もっとコードをこう書いたほうがよかったかな…」「あ、ここ間違えている」「ここのコード、うまく動いてないぞ…？」など、原稿の修正が必要になりました。その時に「やっぱり一度コードを完成させてから、原稿を執筆したほうがよかったかな」と反省しました。
技術書を書くというのは、こんなに大変で工程が多く労力がかかるものなのかと、いつも読ませていただいている技術書の執筆者の方への感謝の思いがいっそう強くなりました。

他者にもわかりやすいコードを再度強く意識した
私は現在、エンジニアとして長期インターンシップに参加させていただいているため、一人でコードを書いていたときよりは「他者にもわかりやすいコード」を意識しているつもりでした。しかし、今回「人に見られる」ことを強く意識してコードを書き進めていると、何度も「あれ、ここでいいんだっけ」「ここだとまとまりがないかな」などと手が止まることがありました。そういった意味では、なかなかチーム開発を行う機会のない学生は、ブログやZineなどで「人に見られる」ことを意識しながらコードを書くことはとても勉強になるのではないかと思いました。

おわりに

初めてのZine作成は、正直計画的とは言えずバタバタしてしまいましたが、無事に完成させることができてホッとしています。
拙い部分も多いかと思いますが、是非読んでいただけたら嬉しいです。

2023-05-20

はじめてのZineでクリエイティブコーティングのコード解説に挑戦

はじめに

　こんにちは。アンです。最近研究室の大学院生の3人で『カラフルなJavaScriptであそぼう　p5.js / Konva.js / NestJSのノウハウブック』というテック・ジンを頑張って書きました。私たち3人ではじめて書いたZineなので、色々な困難がありましたが、無事に完成しました。自分が担当した部分は、「PART 1　p5.jsでジェネラティブアート表現を高めるコツ」です。また、表紙・各パートの扉のデザインも担当しました。今回のブログで、担当した部分の内容をちょっと触って、工夫したところなどを紹介します。

担当したZineの内容について

　今回のZineのタイトルを見ると、「なぜこんなかたちの本になったのか」という疑問が出るかもしれません。その理由と担当した内容をちょっと紹介します。

　計画の段階で話し合ったとき、研究の分野がそれぞれ違う3人の共通点を考えました。その共通点はJavaScriptです。3人それぞれ独自の研究やプログラミング経験のなか、全員がJavaScriptのライブラリを使ったことがあります。そこで、p5.js・Konva.js・NestJSについてそれぞれ書くことにしました。

　自分は2021年10月から、p5.jsを使って毎日書いた作品のコードをオープンに提供するプラットフォームのOpenProcessingで公開しています。今まで600以上の作品を作りました。p5.jsでジェネラティブアート表現について、ある程度の経験を持っています。p5.jsについての入門書はたくさんありますが、今回のZineでは個人的なクセというか、個人的によく使っているコツを紹介したかったです。そのため、「p5.jsでジェネラティブアート表現を高めるコツ」というタイトルで、シャドー・グラデーション・フィルターの3つのコツといくつかの実例を紹介しました。詳しい内容はZineをご覧ください。

　工夫したのは、コードの解説の部分だと思います。自分の作品のコードは基本的にOpenProcessingで公開しています。しかし、コードの詳しい解説は初めてなので、うまくできないところもありました。どうやって説明したら読者のみなさんに理解してもらえるかを考慮しながら、コードの解説文を書きました。1年前の作品の紹介もあるので、古いコードの意味はときどき自分でもよく分からなかったです。しかし、過去のコードをもう1回見て解説するチャンスはあまりないので、今回のZine作りのおかげでもう1回過去の自作を触れることができて良かったです。

表紙のデザイン

　表紙デザインの背景は過去の作品の「Sheet music」です。この作品を選んで使った理由は2つあります。1つは、作品自体がカラフルなことです。Zineのタイトルにある「カラフル」のキーワードに似合うと思いました。もう1つは、シンプルなことです。直線・破線と柔らかなグラデーションを組んで背景としてタイトルを邪魔しないと思いました。また、デザインするとき、3人が書いたコードも背景に配置しました。統一感を出すため、各パートの扉のデザインに表紙のタイトルに使った黄・赤・青の3色を使いました。

さいごに

　書いたZineについてを少し話しました。p5.jsでジェネラティブアート表現とKonva.js・NestJSに興味ある方、ぜひZineを読んでみてください。

2023-02-08

博士前期課程 1年前期を振り返ってみた

はじめに

こんにちは。ネットワークデザインスタジオM1の及川です。

先週の月曜日、M1後期最後の授業が終わり、春休みに突入しました。

博士前期課程の半分が終わったということで、この1年間を振り返ってみようと思います。

今回は、前期に焦点を当てて振り返りをします。

前期は、講義6コマ＋ゼミ1コマという形でした。

その中でも、インダストリアルアート学域色の強い授業3つを紹介します。

Advanced course of spatial design

1つめは、Advanced course of spatial designです。

この授業では、5名程度のグループに分かれ、ストリートファニチャーのデザイン・制作を行う授業でした。

ストリートファニチャーとは、公共施設に設置された全てのものを指します。この授業は、東京都立大学日野キャンパス4号館の吹き抜けに、人が集まるような家具を設置しよう、という内容でした。

私たちのグループの制作手順は、以下の通りです。

1. アイデア出し(miro / Zoom)

2. プロトタイプの制作(紙)

3. イメージ画像の作成(Illustraterなど)

4. 図面の制作(AutoCAD)

5. 素材集め

6. 制作(木工室 / Fusion360)

制作では、SHOPBOTやレーザーカッター、パネルソーなどを使用して木材をカットします。これらの機械が設置されている木工室は、申請をすることで学生が自由に利用できます。

学部の授業では、図面やスケッチ、模型に落とし込むことはあっても、実寸大での制作はありませんでした。

今回の授業を通して、制作の大変さ・楽しさ・安全性に対する認識などを学ぶことが出来ました。

視覚伝達特論

2つめの授業は、視覚伝達特論です。

この授業は、前期と後期を通して行われました。3-4名のグループ課題です。

内容は、渋谷駅前エリアマネジメント様の協力の元、渋谷スクランブルスクエアに投影する15秒の映像制作です。

こちらの授業は、SHIBUYA ＋FUN PROJECTのひとつとして行われ、渋谷の魅力を広めるためのものです。

私たちのグループの制作手順は、以下の通りです。

1. 現地調査

2. アイデア出し

3. 現地調査

4. 絵コンテの作成(Illustrater)

5. 撮影(PremierePro)

6. アニメーションの制作(AfterEffect)

制作では、先生からのフィードバックをいただき、グループ内で話し合いを重ねながらブラッシュアップをしていきました。

実は、後期にグループメンバーの1人が留学をしながらのオンライン参加だったため、話し合いが難しい場面もありました。

オンライン上で話すよりも対面で話した方がスムーズに進みやすいことが多いと感じます。

インダストリアルアート特論Z

3つめの授業は、インダストリアルアート特論Zです。

こちらの授業は、インダストリアルアート学域の先生方がオムニバス形式で講義をしてくださりました。

テーマは論文の書き方です。

2週ずつで先生が交代し、それぞれの視点から講義してくださいます。

課題の例としては、椅子のスケッチ、観察を行い、要素を分解してリ・デザインするというものや、自分の研究テーマについて、雛形を用いた説明をするというものがありました。

学部4年次に論文を書いたものの、書き方はあっているのだろうか、という思いが強かったため、この授業を通してなんとなく掴めた気がします。

ただ、2週ずつという短いスパンだったため、今後いただいたヒントを元に書き方を学んでいきたいと考えています。

おわりに

全体を通して、グループでの制作課題が多い期だったと感じます。学部時代よりも1歩踏み込んだ、実寸大での制作や外部の方と連携した制作など、貴重な体験ができました。

次回は、後期について振り返ろうと思います。

2023-01-16

脳波のミニ実験で分かったこと

はじめに
簡易脳波計と脳波データ
さいごに
参考資料

はじめに

　こんにちは、アンです。2022年10月、簡易脳波計を用いてミニ実験を2回行いました。この実験で分かったことを紹介します。

図1：Pulse Wave - Samuel YAN, 2022(脳波データのcsvファイル使用)

簡易脳波計と脳波データ

　今回使用した簡易脳波計はFocus Calmです。脳波データの取得に使ったアプリはGoodBrainです。Focus Calmを使ってGoodBrainのアプリからalpha、beta、delta、theta、gammaの５種の脳波データのcsvファイル（図2）が得られます。

実験１

概要

　ノイズが人間の脳に与える影響を分析するため、簡易脳波計を使って、三つのシーンで、５分間ずつ自分の脳波を測りました。

実験日

　2022.10.13 （5pm）

実験時間

　15 min（5 min * ３つのシーン）

騒音の音源

　無料で使用可、ダウンロード可（図3）の音源データを使用しました。[1]

音源の加工

　3つの音のファイルからそれぞれ1分間を切り取ってつなぎ、前後に各１分間の空白を加えて5分間のテスト音源ファイルを制作しました。

実験内容

　下記のそれぞれの場合に、加工した騒音の音源を流し、実験を行います。

ミュージックビデオを見るとき
本、文章を読むとき
集中したい作業（コーディング）のとき

実験結果

　図１のような計測した生データに基づいて、Excelを使って下記の図4、図5、図6を制作しました。

データ分析

動画を見るとき、本を読むときの場合、騒音と静音の変化の間に脳波のデータに激しい変化（図4と図5のなかのオレンジ色の部分）がありました。作業するときの場合は、そのような変化がないです。
リラックスできるとき（図4）より、脳が働くとき（図5と図6）脳波の信号が強い（特に図6のなかでのgamma波とbeta波）です。

問題点

　実験の時間が短いので、データを見るだけでは、騒音環境と静音環境が区別されないです。

実験２

概要

　実験１の問題点を解決ため、実験２で、静音、音楽、騒音の３つの音環境と、３つのシーン、それぞれの場合を組み合わせて、9回の５分間の自分の脳波を計測しました。

実験日

　2022.10.23

実験時間

　45 min（5 min * ３つの音環境 * ３つのシーン）

騒音の音源

　実験１と同じ

音環境の設定

音環境１：静音（通常）
音環境２：音楽
音環境３：騒音

実験内容

　３つの音環境で下記のそれぞれの場合で、実験を行います。

集中したい作業（コーディング）のとき
本、文章を読むとき
ゲームをするとき

実験結果

　計測した生データに基づいて、Excelを使って下記の図7のなかにある9個の折れ線グラフと図8の集中力についてのグラフを制作しました。

データ分析

図7を見ると、作業とゲームの場合より読書のときに、音楽、騒音の環境で脳にあきらかな影響があります。
図7を見ると、読書の場合より作業とゲームのときに、脳のgamma波とbeta波の信号が強いです。
図8を見ると、読書とゲームをするとき、静音環境と比べて、音楽環境と騒音環境での集中力が低下しています。

実験１と実験２を総合的に分析した結果

作業などの集中しやすいときに比べ、リラックスできるときの場合で、騒音の音環境で脳波の変化が簡易脳波計で計測されやすいです。
この分析結果だけでは、ノイズと人間の感情の関係は曖昧で判明できないです。

さいごに

　 2回のミニ実験で計測したデータを分析した結果を紹介しました。自分の脳を使って測ったデータを簡単に分析したので、厳密な結果ではありませんが、ノイズが人間に与えた影響が脳波計で計測できました。これから、簡易脳波計を用いて、ノイズと人間の関係の考察や実験を引き続き行います。

参考資料

[1] 実験に使った音源：

音源01：https://vsq.co.jp/plus/sound/category_sub/city/page/2/
音源02：https://vsq.co.jp/plus/sound/category_sub/city/page/3/
音源03：https://vsq.co.jp/plus/sound/category_sub/city/page/2/

2022-12-13

OpenCVで画像にモザイクかけてみた

はじめに

こんにちは，光岡です．

久しぶりの投稿になってしまいました．最近はレコメンドシステムの勉強をやっている関係でPythonに触れています．講義の課題に対して，Pythonで何か作れないかな~と思っていたところ，OpenCVが使えそう！となり，簡単なモザイク処理を試してみたので，この内容について書いてみたいと思います！

OpenCVとは

OpenCVとは，画像・動画に関する処理機能をまとめたオープンソースのライブラリになります． Intelが開発したOSSで，画像・動画の中に存在する物体の位置情報・パターン・動きをプログラムで識別することが可能です．

モザイクのかけ方

モザイクをかける手順としては，まずモザイク処理をしたい領域を一度小さいサイズに縮小します．今回は画像全体に対してモザイクをかけたかったので，画像全体を縮小します．縮小する際は，cv2.resize()を利用しました．
縮小する際には，最近傍補間が行われます．不要な画素を削る間引き処理を行うことで，見た目が粗い状態になります．

次に縮小した画像を元のサイズに拡大することで，モザイクがかかった粗い状態で出力することができます．拡大する際にもcv2.resize()を利用します．

実装

今回の実装では，O-DANで検索して見つけた画像をダウンロードして利用しました．

import cv2

def mosaic(img, ratio=0.1):
  h, w = img.shape[:2]
  reduced_img = cv2.resize(
    img,
    dsize=None,
    fx=ratio,
    fy=ratio,
    interpolation=cv2.INTER_NEAREST,
  )
  enlarged_img = cv2.resize(
    reduced_img,
    dsize=(w, h),
    interpolation=cv2.INTER_NEAREST,
  )
  return enlarged_img

img = cv2.imread('./shibuya.jpg')

ratio = float(input())
mosaic_img = mosaic(img, ratio=ratio)
cv2.imwrite("./shibuya_{}.jpg".format(ratio), mosaic_img)

結果

モザイク度合いを標準入力できるようにし，いくつかモザイク処理を施した画像を出力してみました．

元画像
0.01
0.005
0.001

まとめ

ライブラリを使うことで簡単に実装することができました！現状，講義の課題で少し使うぐらいしか予定がありませんが，今後機械学習の勉強を進めていく際にOpenCVも使っていきたいと思いました．
以上になります．最後まで読んでいただきありがとうございました．

参考記事

【OpenCV】できることや特徴をわかりやすく解説 | 侍エンジニアブログ

OpenCV - 画像にモザイク処理を行う方法について - pystyle

C言語で画像の拡大縮小（最近傍補間編） | だえうホームページ

画像の拡大縮小・リサイズの原理、アルゴリズムによる違いを解説！ | だえうホームページ

Python, OpenCVで画像にモザイク処理（全面、一部、顔など） | note.nkmk.me

2022-10-20

「質問力を鍛える」ことを決意しました-02

はじめに

こんにちは。ネットワークデザインスタジオM1の及川です。
今回は、前回( 「質問力を鍛える」ことを決意しました - ネットワークデザインスタジオのブログ )に引き続き、「質問力」に関して書こうと思います。

本を読んでみて

前回紹介した、ひきたよしあき『博報堂クリエイティブプロデューサーが明かす「質問力」って、じつは仕事を有利に進める最強のスキルなんです。』(大和出版)を読み終えました。
本自体の感想としては、会話ベースで書かれているため、大変読み進めやすかったです。
内容に関して印象に残っていることは、深い答えを引き出すためには、「現状」「理想」「そのギャップを埋めるためには」の順で質問を立てるということです。
この順番で質問することで、相手も答えやすい状況を作り出すことができ、通常よりも深い質問を掘り出せるそうです。
実際に、近頃受けた面接にて、「現在のスキル」「理想のエンジニア像」「そのために必要なステップ」という順番で質問をされました。
この順番で質問に答えることで、自分の頭の中が整理されることを実感しました。
今回は自分が質問される側でしたが、今後は、自分が質問する際や自分自身に対して3つの質問を順番に立てることを意識しようと思います。

質問をする機会が増えて

最近は、就職活動が活発になり、面接・面談を受ける機会が多々ありました。
質問をする機会が増えていくに伴って、自分の中でいくつかの発見がありました。
その中でも強く感じるのが、相手の体験を引き出すように質問をすることが大切であるということです。
例えば、「御社の強みはなんですか。」ではなく、「○○さんが入社前に考えていた御社の強みと、入社後に感じる強みにはギャップがありますか。」と質問をするようにしています。
前者の質問方法で聞ける「強み」は、その企業が掲げている一般的な強みであることが多いと気づきました。また、個人的な考えですが、「またこの質問か…」と思われていると感じます。一方後者の質問方法だと、その人ならではのエピソードを聞き出すことができると感じています。
例えば、「入社前は◯◯だと思っていたんだけど、入ってみると実際そんなことはなくて〜。例えば〜〜みたいなことがあったんだよね。」と実体験を伺えることが多く、より質問に対する答えを引き出すことができると感じます。

おわりに

この1ヶ月間で、少しは「質問力」が身についたのではないかと思います。
今後は、ここで学んだことを内省にもいかし、研究や自身の成長にもつなげていけるよう意識したいと思います。
今後も「質問力」を鍛えられるよう努力します！

参考文献

daiwashuppan.com

2022-09-19

csvファイルを読み込んだLED点滅回路の開発

-ArduinoとProcessingを連携させて脳波データのcsvファイルを読み込む-

はじめに

　こんにちは、アンです。

　今年から、簡易脳波計による脳波のデータを用いた、ジェネラティブアートやインタラクティブアートについての表現を研究しています。最近、新しい簡易脳波計が研究室に届きました。10分ほど自分の脳波を測り、データのcsvファイルを手に入れました。ArduinoとProcessingを連携させて、脳波データのcsvファイルを読み込んだLED点滅回路を作ってみました。今回は、その回路の作り方を紹介します。

簡易脳波計と脳波データ

　今回使用した簡易脳波計はFocus Calmです。脳波データをやり取りするときに使用したアプリはGoodBrainです。Focus Calm を使うことで、GoodBrainのアプリからalpha、beta、delta、theta、gammaの５種の脳波データのcsvファイル（図１）を取り込めます。今回は、研究室にて英語の文献を読んだ時に10分ほど計測した、alpha波のデータを使用します。

Arduino上のLED点滅

　これまで、電子工作の経験がなかったため、ゼロからArduinoについての知識を勉強しました。基本的な物理学の知識とプログラミングの経験があったため、Arduinoの入門や基本的な操作方法はそれほど難しくありませんでした。

回路のデザインと部品のつなぎ

　今回の回路は、Arduino IDE 2.0.0のソフトウェアにある内蔵のスケッチ例のBlinkとInputPullupSerialをもとにデザインしました。下の表のなかの部品を図２のように繋ぎます。

部品名	数量
ARDUINO UNO	1
ブレットボード	1
LED (5mm)	4
抵抗 (200R)	4
タクトスイッチ	1
USBケーブル	1
ジャンパーワイヤー	13

プログラミング

　下のように書きました。

boolean pushButton;
void setup() {
  pinMode(2, INPUT_PULLUP);
  pinMode(8, OUTPUT); // green
  pinMode(9, OUTPUT); // yellow
  pinMode(10, OUTPUT); // red
  pinMode(12, OUTPUT); // white
}
void loop() {
  int  myLightNow;
  if (!pushButton ) {
    myLightNow = int(random(0, 5));
  } else {
    myLightNow = 0;
  }
  switch (myLightNow) {
    case 1: // white
      digitalWrite(12, HIGH);
      delay(100);
      digitalWrite(10, LOW);
      digitalWrite(9, LOW);
      digitalWrite(8, LOW);
      break;
    case 2: // red
      digitalWrite(12, LOW);
      digitalWrite(10, HIGH);
      delay(100);
      digitalWrite(9, LOW);
      digitalWrite(8, LOW);
      break;
    case 3: // yellow
      digitalWrite(12, LOW);
      digitalWrite(10, LOW);
      digitalWrite(9, HIGH);
      delay(100);
      digitalWrite(8, LOW);
      break;
    case 4: // green
      digitalWrite(12, LOW);
      digitalWrite(10, LOW);
      digitalWrite(9, LOW);
      digitalWrite(8, HIGH);
      delay(100);
      break;
    default:
      digitalWrite(12, LOW);
      digitalWrite(10, LOW);
      digitalWrite(9, LOW);
      digitalWrite(8, LOW);
      break;
  }
}

デモ動画

　USBケーブルを使ってPCと繋げます。プログラミングをマイコンボードに書き込んだら、タクトスイッチを押しながら、4つのLEDをランダムで点滅させます。

csvファイルを読み込む方法

　次に、脳波データのcsvファイルを上記にあるランダムのデータと入れ替える方法を紹介します。調べてみたところ、直接にArduinoでcsvファイルを読み込むのは難しいと感じました。そのため、他のツールを探しました。今回使っていたのはProcessingです。主にProcessingにおけるTableを使います。

　次のようにProcessingでコードをを書くことで、csvファイルのデータを読み込めます。

Table a;
int[] lightIndex;
int data_Row;
int count;
void setup() {
  size(300, 300);
  a = loadTable("name.csv", "header");
  data_Row = a.getRowCount();
  lightIndex = new int[data_Row];
  count = 0;
  for (int i = data_Row - 1; i >= 0; i--) {
    lightIndex[i] = a.getFloat(i,0);
  }
}

（具体的な説明は参考資料[1]をご覧ください）

　そして、ProcessingのライブラリーのSerialを用いることで、Processingに読み込んだデータをArduinoに読み込めます。下にあるのはコードの例です。

import processing.serial.*;
Serial port;
Table a;
int[] lightIndex;
int data_Row;
int count;
void setup() {
  size(300, 300);
  port = new Serial(this, "/dev/cu.usbmodem14101", 9600);
  a = loadTable("BrainWaveData_0912_01_Samuel.csv", "header");
  data_Row = a.getRowCount();
  lightIndex = new int[data_Row];
  count = 0;
  for (int i = data_Row - 1; i >= 0; i--) {
    lightIndex[i] = int( a.getInt(i,0))/2;
 }
}
void draw() {
  if (count < data_Row) {
    port.write(lightIndex[count]);
    count ++;
  }
}

（具体的な説明は参考資料[2]をご覧ください）

Arduinoのコード

　Arduino側にもSerialを使ってprocessingからのデータを読み込めます。

boolean pushButton;
void setup() {
  Serial.begin(9600);
  pinMode(2, INPUT_PULLUP);
  pinMode(8, OUTPUT); // green
  pinMode(9, OUTPUT); // yellow
  pinMode(10, OUTPUT); // red
  pinMode(12, OUTPUT); // white
}
void loop() {
  int  myLightNow;
  if (Serial.available() > 0) {
    char data = Serial.read(); // データを読み込む
    if (!pushButton ) {
      myLightNow = int(data);
    } else {
      myLightNow = 0;
    }
    switch (myLightNow) {
      case 1: // white
        digitalWrite(12, HIGH);
        delay(100);
        digitalWrite(10, LOW);
        digitalWrite(9, LOW);
        digitalWrite(8, LOW);
        break;
      case 2: // red
        digitalWrite(12, LOW);
        digitalWrite(10, HIGH);
        delay(100);
        digitalWrite(9, LOW);
        digitalWrite(8, LOW);
        break;
      case 3: // yellow
        digitalWrite(12, LOW);
        digitalWrite(10, LOW);
        digitalWrite(9, HIGH);
        delay(100);
        digitalWrite(8, LOW);
        break;
      case 4: // green
        digitalWrite(12, LOW);
        digitalWrite(10, LOW);
        digitalWrite(9, LOW);
        digitalWrite(8, HIGH);
        delay(100);
        break;
      default:
        digitalWrite(12, LOW);
        digitalWrite(10, LOW);
        digitalWrite(9, LOW);
        digitalWrite(8, LOW);
        break;
    }
  }
}

デモ動画

　動画のように脳波データのcsvファイルを使ってLED点滅をさせました。

さいごに

　今回、脳波データのcsvファイルを使用したLED点滅回路の開発を簡潔に紹介しました。「電子工作」、「IoT」、「Arduino」の魅力を感じました。これからも、ジェネラティブアートやインタラクティブアートの表現についての機能などを開発し続けたいと思います。

参考資料

[1] Processingでcsvファイルを読み込む方法（https://okasho-engineer.com/processing-csv-load/）
[2]ArduinoとProcessingを連携させてシリアルデータをやり取りする（https://l-w-i.net/t/arduino/processing_001.txt）
[3]初心者でもわかる・できる！Arduinoを使った初めての電子工作実践（https://html5experts.jp/youtoy/12029/）

目次

はじめに

なぜKonva.jsをハンズオン形式で紹介することにしたのか

Zine執筆を振り返って

おわりに

目次

はじめに

担当したZineの内容について

表紙のデザイン

さいごに

はじめに

Advanced course of spatial design

視覚伝達特論

インダストリアルアート特論Z

おわりに

はじめに

簡易脳波計と脳波データ

実験１

概要

実験日

実験時間

騒音の音源

音源の加工

実験内容

実験結果

データ分析

問題点

実験２

概要

実験日

実験時間

騒音の音源

音環境の設定

実験内容

実験結果

データ分析

実験１と実験２を総合的に分析した結果

さいごに

参考資料

はじめに

OpenCVとは

モザイクのかけ方

実装

結果

まとめ

参考記事

はじめに

本を読んでみて

質問をする機会が増えて

おわりに

参考文献

目次

はじめに

簡易脳波計と脳波データ

Arduino上のLED点滅

回路のデザインと部品のつなぎ

プログラミング

デモ動画

csvファイルを読み込む方法

Arduinoのコード

デモ動画

さいごに

参考資料