Из этого туториала Вы узнаете, как создать холст для рисования в p5.js с помощью радужной кисти (и управления с клавиатуры)! Это руководство, написанное для сессии на CC Fest LA, предназначено для тех, кто плохо знаком с p5.js, но знаком с основными концепциями программирования (функции, переменные, условные выражения).

Если в процессе вы столкнулись с ошибками в коде: дважды проверьте наличие опечаток, обратитесь к одной из основных частей учебника или ознакомьтесь с кодом решения!

Настраивать

Настроить p5.js еще никогда не было так просто благодаря веб-редактору p5.js! Откройте редактор и определите функции setup и draw:

Функция setup содержит код, который будет запускаться только один раз в начале вашей программы. Функция draw будет выполняться снова и снова. Прямо сейчас строка кода background(220) несколько раз рисует светло-серый фон.

Мы не хотим, чтобы наша работа была постоянно закрыта светло-серым фоном, поэтому мы закомментируем эту строку кода! Мы можем закомментировать код, добавив перед ним две косые черты: //.

Компьютер игнорирует комментарии; в основном они предназначены для того, чтобы мы, люди, читали (если, например, мы хотим снова вспомнить, как рисовать фон).

Код на данный момент:

Перетаскивая мышь

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

В p5.js уже есть встроенные функции для этого. Наряду со встроенными функциями setup и draw существует также функция mouseDragged.

Внизу кода добавьте эту новую функцию:

function mouseDragged() {
}

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

Когда мышь перетаскивается, мы хотим, чтобы компьютер рисовал на экране. Чтобы получить больше технических знаний, мы хотим, чтобы компьютер рисовал эллипс (в частности, круг) в точном (x, y) местоположении нашей мыши.

p5.js имеет встроенные переменные для определения координат вашей мыши: mouseX и mouseY. Внутри функции mouseDragged мы будем использовать эти переменные для рисования эллипса. Обновите свою mouseDragged функцию, включив в нее этот код:

function mouseDragged() {
    ellipse(mouseX, mouseY, 50, 50);
}

Этот код нарисует эллипс 50x50 (фактически круг) в точке (x, y) вашей мыши. Попробуйте и посмотрите, работает ли это!

Woohoo!

Тем не менее, эти простые круги с черным контуром не так красивы, как радуга, которую я вам обещал. Давай исправим это.

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

function mouseDragged() {
    fill(220);
    ellipse(mouseX, mouseY, 50, 50);
}

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

Запустите свой код и посмотрите, станут ли ваши круги светло-серыми!

Теперь давайте избавимся от этого черного контура (на мой взгляд, это не очень эстетично). Добавьте вызов функции noStroke, чтобы очистить это:

function mouseDragged() {
    noStroke();
    fill(220);
    ellipse(mouseX, mouseY, 50, 50);
}

Теперь у вас должна получиться тонкая светло-серая кисть!

«Но, Келли, - говорите вы, - мне не нужна тонкая светло-серая кисть. Я хотел РАДУГУ! »

Это правильно. Давайте добавим радуги!

Код на данный момент:

Делаем кисть-радугу

Прежде чем мы добавим радугу, нам нужно вкратце разобраться в цветах HSL. Хотя вы также можете определять цвета компьютера в таких форматах, как шестнадцатеричный и RGB, HSL позволяет описывать цвет в терминах H ue, S насыщенности, и L легкость.

Оттенок - это степень от 0 до 360 на цветовом круге. Насыщенность - это яркость цвета, выраженная в процентах: 0% будет серым, а 100% будет полноцветным. Яркость также выражается в процентах: 0% будет темным, а 100% - светлым.

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

Во-первых, нам нужно сообщить компьютеру, что речь идет о цветах в HSL, а не в RGB или шестнадцатеричном формате!

Обновите функцию mouseDragged, чтобы использовать HSL, вызвав функцию colorMode:

function mouseDragged() {
    colorMode(HSL, 360);
    noStroke();
    fill(220);
    ellipse(mouseX, mouseY, 50, 50);
}

Теперь мы можем использовать цвета HSL в нашей fill функции! Вместо 220 (для нашего исходного серого) нам нужно будет указать три числа. Я собираюсь использовать 0 для оттенка (начиная с красного), 200 для насыщенности (да, это процентное соотношение, но мне нравятся ДЕЙСТВИТЕЛЬНО красочные вещи) и 200 для легкости.

Измените строку fill(220) на fill(0, 200, 200), чтобы теперь ваш код выглядел так:

function mouseDragged() {
    colorMode(HSL, 360);
    noStroke();
    fill(0, 200, 200);
    ellipse(mouseX, mouseY, 50, 50);
}

А теперь попробуйте свою кисть! Это красный?

Теперь нам просто нужно, чтобы кисть перебирала все ступени цветового круга от 0 до 360 (и снова)! Для этого мы собираемся создать переменную для хранения нашего текущего оттенка, чтобы мы могли непрерывно увеличивать его.

В самом верху вашего кода (даже до функции setup) объявите переменную с именем hue:

var hue;

Теперь внутри функции setup добавьте строку, которая устанавливает для переменной hue значение 0:

function setup() {
    createCanvas(400, 400);
    hue = 0;
}

Ваш полный код теперь должен выглядеть так:

Возвращая функцию mouseDragged, добавьте вверху строку, которая увеличивает переменную hue на единицу:

function mouseDragged() {
    hue++;
    colorMode(HSL, 360);
    noStroke();
    fill(0, 200, 200);
    ellipse(mouseX, mouseY, 50, 50);
}

Если вы раньше не видели синтаксиса, hue++ эквивалентно произнесению hue = hue + 1.

Теперь, чтобы использовать нашу hue переменную (сейчас она просто увеличивается в вакууме), нам нужно использовать ее в нашей fill строке.

Измените строку fill на fill(hue, 200, 200), чтобы наша кисть постоянно меняла цвет!

Теперь ваша mouseDragged функция должна читать:

function mouseDragged() {
    hue++;
    colorMode(HSL, 360);
    noStroke();
    fill(hue, 200, 200);
    ellipse(mouseX, mouseY, 50, 50);
}

И ваша кисть должна писать радугой!

Код на данный момент:

Небольшая уловка

Однако, если вы рисуете достаточно долго, вы можете заметить ... ваша кисть начинает писать только красным!

Это происходит потому, что мы увеличиваем переменную hue до 360… а затем продолжаем! В этот момент кисть застревает на оттенке 360 (красный).

Нам нужно создать более сложную систему для увеличения переменной hue. Если hue больше 360, мы должны сбросить его до 0, но в остальном действовать как обычно.

Замените строку приращения hue++ на это условие:

if (hue > 360) {
    hue = 0;
} else {
    hue++;
}

Теперь проверьте свой код. Рисует красивые радуги?

Успех!

Код на данный момент:

Тернарный оператор (необязательно)

Вы сейчас находитесь в зоне паники по кодированию? Если да, переходите к мини-испытаниям!

Если нет… вы жаждете красноречивого синтаксиса JavaScript? Вы можете реорганизовать условное выражение, которое мы только что написали, в красивую единственную строку кода, используя тернарный оператор.

Замените условное выражение этой строкой кода:

hue > 360 ? hue = 0 : hue++;

В переводе на английский это означает: «hue больше 360? Если да, сбросьте hue на 0. В противном случае увеличьте его ».

Мини-вызовы

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

Вы можете придумать, как…

  1. Сделать кисть другого размера?
  2. Сделать так, чтобы цвета менялись быстрее?
  3. Сделать фон черным, а холст - шириной и высотой окна? (супер вызов)

Решения мини-задач

Прежде чем читать решения, постарайтесь решить хотя бы первые две задачи!

  1. Измените размеры ellipse, нарисованного на экране, в вашей mouseDragged функции. Вместо эллипса 50x50 у вас может быть эллипс меньшего размера 25x25 с этой строкой кода: ellipse(mouseX, mouseY, 25, 25);
  2. Вместо увеличения hue на единицу с помощью кода hue++, вы можете увеличить оттенок на большее число. Например, чтобы увеличить на 10 (и сделать изменение цвета в 10 раз быстрее), вы должны написать: hue = hue + 10 или просто hue += 10.
  3. Вам нужно перейти к функции setup, чтобы установить фон, не стирая красивое изображение радуги. Эта функция настройки использует встроенные переменные windowWidth и windowHeight, чтобы холст занимал все окно, а затем 0 в качестве цветового кода для черного фона:
function setup() {
    createCanvas(windowWidth, windowHeight);
    background(0);
    hue = 0;
}

Добавление элементов управления с клавиатуры

Наш радужный холст очень крутой, но большинство компьютерных редакторов для рисования позволяют выбирать определенные цвета, такие как красный, зеленый, синий и т. Д.

Мы собираемся добавить некоторые дополнительные функции для изменения цвета с помощью клавиатуры! Например, когда вы нажимаете «r», цвет становится просто красным.

Так же, как мы использовали функцию mouseDragged для реакции на перетаскивание мыши по экрану, мы также можем использовать функцию keyPressed для реакции на действия клавиатуры.

Добавьте эту пустую функцию внизу своего кода:

function keyPressed() {
}

Все клавиши на клавиатуре имеют разные коды. Например, r равно 82 - и я знаю это, потому что набрал r на сайте с удобным ключевым кодом!

Внутри нашей функции keyPressed мы хотим проверить, совпадает ли код клавиши до «r». В целях тестирования мой компьютер будет предупреждать меня, когда я нажимаю клавишу «r».

Обновите свою функцию keyPressed, включив в нее этот код:

function keyPressed() {
    if (keyCode == 82) {
        alert("You typed the letter r!");
    }
}

Нарисуйте немного, затем введите «r» и посмотрите, появится ли предупреждение!

Хорошо, теперь, когда мы знаем, что программа определяет наши нажатия на клавиатуре, давайте сделаем кисть красной, когда мы нажмем «r». Мы можем сделать кисть красной, вернув переменной hue значение 0.

(Боковое примечание: вы могли заметить, что в более раннем контексте 0 был кодом для черного. Это произошло потому, что мы использовали сокращение для цветов RGB. Здесь 0 - это красный цвет, потому что мы используем цвета HSL. )

Вместо выдачи предупреждения обновите функцию keyPressed, изменив hue на 0 при нажатии клавиши «r»:

function keyPressed() {
    if (keyCode == 82) {
        hue = 0;
    }
}

Теперь попробуйте свой код! Нарисуйте немного радуги, затем нажмите «r», затем снова нарисуйте. Что происходит?

Он все еще рисует радугу! Что?!?!

Если вы посмотрите внимательно, вы увидите, что после того, как вы нажмете «r» и начнете рисовать снова, кисть сначала станет красной, но затем снова начнет быстро перемещаться по радуге. Как его выключить?

Код на данный момент:

Отключение радуги

Если мы хотим, чтобы наша кисть оставалась красной, нам нужно отключить инкремент, создающий радугу.

Чтобы отслеживать, включена ли функция радуги или нет, мы можем добавить переменную в самом верху кода (вместе с переменной hue).

В верхней части кода инициализируйте переменную с именем rainbow как истинную:

var rainbow = true;

По умолчанию функция радуги включена, поэтому эта переменная имеет значение true.

Когда нажата клавиша «r», мы хотим выключить радугу. Это потребует установки переменной rainbow в значение false. Войдите в свою keyPressed функцию и сделайте rainbow false при нажатии «r».

Ваша обновленная keyPressed функция должна выглядеть так:

function keyPressed() {
    if (keyCode == 82) {
        hue = 0;
        rainbow = false;
    }
}

Наконец, нам нужно увеличивать только hue, когда радуга включена (когда переменная rainbow истинна).

Возвращаясь к нашей mouseDragged функции, мы можем заключить наш код увеличения в условное выражение, например:

if (rainbow) {
    if (hue > 360) {
        hue = 0;
    } else {
        hue++;
    }
}

Теперь код увеличения будет выполняться, только если горит радуга. Сказать if (rainbow) - это то же самое, что сказать if (rainbow == true).

Попробуйте свой новый код! Когда вы нажимаете «r», кисть остается красной?

Woohoo!

Код на данный момент:

Мини-вызовы

Для решения этих проблем вам понадобится сайт с ключевыми кодами, а также палитра цветов HSL.

  1. Сделайте кисть зеленой, когда вы нажмете «g».
  2. Сделайте кисть синей, когда вы нажмете «b».
  3. Сбросьте кисть на радугу, когда вы нажмете клавишу пробела.
  4. Сделайте так, чтобы кисть рисовала радугу быстрее при каждом нажатии клавиши пробела.

Решения

Прежде чем читать решения, постарайтесь решить каждую задачу как можно лучше!

  1. Код клавиши для «g» - 71, а хороший зеленый оттенок - 125. Включите это условие в функцию keyPressed:
if (keyCode == 71) {
    hue = 125;
    rainbow = false;
}

2. Код клавиши для «b» - 66, а хороший синий оттенок - 200. Включите это условие в функцию keyPressed:

if (keyCode == 66) {
    hue = 200;
    rainbow = false;
}

3. Код клавиши для пробела - 32. Включите это условие в функцию keyPressed:

if (keyCode == 32) {
    rainbow = true;
}

4. Создайте переменную с именем rate (в верхней части кода, вне любых функций), чтобы отслеживать скорость изменений; инициализируйте его значением 1. Внутри функции mouseDragged увеличивайте hue на rate, а не на статическое число: hue += rate; Наконец, обновите условное выражение для кода клавиши 32, чтобы оно удваивало переменную rate при каждом нажатии клавиши пробела:

if (keyCode == 32) {
    rainbow = true;
    rate *= 2;
}

Конечный продукт

Поздравляем с созданием красивого радужного полотна!

Вот полный код решения, а также решения мини-задач.

Что еще можно добавить на холст? (Идеи: реагируйте на нажатие клавиш для стирания доски, изменения размера кисти…) Что еще можно сделать с помощью p5.js?