じょりじょり日記

JavaScript100サイトチャレンジを記録するブログです。

JavaScriptチャレンジ Processing vol10

Inputの項目が全部終わりました〜!

f:id:zyoryzyory:20170912011602p:plain

//https://processing.org/examples/keyboardfunctions.html
 
int maxHeight = 40;
int minHeight = 20;
int letterHeight = maxHeight;
int letterWidth = 20;

int x = -letterWidth;         
int y = 0;                

boolean newletter;              

//A-Zで26個
int numChars = 26;

//colorの配列インスタンスを生成
color[] colors = new color[numChars];

void setup() {
  size(640, 360);
  noStroke();
  
  //Hue Saturation BrightnessをMAX26で設定
  colorMode(HSB, numChars);
  background(numChars/2);
  
  //Hueを段階的に上げて設定
  for(int i = 0; i < numChars; i++) {
    colors[i] = color(i, numChars, numChars);    
  }
}

void draw() {
  if(newletter == true) {
    // Draw the "letter"
    int y_pos;
    //大文字の場合のyのポジション
    if (letterHeight == maxHeight) {
      y_pos = y;
      rect( x, y_pos, letterWidth, letterHeight );
    } else {
      //小文字の場合のポジション
      y_pos = y + minHeight;
      rect( x, y_pos, letterWidth, letterHeight );
      fill(numChars/2);
      rect( x, y_pos-minHeight, letterWidth, letterHeight );
    }
    newletter = false;
  }
}

void keyPressed()
{
  //押されたkeyが65〜122の間だった場合
  if((key >= 'A' && key <= 'Z') || (key >= 'a' && key <= 'z')) {
    int keyIndex;
    
    //A-Zだった場合
    if(key <= 'Z') {
      
      //格納される値は0-25のどれかになる
      keyIndex = key-'A';
      //文字の高さが最大
      letterHeight = maxHeight;
      
      //どのあたりのHueが呼ばれるか決まる
      fill(colors[keyIndex]);
    } else {
      //小文字の場合
      keyIndex = key-'a';
      letterHeight = minHeight;
      fill(colors[keyIndex]);
    }
  } else {
    //文字でない場合
    fill(0);
    letterHeight = 10;
  }
  
  newletter = true;

  //xの描画位置を更新して1個分ずらす
  x = ( x + letterWidth ); 

  //右までいったら折り返す
  if (x > width - letterWidth) {
    x = 0;
    y+= maxHeight;
  }

  //下までいったら折り返す
  if( y > height - letterHeight) {
    y = 0;      // reset y to 0
  }
}

もっとスピードアップしていきたいですね!
がんばりっます。