Когда я использую команду библиотеки CCapture "capturer.start ()", чтобы сохранить набросок p5. js в формате .gif, все результаты выглядят скачкообразно - PullRequest
Новая
       25

Когда я использую команду библиотеки CCapture "capturer.start ()", чтобы сохранить набросок p5. js в формате .gif, все результаты выглядят скачкообразно

0 голосов
/ 28 апреля 2020

Я пытался найти способ сохранить свои рисунки p5. js в формате .gif или видео в библиотеке CCapture, и до сих пор мне удавалось сделать это с помощью приведенного ниже кода, но проблема в том, что конечный результат не учитывает анимацию объекта drawGrid (), который становится нервным и неприятным. Любые подсказки будут высоко оценены. 

let gifLength = 180;
let canvas;

var spacingX = 50;
var spacingY = 50;
var myAngle = 0.0;


function setup() {
  var p5Canvas = createCanvas(windowWidth, windowHeight, WEBGL);
  canvas = p5Canvas.canvas;
  centerX = windowWidth / 2;
  centerY = windowHeight / 3;
  background(0);
}

function draw() {
  capturer.start(); //Try erasing this to see how the animation should actually behave! :(
  background(0);
  rotateX(1.45);
  push();
  translate(-600, millis() / 11 % 100);
  console.log(millis());
  drawGrid();
  pop();
  push();
  ambientLight(255, 0, 255);
  ambientMaterial(255, 0, 255);
  translate(0, 200, 160);
  myAngle = myAngle + 0.01;
  rotateZ(myAngle);
  drawPyramid();
  pop();
  //This part counts the frames then stops and saves the capture 
  if (frameCount < gifLength) {
    capturer.capture(canvas);
  } else if (frameCount == gifLength) {
    capturer.stop();
    capturer.save();
  }
}

// this creates a pyramid shape by defining
// vertex points in 3D space (x, y, z)

function drawPyramid() {
  stroke(139, 0, 139);
  beginShape();
  // triangle 1
  fill(50, 55, 100);
  vertex(-100, -100, -100);
  vertex(100, -100, -100);
  vertex(0, 0, 100);
  endShape(CLOSE);
  beginShape();
  // triangle 2
  fill(50, 55, 100);
  vertex(100, -100, -100);
  vertex(100, 100, -100);
  vertex(0, 0, 100);
  endShape(CLOSE);
  beginShape();
  // triangle 3
  fill(50, 55, 100);
  vertex(100, 100, -100);
  vertex(-100, 100, -100);
  vertex(0, 0, 100);
  endShape(CLOSE);
  beginShape();
  // triangle 4
  fill(50, 55, 100);
  vertex(-100, 100, -100);
  vertex(-100, -100, -100);
  vertex(0, 0, 100);
  endShape(CLOSE);
  beginShape();
  // pyramid base
  fill(50, 55, 100);
  vertex(-100, -100, -100);
  vertex(100, -100, -100);
  vertex(100, 100, -100);
  vertex(-100, 100, -100);
  endShape(CLOSE);
}

function drawGrid() {
  fill(139, 0, 139);
  stroke(139, 0, 139);


  for (var y = -100; y < windowHeight + 100; y = y + spacingY) {
    line(-600, y, windowWidth + 100, y);
  }

  for (var x = -600; x < windowWidth + 100; x = x + spacingX) {
    line(x, -100, x, windowHeight + 200);
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://github.com/spite/ccapture.js/blob/master/src/gif.worker.js"></script>
  <script src="https://github.com/spite/ccapture.js/blob/master/build/CCapture.all.min.js"></script>
  <script src="https://github.com/processing/p5.js/releases/download/1.0.0/p5.min.js"></script>
  <script>
    var capturer = new CCapture({
      framerate: 60,
      format: 'gif',
      workersPath: './js/',
      verbose: true
    });
  </script>

  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>

</head>

<body>
  <style>
    </body></html>
...