EN

페이지 5: 미디어 및 내보내기

5. 미디어 및 내보내기

도형을 그리는 것을 넘어, p5.js는 다양한 미디어 유형을 통합하고 인터랙티브 아트를 다른 사람들과 공유할 수 있게 해줍니다.

5.1. 이미지 작업

loadImage() 및 image()를 사용하여 이미지를 로드하고 표시합니다. preload()에서 이미지를 미리 로드하여 setup()이 실행되기 전에 준비되도록 합니다.

let img;

function preload() {
  img = loadImage('assets/p5js_logo.png'); // 이 경로가 올바른지 확인하세요
}

function setup() {
  createCanvas(400, 400);
  imageMode(CENTER); // 이미지 중앙에서 그리기
}

function draw() {
  background(220);
  image(img, mouseX, mouseY, 50, 50); // 마우스 위치에 이미지 표시, 크기 50x50
}

5.2. 비디오 및 사운드 통합

createVideo() 및 loadSound()를 사용하여 동적 미디어를 추가합니다. 브라우저 자동 재생 정책으로 인해 재생을 위한 사용자 상호작용을 처리해야 함을 기억하십시오.

let video;
let sound;

function preload() {
  video = createVideo('assets/p5js_video.mp4'); // 비디오 파일 경로
  sound = loadSound('assets/p5js_sound.mp3'); // 사운드 파일 경로
}

function setup() {
  createCanvas(400, 400);
  video.hide(); // 기본 비디오 요소 숨기기
}

function draw() {
  background(220);
  image(video, 0, 0, width, height); // 캔버스에 비디오 프레임 표시
}

function mousePressed() {
  // 사용자 상호작용 시 비디오/사운드 시작
  if (video.elt.paused) {
    video.loop();
  } else {
    video.pause();
  }

  if (sound.isPlaying()) {
    sound.pause();
  } else {
    sound.loop();
  }
}

5.3. 창작물 내보내기

프레임 또는 전체 캔버스를 이미지 또는 비디오로 쉽게 저장할 수 있습니다.

function keyPressed() {
  if (key === 's' || key === 'S') {
    saveCanvas('mySketch', 'png'); // 현재 캔버스를 'mySketch.png'로 저장
  }
  if (key === 'r' || key === 'R') {
    // 비디오를 위한 일련의 프레임을 저장하려면 캡처 라이브러리를 사용하거나
    // 시간이 지남에 따라 saveFrame()을 수동으로 트리거합니다.
  }
}

이 단계를 모두 완료했다면, p5.js를 활용한 크리에이티브 코딩의 흥미진진한 세계로 뛰어들 준비가 된 것입니다!

Contact Us