Menu

Hot 15 Update

2017-12-15 2017-11-15 2017-11-05 2017-10-24 2017-10-20 2017-09-25 2017-09-23 2017-05-20 2017-04-08 2017-03-21 2017-03-05 2017-01-13

About


現在のオンライン:1
本日:2
昨日:0
2005.04.01からのアクセス数:19219
2009.01.18からのアクセス数:
topJava教室 ≫ たくさんの画像を並べる 更新: 2017.11.05 (40d)

たくさんの画像を並べる

複数の画像を並べるには?

Java教室
画像を表示する<<もくじ>>準備中

前回のおさらい

前回,画像を表示するで,画像を表示できました
複数の画像も一応表示できましたね!

だるいやり方です...
だって,手で一生懸命全部の画像を指定してるんですから。
しかも,そんなやり方では決まったところに決まったものしか出せないですよね。
パズルなんて出来やしない!
いちいちプログラムをいじって画像の位置を動かすなんてだめですよね。

でも一応やっておきますがね。


for文を使わない複数画像表示で16枚の画像を配置してみよう

puzzle1.javaを改良して,puzzle2.javaとしておきます。
かなりだるいことがわかりますよ。少ない枚数ならまだ平気なんですが。さすがに16枚はねぇ。。

puzzle2.java

import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image;
import java.applet.*;
import java.awt.*;

public class puzzle2 extends Applet
{
    int gazou = 16;			// 画像の枚数
    Image img[] = new Image[gazou];
    public void init()		// 画像の読み込み
    {
	img[0] = getImage(getDocumentBase(), "image/0.gif");
	img[1] = getImage(getDocumentBase(), "image/1.gif");
	img[2] = getImage(getDocumentBase(), "image/2.gif");
	img[3] = getImage(getDocumentBase(), "image/3.gif");
	img[4] = getImage(getDocumentBase(), "image/4.gif");
	img[5] = getImage(getDocumentBase(), "image/5.gif");
	img[6] = getImage(getDocumentBase(), "image/6.gif");
	img[7] = getImage(getDocumentBase(), "image/7.gif");
	img[8] = getImage(getDocumentBase(), "image/8.gif");
	img[9] = getImage(getDocumentBase(), "image/9.gif");
	img[10] = getImage(getDocumentBase(), "image/10.gif");
	img[11] = getImage(getDocumentBase(), "image/11.gif");
	img[12] = getImage(getDocumentBase(), "image/12.gif");
	img[13] = getImage(getDocumentBase(), "image/13.gif");
	img[14] = getImage(getDocumentBase(), "image/14.gif");
	img[15] = getImage(getDocumentBase(), "image/15.gif");

    }
    
    public void paint(Graphics g) // 画像表示
    {
	g.drawImage( img[1],0,0, this );
	g.drawImage( img[2],50,0, this );
	g.drawImage( img[3],100,0, this );
	g.drawImage( img[4],150,0, this );

	g.drawImage( img[5],0,50, this );
	g.drawImage( img[6],50,50, this );
	g.drawImage( img[7],100,50, this );
	g.drawImage( img[8],150,50, this );

	g.drawImage( img[9],0,100, this );
	g.drawImage( img[10],50,100, this );
	g.drawImage( img[11],100,100, this );
	g.drawImage( img[12],150,100, this );

	g.drawImage( img[13],0,150, this );
	g.drawImage( img[14],50,150, this );
	g.drawImage( img[15],100,150, this );
	g.drawImage( img[0],150,150, this );

    }
}

これを実行すると,

puzzle2.gif

となります。



さて。
こんなんやってられっか!と思った方に朗報。
今回は,for文を使って複数画像を表示できるようにするのです(*゚ー゚)>



for文で繰り返して表示

はい。
for文を使うといってもどこに使うんだろう??と思いますね。
プログラムをじーっと眺めると,「w( ̄△ ̄;)wおおっ!こ、こ、ここかしら!?!」というところが見つかるはずです。
どういうところかというと、何度も何度も同じことを書いている場所がありますよね。

img[0] = getImage(getDocumentBase(), "image/0.gif");
img[1] = getImage(getDocumentBase(), "image/1.gif");
img[2] = getImage(getDocumentBase(), "image/2.gif");
・
・
・
・

g.drawImage( img[1],0,0, this );
g.drawImage( img[2],50,0, this );
g.drawImage( img[3],100,0, this );
・
・
・
・

ですね!!!

15パズルでは、縦横が4x4のマス目に16枚(0〜15)の画像を配置します。
だから,同じ処理を16回書いているわけです。画像番号と画像配置位置をずらしながら。
ということで,この部分をfor文で書き換えてみましょう( ̄0 ̄)/ オォー!!


puzzle3.java

//表示部分にfor分を使った画像表示
import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image;
import java.applet.*;
import java.awt.*;

public class puzzle3 extends Applet
{
    int gazou = 16;			// 画像の枚数
    Image img[] = new Image[gazou];
    public void init()		// 画像の読み込み
    {

	img[0] = getImage(getDocumentBase(), "image/0.gif");
	img[1] = getImage(getDocumentBase(), "image/1.gif");
	img[2] = getImage(getDocumentBase(), "image/2.gif");
	img[3] = getImage(getDocumentBase(), "image/3.gif");
	img[4] = getImage(getDocumentBase(), "image/4.gif");
	img[5] = getImage(getDocumentBase(), "image/5.gif");
	img[6] = getImage(getDocumentBase(), "image/6.gif");
	img[7] = getImage(getDocumentBase(), "image/7.gif");
	img[8] = getImage(getDocumentBase(), "image/8.gif");
	img[9] = getImage(getDocumentBase(), "image/9.gif");
	img[10] = getImage(getDocumentBase(), "image/10.gif");
	img[11] = getImage(getDocumentBase(), "image/11.gif");
	img[12] = getImage(getDocumentBase(), "image/12.gif");
	img[13] = getImage(getDocumentBase(), "image/13.gif");
	img[14] = getImage(getDocumentBase(), "image/14.gif");
	img[15] = getImage(getDocumentBase(), "image/15.gif");

    }
    
    public void paint(Graphics g) // 画像表示
    {
	int j=0;
	    for(int y=0; y<=150; y+=50){ // 画像サイズが50×50だから,y軸を50ずつ増やしていく。
		for(int x=0; x<=150; x+=50){ // 画像サイズが50×50だから,x軸を50ずつ増やしていく。
		    g.drawImage( img[(j+1)%16],x,y, this );
		    j++;	// jを増やさないと,全部同じ画像になる。
		}
	    }
    }
}


おぉ。
ちょいと変わりましたね!
画像表示の部分にfor文を使いました。

ちょっとずつ見ていきます。

for(int y=0; y<=150; y+=50){ // 画像サイズが50×50だから,y軸を50ずつ増やしていく。
    for(int x=0; x<=150; x+=50){ // 画像サイズが50×50だから,x軸を50ずつ増やしていく。

この部分は,コメントで書いてある通り,xとyの配置位置を50ずつずらしていっています。
xとyを逆にしたらどうなるかは,自分で確かめてください。xとyの関係の意味が自然とがわかると思います。


g.drawImage( img[(j+1)%16],x,y, this );

「(j+1)%16」とは,「jに1を足したものを16で割って,そのあまりの値」という意味です。

ここでは,img[0]を一番最後に表示させる為にこの処理をやっています。
別に一番最初にimg[0]が来てもいいという人は,ただたんに「img[j]」とやればいいのです。


j++;

ずーっとjが同じ値だったら,画像も同じものになります。だから,for文が一回回るごとに,jの値を1増えるようにするのです。
ここはポイントですねぇ。
(・_・D フムフム。



画像を読み込む処理もfor文で

ここは私も手こずりました..(ノ_・、)シクシク この部分でのポイントは,

このポイントをふまえて作ったものがpuzzle4.javaです↓


puzzle4.java

//for分を使った画像表示
import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image;
import java.applet.*;
import java.awt.*;

public class puzzle4 extends Applet
{
    int gazou = 16;			// 画像の枚数
    Image img[] = new Image[gazou];
    public void init()		// 画像の読み込み
    {
	String filename;		// 文字列の宣言。
	for(int j=0; j<gazou; j++){	// 0から15まで回す。画像が0から15だから。
	    filename = "image/" + j + ".gif"; // +で文字列と文字列をくっつける。
	    img[j] = getImage(getDocumentBase(), filename );
	}

	
    }
    
    public void paint(Graphics g) // 画像表示
    {
	int j=0;
	    for(int y=0; y<=150; y+=50){ // 画像サイズが50×50だから,y軸を50ずつ増やしていく。
		for(int x=0; x<=150; x+=50){ // 画像サイズが50×50だから,x軸を50ずつ増やしていく。
		    g.drawImage( img[(j+1)%16],x,y, this );
		    j++;	// jを増やさないと,全部同じ画像になる。
		}
	    }
    }
}

これを実行すると,puzzle2.javaと同じ結果の

puzzle2.gif

となります。



どうですか?
短くなりましたよね。
しかもちょっと知的な感じになりましたねぇ

う〜ん。
結構難易度が高かった!って...私だけでしょうか...もしかして。。(_TдT)
まぁ,しょうがないですね。
もっとがんばっていきますヾ(  ̄▽)ゞ



なぜfor文を使うと便利?

プログラミングの鉄則

さて、ここでumz氏 が登場です。

今日のポイントは、
  「同じ処理を何度も書いてはいけない」
ということですね。 それを避けるためには
 ・for文や配列を使う
 ・(あとで出てくるはずの)関数を使う
同じこと、似たようなことをプログラム中に何度も書いているうちは、まだまだ初心者です。

by umz

umz氏は、これからもときどきプログラム作りのコツを教えてくれるそうです。



このページは…

選択肢 投票
参考になった 26  

画像を表示する<<もくじ>>準備中

添付ファイル: file0.gif 686件 [詳細] file1.gif 629件 [詳細] file2.gif 594件 [詳細] file3.gif 554件 [詳細] file4.gif 562件 [詳細] file5.gif 567件 [詳細] file6.gif 573件 [詳細] file7.gif 546件 [詳細] file8.gif 558件 [詳細] file9.gif 530件 [詳細] file10.gif 567件 [詳細] file11.gif 609件 [詳細] file12.gif 565件 [詳細] file13.gif 568件 [詳細] file14.gif 591件 [詳細] file15.gif 562件 [詳細] filepuzzle4.html 572件 [詳細] filepuzzle4.java 516件 [詳細] filepuzzle3.html 583件 [詳細] filepuzzle3.java 465件 [詳細] filepuzzle2.html 545件 [詳細] filepuzzle2.java 487件 [詳細] filepuzzle2.gif 2020件 [詳細]


topJava教室 ≫ たくさんの画像を並べる