Всем привет, вы на канале Илья - всё про ардуино и не только! И в этой статье мы рассмотрим простые фигуры, также научимся работать с линиями и цвета. Наливайте чай с лимоном, а мы начинаем!
Простые фигуры.
Перед вами картинка простых фигур и как их отобразить. Разбирать по отдельности каждую не будем, так как тут и так всё понятно.
Сглаживание линий.
Функция smooth() сглаживает края линий, выведенных на экран, делая плавный переход между пикселями, находящимися на краях штрихов. В свою очередь функция noSmooth() отключает эту функцию:
size(480, 120);
smooth(); // Включаем сглаживание
ellipse(140, 60, 90, 90);
noSmooth(); // Выключаем сглаживание
ellipse(240, 60, 90, 90);
Устанавливаем толщину линий.
По умолчанию, толщина линий составляет 1 пиксель, но вы можете изменить это значение функцией strokeWeight(). Единственный параметр функции strokeWeight() устанавливает толщину всех линий:
size(480, 120);
smooth();
ellipse(75, 60, 90, 90);
strokeWeight(8); // Расширяем линию до 8 пикселей
ellipse(175, 60, 90, 90);
ellipse(279, 60, 90, 90);
strokeWeight(20); // Расширяем линию до 20 пикселей
ellipse(389, 60, 90, 90);
Устанавливаем атрибуты линий.
Функция strokeJoin() определяет вид соединения линий (углы); а функция
strokeCap() - как будут выглядеть начальная и конечная точки линий:
size(480, 120);
smooth();
strokeWeight(12);
strokeJoin(ROUND); // Скруглить углы
rect(40, 25, 70, 70);
strokeJoin(BEVEL); // Сделать скос на углах
rect(140, 25, 70, 70);
strokeCap(SQUARE); // Концы линий - квадратные
line(270, 25, 340, 95);
strokeCap(ROUND); // Скруглить концы линий
line(350, 25, 420, 95);
Цвет.
До сих пор, все фигуры, которые мы рисовали, были белыми, линии -черными, а фон окна - светло-серый. Чтобы изменить эти параметры, используйте функции background(), fill() и stroke(). Величина этих параметров варьируется в пределах от 0 до 255, где 255 это белый, 128 -серый, и 0 - черный. Этот рисунок показывает, какому оттенку серого соответствует величина параметра.
Оттенки серого
size(480, 120);
smooth();
background(0); // Черный
fill(204); // Светло-серый
ellipse(132, 82, 200, 200); // Светло-серый круг
fill(153); // Серый
ellipse(228, -16, 200, 200); // Серый круг
fill(102); // Темно-серый
ellipse(268, 118, 200, 200); // Темно-серый круг
Цвета фигур и линий.
Вы можете сделать контур вашей фигуры невидимым функцией noStroke() или сделать фигуру прозрачной (выключить заливку) функцией noFill():
size(480, 120);
smooth();
fill(153); // Серый
ellipse(132, 82, 200, 200); // Серый круг
noFill(); // Выключаем заливку
ellipse(228, -16, 200, 200); // Контур круга
noStroke(); // Делаем линии невидимыми
ellipse(268, 118, 200, 200); // Этот эллипс невидим!
Рисуем цветные фигуры.
Чтобы не ограничиваться возможностями серого цвета, нам понадобится три параметра для описания красного, зеленого и синего компонентов цвета. Это связано с цветовой моделью RGB, которая используется для получения различных цветов на экране компьютера. Три числа задают величину красного, зеленого и синего цвета и, как и оттенки серого, находятся в пределах от 0 до 255.
size(480, 120);
noStroke();
smooth();
background(0, 26, 51); // Темно-синий цвет
fill(255, 0, 0); // Красный
ellipse(132, 82, 200, 200); // Красный круг
fill(0, 255, 0); // Зеленый
ellipse(228, -16, 200, 200); // Зеленый круг
fill(0, 0, 255); // Синий
ellipse(268, 118, 200, 200); // Синий круг
Устанавливаем прозрачность.
Добавив четвертый параметр к функциям fill() и stroke(), вы сможете регулировать прозрачность. Этот параметр, также известный как величина alpha, тоже использует диапазон от 0 до 255 для количественного выражения прозрачности. Величина 0 задает полностью прозрачный объект (он не отобразится), 255 - непрозрачный, а с помощью промежуточных значений можно смешивать цвета на экране.
size(480, 120);
noStroke();
smooth();
background(204, 226, 225); // Светло-синий
fill(255, 0, 0, 160); // Красный
ellipse(132, 82, 200, 200); // Красный круг
fill(0, 255, 0, 160); // Зеленый
ellipse(228, -16, 200, 200); // Зеленый круг
fill(0, 0, 255, 160); // Синий
ellipse(268, 118, 200, 200); // Синий круг
Фигуры произвольной формы.
Если вы не хотите ограничиваться приведенными базовыми геометрическими фигурами, вы можете создать новые, соединив нужные точки линиями. Давайте попробуем нарисовать стрелку.
size(480, 120);
beginShape();
vertex(180, 82);
vertex(207, 36);
vertex(214, 63);
vertex(407, 11);
vertex(412, 30);
vertex(219, 82);
vertex(226, 109);
endShape();
Начните создание вашей фигуры с функции beginShape(). Функция vertex() используется для определения x и y-координат фигуры. Функция endShape() ставится в конце описания фигуры и сигнализирует об окончании создания.
Но запустив программу мы видим незаполненный промежуток между первой и последней точки. Как это исправить? Да очень просто, надо просто в функции endShape() написать Close.
Так можно рисовать всё, что захотите.
Всем спасибо за просмотр, всем удачи всем пока!
