Суббота, 27.04.2024, 01:06
Главная | Регистрация | Вход Приветствую Вас Гость | RSS


Меню сайта


Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


Тестування онлайн
тестування онлайн 


Социальные закладк

Компьютерная графика в Processing

Источники:

  • П. А. Орлов  ПРОГРАММИРОВАНИЕ ДЛЯ ДИЗАЙНЕРОВ    Учебное пособие

  • Tatiana Volkova Компьютерная графика в Processing (www.slideshare.net/tanjavolkova?utm_campaign=profiletracking&utm_medium=sssite&utm_source=ssslideview)

  • Кейси Риз и Бен Фрай   Учимся программировать вместе с Processing Учебное пособие

  • Ян Вантомм Processing 2: креативное программирование Учебное пособие

 Почему processing ?

  1. Processing – достаточно простой язык программирования, основанный на языке java (ява), открытый язык программирования.

  2. Изучая Processing вы будете изучать и java, один из самых популярных языков программирования.

  3. В любой момент можно экспортировать проект из Processing и запустить его в Android-студию.

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

  5. Возможна отладка проекта непосредственно на мобильном устройстве, т.е. написали, запустили, проверили. Что-то не устроило – исправили, запустили, снова….


Программа на языке Processing называется скетч, эскиз. Собственно, способ и творчества, при котором испытывается и оценивается большое количество идей, называется скетчингом.

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

Сначала создается общий эскиз, который в процессе работы уточняется, совершенствуется, получает дополнительный функционал, интерактивность и постепенно приближается к цели.

Среда программирования можно скачать с официального сайта http://www.processing.org/. К стандартной установки следует добавить модули, отвечающие за работу с устройствами Android (при необходимости) и JavaScript.

Режимы визуализации

В processing есть несколько режимов визуализации:

  • Java2D;  //режим по умолчанию, если ничего не указано, Java2D
  • P2D; //режимы  Java2D и P2D поддерживают двумерное представление.
  • P3D;
  • OPENGL.

 

Системные функции среды Processing

Все наши программы будут состоять из двух основных  системных  функций:

 

  1. setup() {}

  2. draw() {}

 (дро – рисовать)

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

Основное отличие этих функций в том, что:

  • содержимое первой функции (setup()) выполняется один раз,

  •  содержимое второй функции (draw())  выполняется до тех пор, пока мы не остановим программу.

 Размер окна определяется в функции size()  , обычно это одно из первых действий, происходящих в функции setup()

Точка начала координат (0,0) лежит слева сверху, положительное направление оси Х – слева направо, оси Y – сверху вниз

Основные 2D- примитивы в processing:

  1. Точки;
  2. Линии;
  3. Эллипсы/Окружности/Дуги;
  4. Прямоугольники;
  5. Треугольники;
  6. Четырехугольники;
  7. Кривые (Безье, Кэтмул-Рома);
  8. Объекты (свободные формы).

Функции среды 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()  может иметь: четыре  параметра .

  • Один параметра - цвет от 0 до  256- значений серой шкалы, например - stroke(155);

  • Четыре  параметра .

 Четвертый параметр, также известный как величина 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)

  • рисует точку в координатах (х,у)

    • цвет задается  stroke(),

    • толщина (размер) – функцией strokeWeight ()

set(x,y,color)

  • рисует точку в координатах  (х,у)  с определенным  цветом

  • не учитывает  stroke()  или strokeWeight (), пример:
                                                  set(50,50,color(126,120,255));

Линия

line(x1,y1,x2,y2)

  • рисует линию между точками (x1,y1,x2,y2)

  Окончание линии:

  1. ROUND(округленное),
  2. PROJECT(линия удлиняется в зависимости от толщины кисти),
  3.  SQUARE(квадратное). 

 

Установить атрибуты линий

Функция strokeJoin() определяет вид соединения линий (углы);

  • strokeJoin(ROUND); // Скруглить углы

  • strokeJoin(BEVEL); // Сделать скос на углах

Функция strokeCap() - как будут выглядеть начальная и конечная точки линий

  • strokeCap(SQUARE); // Концы линий – квадратные

  • strokeCap(ROUND); // Скруглить концы линий

прямоугольники

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); // по часовой

  1. В Processing нет функции square(), поэтому если вы хотите нарисовать квадрат, введите одинаковую ширину и высоту в функцию rect().
     

  2.    Функция rect() с пятью или восемью параметрами используется в Processing 2 для рисования прямоугольников со скругленными углами. Пятый параметр в функции rect() - это радиус для скругления углов.

  3. В функции 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() конвертирует  значение в градусах в радианы

Фигуры произвольной формы

  1. функция beginShape() начните создание вашей фигуры с этой функции

  2. функция vertex() используется для определения x и y-координат фигуры

  3. функция 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  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
2930
Архив записей
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz

  • Рейтинг@Mail.ru
    Copyright MyCorp © 2024
    Конструктор сайтов - uCoz