https://ws.tetsuakibaba.jp/ 2026-04-15T14:03:37+00:00 https://ws.tetsuakibaba.jp/ https://ws.tetsuakibaba.jp/lib/tpl/bootstrap3/images/favicon.ico text/html 2021-02-28T11:14:17+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:processing%E7%B7%A8:00.%E5%89%8D%E6%9B%B8%E3%81%8D&rev=1614478457&do=diff Design With Prototyping Design With Prototypingは未完成教材です． デザインや作品作りに必要なプロトタイピング能力とはどのようなもので，何を学習すればよいのか． その問に対して，プログラミングの観点から一つの教材を作ってみることにしました．私の大好きなdesign_with_prototyping index text/html 2021-02-27T17:55:59+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:processing%E7%B7%A8:01.%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83&rev=1614416159&do=diff 開発環境 この教材ではProcessing（プロセッシング）という開発環境を利用していきますので，教材受講にあたり，予めProcessingのインストールをお願いいたします． 下記ページがProcessingウェブサイトのダウンロードページになります．この記事執筆時点で最新版は3.5.4になっていますので，こちらをそれぞれのOS環境に合わせてダウンロードしてください．Windowsでは64bitから32bitの選択がありますのが，普通のPCを使っている人は64bitになります．正確にこれを確かめる場合はwindowsメニュー→「設定」→「バージョン情報」の手順で確認することができます．（ 詳細は… text/html 2021-02-27T17:54:55+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:processing%E7%B7%A8:02.%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E6%93%8D%E4%BD%9C&rev=1614416095&do=diff 基本的な操作 Processingを利用するにあたって，まずは以下の動画を参照して一通りの使い方を見てください． <div style="position: relative; padding-bottom: 69.85769728331177%; height: 0;"><iframe src="https://www.loom.com/embed/ff3c331d9986459584ae4a2ed73150e4" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div> ショートカット一覧 ショートカットは覚えて於けば便利なものである一方で、覚えなくてもよいものではありません。積極的に活用してください。この講座では 少なくとも次のショートカットは覚えておきます。最初は面倒に感じるかもしれませんが、慣れてしまえばこ… text/html 2021-02-27T17:55:26+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:processing%E7%B7%A8:10.%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E3%82%AD%E3%83%A5%E3%83%93%E3%82%BA%E3%83%A0&rev=1614416126&do=diff Cubisme（キュビズム） "キュビスム（仏: Cubisme; 英: Cubism「キュビズム、キュービズム」、立体派）は、20世紀初頭にパブロ・ピカソとジョルジュ・ブラックによって創始され、多くの追随者を生んだ現代美術の大きな動向である。それまでの具象絵画が一つの視点に基づいて描かれていたのに対し、いろいろな角度から見た物の形を一つの画面に収め、ルネサンス以来の一点透視図法を否定した。 <a data-flickr-embed="true" data-footer="true" href="https://www.flickr.com/photos/repolco/14374329668/in/photolist-nrsDnA-e1gbNK-e1mRAN-fDGg7x-8N2UxE-aFGyFt-3KaJnR-5mKJDn-5mPZ9S-XDHhMo-aFGyUi-67882r-ixgxhR-HKgo7Q-e1gbDi-nUdcq9-i4o28j-8SBhDW-catGMN-8N2V59-7kRzqn-CDUMzu-amwcm-rcP1v-7nXbVb-8RCqmp-rJ… text/html 2021-02-27T17:55:46+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:processing%E7%B7%A8:11.%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB%E5%86%8D%E6%A7%8B%E6%88%90&rev=1614416146&do=diff ピクセルの再構成 Georges Seurat [Public domain], <a href="https://commons.wikimedia.org/wiki/File:A_Sunday_on_La_Grande_Jatte,_Georges_Seurat,_1884.jpg">via Wikimedia Commons</a> コンピュータにおいて画像の表示は，細かな点を密集させ表示させることで精密な描画を実現しています．このような手法は絵画では点描画と呼ばれ19世紀後半のスーラによるものが有名です．上記画像はGeorges Seuratの代表作である A Sunday on La Grande Jatteです．画像をクリックして拡大してその描画の細かさをよく見てみましょう．一点一点細かな点で描かれているのが確認できます．コンピュータの画像はドットの集まりであることは当然のこととして考えてしまいがちですが，人間の感覚からすると，目の前のものを点で描くということはストロークで線を描くことと比較すると大きく異るものです．… text/html 2021-02-27T17:55:56+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:processing%E7%B7%A8:12.%E5%8B%95%E7%94%BB%E3%81%AE%E5%86%8D%E6%A7%8B%E6%88%90&rev=1614416156&do=diff 動画像の再構成（ピクセルの応用） では次に動画ピクセルを再構成する方法を考えてみましょう．まずは動画ファイルを読み込んで，再生する だけのプログラムを書いてみます．下記の動画をサンプルとして保存してください．ダウンロードしたファイルはdataフォルダに置くことを忘れないようにして下さい．また，Processingのメニューに ある「Sketch」→「Import Library..」からvideoのライブラリを追加することで，import processing.video.*;を自動で プログラムの頭に追加できます．下記にサンプルビデオを置いておきますので、適時利用してください。なお女性の動画は <div style="position: relative; padding-bottom: 69.85769728331177%; height: 0;"><iframe src="https://www.loom.com/embed/d4cafd32d52a44dab566b70656eb14f8" frameborder="0" webkitallowfullscreen mozal… text/html 2021-02-27T17:56:09+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:processing%E7%B7%A8:13.%E5%8B%95%E4%BD%9C%E3%81%AE%E5%86%8D%E6%A7%8B%E6%88%90&rev=1614416169&do=diff 動きを再構成する このページでは，Perfume Global Siteから提供されているperfumeのモーションデータを読み込み， Processingで表示させる手順を紹介します．手順は次のとおりになります． $\vec{P}_n$$\vec{P}_n = (x_n, y_n, z_n) $\[ frequency = \sum_{k=0}^4 | \vec{P}_k | 　\\ ただし　|\vec{P}_k| = \sqrt{(\frac{dx_k}{df})^2+(\frac{dy_k}{df})^2+(\frac{dz_k}{df})^2 } 　とし， dfは単位フレーム（delta frame）のことを指す \]… text/html 2021-02-27T17:56:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:processing%E7%B7%A8:14.%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%E3%81%AE%E5%86%8D%E6%A7%8B%E6%88%90&rev=1614416178&do=diff Composition ピエト・モンドリアンの作品の中で最も有名とも言える，Compositionの作品群があります． "ピエト・モンドリアン（ピート・モンドリアン、Piet Mondrian、本名ピーテル・コルネーリス・モンドリアーン Pieter Cornelis Mondriaan 1872年3月7日 - 1944年2月1日）は19世紀末-20世紀のオランダ出身の画家。ワシリー・カンディンスキー、カジミール・マレーヴィチらと並び、本格的な抽象絵画を描いた最初期の画家とされる。 出典: フリー百科事典『ウィキペディア（Wikipedia）』… text/html 2021-02-27T17:56:28+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:processing%E7%B7%A8:15.%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E3%81%AE%E5%86%8D%E6%A7%8B%E6%88%90&rev=1614416188&do=diff パターンの再構成 先の例ではコンポジションを生成することを行いました。絵を描くことには様々な手法があるだけでなく、写真技術、産業技術、デジタル技術の台頭により「パターン」が表現として使われることが増えてきました。近代に限らず、織物では絨毯やキルトなどの製作工程において、このようなパターンはよく使われています。 text/html 2021-02-27T17:56:36+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:processing%E7%B7%A8:16.%E7%B4%8B%E3%81%AE%E5%86%8D%E6%A7%8B%E6%88%90&rev=1614416196&do=diff もん（紋） 「もん」は平安時代から伝わる、シンボルマークの一種です。私達の生活では家紋がよく知られているかと思います。みなさんのお家にも家紋があるかと思います。このページはもんをプログラミングで描いてみます。とはいっても、そもそも「もん」がどんなものか、どうやって描いているものなのかを把握しないと興味すらわかないと思いますので、まずは次の動画を御覧ください。 <a title="Mukai [CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Japanese_Crest_Jyuu_Kiku.svg"><img width="256" alt="Japanese Crest Jyuu Kiku" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Japanese_Crest_Jyuu_Kiku.s… text/html 2021-02-27T17:56:47+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:processing%E7%B7%A8:17.%E6%95%B0%E7%90%86%E3%82%B7%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3&rev=1614416207&do=diff 数理シミュレーション ここまでの内容を経て，プログラム（スケッチ）を通じて視覚的な形状を作り出すことを， 再構成をキーワードに行ってきました．結果として，このような手法は何かをデザインする 手前における，シミュレーションやプロトタイピングとしての機能があることがわかります． 例えばモンドリアンのスケッチでは，グリッドやカラーリングの様々なバリエーションを自動で生成し，自分で気に入る結果を簡単に探索することができます．手を使って描画するよりも非常に高速になります．$ P_{2n-1}, P_{2n}, ただし n \in \mathcal{N} $$$ P_{2n-1} = n \\ P_{2n} = 2n \\ $$$P_n$$P_{x,y} $$P'_{x,y}$$P_{x,y}$\[ P_{x,y} = \frac{P'_{x+1,y} + P'_{x-1, y} + P'_{x, y+1} + P'_{x, y-1}}{2} - P_{x,y} \]$P, P'$$P'_{x,y}$… text/html 2021-02-27T17:56:56+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:processing%E7%B7%A8:18.%E6%99%82%E8%A8%88%E3%81%AE%E5%86%8D%E6%A7%8B%E6%88%90&rev=1614416216&do=diff 時計の再構成 ここまで様々な情報の再構成を練習してきました。デザインの対象となるものはどのような要素で構成されており、その素材はどのような特性を持つのか。これはアナログでもデジタルでもそれほど違いはありません。利用する要素の特性を正しく捉えることで、再構成をすることが可能になります。再構成は自由に意見できるように思うかもしれませんが、技術的、素材的、機能的制約があるため、それらを把握していないとどこまで実現できるかのイメージがつかなくなってしまいます。このページでは再構成練習の仕上げとして、時計を題材として外観、機能を同時にモジュール化して、再度構成し直す手順をプログラミングで体験してみます。時計の機能は時間（時、分、秒等）をユーザに提示することですので、基本的にはこれが提示できれば時計としては成立します。一方で時計とひとえに言ってもみなさん様々なデザインやプロダクトを思い浮かべることができると思います。機能はシンプルですが、その提示方法（UI）を変更することで時計のデザインは無限大に存在すると言えます。… text/html 2021-02-27T17:57:02+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:processing%E7%B7%A8:20.%E9%9F%B3%E3%82%92%E9%B3%B4%E3%82%89%E3%81%99&rev=1614416222&do=diff 音の再構成 私達が普段「音」と言っているのは，比較的高速な空気振動のことをさしています．PCにはスピーカがついています（今となっては当然ですが）．スピーカには磁石の周りにコイルが巻かれており，コイルに電流を流すことでこの磁石が流れた電流に応じて振動をします．磁石はコーンと呼ばれる紙等の比較的軽くて表面積の広いものとつながっているため，コイルの電流の流れがそのままコーンを通じて空気の振動に変わる仕組みです．\[ 1.0\times sin(x) -1.0\times sin(x) = 0 \]… text/html 2021-02-27T17:57:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:processing%E7%B7%A8:22.%E3%83%AA%E3%82%BA%E3%83%A0%E3%83%9E%E3%82%B7%E3%83%BC%E3%83%B3%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B&rev=1614416231&do=diff 最初に このページではプログラミング初学者の人が簡単なミュージックシーケンサを作成するまでをまとめたウェブサイトになります。自作デバイス上でArduinoを動かすことを想定していますが、教材用にProcessingで動作するソフトウェアとして紹介します。配列の宣言の仕方など、Arduinoの場合と少し異なりますので、適時読み替えてください。 <iframe width="560" height="315" src="https://www.youtube.com/embed/ALmsa_h8ho8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/jLvlKYu8v5w" frameborder="0" allow="accelerometer; auto…