じょりじょり日記

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

JavaScriptチャレンジ Processing vol8

そろそろProcessingの考え方がわかってきたような気がするので
自分の思考を整理するために、考え方の過程などをコメントに起こしてみました。
概念についてどんな角度でアプローチしようかということを考えました。
理解が足りていない所も多々あるとは思いますが、どんどん核心に迫っていきたいと思います。

今日は少し長いですが、見ていただけたらうれしいです!
明日はもっと頑張ります〜。

f:id:zyoryzyory:20170909004808p:plain

//https://processing.org/examples/milliseconds.html

float scale;

void setup() {

  size(640, 360);

  noStroke();

  //columnを20分割

  scale = width/20;

}



void draw() {

  //0~19の間

  for (int i = 0; i < scale; i++) {

    

    //RGBの幅値を320, 640, 960 … 10240

    colorMode(RGB, (i+1) * scale * 10);

    fill(millis()%((i+1) * scale * 10));

    

    //上の2つの式の関係性がどうにもつかめないので具体的な数値を代入

    //これらが2倍、3倍と32回繰り返されるわけだが

    //colorMode(RGB, 5 * 32 * 10);

    //fill(millis()%(5 * 32 * 10));

    

    //ふむふむ、colorModeでコップの容量を設定(たとえば1回目のループでは320ml)

    //5 * 32 * 10で1600、つまり1.6秒かけてコップの容量を満たせ、ということか

    //違っていたら恥ずかしい、とりあえず前に進もう。

    //そうと考えたら段々そうとしか考えられなくなってきた・・・。

    

    //32回目のループの例も考えてみる

    //colorMode(RGB, 32 * 32 * 10);

    //fill(millis()%(32 * 32 * 10));

    //10240

    

    //RGBが白→黒に完全に切り替わるまで手元のストップウォッチで測ってみた!w

    //10秒26、一応それっぽい数字がでた。

    //とりあえずコップの満たす的な考え方で合ってそう!

    

    //millis()の理解としては1秒の間に60回も小数点以下3桁を呼んで

    //1秒をカウントしているんだ

    //このmillisのお陰で白→黒が自然な感じで染まっていくという理解

    

    

    //20ブロックを1つずつ進む

    rect(i*scale, 0, scale, height);

  }

  

}

abababa


f:id:zyoryzyory:20170909004901p:plain

//https://processing.org/examples/keyboard.html

int rectWidth;
   
void setup() {
  size(640, 360);
  noStroke();
  background(0);
  rectWidth = width/4;
}

//drawは空でも呼んでおかないとプログラムが描画されない
void draw() {}

void keyPressed() {
  int keyIndex = -1;
  //print(key);
  //見たところ押したkeyがそのまま割り当てられている。
  //内部のコードってどんな感じだろう。
  //実装してみた!
  
  //import java.io.*;
  //BufferedReader input = new BufferedReader (new InputStreamReader (System.in) );
  //String getKey = input.readLine();
  
  //int a = 65;
  //int b = 66;
  //   ¦
  //int z = 90;
  
  //switch (getKey) {
  //  case a:
  //    System.out.println("a"); 
  //    break;
  // case b:
  //    System.out.println("b");
  //    break;
  // case z:
  //    System.out.println("z");
  //    break;
  //}
  
  
  //大文字
  if (key >= 'A' && key <= 'Z') {
    keyIndex = key - 'A';
    //'A' - 'A' = 0になる
    //内部的にA0 - A0が行われているということか
    //なぜ文字列と引き算ができるか考えると
    //さっきの実装のような感じで変数にASCIIコードが格納されている…と思う
    
  //小文字
  } else if (key >= 'a' && key <= 'z') {
    keyIndex = key - 'a';
  }
  if (keyIndex == -1) {
    //文字でない場合背景を黒
    background(0);
  } else { 
    // It's a letter key, fill a rectangle
    //秒数で1-255で塗る、つまりランダムっぽい感じで色を塗れる。
    fill(millis() % 255);
    //aだった場合0,0の位置から描画される
    //zだった場合rect分引いたwidthの位置(右端)から描画される
    float x = map(keyIndex, 0, 25, 0, width - rectWidth);
    rect(x, 0, rectWidth, height);
  }
}