navigationProcessing入門web目次1準備2最低限の知識で作るアニメーション3プログラミングの基礎技術14多彩なアニメーションを作るために4多彩なアニメーションを作るために4-1画像の利用4-2マウスやキーボードの利用4-3HSBの活用4-4日本語の使い方4-5画像の色合いの変更4-6座標軸の調整ページトップAbout4-1画像の利用プロセッシングでは、カメラで取った写真や画像作成ソフトで作った画像データを取り込んで、それらを今までやったように動かしたり、画像の色合を変化させたりすることもできます。画像ファイルを画面いっぱいに表示させて背景にしたり、お気に入りのキャラクターの画像をクマさんのように動かしたりできるのです。するような幅広い表現が手軽にできます。画像を利用するには、使用する画像を登録する必要があります。画像ファイルを、エディター画面にドラッグアンドドロップするだけです。すると、そのプログラム(上記例の場合sketch_160219a)があるフォルダ内に「data」というフォルダが新しく作成され、この中に画像ファイルがコピーされます。これでその画像を使えるようになります。使用したい画像ファイルをdataフォルダの中に入れればよく、エディターにドラッグアンドドロップせずとも、別の方法で画像データをここに入れてもオーケーです。画像ファイルの使い方ここでは下記画像を使用します。(この画像はhttps://pixabay.com/でダウンドードしたものです)下記に画像を使う際の手順を記します。1setup()とdraw()の外で、Pimage型の変数を宣言する。2setup()内でloadImage()を使い、1で宣言したPimage型の変数に画像を設定する。3draw()もしくはsetup()内で、image()を使ってそれを表示する。下記がプログラム例です。//手順3に該当}出力結果は下記のようになります。loadImage()とimage()この二つが画像を扱うために最低限必要な命令です。loadImage()とimage()のパラメーターは下記になります。画像の上端のy軸上の座標);image()は4つ目と5つ目のパラメーターは省略可能です。画像のサイズ画像を画面いっぱいに表示するには、image()の4つ目と5つ目のパラメーターに画面幅を設定します。0,width,height);}出力結果は下記になります。画像を使ったアニメーション例では画像を使ったアニメーションを作成しましょう。下記4つのハートの画像と、上記で使用したホットチョコレートの画像を下記例で使用します。画像を動かすのは簡単です。画像を出力するのはimage()という命令ですが、これのふたつ目と三つ目のパラメーターが画像の位置を設定するので、ここにdrawのたびに少しずつ値の加算される変数を与えればよいのです。下記がプログラム例です。x4+=4;}下記のように動きます。画像を使ったアニメーション例2下記の例ではrandom()を使って、縦位置や移動速度を変えてみます。x4+=(int)random(20);}下記のようになります。長押ししてリロードするたびに、動作が変化します。画像を使ったアニメーション例3下記はハートが上下に振動しながら横に移動するコードです。この例では、繰り返しのたびにハートのy座標に対して、-10から10の範囲のランダム値を足しています。ランダムを使うと簡単に面白い動作ができてしまいます。//ハートを上下に振動させる処理}下記のように動作します。PreviousNext。