https://ws.tetsuakibaba.jp/ 2026-04-15T12:16:11+00:00 https://ws.tetsuakibaba.jp/ https://ws.tetsuakibaba.jp/lib/tpl/bootstrap3/images/favicon.ico text/html 2021-02-28T11:11:48+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:p5.js%E7%B7%A8:00.%E5%89%8D%E7%BD%AE%E3%81%8D&rev=1614478308&do=diff Design With Prototyping Design With Prototypingは未完成教材です． デザインや作品作りに必要なプロトタイピング能力とはどのようなもので，何を学習すればよいのか． その問に対して，プログラミングの観点から一つの教材を作ってみることにしました．私の大好きなdesign_with_prototyping index text/html 2021-03-11T01:54:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:p5.js%E7%B7%A8:01.%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83&rev=1615395254&do=diff 開発環境 このページでは学習環境としてp5.jsを利用する場合の導入案内ページになります。p5.jsはブラウザ動作のため、アプリケーションのインストールは必要ありません。利用するブラウザ環境についてですが、基本的にはGoogle Chrome, Safari, Firefox等のモダンなブラウザであれば動作しますが、授業では問題解決を容易にするため、p5js index text/html 2023-06-06T10:46:17+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:p5.js%E7%B7%A8:02.%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E6%93%8D%E4%BD%9C&rev=1686015977&do=diff 基本的な操作 まずは、下記動画を一度みて、基本的な操作方法を把握してください。 <div style="position: relative; padding-bottom: 69.76744186046511%; height: 0;"><iframe src="https://www.loom.com/embed/43f8cf772deb4aff8966dcbebc51e2a3" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div> ショートカット一覧 以下のショートカットは最低限使えるようになってください。特にMacの人はカーソル移動でCtrlキーを利用したショートカットが今後とっても役に立つのでまだこのショートカットを未習得のかたは必ずこのタイミングで体になじませていきましょう。 <div style=… text/html 2021-03-02T21:56:19+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:p5.js%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=1614689779&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-05-11T15:25:58+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:p5.js%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=1620714358&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-05-19T08:56:58+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:p5.js%E7%B7%A8:12.%E5%8B%95%E7%94%BB%E3%81%AE%E5%86%8D%E6%A7%8B%E6%88%90&rev=1621382218&do=diff 動画像の再構成（ピクセルの応用） では次に動画ピクセルを再構成する方法を考えてみましょう．まずは動画ファイルを読み込んで，再生する だけのプログラムを書いてみます．すでに以下のリンクにテンプレートを用意していますので、まずはp5 Editorで開いて実行してみましょう。 text/html 2021-05-25T13:25:19+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:p5.js%E7%B7%A8:13.%E5%8B%95%E3%81%8D%E3%81%AE%E5%86%8D%E6%A7%8B%E6%88%90&rev=1621916719&do=diff 動きの再構成 p5jsを利用して、マウスカーソルに円（直径50）がくっつくプログラムを記述してみましょう。マウスカーソルの位置は変数 mouseX, mouseYで取得することができます。次のように記述すればよいでしょう。$a$$V$\[ a = \begin{cases} 1.0 & V > 0.2 \\ 0.01 & V \leqq 0.2 \end{cases} \] text/html 2021-03-10T18:12:43+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:p5.js%E7%B7%A8:14.%E7%B9%B0%E8%BF%94%E3%81%97%E3%81%AE%E5%86%8D%E6%A7%8B%E6%88%90&rev=1615367563&do=diff 繰返しの再構成 繰返しと言われて皆さんなにを思い浮かべるでしょうか？一般的には同じことを何度もすることを意味しているわけですが、朝昼夜、春夏秋冬、デザイン思考等など、 繰返しとは様々なプロセスにおいて一般的に語られるプロトコルであり私達の身の回りにあふれる概念です。このページでは繰返し処理をテーマにいくつかの視覚的な表現に関するコードをスケッチしてみたいと思います。… text/html 2021-05-25T13:31:41+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:p5.js%E7%B7%A8:15.%E3%83%A9%E3%83%B3%E3%83%80%E3%83%A0%E3%81%A8%E3%83%8E%E3%82%A4%E3%82%BA&rev=1621917101&do=diff ランダムとノイズ ランダムは乱数．ノイズは雑音．一体何が異なるのでしょうか？ p5.jsでもランダム及びノイズが用意されています．簡単にいうと，ランダムは乱数で，ノイズは連続性を持ったランダム（のような）乱数．のことです．例えば「1-100までの好きな数をランダムで3回で言って」となった場合は，ランダムの場合は40,87,23」のように値が飛び飛びになる一方，「1-100までの好きな数をノイズで3回言って」となる場合，40,42,39のように比較的値がつながった連続値になります．どのくらい値を飛ばしたいのか，といった調整もできるようになっていますが，まずはコードで確認していきましょう．… text/html 2021-06-30T01:52:48+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:p5.js%E7%B7%A8:21.%E9%9F%B3%E5%A3%B0%E8%AA%8D%E8%AD%98%E3%81%A7%E6%93%8D%E4%BD%9C%E3%81%99%E3%82%8B&rev=1624985568&do=diff 音声認識を利用する 音声認識を利用して様々な機器を操作することはスマートスピーカーの登場によってすでに一般化したと言えます。一方で音声認識を利用してなにかアプリケーションを開発したいと思った時、どのようなやり方があるでしょうか？昔は音声認識といえば京大のJuliusだったのですが、Web Speech APIを利用することで簡単に音声認識機能を自分のプログラム内に組み込むことが可能になりました。jsとかにこだわりはなく、とにかく高精度に音声認識をしたい、という場合は以下のJuliusを触ってみてください。githubでも公開されています。 <img src="https://github.com/TetsuakiBaba/challengeable/raw/master/images/teaser.gif">… text/html 2021-06-16T10:10:02+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=lecture:design_with_prototyping:p5.js%E7%B7%A8:22.commentable%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B&rev=1623805802&do=diff commentableを作る commentable（コメンタブル）は馬場が2020年4月からオンライン授業用に開発を始めたチャットシステムです．詳しくはgithubをご参照ください． * <https://github.com/TetsuakiBaba/commentable> このページではコメンタブルみたいなシステムを実際に作成してみようと思います．コメンタブル自体は至ってシンプルなシステムになっています．