Этой весной во время изоляции от COVID-19 я много времени проводил в своем доме. Большую часть этого времени я посвятил школьной работе и общению с семьей. Но учитывая, что я перестал ездить на работу, жил с детьми-подростками, у которых своя собственная жизнь, и мне не позволяли заниматься многими видами деятельности, которые обычно отнимают мое время, я искал новый проект.

Итак, я занялся рисованием и живописью. Я всегда любил фотографию. Прогулки, пристальный взгляд на окружающий мир и попытки запечатлеть его в кадре камеры - хорошее соответствие моей личности. Хорошая фотография - это осознанность и гармония с окружающим миром. Поэтому я подумал, могут ли рисование и живопись расширить мою осведомленность и развить то, что я уже люблю в фотографии. Кроме того, рисовав из своего воображения, я мог исследовать природные пейзажи, которые мне нравились, несмотря на то, что большую часть времени был прикован к дивану.

Теперь почему-то меня всегда привлекали цифровые инструменты. В средней школе компьютерная клавиатура спасла мою школьную карьеру после многих лет неудач в изучении почерка. В колледже я использовал цифровые инструменты, чтобы оставаться организованным, не терять работу и повышать производительность. В моей нынешней жизни я обращаюсь к компьютеру, чтобы создавать интересные анимации и привносить искусство в дисциплины STEM. Поэтому было вполне естественно, что, добавляя рисование и раскрашивание в свою жизнь, я сразу взял Apple Pencil, снова начал использовать свой iPad и купил приложение Procreate. Я знал, что научиться рисовать и раскрашивать было непростой задачей, и технологии не уменьшают необходимости в практике. Я начал смотреть YouTube-канал Джеймса Джульера и последовал за ним со своим iPad. Они называют его Бобом Россом из Procreate. Я вырос на программировании PBS, поэтому я видел свою долю руководств Боба Росса с счастливыми деревьями. Я просмотрел четыре или пять видеороликов Жюльера, в которых изображены забавные воображаемые пейзажи. Прорабатывая уроки, я понял, насколько я люблю создавать рисунки на iPad. Использование слоев означает, что вы можете исправить определенные части картины, не испортив остальную часть. Я думаю, что одна из вещей, которая всегда сдерживала меня в рисовании и живописи, - это то, что я изо всех сил стараюсь соблюдать осторожность. Например, переход от задней части сцены к передней при наложении цвета. Теперь я мог переходить от слоя к слою в любом порядке и постепенно улучшать его со временем. Если бы я что-то забыл, я мог легко сложить это позже. Вот один фрагмент, который я создал на основе одного из видео Жюльера, которое я использовал в качестве фона для Zoom во время обучения прошлой весной.

Потратив немало времени на знакомство с кистями, селектором цвета и другими важными функциями моего нового инструмента для рисования, я понял, что есть несколько основных идей, которые будут иметь решающее значение для моего прогресса как художника. В этой статье я хочу сосредоточиться на одной из этих основных идей, тоне. Тональность сцены является ключом к созданию ощущения глубины, поскольку тон тесно связан с освещением сцены. Направленность света создает иллюзию трехмерности в двухмерной картине. Он также играет важную роль в определении композиции произведения, а также в передаче эмоций зрителю.

Интересно, что тон не менее важен в фотографии, и, несмотря на годы фотографирования, я внезапно подумал о тоне по-другому, когда я выбрал оттенки цвета для использования в своих картинах. Я начал замечать тон во всех сферах своей жизни, включая различные оттенки не совсем белой стены в моей гостиной. Освещение также влияет на насыщенность и оттенок, но для простоты я сосредоточусь исключительно на тоне в этой части.

Я решил поэкспериментировать с этими идеями, перейдя к основам. Одна из самых простых фигур, которую вы можете нарисовать, - это сфера. Сфера обладает тем захватывающим свойством, что независимо от того, с какой точки вы на нее смотрите, она имеет форму круга в вашем поле зрения. Итак, вы можете просто нарисовать круг на странице, и это будет сфера. Как назло, для новичков с ограниченными навыками мелкой моторики, таких как я, в Procreate есть функция для создания идеального круга на холсте. Однако круг автоматически не выглядит трехмерным. Чтобы получить эту трехмерность, вам нужно подумать об освещении сферы. Итак, я начал закрашивать одну часть сферы, а затем наносить блики на другую сторону. Добавляя черный и белый с низкой непрозрачностью, я мог регулировать тональность круга, делая его трехмерным.

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

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

Но теперь нам нужно еще более основательно мыслить. Что значит видеть что-то? Я помню, как однажды смотрел образовательный сериал под названием «Наши собственные мысли», созданный Фондом Анненберга. В видео они спрашивали студентов, что они могли бы увидеть, если бы находились в комнате без света. Никто из учеников не угадал правильного ответа. Без света, попадающего в ваш глаз, все, что вы видите, - это тьма, поскольку это свет, который позволяет вам видеть. Итак, чтобы правильно затенить нашу сферу, свет от сферы должен как-то попасть в мой «глаз». И количество света, проникающего с определенного направления, будет определять тональность этой части моего зрения.

Один из способов затенить мою сферу или на самом деле все поле зрения передо мной - провести серию линий от моего глаза наружу. Эти линии представляют собой пути, проходимые в противоположном направлении светом, исходящим от сцены, который может быть интерпретирован в тональную информацию стержнями на сетчатке моего глаза. Следующим шагом в этом процессе является рисование прямоугольника между этой воображаемой сценой и точкой, которую мы называем глазом или камерой. Вы можете думать об этом прямоугольнике как об экране компьютера, который будет отображать сцену в двух измерениях. Компьютерные экраны состоят из прямоугольника пикселей. Каждому пикселю присваивается определенное значение цвета. Вместе эти пиксели представляют собой то, что вы видите на экране, создавая иллюзию трехмерности.

На диаграмме выше я создал воображаемую установку, которую я буду использовать, чтобы продемонстрировать, как затенять сферу с помощью вычислений. Сначала я создал трехмерную систему координат. В исходной точке (0,0,0) я поместил точку, которую я называю camO для исходной точки камеры. Камера играет роль моего глаза, и именно с этого момента я улавливаю свет, который будет использоваться для визуализации сцены. Затем в точке (0,0,7) я поместил квадрат в плоскости xy. Этот квадрат представляет собой холст, экземпляр которого создается createCanvas (400 400). Однако, чтобы приспособиться к некоторым соглашениям в 3D-графике, я сделаю центр моего квадратного холста на 0,0 вместо 200,200. Также я назову углы (-1,1), (1,1), (-1, -1), (1, -1) вместо (0,0), (400,0), (400,400) , (0, 400). Затем я добавлю сферу радиуса 2 в сцену, разместив ее центр в точке (0,0,17). Наконец, я освещу сцену параллельными лучами света, движущимися в направлении, заданном вектором (1,1,1). Итак, у меня есть камера, холст, объект для рендеринга и свет для освещения сцены. Этого должно быть достаточно. Посмотрим, как это работает.

Чтобы присвоить значения цвета каждому пикселю на экране, я создам цикл for.

for (let i=0;i<width*height;i++) {
  const x = 2*(i%width)/width-1;
  const y = 2*int(i/width)/height-1;
  const camO = createVector(0,0,0);
  const camL = createVector(x,y,7).normalize();
  trace(i,camO,camL);
}

Каждый индекс i представляет один из 1600 пикселей, составляющих мой холст. Позже я буду визуализировать эти пиксели с помощью функций loadPixel () и updatePixels (), встроенных в p5. Первым шагом в рендеринге этой сцены является определение линии, которая начинается в camO и проходит через данный i-й пиксель. Как объяснялось выше, эта линия, которая технически является лучом, будет использоваться для определения значения цвета i-го пикселя на основе любого света от сцены, который пересечет луч обратно к camO. Линия может быть определена точкой и вектором. Все стропы проходят через camO, так что острие остаётся без внимания. Вектор каждой строки, которую я называю camL, представляет собой просто стрелку, которая начинается с camO и указывает на данный i-й пиксель. Я нормализую этот вектор для математической простоты.

Функция trace () находит значение цвета для каждого пикселя, используя аргументы i, camO и camL. Первый шаг в функции trace () - найти, где линия пересекает сферу. Ниже представлена ​​функция, которая возвращает расстояние до точки пересечения от camO. Он возвращает ноль, если линия не пересекается.

function findIntersection(o,l) {
  const t1 = o.copy().sub(c);
  const t1l = t1.mag();
  const t2 = l.dot(t1);
  const s = t2*t2-t1l*t1l+r*r;
  if (s>=0) {
    const sd = min(-t2+sqrt(s),-t2-ss);
    if (sd >=0) {
      return sd;
    } else {
      return null;
    }
  }
}

Если нет пересечения, я могу сделать пиксель черным, так как свет не будет попадать в глаз вдоль этой линии. Если он действительно пересекает сферу, я могу математически определить точку на сфере, где он пересекается. Я могу сделать это, просто умножив camL на d и добавив этот вектор к положению камеры. Вот строка кода, которую я могу включить в функцию trace () для выполнения этой задачи.

const iPoint = camO.copy().add(camL.copy().mult(d));

Я также могу определить вектор нормали к сфере в точке пересечения, поскольку он просто указывает в сторону от центра сферы.

const iNormal = iPoint.copy().sub(c).normalize();

Теперь нам просто нужно рассчитать количество света, которое будет возвращено в камеру от каждой точки пересечения.

Один из типов освещения, который влияет на значение пикселя, называется диффузным освещением. Этот тип света предполагает, что сфера рассеивает свет во многих направлениях. Тон света задается скалярным произведением iNormal и -lightDir. Это делает сферу похожей на это.

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

Чтобы отрендерить нашу сферу, мы просто собираем компоненты вместе. Теперь это похоже на реалистичное планетное тело.

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

Итак, сложим все три вместе:

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

Вы могли заметить, что проект медленно загружается в p5. Это потому, что происходит много вычислений, и они требуют времени. Учтите, что этот скетч даже не анимирован. По этой причине с компьютерной графикой нужно обращаться совершенно иначе. Язык GLSL был создан для более быстрого рендеринга графики за счет использования GPU вместо CPU. Вдобавок к этому были созданы более сложные полнофункциональные инструменты, такие как WebGL. Библиотека javascript three.js была создана поверх WebGL. Используя эти инструменты, вы можете определить камеру, экран, источник света и объекты в сцене, а затем все расчеты будут выполнены за вас. Это может быть довольно удобно, если вы поймете, как их использовать. Но я рекомендую потратить время, чтобы выяснить, как свет взаимодействует с вашей сценой и попадает в камеру. Это может быть полезно для понимания того, что происходит, особенно когда вы сталкиваетесь с неожиданной проблемой, которую не можете объяснить. Но, возможно, более важно понимание того, как ведет себя свет, может принести вам удовольствие, возможно, подобное или дополняющее радость рисования сцены. На самом деле, я думаю, что мне уже нравится оригинальная зеленая сфера, которую я создал чуть больше. После написания этой статьи я завершил еще один урок Jullier по пляжной сцене. Думаю, я немного больше запечатлел влияние солнечных лучей на воду и песок. Летом я подумал о Кейп-Коде.