https://ws.tetsuakibaba.jp/ 2026-04-15T05:31:33+00:00 https://ws.tetsuakibaba.jp/ https://ws.tetsuakibaba.jp/lib/tpl/bootstrap3/images/favicon.ico text/html 2021-03-11T01:52:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:00.%E7%9B%AE%E6%AC%A1&rev=1615395133&do=diff p5js index text/html 2021-03-09T09:09:31+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:01.%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83&rev=1615248571&do=diff p5.jsの開発環境 Processing を javascript 形式でコーディングすることで簡単にブラウザ上でプロセッシングを動作させることができます．様々なやり方でブラウザ上での実装ができます．ここではそのやり方と最初に抑えておくべきjsでのポイント（java-Processingとjs-Processingの違い）を記述します．これまでProcessingを利用して行ってきたことをそのままブラウザで動かそう程度のことであれば、以下をよく読んでおけばほとんど問題ないかなと思います。ただし実はそれだけではP5jsの恩恵を有効に活用できているとは言えません。p5jsのすごいところは、html, cssとjsの組み合わせをProcessingライクに実装できる点にあります。これまではjavascriptや周辺ライブラリを利用して同様のこともできましたが、p5.jsを使うことで、様々なアプリケーションをウェブ上に容易に実装できるようになるのです。… text/html 2021-03-09T02:32:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:02.css%E3%81%A8html%E3%81%A8js&rev=1615224734&do=diff cssとhtmlとjs プログラムを記述していく前に、cssとhtmlファイルとの関係を把握しておこう。 Before writing a program, let's understand the relationship between css and html files. Before writing a program, let's understand the relationship between css and html files. text/html 2021-07-10T15:49:04+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:03.html%E8%A6%81%E7%B4%A0%E3%81%AE%E5%8F%96%E5%BE%97%E3%81%A8%E5%A4%89%E6%9B%B4&rev=1625899744&do=diff html要素の取得と変更 document.getElementById(“id_name”) とcallbackの使い方を覚えよう html要素の取得 html内の要素を取得する簡単な方法は、javascriptで提供されているdocumentを利用するのが早いでしょう。javascriptでもよく利用しますが、p5jsでも同様にこのやり方で簡単にアクセスできます。draw関数内で直接idを指定して、その値をもらってくることができます。 <iframe src="https://editor.p5js.org/tetsuakibaba/sketches/cXi_p3JEk" height=700px width="100%"></iframe> <iframe src="https://editor.p5js.org/tetsuakibaba/sketches/AuzBQvVRb" height=700px width=100%></iframe> <iframe src="https://editor.p5js.org/tetsuakibaba/sketches/D0km… text/html 2021-03-09T02:32:58+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:04.button&rev=1615224778&do=diff ボタンを利用する アプリケーションを実装する際、様々な用途でボタンを用いることがあると思います。 このページではボタン動作をp5jsで受け取って、ボタンを一度押すとランダムで背景が変わるプログラムを記述します。基本的にはhtmlファイルに対象となるidを振っておき、そのidを元にjsファイル上でコールバックや振る舞いを記述します。すでにhtmlのタグにはbuttonというものが用意されていますので、これを利用してみます。昔（馬場が学生の頃）はhtmlにはinputタグの属性指定でbuttonがあったのですが、いまはbuttonタグがそのまま使えるので便利ですね。 <iframe src="https://editor.p5js.org/tetsuakibaba/sketches/dIf2u_Z3O" height=600px width=100%></iframe>… text/html 2021-03-09T02:33:08+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:05.number_range&rev=1615224788&do=diff バラメータの変更 実行しているプログラムのパラメータを変更したり、予め設定された数値に基づいて何かしらの処理を行う場合に関してです。 htmlタグ要素には inputというタグがあり、この中でtypeを指定すると様々な入力タイプが存在しています。詳しくは <input type="number"></input> <input type="number" min=0 max=100 step=10></input> <iframe src="https://editor.p5js.org/tetsuakibaba/sketches/u_w7hwjGK" height=500px width=100%></iframe> <input type="range" value=1 min=1 max=10></input>… text/html 2021-03-09T02:33:21+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:06.drag_and_drop&rev=1615224801&do=diff ファイルのドラッグアンドドロップ アプリケーションを実装する際、外部ファイルの読み取りはよく行う操作の一つです。特にシステムに予め登録された ファイルではなく、ユーザが任意にファイル指定をするということがよくあります。例えば私が作ったオンラインセミナーの <iframe src="https://editor.p5js.org/tetsuakibaba/sketches/vhzrbL-Sx" height=600px width=100%></iframe> text/html 2021-03-09T02:33:33+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:07.codingtrain&rev=1615224813&do=diff Coding Trainで学ぼう ここまで p5js, css, htmlの連携を練習してきました、もう少し沢山のチュートリアルをやることでよりp5jsを楽しく扱うことができるようになります。ぜひ以下のウェブサイトからHTML/ text/html 2021-03-11T02:18:20+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:08.js%E3%81%AE%E6%96%87%E6%B3%95%E5%9F%BA%E7%A4%8E&rev=1615396700&do=diff JavaScriptの文法基礎 ここまでの教材である程度jsにはなれてきたかなと思いますが、いざ自分で思いついた内容をまっさらなコードから書き始めるとなると、手がとまる人が多いのでは無いかなと思います。応用ができないのは基礎ができていないからですが、最初から基礎をやるとつまらなくなってしまうので、この教材ではこのタイミングでJavaScriptの基本的な文法に関して触れておきたいともいます。… text/html 2021-06-02T10:15:40+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:10.node.js%E3%81%A7simplechat&rev=1622596540&do=diff node.jsでsimpleなチャットシステムをつくる このページでは node.js と p5jsでシンプルなチャットシステムを制作します．最初はローカル環境で動作させた後，外部無料サーバ（heroku）にデプロイするまでを一緒にやってみましょう．このページの手順を追った動画も合わせて紹介しておきます． <div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/de58871c3bfd40dc85372fbb544778dd" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>… text/html 2021-06-30T10:22:48+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:11.speech-recognition&rev=1625016168&do=diff 音声認識を利用する 音声認識を利用して様々な機器を操作することはスマートスピーカーの登場によってすでに一般化したと言えます。一方で音声認識を利用してなにかアプリケーションを開発したいと思った時、どのようなやり方があるでしょうか？昔は音声認識といえば京大のJuliusだったのですが、Web Speech APIを利用することで簡単に音声認識機能を自分のプログラム内に組み込むことが可能になりました。jsとかにこだわりはなく、とにかく高精度に音声認識をしたい、という場合は以下のJuliusを触ってみてください。githubでも公開されています。 <img src="https://github.com/TetsuakiBaba/challengeable/raw/master/images/teaser.gif">… text/html 2022-06-28T08:17:56+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:12.serialport&rev=1656371876&do=diff Serial通信 ブラウザからSerial通信を行う場合は、Web Serial APIを利用します。p5.jsとは関係がなく、単純にjsで提供されている機能です。まずはこのWeb Serial APIを利用して、シリアル通信を確認します。ブラウザからデバイスにアクセスするには必ずユーザ操作がトリガーである必要が、セキュリテイの面から決められているので、ボタンを押してシリアル通信を行うプログラムにしておく必要があります。p5.js editorにひな形をおいておきますのでこちらを利用しましょう。… text/html 2022-07-05T14:18:44+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:13.grove_beginner_kit&rev=1656998324&do=diff p5.jsとGrove Beginner Kitで遊ぼう このページではp5.jsからGrove Beginner Kitへのセンサ入力値やOLED出力等を実習するためのサンプルや解説をまとめます。なおこのページは最初のシリアル通信で利用するサンプルを雛形とし、各セクションで肉付けしつつ進めていきます。 text/html 2021-06-30T10:22:16+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:xx.faceapi&rev=1625016136&do=diff FaceApiを利用して顔認識 顔を認識するjs用のライブラリには様々な種類がありますが，これまで授業では clmtrackerを利用していました．このライブラリはすでに4年前のものであり，認識もトラッキング要素がつよいため，顔を早く動かすとパーツがずれたままになってしまうなど，微妙に使い勝手が悪いところがありました． text/html 2022-10-24T00:24:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://ws.tetsuakibaba.jp/doku.php?id=p5js:%E5%8F%82%E8%80%83%E3%82%B5%E3%82%A4%E3%83%88&rev=1666538654&do=diff 信号処理ライブラリ * FFT: <https://github.com/indutny/fft.js> * DTW: <https://github.com/GordonLesti/dynamic-time-warping>