JavaScriptはインターネット上の言語である。これなくしてフロントエンドの開発はあり得ません。この言語の構文に慣れることは、初心者、特に子供には難しいかもしれません。

初心者を完治させるには、ブラウザでローカルサーバーをインストールして動かすことでさえ、つまずくことがあるのです。もし、何もインストールせずに、JavaScriptをかっこよくする方法があったらどうでしょう？p5.jsは、クリエイティビティのために設計されたコーディングライブラリです。

ここでは、簡単なコーディングの原則**を用いて、音に反応するロボットヘッドのアニメーションを作成する方法を紹介します。

株式会社ピーファイブジェイエス（p5.js）は何ですか？

LA在住のアーティスト、ローレン・マッカーシーが制作したp5.jsライブラリです。創造的な表現やアートのための同様の処理プラットフォームを提供することを目的としています。分かりやすいツールに加え、説明の丁寧なチュートリアルやリファレンスドキュメントが用意されており、初心者に最適な内容となっています。

アニメーション、音楽、簡単なゲーム、あるいは外部ハードウェアとの接続など、**p5.jsがお役に立ちます。

p5.jsエディタ

まず、ブラウザーを開き、p5.jsウェブエディターに移動します。始める前に、オプションで2つのステップがあります。

1 スケッチを保存するにはp5.jsにログインする必要がありますので、アカウントを作成するのが賢明です。登録は無料で、希望すればGoogleやGitHubのアカウントでログインすることも可能です。

2 右上にある設定の歯車をクリックします。ここでは、テーマと文字サイズを変更することができますので、ダークテーマを愛するすべての人のために。

jsエディタは、コードエディタ、コンソール、出力ウィンドウを同じスペースに統合したものです。これまで、2つの機能が設定されていました。

p5.jsの基礎知識

各P5.jsのスケッチは、setup()関数とdraw()関数の2つの要素から始まります。Arduinoのプログラミングをしたことがある人にとっては、馴染み深いものでしょう

function setup() { createCanvas(500, 500);}

setup()関数は、プログラム開始時に実行されます。この例では、セットアッププログラムは400ピクセルの正方形のキャンバスを作成します。これを(500500)に変更すると、より大きな作業領域が得られます。

インストーラーは一度だけ実行され、プログラムに必要なパーツや、プログラムの初期値を作成するために使用されます。

function draw() { background(220);}

draw()メソッドは、1フレームごとに呼び出されます。これは、Arduinoのloop関数や、Unity3Dのupdate関数によく似ています。現在、背景は1フレームごとに再描画されます。上部には、再生と停止の2つのアイコンが表示されます。再生をクリックしてください。

これが今までのプログラムです。500x500のキャンバスで、背景はグレーです。

形状の作成

p5.jsでShapeを使うのは、プリセットのShapeオブジェクトを使うのとは少し違います mo.js company web animation tutorial.単純な楕円を作るには、draw()メソッドの中で、設定した背景色のすぐ下のコードに追加します。

function draw() { background(220); ellipse(250,250,50)}

ellipse()メソッドは、いくつかのパラメータを受け付けます。最初の2つは、キャンバス上のXとYの位置です。キャンバスの幅が500ピクセルなので、この2つの値を250に設定すると、楕円が中央に配置されます。3番目のパラメータは、円の幅で、この場合は50ピクセルです。

背景と円形がありますが、見栄えが悪いので修正しましょう。

スタイルを追加する

まず、背景色を変更します。括弧内の数字はグレー値を示す。つまり、0は黒、255は白で、その間にさまざまな濃淡がある。背景を黒くする場合は、この値を0にします。

function draw() { background(0); ellipse(250,250,50);}

これで、再生をクリックすると、背景が黒くなります。円に色をつけるには、RGB（赤、緑、青）値を個別に操作する必要があります。スクリプトの先頭（セットアップ関数が始まる直前）に、これらの値を格納するための変数をいくつか作成します。

var r, g, b;

セットアップ機能で、rの値を255に、その他の値を0に設定すると、そのRGBの合成色は真っ赤になります!

r=255;g=0;b=0;

円に色を付けるには、円を描く前にdrawメソッドにfill()を追加してください。

fill(r,g,b); ellipse(250,250,50);

ここで再生をクリックすると、黒い背景に赤い丸が表示されます。

サークルを作ることから始めるのもいいですが、インタラクティブ性を持たせることが、本当の楽しみの始まりです。

クリックすると色を変更できます

p5.jsでは、マウスクリックで実行されるコードを追加するのはとても簡単です。draw()メソッドの下に新しい関数を作成します。

function mousePressed() { r = random(256); g = random(256); b = random(256);}

mousePressed() は、マウスが押されたのを待ち、大括弧の中のコードを実行します。この関数が行うことは、0から与えられた数値の間のランダムな値を返すことです。この例では、マウスを押すたびに、r、g、bの値を0〜255の間で設定することになります。

コードを再実行し、マウスを数回クリックすると、円の色が変わるはずです。

さて、マウスクリックに反応するアニメーションですが、ユーザーの声をどのように利用するのでしょうか。

音声コントロールの設定

p5.jsのサウンドライブラリは、システムのマイクを使って簡単に使うことができます。スクリプトの先頭で、新しい変数micを作成します。

var r, g, b;var mic;

setup()関数に以下の行を追加し、音声入力にマイクを割り当てます。

mic = new p5.AudioIn()mic.start();

今すぐ再生」をクリックすると、搭載マイクへのアクセスを許可するかどうかを確認するダイアログが表示されます。

許可」をクリックします。お使いのブラウザによっては、選択した内容を記憶していたり、確認のためのクリックが必要な場合があります。さて、マイクの設置が完了したら、いよいよ使ってみましょう。

体積によるスケーリング

マイクの音量をプログラムの中で値として使うには、変数として格納する必要があります。draw()メソッドを次のように変更してください。

function draw() { var micLevel = mic.getLevel(); background(0); fill(r,g,b); ellipse(250,250,50 + micLevel * 2000); }

この関数の最初に、micLevel という新しい変数が作成され、現在のマイクの振幅が代入されます。

楕円の幅は50ピクセル固定です。現在、50ピクセルが最小の幅で、これに毎フレーム更新されるmicLevelの値が加わる。micLevelにこれを掛けると、マイクの感度によって変化する。

より高い値を試してみてください。5000の値は、スケール上でより劇的な変化をもたらすでしょう。

注：この方法でうまくいかない場合は、マイクが正しく設定されていない可能性があります。ブラウザはシステムデフォルトのマイクを使用するため、サウンド設定を変更し、更新する必要があります。

ロボットを作る

これでロボットの作成に必要なツールはすべて揃いました。まず、作成した楕円を移動し、別の楕円を追加して目を**します。

ellipse(150,150,50 + micLevel * 2000); ellipse(350,150,100 +micLevel * 2000);

歯」は、画面の下から伸びる一連の長方形である。rect()メソッドの固定幅は、追加のパラメータを取ることに注意しよう。

rect(0, 500,100, -100 -micLevel * 5000); rect(400, 500,100, -100 -micLevel * 5000); rect(100, 500,100, -100 -micLevel * 3000); rect(300, 500,100, -100 -micLevel * 3000); rect(200, 500,100, -100 -micLevel * 1000);

今回は歯の高さだけを変えたいとのことですが、「笑顔」の効果を出すには、歯の感度が違うことが必要です。高さの最小値は-100（キャンバスの底面から上昇するため）なので、micLevelも負でなければなりません。

再生ボタンを押すと、ほぼ完成したロボットの顔が表示されます

もう一度言いますが、最高の結果を得るためには、倍率を調整する必要があるかもしれません。

仕上げを加える

目に瞳孔を追加するために、さらにeliple()コールを使用します。別のfill()で白にする。draw() メソッドの、先ほど作成した "tooth" の下に追加してください。

fill(255);ellipse(150,150,20 + micLevel * 1000);ellipse(345,150,30 + micLevel * 1000);

最後に、フラグメント全体にメリハリをつけるために、setup()関数でストロークのウェイトを変更します。

strokeWeight(5);

それだ！

もし何かがうまくいかない場合は、コードを十分に確認してください。必要であれば、このチュートリアルの全コードをp5エディタで見ることができます。

p5.jsを継続して使用する

この初心者向けチュートリアルでは、p5.jsの基本的な概念を紹介し、いかに簡単に作成できるかを説明します。例によって、このプロジェクトはp5.jsの全機能にはほとんど触れていません。

p5.jsを使ったアート制作に時間をかけるのは、プログラマーの思考法やJavaScriptの文法にすでに慣れているからこそ。これらはすべて、本格的にJavaScriptを学ぼうと思ったときに向上させるべき重要なスキルです。