| Компьютерная графика в Processing
Источники:
-
П. А. Орлов ПРОГРАММИРОВАНИЕ ДЛЯ ДИЗАЙНЕРОВ Учебное пособие
-
Tatiana Volkova Компьютерная графика в Processing (www.slideshare.net/tanjavolkova?utm_campaign=profiletracking&utm_medium=sssite&utm_source=ssslideview)
-
Кейси Риз и Бен Фрай Учимся программировать вместе с Processing Учебное пособие
- Ян Вантомм Processing 2: креативное программирование Учебное пособие
Почему processing ?
-
Processing – достаточно простой язык программирования, основанный на языке java (ява), открытый язык программирования.
-
Изучая Processing вы будете изучать и java, один из самых популярных языков программирования.
-
В любой момент можно экспортировать проект из Processing и запустить его в Android-студию.
-
Processing – бесплатная среда . Она предназначена для написания графических, анимационных и интерактивных программ, для создания мобильных приложений. Предоставляет легкий и быстрый инструментарий для людей, которые хотят программировать изображения, анимации и интерфейсы.
-
Возможна отладка проекта непосредственно на мобильном устройстве, т.е. написали, запустили, проверили. Что-то не устроило – исправили, запустили, снова….
Программа на языке Processing называется скетч, эскиз. Собственно, способ и творчества, при котором испытывается и оценивается большое количество идей, называется скетчингом.
Скетчинг - это способ мыслить. Он эффективен и похож на игру. Основная цель - оценить большое количество идей за короткий промежуток времени
Сначала создается общий эскиз, который в процессе работы уточняется, совершенствуется, получает дополнительный функционал, интерактивность и постепенно приближается к цели.
Среда программирования можно скачать с официального сайта http://www.processing.org/. К стандартной установки следует добавить модули, отвечающие за работу с устройствами Android (при необходимости) и JavaScript.
Режимы визуализации
В processing есть несколько режимов визуализации:
- Java2D; //режим по умолчанию, если ничего не указано, Java2D
- P2D; //режимы Java2D и P2D поддерживают двумерное представление.
- P3D;
- OPENGL.
Системные функции среды Processing
Все наши программы будут состоять из двух основных системных функций:
-
setup() {}
-
draw() {}
(дро – рисовать)
|
В начале каждой функции поставим надпись void – что означает, что у нас функция ничего не возвращает.
В фигурных скобках пишутся команды этих функций
Основное отличие этих функций в том, что:
-
содержимое первой функции (setup()) выполняется один раз,
-
содержимое второй функции (draw()) выполняется до тех пор, пока мы не остановим программу.
|
Размер окна определяется в функции size() , обычно это одно из первых действий, происходящих в функции setup()
|
Точка начала координат (0,0) лежит слева сверху, положительное направление оси Х – слева направо, оси Y – сверху вниз
|
Основные 2D- примитивы в processing:
- Точки;
- Линии;
- Эллипсы/Окружности/Дуги;
- Прямоугольники;
- Треугольники;
- Четырехугольники;
- Кривые (Безье, Кэтмул-Рома);
- Объекты (свободные формы).
Функции среды Processing
Функции являются основным инструментом для построения программы на Processing. Результат функции зависит от введенных параметров.
В processing многие функции вызывают изменение состояния -> они устанавливают параметры, которые будут оставаться активными, пока мы их не поменяем
Рисуем окно
|
Функция size() имеет 2 параметра:
Вы можете установить размер окна во весь экран, для этого запишите: size( screenWidth, screenHeight ).
|
Функция background()
|
Устанавливает цвет фона окна , может иметь три параметра. Обычно это первая функция, которую вы применяете в функции draw(), она очищает экран
Например: background (0,255,255); //устанавливает цвет заливки фона , цвет фона определяется Red/Green/Blue палитрой.
|
Функция frameRate(n)
|
Устанавливает скорость смены фреймов (кадров)
|
Функция noLoop()
|
вызов этой функции означает, что наш холст будет отрисовываться один раз на экране.
|
Ф ункция stroke()
|
Функция stroke (red,green,blue); - цвет контура (цвет рисования), например - stroke(0,255,0);
Функция stroke() может иметь: четыре параметра .
Четвертый параметр, также известный как величина alpha, тоже использует диапазон от 0 до 255 для количественного выражения прозрачности:
-
величина 0 задает полностью прозрачный объект (он не отобразится),
-
255 - непрозрачный,
-
с помощью промежуточных значений можно смешивать цвета
|
Функция noStroke
|
2D фигуры не будут иметь внешней границы (особенно полезно для замкнутых фигур, но влияет на все виды фигур, даже на линии).
|
Функция strokeWeight()
|
Толщина кисти (контура фигуры) указывается функцией strokeWeight().
Единственный ее параметр устанавливает толщину линий, например - strokeWeight(6).
|
Сглаживаем края контура фигуры
|
- функция smooth() включает антиэлайзинг. А это значит, что у ваших фигур будут сглаженные края. Без этой функции края ваших фигур будут кое-где зазубренными
- функция noSmooth() отключает эту функцию
|
Функция fill()
|
Цвет заполнения 2D фигуры указывается функцией fill(). Функция может иметь четыре параметра - fill(red,green,blue, alpha).
Пример:
fill(128) -> fill(128,128,128);
fill(200,38,128);
fill(200,38,128, 50);
|
Функция noFill()
|
Выключить заливку, Фигуры не будут заполнены
|
Точки
|
point(x,y)
set(x,y,color)
-
рисует точку в координатах (х,у) с определенным цветом
-
не учитывает stroke() или strokeWeight (), пример:
set(50,50,color(126,120,255));
|
Линия
|
line(x1,y1,x2,y2)
Окончание линии:
- ROUND(округленное),
- PROJECT(линия удлиняется в зависимости от толщины кисти),
- SQUARE(квадратное).
|
Установить атрибуты линий |
Функция strokeJoin() определяет вид соединения линий (углы);
Функция strokeCap() - как будут выглядеть начальная и конечная точки линий
|
прямоугольники |
rect(x,y,width,height) - рисует прямоугольник. например:
- rect(100,100,200,150);
- rect(x,y,width,height)
Функция rect(MODE) - меняет интерпретацию параметров прямоугольника:
- rectMode(CENTER) => первая пара аргументов отвечает за центр прямоугольника (а не за верхний левый угол)
- rectMode(RADIUS) => так же как и CENTER но вторые два аргумента отвечают за половину соответственно ширины и высоты.
- rectMode(CORNER) => первая пара аргументов отвечает за верхний левый угол (вариант по умолчанию - х и у – координаты левого угла)
- rectMode(CORNERS) =>вторые два аргумента обрабатываются как координаты правого нижнего угла (а не ширина с высотой)
|
Треугольники и четырехугольники |
triangle(х1,у1,х2,у2,х3,у3) - три пары координат x/y для трех вершин треугольника.
Для упрощения задачи - записывайте эти точки по часовой стрелке.
quad(x1,y1,x2,y2,x3,y3,x4, у4) - рисует четырехугольник:
- первая точка - (х1,у1),
- остальные три вершины определенны по часовой или против часовой стрелки (любым из вариантов)
Пример
size(200,200);
background(0);
stroke(255,0,0);
strokeWidth(5);
fill(0,255,0);
triangle(100,25, 25,175,175,100) ; // по часовой
quad(38,231, 186,220, 169,363, 30,376); // по часовой
|
-
В Processing нет функции square(), поэтому если вы хотите нарисовать квадрат, введите одинаковую ширину и высоту в функцию rect().
-
Функция rect() с пятью или восемью параметрами используется в Processing 2 для рисования прямоугольников со скругленными углами. Пятый параметр в функции rect() - это радиус для скругления углов.
-
В функции rect() с восемью параметрами последние четыре параметра - радиусы скругления для каждого угла, начиная с верхнего левого и продолжая по часовой стрелке.
|
Эллипсы и окружности
|
ellipse(x,y,width,height) - рисует эллипс в точке с координатами (х,у) с указанными шириной и высотой
ellipseMode() - меняет интерпретацию параметров эллипса
-
ellipseMode(CENTER) => (х,у) - центр эллипса (режим по умолчанию)
-
ellipseMode(RADIUS) => как и в предыдущем случае, но ширина и высота – радиусы, а не диаметры
-
ellipseMode(CORNER) => (х,у) - определяет левый верхний угол ограничивающего эллипс прямоугольника
-
ellipseMode(CORNERS) => четыре параметра определяют координаты противоположных углов ограничивающего прямоугольника.
|
Дуги
Пример
size(200,200);
background(0);
stroke(255,0,0);
strokeWidth(5);
fill(0,255,0);
//(х,у) и диаметры
arc(100,100,100,100,0,PI/2.0) ;
//не заполнять
noFill();
arc(100,100,100,100,PI,3*PI/2.0) ;
|
arc(x,y,width,height,start,end) - рисует дугу, как сектор эллипса с координатами (х,у) и с указанными шириной и высотой.
Этот фрагмент или сектор определяется углами , заданными как start и end (в радианах по умолчанию) по часовой стрелке
- их параметры тоже интерпретируются подобно ellipseMode()
- в процессинге заполнение фигур происходит по умолчанию, даже для незамкнутых фигур.
- функция noFill() должна быть вызвана явно, если заполнение нежелательно.
Функция arc() имеет 6 параметров:
• Первый и второй параметр устанавливают положение,
• третий и четвертый - определяют ширину и высоту,
• пятый параметр устанавливает угол начала дуги,
• шестой устанавливает конец дуги.
|
|
Значения 4 углов в радианах используются настолько часто, что в Processing им присвоены имена.
Значения PI, QUARTER_PI, НALF_PI и TWO_PI можно заменить на значения в градусах 180, 45, 90 и 360:
PI - 180,
QUARTER_PI - 45,
НALF_PI - 90,
TWO_PI - 360.
|
|
Используем градусы
|
функция radians() конвертирует значение в градусах в радианы |
Фигуры произвольной формы
|
-
функция beginShape() начните создание вашей фигуры с этой функции
-
функция vertex() используется для определения x и y-координат фигуры
-
функция endShape() ставится в конце описания фигуры и сигнализирует об окончании создания фигуры.
функция endShape(CLOSE), слово CLOSE как параметр функции endShape() способствует заполнению пропуска соединения первой и последней точек фигуры
|
Генерирование случайных чисел
|
- функция random() всегда возвращает числа типа float.
- Чтобы использовать одну и ту же последовательность случайных чисел при каждом запуске программы, существует функция randomSeed().
|
Отсчет время, прошедшее с запуска программы |
функция millis() возвращает значение счетчика.
Processing всегда отсчитывает время, прошедшее с запуска программы. Оно измеряется в миллисекундах (одна тысячная секунды); так, после секунды работы программы счетчик досчитает до 1000, после 5 сукунд - до 5000, после минуты - до 60000. Счетчик Processing удобно использовать для запуска анимированных фигур в определенное время
|
Вывод сообщений на консоль
|
Функция println()
Пример:
println(a) выведет на консоль значение переменной,
println( x + y ); вы можете комбинировать переменные,
println( x + " " + y );
println("The time is<
| |
| | |
|
Форма входа |
|
|
Поиск |
|
|
Календарь |
« Ноябрь 2024 » | Пн | Вт | Ср | Чт | Пт | Сб | Вс | | | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
|
|
Архив записей |
|
|
|