p5.js) 블러된 이미지가 점점 선명해지는 효과 구현하기

 

 

블러가 있는 이미지에서 선명해지는 것을 구현한 함수를 만들었다. 

preload의 사용법, 만든 이미지의 width/height값을 사용하는 법, filter함수를 사용하는 법 등을 배웠다.

 

이제 선명한 이미지가 어느정도 blur된 채로 유지할 수 있는 함수도 만들어놔야겠다.

이런 필터 함수들은 최종적으로 만들고 싶은 결과물에 쓰기 위해서 만들고 있다.

// IMAGES
let img;
let blurAmount = 20; // 초기 블러 강도 (0에서 20까지)

function preload() {
  img = loadImage("asset/mayoiga.jpg"); // 이미지 파일 경로
}

function setup() {
  createCanvas(img.width, img.height);
  imageMode(CENTER); // 이미지를 중앙에 위치시키기 위해 모드 설정
}

// TODO.1: pendulum 떨어트리기
function draw() {
  BlurToClear();
}

function BlurToClear() {
  clear(); // 캔버스를 지움 (투명한 배경으로 초기화)

  // 블러 강도를 점차 줄이기
  blurAmount -= 0.5;
  if (blurAmount < 0) blurAmount = 0;

  // 원본 이미지를 그리고 블러 필터 적용
  image(img, width / 2, height / 2);
  if (blurAmount > 0) {
    filter(BLUR, blurAmount);
  }
}