2021プログラミング5:お絵かきアプリのインターフェース

インターフェイスデザイン

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

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

function setup(){
  createCanvas(400,400);
 background(255);
}

function draw(){
  
}

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

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

function setup(){
  createCanvas(400,400);
  background(255);
}

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

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

let penX = 0;
let penY = 0;
let penSize = 20;

function setup(){
  createCanvas(400,400);
  background(255);
}

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

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

let penX = 0;
let penY = 0;
let penSize = 20;

function setup(){
  createCanvas(400,400);
  background(255);
}

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

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

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


function setup(){
  createCanvas(400,400);
  background(255);
}

function draw(){
  penX = mouseX;
  penY = mouseY;
  fill(penR,penG,penB);
  noStroke();
  ellipse(penX,penY,penSize,penSize);
  fill(255);
  rect(0,300,400,100);
  fill(0);
  ellipse(50,350,20,20);
  ellipse(100,350,40,40);
  fill(255,0,0);
  ellipse(150,350,40,40);
  fill(0,255,0);
  ellipse(200,350,40,40);
  fill(0,0,255);
  ellipse(250,350,40,40);
  if(penX<60 && penY>340){
    penSize=20;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>60 && penX<120 && penY>340){
    penSize=40;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>120 && penX<170 && penY>340){ //アイコンに描線が重なったら描線の色を赤色に変更する
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>170 && penX<220 && penY>340){ //アイコンに描線が重なったら描線の色を緑色に変更する
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>220 && penX<270 && penY>340){ //アイコンに描線が重なったら描線の色を青色に変更する
    penR = 0;
    penG = 0;
    penB = 255;
  }
}

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

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


function setup(){
  createCanvas(400,400);
  background(255);
}

function draw(){
  penX = mouseX;
  penY = mouseY;
  penPX = pmouseX; //1フレーム前のX座標を代入
  penPY = pmouseY; //1フレーム前のY座標を代入
  stroke(penR,penG,penB); //線の色を設定
  strokeWeight(penSize); //線の太さを設定
  line(penX,penY,penPX,penPY); //線を描画
  noStroke(); //以下のオブジェには線を描画しないよう設定
  fill(255);
  rect(0,300,400,100);
  fill(0);
  ellipse(50,350,20,20);
  ellipse(100,350,40,40);
  fill(255,0,0);
  ellipse(150,350,40,40);
  fill(0,255,0);
  ellipse(200,350,40,40);
  fill(0,0,255);
  ellipse(250,350,40,40);
  if(penX<60 && penY>340){
    penSize=20;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>60 && penX<120 && penY>340){
    penSize=40;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>120 && penX<170 && penY>340){
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>170 && penX<220 && penY>340){
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>220 && penX<270 && penY>340){
    penR = 0;
    penG = 0;
    penB = 255;
  }
}

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

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


function setup(){
  createCanvas(400,400);
  background(255);
}

function draw(){
  penX = mouseX;
  penY = mouseY;
  penPX = pmouseX;
  penPY = pmouseY;
  stroke(penR,penG,penB);
  strokeWeight(penSize);
  if(mouseIsPressed){ //マウスボタンが押されている間だけコードが実行される
    line(penX,penY,penPX,penPY);
  }
  noStroke();
  fill(255);
  rect(0,300,400,100);
  fill(0);
  ellipse(50,350,20,20);
  ellipse(100,350,40,40);
  fill(255,0,0);
  ellipse(150,350,40,40);
  fill(0,255,0);
  ellipse(200,350,40,40);
  fill(0,0,255);
  ellipse(250,350,40,40);
  if(penX<60 && penY>340){
    penSize=20;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>60 && penX<120 && penY>340){
    penSize=40;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>120 && penX<170 && penY>340){
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>170 && penX<220 && penY>340){
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>220 && penX<270 && penY>340){
    penR = 0;
    penG = 0;
    penB = 255;
  }
}

最後に、キーボードの特定のボタンを押すと描線がリセットされるようにしましょう。isKeyPressedおよびkeyという関数を用いることで、キーボードが押されているかどうか、また、どのキーが押されているかをif文で判定するコードを書き加えます。以下のコードでは、キーボードのDボタンが押されると、画面をリセット(白色の四角形を最前面に描画)するようにしています。

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

function setup(){
  createCanvas(400,400);
  background(255);
}

function draw(){
  penX = mouseX;
  penY = mouseY;
  penPX = pmouseX;
  penPY = pmouseY;
  stroke(penR,penG,penB);
  strokeWeight(penSize);
  if(mouseIsPressed){
    line(penX,penY,penPX,penPY);
  }
  noStroke();
  fill(255);
  rect(0,300,400,100);
  fill(0);
  ellipse(50,350,20,20);
  ellipse(100,350,40,40);
  fill(255,0,0);
  ellipse(150,350,40,40);
  fill(0,255,0);
  ellipse(200,350,40,40);
  fill(0,0,255);
  ellipse(250,350,40,40);
  if(penX<60 && penY>340){
    penSize=20;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>60 && penX<120 && penY>340){
    penSize=40;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>120 && penX<170 && penY>340){
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>170 && penX<220 && penY>340){
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>220 && penX<270 && penY>340){
    penR = 0;
    penG = 0;
    penB = 255;
  }
  if ((isKeyPressed == true) && ((key == 'd') ||  (key == 'D'))) {
    fill(255);
    noStroke();
    rect(0,0,400,300);
  }
}
課題
上記のお絵かきアプリを改良し独自のインターフェースデザインにリデザインする。 
ただし以下の機能は全て必ず実装すること。画面のサイズやアイコンの配置は自由とする。
・3段階以上の太さの描線で描画できるようにする。
・4色以上の色で描画できるようにする。
・消しゴム機能を追加する。(ヒント:白色の描線を描くことで代用できる)
その他、余裕のある学生は画像をアイコンにして、画像を円の代わりに配置し、
画像で絵を描く機能を実装するなどしても構わない。音声を追加するなどしても良い。

締め切り:
11月25日(木)の授業内で講評会を実施します。

コメントを残す

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