Рисование форм в JES: холст, прямоугольники, овалы и линии

JES — это среда программирования для работы с изображениями, видео и звуком. Она позволяет выбрать изображение и изменить цвет каждого пикселя программно. Такой подход упрощает создание генеративной графики и инструментов для обучения.

JES также содержит встроенные функции для рисования графики поверх изображений. Это простые функции для линий и фигур: прямоугольников, овалов и кругов.

Основные понятия

• JES использует Jython — реализацию Python на Java. Правила отступов и синтаксис функций такие же, как в Python.
• Система координат в JES: начало (0,0) находится в верхнем левом углу. X растёт вправо, Y растёт вниз.
• Цвета обычно доступны как переменные (например, red, blue, green). Если переменная не определена, используйте makeColor(r,g,b).

Как создать пустой холст в JES

Чтобы рисовать на пустом холсте, используйте функцию makeEmptyPicture(width, height). Это создаёт изображение заданного размера в пикселях.

Пример функции createEmptyPicture():

def createEmptyPicture():
    # Создаём пустой холст шириной 600px и высотой 300px
    emptyPicture = makeEmptyPicture(600, 300)
    # Отображаем результат
    show(emptyPicture)

Пошаговая инструкция:

1. Откройте JES и создайте новый файл программы.
2. Вставьте функцию выше и сохраните.
3. Нажмите Load Program, подтвердите сохранение, если потребуется.
4. В командной строке введите createEmptyPicture() и нажмите Enter.

Важно: размер холста влияет на скорость обработки. Большие изображения занимают больше памяти и ресурса CPU.

Как создать и добавить прямоугольники

JES предоставляет addRect(pic, x1, y1, x2, y2, color) для рамок и addRectFilled(pic, x1, y1, x2, y2, color) для заполненных прямоугольников.

Обратите внимание: параметры x1,y1 — верхний левый угол. Параметры x2,y2 — нижний правый угол.

Пример функции drawRectangle():

def drawRectangle():
    pic = makeEmptyPicture(600, 300)
    # Нарисовать неполый прямоугольник с рамкой красного цвета
    addRect(pic, 50, 100, 200, 150, red)
    # Нарисовать заполненный прямоугольник
    addRectFilled(pic, 100, 200, 300, 250, red)
    show(pic)

Пояснения:

• В примере первые координаты (50,100) задают верхний левый угол рамки, а (200,150) — правый нижний.
• Можно менять цвета и размеры для создания интерфейсов, простых спрайтов и тестовых изображений.

Как создать и добавить овалы и круги

Используйте addOval(pic, x, y, width, height, color) и addOvalFilled(pic, x, y, width, height, color). Для круга width и height должны быть равны.

Пример функции drawCircle():

def drawCircle():
    pic = makeEmptyPicture(600, 300)
    # Продолговатый овал (ширина 50, высота 100)
    addOval(pic, 100, 100, 50, 100, red)
    # Заполненный овал
    addOvalFilled(pic, 200, 100, 50, 100, red)
    # Кругы (ширина == высота)
    addOval(pic, 350, 100, 50, 50, red)
    addOvalFilled(pic, 450, 100, 50, 50, red)
    show(pic)

Подсказки:

• Используйте одинаковые значения width и height для идеально круглой формы.
• Для тонкой линии обводки можно сначала нарисовать заполненный круг меньшего радиуса другим цветом.

Как создать и добавить линии

Функция addLine(pic, x1, y1, x2, y2, color) рисует линию от точки (x1,y1) до (x2,y2).

Пример функции drawLine():

def drawLine():
    pic = makeEmptyPicture(600, 300)
    # Линия от (50,200) до (250,200)
    addLine(pic, 50, 200, 250, 200, red)
    show(pic)

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

Практические советы и приёмы

• Всегда проверяйте, что координаты внутри границ картинки. Прямые обращения за пределы вызовов часто игнорируются или приводят к ошибкам.
• Если цвет переменной (например, red) не определён, создайте его: color = makeColor(255,0,0).
• Для точного позиционирования используйте направляющие координаты и предварительное отображение сетки (нарисуйте тонкие линии через интервалы).
• Для анимации генерируйте несколько картинок и объединяйте их в последовательность кадров.

Когда этот подход не работает

• Когда вам нужно высокое качество антиалиасинга. Функции JES рисуют «жёсткие» края без сглаживания.
• Для сложной векторной графики с трансформациями (повороты, масштабирование с векторным сглаживанием) лучше применять библиотеки векторной графики или экспортировать в SVG.
• При работе с очень большими холстами (например, >10000×10000) возникает недостаток памяти и медленная отрисовка.

Альтернативные подходы

• Рисование пиксель за пикселем: setColor(getPixel(pic,x,y), color) — даёт полный контроль, но медленнее.
• Использовать внешние библиотеки для Python и затем импортировать результат в JES (при необходимости конвертировать), например, Pillow для предварительной генерации.
• Генеративные алгоритмы: перлин-шума, фракталы, сплайны — для создания сложных форм вместо ручного рисования.

Ментальные модели и эвристики

• Представляйте холст как лист бумаги, прикреплённый в верхнем левом углу. X — вдоль листа вправо, Y — вниз.
• Каждый вызов добавляет слой поверх предыдущего. Порядок вызовов важен.
• Обдумайте bounding box (ограничивающий прямоугольник) для каждой фигуры: это помогает вычислять коллизии и компоновку.

Чеклист ролей

• Для преподавателя:

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

• Для студента:

  • Запустите пример, измените координаты и цвета.
  • Документируйте каждый эксперимент и ожидаемый результат.

• Для разработчика прототипа:

  • Создайте тесты отображения (см. раздел «Критерии приёмки»).
  • Обработайте ошибки некорректных координат и неопределённых цветов.

Критерии приёмки

• Функция createEmptyPicture() создаёт изображение размером 600×300 и открывает окно просмотра.
• Функция drawRectangle() рисует две прямоугольные области: одна с рамкой (от 50,100 до 200,150), вторая заполненная (от 100,200 до 300,250).
• Функция drawCircle() создаёт овал, заполнённый овал и два круга в указанных позициях.
• Функция drawLine() рисует линию от (50,200) до (250,200).
• Все фигуры отображаются ожидаемого цвета и без исключений при запуске.

Тестовые случаи

• Вызвать все четыре функции по очереди и визуально проверить наличие фигур.
• Попробовать отрицательные координаты и убедиться, что программа не падает.
• Проверить поведение при ширине/высоте = 0.
• Проверить, что использование makeColor(0,0,0) рисует чёрные линии.

Быстрый шпаргалка (cheat sheet)

• makeEmptyPicture(width, height) — создать холст
• show(pic) — показать картинку
• addRect(pic, x1, y1, x2, y2, color) — рамка прямоугольника
• addRectFilled(pic, x1, y1, x2, y2, color) — заполненный прямоугольник
• addOval(pic, x, y, w, h, color) — овал/круг
• addOvalFilled(pic, x, y, w, h, color) — заполненный овал
• addLine(pic, x1, y1, x2, y2, color) — линия

Пример мини-методологии для урока (5 шагов)

1. Объяснить систему координат и показать пример на прозрачной сетке.
2. Попросить студентов нарисовать один пустой холст.
3. Показать addRect и дать упражнение: нарисовать рамку и заполнить её.
4. Показать addOval и предложить сконструировать простой человечек из фигур.
5. Проверить и прогнать критерии приёмки.

1‑строчный глоссарий

• Jython — версия Python на Java, используемая в JES.
• Холст — создаваемое изображение makeEmptyPicture.
• Bounding box — ограничивающий прямоугольник фигуры.

Короткое резюме

Вы теперь знаете, как создавать пустой холст и добавлять на него прямоугольники, овалы и линии в JES. Примеры кода, чеклисты и критерии приёмки помогут быстро протестировать и встроить эти приёмы в учебные задания или прототипы.

Важно: экспериментируйте с координатами, размерами и цветами. Это лучший способ понять систему координат и порядок отрисовки.

Сводка действий:

1. Создайте функцию, использующую makeEmptyPicture.
2. Нарисуйте фигуры с помощью addRect/addOval/addLine.
3. Отобразите результат командой show.