Автор оригинала: FreeCodeCamp Community Member.
от IBBY El-Serafy
Вы изучали P5.js, и вы создали замечательную анимацию, и теперь вы хотите поделиться этим с миром. Как вы идете об этом?
Мы могли бы использовать программное обеспечение для захвата экрана, но это только работает, если анимация работает на правильной скорости. С вышеуказанной анимацией я получал менее половины кадра в секунду. ccapture.js Библиотека упоминается в документации P5.JS и хорошо работала для меня.
Если вы хотите следовать вместе с этим руководством, вы можете вилить песочницу ниже, что имеет весь код, который вам нужно будет начать.
Просмотр моего CodeSandbox здесь Отказ
Первое, что нам нужно будет сделать, это скачать Обытый файл JavaScript Ccapture Отказ Мы переместим файл в нашу папку Project или загрузите его в нашу папку с песочницей. Тогда нам нужно добавить его в наш файл index.html:
В файле Sketch.js нам нужно инициализировать объект Chaenter. Нам также необходимо указать Framerate, которые мы хотели бы, чтобы наша анимация была. Мы можем сделать это в верхней части нашего файла:
let framerate = 30;var capturer = new CCapture( { format: 'webm', framerate, name: 'noise_visualization', quality: 100,} );Обратите внимание, что нам не нужно устанавливать Framerate, используя P5.js Framerate () функция.
А также WebM Вы можете выбрать JPEG или PNG Для формата оба из которых генерируют файл TAR с каждым кадром в качестве изображения. Согласно документации, Гиф Формат также может не выполнять. Держите это в виду, если вы планируете использовать его.
Использование формата WebM означает, что мы сможем просмотреть анимацию, как только она будет готова. Это, кажется, намного веселее, чем нужно сначала преобразовывать изображения в видео, так что мы пойдем с этим.
Далее нам нужно запустить Chapter, мы сделаем это в конце функции настройки. Вы также можете начать его в любой точке анимации или в ответ на ключевую кнопку или щелчок мыши.
function setup() { // Setup code // ... capturer.start();}Теперь нам нужно захватить кадры, но делать то, что вам нужно пройти холст к захват Функция сначала. Мы можем сделать небольшое изменение в Настройка Функция, чтобы мы могли сохранить холст к переменной:
// Initialise canvas outside of setup function so it can be used in the draw functionlet xseed, yseed, incrementxnoise,incrementynoise, canvas;
function setup() { let p5canvas = createCanvas(200, 200); canvas = p5canvas.canvas; // Rest of setup code}А теперь в конце функции розыгрыша мы захватываем холст.
function draw() { // Code for drawing the frame capturer.capture(canvas);}Теперь все, что нам нужно сделать, это решить, когда прекратить захватывать, а затем сохранить анимацию. Мы могли бы сделать это на основе прошедшего времени, используя Миллис () Функция в P5.JS. Но скорее всего, мы хотим, чтобы наша анимация была определенной длиной, и если кадры медленно рендуют, прошедшее время не будет отражать это. Вместо этого мы можем выработать, сколько секунд прошло с использованием текущего Framecount :
let secondsElapsed = frameCount/framerate;
Теперь, если мы хотим, чтобы анимация остановилась, скажем, 5 секунд мы могли бы сделать это так:
let secondsElapsed = frameCount/framerate;if (secondsElapsed >= 5) { capturer.stop(); capturer.save(); noLoop(); // This is optional}И это все! Вот что все это выглядит в песочнице:
Просмотр моего CodeSandbox здесь.
Обратите внимание, что я прокомментировал код для скачивания ради встраивания его на носитель.
Использование FFMPEG для преобразования
Теперь у вас есть ваша анимация, которая потрясающая, но вам может понадобиться в разных форматах. Есть много программ и онлайн-преобразователей, которые вы могли бы использовать. Я использовал FFMPEG Потому что это гибко и доступно из командной строки. По своих словах:
Чтобы преобразовать анимацию в GIF, вы можете использовать что-то вроде этого.
ffmpeg -i noise_visualization.webm -filter_complex "[0:v] fps=15, split [a][b];[a] palettegen [p];[b][p] paletteuse" noise_visualization.gif
GIPHY есть Отличная статья Это объясняет, что делают все эти варианты.
А для преобразования в MP4 для Instagram вы можете использовать что-то вроде этого:
ffmpeg -i noise_visualization.webm -c:a copy -c:v libx264 -b:v 5M -maxrate 5M noise_visualization.mp4
Если вы часто повторно используете один и тот же варианты FFMPEG, может быть полезно сохранить их в псевдонима. Вам придется узнать особенности того, как сделать это для вашей собственной программы терминала. В CMDER это под настройками> Окружающая среда:
В CMDER псевдоним устанавливается с такой командой:
alias ffinsta=ffmpeg -i $1 -c:a copy -c:v libx264 -b:v 5M -maxrate 5M $2
Здесь $ 1 Является ли первым аргументом для Ffinsta и $ 2 это второй аргумент. Как только псевдоним установлено, вы можете использовать его так:
ffinsta noise_visualization.webm noise_visualization.mp4
Обратите внимание, что в CMDR вы должны перезагрузить терминал после установки псевдонима. Это может быть случай для вашей терминальной программы тоже.
Я надеюсь, что вы нашли этот учебник полезным, не стесняйтесь спрашивать, вам нужна помощь.