Графика

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

Цвет выбирается с помощью метода setColor. Вот таким образом:

    setColor(цвет);

Полный список названий цветов можно посмотреть здесь. Вот некоторые из них:

Чтобы изменить цвет фигуры, просто вызовите метод setColor перед рисованием фигуры.

Цвет фона можно установить так:

    setBackgroundColor(цвет);

Давайте попробуем!

void main() {
    setBackgroundColor(black);
}

Чтобы нарисовать фигуру, надо задать её размеры и координаты x, y относительно верхнего левого угла окна. Координата x отсчитывается вправо, а координата y - вниз.

Для прямоугольника надо указать координаты x, y верхнего левого угла, а такжн ширину и высоту. Вот так:

    drawRectangle(x, y, width, height);

Все значения должны быть целыми (int).

Нарисуем квадрат в позиции (100,100), шириной 200 и высотой 200 точек:

Пусть он будет желтым на зеленом фоне:

void main() {
    setBackgroundColor(green);
    setColor(yellow);
    drawRectangle(100, 100, 200, 200);
}

Вот что должно у Вас получиться. Замечательно!

Теперь попробуйте круг. Вот пример, где x, y задают координаты верхнего левого угла объемлющего квадрата, а radius определяет радиус круга.

    drawCircle(x, y, radius);

Упражнение:

Нарисуйте желтый круг с левой верхней точкой (100, 200) и радиусом 50. Какой код нужен для этого?

Ответ:

    setColor(yellow);
    drawCircle(100, 200, 50);

Заметим, что фигуры, которые мы рисовали, имели только контур и не были закрашены. Для рисования закрашенных фигур применяйте:

    fillRectangle(x, y, width, height);
    fillCircle(x, y, radius);
    fillOval(x, y, width, height);

Нарисуем автопортрет!

void main() {
    setBackgroundColor(yellow);
 
    // Тело
    setColor(red);
    fillRectangle(100, 100, 50, 50);
 
    // Руки
    setColor(green);
    fillRectangle(25, 100, 75, 10);
    fillRectangle(150, 100, 75, 10);
 
    // Ноги
    fillRectangle(100, 150, 10, 75);
    fillRectangle(140, 150, 10, 75);
 
    // Голова
    setColor(blue);
    fillCircle(100, 50, 25);
}

Вот так. Ура!

Упражнения:

1. Дорисуйте человечику глаза, нос и рот. Можно добавить ботинки... творите на свой вкус...
2. Вызовите JUDO / Помощь / Справка по методам. В разделе “Графика” прочитайте описание методов drawLine и drawString.
3. Нарисуйте домик и звезду.

Метод drawString() рисует строку текста с указанной точки.

Вот шаблон, где Строка задает текст для отрисовки, а числа x, y определяют координаты левого верхнего угла текста:

    drawString(Строка, x, y);

Пример #1

    String name = "Steve";
 
    drawString(name, 35, 25);

Пример #2

    drawString("This is text", 15, 35);

Итак, давайте нарисуем эмблему Judo:

void main() {
    setBackgroundColor(white);
    setColor(black);
    fillRectangle(100, 100, 140, 140);
    setColor(white);
    drawString("Java для школьников", 110, 172);
    setColor(red);
    drawRectangle(100, 100, 140, 140);
}

Упражнение: нарисовать ряд кружочков. Используйте цикл.

Для вычисления размера окна примените методы:

Вот пример алгоритма, с которого я бы начал:

    // Объявляем переменные для ширины и высоты окна.
    // Объявляем количество кругов в ряду и задаем желаемое значение.
    // Получаем значения ширины и высоты окна.
    // Делим ширину на количество кругов, это диаметр круга.
    // Цикл по количеству кругов.
    //     Рисуем круг в позиции счетчик * диаметр.
    // Конец цикла.

Скопируйте этот алгоритм в JUDO и используйте его как план для написания Вашей программы.

Допишите нужный код после каждой строчки комментария.

А если бы требовалось заполнить всё окно кругами? Что для этого надо добавить в программе?

Подсказка: используйте цикл for внутри другого цикла for. Попробуйте!

Еще задачи:

1. Нарисуйте несколько окружностей уменьшающегося радиуса с общим центром.
2. Нарисуйте несколько квадратов уменьшающегося размера с общим центром.

Домик.

void main() {
    setBackgroundColor(black);
    setColor(white);
 
    // Стена
    fillRectangle(100, 100, 300, 100);
 
    // Крыша
    drawLine(100, 100, 250, 25);
    drawLine(250, 25, 400, 100);
 
    // Окна
    setColor(blue);
    fillRectangle(125, 125, 20, 20);
    fillRectangle(355, 125, 20, 20);
 
    // Дверь
    setColor(red);
    fillRectangle(240, 150, 30, 50);
}

Ряд кругов.

void main() {
    // Объявляем переменные для ширины и высоты окна.
    int width;
    int height;
 
    // Объявляем количество кругов в ряду и задаем желаемое значение.
    int cnum = 16;
 
    // Получаем значения ширины и высоты окна.
    width = getDrawingWidth();
    height = getDrawingHeight();
 
    // Делим ширину на количество кругов, это диаметр круга.
    int diameter = width / cnum;
 
    // Цикл по количеству кругов.
    for (int counter = 0; counter < cnum; counter++)
    {
        // Рисуем красный круг в позиции счетчик * диаметр.
        setColor(red);
        fillCircle(counter * diameter, 0, diameter / 2);
 
    // Конец цикла.
    }
}

Перейдем к следующему уроку.