[7日目] 画像を使ったプログラムを書こう！

はじめに
私たちStudy-Gazerは、あくまでも「processing」というツールを通して
読者の皆様が「プログラミングのイメージをつかむこと」や「楽しみながらプログラミングの基礎を学んでいくこと」を目的としています．

これまでは「ellipse」などの図形を使って 様々なものを作成してきました．
ですが、作りたいもののレベルが高度化していくと
より複雑で長いコードを書く必要が出てきます．

それを避けるための一つの手段として
「プログラムに画像を取り込む」というものがあります．

１．「画像を取り込む」ための準備をしよう！

プログラムに画像を取り込むには、まず以下の手順を踏む必要になります．

［ステップ１］読み込みたい画像を決め、パソコン内にダウンロードする．

　まず、読み込みたい画像をPC内にダウンロードします．
　好きな画像をそれぞれダウンロードしてみて下さい！
　私は今回、「いらすとや」さん の画像を使わせていただきました．

［ステップ２］その画像を専用のフォルダの中に追加する．

Processingでは、画像を取り込むにあたり「data」という名前のフォルダに
その画像を追加する必要があります．

さっそく［ステップ１］でダウンロードした画像を追加してみましょう！

［ 手順 ］
1. メニューバーにある「スケッチ」の中の「ファイルを追加...」をクリック.
2. 取り込みたい画像を選択し「開く(O)」をクリックして完了です．

［ステップ３］dataフォルダに追加されているか確認する．

最後に、dataフォルダに画像が追加されているのかを確認しましょう．


以上で、前準備は終わりです！
次は、画像を取り込むことについてやっていきましょう！

［ 手順 ］
1.「スケッチ」の中の「スケッチフォルダーを開く」をクリック.
2. ウィンドウが出てきたら「data」という名前のフォルダーを開く．
3. 先ほど追加したはずの画像がその中にあったら、完了です．

２．「画像を取り込む」ためのコード

「dataフォルダ」に追加した画像をプログラムに取り込むには、以下のようなコードを入力する必要があります．

「loadImage関数」
dataフォルダに追加した画像を呼び出すためのものです．
「loadImage( );」で使い、カッコ内には追加した画像の名前を入力します．
ただし、カッコ内で画像の名前を入力するときは「" (ダブルクオーテーション)」で囲む必要があるので注意してください！

※カッコ内で画像の名前を入力するときは最後まで入れましょう！

「PImage変数」
loadImage関数で呼び出した画像を「格納」するための変数です．
通常、loadImage関数を使う前である「setup関数」の前に使います．

「Image関数」
画像を表示するための関数です．式は「Image(ｎ,ｘ,ｙ);」のｎで「画像を指定」し、ｘとｙにはそれぞれ「ｘ座標とｙ座標を入力」します．また、横と縦のサイズを指定したい場合は (ｎ,ｘ,ｙ); に ｗ,ｈ を足して「Image(ｎ,ｘ,ｙ,ｗ,ｈ);」の形にしましょう！ ｗに「横のサイズ」を、ｈに「縦のサイズ」を指定します．

例えば、detaフォルダ内の画像がこのような場合、
以下のようなコードを作ることができます．

PImage dragon;
PImage background;

void setup(){
 size(900,600);
 dragon=loadImage("fantasy_dragon_blue.png"); //最後まで入力する．
 background=loadImage("bg_hell_jigoku.jpg");

//image関数の座標入力するときの基準点を変更．（図形の左上から図形の中心に変更）
 imageMode(CENTER);
}

void draw(){
 image(background,width/2,height/2, width,height);
 image(dragon,mouseX,mouseY, 240,240);
}

「mode」が付いている関数について
modeを付けることで座標を入力するときの基準点を設定できます．
例えば「rect」に「mode」を付けた場合、「rectMode();」で使います．
通常、rectの基準点は左上ですが カッコ内に「CENTER」と入力することで
基準点を図形の中心に変更することができます．

３．コードを書いて復習しよう！

では最後に、今日やったことを自分で好きなコードを書くことで復習しましょう！

［練習］次のルールに従って、好きなコードを書こう！

ルール
・「Pimage変数」や「loadImage関数」、「image関数」を使って
　 画像を活用したコードを書くこと．

よろしければ、この記事のコメント欄に
そのコードを見せていただけると嬉しいです！
素晴らしい作品は後ほど紹介させていただきます！

さいごに

今回は「画像を取り込む」ためのコードについて学びました！
「PImage変数」や「loadImage関数」，「image関数」はそれぞれ重要な役割を持っているものなのでぜひ覚えといてください！

今回も見ていただき、ありがとうございました！
これからも一緒に楽しくプログラミングの基礎を学んでいきましょう！