Processingで画像を加工することもできるぞ！

Processingは、四角形や三角形や線、幾何学模様などを作って何かを表現するというイメージが強いけど、画像を加工して動画のようにすることもできるんです。画像を読み込んでコードを書いていくことが可能なんですね。

ちょっとだけ紹介します。

Processingで画像を加工

明るくする

f:id:utr066:20180524170137g:plain

PImage img;
int alphaA;
int alphaB;
int alpha;

void setup() {
  size(700, 700);
  img = loadImage("fish.jpg");
  frameRate(10);
  image(img, 0, 0);
  alpha = 0;
}

void draw() {
  
  fill(255,255,255,alpha);
  rect(0, 0,width, height);
  alpha++;
}

ぼかす

f:id:utr066:20180524131220g:plain

PImage img;

void setup() {
  size(800, 600);
  img = loadImage("flower.jpg");
  img.resize(width, height);
}

void draw() {
  img.filter(BLUR,2);
  image(img, 0, 0);
}

チカチカさせる

f:id:utr066:20180524171305g:plain

PImage img;
int alphaA;
void setup() {
  size(700, 700);
  img = loadImage("person.jpg");
  img.resize(width, height); 
  frameRate(10);
}

void draw() {
  image(img, 0, 0);
  float r = random(0, 255);
  float g = random(0, 255);
  float b = random(0, 255);
  float a = random(0, 100);
  fill(r,g,b,a);
  rect(0, 0,width, height);
}

絵画みたいに

f:id:utr066:20180524122134g:plain

  size(800, 600);
  img = loadImage("flower.jpg");
  img.resize(width, height);
  background(0);
}

void draw() {
  noStroke();
  for (int i = 0; i < 40; i++) {
    PVector location = new PVector(random(width), random(height));
    color col = img.get(int(location.x), int(location.y));
    fill(col, random(0, 255));
    float brightness = red(col) + green(col) + blue(col);
    float diameter = map(brightness, 0, 255*3, 0, 20);
    ellipse(location.x, location.y, diameter, diameter);
  }
}

ちょっとカラフルに

f:id:utr066:20180524095800g:plain

PImage img;


void setup() {
  size(800, 600);
  img = loadImage("lion.jpg");
  img.resize(width, height);
  background(0);
}

void draw() {
  tint(0, 153, 150, 127);
  image(img,0,0);
  blendMode(BLEND);  
  noStroke();
  
  float r=random(0,255);
  float g=random(0,255);
  float b=random(0,255);
  float a=random(0,150);
  fill(r, g, b, a);
  
  for (int i = 0; i < 10; i++) {
    PVector location = new PVector(random(width), random(height));
    ellipse(location.x, location.y, 100, 100);
  }
}