第06回 色相の変換


今回のプログラムの最終的な機能

はじめに、これから作るプログラムが完成した時点の機能をざっと見ておく。


色空間での120°回転


課題 1

    ベースのプログラム
    PImage img;       // 元画像の変数
    PImage img3;      // 課題3出力画像用の変数
    float angle;      // 画面中心とカーソルをつなぐ線の向き(単位はラジアン)
    
    void setup() {
      size(800, 600);
      img = loadImage("1元.jpg");
      img3 = img.get();
      background(0);
      image(img3, 0, 0, width, height);// 画像を表示
    }
    
    void draw() {
      background(0);
      angle = atan2(mouseY-height/2, mouseX-width/2);
      // angleが常に正になるように修正
      if (angle<0){
        angle += PI*2;
      }
      image(img3, 0, 0, width, height);
      arc(width/2, height/2, 100, 100, 0, angle, PIE);
    }
    
    // 色空間で120度回転した画像を保存
    void rot120() {
    }
    
    // 色空間で240度回転した画像を保存
    void rot240() {
    }
    
    // 色空間でangleラジアン回転した画像を保存
    void rot() {
    }
    
    // 画面の状態を画像として出力
    void getScreenShot() {
    }
    
    void mousePressed() {
      rot120();
      rot240();
      rot();
      getScreenShot();
    }
    
    // 色cを色空間で時計回りにa度回転した色を返す
    color rotatedColor(color c, float a) {
      float r = red(c);
      float g = green(c);
      float b = blue(c);
      if (a == 120) {
        return c; // ダミー
      } else if (a == 240) {
        return c; // ダミー
      } else {
        return c; // ダミー
      }
    }
    

  1. Processingのエディタに上のサンプルプログラムのコードをコピー&ペーストする。
  2. 「img06」という名前で保存する。
  3. 適当に画像検索してサンプル用の画像(赤、緑、青のうち少なくとも1つの色が含まれる画像)を用意する。
  4. 画像の形式に応じて以下の変更を加える。
  5. 「1元.jpg」をProcessingのウインドウにドラッグ&ドロップする。
  6. rot120関数の中に以下のコード、コメント文を追加する。
  7.   PImage outputImg = img.get();
      for (int j=0; j<img.height; j++) {
        for (int i=0; i<img.width; i++) {
          // color型変数cを作り、元画像imgの(i, j)の位置のピクセルの色を入れる
          // 出力画像outputImgの(i, j)の位置のピクセルの色を、cを120度回した色にする
        }
      }
      outputImg.save("data/1赤→緑→青→赤.jpg");
    

  8. 「// color型変数cを作り、元画像imgの(i, j)の位置のピクセルの色を入れる」の下に、対応するコードを追加する。

  9. 「// 出力画像outputImgの(i, j)の位置のピクセルの色を、cを120度回した色にする」の下に、対応するコードを追加する。

  10. rotatedColor関数の「if (a == 120) {」の下の「return c; // ダミー」のところを「赤、緑、青だったところが緑、青、赤になるように」書き換える。

  11. 実行して画面内でクリックする。


  12. 元画像の三原色の部分が想定通り変わったかどうかを調べ、以下のような書き方で記録する。


  13. ここで作る提出物
    ここで記録するもの
    ※ うまくいかないときはrot120関数の最終状態この時点のrotatedColor関数とコードを見比べる。

色空間での240°回転

課題 2

  1. rot120関数の中のコードをrot240関数にコピー&ペーストし、然るべき内容に書き換える。変わるものは以下の通り。

  2. rotatedColor関数の「} else if (a == 240) {」の下の「return c; // ダミー」のところを「赤、緑、青だったところが青、赤、緑になるように」書き換える。

  3. 実行して画面内でクリックする。


  4. 元画像の三原色の部分が想定通り変わったかどうかを調べ、以下のような書き方で記録する。


  5. ここで作る提出物
    ここで記録するもの
    ※ うまくいかないときはrot240関数の最終状態この時点のrotatedColor関数とコードを見比べる。

色空間での任意の角度の回転

課題 3

  1. rot240関数の中のコードを、rot関数の中にコピー&ペーストする。
  2. 最初の「PImage outputImg = img.get();」を削除する (変数outputImgを使っている2箇所にエラーの赤線が出る)。
  3. エラーが出ている場所の「outputImg」を「img3」に書き換える(エラーがなくなる)。
  4. コメント文を以下のように書き換える。
  5.       // 出力画像outputImgの(i, j)の位置のピクセルの色を、cを240度回した色にする
    
          // 出力画像img3の(i, j)の位置のピクセルの色を、cをangleラジアン回した色にする
    


  6. その下の行のコードを、コメント文に合った内容に書き換える。

  7. ファイル出力の部分を然るべき値に書き換える。
  8. その行の上に以下のコードを追加する。
  9.   img3.updatePixels();
    
    ※ updatePixels関数は、pixels配列への変更を表示に反映させる命令。これをやらなくても画像は正しく出力されるが、実行画面に変換結果を表示するためにここでこの命令を実行する。

  10. getScreenShot関数に以下のコードを追加する。
  11.   save("data/3回転角.jpg");
    
    ※ 実行画面のスクリーンショットを出力するだけ。

  12. rotatedColor関数の「} else {」の下の「return c; // ダミー」を削除し、そこに以下のコード・コメント文をコピー&ペーストする。
  13.     colorMode(HSB, 360, 100, 100);
        float h = hue(c);         // 色相
        float s = saturation(c);  // 彩度
        float br = brightness(c); // 明度
        // hにaを加える
        // hが360を超えていたらhから360を引く
        // h, s, brから作った色をcに入れる
        colorMode(RGB, 255, 255, 255);
        return c;
    


  14. 3行のコメント文のところにそれぞれ対応するコードを入れる。

  15. 実行してクリックし、実行画面上の画像の色が変わることを確認する。
  16. 扇形を60°, 180°, 300°のいずれかに近い角度にした状態でクリックする。


  17. 元画像の三原色の部分が想定通り変わったかどうかを調べ、以下のような書き方で記録する (正しく変換できたかどうかは、このページの上の円形の図と見比べればわかる)。


  18. ここで作る提出物
    ここで記録するもの
    ※ うまくいかないときはrot関数とgetScreenShot関数の最終状態rotatedColor関数の最終状態とコードを見比べる。

提出

小テスト予告



戻る inserted by FC2 system