CCapture.js에서 p5.js의 작품을 gif 애니메이션으로 만드는 방법

11114 단어 p5.js자바스크립트
p5.js의 공식 참조 합니다.

필요한 것은 CCapture.js와 gif.js입니다 (그리고 p5.js도).
  • htps : // 기주 b. 이 m / s 딱 / 딱딱한 p 얽힌. js
  • htps : // 기주 b. 이 m/j의 rd베르그/기 f. js

    • CCpature.js는 /build/CCapture.all.min.js이지만 gif.js는 /dist/gif.worker.js가 사용하는 파일입니다.

    이 중 CCapture.all.min.js 만 스크립트 태그로 읽어 둡니다.
    <script src="./js/CCapture.all.min.js"></script>
    gif.worker.js 는 CCapture.all.min.js 가 스크립트내에서 동적으로 로드 처리를 실시하기 때문에, 스크립트 태그로 읽어 둘 필요는 없습니다.
    이 때 동일한 오리진 정책을 피하기 위해 html 파일이 놓여있는 곳에서 다음과 같이 로컬 서버를 시작하십시오 (다른 방법으로 로컬 서버를 시작해도 괜찮습니다).
    $ python -m SimpleHTTPServer
    http://localhost:8000/로 이동하면 html 파일을 열 수 있습니다.

    CCapture.js에서는 다음과 같은 조작으로 gif 애니메이션을 만들 수 있습니다.
    // in initialization phase
var capturer = new CCapture({format: 'gif', workersPath: './js/', verbose: true});
capturer.start();

// in rendering loop
captuerer.capture(canvas);

// to finish recording
capturer.stop();
capturer.save();

    CCaptuer 클래스의 생성자 에게 건네주는 객체 중 workersPath 는 gif.worker.js 가 놓여 있는 디렉토리에의 패스를 지정하는 것입니다.verbose 옵션은 반드시 필요한 것은 아니지만, 있으면 콘솔에 처리의 진행이 출력되므로, 진행 상태를 알기 쉽게 됩니다.CCapture#capture 메서드의 인수에 canvas 요소를 전달합니다.
    p5.js 의 createCanvas 에서 캔버스를 만들면 캔버스 요소는 다음과 같은 방법으로 얻을 수 있습니다.
    var p5Canvas = createCanvas(500, 500);
var canvas = canvas.canvas;

    (p5.js 의 공식 참조 에는 createCanvas 의 반환값은 HTMLCanvasElement 라고 쓰여졌지만 실제로는 p5.Renderer2D
    실제로 p5.js에서 CCapture.js를 사용한 소스 코드는 다음과 같습니다.
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample to making anmation gif for p5.js by CCapture.js</title>
  </head>
  <body>
    <script src="./js/p5.js"></script>
    <script src="./js/CCapture.all.min.js"></script>
    <script>
      var loopFrame = 180;
      var capturer = new CCapture({format: 'gif', workersPath: './js/', verbose: true});
      var canvas;

      function setup() {
        var p5Canvas = createCanvas(500, 500);
        canvas = p5Canvas.canvas;
        rectMode(CENTER);
        noStroke();
        colorMode(HSB, 360, 100, 100);
        capturer.start();
      }

      function draw() {
        background(0);
        var t = (frameCount % loopFrame) / loopFrame;
        for (var w = 0; w <= width; w += 20) {
          for (var h = 0; h <= height; h += 20) {
            var d = sqrt(sq(w - width / 2) + sq(h - height / 2));
            var size = lerp(5, 10, sin(d * 0.1 + t * TWO_PI * 2.0) * 0.5 + 0.5);
            fill(t * 360, 100, 100);
            rect(w, h, size, size);
          }
        }
        if (frameCount < loopFrame) {
          capturer.capture(canvas);
        } else if (frameCount === loopFrame) {
          capturer.stop();
          capturer.save();
        }
      }
    </script>
  </body>
</html>

    작성되는 gif 애니메이션은 이런 느낌입니다.
    절대로 작업할 수 없는 작업용 BGM 사이트
    레이와 점의 최단 거리를 벡터 계산으로 구합니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage