Уроки информатики в школе - Основные 2D примитивы

Среда, 22.01.2025, 02:58

Главная | Регистрация | Вход

Приветствую Вас Гость | RSS

Меню сайта

Статистика

Онлайн всего: 2

Гостей: 2

Пользователей: 0

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

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

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

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

Обратите внимание, что:

отсчет координат начинается с левого верхнего угла.
поля (сетки), с которой работает скетч задается командой size,
цвет фона определяется в измерении Red / Green / Blue командой background,
команда point рисует точку в заданных координатах.

пример 1
Для рисования линии между двумя точками - существует команда line - line (x1, y1, x2, y2)

size(400,400);//устанавливает размер окна
background(255,0,0); //цвет заливки (фона) окна
strokeWeight(3); //устанавливает толщину линии
line(40,30,60,90); //рисование линии

Числа 40,30 - это координаты верхней левой точки линии, а 60,90 - координаты правой нижней точки линии.

Задание . Измените код , нарисовав второй отрезок,чтобы получилась картина как на рисунке

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

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

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

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

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

strokeCap(SQUARE); // Концы линий – квадратные
strokeCap(ROUND); // Скруглить концы линий
strokeCap(PROJECT); //линия удлиняется в зависимости от толщины кисти

size(200,150);//устанавливает размер окна
background(0); //цвет заливки окна

stroke(255);
strokeWeight(10);

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

strokeCap(PROJECT);// линия удлиняется в зависимости от толщины кисти
line(50,75,150,75);

strokeCap(SQUARE);// Концы линий – квадратные
line(50,100,150,100);

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

rect(x,y,width,height) - рисует прямоугольник

rect(MODE) - меняет интерпретацию параметров прямоугольника:

rectMode(CENTER) => первая пара аргументов отвечает за центр прямоугольника (а не за верхний левый угол
rectMode(RADIUS) => так же как и CENTER но вторые два аргумента отвечают за половину соответственно ширины и высоты.
rectMode(CORNER) => первая пара аргументов отвечает за верхний левый угол (вариант по умолчанию)
rectMode(CORNERS) =>вторые два аргумента обрабатываются как координаты правого нижнего угла (а не ширина с высотой)

режим по умолчанию – CORNER (х и у – координаты левого угла )

пример 2
По этим же координатам можно нарисовать прямоугольник rect - rect (x1, y1, x2, y2)

size(400,400);//устанавливает размер окна
background(255,0,0); //цвет заливки (фона) окна
stroke(0,200,0); //устанавливает цвет контура прямоугольника
strokeWeight(3); //устанавливает толщину линий контура
rect(40,30,60,90); //рисование прямоугольника

Обратите внимание, что числа x1, y1- это координаты верхнего левого угла прямоугольника, а x2, y2- его размеры в ширину(60) и высоту (90) соответственно.

цвета
1. Цвет кодируется в системе RGB, с дополнительным параметром прозрачности (alpha).
2. Цвет линии (цвет рисования) назначается командой stroke (red, green, blue)
3. Цвет заливки (фигуры) назначается командой fill (red, green, blue)

пример 3

size(400,400);//устанавливает размер окна
background(255,0,0); //цвет заливки (фона) окна

stroke(0,250,0); //устанавливает цвет контура прямоугольника
fill(255,255,0); //цвет заливки (фона) прямоугольника
strokeWeight(4); //устанавливает толщину линий контура прямоугольника
rect(100,100,200,150); //рисование прямоугольника

strokeWeight(6); //устанавливает толщину линии
stroke(0,0,255); //устанавливает цвет линии
line(100,100,200,200); // рисует линию

пример 4

Устанавливаем прозрачность

Добавив четвертый параметр к функциям fill() и stroke(), мы сможем регулировать прозрачность.

Этот параметр, также известный как величина alpha, тоже использует диапазон от 0 до 255 для количественного выражения прозрачности:

величина 0 задает полностью прозрачный объект (он не отобразится),
255 - непрозрачный,
с помощью промежуточных значений можно смешивать цвета

Ее можно указывать отдельной командой, или добавлять четвертый параметр у команды назначения цвета, например: fill (255,255,0, 128)
Полупрозрачный желтый цвет наложился на красный и получили оранжевый:

size(400,400);//устанавливает размер окна
background(255,0,0); //цвет заливки (фона) окна

stroke(0,250,0); //устанавливает цвет контура прямоугольника
fill(255,255,0,70); //цвет заливки (фона) прямоугольника, значение прозрачности -70
strokeWeight(4); //устанавливает толщину линий контура прямоугольника
rect(100,100,200,150); //рисование прямоугольника

strokeWeight(6); //устанавливает толщину линии
stroke(0,0,255); //устанавливает цвет линии
line(100,100,200,200); // рисует линию

пример 5

size(400,400);//устанавливает размер окна
background(255,0,0); //цвет заливки (фона) окна

stroke(0,250,0); //устанавливает цвет контура прямоугольника
fill(255,255,0); //цвет заливки первого прямоугольника
strokeWeight(4); //устанавливает толщину линий контура прямоугольника
rect(100,100,100,100); //рисование первого прямоугольника

fill(0,255,0,128); //цвет заливки второго прямоугольника, значение прозрачности -128
rect(150,150,100,100); //рисование второго прямоугольника

Треугольники и четырехугольники

triangle(х1,у1,х2,у2,х3,у3) - рисует треугольник.

три пары координат x, y для трех вершин треугольника,
для упрощения задачи советуем записывать эти точки по часовой стрелке.

quad(x1,y1,x2,y2,x3,y3,x4,у4) - рисует четырехугольник.

первая точка - (х1,у1),
остальные три вершины определенны по часовой или протии часовой стрелки (любым из вариантов)

пример 6

size(400,400);//устанавливает размер окна
background(0); //цвет заливки окна

stroke(255,0,0);
strokeWeight(5);

fill(40,255,0);//устанавливает цвет заливки фигуры
triangle(100,25,25,175,175,100); //(100,25) - (25,175) - (175,100)

//по часовой стрелке
//(38,231) - (186,220) - (169,363) - (30,376)
quad(38,231,186,220,169,363,30,376);

Рисуем эллипсы и окружности

ellipse(x,y,width,height)

рисует эллипс в точке с координатами (х,у) с указанными шириной и высотой

ellipseMode()

Меняет интерпретацию параметров эллипса:

ellipseMode(CENTER) => (х,у) - центр эллипса (режим по умолчанию)
ellipseMode(RADIUS) => как и в предыдущем случае, но ширина и высота – радиусы, а не диаметры
ellipseMode(CORNER) => (х,у) - определяет левый верхний угол ограничивающего эллипс прямоугольника
ellipseMode(CORNERS) => четыре параметра определяют координаты противоположных углов ограничивающего прямоугольника.

пример 7

size(200,200);//устанавливает размер окна
background(0,150,60); //цвет заливки окна

stroke(255,0,0);
strokeWeight(5);
fill(40,255,0);

/* рисует эллипс в точке с координатами (100,100)
с указанными шириной(100) и высотой(50) */
ellipse(100,100,100,50);

/*четыре параметра определяют координаты противоположных углов
ограничивающего прямоугольника.*/

ellipseMode(CORNER);
ellipse(0,0,50,50); // рисуем эллипс

пример 8

size(400,400);//устанавливает размер окна
background(0,26,51); //цвет заливки окна _ темно-синий цвет
noStroke(); // фигуры не будут иметь внешних границ
smooth(); // у фигур будут сглаженные края

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) ; //синий круг

Использование модели RGB может не быть интуитивно понятным, поэтому используйте цветовую палитру Tools-Color Selector:

⇒

Выберите желаемый цвет, а затем используйте параметры R, G и B для функций background(), fill() и stroke().

пример 9. Устанавливаем прозрачность

size(480,120);//устанавливает размер окна
background(204,226,225); //цвет заливки окна _ светло-синий цвет
noStroke(); // фигуры не будут иметь внешних границ
smooth(); // у фигур будут сглаженные края

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) ; //синий круг

пример 10. Рисуем четыре круга

void setup () {
size (500, 500);
smooth ();
background (255);
noLoop ();
fill (50, 80);
stroke (100);
strokeWeight (3);
}
void draw () {
ellipse (250 ,200 ,100 ,100);
ellipse (250 -50 ,250 ,100 ,100);
ellipse (250+50 ,250 ,100 ,100);
ellipse (250 ,250+50 ,100 ,100);
}

Рисуем часть эллипса

Функция arc() позволяет изобразить часть эллипса - arc(x,y,width,height,start,end).

Рисует дугу, как сектор эллипса с координатами (х,у) и с указанными шириной и высотой.

Этот фрагмент или сектор определяется углами , заданными как start и end (в радианах по умолчанию) по часовой стрелке
Имеет 6 параметров:

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

Значения 4 углов в радианах используются настолько часто, что в Processing им присвоены имена:

PI - 180,
QUARTER_PI - 45,
НALF_PI - 90,
TWO_PI - 360.

пример 11

stroke(255,0,0);
strokeWeight(5);

fill(40,255,0);//устанавливает цвет заливки фигуры
arc(100,100,100,100,0,PI/2); //нач.угол 0 градусов, кон. угол 90 градусов

noFill(); // не заполнять
arc(100,100,100,100,PI,3*PI/2); //нач.угол 90 градусов, кон.угол 270 градусов

пример 12

size(480,120);//устанавливает размер окна
background(204,226,225); //цвет заливки окна _ светло-синий цвет

arc(90,60,80,80,0,HALF_PI); //start = 0, end = 90(градусов) или 3.14 радиан

arc(190,60,80,80,0,PI+HALF_PI);//start = 0, end = 270(градусов) или 4.71 радиан

arc(290,60,80,80,PI,TWO_PI +HALF_PI);//start = 90, end = 450(градусов) или 1.57+6.29 радиан

arc(390,60,80,80,QUARTER_PI,PI +QUARTER_PI);//start = 45, end = 225(градусов) или 3.93 радиан

Форма входа

Поиск

Календарь

Архив записей

2017 Февраль

Друзья сайта

	Copyright MyCorp © 2025
	Конструктор сайтов - uCoz