画像を表示

loadImage([path])

イメージファイルの扱いは、p5jsのヘルプを参考にするとわかりやすいです。

tint([red].[green],[blue],[alpha])

tintをつかうと、イメージに色をつけることができて、カラーセロハンがかかったように見えます。

イメージファイルを読み込んで、画面に表示してみます。

イメージファイルは、サーバーにアップロードする必要があります。

もとの画像は海の写真です。

//ランダムに画像を描く

let img;

function preload() {

img = loadImage("sea.jpg");

}

function setup() {

//画面サイズ

createCanvas(500, 500);

//背景を塗る

background(200, 220, 220);

}

function draw() {

//塗り色

tint(255, 255, 255, 50);

//画像の基準点を中心にする

imageMode(CENTER);

//画像を描く

image(img, random(0, 500), random(0, 500), random(0, 500), random(0, 500));

}

ポイント

サウンドと同じく、読み込むイメージファイルが、p5jsウェブエディターにアップロードされている必要があります。プログラムでは、そのファイルを探しにいくので、アップする場所やファイル名に気をつけてください。

イメージファイルは、JPG、PNGフォーマットで準備します。

p5jsウェブエディターにアップロードする手順が、少しわかりにくいので注意してください。

画像と図形は同じような命令文で書くことができます。

Page updated

Google Sites

Report abuse