投稿日: 投稿者: taisum

2019プログラミング講座１３：インターフェースデザイン

インターフェース（interface）とは英語で境界や界面を表す言葉です。この講座では、ユーザーインターフェースと呼ばれる、人間と機械の境界を取り扱います。お絵かきソフトのインターフェースデザインを通して、プログラミングの過程を学んでいきましょう。

まず、はじめに作成するお絵かきソフトの画面サイズを決めます。ここでは800ピクセルx800ピクセルの画面で作成することにします。また背景色を白に設定します。

void setup(){
  size(800,800);//画面サイズ
　background(255);//背景色を白に設定
}

void draw(){
  
}

次に、幅20ピクセル・高さ20ピクセルの黒色の円がマウスの動きに付いてくるようにします。

int penX = 0;//円のX座標
int penY = 0;//円のY座標
int penSize = 20;//円の直径

void setup(){
  size(800,800);
  background(255);
}

void draw(){
  penX = mouseX;//円のX座標にマウスのX座標を代入
  penY = mouseY;//円のY座標にマウスのY座標を代入
  fill(0);//円の塗りを黒色にする
  noStroke();//円の輪郭線の描画を無効にする
  ellipse(penX,penY,penSize,penSize);//円の描画
}

円のサイズを変えるためのアイコンを配置します。アイコンが描線で隠れてしまわないようにアイコンの背景として長方形を配置します。

int penX = 0;
int penY = 0;
int penSize = 20;

void setup(){
  size(800,800);
  background(255);
}

void draw(){
  penX = mouseX;
  penY = mouseY;
  fill(0);
  noStroke();
  ellipse(penX,penY,penSize,penSize);
  fill(255);
  rect(0,700,800,100);//アイコンの背景
  fill(0);
  ellipse(50,750,20,20);//細い描線のアイコン
  ellipse(150,750,40,40);//太い描線のアイコン 
}

アイコンの上にマウスが重なると描線の太さが変わるように設定します。

int penX = 0;
int penY = 0;
int penSize = 20;

void setup(){
  size(800,800);
  background(255);
}

void draw(){
  penX = mouseX;
  penY = mouseY;
  fill(0);
  noStroke();
  ellipse(penX,penY,penSize,penSize);
  fill(255);
  rect(0,700,800,100);
  fill(0);
  ellipse(50,750,20,20);
  ellipse(150,750,40,40); 
  if(penX<60 && penY>740){ //小さい円のアイコンの座標にマウスが重なった場合
    penSize=20;
  }
  if(penX>60 && penX<170 && penY>740){ //太い円のアイコンの座標にマウスが重なった場合
    penSize=40;
  }
}

同じ手法を使って描線の色を変えてみましょう。

int penX = 0;
int penY = 0;
int penSize = 20;
int penR = 0;//描線の色・赤
int penG = 0;//描線の色・緑
int penB = 0;//描線の色・青


void setup(){
  size(800,800);
  background(255);
}

void draw(){
  penX = mouseX;
  penY = mouseY;
  fill(penR,penG,penB);
  noStroke();
  ellipse(penX,penY,penSize,penSize);
  fill(255);
  rect(0,700,800,100);
  fill(0);
  ellipse(50,750,20,20);
  ellipse(150,750,40,40);
  fill(255,0,0);
  ellipse(250,750,40,40);
  fill(0,255,0);
  ellipse(350,750,40,40);
  fill(0,0,255);
  ellipse(450,750,40,40);
  if(penX<60 && penY>740){
    penSize=20;
  }
  if(penX>60 && penX<170 && penY>740){
    penSize=40;
  }
  if(penX>230 && penX<270 && penY>740){ //アイコンに描線が重なったら描線の色を赤色に変更する
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>330 && penX<370 && penY>740){ //アイコンに描線が重なったら描線の色を緑色に変更する
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>430 && penX<470 && penY>740){ //アイコンに描線が重なったら描線の色を青色に変更する
    penR = 0;
    penG = 0;
    penB = 255;
  }
}

更に描線をline()関数を使用してスムーズにつなげてみましょう。１フレーム前のX座標、Y座標を格納するpmouseX、pmouseYという変数を使用します。

int penX = 0;
int penY = 0;
int penPX = 0;//pmouseXの値を格納する変数
int penPY = 0;//pmouseYの値を格納する変数
int penSize = 20;
int penR = 0;
int penG = 0;
int penB = 0;


void setup(){
  size(800,800);
  background(255);
}

void draw(){
  penX = mouseX;
  penY = mouseY;
  penPX = pmouseX; //１フレーム前のX座標を代入
  penPY = pmouseY; //１フレーム前のY座標を代入
  stroke(penR,penG,penB); //線の色を設定
  strokeWeight(penSize); //線の太さを設定
  line(penX,penY,penPX,penPY); //線を描画
  noStroke(); //以下のオブジェには線を描画しないよう設定
  fill(255);
  rect(0,700,800,100);
  fill(0);
  ellipse(50,750,20,20);
  ellipse(150,750,40,40);
  fill(255,0,0);
  ellipse(250,750,40,40);
  fill(0,255,0);
  ellipse(350,750,40,40);
  fill(0,0,255);
  ellipse(450,750,40,40);
  if(penX<60 && penY>740){
    penSize=20;
  }
  if(penX>60 && penX<170 && penY>740){
    penSize=40;
  }
  if(penX>230 && penX<270 && penY>740){
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>330 && penX<370 && penY>740){
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>430 && penX<470 && penY>740){
    penR = 0;
    penG = 0;
    penB = 255;
  }
}

次にマウスボタンが押されているときだけ、描線が描画されるように改良しましょう。

int penX = 0;
int penY = 0;
int penPX = 0;
int penPY = 0;
int penSize = 20;
int penR = 0;
int penG = 0;
int penB = 0;


void setup(){
  size(800,800);
  background(255);
}

void draw(){
  penX = mouseX;
  penY = mouseY;
  penPX = pmouseX;
  penPY = pmouseY;
  stroke(penR,penG,penB);
  strokeWeight(penSize);
  if(mousePressed){ //マウスボタンが押されている間だけコードが実行される
    line(penX,penY,penPX,penPY);
  }
  noStroke();
  fill(255);
  rect(0,700,800,100);
  fill(0);
  ellipse(50,750,20,20);
  ellipse(150,750,40,40);
  fill(255,0,0);
  ellipse(250,750,40,40);
  fill(0,255,0);
  ellipse(350,750,40,40);
  fill(0,0,255);
  ellipse(450,750,40,40);
  if(penX<60 && penY>740){
    penSize=20;
  }
  if(penX>60 && penX<170 && penY>740){
    penSize=40;
  }
  if(penX>230 && penX<270 && penY>740){
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>330 && penX<370 && penY>740){
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>430 && penX<470 && penY>740){
    penR = 0;
    penG = 0;
    penB = 255;
  }
}

最後に、キーボードの特定のボタンを押すと描線がリセットされるようにしましょう。keyPressedおよびkeyという関数を用いることで、キーボードが押されているかどうか、また、どのキーが押されているかをif文で判定するコードを書き加えます。

int penX = 0;
int penY = 0;
int penPX = 0;
int penPY = 0;
int penSize = 20;
int penR = 0;
int penG = 0;
int penB = 0;

void setup(){
  size(800,800);
  background(255);
}

void draw(){
  penX = mouseX;
  penY = mouseY;
  penPX = pmouseX;
  penPY = pmouseY;
  stroke(penR,penG,penB);
  strokeWeight(penSize);
  if(mousePressed){
    line(penX,penY,penPX,penPY);
  }
  noStroke();
  fill(255);
  rect(0,700,800,100);
  fill(0);
  ellipse(50,750,20,20);
  ellipse(150,750,40,40);
  fill(255,0,0);
  ellipse(250,750,40,40);
  fill(0,255,0);
  ellipse(350,750,40,40);
  fill(0,0,255);
  ellipse(450,750,40,40);
  if(penX<60 && penY>740){
    penSize=20;
  }
  if(penX>60 && penX<170 && penY>740){
    penSize=40;
  }
  if(penX>230 && penX<270 && penY>740){
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>330 && penX<370 && penY>740){
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>430 && penX<470 && penY>740){
    penR = 0;
    penG = 0;
    penB = 255;
  }
  if ((keyPressed == true) && ((key == 'd') ||  (key == 'D'))) {
    fill(255);
    noStroke();
    rect(0,0,800,700);
  }
}
総合課題１：
上記のお絵かきソフトを改良し独自のインターフェースデザインにリデザインする。
ただし以下の機能は全て必ず実装すること。
画面のサイズやアイコンの配置は自由とする。
・描画色を黒色に戻せるようにする。
・３段階以上の太さの描線で描画できるようにする。
・４色以上の色で描画できるようにする。
・消しゴム機能を追加する。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Proudly powered by WordPress