外に持ち出す プログラムの.pyファイルをmain.pyという名前に変更し、Picoのストレージに保存すると、起動時Picoは自動的にmain.pyを実行するようになります。これは、Picoをそのプログラム専用のコントロ […]
続きを読むフィジカルコンピューティング with Raspberry PI Pico
フィジカルコンピューティング with Raspberry PI Pico
13 デジタル温度計
今回は、温度をディスプレイで表示するデジタル温度計プログラムを作成します。 液晶ディスプレイ(LCD) 温度の表示には液晶ディスプレイ(LCD)を使用します。多くの入門用キットに含まれていて、安価で入手しやすいLCD16 […]
続きを読むフィジカルコンピューティング with Raspberry PI Pico
12 温度を記録する
MicroPythonのファイル機能を使用すると、Picoのストレージにテキストファイルを保存することができます。テキストにはデータが保存できるので、Picoに接続した各種センサーからのデータを記録することができます。 […]
続きを読むフィジカルコンピューティング with Raspberry PI Pico
11 ポテンショメータでモーターを回す
フィジカルコンピューティングで面白いのは、やはり実際に目の前にある物を動かすことでしょう。今回はポテンショメータと呼ばれる電子機器のつまみを動かして、最終的にサーボモーターと言うモータを指定量だけ動かします。 アナログデ […]
続きを読むフィジカルコンピューティング with Raspberry PI Pico
10 ブザーでドレミ
「フィジカルコンピューティング with Raspberry PI Pico 9 防犯アラーム」で使ったアクティブブザーは、電気をオンにすると音が鳴り、オフにすると音が止まるという単純な作りです。これに対し、パッシブブザ […]
続きを読むフィジカルコンピューティング with Raspberry PI Pico
9 防犯アラーム
赤外線センサー(人感センサー、PIRセンサー)を使って、防犯アラームを作成します。赤外線センサーで人の動きを監視し、動きがあればブザーを鳴らします。また動きがないとき(平時)は、PicoのオンボードLEDをゆっくりとした […]
続きを読むフィジカルコンピューティング with Raspberry PI Pico
8 論理演算と論理回路
たとえばシェルにprint(1 and 0)を入力してEnterキーを押すと0が表示されるますが、これは何を意味するのでしょう？ この理解には、LEDの点灯と消灯が役に立ちます。 LEDの点灯と消灯と、電気や電圧、オン/ […]
続きを読むフィジカルコンピューティング with Raspberry PI Pico
7 押しボタン式歩行者用信号機
赤と緑のLEDを使って、最も簡単な押しボタン式歩行者用信号機システムを作成します。 とはいえ、いきなりシステム全体に取り組むのではなく、できるだけ簡単な、単純なものから始めます。それは、押しボタンのない信号機です。 押し […]
続きを読むフィジカルコンピューティング with Raspberry PI Pico
6 押しボタンでLEDを点けたり消したりする
押しボタンを押してLEDを点灯させ、放して消灯させるプログラムです。GPIOピンは出力だけでなく、入力にも使用できます。 押しボタンの値の読み取り 押しボタンでLEDを点けたり消したりするには、押しボタンが持っている、ボ […]
続きを読むフィジカルコンピューティング with Raspberry PI Pico
5 Lチカ
ここでは、ブレッドボードやジャンパー線を使ってLEDを点滅させる、通称「Lチカ」プログラムを作成します。電子工作界隈では、LEDをチカチカさせる入門プログラムを「Lチカ」というそうです。 Lチカ プログラム プログラムは […]
続きを読むフィジカルコンピューティング with Raspberry PI Pico
4 ハロー、LED
Hello, WorldプログラムのPico版、ハロー、LEDを作成します。Picoに載っているオンボードLEDを光らせる簡単なプログラムです。 プログラムを作成する基本的な手順 Picoのプログラムは基本的に次の手順で […]
続きを読むフィジカルコンピューティング with Raspberry PI Pico
3 Picoを使えるようにするまでの準備
WindowsコンピュータにRaspberry PI Picoを接続して、使えるようにするまでの手順を見ていきましょう。 買ったままのPicoには何も入っていないので、MicroPythonプログラミング言語を解釈して実 […]
続きを読むフィジカルコンピューティング with Raspberry PI Pico
2 Raspberry PI Picoとは？
Raspberry Pi Pico Raspberry Pi Pico(ラズベリーパイ ピコ)は、イギリスのRaspberry Pi財団が開発した小さな電子基板で、ピンと呼ばれる金属の突起を接続して、電子部品を制御します […]
続きを読むフィジカルコンピューティング with Raspberry PI Pico
1 フィジカルコンピューティングとは？
フィジカルコンピューティングは英語でPhysical Computingと言い、直訳すれば物理的なコンピュータ操作、つまり仮想的なものではなく、実際にそこに存在する物に対して、コンピュータから働きかけるアクションを行うと […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
42：番外編 当たり判定の基本を考える
本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 当たり判定とは？ 当たり判定とは、衝突判定、衝突検出とも呼ばれ、英語ではCollision Detectionと言います。ウィキペディ […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
41：番外編 アナログ時計を作成
本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 概要 「番外編 円とサイン」や「番外編 サイン、コサインで三角形を描く」で見たサイン、コサインは、アナログ時計の作成にも利用できます。 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
40：番外編 何々の方へ atan2()
本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 サイン、コサインともう１つ、アークタンジェント 数学で三角関数と呼ばれるものは多くありますが、プログラミングで覚えておけばよいのは、s […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
39：番外編 サイン、コサインで三角形を描く
本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 概要 本稿では、前の「31：番外編 円とサイン」で見たsin()やcos()関数を使って、三角形を描くときの考え方を探っていきます。 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
38：番外編 円とサイン
本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 基本 サインやコサインなど、いわゆる三角関数と聞くと、「もはやチンプンカンプン」と思われる方も多いでしょうが、サインは実は滑らかに変化 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
37：動物園を巡回パトロール (迷路の解法 左手法)
この記事の詳しい内容には毎日新聞の「動物園をパトロール」ページから有料記事に進むことで読めます。 概要 この動物園では、巡回ロボットが園内をパトロールします。ロボットは次のルールにしたがって、動物を全部見て回ります。 ま […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
36：ロボットはどう動く
この記事の詳しい内容には毎日新聞の「ロボットはどう動く」ページから有料記事に進むことで読めます。 概要 このロボットは、下図に示すルール通りに動いて、ゴールを目指します。ルールを見てロボットの動きを考え、進む道をたどって […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
35：家から学校までの道 どれが一番早く着くかな(ダイクストラ法)
この記事の詳しい内容には毎日新聞の「家から学校までの道 どれが一番早く着くかな」ページから有料記事に進むことで読めます。 概要 下図は、学校周辺の地図を示しています。丸の中の数は、その道を通ったときにかかる分数です。たと […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
34：メモのかくれたメッセージ
この記事の詳しい内容には毎日新聞の「メモのかくれたメッセージ」ページから有料記事に進むことで読めます。 概要 メッセージが隠されたメモがあります。ある決まりにしたがってメモを読むと、隠されたメモを解読することができます。 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
33：数当てゲーム
この記事の詳しい内容には毎日新聞の「数当てゲーム」ページから有料記事に進むことで読めます。 概要 子どもたち３人が数当てゲームをします。問題を出す男の子は1から20の間の数字を選び、女の子ともう１人の男の子からの質問に、 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
32：野菜の重さをくらべる
この記事の詳しい内容には毎日新聞の「野菜の重さをくらべる」ページから有料記事に進むことで読めます。 概要 ニンジン、カボチャ、ダイコン、トマトという４つの野菜があり、それを重い順に並べるのが目的です。てんびんに２つの野菜 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
31：２色のカードで数を表す
この記事の詳しい内容には毎日新聞の「２色のカードで数を表す」ページから有料記事に進むことで読めます。 概要 カードを４枚使って、数を表します。カードは黒と白の２色です。表す数は次のルールにしたがって決まります。 カードは […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
30：番外編 つるかめ算を考える
本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 概要 アマゾンプライムビデオで「武士の家計簿」という映画を見ていたとき、草笛光子演じる祖母が孫につるかめ算の問題を出していたので、これ […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
29：うかび上がるのはどんな絵
この記事の詳しい内容には毎日新聞の「うかび上がるのはどんな絵」ページから有料記事に進むことで読めます。 概要 数字が書かれたメモがあります。数字は左から、色を塗らないマスの数と、色を塗るマスの数を表し、それらは交互に書か […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
28：倉庫にしまった服を取り出す
この記事の詳しい内容には毎日新聞の「倉庫にしまった服」ページから有料記事に進むことで読めます。 概要 この倉庫にはTシャツを預けるラックとズボンを預けるラックがあり、全部ロボットが管理しています。 たとえば、を取り出した […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
27：レシピ通りにパフェを作る
この記事の詳しい内容には毎日新聞の「手順を反復して処理」ページから有料記事に進むことで読めます。 概要 このカフェではロボットがパフェを作ります。ロボットはレシピの手順通りにソースを重ねてパフェを作ります。たとえば下図左 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
26：どう組み合わせればいい？
この記事の詳しい内容には四国新聞 WEB朝刊の「どう組み合わせればいい？」ページから有料記事に進むことで読めます。 概要 かめのロボットを動かして線を引きます。ロボットには次の４つの命令を出すことができます。 命令： 進 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
25：くり返しの中にくり返し
この記事の詳しい内容には毎日新聞の「くり返しの中にくり返し」ページから有料記事に進むことで読めます。 概要 かめのロボットを動かして線を引きます。ロボットには次の４つの命令を出すことができます。 命令： 進む(n) nマ […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
24：魚をつるロボット
この記事の詳しい内容には毎日新聞の「魚の取りすぎをふせぐ」ページから有料記事に進むことで読めます。 概要 魚つりをするロボットがいます。このロボットは、魚の取りすぎをふせぐため、ルールにしたがってつった魚を海に返します。 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
23：今は何を覚えているかな
この記事の詳しい内容には毎日新聞の「今は何を覚えているかな」ページから有料記事に進むことで読めます。 概要 オウムのロボット１号、２号、３号がいます。オウムロボットは下記の手順の通りに言葉を覚えていきますが、覚えられるの […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
22：オウムが話す言葉
この記事の詳しい内容には毎日新聞の「オウムが話す言葉」ページから有料記事に進むことで読めます。 概要 オウムのロボット１号と２号がいます。オウムロボットは手順の通りに言葉を覚えていきますが、覚えられるのは１つだけで、新し […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
21：指定歩数分だけ進む
この記事の詳しい内容には四国新聞 WEB朝刊の「「歩く数」の分だけ進む」ページから有料記事に進むことで読めます。 概要 このロボットは、指定された歩数だけ歩いて右に進みます。たとえば次の命令の場合、 歩く数２ 進む (歩 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
20：目的地への道順を伝える
この記事の詳しい内容には毎日新聞の「目的地への道順伝える」ページから有料記事に進むことで読めます。 概要 下図は、スタート地点から、野球場とプール、体育館とテニスコートへ行く道順を示した案内図です。途中の分かれ道には案内 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
19：ケーキを作る
この記事の詳しい内容には毎日新聞の「くり返しは台形で表す」ページから有料記事に進むことで読めます。 概要 あるロボットがいます。このロボットは、受け取ったレシピに書かれた順に材料を重ね、ケーキを作ります。たとえば、 「ス […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
18：荷物のシールで仕分ける
この記事の詳しい内容には毎日新聞の「荷物のシールで別のかごに」ページから有料記事に進むことで読めます。 概要 この工場では、ベルトコンベアを流れてきた荷物をロボットが仕分けます。ロボットは荷物にはられたシールで、荷物を入 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
17：かべにかざりを付けるには？
この記事の詳しい内容には毎日新聞の「かべにかざりを付けるには？」ページから有料記事に進むことで読めます。 概要 ロボットにメモを渡して、かべかざりを手伝ってもらいます。かざりは下図の円と星と四角です。 ロボットには「２回 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
16：３段重ねのアイスを注文したら？
この記事の詳しい内容には毎日新聞の「３段重ねのアイスを注文したら？」ページから有料記事に進むことで読めます。 概要 ３段重ねのアイスを売る店があります。たとえば「チョコとバニラ、ストロベリーのアイスをください」と言うと、 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
15：命令された順にカードに絵をかく
この記事の詳しい内容には毎日新聞の「矢印で命令をつなぐ」ページから有料記事に進むことで読めます。 概要 命令された通りに、カードに絵をかくロボットがいます。ロボットは命令をフローチャートで受け取ります。 上図のフローチャ […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
14：イスを人数分ならべる
この記事の詳しい内容には毎日新聞の「命令をくり返す回数は？」ページから有料記事に進むことで読めます。 概要 このロボットは、指示された命令の手順で椅子を人数分並べます。命令は下図のフローチャートで表されます。 ロボットは […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
13：かめを動かそう
この記事の詳しい内容には毎日新聞の「かめを動かそう」ページから有料記事に進むことで読めます。 概要 5 x 5 のマス目の上にかめのロボットがいます。かめには次の３つの命令を出すことができ、かめは自分の動いた跡に太い線を […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
12：ロボットが止まるマスは？
この記事の詳しい内容には毎日新聞の「ロボットが止まるマスは？」ページから有料記事に進むことで読めます。 概要 下図のルートを移動するロボットがいます。ロボットは今自分がいるマスを調べ、それがチェック模様のマスなら２マス進 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
11：パンの入れ物はどれ？
この記事の詳しい内容には毎日新聞の「パンの入れ物はどれ？」ページから有料記事に進むことで読めます。 概要 舞台はとあるパン屋さんです。このパン屋さんでは、焼きたてのパンは紙のふくろに入れて渡しますが、焼きたてでないパンは […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
10：大小の皿を片づける
この記事の詳しい内容には毎日新聞の「皿を命令通り片付ける」ページから有料記事に進むことで読めます。 概要 洗った皿を片づけてくれるロボットがいます。ロボットは次の動作を繰り返して実行します。繰り返す回数は人間が伝えます。 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
9：番外編 新しいものを指定数分だけ覚える
本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 概要 ご存知かどうかは分かりませんが、映画「トロン」に出てきたバイクレースに触発されたと思われるゲームが多数あります。２台のバイクが高 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
8：番外編 売れたスイーツを補充する
本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 概要 次の５品を専門に売るスイーツ店があります。 あめ：￥50 だんご：￥150 アイスクリーム：￥200 パフェ：￥450 ショート […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
7：ロボットが次々ポーズ
この記事の詳しい内容には毎日新聞の「ロボットが次々ポーズ」ページから有料記事に進むことで読めます。 概要 ポーズを取るロボットが何体かいます。ロボットは自分の左にいるロボットのポーズを見て、下図のルールにしたがって、自分 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
6：番外編 数値からドット絵を描く
本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 ドット絵とは？ 「ドット絵」というものをご存知でしょうか？ 下図はその例で、左は実際のサイズ(33 x 44ピクセル)で、右はそれを拡 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
5：暗号をといて箱を開ける
この記事の詳しい内容には毎日新聞の「暗号をといて箱を開ける」ページから有料記事に進むことで読めます。 概要 鍵のかかった箱があります。この箱は、指定された数だけ、文字の書かれたダイヤルを回すことで鍵の暗号を解いて開けるこ […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
4：言葉を覚えるロボット
これは10月17日の信濃毎日新聞に掲載されていた記事です。詳しい内容には毎日新聞の「言葉を覚えるロボット」ページから有料記事に進むことで読めます。 概要 教えられた言葉を覚えてしゃべるオウムのロボットが２台います。記憶で […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
3：ロボットが水をまく日は？
この記事の詳しい内容には毎日新聞の「ロボットが水をまく日は？」ページから有料記事に進むことで読めます。 概要 ある公園に水撒きロボットがいます。ロボットは、天気が晴で気温が25度より高いときに水を撒きます。次の１週間の天 […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
2：花を１列ずつ植える
これは9月19日の信濃毎日新聞に掲載されていた記事です。詳しい内容には毎日新聞の「くり返しの「入れ子構造」」ページから有料記事に進むことで読めます。 概要 メモに書かれた通りに花を植えるロボットがいます。メモには次のよう […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
１：おかしに当たり券を入れる
これは10月3日の信濃毎日新聞に掲載されていた記事です。詳しい内容には毎日新聞の「おかしに当たり券を入れる」ページから有料記事に進むことで読めます。 概要 舞台はとあるおかし工場です。そこでは、飴、せんべい、クッキー、ポ […]
続きを読むプログラミング はじめの一歩 JavaScript + p5.js編
信濃毎日新聞で毎週土曜に掲載されている「信毎こども新聞」の１コーナーに「プログラミング はじめの一歩」という小学生向けのプログラミング講座の記事があります(隔週掲載)。 先日、その存在に初めて気づきまして、書かれている「 […]
続きを読むp5.js shader 基本的なサンプル 2 テクスチャ座標を使ったグラデーションシェーダー
本稿は「Basic gradient shader based on texture coordinates」ページを翻訳したものです。 テクスチャ座標にもとづいた基本的なグラデーションシェーダー このグラデーションは、 […]
続きを読むp5.js shader 基本的なサンプル 1 グラデーションシェーダー
本稿は「Basic Gradient Shader based on pixel coordinates」ページを翻訳したものです。 ピクセル座標にもとづいた基本的なグラデーションシェーダー 次のコードは、キャンバスのピ […]
続きを読むp5.js shader スタート 8 テクスチャ座標の使用
本稿は「Using Texture Coordinates」ページを翻訳したものです。 テクスチャ座標の使用 TexCoordとFragCoord。シェーダーサンプルコードの中でこれらを使った変数に気づかれたかもしれませ […]
続きを読むp5.js shader スタート 7 変数修飾子の使用
本稿は「Using Variable Qualifiers」ページを翻訳したものです。 変数修飾子を使用することで、変数の使用方法がさらに定義できます。変数修飾子は変数の型(floatやvec2など)の前に置きます、 変 […]
続きを読むp5.js shader スタート 6 シェーダーの重要な概念
本稿は「Important shader concepts」ページを翻訳したものです。 シェーダーの重要な概念 このページにはシェーダーの使用を開始するに当たって”知っておく必要のある”情報が多く含まれています。みなさん […]
続きを読むp5.js shader スタート 5 シェーダーの書き方
本稿は「How to write a shader」ページを翻訳したものです。 シェーダーの書き方 ロードするシェーダーファイルについて見ていきましょう。 シェーダーを作成するには、p5スケッチフォルダ内に２つのファイル […]
続きを読むp5.js shader スタート 4 シェーダーの設定
本稿は「Setting up shaders in p5.js」ページを翻訳したものです。 シェーダーのセットアップ シェーダーとはどのようなもので、p5 スケッチとは書き方の異なるものだということが分かったので、簡単な […]
続きを読むp5.js shader スタート 3 シェーダーとは何か？
本稿は「Why use shaders?」ページを翻訳したものです。 シェーダーとは？ シェーダーはわれわれの身の回りで使われているので、自分で記述したことがなくても、必ず目にしているはずです。シェーダーは、コンピュータ […]
続きを読むp5.js shader スタート 2 シェーダーを使う理由
本稿は「Why use shaders?」ページを翻訳したものです。 パフォーマンス loadPixels()やset()、updatePixels()を使ったり、p5.jsでピクセル単位の計算をしたことのある方なら、そ […]
続きを読むp5.js shader スタート 1 p5.js shaderへようこそ
本稿は「Welcome to p5.js shaders」ページを翻訳したものです。 シェーダーは、みなさんのプロジェクトで使用できるグラフィックスを作成するための優れた方法です。これまでみなさんはrect()関数やel […]
続きを読むp5.js WebGL入門 8 3D カスタムシェイプ
本稿は「18.8: 3D Custom Shapes – WebGL and p5.js Tutorial」YouTube動画を元に再構成したものです。 p5.jsでは、カスタムシェイプ、つまり形状の自作は、 […]
続きを読むp5.js WebGL入門 7 3D テキスト
本稿は「18.6: createGraphics() as WebGL Texture – WebGL and p5.js Tutorial」YouTube動画と「Getting started with W […]
続きを読むp5.js WebGL入門 6 3Dモデル
本稿は「18.7: Loading OBJ Model – WebGL and p5.js Tutorial」YouTube動画を元にしています。 p5.js WEBGLモードでは、Blenderなどの3DC […]
続きを読むp5.js WebGL入門 5 カメラ
本稿は「18.5: Camera and Perspective – WebGL and p5.js Tutorial」YouTube動画を元にしていますが、扱われているp5.jsのバージョンが前のものなので […]
続きを読むp5.js WebGL入門 4 テクスチャ
本稿は「18.4: Texture – WebGL and p5.js Tutorial」YouTube動画を元にしています。 テクスチャマッピング テクスチャとは絵柄、図柄といった意味で、3Dジオメトリの表 […]
続きを読むp5.js WebGL入門 3 ライト、マテリアル
本稿は「18.3: Light and Material – WebGL and p5.js Tutorial」YouTube動画を元にしています。 概要 はじめに、3DCGに出て来るライトやマテリアルなどの […]
続きを読むp5.js WebGL入門 2 3Dジオメトリ
本稿は「18.2: 3D Geometries – WebGL and p5.js Tutorial」YouTube動画を元にしています。 WEBGLモードでの描画 2D図形の描画 p5.jsでは、Webペー […]
続きを読むp5.js WebGL入門 1 スタート
はじめに 「p5.jsで始めるWebGL」でまとめているように、p5.jsでは、WebGL機能を使って、p5.jsのキャンバスで3D表現を行うことができます。この入門シリーズでは、「18.1: Introduction […]
続きを読むp5.jsで始めるWebGL
本稿は、「Getting started with WebGL in p5」ページに書かれている内容を基本に再構成したもので、内容を一部改変しています。WebGL（ウェブジーエル）は、ウェブブラウザで3次元コンピュータグ […]
続きを読むp5.jsコードの最適化
本稿は「Optimizing p5.js Code for Performance」の永井による翻訳です。 注意すべき事柄 パフォーマンスに関して言うと、最初からできるだけ速いスピードを出そうとしたくなるものです。コード […]
続きを読む5: Pathfinding(経路探索) Breadth-First Search(幅優先探索) アルゴリズム p5.js – 移植3
最後に、グリッドの数を増やし、ボタンのクリックでスタートするように修正します。 またpathFind()関数が返した最短経路をアニメーションで表示します。 p5.jsのボタンを使用するので、アドオンのp5.dom.jsラ […]
続きを読む4: Pathfinding(経路探索) Breadth-First Search(幅優先探索) アルゴリズム p5.js – 移植2
実際に動かす ボードが描画できたので、次は幅優先探索のアルゴリズムを組み込んで、実際に動かしてみます。Squareクラスは同じですが、sketch.jsのコードはずいぶん長くなります。 const gridSize = […]
続きを読む3: Pathfinding(経路探索) Breadth-First Search(幅優先探索) アルゴリズム p5.js – 移植1
「1: Pathfinding(経路探索) Breadth-First Search(幅優先探索) アルゴリズム p5.js – 導入」で見たサンプルを、p5.jsに移植していきます。 ボードの描画 まずは、p5.jsを […]
続きを読む2: Pathfinding(経路探索) Breadth-First Search(幅優先探索) アルゴリズム p5.js – 解説
幅優先探索とは？ 幅優先探索は、探索にツリー構造を用いるアルゴリズムで、スタート位置から近い順に探索することが特徴的です(参考：「幅優先探索」)。 スタート位置は下図の(1)です。これをツリーのルート(根)と言います。下 […]
続きを読む1: Pathfinding(経路探索) Breadth-First Search(幅優先探索) アルゴリズム p5.js – 導入
Pathfinding(パスファインディング)とは、パスをファインドすること、つまり目的地までの経路を見つけることで、一般的には「ある場所から他の場所に移動するときの最短経路を導き出す方法」を言います。 その導き出し方( […]
続きを読む6：エフェクト p5.sound.js サウンド
フィルタ 一般的にフィルタとは、ろ紙を使ったろ過機を言いますが、「特定の周波数範囲を通過させたり阻止したりする装置や回路。ろ波器」という意味もあります(「フィルターとは何？ Weblio辞書」)。これは、今の場合で言うと […]
続きを読む5：マイク入力と録音 p5.sound.js サウンド
マイク入力 コンピュータのマイクから音声入力を取得し、それを使って円を浮かせます。 ノート：p5.AudioInは自分自身のp5.Amplitudeオブジェクトを含んでいるので、p5.Amplitudeを作成せずに、p5 […]
続きを読む4：サウンドの作成と加工(エンベロープ) p5.sound.js サウンド
ノイズドラム エンベロープ ホワイトノイズは、周波数スペクトルのあらゆる部分で等しいエネルギーを持つランダムなオーディオ信号です。 * エンベロープは、時間 / 値のペアとして定義される、一連のフェード(増減)です。 * […]
続きを読む3：サウンドの再生 p5.sound.js サウンド
以降のサンプルはp5.jsの「Examples」ページの[Sound]項からのものです。基本的に、サンプルコードはそのまま使用し、その下に実行結果と解説を示しています。 サウンドの読み込みと再生 preload()関数で […]
続きを読む2：サウンドアプリ p5.sound.js サウンド
p5.sound.jsはJavaScriptを使って、ブラウザが持つWeb Audioの機能にアクセスしますが、サウンドの操作や作成、加工の方法はp5.sound.jsオリジナルのものではなく、サウンドの理論にもとづく、 […]
続きを読む1：音について p5.sound.js サウンド
サウンド、つまり音は、空気の振動です。たとえば花火は、その爆発によって空気が振動し、それが空気中を伝わって耳の鼓膜を震わせるので、音として知覚します。 音は振動で、振動とは行って帰ってを繰り返すことなので、波で表されます […]
続きを読むp5.sound.js サウンド ライブラリ
p5.jsでは、Webブラウザでサウンドを容易に扱えるようにするためのp5.sound.jsライブラリが提供されています。ただ音を鳴らしたいだけなら無用の長物でしょうが、p5.sound.jsライブラリを使うと、頑張れば […]
続きを読む18：ハロー p5(Hello p5)
描画 生成的描画プログラム。 (注：入門的な「ハローp5」カテゴリに含まれてはいますが、内容は上級者向けです) sketch.js // すべてのパス let paths = []; // 今描いているかどうか let […]
続きを読む17：高度なデータ(Advanced Data)
保存されたJSONの読み込み Bubbleクラスを作成し、JSONファイルからのデータを使って、複数の泡(バブル)をインスタンス化し、結果を画面に表示します。Webブラウザがファイルを保存する場所はブラウザによって異なる […]
続きを読む16：入力(Input)
時計 現在の時刻は、second()やminute()、hour()関数で読み取ることができます。このサンプルでは、 sin()とcos()値を使って、時計の針の位置を設定しています。 let cx, cy; // 時計 […]
続きを読む15：タイポグラフィ(Typography)
タイポグラフィ(Typography)とは、Webデザインにおいては、「文字を情報として読みやすく伝えやすく、美しく並べる技術」を言うようです(参考：「伝わるサイトは文字のデザインに理由あり。タイポグラフィの基本」)。 […]
続きを読む14：変換(Transform)
移動 translate()関数を使用すると、キャンバス内のどこにでもオブジェクトを移動させることができます。１つめのパラメータはX軸のオフセットを設定し、２つめのパラメータはY軸のオフセットを設定します。このサンプルは […]
続きを読む13：描画(Drawing)
連続線 マウスのクリック&ドラッグで線が描けます。 function setup() { createCanvas(710, 400); background(102); // 線の色は最初白 stroke(‘ […]
続きを読む12：モーション (Motion)
斜面に対する反射 processing.org/examplesからの、David Blitzによる”Reflection 1“サンプルの移植版。式(R = 2N(N・L)-L)にもとづく。Rは反 […]
続きを読む11：オブジェクト (Objects)
オブジェクト Jitterクラスを作成し、オブジェクトをインスタンス化すると、画面をもぞもぞ動きます。Casey Reas、Ben Fry共著による「Processingをはじめよう 第2版」からの出典。 sketch. […]
続きを読む10：インタラクション (Interaction)
インタラクションとは、「インタラクションの用語説明」ページに、次のように説明されています。 インタラクションとは英語の「 inter（相互に）」と「action（作用）」を合成したもので、その基本は「人間が何かアクション […]
続きを読む９：シミュレーション 2/2 (Simulate)
p5.jsサンプルの「Simulate」項の解説として、このページでは、「ソフトボディ」、「煙のパーティクル」、「ブラウン運動」、「ばねのチェーン」、「雪の華(スノーフレーク)」、「ペンローズ・タイル」、「再帰的に枝分か […]
続きを読む９：シミュレーション 1/2 (Simulate)
p5.jsサンプルの「Simulate」項の解説として、このページでは、「力」、「パーティクルシステム」、「群れ行動」、「ウルフラム セル・オートマトン」、「ライフゲーム」、「複数のパーティクルシステム」、「スピログラフ […]
続きを読む８：数学(Math)
インクリメントとデクリメント “a++”と記述することは、”a = a + 1″と同じです。”a–“と記述することは、”a […]
続きを読む７：カラー(Color)
カラーモデル p5.jsではRGBカラーモデルがデフォルトなので、fill()やstroke()、background()関数などでは、0から255までの数値でRGB値を指定します。しかしカラーモデルは、colorMod […]
続きを読む６：イメージ(Image)
以降のサンプルをローカルで実行するには、画像ファイルと、動作するローカルサーバーが必要です。 とはいえ、Visual Studio Codeとその機能拡張「Liver Server」を使用すると、簡単に簡易的なローカルサ […]
続きを読む５：制御(Control)
繰り返し for構造を使った繰り返し。同じ形状を反復する図形の描画に利用できます。次の例では、分かりやすいように、p5.jsのサンプルコードを少し書き換えています。 // このプログラムを通して、 矩形の開始位置として […]
続きを読む４：配列(Arrays)
配列 配列はデータのリストです。配列に含まれるそれぞれのデータは、配列内での位置を表すインデックス番号によって識別されます。配列はゼロベースです(0から数え始める)。これは、配列の最初の要素は[0]として、２つめの要素は […]
続きを読む3：データ(Data)
変数 変数は値の保持に使用されます。次のサンプルでは、変数の値を変更して、その構成に影響を与えています。 function setup() { createCanvas(720, 400); background(0); […]
続きを読む２：形(Form)
点と線 点と線は基本的なジオメトリ(形状)の描画に使用できます。次のサンプルの変数dの値を変更すると、形状を拡大縮小することができます。４つの変数は、dの値にもとづいて位置を設定します。 function setup() […]
続きを読む１：構造(Structure)
座標 画面に描画されたシェイプすべて、座標として指定された位置を持ちます。すべての座標は、原点からの距離としてピクセル単位で計測したものです。原点[0、0]はウィンドウの左上の座標であり、右下の座標は[width-1、h […]
続きを読むp5.js サンプル解説
本カテゴリーでは、p5.jsサイトのExamplesページで公開されているp5.jsのサンプルを見ていきます。
続きを読む9_5：p5.play 「Jumper」プラットフォームゲーム
本稿では、「Game Programming」サイトの「Game Examples」ページで公開されている「Jumper」ゲームサンプルを見ていきます。 「Jumper」はプラットフォームゲームと呼ばれるジャンルに属する […]
続きを読む9_4：p5.play 「Angry Birds」もどきの「Angry Bernie」ゲームサンプル
本稿では、「Game Programming」サイトの「Game Examples」ページで公開されている「Angry Bernie」ゲームサンプルを見ていきます。 「Game Examples」ページによると、「Ang […]
続きを読む9_3：p5.play 「ブロック崩し」 ゲームサンプル
「ブロック崩し」(Breakout)は「ゲームカタログ@Wiki」によると、次のように説明されています。 特徴・評価点 ゲームとしては「パドル（つまみ型）コントローラーでパドルを操作し、ボールを跳ね返して画面上部にあるブ […]
続きを読む9_2：p5.play 「アステロイド」 ゲームサンプル
「アステロイド」(Asteroids)は「ゲームカタログ@Wiki」によると、次のように説明されています。 基本ルール ゲームシステムは、「自機を操作し、画面内に浮遊する複数の隕石（敵）をショットにてすべて破壊すればステ […]
続きを読む9_1：p5.play 「ポン」 ゲームサンプル
「ポン」(Pong)は「ゲームカタログ@Wiki」によると、次のように説明されています。 システム 対戦プレイ専用 互いにダイヤル状のツマミ(パドル)を使って縦長のバー(自機)を操作し、ドット(ボール)を弾きあってプレイ […]
続きを読む9：p5.play ゲームサンプル
本稿では、p5.playのサンプルページや「Game Programming」サイトの「Game Examples」ページで公開されているp5.js、p5.play.jsを使ったゲームサンプルを見ていきます。
続きを読む8_3：p5.play マウス操作に関するプロパティ
mouseIsOverとmouseIsPressed スプライトはmouseIsOverとmouseIsPressedプロパティを持っていて、mouseActiveプロパティを有効化することで、動作するようになります。 […]
続きを読む8_2：p5.play マウス操作に関するイベントハンドラ
onMouseOverとonMouseOut スプライトは、onMouseOverイベントハンドラプロパティと、それに対応するonMouseOutイベントハンドラプロパティを持っています。 スプライトのコライダー上にマウ […]
続きを読む8_1：p5.play マウス操作に関する関数
p5.play.jsのマウス操作に関する関数には次のものがあります。いずれもページ上のマウスダウンやマウスアップに応答する関数です。 リファレンスメモ p5.play.mouseDown() mouseDown ( bu […]
続きを読む8：p5.play マウス操作に対する応答
p5.play.jsには、p5.jsとは異なる、マウス操作に対する応答の仕組みが設けられています。これは、 マウス操作に関する関数 マウス操作に関するイベントハンドラ マウス操作に関するプロパティ に分けることができます […]
続きを読む7_3：p5.play スプライトの点やピクセルに対する重なりチェック
p5.play.jsの当たり判定はスプライトのコライダーを使って行われますが、このとき任意の点(マウスカーソルの位置)やスプライトの内の不透明なピクセルの点に対して衝突チェックを行うこともできます。 具体的にいうと、下図 […]
続きを読む7_2：p5.play スプライトの跳ね返り
たとえば、ボールを転がして、それが壁に当たって戻って来る、という跳ね返りを想像しただけでも、ボールのスピードや地面との摩擦、ボールが壁に当たるときの角度、ボールの重さなど、物理学的な知識や計算が必要になりそうに思えます。 […]
続きを読む7_1：p5.play スプライトの当たり判定
ゲーム制作に当たり判定(衝突の検出)は付き物です。これは逆から見た場合、当たり判定を学ぶと制作物に途端に”ゲーム感”が生まれる、ということです。p5.play.jsの場合、Spriteオブジェクトのoverlap()やc […]
続きを読む6：p5.play Group オブジェクト
p5.playには、同種のスプライトをまとめて管理するのに便利なGroupオブジェクトがあります。 リファレンスメモ Group p5.playのグループ(Group)は同様の振る舞いを持つスプライトの集まりで、グループ […]
続きを読む5_6：p5.play スプライトのドラッグ
通常のJavaScriptと異なり、p5.jsやp5.play.jsの出来事はどれもキャンバスの中で起こります。したがって、p5.jsやp5.play.jsでは、何かをドラッグするというよりも、何かをドラッグしているよう […]
続きを読む5_5：p5.play スプライトの削除
スプライトはキャンバスから外に出て見えなくなっても、存在しつづけています。外に出て見えなくなったそのスプライトをまた表示しないのであれば、そのスプライトは削除すべきです。削除しないとメモリの無用な消費になります。 スプラ […]
続きを読む5_4：p5.play スプライトの移動
p5.play.jsでは、アニメーションが楽に作成できるようにするため、特にSpriteオブジェクトのプロパティやメソッドに多くの工夫がなされています。たとえばSprite.velocityは、draw()関数が1回呼び […]
続きを読む5_3：p5.play スプライトのアニメーションの変更
スプライトには複数のアニメーションを追加することができ、表示するアニメーションを変更することができます。たとえば、スプライトに鳥の怪物がホバリングしているidleアニメーションと、獲物を襲うattackアニメーションを追 […]
続きを読む5_2：p5.play スプライトの外見
スプライトはデフォルトで、毎回色の変わるプレースホルダ矩形として表示されますが、イメージやアニメーションに置き換えることもできます。以降ではスプライトの外見を表示する方法を順にみていきます。 プレースホルダ矩形 最も基本 […]
続きを読む5_1：p5.play.Sprite オブジェクト
p5.playにはSpriteオブジェクトが定義されています。 Sprite Spriteオブジェクトはp5.playの主要な構成要素で、イメージやアニメーションが保持でき、位置や可視性などのプロパティのセットを持つ。S […]
続きを読む4：p5.play.SpriteSheet オブジェクト
p5.playにはSpriteSheetオブジェクトが定義されています。 SpriteSheet スプライトシートとそのすべてをフレームを表す。Animationオブジェクトか、静的な単一の描画フレームとともに使用する。 […]
続きを読む3_2：p5.play.Animationオブジェクトのメソッドとプロパティ
Animationオブジェクトにはplay()やstop()のほかにもメソッドやプロパティがあり、詳細はp5.playのリファレンスページで読むことができます。以降では、主なメソッドとプロパティを見ていきます。 next […]
続きを読む3_1：p5.play.Animationオブジェクトの再生と停止
Animationオブジェクトの再生(Animationオブジェクトが内部にフレーム番号付きで並べて持つ、読み込んだPNG画像のイメージの連続描画)は、デフォルトで有効になっています。Animationオブジェクトの再生 […]
続きを読む3：p5.play.Animationオブジェクト
p5.play.jsには、次のAnimationオブジェクトが定義されています。 Animation Animationオブジェクトは、連続して表示できる一連のイメージ(p5.Image)を自身の中に含む。すべてのファイ […]
続きを読む2_2：p5.play スプライトシート アニメーションの基本
スプライトシートアニメーションの基本的な手順 アニメーションの表現では、たとえばゲームキャラクターの動きなどに”スプライトシート”がよく使用されます。スプライトシートとは、動かしたいアニメーションの全フレーム(コマ)を１ […]
続きを読む2_1：p5.play アニメーションの基本
基本的な手順 p5.jsのキャンバスに、p5.play.jsを使ってアニメーションを描画する基本的な手順は次の通りです。 アニメーションに使用するPNG画像を用意する。 p5.jsのpreload()関数で、p5.pla […]
続きを読む1_1：スタート p5.play
プロジェクトのひな型 本カテゴリーでは、次のファイル構造を１つのプロジェクトとして使用することにします。 プロジェクトフォルダ(１つのWebアプリに必要なファイルを全部まとめたフォルダ)は次の要領で作成します。 デスクト […]
続きを読む1：p5.playとは？
本カテゴリーでは、p5.playサイトで公開されているサンプルを元に、p5.playを探っていきます。 p5.playトップページより p5.playは、ゲームや遊び用のプログラムを作るためのp5.jsライブラリです。p […]
続きを読む14：ゲーム制作に役立つp5.play速習 Creative Coding p5.js
アリソンパリッシュによる このチュートリアルでは、パオロ・ペデルチーニのp5.playライブラリを紹介します。このチュートリアルはいささか独断的で、p5.playを面白くする機能の多くを取り上げていません。このライブラリ […]
続きを読む13_1：RiTaJS 入門 Creative Coding p5.js
アリソンパリッシュによる このチュートリアルでは、ダニエルハウと貢献者チームによる、p5.jsと互換性のあるJavaScriptライブラリであるRiTaJSの機能のいくつかを示します。その過程では、オブジェクトとデータに […]
続きを読む13：外部ライブラリの使用 Creative Coding p5.js
アリソンパリッシュによる １つのプログラミングフレームワークに詰め込むことのできる機能性は限られており、p5.jsにも多くの機能が備わっていますが、全部が含まれているわけではありません。このチュートリアルでは、p5.js […]
続きを読む12_2：ビデオの操作 Creative Coding p5.js
アリソンパリッシュによる p5.jsフレームワークは、スケッチでのビデオ再生制御を容易にします。 ビデオとWebブラウザ コンピュータのビデオと言うと、通常はビデオファイル、つまり動画のエンコーディングされたデータを含む […]
続きを読む12_1：コントロール要素 Creative Coding p5.js
アリソンパリッシュによる p5.jsフレームワークを使用すると、スケッチを含むページに、HTML5のインターフェース要素が簡単に追加できます。追加したインターフェース要素を使用すると、ユーザーがスケッチを制御できるように […]
続きを読む11：テキストと文字表現 Creative Coding p5.js
アリソンパリッシュによる このチュートリアルでは、p5.jsを使ってスケッチにテキストを表示する方法と、テキストのさまざまなサイズやフォントの形状にもとづいて、スケッチに異なる振る舞いを与える方法を見ていきます。また、テ […]
続きを読む10：オブジェクトの工場としてのクラス Creative Coding p5.js
アリソンパリッシュによる (まだ書きかけ。。。) 場合によっては、同じ基本シェイプを持つ多数のオブジェクトを作成する必要が生じるかもしれません。想像されている通り、これを実現する良い方法は、オブジェクトを返す関数の作成で […]
続きを読む9：メソッドを持つオブジェクト Creative Coding p5.js
アリソンパリッシュによる このセクションでは、オブジェクトの新しい側面、つまりオブジェクトはメソッドを持つことができるという事実を見ていきます。メソッドは通常の関数とよく似ていますが、メソッドにはどの値に対して作用をする […]
続きを読む8：関数のつづき Creative Coding p5.js
アリソンパリッシュによる パラメータ 前に関数について述べたとき、記述した関数は、一連のステートメントを再利用できるようにすることを意図したものでした。関数には、関数を呼び出すコードから関数に値を渡せるようにすることで、 […]
続きを読む7：配列とオブジェクト Creative Coding p5.js
アリソンパリッシュによる このチュートリアルでは、スケッチ内のユーザーアクションに関する情報を保持する方法を見ていきます。これを実現するには、配列とオブジェクトという新しいプログラミング概念について知る必要があります。 […]
続きを読む6：メディア イメージとサウンド Creative Coding p5.js
アリソンパリッシュによる このチュートリアルでは、既存のメディアをスケッチに読み込む方法について見ていきます。 イメージ p5.jsで画像を読み込みイメージとして表示するのは簡単です。以下のサンプルでは、PNGかJPEG […]
続きを読む5：変換と関数 Creative Coding p5.js
アリソンパリッシュによる このチュートリアルでは、変換の使用方法を見ていきます。変換は、シェイプを画面のどこにどのようにして描画するかを変更するための便利で洗練されたテクニックです。また、関数を記述する基本も見ていきます […]
続きを読む4_2：インタラクション Creative Coding p5.js
アリソンパリッシュによる このチュートリアルでは、p5.jsを使った、ユーザー入力に応答するスケッチを作成する方法を学びます。 ビルトインProcessing変数 前のチュートリアルでは、スケッチで変数を作成する方法を、 […]
続きを読む4_1：経時的変化 Creative Coding p5.js
アリソンパリッシュによる このチュートリアルでは、時間の経過とともに変化する、簡単なp5.jsスケッチの作成方法を見ていきます。しかしその前に、Processingにおける時間の働きについて少し説明しておく必要があります […]
続きを読む3：式、変数、ループ Creative Coding p5.js
アリソンパリッシュによる 前のチュートリアルでは、p5.jsのダウンロード方法と初めてのスケッチの作成方法を見ました。このチュートリアルでは、コンピュータプログラムの基本的な概念である、式と変数、ループについて見ていきま […]
続きを読む2：p5.js 初めの一歩 Creative Coding p5.js
アリソンパリッシュによる このチュートリアルは、初めてのp5.jsスケッチを作成しインターネットにアップロードするまでの手順を示します。 p5.jsとは？ p5.jsは、クリエイティブコーディングに向けたJavaScri […]
続きを読む1：ブラウザのコンソール内のJavaScript Creative Coding p5.js
このチュートリアルでは、JavaScriptプログラミング言語の基本をWebブラウザのJavaScriptコンソールを使ってみていきます。 Webブラウザの秘密の言語 Webブラウザは、Webページを見たり、ハイパーリン […]
続きを読むクリエイティブ コーディング Creative Coding p5.js
本稿は「Creative Coding」ページで公開されているJavaScriptプログラミングに関する記事の訳文です。 わたしはアリソン・パリッシュです。本稿は元々、わたしが2015年、NYUのIDMプログラムで受け持 […]
続きを読む12：キャンバスを超えて p5.dom.js JavaScript
本稿は、p5.jsに追加して組み込むことで、キャンバス以外のHTML要素へのアクセスや操作を可能にするp5.dom.jsについて述べた「Beyond the canvas」の訳文です。 createCanvas()関数は […]
続きを読む11_2：JSONデータ p5.js JavaScript
JSON(JavaScript Object Notation)形式もまた、データの保持によく使用されるシステムです。HTMLやXML形式のように、要素はそれに関連付けられたラベルを持ちます。たとえば、映画のデータを表す […]
続きを読む11_1：表データ p5.js JavaScript
データセットは行と列として保持される場合が多くあるので、p5.jsでもその扱いを容易にするp5.Tableオブジェクトが提供されています。行と列で構成されるスプレッドシート(Excelなどで言う表)を扱ったことがあれば、 […]
続きを読む11：データ p5.js JavaScript
データの視覚化は、コードとグラフィックスが交わる最も活発な分野で、p5.jsで最も人気のある用途の１つです。 データの視覚化でよく使用されるソフトウェアの代表格はMicrosoft Excelでしょう。Excelの機能を […]
続きを読む10_4：ロボットの配列 p5.js JavaScript
配列を使用すると、多数ある要素が扱いやすくなります。 次のリンクをクリックすると、実際の動作が確認できます。「ロボットの配列」 let robotImage; const bots = []; // Robotオブジェク […]
続きを読む10_3：オブジェクトの配列 p5.js JavaScript
以下の２つは、これまで見てきた変数、繰り返し、条件、関数、オブジェクト、配列というプログラミングの主要概念を全部取り入れたサンプルです。オブジェクトの配列の作成はこれまで見てきた配列の作成とほとんど同じですが、要素がオブ […]
続きを読む10_2：繰り返しと配列 p5.js JavaScript
forループを使用すると、コードの簡潔性を保ちながら、大きな配列の扱いが簡単になります。それは、配列の各要素の位置に１つずつ移動するループを記述する、というアイデアによります。そのためには、配列の長さを知る必要があります […]
続きを読む10_1：配列の作成 p5.js JavaScript
配列に含まれる各項目は要素と呼ばれ、要素はそれぞれ、配列内のその要素の位置を示すインデックス値を持ちます。キャンバスの座標と同じように、配列のインデックス値も0から数え始めます。たとえば、配列の最初の要素はインデックス値 […]
続きを読む10：配列 p5.js JavaScript
配列は、共通の名前を共有する、変数のリストです。新しい名前を逐一作成せずに多くの変数が扱えるので非常に便利です。これにより、コードは短く読みやすくなり、更新も容易になります。 変数から配列へ プログラムで１つか２つの物事 […]
続きを読む9_1：OOP型ロボット p5.js JavaScript
ソフトウェアオブジェクトは、メソッド(関数)とプロパティ(変数)を1つの単位にまとめたものです。次のサンプルのRobotクラスでは、作成するロボットオブジェクトのすべてを定義しています。１つ１つのRobotオブジェクトは […]
続きを読む9：オブジェクト p5.js JavaScript
オブジェクト指向プログラミング(OOP)はプログラムについて考える、また別の方法です。オブジェクトはまた、変数をそれと関係する関数とグループ化する方法でもあります。変数や関数の扱いに慣れてくると、オブジェクトは単に、これ […]
続きを読む8_4：関数でロボットを作成する p5.js JavaScript
次のサンプルでは、関数を使って、４つの異なる形状をしたロボットを同じプログラム内で作成しています。draw()内にdrawRobot()関数が４回現れるので、drawRobot()のブロックが４回実行され、関数にはそのた […]
続きを読む8_3：値を返す p5.js JavaScript
関数は、計算した結果の値をメインのプログラムに返すことができます。これまでに使用してきたrandom()やsin()はこのタイプの関数です。このタイプの関数を使うときには、返される値(戻り値)を変数に割り当てます。 le […]
続きを読む8_2：関数の作成 p5.js JavaScript
本稿では、フクロウの描画を通して、関数の作成に必要な手順を見ていきます。 フクロウの描画 フクロウを描画するコードの例です。 function setup() { createCanvas(480, 120); } fu […]
続きを読む8_1：関数の基本 p5.js JavaScript
コンピュータはプログラムのコードを１行ずつ実行します。関数を実行するときには、関数が定義されている場所にジャンプしてそこに書かれているコードを実行し、終わったらジャンプした元の場所に戻ってそこから実行をつづけます。 fu […]
続きを読む8：関数 p5.js JavaScript
p5.jsプログラムにとって関数は欠かせない基本要素で、これまで見てきたどのプログラムでも使用しています。たとえばcreateCanvas()やline()、fill()などは頻繁に使用しています。以降では、新しい関数を […]
続きを読む7_7：震えるロボット p5.js JavaScript
random()とsin()関数を取り入れて、ロボットを震えさせるサンプルです。 毎フレーム、-4から4未満のランダムな値がx座標に、-1から1未満のランダムな値がy座標に加算されるので、ロボットは上下よりも左右に多く震 […]
続きを読む7_6：円運動 p5.js JavaScript
三角関数のサインとコサインは連続する滑らかなモーションに利用できます。 サインとコサインと円 サイン(sin)とコサイン(cos)は、角度θに対する半径1の円周上の点が座標(cosθ, sinθ)にあることを言います。し […]
続きを読む7_5：タイマー p5.js JavaScript
すべてのp5.jsプログラムは、スタートしてから経過した時間量をミリ秒単位で数えます(1ミリ秒は1/1000秒)。このカウンタを使用すると、ある特定のタイミングでアニメーションを引き起こすことができます。millis() […]
続きを読む7_4：ランダム p5.js JavaScript
滑らかな線形モーションはどのコンピュータでも同じように描画されますが、現実世界の事物はそれぞれの動きをしています。たとえば地面にひらひらと落ちる葉っぱや荒れ地をはう蟻は、どれ１つとして同じ動きをしていないように見えます。 […]
続きを読む7_3：トゥイーン p5.js JavaScript
シェイプをある位置から別に位置に、アニメーションして移動させたい場合、そのスタート位置と終了位置を設定し、その間の位置を毎フレーム計算して、描画します。「トゥイーン」とはFlashから生まれた言葉で、あるものとあるもの間 […]
続きを読む7_2：速度と方向 p5.js JavaScript
右に少しずつ移動する 左から右に少しずつ、移動するモーションのコードは次のように記述できます。 // x軸方向への移動 // シェイプの半径 const radius = 40; // シェイプの最初のx値 let x […]
続きを読む7_1：フレーム p5.js JavaScript
p5.jsでは、滑らかなモーションを生み出すために、draw()関数内のコードを毎秒60フレームで実行しようとします。フレームとはdraw()関数を通り抜ける一瞬で、フレームレートは毎秒何フレーム描画されるかを表します。 […]
続きを読む7：モーション p5.js JavaScript
パラパラ漫画と同様に、画面のアニメーションは、あるイメージを描画し、次いでそれと少しだけ違ったイメージを描画することの連続で作成されます。滑らかなモーション(動き)の錯覚は残像によって生み出されます。同じように見えて少し […]
続きを読む6_7：SVGロボット p5.js JavaScript
下図の３体のロボットは、これまでのように線や矩形で作成したものではなく、ベクター描画プログラムで作成されたSVGイメージを読み込んだものです。シェイプの作成は多くの場合、コードを使って定義するよりもInkscapeやIl […]
続きを読む6_6：カスタムフォントの使用 p5.js JavaScript
p5.jsでは、TrueType(.ttf)フォントとOpenType(.otf)フォントを使ったテキストが描画できます。どちらかのタイプのカスタムフォントが用意できると、HTMLやsketch.jsといっしょにサーバー […]
続きを読む6_5：Webフォントの使用 p5.js JavaScript
システムフォント以外に、フォントを提供者からダウンロードして使用する選択肢もあります。これはWebフォントと呼ばれ、GoogleFontsが有名です。 GoogleFontsのWebフォントを使用するには次のようにします […]
続きを読む6_4：フォント p5.js JavaScript
p5.jsではデフォルト以外の多くの書体でテキストが描画できます。書体を表すフォントは、コンピュータにインストールされているフォント(システムフォント)ならどれでも使用できます。ただし、ほかの人が見たときにも同じ書体で描 […]
続きを読む6_3：コールバック関数の使用 p5.js JavaScript
ここまで、画像を読み込むときには、loadImage()関数をpreload()関数内に置いて、読み込みが終わってからsetup()関数に進んでいました。しかしloadImage()やloadJSON()、loadFon […]
続きを読む6_2：GIFとPNG、SVG p5.js JavaScript
p5.jsでは、JPEG、GIF、PNG形式と、SVG形式の画像を読み込んで表示することができます。 JPEG、GIF、PNG形式の画像はラスター画像と呼ばれます。これは、画面の小さなドット(ピクセル)に色を付けていくこ […]
続きを読む6_1：イメージ p5.js JavaScript
イメージを画面に描画するには、次の手順を取ります。 イメージを用意し適切な場所に配置する。 イメージを保持する変数を作成する。 loadImage()関数でイメージを変数に読み込む。 注意が必要なのは、読み込んだJPGや […]
続きを読む6：メディア p5.js JavaScript
p5.jsでは、単純な線やシェイプの描画に留まらず、さまざまなことが行えます。以降では写真や図、文字のさまざまな書体表現に活かせる、p5.jsのイメージやテキストの作成方法を見ていきます。 注意 ここまで行ってきたキャン […]
続きを読む5_7：ロボットに変換を組み込む p5.js JavaScript
「4_8：応答するロボット p5.js JavaScript」で作成したロボットに、translate()とrotate()、scale()関数を組み込みます。 次のリンクをクリックすると、実際の動作が確認できます。「ロ […]
続きを読む5_6：変換状態の保存と復元 p5.js JavaScript
変換の効果が以降の関数に影響しないように分離させることができます。push()関数は現在の座標システムのコピーを保存し、pop()関数は保存した座標システムを復元します。これらの関数は、あるシェイプにだけ特定の変換が必要 […]
続きを読む5_5：拡大縮小(scale) p5.js JavaScript
scale()関数はキャンバスの座標を引きのばしたり縮めたりします。スケール(縮尺比)の変化に合わせて、座標が伸縮するので、キャンバスの描画物すべてのサイズが大きくなったり小さくなったりします。スケールの量は小数点付きの […]
続きを読む5_4：連結アーム p5.js JavaScript
translate()とrotate()とline()の組み合わせを３回行って、３つの線が互いにつながった連結アームのようにアニメーションするサンプルです。 次のリンクをクリックすると、実際の動作が確認できます。[連結ア […]
続きを読む5_3：移動(translate)と回転(rotate) p5.js JavaScript
translate()とrotate()関数を組み合わせて使用すると、描画物に対する制御力が高まります。そのとき重要なのが、これらを呼び出す順番です。座標システムを移動してから回転させるのと、座標システムを回転させてから […]
続きを読む5_2：回転(rotate) p5.js JavaScript
rotate()関数は座標システムを回転させます。引数には角度(ラジアン単位)を取り、(0, 0)に対しての、つまり原点を中心とした回転を作成します。 // 赤の矩形 fill(255, 0, 0); rect(20, […]
続きを読む5_1：移動(translate) p5.js JavaScript
座標変換は実際には、相当な数学的難問で、高校数学程度の知識(行列や三角関数など)が必要になりますが、p5.jsでは専用の関数が用意されているので、それらを適切に呼び出すだけで実現できます。とは言え、その舞台裏で行われてい […]
続きを読む5：移動、回転、拡大縮小 p5.js JavaScript
キャンバス上での描画物の位置取りと移動にはまた、キャンバスの座標システムを変更するというテクニックがあります。たとえばシェイプは右に50ピクセル移動することができますが、これは、座標の原点(0,0)を50ピクセル右に移動 […]
続きを読む4_8：応答するロボット p5.js JavaScript
「3_3：p5.js ロボット四変化」のロボットが、マウスの移動とクリックに応答するバージョンです。 次のリンクをクリックすると、実際の動作が確認できます。「応答するロボット」 let x = 60; let bodyH […]
続きを読む4_7：マッピング(対応付け) p5.js JavaScript
プログラミング用語として「マッピング」という単語が使われますが、これは日本語で言うと、「あれとこれを対応付ける」というような意味です。たとえば、キャンバスの幅が1920ピクセルあって、mouseXの値を、キャンバスの背景 […]
続きを読む4_6：応答：キー p5.js JavaScript
p5.jsは、キーボードのいずれかのキーが押し下げられているかどうかを追跡します。システム変数のkeyIsPressedは、何らかのキーが押し下げられているときtrueを返し、どのキーも押し下げられていないときにfals […]
続きを読む4_5：応答：カーソル p5.js JavaScript
マウスカーソルの位置(mouseX、mouseY)を使って、描画内容を変更する例です。 線をカーソルに近づける キャンバスにマウスカーソルを重ねると、縦線がカーソルに近づいてきます。同時に縦線の進行方向を示す矢印が描画さ […]
続きを読む4_4：応答：クリック p5.js JavaScript
p5.jsには、mouseX、mouseY、pmouseX、pmouseYに加え、mouseIsPressedというシステム変数があります。mouseIsPressedを使うと、今マウスがWebページ上で押されているかど […]
続きを読む4_3：応答：イージングの導入 p5.js JavaScript
Webアニメーションでは、ある位置からある位置に移動するとき、目的地にすぐにではなく少し間をとってから到達したり、だんだん速くなったり(加速)、だんだん遅くなったり(減速)するものがよく見られます。これはイージングと呼ば […]
続きを読む4_2：応答：マウスを追跡 p5.js JavaScript
draw()関数は１秒間に60回呼び出されつづけるので、キャンバスをその頻度で再描画しつづけるキャンバスアニメーションの表現に適しています。 マウスを追跡 p5.jsのシステム変数であるmouseXは現在のマウスカーソル […]
続きを読む4_1：応答： p5.js draw()関数を詳しく
「1_2：p5.js 円を描く」で見たように、draw()関数は、setup()関数の後、何度も繰り返し呼び出される、p5.jsの特別な関数です。 draw()関数内のコードは上から下に実行され、ウィンドウが閉じられるな […]
続きを読む3_3：p5.js ロボット四変化
「2_8：p5.js Robotの描画」で見たロボットを描画するコードに変数を追加し、代入する数値を変えることで、ロボットの見た目を変化させるサンプルです。 変更する変数は次の３つです。 // パターン1 const y […]
続きを読む3_2：p5.js アートサンプル
widthとheight p5.jsのwidthとheightは「3_1：p5.js 変数」で見たように、特別なシステム変数です。widthには描画するキャンバスの幅が、heightには高さが自動的に割り当てられます。 […]
続きを読む3_1：p5.js 変数
変数は、後からプログラムで利用できるようにするために、メモリに値を保持します。変数は１つのプログラム内で何度でも使用でき、その値はプログラムの実行中に簡単に変更できます。変数を使用する大きな理由は、コード内での同じことの […]
続きを読む2_8：p5.js Robotの描画
線や円、矩形を組み合わせてロボットを描画するサンプルです。 キャンバスに”それ風に見えるもの”を描画するときには、できれば方眼紙や定規などを使って、何のパーツをどこにどんな大きさで描くかを前もってデザインしておくようにし […]
続きを読む2_7：p5.js シェイプを手作りする
いささか手数がかかりますが、vertex()関数とbeginShape()、endShape()関数を組み合わせることで、カスタムシェイプが描画できます。 function setup() { createCanvas( […]
続きを読む2_6：p5.js カラーの設定
シェイプの線と塗りの色 シェイプの線と塗りの色は、stroke()関数とfill()関数で設定できます。次のサンプルでは、stroke()にもfill()にも0から255までの数値を１つだけ渡しているので、グレーの濃さの […]
続きを読む2_5：p5.js シェイプの属性の設定
描画するシェイプ(形状)の属性は専用の関数で設定できます。 ストロークの太さ デフォルトでは、ストローク(線や円、四角形などの枠線)の幅は1ピクセルですが、これはstrokeWeight()関数で変更できます。 func […]
続きを読む2_4：p5.js 楕円(円)、円弧を描く。度とラジアンの扱い。
楕円(円) 矩形の(x, y)座標は矩形の左上隅を設定しますが、楕円の(x, y)座標は楕円の中心を設定します。次のサンプルでは、大きな楕円はキャンバスのサイズを超えていますが、p5.jsはエラーを発生させることなく、そ […]
続きを読む2_3：p5.js 線、四角形、三角形、長方形を描く
p5.jsには、基本的なシェイプ(形状)を描く関数が定義されているので、三角形や四角形などを簡単に描画することができます。また線を描いてつなぎ合わせる方法で、複雑な形状を作ることもできます。 線 function set […]
続きを読む2_2：p5.js 点を描く
キャンバスに点を描画するには、point()関数を使用します。次のコードはキャンバスの真ん中に1ピクセルの点を描画します。 function setup() { createCanvas(480, 120); } fun […]
続きを読む2_1：p5.js 描画
p5.jsが得意とするビジュアル表現には、HTML5の<canvas>要素が使用できます。<canvas>要素は前出のcreateCanvas()関数で作成します。createCanvas()関数 […]
続きを読む1_3：p5.js 複数の円をマウスで描く
次のJavaScriptコードをsketch.jsに記述します。 function setup() { createCanvas(480, 120); } function draw() { console.log(mo […]
続きを読む1_2：p5.js 円を描く
p5.jsを使用するには、p5.jsライブラリをWebブラウザに読み込む必要があります。そのためには、次の<script>タグを、<head>タグ内に挿入します。 <script src=” […]
続きを読む1_1：p5.js スタート
「processing/p5.js」のp5.js overviewには、次のように書かれています。 p5.jsは、アーティストやデザイナー、教育者、初心者などがプログラミングをする際、そのコードの記述のハードルをできるだ […]
続きを読む11_5：ml5.js SketchRNN 絵を描く ml5.js JavaScript
モデルの絵を描くには、ml5.js SketchRNNモデルのgenerate()メソッドに指定したコールバック関数(gotStroke)に渡されるstrokesオブジェクトを使用します。strokesは次のプロパティを […]
続きを読む11_4：ml5.js SketchRNN 最初の線を描画する ml5.js JavaScript
SketchRNNモデルのgenerate()メソッドに渡したコールバック関数には、第２引数としてモデルの線の情報を持つオブジェクト(strokes)が渡されます。そのオブジェクトをconsole.log()で出力すると […]
続きを読む11_3：ml5.js SketchRNN 描く線の最初のデータを得るまで ml5.js JavaScript
ml5.jsでは、数式で表されるような機械学習の難しい側面が隠されているので、このSketchRNNを扱うときでも、あらかじめ用意された関数やメソッドを適切に操作するだけで、興味をそそる面白い体験を得ることができます。 […]
続きを読む11_2：ml5.js SketchRNNの基本サンプル ml5.js JavaScript
本稿は「ml5-examples/p5js/SketchRNN/SketchRNN_basic」のサンプルを元に、適用するモデルをメニューから変更できるようにしたものです。 次のリンクをクリックすると、サンプルの動作を確 […]
続きを読む11_1：ml5.js SketchRNN ml5.js JavaScript
SketchRNNは、Googleの「Quick Draw!」プロジェクトから集められた手描きのイラストを学習させたRNNモデルで、それのml5.jsバージョンが「ml5-library/src/SketchRNN」で公 […]
続きを読む10_3：mobileNetを使ったWebカメラ画像のKNN分類 ml5.js JavaScript
本稿は「ml5-examples/p5js/KNNClassification/KNNClassification_Video」で公開されているサンプルコードの解説です。 次のリンクをクリックすると、実際の動作を確認する […]
続きを読む10_2：ml5.KNNClassifier()の簡単な例 ml5.js JavaScript
ml5.jsのサンプルページには、ml5.KNNClassifier()の例があがっていないので、以下に簡易化した例を示します。 注意 おそらくじきに解決されるものと思われますが、本稿執筆時点では、ml5.jsの新しいバ […]
続きを読む10_1：KNN クラス分類 ml5.js JavaScript
本稿は、「ml5-examples/p5js/KNNClassification」で公開されているサンプルを元に、k近傍法(k-nearest neighbor algorithm, k-NN）と呼ばれる方法で、クラス分 […]
続きを読む9_5：king – man + woman = queen ml5.js JavaScript
Word2vecの有能性を物語る有名な例として、king – man + woman = queenがあります。これは、(単語の意味の上で)kingからmanを引いて、それにwomanを足したものはqueen […]
続きを読む9_4：ml5.word2vec()サンプル ml5.js JavaScript
ml5.jsのWord2vecサンプルは「ml5-examples/p5js/Word2Vec」にあります。以下はサンプルで使用されているデータ(wordvecs10000.json)を使用した、ml5.word2vec […]
続きを読む9_3：似ているか？ 似ていないか？ ml5.js JavaScript
以下は、「単語の意味をベクトルで表現する」を理解するための、”適切ではないかもしれない”簡易的な例です。 「old woman」と「aunt」は、どちらも同じ女性で年もとっているという点で、「old woman」と「gi […]
続きを読む9_2：Word2vecとは？ ml5.js JavaScript
Word2vecとは、グーグルの研究者であるトマス・ミコロフ氏らが提案した、単語の意味をベクトルで表現する方法で、自然言語処理と呼ばれる技術分野に属します。 そもそも「単語の意味をベクトルで表現する」というのが理解に苦し […]
続きを読む9_1：Word2vec(単語の意味をベクトルで表現する) ml5.js JavaScript
word2vec() Word2vecは、単語の分散表現(Word Embeddings)に使用される、関係性のモデルのグループです。このメソッドを使用すると、任意の入力ベクトルに対してベクトル演算を実行することができま […]
続きを読む8_2：YOLOとp5.jsによるリアルタイム物体検出 ml5.js JavaScript
本稿は「ml5-examples/p5js/YOLO」で公開されているサンプルの解説です。 次のリンクをクリックすると、実際の動作が確認できます。「YOLOとp5.jsによるリアルタイム物体検出」 HTML <!D […]
続きを読む8_1：YOLO ml5.js JavaScript
YOLO() You only look once (YOLO、見るのは一度だけ) は最先端のリアルタイム物体検出システムです。 作成者のWebサイトから： これまでの検出システムでは、検出の実行に分類器やローカライザが […]
続きを読む7_3：ビデオに対するPoseNetサンプル(１人の姿勢検出) ml5.js JavaScript
本稿は「ml5-examples/p5js/PoseNet/PoseNet_webcam」で公開されているサンプルの解説です。 コンピュータにとって、ビデオはつながった静止画を高速で表示することと同じなので、ビデオに映っ […]
続きを読む7_2：画像に対するPoseNetサンプル(１人の姿勢検出) ml5.js JavaScript
本稿は「ml5-examples/p5js/PoseNet/PoseNet_image_single」で公開されているサンプルの解説です。 次のリンクをクリックすると、実際の動作が確認できます。「画像に対するPoseNe […]
続きを読む7_1：PoseNet (姿勢検出) ml5.js JavaScript
poseNet() PoseNetは、リアルタイムでの人間の姿勢推定が行える機械学習モデルです。 PoseNetは単一の姿勢推定にも複数の姿勢推定にも使用できます。これは、イメージやビデオの中に人が１人だけいることが検出 […]
続きを読む6_1_2：p5.jsを使ったビデオ画像の画風変換サンプル(Style Transfer) ml5.js JavaScript
本稿は「ml5-examples/p5js/StyleTransfer/StyleTransfer_Video」で公開されているサンプルの解説です。 次のリンクをクリックすると、実際の動作が確認できます。「p5.jsを使 […]
続きを読む6_1_1：p5.jsを使った画像の画風変換(Style Transfer) ml5.js JavaScript
本稿は「ml5-examples/p5js/StyleTransfer/StyleTransfer_Image」で公開されているサンプルの解説です。 次のリンクをクリックすると、実際の動作が確認できます。「p5.jsを使 […]
続きを読む6_1：画風変換(Style Transfer) ml5.js JavaScript
styleTransfer() 画風変換(Style Transfer)は、ある画像のスタイルを別のスタイルに変換できる、機械学習の技術です。これには２つのステップがあり、まずはモデルを特定のスタイルに対して訓練する必要 […]
続きを読む5_1_3：鼻歌音程モニター ml5.js JavaScript
AndroidやiOSアプリの「ボーカル音程モニター」にヒントを得て、「鼻歌音程モニター」なるものを試作しました。 これはピッチやMIDI番号、音程の取得までは前の「5_1_2：ピッチ抽出ピアノ」と同じで、ピッチの数値を […]
続きを読む5_1_2：ピッチ抽出ピアノ ml5.js JavaScript
本稿は「ml5-examples/p5js/PitchDetection/PitchDetection_Piano」サンプルの解説です。 下記リンクをクリックすると、実際の動作が確認できます。このサンプルを試すには、 マ […]
続きを読む5_1_1：ピッチ抽出(Pitch Detection)サンプル ml5.js JavaScript
本稿は「ml5-examples/p5js/PitchDetection/PitchDetection」サンプルの解説です。 下記リンクをクリックすると、実際の動作が確認できます。このサンプルを試すには、 マイクを接続し […]
続きを読む5_1：ピッチ抽出(Pitch Detection) ml5.js JavaScript
pitchDetection() ピッチ抽出アルゴリズムは、音声信号のピッチや基本周波数を推測する方法です。このメソッドを使用すると、訓練済みの機械学習ピッチ抽出モデルを使って、サウンドファイルのピッチを推測することがで […]
続きを読む4_1_2：LSTMの訓練(「不思議の国のアリス」モデルの作成) ml5.js JavaScript
初めに概略を述べておくと、「不思議の国のアリス」風の文章を生成するには、「4_1_1：LSTM 文章生成サンプル」で示したml5.charRNN()の第１引数を、「不思議の国のアリス」のモデルへのパスに変えるだけです。た […]
続きを読む4_1_1：LSTM 文章生成サンプル ml5.js JavaScript
本記事は、「ml5-examples/p5js/LSTM/LSTM_Text」で公開されているサンプルの解説です。このサンプルでは、ヴァージニア・ウルフというイギリスの小説家の文章が使われています。 次のリンクをクリック […]
続きを読む4_1：文章の自動生成 ml5.js JavaScript
charRNN() （LSTMGenerator()） LSTM (Long Short Term Memory、長短期記憶)ネットワークは、たとえばテキストの文字や音楽の音符など、連続しそのつながりの順番が意味を持つデ […]
続きを読む3_1_2：MobileNetによる特徴抽出を使用した画像回帰 ml5.js JavaScript
以下は、「ml5-examples/p5js/FeatureExtractor/FeatureExtractor_Image_Regression」で公開されているサンプルの解説です。 次のリンクをクリックすると、このサ […]
続きを読む3_1_1：MobileNetによる特徴抽出を使用した画像分類 ml5.js JavaScript
以下は、「ml5-examples/p5js/FeatureExtractor/FeatureExtractor_Image_Classification」で公開されているサンプルの解説です。 次のリンクをクリックすると […]
続きを読む3_1：特徴抽出(Feature Extraction) ml5.js JavaScript
featureExtractor() ニューラルネットワークは画像内容の認識に使用できます。画像をある決まったカテゴリーに分類する際、ほとんどの場合は、大きなデータセットで訓練された”訓練済み”モデルを使用することになる […]
続きを読む2_1_5：MobileNetとp5.js、p5.speechを使った音声出力をともなうスカベンジャーハントゲーム ml5.js JavaScript
以下は「ml5-examples/p5js/ImageClassification/ImageClassification_VideoScavengerHunt」で公開されているサンプルのコード解説です。 次のリンクをク […]
続きを読む2_1_4：MobileNetとp5.js、p5.speechを使った音声出力をともなうWebカメラ画像分類 ml5.js JavaScript
以下は「ml5-examples/p5js/ImageClassification/ImageClassification_VideoSound」で公開されているサンプルのコード解説です。 次のリンクをクリックすると、こ […]
続きを読む2_1_3：MobileNetとp5.jsを使ったWebカメラ画像分類 ml5.js JavaScript
以下は「ml5-examples/p5js/ImageClassification/ImageClassification_Video」で公開されているサンプルのコード解説です。 次のリンクをクリックすると、このサンプル […]
続きを読む2_1_2：MobileNetとp5.jsを使った複数画像の分類サンプル ml5.js JavaScript
以下は、「ml5-examples/p5js/ImageClassification/ImageClassification_MultipleImages」で公開されているサンプルのコード解説です。 次のリンクをクリック […]
続きを読む2_1_1：MobileNetとp5.jsを使った画像分類サンプル ml5.js JavaScript
以下は、ml5-examples/p5js/ImageClassification/ImageClassificationで公開されているサンプルのコード解説です。 次のリンクをクリックすると、このサンプルの動作が確認で […]
続きを読む2_1：画像分類(Image Classification) ml5.js JavaScript
imageClassifier() ニューラルネットワークは画像内容の認識に使用できます。ml5.imageClassifier()メソッドは、訓練済みモデルを使って画像を分類するオブジェクトを作成します。 以下のサンプ […]
続きを読む1_2：Promiseとコールバックの使用に関する留意点 ml5.js JavaScript
以下は「A note on using Promises and Callbacks」ページの翻訳文です。 ml5.jsは、p5.jsライブラリのシンタックスやパターン、スタイルに強い影響を受けていますが、ml5.jsが […]
続きを読む1_1：ml5.jsの準備 ml5.js JavaScript
ml5.jsの本家サイトは「ml5js · Friendly Machine Learning For The Web」です。 「ml5-examples/p5js」で公開されているサンプルでは、「p5.js」と「p5. […]
続きを読むもっと優しく機械学習が行える ml5.js JavaScript
機械学習を本格的に学ぶのであれば、Python言語の学習から始めるのが、一見遠回りに思えても、最終的には近道であり、本道です。 TensorFlow.jsは、Python言語を学ばずに、今知っているJavaScript言 […]
続きを読む14_8：メモリ管理
dispose tf.Tensorやtf.Variableからdispose()を呼び出すと、そのオブジェクトがパージ(一掃)され、オブジェクトが占めていたGPUメモリが解放されます。 const x = tf.tens […]
続きを読む14_7：訓練
TensorFlow.jsではまた、訓練を実行し勾配をしきりに計算するAPIも提供されています。 演算とAPIを組み合わせ、出力と入力で自動的に微分する関数の例を示します。 勾配 tf.grad tf.grads tf. […]
続きを読む14_6：モデルとレイヤー
モデル モデルは、プログラミング概念で言う関数のようなものです。モデルに入力を与えると、モデルは希望する出力を生み出します。 TensorFlow.jsには、モデルの作成方法が２通りあります。 直接演算を使用する // […]
続きを読む14_5：演算
TensorFlow.jsではテンソル上で実行できる演算が提供されています。これらの演算は、そのテンソルの値を変えるのではなく、新しいテンソルを返します。 算術演算 – tf.add (a, b), tf.sub (a, […]
続きを読む14_4：変数
TensorFlowを使ってモデルを構築したり訓練するときには、プログラムの実行中に更新したり変更したりできる値をメモリ位置に保持する必要があります。TensorFlowではこれは変数によって行われます。 既存の変数に新 […]
続きを読む14_3：テンソルの作成
よく使われる例 – tf.tensor (values, shape?, dtype?) const shape = [2, 3]; const a = tf.tensor([1, 2, 3, 4, 5, 6], sha […]
続きを読む14_2：テンソル(tensor)
テンソル(tensor)は、TensorFlowにおける基本単位で、根幹的なデータ構造です。 テンソルは、数値のn次元の集まりで、ランク(rank)とシェイプ(shape)、タイプ(type)によって識別されます。 – […]
続きを読む14_1：TensorFlow.jsとは？
ブラウザ内で行える機械学習 ブラウザで機械学習が行えるということは、ライブラリやドライバをインストールしなくても、プログラムがWebページ上で実行できる、ということです。、TensorFlow.jsは自動的にWebGLを […]
続きを読む14：Tensorflow.js チュートリアル – TensorFlow.jsのコア概念入門
以下は「Tensorflow.js Tutorial – Introduction to TensorFlow.js and Core Concepts」ページを永井が独自に日本語に訳したものです。 Tensorflow […]
続きを読む13_7：グラフを追加
最後に、メインのJavaScriptのforループの外側にさらにループを追加し、訓練回数だけ繰り返すようにします。また学習の進み具合の分かるグラフや、訓練のスピード値を追加します。 このリンクをクリックすると、最終のカー […]
続きを読む13_6：報酬を割引き、勾配を重みに適用する
いよいよカートポールサンプルの核心に入っていきます。ここでは、「報酬を割引き、それを反映した勾配を重みに適用する」ということを行います。具体的には、「割引率と、全ゲームで集めた全報酬から、報酬の割引を実行する。そして報酬 […]
続きを読む13_5：勾配と報酬の記録
得られた勾配は、ゲームの全ステップ(内側のforループ)で一度記録し、1ゲームの終了後、外側のforループで、ゲームごとに記録します。また報酬は、ゲームの全ステップでゲームがつづいている間は配列に1を追加しゲームが終わる […]
続きを読む13_4：行動を組み込む
つづいて、モデルを作成し、行動を組み込んでいきます。ただし通常と異なり、モデルにはオプティマイザーは指定せず、コンパイルもしません。 const buildModel = () => { const model = […]
続きを読む13_3 カートポールを動かす
以降では、「TensorFlow.js Example:Reinforcement Learning: Cart Pole」サンプルのコードを参考に、カートポールサンプルのシンプルバージョンを作成していきます。 これは、 […]
続きを読む13_2 強化学習とは？
強化学習とは、「ディープラーニングを使用した強化学習とその可能性」(PDFファイル)に、次のように説明されています。 試行錯誤を通じて、「最終的な報酬を最大化するような行動」を学習することを言う。 さらに同ファイルには、 […]
続きを読む13_1 カートポールサンプル シンプルバージョン
次の動画は、本稿で最終的に作成するカートポールサンプルの実行画面を録画したものです。 カートポールとは、車輪の付いた台座(カート)の上に細長い棒(ポール)を置いものを言います。カートポールサンプルは、強化学習と呼ばれる機 […]
続きを読む13 強化学習：カートポールサンプルを探る
本稿では、「TensorFlow.js Example:Reinforcement Learning: Cart Pole」で公開されている、「強化学習：カートポール」サンプルをもとに、TensorFlow.jsによる強 […]
続きを読む12_7 重みパラメータを探る
「6_1 モデルの中身 その１」で見た重みの数値は、tf.layers.LayerクラスのgetWeights()メソッドで調べることができます。 // 最初のレイヤー const firstLayer = model. […]
続きを読む12_6 ３つのモデルの訓練と評価、推測
モデルを訓練して、評価、推測します。 HTMLファイルでは、関係するJavaScriptコードを次の順番で読み込みます。 <script src="https://cdn.jsdelivr.net/npm […]
続きを読む12_5 線形回帰モデルと多層パーセプトロン回帰モデル２種
データが揃ったので、モデルを作成して訓練します。モデルは「boston-housing」サンプルのindex.jsファイルに記述されている３つのものを使用します。 model.jsファイルを作成して、次のコードを記述しま […]
続きを読む12-4 エクセルを使ったデータの標準化と標準偏差
TensorFlow.jsとは直接関係ありませんが、エクセルには標準化や標準偏差を求める専門の関数があるので、TensorFlow.jsよりもはるかに容易に結果の数値を得ることができます。 data1とdata2があると […]
続きを読む12_3 データの標準化と標準偏差
データの標準化とは統計学の用語で、「データ科学便覧」サイトの「統計学における標準化」ページによると、 統計学における標準化 (standardization) とは，与えられたデータを平均が0で分散が1のデータに変換する […]
続きを読む12_2 ボストンデータセットのロードとtf.Tensorオブジェクトへの変換
機械学習はデータがないと始まらないので、まずはボストンデータセットの読み込みから始めます。 以降では、「boston-housing」で使用されているコードを参考にしています。ただし、TensorFlow.jsのサンプル […]
続きを読む12_1 ボストンデータセット
「boston-housing」では、ボストンデータセットと呼ばれる、ボストン市郊外における地域別の住宅価格のデータセットが使われています。このデータは、Googleのデータ保存サイトからそれぞれ、train-data. […]
続きを読む12 ボストンデータセットによる多変数回帰
「5 ビール売上本数の予測」では、最高気温とビールの売上本数が比例関係にあるととらえ、最高気温を説明変数、売上本数を目的変数として、直線の方程式を得ることで、データにない最高気温の日の売上本数を予測しました。この方法は単 […]
続きを読む11 TensFlow.js サンプルファイルの実行方法
TensFlow.jsのサンプルは、「tensorflow/tfjs-examples」ページで公開されています。以下はWindows上でTensFlow.jsサンプルを実行するまでの基本的な手順です。 [サンプルファイ […]
続きを読む10_4 Node.jsのJavaScriptコードの記述と実行
Node.jsで実行するJavaScriptコードを記述します。 // Node.js用flickrapiモジュール const Flickr = require("flickrapi"); // N […]
続きを読む10_3 Webアプリ用のFlickr API KeyとSecretの入手
Node.jsアプリからFlickサイトにアクセス、ネコと犬の写真をダウンロードするので、Flickrで提供されているWeb APIを利用します。 そのためには、Flickrにアカウントを作る必要があります。この「Fli […]
続きを読む10_2 Node.js環境の作成
flickrサイトからネコと犬の画像をダウンロードし、適切なサイズに縮小して、フォルダ別に保存するという作業は、Webブラウザの環境でも行えないことはないでしょうが、それよりもNode.jsといううってつけのJavaSc […]
続きを読む10_1 Kerasモデルを訓練し、TensorFlow.jsモデルに変換して、サーバーに配置する
ネコと犬を区別するKerasモデルをインターネット上で探すと、「ardamavi/Dog-Cat-Classifier」というページが見つかったので、これを使わせてもらうことにします。ページ右端にある[Clone or […]
続きを読む10 flickrからテスト用データを入手する
訓練用データは品質の高いものを使う必要があります。しかし、訓練したモデルをテストしたい場合には、テスト用データの入手先としてflickrサイトを利用する手っ取り早い方法があります。 以降では、ネコと犬を判別するKeras […]
続きを読む9_2_3 Keras由来のモデルの使用
Webサーバーに置いたKeras由来のモデル(「oarriaga/face_classification」のモデルをtensorflowjs converterで変換したモデル)は、次のようなコードで読み込み、「fer2 […]
続きを読む9_2_2 表情認識用データの準備
Keras由来のモデルが手に入ったので、次はそのモデルを試すデータを入手します。 そのためには、「fer2013」のデータページにアクセスします。データのダウンロードにはユーザー登録が必要になります。ページ下部、左側に[ […]
続きを読む9_2_1 HDF5モデルの入手と配置
HDF5形式のモデルの入手先として、「oarriaga/face_classification」ページを利用することにします。ページ上部の右端に[Clone or download]ボタンがあるので、これをクリックし、Z […]
続きを読む9_2 Kerasモデルの利用
tensorflowjs converterを使用すると、Pythonで書かれたKerasモデルがTensorFlow.jsのモデルとして利用できるようになります。訓練済みで優秀なKerasモデルが利用できると、Tens […]
続きを読む9_1 tensorflowjs converterを使えるようにする
tensorflowjs converterを使えるようにするには、Pythonコードが実行できる環境が必要になります。 Anacondaのダウンロードとインストール Anaconda 3というPythonディストリビュ […]
続きを読む9 tensorflowjs converter
tensorflowjs converterを使用すると、Pythonコードで書かれたKerasモデルを、TensorFlow.jsに読み込めるモデルに変換して、TensorFlow.jsで使用することができます。 ただ […]
続きを読む8_3_2 姿勢検出(複数)
複数の姿勢検出には、posenetのestimateMultiplePoses()を使用します。判定する数の最大数はデフォルトで5なので、5を超える数の姿勢検出を行いたいときには、maxPoseDetectionsパラメ […]
続きを読む8_3_1 姿勢検出(1人)
手順としては、前のcoco-ssdと同様、[ファイルを選択]ボタンのクリックで画像ファイルを選択し、それをJavaScriptのイメージデータに変換します。そしてそれをposenetに渡します。 // PoseNetを読 […]
続きを読む8_3 posenet
「posenet」には、人間の姿勢が検出できるPoseNet Modelがあります。このモデルには、イメージやビデオ内の１人の人間の姿勢を検出するバージョンと、複数の姿勢を検出するバージョンがあります。 posenetを […]
続きを読む8_2_1 coco-ssd 物体検出アプリ
ブラウザ画面のボタンをクリックして写真を指定し、物体検出を行うアプリの作例です。 HTML： <input type="file" id="input-file"> & […]
続きを読む8_2 coco-ssd
COCOという名前のデータセットがあり、これは、物体の検出と切り出し(オブジェクトセグメンテーション)、説明付き(キャプショニング)の機械学習に利用できます。 TensorFlow.jsのcoco-ssdでは、このデータ […]
続きを読む8_1_3 画像認識モバイルアプリ
TensorFlow.jsのmobilenetを使って、何の画像かを認識するモバイルアプリを作成します。これは、具体的に言うと、mobilenetが利用するMobileNetsのV1モデルに、モバイルデバイスがHTMLの […]
続きを読む8_1_2 mobilenetのテスト
「mobilenet」にあるサンプルの簡単なテストです。 HTML <div class="photos"> <img src="images/1.jpg" id […]
続きを読む8-1 mobilenet
MobileNetsは、Googleがモバイル向けに作成した、画像処理アプリ用の畳み込みニューラルネットワークで、サイズが小さく、電池をあまり消費せず、そこそこ性能が良いという特長があります。 MobileNetsを使用 […]
続きを読む8 訓練済みモデルの利用
「tensorflow/tfjs-models」ページには、TensorFlow.jsで使用できる訓練済みモデルが掲載されています。 本記事執筆時点では、その中の「mobilenet」と「coco-ssd」、「posen […]
続きを読む7-7 手書き数字認識アプリ(UI考慮なし版)
最後に、手書き数字認識アプリの全コードを紹介しておきます。ただしUIを考慮していないバージョンです。 まず画面左上の[ファイル選択ボタン]でtrain-images.idx3-ubyteとtrain-labels.idx […]
続きを読む7-6 モデルの推測結果の表示
前回までで、モデルはテスト用データに対し97%ほどの精度で正解することが分かりました。以下では、テスト用データの画像と、モデルの出した答えを視覚的に比較します。 下図は実行結果の例です。データは100個表示しており、不正 […]
続きを読む7-5 モデルの構築と訓練
MNISTの訓練用とテスト用の画像データとラベルデータを表すtf.Tensorオブジェクト４つが作成できたので、次はモデルの構築と訓練です。 手書き数字の認識にどんなモデルが適しているのか、考えてもしかたないので、Ten […]
続きを読む7-4 MNISTデータをtf.Tensorオブジェクトに変換する
MNISTの画像とラベルデータの読み取りと取得ができたので、次はMNISTの４つのファイルを開いて必要なデータを取得し、それらをtf.Tensorオブジェクトに変換するまでを見ていきます。 ４つのファイルの読み取りは１つ […]
続きを読む7-3 MNISTラベルデータを開いて中身を得る
いささかテクニカルではありますが、ラベルデータのtrain-labels.idx1-ubyteも同様の方法で開き、中身を得ることができます。「THE MNIST DATABASE of handwritten digit […]
続きを読む7-2 MNIST画像データを開いて中身を得る
「THE MNIST DATABASE of handwritten digits」ページからダウンロードし、Windowsなら7-Zipアプリなどで展開して現れたt10k-images.idx3-ubyte、t10k- […]
続きを読む7-1 MNISTデータセットとは？
MNISTデータセットには、 訓練用画像データ それに対応した訓練用ラベルデータ テスト用画像データ それに対応したテスト用ラベルデータ の４つのファイルがあり、「THE MNIST DATABASE of handwr […]
続きを読む7 MNISTデータと手書き数字認識アプリ
自分で描いた数字をアプリが何の数字か予測する手書き数字認識アプリは、機械学習を学習する上で、意欲の湧きそうなテーマです。 手書き数字認識アプリを作成するには、手で数字を書いたような画像データが必要になりますが、MNIST […]
続きを読む6_5 optimizer : 最適化アルゴリズム
optimizerプロパティに指定する値は最適化アルゴリズムと呼ばれます。言い換えると、損失関数を理想的にはゼロにするための算出方法を指定します。 これまで見てきた損失値のグラフでは、値がうまく減少していきましたが、そこ […]
続きを読む6_4 loss : 誤差関数
loss(誤差関数)は、自分の方法でモデルが出した「推測」値と正解の教師データと比べて、適合しなさ具合を表す数値を返します。 前のあやめデータのlossには’binaryCrossentropy’ […]
続きを読む6_3 モデルの中身 その２
tf.Sequentialのモデルにレイヤーを追加したので、コンパイルに移ります。 const learningRate = 0.01; const optimizer = tf.train.adam(learningR […]
続きを読む6_2 活性化関数
モデルにレイヤーを追加するとき、tf.layers.dense()関数に渡すオブジェクトのactivationプロパティの値に指定するものを活性化関数と言います。活性化関数は次のレイヤーに渡す値を整える働きを持っています […]
続きを読む6_1 モデルの中身 その１
「5_1_2 モデルの構築」で示したbuildModel()関数のコードを上から順に見ていきます。 const model = tf.sequential(); tf.sequential()関数はtf.Sequenti […]
続きを読む6 モデルの本陣
機械学習は微小な数値の連続で、そこで扱われる用語や概念も、大学で数学を学ばなかった人には、非常に難解です。 TensorFlow.jsのそもそもの狙いには、こうした難解さをモデル内部に隠し、ハイレベルなAPIで優しく扱え […]
続きを読む5_1_6 推論 その3 答え合わせ
モデルには、[5.1, 3.5]や[4.9, 3.0]、[4.7, 3.2]といったsatosaData は[1,0]で、 [7.0, 3.2]や[6.4, 3.2]、[6.9, 3.1]といったversicolorDa […]
続きを読む5_1_5 推論 その2 Tensor.argMax( axis? )メソッド
tf.Sequentialのpredict()が返すtf.Tensorオブジェクトは、推論結果の数値と結びついており、分類の場合、数値は確率と見なすことができます。 // 結果は確率の配列 predictOut.prin […]
続きを読む5_1_4 推論 その１
モデルの訓練が終わったら、Promiseのthen()メソッドに渡される無名関数で、<ul>要素のクリックに関するイベントリスナーを設定します。 console.log(‘モデルの訓練完了’); // < […]
続きを読む5_1_3 モデルの訓練
start()関数では、buildModel()の後、train(model, xsTrain, ysTrain, xsValidation, ysValidation);を実行しているので、次のtrain()関数が呼び […]
続きを読む5_1_2 モデルの構築
次は、ゼロから構築しようとすると相当な知識と経験が必要になる、「適切な」モデルの作成です。機械学習やディープラーニングでは、モデルが自動的に学習し、推論を立ててくれますが、そこまで行くには、優秀なモデルを人間が試行錯誤し […]
続きを読む5_1_1 データの取得
何はなくともデータを準備する必要があります。今回使用するのは、次のようなデータです。前述したように、分かりやすくするために、サンプル数を少なくしています。 JavaScriptコードでは、訓練用のデータを８個ずつ配列に入 […]
続きを読む5_1 2特徴量2クラス
ここからは、いよいよ「機械学習」っぽくなっていきます。 ２特徴量２クラスというのは、あやめデータの場合でいうと、たとえば、がく片の長さと幅の２つの特徴量から、satosaとversicolorに分けることです。出来の良い […]
続きを読む5_1 1特徴量2クラス
扱おうとするデータの特徴を数値化したものを特徴量と言います。あやめの例で言うと、がく片や花びらの長さと幅の数値です。1特徴量2クラスとは、１つの特徴量で２つに分類することです。 たとえば、２ｍ以上はある大きな木と１ｍない […]
続きを読む5 あやめの分類
機械学習の入門の例として、あやめの花の分類があります。これは、あやめの品種であるsatosaとversicolor、virginicaそれぞれのがく片の長さと幅、花びらの長さと幅を持つデータを使ってモデルを訓練し、未知の […]
続きを読む5_2_4 epochsはいくつがよいのか？
今の簡単な例では、データ数は訓練用と教師用で25個ずつですが、通常はもっともっと多い方がモデルの推論の精度は高まります。またデータの品質も重要で、これはどう見ても異常だ、と思えるデータは除く必要があります。 機械学習で重 […]
続きを読む5_2_3 TensofFlow.jsのモデルの作成と訓練
今行おうとしているのは、[22,23,23,…,34,35,35]という最高気温と、[303,313,323,…,463,443,483]と並ぶビールの売上本数のデータから、では、統計が取られてい […]
続きを読む5_2_2 グラフの描画関連
グラフの描画には、Plotlyライブラリを使用しています。Plotlyには、適切な形式でプロットしたい横軸と縦軸のデータを配列で渡すだけです。 // Plotlyを使ってグラフを描く const plot = async […]
続きを読む5_2_1 CSVファイルの読み込み
TensorFlow.jsに限らず、機械学習ではまずデータが必要です。このWebアプリでは、前出のエクセルファイルからCSVファイルを書き出して、それを読み込みます。 ブラウザで外部ファイルを読み込むには、ユーザーが読み […]
続きを読む5_2 TensorFlow.jsでビール売上数を予測する
下図は、エクセルで行った推測をTensorFlow.jsで行った結果です。 右は損失値の変化を表すグラフで、2500回も訓練しています。エクセルの推測は一瞬で終わりますが、TensorFlow.jsでは相当回数、訓練が必 […]
続きを読む5_1 エクセルでビール売上数を予測する
最高気温が高いほどビールは多く売れるだろう、という相関関係は、エクセルの機能を使うと、実に簡単に右上がりの直線で表すことができます。 こういう統計があったとすると（実際には架空のデータです）、エクセルのグラフ機能で、実に […]
続きを読む5 ビール売上本数の予測
次は少し実践的な例です。その日の最高気温とビールの売上本数をデータとしてTensorFlow.jsのモデルに与えて訓練し、データにはない最高気温が30度の日に、ビールは何本売れるかを推測させる試みです。 最高気温と売上本 […]
続きを読む4_2 同じ問題に対して、異なるTensorFlow.jsモデルを試す
まず、前の「3_1_2 モデルの作成」で使ったモデルで試してみます。 const model = tf.sequential(); model.add(tf.layers.dense({units: 1, inputSh […]
続きを読む4_1 TensorFlow.jsで実装した論理ゲート
以下がTensorFlow.jsで実装した論理ゲートの実行画面です。結果は、概ね良好のように思えます。 全コードを以下に示します。 <!doctype html> <html lang="ja […]
続きを読む４ 論理ゲートをTensorFlow.jsで実装する
機械学習の入門書などを見ていると、「論理ゲート」というものがよく取り上げられています。論理ゲートというのは、元は電子回路に用いられる論理で、オンかオフの２つの入力があった場合、それをオンかオフのどちらで出力するかを決める […]
続きを読む3-3 基本 その3 視覚化
機械学習で扱うのは、目に見える色の変化やオブジェクトの変形でなく、小さな数値の微細な変化なので、扱うデータや、訓練の進捗状況を視覚化することが重要です。 機械学習の環境が進んでいるPythonには、多くの機械学習向けライ […]
続きを読む3-2 基本 その2 訓練の進捗状況
tf.Sequentialオブジェクトのfit()メソッドを呼び出すと、モデルを訓練することができます。fit()メソッドには、訓練がうまく進んでいるかを見ることのできる方法が提供されています。 訓練の進捗状況を確認する […]
続きを読む3_1_4 モデルの推論
訓練を終えたモデルは、モデルが知らない値を与えられると、自分の推論にもとづいてその値に対応する値を提出できるようになります。 モデルから推測値を得るには、tf.Sequentialオブジェクトのpredict()メソッド […]
続きを読む3_1_3 モデルの訓練
作成したモデルは訓練できるようになります。モデルを訓練するには、tf.Sequentialオブジェクトのfit()メソッドを用います。 info(‘モデル訓練開始’); // モデルは与えられたxsとysから、その関係性 […]
続きを読む3_1_2 モデルの作成
TensorFlow.jsでは、大学で学ぶ数学を分かっていないとまったくもってチンプンカンプンの理論を隠蔽するモデル(tf.Model)が用意されています。モデルの作成は定型的なので、毎回同じような手順で作成できます。 […]
続きを読む3_1_1 データの取得
機械学習はデータの取得から始まります。データは今の場合、[-1, 0, 1, 2, 3, 4]という配列と、[-3, -1, 1, 3, 5, 7]という配列です。これを、 const [xs, ys] = await […]
続きを読む3-1 基本 その１ TensorFlow.jsの作業の流れ
次のコードは、ブラウザで開くと自動的にTensorFlow.jsのモデルが作成され学習を始めます。学習が終わり、ボタンをクリックすると、テキストフィールドに入力された数値(20)に対応する数値をデベロッパーツールのコンソ […]
続きを読む3 スタート
まずは、TensorFlow.jsを使った機械学習Webアプリ作成の流れが分かるように、ごく単純な例から始めましょう。 TensorFlow.jsには、[-1, 0, 1, 2, 3, 4]と[-3, -1, 1, 3, […]
続きを読む2 準備
TensorFlow.jsを始めるための準備は、ほぼ何も必要ありません。jQueryのライブラリをダウンロードするのと同じ要領で、HTMLファイルの<head>タグに、次の<script>タグを記 […]
続きを読む1-1-3 TensorFlow.jsに関する情報
TensorFlow.jsの情報は、「TensorFlow.js」サイトで得ることができます。 チュートリアル APIリファレンス（このリンクは本記事執筆時点での最新版である0.12.5のリファレンスに飛びます） このA […]
続きを読む1_1_2 誰に向いているのか？
TensorFlow.jsは現状、誰にでもすぐに使用を始められるほど、簡単ではありません。また機械学習を効率的に進めることのできるPython環境のようには整備されていず、たとえばデータを視覚化するにも、JavaScri […]
続きを読む1_1_1 TensorFlow.jsの特徴
TensorFlow.jsでは、一般的な特徴として次のものがあげられます。 JavaScriptライブラリなので、PCのWebブラウザに加え、スマホやタブレット端末のWebブラウザで動作するWebアプリが作成できる。 W […]
続きを読む1_1 TensorFlow.jsとは？
TensorFlow.jsとは、Webブラウザなどで機械学習を行うことのできるJavaScriptライブラリです。Googleが2018年3月、「TensorFlow Dev Summit 2018」で発表しました。 機 […]
続きを読むWeb アニメーション (CSS Animations, CSS Transitions, Web Animations API)
Webページで表すことのできるアニメーションについて、いろいろと述べています。 Webアニメーションとは？ アニメーションが動いて見える原理 あたりからどうぞ。
続きを読む11_3 Bird Monster
カスタムイージング関数を利用したWAAPIアニメーションです。鳥が羽ばたくアニメーションはCSS Animationsで作成し、左右と上下に移動するアニメーションをWAAPIで作成しています。アニメーションの切り替えには […]
続きを読む11_2 手作りイージング関数を使ったキャンバスアニメーション
Web Animations APIとは直接は関係しませんが、イージング関数に渡す変数t, b, c, dを手作りし、得た結果を反映させるキャンバスアニメーションを作成します。１秒かけて、青い円が20から400まで移動し […]
続きを読む11-1 そもそもイージング関数は一体何を…
イージング関数とは、アニメーションに指定されたキーフレーム間のプロパティ値を補間するときに使用される関数で、次のようなグラフで表されます。一般的なイージング関数は、0秒の始まりから1秒の終わりまでの間に、0から1までの数 […]
続きを読む11 カスタムイージング
CSS Animationsでは、animation-timing-functionプロパティに cubic-bezier()関数が返す値を指定することで、独自のタイミング関数(以降、イージング関数)が使用できます。We […]
続きを読む10-10-3 getComputedTiming().progressの利用
「10-10 アニメーションタイマーとしての利用」で述べた”3 セットした時間を100%として、今がその何%に当たる瞬間かを教えてくれるタイマー”の例です。ここでは、Animation.effect.getCompute […]
続きを読む10_10_2 getComputedTiming().currentIterationの利用
「10-10 アニメーションタイマーとしての利用」で述べた”2 セットした時間を繰り返し、その回数を教えてくれるタイマー”の例です。ここでは、Animation.effect.getComputedTiming()が返す […]
続きを読む10_10_1 finishイベントの利用
「10-10 アニメーションタイマーとしての利用」で述べた”1 セットした時間の経過を教えてくれる、通常のタイマー”の例です。ここでは、アニメーションタイマーのfinishイベントを利用しています。 ページを開くと、カラ […]
続きを読む10_10 アニメーションタイマーとしての利用
Animationオブジェクトは次の特徴を持つタイマー(便宜的にアニメーションタイマーと呼びます)としても利用できます。 セットした時間の経過を教えてくれる、通常のタイマー セットした時間を繰り返し、その回数を教えてくれ […]
続きを読む10_9_4 Promise系
Animation.readyプロパティは、アニメーションの再生準備ができたときに解決されるPromiseオブジェクトを返します。これは、言い換えると、アニメーションの再生準備が確実に整うまで実行したくないコードが安心し […]
続きを読む10_9_3 再生系
Animation.playStateプロパティは、アニメーションの再生状態の取得と設定を行います。 次のコードを使用すると、アニメーションが再生状態なら、キャンセルし、再生状態でないなら再生を開始する命令が１行で記述で […]
続きを読む10_9_2 タイム系
Animation.timelineプロパティは、アニメーションのタイムラインを参照します。現状では、アニメーションの基準として使用できるタイムラインは、ドキュメントのタイムラインしかありません。 タイムラインは、 […]
続きを読む10_9_2 SVGのシークアニメーション
<svg>要素で描いたパスに沿ってHTML要素が動くアニメーションはCSSで作成できるので、同じことがWeb Animations APIでも行えます。また、アニメーションのcurrentTimeを、シークバ […]
続きを読む10_9_1 getComputedTiming()
AnimationEffectReadOnly.getComputedTiming()メソッド(具体的には、anim.effect.getComputedTiming())を使用すると、呼び出した時点での、高精度なタイム […]
続きを読む10_9_1 エフェクト系
Animation.effectプロパティは、アニメーションに関係する効果(キーフレームとタイミング)の取得と設定を行う機能を持っています。 中でも、キーフレーム情報を取得するgetKeyframes()、設定するset […]
続きを読む10_9 Animationオブジェクトのプロパティ
Animationオブジェクトには、さまざまなプロパティが用意されています。以降では、次のカテゴリーに分けて、紹介していきます。 エフェクト系：Animation.efefct タイム系：Animation.timeli […]
続きを読む10_8 タイミングパラメータの書き方
Element.animate()の第２引数やnew KeyframeEffect()の第３引数には、アニメーションの長さの数値(ミリ秒単位の整数)か、以下のタイミングに関するプロパティ値が、オブジェクト形式で指定できま […]
続きを読む10_7 キーフレームパラメータの書き方
Element.animate()メソッドやnew KeyflameEffect()には、キーフレームのセットを表すオブジェクト(キーフレームパラメータ)を渡します。その記述方法は２通りあります。 オブジェクト形式 アニ […]
続きを読む10_6 アニメーションの再生状態
アニメーションには次の再生状態があります。今どの状態にあるかは、playStateプロパティで調べることができます。 idle アニメーション設定の実行前で、アニメーションのタイム値が設定されていない状態。cancel( […]
続きを読む10_5 Animationオブジェクトのイベント
Animationオブジェクトでは、finishイベントとcancelイベントが定義されており、AnimationオブジェクトのaddEventListener()メソッドで、発生を待ち受けることができます。名前から容易 […]
続きを読む10_4 CSS Animationsの取得
CSS Animations、つまりCSSのキーフレームを使ったアニメーションは、document.getAnimations()メソッドで取得できます。結果はAnimationオブジェクトを入れた配列として返されます。 […]
続きを読む10_3 Animationオブジェクトのメソッド
Animationオブジェクトのメソッドは数が少なく、ビデオのリモコン操作のようなものなので、簡単です。 play() アニメーションの再生を開始するか、再開する。アニメーションがすでに完了している場合には、最初から開始 […]
続きを読む10_2_2 Web Animations APIアニメーションの基本 その２
実をいうと、target.animate()はAnimationオブジェクトを作成して、そのAnimationオブジェクトの再生を開始するショートカットで、実際にはその裏で、いくつかの重要な事柄が実行されています。 ta […]
続きを読む10_2 Web Animations APIアニメーションの基本 その１
WAAPIアニメーションで記述するJavaScriptは定型的で、CSS Animationsと似たプロパティ名を使用するので、早く慣れることができます。 以下は、ボールが左右に繰り返し移動する単純なCSS Animat […]
続きを読む10_1_6 Web Animations APIアニメーションの特徴
WAAPIアニメーションには、次の特徴があります。 WAAPIのタイムラインは、ドキュメントのタイムラインを受け継いだもの windowオブジェクトには、高精度のタイム値を提供するwindow.performanceオブ […]
続きを読む10_1_5 Web Animations APIのモデル
WAAPIには、タイミングモデルとアニメーションモデルという２つのモデルがあります。 タイミングモデル 一瞬一瞬のタイム値を受け取り、それをアニメーションの進捗値(全体の中で何%すすんだかを示す数値)に変換する。 同時に […]
続きを読む10_1_4 Web Animations APIのコア概念
WAAPIのアニメーションは、TimelineとAnimation、AnimationEffectで構成されます。 Timeline アニメーション再生の基準となる現在のタイム値を提供する。現状では、Documentオブ […]
続きを読む10_1_3 重要!! ブラウザの実験的な機能を有効化する方法
今後、WAAPIの実装がどのように進むかは分かりませんが、少なくとも現状では、WAAPIのフル機能を使用するには、ブラウザの実験的な機能を有効化する必要があります。 実装が最も進んでいるのはFirefoxで、次がChro […]
続きを読む10_1_2 メリットとデメリット
WAAPIには、次のメリットとデメリットがあると言われます。 メリット WAAPIは、CSSのtransformプロパティと同様、GPUを利用するので、動作が軽快。 WAAPIの記述では、CSSのプロパティ名に似たプロパ […]
続きを読む10 Web Animations API
Web Animations APIは、執筆時現在、W3Cで策定が進められている、CSSとJavaScriptの長所をミックスさせた新しいWebアニメーションの方法です。 Web Animations Editor’s […]
続きを読む6_3 よいアニメーションにするには？
よくできたアニメーション、つまり、スタート時にはもたもたせずにすぐ始まり、ヌルヌル動く（60fpsを維持する）アニメーションにするための、いくつかの技術的な方策が提案されています。 再レイアウトをともなわないCSSプロパ […]
続きを読む6_2 レイアウト変更や再描画をともなうプロパティ
要素のプロパティに変更が加えられると、ブラウザは、その変更の影響を受けるすべての要素のサイズと位置を計算しなくてはなりません。たとえば、相対的な位置設定がしてある要素の位置が変わると、他の子要素や親要素に影響が及ぶことに […]
続きを読む6_1 ブラウザがWebページを表示するまでの仕組み
快適なアニメーションにするには、ブラウザがアニメーションを画面に表示する仕組みを知っておいて損はありません。以下が概略図と説明です。 読み込んだHTMLとJavaScriptを解析してDOMツリーを構築する。 読み込んだ […]
続きを読む6 アニメーションのパフォーマンスを上げる
「1_1 アニメーションとは？」では、人間は本来的にアニメーションが好きなのだ、ということを述べましたが、これは正確ではありません。よくできたアニメーションは好きですが、できの悪いものは逆効果で、不快になるでしょう。 よ […]
続きを読む5_2 離散関数
CSS AnimationsとCSS Transitionsのタイミング関数には、出力される値が途切れる離散関数も指定できます。指定にはsteps()関数を使用します。 steps( number_of_steps, d […]
続きを読む5_1 連続関数
タイミング関数のうち、値が途切れずに変化しつづける関数を連続関数と言います。以下はCSSアニメーションに使用できる連続関数の一部です。 linear 定速 ease 最初加速し、だんだん減速 ease-in だんだん加速 […]
続きを読む5 タイミング関数
タイミング関数は別名イージング関数とも呼ばれ、CSS AnimationsやCSS Transitionsアニメーションを作成するとき、animation-timing-functionやtransition-timin […]
続きを読む4_5 CSS Transitionsのイベント
CSS Transitionsのイベントの発生は、CSS Transitionsアニメーションを実行するHTML要素のaddEventListener()メソッドで監視できます。 イベントには次のものがあります。 tra […]
続きを読む4_4 transtionプロパティ
transition CSSプロパティは、CSS Transitionsアニメーションを指定するショートハンド（一括指定）プロパティです。 通常は、transition:につづけて、変化の発生を監視するプロパティ名、その […]
続きを読む4_3 CSS Transitionsのポイント
CSS Transitionsは次の手順で作成できます。 アニメーションさせたい要素のCSSクラスで、transitionプロパティを設定する。 監視するプロパティが変化するきっかけを作成する。 前の例では、<im […]
続きを読む4_2 基本
CSS Transitionsの基本を以下に示します。 マウスオーバーで写真が少し傾き、大きくなるアニメーション HTML まずはHTMLです。<div>要素の中に、<a>、その中に<img […]
続きを読む4_1 CSS Transitionsの特徴
CSS Transitionsは、初めの状態と終わりの状態の間で、時間経過とともにCSSプロパティの値を変更することで、アニメーションを実現する方法です。 CSS Animationsとの大きな違いは、 キーフレームがな […]
続きを読む4 CSS Transitions
CSSアニメーションには、CSS Animations（キーフレームアニメーション）のほかにもう１つ、CSS Transitionsがあります。アニメーションの仕組みとしてはCSS Animationsの方が分かりやすい […]
続きを読む3_5 CSS Animationsのイベント
CSS Animationsのイベント、つまり、キーフレームアニメーションのイベントの発生は、アニメーションを実行するHTML要素のaddEventListener()メソッドで監視できます。 イベントには次のものがあり […]
続きを読む3_4 animationプロパティ
animation CSSプロパティは、キーフレームアニメーションを指定するショートハンド（一括指定）プロパティです。 通常は、animationにつづけて、まずアニメーション名、その後にアニメーションにかける時間（du […]
続きを読む3_3 CSS Animationsのポイント
CSS Animationsを作成する手順をまとめると、次のようになります。 アニメーションさせたい要素のCSSクラスで、animationプロパティを設定する。 キーフレームを定義する。 animation: bree […]
続きを読む3_2 基本
CSS Animationsの基本を示します。 みの虫がそよ風に揺れるアニメーション HTML <div class=”minomushi breeze”></div> HTMLでは、<di […]
続きを読む3_1 CSS Animationsの特徴
CSS Animationsは、キーフレームを使って、時間経過とともにCSSプロパティの値を変化させることでアニメーションを実現する方法です。別名、キーフレームアニメーションと呼ばれ、後で述べるCSS Transitio […]
続きを読む3_CSS Animations
ここで言うCSS Animationsとは、@keyframeルールを使ったキーフレームアニメーションを言います。CSSアニメーションにはもう１つ、CSS Transitionsと呼ばれるものがあり、混同しがちなので、注 […]
続きを読む1_4 Webで見られるアニメーションの種類
Webで見られるアニメーションを、使用される技術の観点からいうと、HTML5の現在、次の５つに分けられます。 JavaScriptによるDOM操作 CSSアニメーション <canvas>要素のアニメーション […]
続きを読む1_3 Webアニメーション(CSSアニメーション)の場合
Webページで見られるCSSアニメーションも、人間の錯覚によって生まれるという点では、映画のアニメーションと同じです。ただし、CSSアニメーションでは、全コマを描くわけではありません。変化のポイントとなる時点をキーとして […]
続きを読む1_2 アニメーションが動いて見える原理
アニメーションが動いて見えるのは、人間の錯覚で、脳がだまされているからです。 映画のフィルムのコマで考えると分かりやすくなります。 映画では、１秒間に24のコマが映写されます。これは高速なので、人間の目（脳）は残像現象に […]
続きを読む1_1 アニメーションとは？
Animationは、ラテン語で”霊魂”と意味するanima（アニマ）に由来していると言われ、本来は動かない、生命のないものに命を与えて動かすことを意味します。 コンピュータの世界でアニメーションと言うと、ある時間をかけ […]
続きを読む1 Webアニメーションとは？
日本語でアニメーションと言うと、通常はテレビや映画のアニメを指しますが、コンピュータの世界では、時間の経過とともに、たとえば色が変わっていくこともアニメーションと呼ばれます。
続きを読むスマホなどのイラストなど
その昔、Adobe AIRでスマホアプリを作る本を書きました。残念ながら出版元の都合で紙の書籍とはならず、2012年、「モバイルAIRによるクロスプラットフォームアプリケーション開発」という名前でオライリー・ジャパンから […]
続きを読むTensorFlow.jsことはじめ
練習
続きを読むWeb Animationsことはじめ
練習。
続きを読む