フィジカルコンピューティング with Raspberry PI Pico
14 ポータブルPico

外に持ち出す プログラムの.pyファイルをmain.pyという名前に変更し、Picoのストレージに保存すると、起動時Picoは自動的にmain.pyを実行するようになります。これは、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
1 フィジカルコンピューティングとは?

フィジカルコンピューティングは英語でPhysical Computingと言い、直訳すれば物理的なコンピュータ操作、つまり仮想的なものではなく、実際にそこに存在する物に対して、コンピュータから働きかけるアクションを行うと […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
42:番外編 当たり判定の基本を考える

本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 当たり判定とは? 当たり判定とは、衝突判定、衝突検出とも呼ばれ、英語ではCollision Detectionと言います。ウィキペディ […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
41:番外編 アナログ時計を作成

本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 概要 「番外編 円とサイン」や「番外編 サイン、コサインで三角形を描く」で見たサイン、コサインは、アナログ時計の作成にも利用できます。 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
40:番外編 何々の方へ atan2()

本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 サイン、コサインともう1つ、アークタンジェント 数学で三角関数と呼ばれるものは多くありますが、プログラミングで覚えておけばよいのは、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:数当てゲーム

この記事の詳しい内容には毎日新聞の「数当てゲーム」ページから有料記事に進むことで読めます。 概要 子どもたち3人が数当てゲームをします。問題を出す男の子は1から20の間の数字を選び、女の子ともう1人の男の子からの質問に、 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
32:野菜の重さをくらべる

この記事の詳しい内容には毎日新聞の「野菜の重さをくらべる」ページから有料記事に進むことで読めます。 概要 ニンジン、カボチャ、ダイコン、トマトという4つの野菜があり、それを重い順に並べるのが目的です。てんびんに2つの野菜 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
31:2色のカードで数を表す

この記事の詳しい内容には毎日新聞の「2色のカードで数を表す」ページから有料記事に進むことで読めます。 概要 カードを4枚使って、数を表します。カードは黒と白の2色です。表す数は次のルールにしたがって決まります。 カードは […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
30:番外編 つるかめ算を考える

本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 概要 アマゾンプライムビデオで「武士の家計簿」という映画を見ていたとき、草笛光子演じる祖母が孫につるかめ算の問題を出していたので、これ […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
29:うかび上がるのはどんな絵

この記事の詳しい内容には毎日新聞の「うかび上がるのはどんな絵」ページから有料記事に進むことで読めます。 概要 数字が書かれたメモがあります。数字は左から、色を塗らないマスの数と、色を塗るマスの数を表し、それらは交互に書か […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
28:倉庫にしまった服を取り出す

この記事の詳しい内容には毎日新聞の「倉庫にしまった服」ページから有料記事に進むことで読めます。 概要 この倉庫にはTシャツを預けるラックとズボンを預けるラックがあり、全部ロボットが管理しています。 たとえば、を取り出した […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
27:レシピ通りにパフェを作る

この記事の詳しい内容には毎日新聞の「手順を反復して処理」ページから有料記事に進むことで読めます。 概要 このカフェではロボットがパフェを作ります。ロボットはレシピの手順通りにソースを重ねてパフェを作ります。たとえば下図左 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
26:どう組み合わせればいい?

この記事の詳しい内容には四国新聞 WEB朝刊の「どう組み合わせればいい?」ページから有料記事に進むことで読めます。 概要 かめのロボットを動かして線を引きます。ロボットには次の4つの命令を出すことができます。 命令: 進 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
25:くり返しの中にくり返し

この記事の詳しい内容には毎日新聞の「くり返しの中にくり返し」ページから有料記事に進むことで読めます。 概要 かめのロボットを動かして線を引きます。ロボットには次の4つの命令を出すことができます。 命令: 進む(n) nマ […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
24:魚をつるロボット

この記事の詳しい内容には毎日新聞の「魚の取りすぎをふせぐ」ページから有料記事に進むことで読めます。 概要 魚つりをするロボットがいます。このロボットは、魚の取りすぎをふせぐため、ルールにしたがってつった魚を海に返します。 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
23:今は何を覚えているかな

この記事の詳しい内容には毎日新聞の「今は何を覚えているかな」ページから有料記事に進むことで読めます。 概要 オウムのロボット1号、2号、3号がいます。オウムロボットは下記の手順の通りに言葉を覚えていきますが、覚えられるの […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
22:オウムが話す言葉

この記事の詳しい内容には毎日新聞の「オウムが話す言葉」ページから有料記事に進むことで読めます。 概要 オウムのロボット1号と2号がいます。オウムロボットは手順の通りに言葉を覚えていきますが、覚えられるのは1つだけで、新し […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
21:指定歩数分だけ進む

この記事の詳しい内容には四国新聞 WEB朝刊の「「歩く数」の分だけ進む」ページから有料記事に進むことで読めます。 概要 このロボットは、指定された歩数だけ歩いて右に進みます。たとえば次の命令の場合、 歩く数2 進む (歩 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
20:目的地への道順を伝える

この記事の詳しい内容には毎日新聞の「目的地への道順伝える」ページから有料記事に進むことで読めます。 概要 下図は、スタート地点から、野球場とプール、体育館とテニスコートへ行く道順を示した案内図です。途中の分かれ道には案内 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
19:ケーキを作る

この記事の詳しい内容には毎日新聞の「くり返しは台形で表す」ページから有料記事に進むことで読めます。 概要 あるロボットがいます。このロボットは、受け取ったレシピに書かれた順に材料を重ね、ケーキを作ります。たとえば、 「ス […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
18:荷物のシールで仕分ける

この記事の詳しい内容には毎日新聞の「荷物のシールで別のかごに」ページから有料記事に進むことで読めます。 概要 この工場では、ベルトコンベアを流れてきた荷物をロボットが仕分けます。ロボットは荷物にはられたシールで、荷物を入 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
17:かべにかざりを付けるには?

この記事の詳しい内容には毎日新聞の「かべにかざりを付けるには?」ページから有料記事に進むことで読めます。 概要 ロボットにメモを渡して、かべかざりを手伝ってもらいます。かざりは下図の円と星と四角です。 ロボットには「2回 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
16:3段重ねのアイスを注文したら?

この記事の詳しい内容には毎日新聞の「3段重ねのアイスを注文したら?」ページから有料記事に進むことで読めます。 概要 3段重ねのアイスを売る店があります。たとえば「チョコとバニラ、ストロベリーのアイスをください」と言うと、 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
15:命令された順にカードに絵をかく

この記事の詳しい内容には毎日新聞の「矢印で命令をつなぐ」ページから有料記事に進むことで読めます。 概要 命令された通りに、カードに絵をかくロボットがいます。ロボットは命令をフローチャートで受け取ります。 上図のフローチャ […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
14:イスを人数分ならべる

この記事の詳しい内容には毎日新聞の「命令をくり返す回数は?」ページから有料記事に進むことで読めます。 概要 このロボットは、指示された命令の手順で椅子を人数分並べます。命令は下図のフローチャートで表されます。 ロボットは […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
13:かめを動かそう

この記事の詳しい内容には毎日新聞の「かめを動かそう」ページから有料記事に進むことで読めます。 概要 5 x 5 のマス目の上にかめのロボットがいます。かめには次の3つの命令を出すことができ、かめは自分の動いた跡に太い線を […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
12:ロボットが止まるマスは?

この記事の詳しい内容には毎日新聞の「ロボットが止まるマスは?」ページから有料記事に進むことで読めます。 概要 下図のルートを移動するロボットがいます。ロボットは今自分がいるマスを調べ、それがチェック模様のマスなら2マス進 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
11:パンの入れ物はどれ?

この記事の詳しい内容には毎日新聞の「パンの入れ物はどれ?」ページから有料記事に進むことで読めます。 概要 舞台はとあるパン屋さんです。このパン屋さんでは、焼きたてのパンは紙のふくろに入れて渡しますが、焼きたてでないパンは […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
10:大小の皿を片づける

この記事の詳しい内容には毎日新聞の「皿を命令通り片付ける」ページから有料記事に進むことで読めます。 概要 洗った皿を片づけてくれるロボットがいます。ロボットは次の動作を繰り返して実行します。繰り返す回数は人間が伝えます。 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
9:番外編 新しいものを指定数分だけ覚える

本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 概要 ご存知かどうかは分かりませんが、映画「トロン」に出てきたバイクレースに触発されたと思われるゲームが多数あります。2台のバイクが高 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
8:番外編 売れたスイーツを補充する

本稿は、毎日新聞の「プログラミング・はじめの一歩」とは関係のないオリジナル記事です。 概要 次の5品を専門に売るスイーツ店があります。 あめ:¥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日の信濃毎日新聞に掲載されていた記事です。詳しい内容には毎日新聞の「言葉を覚えるロボット」ページから有料記事に進むことで読めます。 概要 教えられた言葉を覚えてしゃべるオウムのロボットが2台います。記憶で […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
3:ロボットが水をまく日は?

この記事の詳しい内容には毎日新聞の「ロボットが水をまく日は?」ページから有料記事に進むことで読めます。 概要 ある公園に水撒きロボットがいます。ロボットは、天気が晴で気温が25度より高いときに水を撒きます。次の1週間の天 […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
2:花を1列ずつ植える

これは9月19日の信濃毎日新聞に掲載されていた記事です。詳しい内容には毎日新聞の「くり返しの「入れ子構造」」ページから有料記事に進むことで読めます。 概要 メモに書かれた通りに花を植えるロボットがいます。メモには次のよう […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編
1:おかしに当たり券を入れる

これは10月3日の信濃毎日新聞に掲載されていた記事です。詳しい内容には毎日新聞の「おかしに当たり券を入れる」ページから有料記事に進むことで読めます。 概要 舞台はとあるおかし工場です。そこでは、飴、せんべい、クッキー、ポ […]

続きを読む

プログラミング はじめの一歩 JavaScript + p5.js編

信濃毎日新聞で毎週土曜に掲載されている「信毎こども新聞」の1コーナーに「プログラミング はじめの一歩」という小学生向けのプログラミング講座の記事があります(隔週掲載)。 先日、その存在に初めて気づきまして、書かれている「 […]

続きを読む

5: Pathfinding(経路探索) Breadth-First Search(幅優先探索) アルゴリズム p5.js – 移植3

最後に、グリッドの数を増やし、ボタンのクリックでスタートするように修正します。 またpathFind()関数が返した最短経路をアニメーションで表示します。 p5.jsのボタンを使用するので、アドオンのp5.dom.jsラ […]

続きを読む

2: Pathfinding(経路探索) Breadth-First Search(幅優先探索) アルゴリズム p5.js – 解説

幅優先探索とは? 幅優先探索は、探索にツリー構造を用いるアルゴリズムで、スタート位置から近い順に探索することが特徴的です(参考:「幅優先探索」)。 スタート位置は下図の(1)です。これをツリーのルート(根)と言います。下 […]

続きを読む

1: Pathfinding(経路探索) Breadth-First Search(幅優先探索) アルゴリズム p5.js – 導入

Pathfinding(パスファインディング)とは、パスをファインドすること、つまり目的地までの経路を見つけることで、一般的には「ある場所から他の場所に移動するときの最短経路を導き出す方法」を言います。 その導き出し方( […]

続きを読む

4:サウンドの作成と加工(エンベロープ) p5.sound.js サウンド

ノイズドラム エンベロープ ホワイトノイズは、周波数スペクトルのあらゆる部分で等しいエネルギーを持つランダムなオーディオ信号です。 * エンベロープは、時間 / 値のペアとして定義される、一連のフェード(増減)です。 * […]

続きを読む

7_3:p5.play スプライトの点やピクセルに対する重なりチェック

p5.play.jsの当たり判定はスプライトのコライダーを使って行われますが、このとき任意の点(マウスカーソルの位置)やスプライトの内の不透明なピクセルの点に対して衝突チェックを行うこともできます。 具体的にいうと、下図 […]

続きを読む

5_3:p5.play スプライトのアニメーションの変更

スプライトには複数のアニメーションを追加することができ、表示するアニメーションを変更することができます。たとえば、スプライトに鳥の怪物がホバリングしているidleアニメーションと、獲物を襲うattackアニメーションを追 […]

続きを読む

2_2:p5.play スプライトシート アニメーションの基本

スプライトシートアニメーションの基本的な手順 アニメーションの表現では、たとえばゲームキャラクターの動きなどに”スプライトシート”がよく使用されます。スプライトシートとは、動かしたいアニメーションの全フレーム(コマ)を1 […]

続きを読む

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

アリソンパリッシュによる 1つのプログラミングフレームワークに詰め込むことのできる機能性は限られており、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のダウンロード方法と初めてのスケッチの作成方法を見ました。このチュートリアルでは、コンピュータプログラムの基本的な概念である、式と変数、ループについて見ていきま […]

続きを読む

1:ブラウザのコンソール内のJavaScript Creative Coding p5.js

このチュートリアルでは、JavaScriptプログラミング言語の基本をWebブラウザのJavaScriptコンソールを使ってみていきます。 Webブラウザの秘密の言語 Webブラウザは、Webページを見たり、ハイパーリン […]

続きを読む

10_3:オブジェクトの配列 p5.js JavaScript

以下の2つは、これまで見てきた変数、繰り返し、条件、関数、オブジェクト、配列というプログラミングの主要概念を全部取り入れたサンプルです。オブジェクトの配列の作成はこれまで見てきた配列の作成とほとんど同じですが、要素がオブ […]

続きを読む

7:モーション p5.js JavaScript

パラパラ漫画と同様に、画面のアニメーションは、あるイメージを描画し、次いでそれと少しだけ違ったイメージを描画することの連続で作成されます。滑らかなモーション(動き)の錯覚は残像によって生み出されます。同じように見えて少し […]

続きを読む

5_6:変換状態の保存と復元 p5.js JavaScript

変換の効果が以降の関数に影響しないように分離させることができます。push()関数は現在の座標システムのコピーを保存し、pop()関数は保存した座標システムを復元します。これらの関数は、あるシェイプにだけ特定の変換が必要 […]

続きを読む

5:移動、回転、拡大縮小 p5.js JavaScript

キャンバス上での描画物の位置取りと移動にはまた、キャンバスの座標システムを変更するというテクニックがあります。たとえばシェイプは右に50ピクセル移動することができますが、これは、座標の原点(0,0)を50ピクセル右に移動 […]

続きを読む

4_7:マッピング(対応付け) p5.js JavaScript

プログラミング用語として「マッピング」という単語が使われますが、これは日本語で言うと、「あれとこれを対応付ける」というような意味です。たとえば、キャンバスの幅が1920ピクセルあって、mouseXの値を、キャンバスの背景 […]

続きを読む

4_3:応答:イージングの導入 p5.js JavaScript

Webアニメーションでは、ある位置からある位置に移動するとき、目的地にすぐにではなく少し間をとってから到達したり、だんだん速くなったり(加速)、だんだん遅くなったり(減速)するものがよく見られます。これはイージングと呼ば […]

続きを読む

11_3:ml5.js SketchRNN 描く線の最初のデータを得るまで ml5.js JavaScript

ml5.jsでは、数式で表されるような機械学習の難しい側面が隠されているので、このSketchRNNを扱うときでも、あらかじめ用意された関数やメソッドを適切に操作するだけで、興味をそそる面白い体験を得ることができます。 […]

続きを読む

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)に使用される、関係性のモデルのグループです。このメソッドを使用すると、任意の入力ベクトルに対してベクトル演算を実行することができま […]

続きを読む

7_3:ビデオに対するPoseNetサンプル(1人の姿勢検出) ml5.js JavaScript

本稿は「ml5-examples/p5js/PoseNet/PoseNet_webcam」で公開されているサンプルの解説です。 コンピュータにとって、ビデオはつながった静止画を高速で表示することと同じなので、ビデオに映っ […]

続きを読む

5_1_3:鼻歌音程モニター ml5.js JavaScript

AndroidやiOSアプリの「ボーカル音程モニター」にヒントを得て、「鼻歌音程モニター」なるものを試作しました。 これはピッチやMIDI番号、音程の取得までは前の「5_1_2:ピッチ抽出ピアノ」と同じで、ピッチの数値を […]

続きを読む

5_1:ピッチ抽出(Pitch Detection) ml5.js JavaScript

pitchDetection() ピッチ抽出アルゴリズムは、音声信号のピッチや基本周波数を推測する方法です。このメソッドを使用すると、訓練済みの機械学習ピッチ抽出モデルを使って、サウンドファイルのピッチを推測することがで […]

続きを読む

4_1_2:LSTMの訓練(「不思議の国のアリス」モデルの作成) ml5.js JavaScript

初めに概略を述べておくと、「不思議の国のアリス」風の文章を生成するには、「4_1_1:LSTM 文章生成サンプル」で示したml5.charRNN()の第1引数を、「不思議の国のアリス」のモデルへのパスに変えるだけです。た […]

続きを読む

3_1:特徴抽出(Feature Extraction) ml5.js JavaScript

featureExtractor() ニューラルネットワークは画像内容の認識に使用できます。画像をある決まったカテゴリーに分類する際、ほとんどの場合は、大きなデータセットで訓練された”訓練済み”モデルを使用することになる […]

続きを読む

13_6:報酬を割引き、勾配を重みに適用する

いよいよカートポールサンプルの核心に入っていきます。ここでは、「報酬を割引き、それを反映した勾配を重みに適用する」ということを行います。具体的には、「割引率と、全ゲームで集めた全報酬から、報酬の割引を実行する。そして報酬 […]

続きを読む

13_1 カートポールサンプル シンプルバージョン

次の動画は、本稿で最終的に作成するカートポールサンプルの実行画面を録画したものです。 カートポールとは、車輪の付いた台座(カート)の上に細長い棒(ポール)を置いものを言います。カートポールサンプルは、強化学習と呼ばれる機 […]

続きを読む

12 ボストンデータセットによる多変数回帰

「5 ビール売上本数の予測」では、最高気温とビールの売上本数が比例関係にあるととらえ、最高気温を説明変数、売上本数を目的変数として、直線の方程式を得ることで、データにない最高気温の日の売上本数を予測しました。この方法は単 […]

続きを読む

5_1 エクセルでビール売上数を予測する

最高気温が高いほどビールは多く売れるだろう、という相関関係は、エクセルの機能を使うと、実に簡単に右上がりの直線で表すことができます。 こういう統計があったとすると(実際には架空のデータです)、エクセルのグラフ機能で、実に […]

続きを読む

4 論理ゲートをTensorFlow.jsで実装する

機械学習の入門書などを見ていると、「論理ゲート」というものがよく取り上げられています。論理ゲートというのは、元は電子回路に用いられる論理で、オンかオフの2つの入力があった場合、それをオンかオフのどちらで出力するかを決める […]

続きを読む

11_2 手作りイージング関数を使ったキャンバスアニメーション

Web Animations APIとは直接は関係しませんが、イージング関数に渡す変数t, b, c, dを手作りし、得た結果を反映させるキャンバスアニメーションを作成します。1秒かけて、青い円が20から400まで移動し […]

続きを読む

11-1 そもそもイージング関数は一体何を…

イージング関数とは、アニメーションに指定されたキーフレーム間のプロパティ値を補間するときに使用される関数で、次のようなグラフで表されます。一般的なイージング関数は、0秒の始まりから1秒の終わりまでの間に、0から1までの数 […]

続きを読む

10_10_1 finishイベントの利用

「10-10 アニメーションタイマーとしての利用」で述べた”1 セットした時間の経過を教えてくれる、通常のタイマー”の例です。ここでは、アニメーションタイマーのfinishイベントを利用しています。 ページを開くと、カラ […]

続きを読む

10_10 アニメーションタイマーとしての利用

Animationオブジェクトは次の特徴を持つタイマー(便宜的にアニメーションタイマーと呼びます)としても利用できます。 セットした時間の経過を教えてくれる、通常のタイマー セットした時間を繰り返し、その回数を教えてくれ […]

続きを読む

10_3 Animationオブジェクトのメソッド

Animationオブジェクトのメソッドは数が少なく、ビデオのリモコン操作のようなものなので、簡単です。 play() アニメーションの再生を開始するか、再開する。アニメーションがすでに完了している場合には、最初から開始 […]

続きを読む

10_1_5 Web Animations APIのモデル

WAAPIには、タイミングモデルとアニメーションモデルという2つのモデルがあります。 タイミングモデル 一瞬一瞬のタイム値を受け取り、それをアニメーションの進捗値(全体の中で何%すすんだかを示す数値)に変換する。 同時に […]

続きを読む

10_1_3 重要!! ブラウザの実験的な機能を有効化する方法

今後、WAAPIの実装がどのように進むかは分かりませんが、少なくとも現状では、WAAPIのフル機能を使用するには、ブラウザの実験的な機能を有効化する必要があります。 実装が最も進んでいるのはFirefoxで、次がChro […]

続きを読む

6_3 よいアニメーションにするには?

よくできたアニメーション、つまり、スタート時にはもたもたせずにすぐ始まり、ヌルヌル動く(60fpsを維持する)アニメーションにするための、いくつかの技術的な方策が提案されています。 再レイアウトをともなわないCSSプロパ […]

続きを読む

6_2 レイアウト変更や再描画をともなうプロパティ

要素のプロパティに変更が加えられると、ブラウザは、その変更の影響を受けるすべての要素のサイズと位置を計算しなくてはなりません。たとえば、相対的な位置設定がしてある要素の位置が変わると、他の子要素や親要素に影響が及ぶことに […]

続きを読む

6 アニメーションのパフォーマンスを上げる

「1_1 アニメーションとは?」では、人間は本来的にアニメーションが好きなのだ、ということを述べましたが、これは正確ではありません。よくできたアニメーションは好きですが、できの悪いものは逆効果で、不快になるでしょう。 よ […]

続きを読む

1_3 Webアニメーション(CSSアニメーション)の場合

Webページで見られるCSSアニメーションも、人間の錯覚によって生まれるという点では、映画のアニメーションと同じです。ただし、CSSアニメーションでは、全コマを描くわけではありません。変化のポイントとなる時点をキーとして […]

続きを読む

1_2 アニメーションが動いて見える原理

アニメーションが動いて見えるのは、人間の錯覚で、脳がだまされているからです。 映画のフィルムのコマで考えると分かりやすくなります。 映画では、1秒間に24のコマが映写されます。これは高速なので、人間の目(脳)は残像現象に […]

続きを読む