GIF 사용하기

고정된 이미지가 아닌 gif를 이용할 수도 있다.

GIF 기본 사용법: https://editor.p5js.org/kjhollen/sketches/S1bVzeF8Z

var gif_loadImg, gif_createImg;  // 2개의 비어있는 변수를 생성

// loadImage(), createImg()로 만든 2가지 gif를 각각 구분하자
function preload() {
  gif_loadImg = loadImage("vegetables.gif");
  gif_createImg = createImg("vegetables.gif");
}

function setup() {
  createCanvas(500, 700);
  background(0);
}

function draw() {
  // loads only first frame
  // image()함수를 이용하면 캔버스안의 다른 도형들과 함께 image로 그려진다. 
  image(gif_loadImg, 50, 50);
  
  // updates animation frames by using an html
  // img element, positioning it over top of
  // the canvas.
  // 이 GIF 이미지는 캔버스 위에 얹어지게 된다. 
  // 즉, 캔버스에 그려진 도형들을 가리게 될 수도 있다.
  gif_createImg.position(50, 350);
}

GIF 재생 루프 응용법: https://editor.p5js.org/stalgia.grigg/sketches/EDo7uplEz

• loadImage(), image() 함수 사용

• 마우스로 캔버스를 클릭했을 때만, gif가 재생되게 하는 기능

GIF 재생 예제: https://editor.p5js.org/remarkability/sketches/yP869zQPV

• image() 함수만 간단하게 이용함.

z-index를 변경하고 싶을 때: https://editor.p5js.org/allison.parrish/sketches/SyjX6kglg

• z-index 는 css의 속성이다.

• ---.style( ) 함수 안에는 해당 엘리먼트에 적용한 css 스타일 값들을 css 문법으로 써주면 된다.

아이디어. GIF를 무한 재생하고 싶은데, 캔버스 제일 위를 덮은 채 위치하고 있어서 캔버스의 다른 도형들과 겹쳐서 쓰기 어렵다면, gif가 아닌 이미지를 연속으로 그리는 방식을 선택해보면 어떨까?

예제: https://editor.p5js.org/cs105/sketches/j5Tmti_O4

• gif를 개별 frame png파일로 추출한다. 20~30장 정도 추천.

• 이미지들을 담을 빈 Array 변수를 우선 전역 변수로 만든다.

• 매 frameCount 순간마다 몇번째 이미지를 그릴 것인지 정할 index 변수를 만든다.

  • 이 index 변수의 최대값은 어떻게 정해야 될까?

  • 그 최대값에 다다르면 어떻게 다시 0으로 돌아가게 할까?

• preload 함수에서는 loadImage 를 이용해 업로드한 이미지들을 미리 로딩시킨다. 그리고 Array에 담아둔다.

• draw() 함수에서 image()함수를 이용해서 Array 이미지 변수를 그려낸다. 이때 [ ] 대괄호 표시안에다가 Array index 변수를 써줘야 한다.