チュートリアル メディアオブジェクトでアニメーション

メディアオブジェクトでアニメーション

By Joanne Amarisa, Jaleesa Trapp, Greg Benedis-Grab

はじめに

p5.jsは、HTMLキャンバス上で図形を描画、着色、アニメーション化することを楽しく簡単にします。また、GIFや静止画像などのメディアファイルを使用して視覚効果を作成する簡単な方法も提供しています。

ポワンティリスムで描かれた3つの花びらと3本の実線の茎、そして水やり缶のアニメーションの1フレーム。

ポワンティリスムで描かれた3つの花びらと3本の実線の茎、そして水やり缶のアニメーションの1フレーム。

画像やGIFファイルには、p5.jsプロジェクトで表示や修正に使用できる情報が含まれています。このチュートリアルでは、メディアを使用してインタラクティブなアニメーションを作成し、以下のことを学びます：

  • preload()関数とp5.Imageオブジェクトを使用してp5.jsスケッチに画像ファイルをアップロードし表示する
  • サイズ調整、位置決め、スタイリングのためのp5.Imageメソッドを使用してp5.jsでの画像ファイルの外観を調整する
  • p5.Imageオブジェクトとインタラクトする
  • createGraphics()を使用して追加の描画面を作成する
  • スケッチをGIFファイルとしてデバイスに保存する

メディアオブジェクトを使用した完成したインタラクティブアニメーションのこの例を探索してください。

画面上で上昇する3つの花の画像

画面上で上昇する3つの花の画像

ペイント缶が花の色に近似した色のドットの配置を作成します。

ペイント缶が花の色に近似した色のドットの配置を作成します。

必要なもの

  • インターネットにアクセスできるコンピュータ
  • p5.js Web Editorのアカウント
  • このチュートリアル用にダウンロードする4つのソース画像ファイル：
  • p5.jsでの簡単なインタラクティビティとアニメーションを可能にする概念の理解。これらには以下が含まれます：

これらの概念の詳細については、以下のチュートリアルを参照してください：はじめに、変数と変更、条件文とインタラクティビティ、関数によるコードの整理。

ステップ1 – 画像ファイルをスケッチフォルダにアップロードする

  • 3つの.png画像ファイルと1つの.gifファイルをコンピュータにダウンロードします。また、Wikimedia Commonsなどのロイヤリティフリーの画像ソースから自分の描画や画像を使用することもできます。
  • ブラウザでp5.js Web Editorを開き、プロジェクトに「Animating with Media Objects」という名前を付け、アカウントに保存します。
  • エディタの左上にあるsketch.jsの横の矢印を選択します。スケッチフォルダが左サイドバーに表示されます。
  • プラス ”+” ボタンをクリックし、“Upload file”を選択します。
  • デバイスから4つの画像を選択し、スケッチフォルダにアップロードします。表示されるアップロードボックスにファイルをドラッグ＆ドロップするか、ボックスをクリックしてコンピュータのファイルマネージャーからファイルを選択できます。

ユーザーがp5.js Web Editorで矢印ボタン、+ボタンをクリックし、Upload Fileオプションを選択する様子。

ユーザーがp5.js Web Editorで矢印ボタン、+ボタンをクリックし、Upload Fileオプションを選択する様子。

画像ファイル

画像ファイルは、画像を構成する色付きピクセルのグリッドを保存します。p5.jsが処理できる画像ファイルタイプはいくつかあります。最も一般的な画像タイプはJPEG、PNG、またはGIFです。これらはファイル名の末尾にある拡張子で識別できます：.jpg、.png、.gif。

JPEGとPNGは最も一般的な静止画像のタイプの中にあります。静止画像とは動かない画像のことです。JPEGはしばしば写真を指し、PNGはグラフィックスやデザインを指すことが多く、透明な背景を持つ画像をサポートしています。GIFという用語は広くアニメーション画像に使用されています。これらには一連の画像が含まれており、アニメーションとして表示できます。

ステップ2 – 画像をキャンバスにロードする

  • 各画像を表す4つのグローバル変数を宣言します：let flower1, flower2, flower3, water;
  • グローバル変数が宣言された後、function setup()の直前にpreload()関数を定義します。
  • preload()関数内で、flower1 = loadImage("flower-1.png");と入力します。
    • これはloadImage()関数を使用して画像情報をメモリにロードします。
    • 画像はグローバル変数flower1に割り当てられます。
    • この手順をすべての画像に対して繰り返します。

コードは以下のようになるはずです：

//画像ファイル用の変数。
let flower1;
let flower2;
let flower3;
let water;

function preload() {
  //画像ファイルをロードする。
  flower1 = loadImage("flower-1.png");
  flower2 = loadImage("flower-2.png");
  flower3 = loadImage("flower-3.png");
  water = loadImage("Water.gif");
}

preload()

preload()は、p5.jsライブラリによって自動的に呼び出される関数です。スケッチで外部ファイルをロードするために使用され、スケッチが実行される前にこのプロセスを完了するための時間をコンピュータに与えます。setup()とdraw()関数は、preload()関数が完了した後にのみ実行されます。

loadImage()

loadImage()は、配置されたフォルダ内の画像へのパスをたどり、それをp5.Imageオブジェクトとしてメモリにロードします。p5.Imageは画像情報を保存するオブジェクトです。p5.jsには整数、ブール値、文字列など多くのデータ型があります。このチュートリアルの後半で、p5.js関数がその画像データをどのように使用できるかを一緒に探索します。

画像をロードするには、画像のファイル名を含む1つの文字列引数でloadImage()を呼び出します。例えば、loadImage("flower-1.png");のようにします。

画像がフォルダ内にある場合、ファイル名の前にフォルダ名を記述し、その後にフォワードスラッシュ ”/“を付けてそのフォルダを参照します。例えば、画像がassetsというフォルダにある場合、次のように入力します：loadImage("assets/flower-1.png");

p5.js Editorのスケッチファイルパネルに、assetsフォルダとその中のflower-1.pngという名前のファイルが表示されています。テキストエディタでは、loadImage関数の括弧内の引用符の中にassets/flower-1.pngが表示されています。

p5.js Editorのスケッチファイルパネルに、assetsフォルダとその中のflower-1.pngという名前のファイルが表示されています。テキストエディタでは、loadImage関数の括弧内の引用符の中にassets/flower-1.pngが表示されています。

あるいは、ウェブから画像をロードする場合は、画像のURLを引用符で囲んで入力します。例：loadImage('https://i.ibb.co/3141Spd/flower-1.png');

注意

ウェブベースの画像を使用する場合は、安全で信頼できるサーバーからアクセスしていることを確認してください。また、画像を使用するために必要な著作権やライセンスにも注意してください。

preload()とloadImage()関数の詳細については、p5.jsリファレンスをご覧ください。

ステップ1 – 画像ファイルをスケッチフォルダにアップロードする

  • 3つの.png画像ファイルと1つの.gifファイルをコンピュータにダウンロードします。また、Wikimedia Commonsなどのロイヤリティフリーの画像ソースから自分の描画や画像を使用することもできます。
  • ブラウザでp5.js Web Editorを開き、プロジェクトに「Animating with Media Objects」という名前を付け、アカウントに保存します。
  • エディタの左上にあるsketch.jsの横の矢印を選択します。スケッチフォルダが左サイドバーに表示されます。
  • プラス ”+” ボタンをクリックし、“Upload file”を選択します。
  • デバイスから4つの画像を選択し、スケッチフォルダにアップロードします。表示されるアップロードボックスにファイルをドラッグ＆ドロップするか、ボックスをクリックしてコンピュータのファイルマネージャーからファイルを選択できます。

ユーザーがp5.js Web Editorで矢印ボタン、+ボタンをクリックし、Upload Fileオプションを選択する様子。

ユーザーがp5.js Web Editorで矢印ボタン、+ボタンをクリックし、Upload Fileオプションを選択する様子。

画像ファイル

画像ファイルは、画像を構成する色付きピクセルのグリッドを保存します。p5.jsが処理できる画像ファイルタイプはいくつかあります。最も一般的な画像タイプはJPEG、PNG、またはGIFです。これらはファイル名の末尾にある拡張子で識別できます：.jpg、.png、.gif。

JPEGとPNGは最も一般的な静止画像のタイプの中にあります。静止画像とは動かない画像のことです。JPEGはしばしば写真を指し、PNGはグラフィックスやデザインを指すことが多く、透明な背景を持つ画像をサポートしています。GIFという用語は広くアニメーション画像に使用されています。これらには一連の画像が含まれており、アニメーションとして表示できます。

ステップ2 – 画像をキャンバスにロードする

  • 各画像を表す4つのグローバル変数を宣言します：let flower1, flower2, flower3, water;
  • グローバル変数が宣言された後、function setup()の直前にpreload()関数を定義します。
  • preload()関数内で、flower1 = loadImage("flower-1.png");と入力します。
    • これはloadImage()関数を使用して画像情報をメモリにロードします。
    • 画像はグローバル変数flower1に割り当てられます。
    • この手順をすべての画像に対して繰り返します。

コードは以下のようになるはずです：

//画像ファイル用の変数。
let flower1;
let flower2;
let flower3;
let water;

function preload() {
  //画像ファイルをロードする。
  flower1 = loadImage("flower-1.png");
  flower2 = loadImage("flower-2.png");
  flower3 = loadImage("flower-3.png");
  water = loadImage("Water.gif");
}

preload()

preload()は、p5.jsライブラリによって自動的に呼び出される関数です。スケッチで外部ファイルをロードするために使用され、スケッチが実行される前にこのプロセスを完了するための時間をコンピュータに与えます。setup()とdraw()関数は、preload()関数が完了した後にのみ実行されます。

loadImage()

loadImage()は、配置されたフォルダ内の画像へのパスをたどり、それをp5.Imageオブジェクトとしてメモリにロードします。p5.Imageは画像情報を保存するオブジェクトです。p5.jsには整数、ブール値、文字列など多くのデータ型があります。このチュートリアルの後半で、p5.js関数がその画像データをどのように使用できるかを一緒に探索します。

画像をロードするには、画像のファイル名を含む1つの文字列引数でloadImage()を呼び出します。例えば、loadImage("flower-1.png");のようにします。

画像がフォルダ内にある場合、ファイル名の前にフォルダ名を記述し、その後にフォワードスラッシュ ”/“を付けてそのフォルダを参照します。例えば、画像がassetsというフォルダにある場合、次のように入力します：loadImage("assets/flower-1.png");

p5.js Editorのスケッチファイルパネルに、assetsフォルダとその中のflower-1.pngという名前のファイルが表示されています。テキストエディタでは、loadImage関数の括弧内の引用符の中にassets/flower-1.pngが表示されています。

p5.js Editorのスケッチファイルパネルに、assetsフォルダとその中のflower-1.pngという名前のファイルが表示されています。テキストエディタでは、loadImage関数の括弧内の引用符の中にassets/flower-1.pngが表示されています。

あるいは、ウェブから画像をロードする場合は、画像のURLを引用符で囲んで入力します。例：loadImage('https://i.ibb.co/3141Spd/flower-1.png');

注意

ウェブベースの画像を使用する場合は、安全で信頼できるサーバーからアクセスしていることを確認してください。また、画像を使用するために必要な著作権やライセンスにも注意してください。

preload()とloadImage()関数の詳細については、p5.jsリファレンスをご覧ください。

ステップ5 – 花をアニメーション化する

resize()メソッドは画像のソースサイズを縮小するのに便利です。しかし、画像の表示サイズをその場で変更することもできます。このステップでは、image()関数呼び出しにサイズ引数を2つ追加して、花が「成長」するようにアニメーション化します。

5.1 – 花が成長する前のサイズを設定する

  • flowerSizeという新しい変数を宣言し、小さめの数値を与えます。この例では20に設定します。
    • これが花が成長する前の開始サイズになります。
  • draw()関数に移動します。各花を描画するimage()関数に、flowerSizeを2つの追加パラメータとして導入します。
    • コードは以下のようになるはずです：image(flower1, 100, flowerY, flowerSize, flowerSize);

5.2 – 各花の茎を描画する

  • flowerY変数を350に調整して、花をスケッチの下部近くに配置します。
  • 最初の茎を描画するために、draw()関数の先頭にline(100, 400, 100, flowerY);を追加します。
    • 線のx座標は最初の花のx座標と同じになります。この場合、x値100に描画されます。
    • 線のy座標はキャンバスの下端（400）から花の中心（flowerY）まで伸びます。
    • これを他の2つの花画像に対しても繰り返し、各花のx座標に合わせます。
    • 線に太い茶色のストロークを与えます。

コードは以下のようになるはずです：

5.3 – マウスを使用して花を成長させる

  • draw()関数内で、新しいif文を開始します：if (mouseIsPressed) {}
    • このif文の本体（中括弧の間）に配置された関数は、マウスが押されている間のみ実行されます。
  • 中括弧の中に、次のコード行を追加します：flowerY -= 1;
    • これによりflowerYの値が1ずつ減少し、マウスが押されている間、花がキャンバスの上方に移動します。
  • その直下に、別のコード行を追加します：flowerSize += 1;
    • これによりflowerSize変数が1ずつ増加し、マウスが押されている間、花画像のサイズが大きくなります。

draw()関数は以下のようになるはずです：

function draw() {
  background(255);
  // 個々の茎を描画。
  stroke("brown");
  strokeWeight(3);
  line(100, 400, 100, flowerY);
  line(200, 400, 200, flowerY);
  line(300, 400, 300, flowerY);
  // 静止花画像を1列に描画。
  image(flower1, 100, flowerY, flowerSize, flowerSize);
  image(flower2, 200, flowerY, flowerSize, flowerSize);
  image(flower3, 300, flowerY, flowerSize, flowerSize);


  // マウスが押されている間、花を成長させる。
  if (mouseIsPressed) {
    flowerY -= 1;
    flowerSize += 1;
  }
}

5.4 – 花の成長に制限を設ける

花が無限に高く成長するのを避けるために、if文を導入して成長を制限します。

  • 新しいif文を作成し、次のように入力します：if (flowerSize > 100) { }
    • 中括弧の中に、次を追加します：flowerSize = 100;
    • これにより、花のサイズが100ピクセルを超えた場合、100の値で最大サイズに留まる条件が設定されます。
  • 別のif文を作成し、次のように入力します：if (flowerY < 100) { }
    • 中括弧の中に、2行のコードを追加します：flowerY = 350;とflowerSize = 20;
    • これにより、花のy座標が100未満になった場合、元のy座標に戻り、花が元のサイズに戻る条件が設定されます。

draw()関数は以下のようになるはずです：

function draw() {
  background(255);

  // 個々の茎を描画。
  stroke("brown");
  strokeWeight(3);
  line(100, 400, 100, flowerY);
  line(200, 400, 200, flowerY);
  line(300, 400, 300, flowerY);

  // 静止花画像を1列に描画。
  image(flower1, 100, flowerY, flowerSize, flowerSize);
  image(flower2, 200, flowerY, flowerSize, flowerSize);
  image(flower3, 300, flowerY, flowerSize, flowerSize);

  // マウスが押されている間、花を成長させる。
  if (mouseIsPressed) {
    flowerY -= 1;
    flowerSize += 1;
  }
 
  // 花のサイズの成長を制限。
  if (flowerSize > 100) {
    flowerSize = 100;
  }
 
  // 花が一定の高さに達したら
  // 成長をリセット。
  if (flowerY > 100) {
    flowerY = 350;
    flowerSize = 20;
  }
}

これは花の成長を制限する一つの方法です。あるいは、if文をネストしてコードを簡略化することもできます：

function draw() {
  background(255);

  // 個々の茎を描画。
  stroke("brown");
  strokeWeight(3);
  line(100, 400, 100, flowerY);
  line(200, 400, 200, flowerY);
  line(300, 400, 300, flowerY);

  // 静止花画像を1列に描画。
  image(flower1, 100, flowerY, flowerSize, flowerSize);
  image(flower2, 200, flowerY, flowerSize, flowerSize);
  image(flower3, 300, flowerY, flowerSize, flowerSize);

  // マウスが押されている間、花を成長させる。
  if (mouseIsPressed) {
    if (flowerY > 100) {
      flowerY -= 1;

    }

    if (flowerSize < 20) {
      flowerSize += 1;
    }
  }
}

クリックして押し続けて花を成長させてみてください：

ヒント

コードを整理するために、draw()関数内の関数とif文をdrawStems()とgrowFlowers()という別々の関数にグループ化してください。

例
// ... 変数宣言、preload()、draw()
function draw() {
  background(255);

  // 新しい関数！
  drawStems();
  growFlowers();
}

function drawStems() {
  // 個々の茎を描画。
  stroke("brown");
  strokeWeight(3);
  line(100, 400, 100, flowerY);
  line(200, 400, 200, flowerY);
  line(300, 400, 300, flowerY);
}

function growFlowers() {
  // 花画像を描画。
  image(flower1, 100, flowerY, flowerSize, flowerSize);
  image(flower2, 200, flowerY, flowerSize, flowerSize);
  image(flower3, 300, flowerY, flowerSize, flowerSize);

  // マウスが押されている間、花を成長させる。
  if (mouseIsPressed) {
    if (flowerY > 100) {
      flowerY -= 1;
    }

    if (flowerSize < 20) {
      flowerSize += 1;
    }
  }
}

ステップ6 – 水やり缶GIFを追加する

  • draw()関数内のgrowFlowers()関数の後に、image(water, mouseX, mouseY);を追加して、水やり缶GIFを描画し、マウスに追従するように配置します。
  • setup()内で、ステップ3で花に使用したのと同様の方法を使用して、GIFのサイズを50x50ピクセルに変更します。

ステップ7 – カーソルを使ってGIFをアニメーション化する

次に、マウスが押されているときだけGIFが再生されるように設定しましょう。

  • setup()内で、water.pause();と入力して、デフォルトでGIFを一時停止モードにします。
  • draw()の後に、新しいmousePressed()関数を定義します。
    • mousePressed()関数内で、water.play()と入力してアニメーションを開始します。
  • mousePressed()の後に、新しいmouseReleased()関数を定義します。
    • mouseReleased()関数内で、water.reset();とwater.pause();と入力して、マウスが押されていないときにGIFを一時停止してリセットします。

コードとスケッチは以下のようになるはずです：

このスケッチでは、インタラクティビティに対して異なるアプローチを使用しています。前のスケッチでは、draw()内でブール変数mouseIsPressedの状態をチェックしていました。今回はmousePressed()とmouseReleased()関数を使用しています。これらの関数は、マウスボタンが押されたり離されたりするイベントに基づいて、p5.jsによって自動的に呼び出されます。マウスが押し下げられるとアニメーションが始まり、マウスが離されるとアニメーションが停止してデフォルトの画像にリセットされます。

試してみよう！

setup()内で.delay()メソッドを適用して、GIFアニメーションを速くしてみてください。フレーム間のミリ秒数をパラメータとして渡します。例： water.delay(10);

ステップ8 – ポワンティリズム効果で花を描画する

次のステップでは、3つの花画像にアニメーションのポワンティリズム効果を作成します。

ポワンティリズムとは、小さな色付きの点を使って画像を形成する絵画技法を指します。ここに例があります。アルベール・デュボワ＝ピレのパリの眺め（1885年）というタイトルの作品です。

何百万もの点で構成されたパリの公園の絵画。

何百万もの点で構成されたパリの公園の絵画。

画像を表示するだけでなく、p5.jsは画像からピクセル情報を抽出することもできます。例えば、画像からランダムなピクセルの色値を取得し、その色を使って同じ相対位置に点を描画することができます。これにより、キャンバス上に点の集合が作成され、元の画像のポワンティリズム的な抽象版が作成されます。

8.1 – スケッチを準備する

  • draw()からgrowFlowers()関数をコメントアウトします。静止画の花画像をポワンティリズムアニメーションに置き換えます。
  • flowerY変数を200に調整して、ポワンティリズムの花をキャンバスの中央に配置します。
let flowerY = 200;

// ...

function draw() {
  background(255);
  drawStems();
  // growFlowers();

  // 水やり缶GIFを描画。
  image(water, mouseX, mouseY);
}

8.2 – 新しいp5.Graphicsオブジェクトを作成する

まず、新しいp5.Graphicsバッファオブジェクトを作成します。グラフィックスバッファは新しいキャンバスを作成するのと似ています。これにより、キャンバス上に複数のレイヤーのグラフィックス情報を表示することができます。例えば、現在のスケッチでは、グラフィックスオブジェクトを使用して静的なキャンバスとポワンティリズムの花を分離します。キャンバスの背景をリフレッシュしても、ポワンティリズムの絵画はリセットされず、発展し続けます。

.

花の茎と水やり缶を含むキャンバスの背景と、3つの花を含むグラフィックスオブジェクトを示す画像。

花の茎と水やり缶を含むキャンバスの背景と、3つの花を含むグラフィックスオブジェクトを示す画像。

  • 新しいグローバル変数gardenを宣言します。
  • setup()関数内で、createGraphics(400,400)を使用して新しいグラフィックスオブジェクトを作成します。このオブジェクトはキャンバスと同じ寸法を持ちます。そして、このオブジェクトをグローバル変数gardenに割り当てます：garden = createGraphics(400, 400);
  • 新しいgardenグラフィックスオブジェクトは、グラフィックスオブジェクトが配置されるまでデフォルトで透明です。
  • draw()関数内で、image(garden, 0, 0);と入力して、グラフィックスオブジェクトをキャンバスの上に描画します。
    • この行が他の花やGIFのimage()コールバックの前に配置されていることを確認してください。
  • 変数、setup()、draw()関数は以下のようになるはずです。
let flower1;
let flower2;
let flower3;
let water;
let garden; // 新しいグラフィックスオブジェクト用の変数。

// ... preload()

function setup() {
  // 400x400 pxのキャンバスを設定。
  createCanvas(400, 400);

  // 花を描画するための
  // p5.Graphicsオブジェクトを作成。
  garden = createGraphics(400, 400);

  // ... imageMode()とリサイズ
}

function draw() {
  background(255);
  drawStems();
  // growFlowers();
  // グラフィックスオブジェクトを描画。
  image(garden, 0, 0);
 
  // 水やり缶GIFを描画。
  image(water, mouseX, mouseY);
  // マウスが押されているときにGIFを再生。
  if (mouseIsPressed) {
    water.play();
  }
}

// ... drawStems()とgrowFlowers()

この時点から、p5.Graphicsオブジェクトにレンダリングしたい関数には全てgarden.をプレフィックスとして追加する必要があります。例えば、グラフィックスオブジェクトに長方形を描画したい場合は、garden.rect(0,0,100,100)と書きます。ドット表記を使用するのは、通常のp5.js関数もグラフィックスオブジェクトのメソッドとして使用できるからです。

  • キャンバス上にグラフィックスオブジェクトを描画する手順については、この例をご覧ください。
  • キャンバスとグラフィックスオブジェクトに異なるオブジェクトをレンダリングするこの例をご覧ください。

ポワンティリズム効果をグラフィックスオブジェクトに描画します。これが有利な点は、キャンバスの背景をリフレッシュしても、gardenオブジェクトはリフレッシュされず、グラフィックスオブジェクトにポワンティリズムの点を追加し続けることができるからです。

p5.Graphicsオブジェクトについてさらに学ぶには、p5.jsリファレンスをご覧ください。

8.3 – 画像からピクセルの色を取得する

ポワンティリズム効果を作るために、まず花の画像のピクセルから色を取得することから始めます。

  • paintFlower() という新しい関数を定義します。
  • まず、画像内のランダムな点からピクセルを取得するのに役立つ変数を宣言します。最初の花の画像から始めましょう。
  • sourceX 変数を宣言し、0から画像の幅までのランダムな値を割り当てます。次のように書きます：let sourceX = random(0, flower1.width);
  • sourceY 変数を宣言し、0から画像の高さまでのランダムな値を割り当てます。次のように書きます：let sourceY = random(0, flower1.height);
  • let c = flower1.get(sourceX, sourceY); という行を追加します。
    • ここでは、p5.Image オブジェクトの .get() メソッドを使用して、画像内のランダムに選択されたピクセルから色の値を「取得」しています。
    • 変数 c が宣言され、その色の値が割り当てられています。

この段階で、新しい関数は次のようになるはずです：

function paintFlower() {
  let sourceX = random(0, flower1.width)
  let sourceY = random(0, flower1.height);
  let c = flower1.get(sourceX, sourceY);
}

8.4 – キャンバスに点を描く

画像からランダムに選択されたピクセルの色を取得したので、今度はその色を使ってキャンバス上の同じ相対位置に点を描きます。

  • garden.stroke(c);と入力して、ガーデングラフィックスオブジェクトに描かれる点のストローク色を変数cに設定します。
  • ストロークの太さをランダムに5から10の間の値に設定し、点を見えやすくし、サイズを変化させます：garden.strokeWeight(random(5,10));
  • garden.point(sourceX, sourceY);と入力して、グラフィックスオブジェクトに点を描きます。
  • 最後に、draw()関数内でpaintFlower();関数を呼び出します。
  • これで最初の画像ポワンティリズムが完成しました！

ここまでの様子は以下の通りです：

8.5 – 関数定義にパラメータを追加して他の花にも一般化する

  • paintFlower()関数に戻り、3つの新しいパラメータを追加します：function paintFlower(img, x, y) { }
    • imgは、ピクセルの色情報を抽出するために使用する画像を指定します。
    • xとyは、グラフィックスオブジェクト上の画像のx座標とy座標を指定します。
  • paintFlower()関数内で、flower1のすべての出現箇所をパラメータ名imgに置き換えます。
  • garden.point(sourceX, sourceY);をgarden.point(sourceX + x, sourceY + y);に変更します。
  • draw()関数内で、paintFlower()関数を3回呼び出します。それぞれの呼び出しで、パラメータ内に花の画像、x座標、y座標を指定します。
    • 注意： imageMode(CENTER)のおかげで、各画像は中心座標で描画されていることを覚えておいてください。
    • この例では、花の座標を各茎の先端に配置します：paintFlower(flower1, 50, 100); paintFlower(flower2, 150, 100); paintFlower(flower3, 250, 100);

スケッチは以下のようになるはずです：

8.6 – マウスが押されたときに花をアニメーション化する

  • ステップ4.3と同様に、draw()関数内でif (mouseIsPressed) { }と書きます。中括弧の中に3つのpaintFlower()関数を含めます。

スケッチは以下のようになります：

試してみよう！

dist()関数を使用して、カーソルが花の位置に近づいたときに個々の花を描くことで、各花に個別に水をやることができます。

例。

ステップ9 – スケッチをGIFファイルとして保存する

  • スケッチの一番下に新しいfunction keyPressed()を定義します。
  • 関数内で、if (key === "s") { }と入力して新しいif文を追加します。
    • 中括弧の中に、saveGif('garden', 5);と入力して新しいsaveGif()関数を追加します。
      • これにより、Sキーが押されたときに5秒間のアニメーションを「garden.gif」というタイトルのGIFとしてローカルデバイスに保存します。
  • オプション： keyPressed()関数内にgarden.clear();を追加して、任意のキーが押されるたびに花の描画をリセットします。

keyPressed()関数は以下のようになるはずです：

function keyPressed() {
  // Sキーが押されたときに
  // スケッチをGIFとして保存します。
  if (key === "s") {
    saveGif('garden', 5);
  }
 
  // 任意のキーが押されたときに
  // 描画をリセットします。
  garden.clear();
}

まとめ

このチュートリアルを完了おめでとうございます！これでp5.jsを使用してGIFアニメーションを作成し、修正することができました。以下のp5.jsリファレンスページを参照して、p5.jsで画像、ピクセル、アニメーションGIFを表示および操作する他の方法を探索してください。

参考のために、このチュートリアルの完全なコードはこちらです。

リソース＆参考文献

関連するリファレンス

関連する実例