Это руководство основано на семинаре, проведенном Кэсси Таракаджян на CC Fest LA в 2017 году, и лучше всего работает с Google Chrome на компьютере с веб-камерой. Поскольку это руководство предназначено для использования в Интернете, сотовый телефон не нужен.

Не торопитесь? Перейдите сразу к стартовому коду и приступайте к настройке фильтра!

Начиная

  1. Откройте новое окно в Google Chrome и перейдите в редактор p5.js. Вы должны увидеть такой код:
function setup() { 
 createCanvas(400, 400);
}
function draw() { 
 background(220);
}

2. Создайте переменную. Вы собираетесь создать видеозапись с помощью камеры вашего компьютера. Нам нужно сохранить захваченное видео в переменной. В самом верху вашего кода (перед функциями) добавьте этот код:

var capture;

В этом коде объявляется переменная с именем capture, но мы еще ничего в нее не добавили.

3. Настройте запись видео. Нам нужно сохранить запись видео с камеры вашего компьютера в переменной capture. Добавьте следующий код в функцию setup прямо под строкой createCanvas, но внутри фигурных скобок:

capture = createCapture(VIDEO);
capture.size(400, 300);
noStroke();

Спецификация size делает захват пропорциональным на вашем холсте 400x400. Вы можете поэкспериментировать с другими размерами, но изображение может быть искажено или обрезано!

4. Проверьте запись видео. Если вы нажмете кнопку «запустить» (треугольник, который выглядит как «воспроизведение»), ваше видео должно появиться под серым холст! Проверить это. Google Chrome должен запросить разрешение, чтобы получить доступ к вашему видео.

Если ваше видео не работает, убедитесь, что вы используете браузер Google Chrome. Если вы используете Google Chrome и ваше видео не работает, объединитесь с другом, у которого работает камера.

5. Загрузите все пиксели из видео. Нам нужно загрузить пиксели захваченного видео, чтобы мы могли начать настройку цветов. Добавьте этот код в функцию draw (между фигурными скобками) под тем местом, где написано background(220);:

capture.loadPixels();

6. Прокрутите все пиксели. Поскольку в захвате видео очень много пикселей, мы не можем загрузить их все (программа зависнет), поэтому мы собираемся загрузить каждый четвертый пиксель. . Добавьте этот код под строкой capture.loadPixels();, чтобы пропустить пиксели:

var stepSize = 4;
for (var x = 0; x < capture.width; x += stepSize) {
  for (var y = 0; y < capture.height; y += stepSize) {
    var index = ((y*capture.width) + x) * 4;
    // The code for your filter will go here!
  }
}

Не беспокойтесь о деталях кода. Вот как это в основном работает:

Во-первых, мы объявили, что stepSize нашего фильтра будет четыре, что означает, что мы печатаем только каждый четвертый пиксель. Затем мы используем конструкцию, называемую for loop, для обхода пикселей, используя их значения x и y. Затем мы получаем index текущего пикселя, используя его координаты (x, y).

7. Несколько слов о пикселях. Каждый пиксель имеет цвет, который представляет собой смесь красного, зеленого и синего ценности. Фильтры Instagram работают так: они определяют количество красного, зеленого и синего в каждом пикселе и изменяют эти значения. Мы сделаем то же самое!

8. Получите значения красного, зеленого и синего цветов для каждого пикселя. Эти значения перечислены последовательно для каждого пикселя. Добавьте этот код сразу после объявления переменной index внутри двух циклов:

var redVal = capture.pixels[index];
var greenVal = capture.pixels[index + 1];
var blueVal = capture.pixels[index + 2];
fill(redVal, greenVal, blueVal);
ellipse(x, y, stepSize, stepSize);

Что здесь случилось? Мы собрали значения красного, зеленого и синего цветов для каждого пикселя и спроецировали их на экран! Запустите код, и вы снова должны увидеть себя в камере, но на этот раз на сером холсте, и в несколько более низком качестве.

Вскоре мы компенсируем это низкое качество, пропустив наше изображение через наши собственные шикарные фильтры, которые мы будем кодировать сами!

Стартовый код

К настоящему времени у вас должен быть следующий стартовый код:

var capture;
function setup() { 
  createCanvas(400, 400);
  capture = createCapture(VIDEO);
  capture.size(400, 300);
  noStroke();
}
function draw() { 
  background(0);
  capture.loadPixels();
  var stepSize = 4;
  for (var x = 0; x < capture.width; x += stepSize) {
    for (var y = 0; y < capture.height; y += stepSize) {
      var index = ((y*capture.width) + x) * 4;
      var redVal = capture.pixels[index];
      var greenVal = capture.pixels[index + 1];
      var blueVal = capture.pixels[index + 2];
      fill(redVal, greenVal, blueVal);
      ellipse(x, y, stepSize, stepSize);
    }
  }
}

Настройка вашего фильтра

Теперь вы можете настроить цвета, чтобы создать свой собственный фильтр!

  1. Измените цвета. Вы можете изменить способ отображения цветов в строке функции draw, которая начинается с fill. Переменные redVal, greenVal и blueVal на самом деле являются числами.

Например, если бы я хотел увеличить количество красного в изображении, я бы умножил redVal на два:

fill(redVal*2, greenVal, blueVal);

А если бы я хотел уменьшить количество синего, я бы разделил blueVal на два:

fill(redVal, greenVal, blueVal/2);

Несмотря на то, что веб-цвета - красный, зеленый и синий (немного отличаются от основных цветов, которые вы изучали на уроках искусства), некоторые правила смешивания цветов все еще применяются. Например, красный и синий по-прежнему дают фиолетовый.

Поиграйте с разными значениями цвета и посмотрите, что у вас получится!

2. Поиграйте с stepSize. Измените его на другие числа (программа выйдет из строя, если вы опуститесь слишком низко) или сделайте что-нибудь безумное. Вот как сделать так, чтобы stepSize соответствовал x-позиции вашей мыши - вместо var stepSize = 3 напишите:

var stepSize = floor(map(mouseX, 0, width, 5, 20));

3. Поиграйте с ходом. Что произойдет, если вы удалите строку noStroke(); из функции setup()?

4. Измените формы. Что произойдет в последней строке кода функции draw(), если вы измените ellipse на rect?

Сделайте снимок экрана с понравившимися фильтрами! Если вы хотите сохранить свой код, скопируйте и вставьте его в текстовый редактор, чтобы не потерять. Затем вы можете создать учетную запись в редакторе p5.js и снова вставить код, чтобы продолжать его использовать!