第11章 画像を借りて組み替える
画像を読み込むと、写真、紙の質感、自分の手描き素材をスケッチへ持ち込めます。一方で、ファイルの場所、読み込み時間、著作権という、図形だけの章にはなかった条件が増えます。画像は便利な背景ではなく、出典と文脈を持つ素材です。
11.1 preload で描く前に読み込む
この章には練習用画像 sample.svgが付属しています。リンク先を保存してから、ファイルをマウスやトラックパッドでつかみ、rbCanvas/p5 エディタの上まで運んで放します。この操作をドラッグ＆ドロップと呼びます。取り込みに成功すると、エディタ下部に画像の小さな表示が現れます。素材が表示されないときは、付録Aの画像や音が読み込めないを上から確認します。ドラッグ操作ができない端末では、この章は図と説明だけ見て第12章へ進めます。
ファイル名はコードと一字ずつ一致させます。sample.svg と Sample.svg は、大文字と小文字が違う別の名前です。自分の画像が PNG 形式なら、無理に名前だけを .svg へ変えず、コード側も実際の名前、たとえば sample.png に合わせます。
def preload
@photo = loadImage("sample.svg")
end
def setup
createCanvas(600, 400)
end
def draw
background(245)
image(@photo, 0, 0, width, height)
end
preload は、setup より前に素材を読み込むためのメソッドです。画像の読み込みが完了する前に描画が始まる問題を避けます。
image の最初の引数が画像、次の 2 つが位置、最後の 2 つが表示幅と高さです。元画像と違う縦横比を指定すると、画像が伸びます。
11.2 縦横比を保つ計算
画像の幅をキャンバス幅へ合わせ、高さを比率から計算します。次の3行は変更部分です。11.1の長いコードにある image(@photo, 0, 0, width, height) の1行と置き換えます。
display_width = width
display_height = @photo.height * display_width / @photo.width
image(@photo, 0, 0, display_width, display_height)
元画像の 幅 : 高さ と、表示画像の比率が同じになります。画面全体を埋めることより、人物や円が不自然に伸びないことを優先する場合に使えます。
11.3 画像の上へ描く
読み込んだ画像は、ほかの図形と同じ描画順に入ります。次の draw は変更部分です。11.1の長いコードにある def draw から対応する end までと置き換えます。
def draw
image(@photo, 0, 0, width, height)
noStroke
fill(255, 80, 120, 90)
ellipse(mouseX, mouseY, 140, 140)
end
画像を先に描き、半透明の円をあとから描いています。順番を逆にすると、画像が円を覆います。
マウス位置へ円を描くだけでも、写真のどこへ注目させるかが変わります。素材を加工することは、ピクセルを壊すことだけではありません。重ねる形と順番で意味を変える方法もあります。
11.4 自分の素材から始める
インターネットで見つけた画像には、作者と利用条件があります。「検索で表示された」は「自由に使える」という意味ではありません。最初の実験には、次の素材が扱いやすい選択です。
- 自分で撮影した写真
- 自分で描いた絵を撮影またはスキャンした画像
- 利用条件が明記されたパブリックドメイン素材
- ライセンスが目的に合い、作者名など必要な表示を行える素材
人物写真には、著作権だけでなく肖像やプライバシーの問題もあります。公開しない個人実験と、Web で配布する作品では条件が変わります。
付属の sample.svg は本書のために作った素材なので、この章の練習や公開作品へ自由に利用、加工できます。最初は付属素材で操作を確かめ、動いたあとに自分の画像へ置き換えると、ファイル形式の問題とコードの問題を分けて考えられます。
11.5 単一 HTML と素材
rbCanvas/p5 は、画像や音声を含めて単一の HTML ファイルへ保存できることを特徴としています。ただし保存や読み込みの挙動はブラウザの種類と設定に左右されます。保存したら、元のエディタを閉じた状態でも開けるか確認します。
あとから編集を続けるときは、保存した HTML ファイルをエディタへドラッグ＆ドロップします。コードだけでなく、いっしょに保存された画像も復元されます。
画像を組み替えるほど、コードにも同じ処理が増えていきます。第4部では、繰り返す描画をメソッドへまとめ、複数の要素を配列とクラスで扱います。
この章の小さな区切り
- 付属画像を素材一覧へ取り込み、表示できた
- 画像の位置か大きさを一つ変えた
- 余裕があれば、半透明の色や図形を重ねた
端末の都合で素材を取り込めない場合は、図11-1と11-2で変化を確認できれば次章へ進めます。