1. setup() {}

2. draw() {}

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

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

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

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

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

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

Рисуем окно

Функция 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  параметров:

•    Первый и второй параметр устанавливают положение, 
•    третий и четвертый - определяют ширину и высоту, 
•    пятый параметр устанавливает угол начала дуги, 
•    шестой устанавливает конец дуги. 
 

Используем градусы

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

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<