Processingを用いた簡単な画像処理体験講座(2018/06/10)


Processing入門 演習1 演習2 演習3 演習4

関連リンク

・Processing言語の本家サイト

・Processingのマニュアル

・Processingのマニュアル(古いが日本語)

・本講座のテキスト

Processing入門

プログラム その1
ellipse(50,50,80,80);

プログラム その2
size(480,120);
line(20,50,420,110);

プログラム 色の設定
size(480,120);
background(120,15,203);
fill(120);
ellipse(278,-100,400,400);
smooth();
strokeWeight(3);
fill(255,0,0);

ellipse(120,100,150,150);
strokeWeight(10);
fill(0,255,255);
ellipse(412,60,40,40);

プログラム 変数
size(480, 120);
smooth();
int x=100;
int y = 60;
int d = 80;
ellipse(x, y, d, d);   // Left
ellipse(x+x, y, d, d);  // Middle
ellipse(x*3, y, d, d);  // Right

プログラム draw()の使い方
void draw() {
  println("I’m drawing:"+frameCount);
}

プログラム setup()の使い方
void setup() {
  println("I’m starting");
}

void draw() {
  println("I’m drawing:"+frameCount);
}

プログラム mousePressedとif文の使い方
void setup() {
  size(240, 120);
  smooth();
  strokeWeight(30);
}

void draw() {
  background(204);
  stroke(102);
  line(40, 0, 70, height);

  if (mousePressed == true) {
    stroke(0);
  }

  line(0, 70, width, 50);
}

演習1 画像の読み込みと表示

画像view.bmp

プログラム その1
String target = "view.bmp"; // 画像ファイル名の設定
PImage  targetImg;

void setup() {
  targetImg  = loadImage(target); // 画像の読み込み
}

void draw() {
  image(targetImg, 0, 0); // 画像を表示
}

プログラム その2
String target = "view.bmp"; // 画像ファイル名の設定
PImage  targetImg;

void setup() {
  targetImg  = loadImage(target); // 画像の読み込み

  int width = targetImg.width; // 横幅の取得
  int height = targetImg.height; // 高さの取得

  size(width, height); // Windowの大きさを指定
}

void draw() {
  image(targetImg, 0, 0); // 画像を表示
}

演習2 画像形式の変換

画像view.bmp

画像clown.jpg

画像sakura.gif

画像figure.png

プログラム その1
String target = "view.bmp"; // 画像ファイル名の設定
String savename = "view.gif"; // 保存ファイル名の設定
PImage  targetImg;

void setup() {
  targetImg  = loadImage(target); // 画像の読み込み

  int width = targetImg.width; // 横幅の取得
  int height = targetImg.height; // 高さの取得

  size(width, height); // Windowの大きさを指定
}

void draw() {
  image(targetImg, 0, 0); // 画像を表示
}

void keyPressed() {
  if (key == ' ') {
    targetImg.save(savename);
  }
}

演習3 画像の明るさ調整

画像view.bmp

プログラム その1
String target = "view.bmp"; // 画像ファイル名の設定
String savename = "view2.png";

PImage  targetImg;
int w, h;

float rate = 2;

void setup() {
  targetImg  = loadImage(target); // 画像の読み込み
  
  w = targetImg.width; // 横幅の取得
  h = targetImg.height; // 高さの取得
  
  size(w, h); // Windowの大きさを指定
}

void draw() {
  image(targetImg, 0, 0);
}

void keyPressed() {
  int x, y;
  color c1, c2;
  
  if (key == ' ') {
    for (y = 0; y < h; y++) {
      for (x = 0; x < w; x++) {
        c1 = targetImg.pixels[y * w + x];
        c2 = color(red(c1) * rate, green(c1) * rate, blue(c1) * rate); 
        targetImg.pixels[y * w + x] = c2;
      }
    }
    
    targetImg.save(savename);
    exit();
  }
}

演習4 画像の拡大・縮小

画像slope.jpg

プログラム その1
String target = "slope.jpg";
String savename = "slope2.jpg";

PImage targetImg;
int w,h;

void setup() {
  targetImg = loadImage(target);
  
  w = targetImg.width;
  h = targetImg.height;

  size(w, h);
}

void draw() {
  image(targetImg, 0, 0);
}

void keyPressed() {
  int x, y;
  color c1, c2;
  
  if (key == ' ') {
    targetImg.resize(100,0);
    targetImg.save(savename);
    exit();
  }
}

おまけ

プログラム その1
String savename = "test1.png";

void setup() {
  size(480,120);
}

void draw() {
  background(120,15,203);
  fill(120);
  ellipse(278,-100,400,400);
  smooth();
  strokeWeight(3);
  fill(255,0,0);

  ellipse(120,100,150,150);
  strokeWeight(10);
  fill(0,255,255);
  ellipse(412,60,40,40);
}

void keyPressed() {
  if (key == ' ') {  
    save(savename);
    exit();
  }
}