Занятие 5. Основы компьютерной графики языка Java

Опираясь на графические возможности языка программирования Java, мы сможем создавать несложную компьютерную графику и использовать её, в частности, в наших играх.

Прежде всего, создадим новый проект, назовём его lesson5 и к проекту добавим класс, назовем его prog5 (не забудьте установить галочку public static void main), получив тем самым новую заготовку для программы. Сверху, как обычно, напишем комментарий:

// Урок №5

и сразу после комментария добавим две библиотеки:

import javax.swing.*;

import java.awt.*;

Команда importподключает к нашей программе определенную библиотеку. В данном случае библиотеки: javax.swingи java.avt,отвечают за возможность вывода окон на экран и за отображение графики, что нам необходимо использовать.

На прошлом занятии мы рассматривали объектно-ориентированное программирование на примере образования классов животных. Выбрав нужные характеристики (масса, цвет, размер и т. д.), с их помощью мы описывали животных. Характеристики описывали свойства общего характера, но бывают также и характеристики действия: спать, есть, бежать, летать и т. д. По этим признакам тоже можно характеризовать животных. Каждое животное обладает определёнными свойствами и может выполнять какие-то действия, а значит, может характеризоваться свойствами, может характеризоваться методами.Свойство – это существительное: масса, размер, цвет. Методы– это глаголы: есть, двигаться, спать, летать и так далее. Методы всегда связаны именно с действиями. В программировании, при создании любого нового класса определять его свойства и методы.

Давайте попробуем создать класс под названием givotn и поле класса, то есть переменную целого типа под названием massa,описывающую свойство животного.

Теперь опишем метод, т.е. какое-то возможное действие,которое животное может предпринимать. Создадим, например метод eсть под названием est. Метод отличается от переменной наличием круглых скобок ( ). Круглые скобки указывают на то, что мы имеем дело с методом класса. Тело метода помещается в фигурных скобках { }. Все команды, находящиеся, внутри скобок { }, будут выполняться при вызове этого метода.

// Урок №5

import javax.swing.*;

import java.awt.*;

public class prog5 {

public static void main(String[] args) {

}

}

// Класс

class givotn

{

int massa; // Переменная класса

// Метод класса

void est()

{

massa = massa+1;

}

}

Внутри метода записана такая строчка:

massa = massa+1;

После выполнения этой операции значение переменной massa увеличится на единицу, а результат будет помещен в переменную massa, т. е. её старое значение будет уничтожено, а новое значение, на единицу большее, будет помещено именно в эту ячейку памяти. То есть, если старое значение переменной massa было 100, станет 101. Теперь в нашей программе,внутри метода main создадим объект типа givotn, назовем его slon.Зададим нашему объекту значение свойства massа,например, 5000. (cм. рис 42).

givotn slon = new givotn();

slon.massa = 5000;

После этого введем вызов метода класса. Для этого следует ввести слов slon, при нажатии оператора точка"." открывается список, в нём появляется метод est() (cм. рисунок 42).

slon.est();

Рисунок 42

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

{

massa= massa+1;

}

Рисунок 3.

Рис 3.

Рисунок 2.

Внутри блока метода обозначено определенное действие – увеличение массы:во время еды масса увеличивается на один килограмм, т.е. станет равна 5001 килограмм. Выведем на экран значение massa после вызова метода est().

System.out.println(slon.massa);

Запустив программу на выполнение в самом низу, в консольном окне увидим число 5001, т.е. сработал код, находящийся в блоке метода. Методвыполняет блок команд, приводящих к результату, заложенному внутри этого метода.В классе могут присутствовать как переменные, так и методы.В написании методы отличаются наличием круглых скобок. Методов, как и переменных, может быть любое количество.

Рассмотрим еще одно важное свойство классов: свойство закрытыхи открытых членов класса. Если добавить слово private в строку int massa;,получим строку private int massa; Переменная этого класса massa станет закрытой, т.е. недоступной за пределами класса. В программе теперь слово massa подчёркивается красным, если находится вне класса () (cм. рисунок 43).

Рисунок 43

Это значит, мы теперь не имеем права обратиться к этой переменной. Нажмём оператор точка ".". В списке окна поля massa больше нет. Оно стало скрытым, недоступным для использования вне класса. Внутри класса переменную massaпо-прежнему можно вызывать, обращаться к ней, менять её значение. Но вне класса мы этого сделать уже не можем. Переменная massa теперь закрытая переменная класса.

А теперь поменяем значение privateна public.

public int massa; // Переменная класса

Значение publicговорит о том, что эта переменная является открытой переменной класса.Если теперь в верхней части программы нажать оператор ".", словоmassa снова появилось в списке. Можно снова присвоить этой переменной какое-то значение. В этом и заключается отличие между открытыми и закрытыми переменными класса.Такие же свойства открытыми и закрытыми можно сделать и методы. Если указать слово private в начале строки void est (), метод est станет закрытым. Вызов этого метода вне класса станет запрещенным. Если попробовать сделать это, появится подчеркивание красным цветом. При нажатии оператора точка ".", мы увидим, что метод est пропал из списка – стал закрытым.Если снова поменять private на public, получим строку: public void est (), метод вновь появляется в списке, его снова можно вызывать.В данном случае, и переменная класса и метод класса являются открытыми.Если в начале ничего не указано, по умолчанию, любой член класса является открытым.Отсутствие какого-либо служебного слова говорит о том, что переменная или метод является public (открытая переменная или открытый метод), поэтому в самом начале мы и могли их вызывать без каких-то дополнительных указаний.

Использование закрытых и открытых членов класса позволяет осуществлять настройку класса более гибко с большими возможностями и использовать некоторые переменные только внутри класса.

В самом низу создадим класс под названием myFrame: напишем строку

class myFrame extends JFrame

Напомним, что оператор extendsозначает, что класс myFrame будет наследоваться от класса JFrame, класса окон.

Далее, в этом классе создадим метод, поместив его в фигурные скобки класса – в тело метода. Метод с названием myFrame, – открытый (public).Внутри этого метода укажем начальные настройки для нашего окна – запишем его характеристики.

Команда setBounds(10, 10, 800, 600); устанавливает положение верхней левой точки – 10 и 10пикселей сверху и слева, а также размеры окна: ширина – 800 пикселей, высота –600. Команда setVisible(true);выводит окно на экран.

Код программы будет выглядеть так:

// Урок №5

import javax.swing.*;

import java.awt.*;

public class prog5 {

public static void main(String[] args) {

}

}

class myFrame extends JFrame

{

public myFrame()

{

setBounds(10, 10, 800, 600);

setVisible(true);

}

}

Ниже создадим еще один класс и назовём его myPanel. Этот класс наследуется от класса JPanel. Класс JPanel отвечает за панели – прямоугольную область, помещаемую внутрь окна. В этом прямоугольнике мы можем отображать графические изображения.

Внутри класса создадим метод public void paintComponent (Graphics gr). Этот метод отвечает за рисование на панели в нашем окне. Круглые скобки () могут быть пустыми, могут содержать какие-то параметры, но, в любом случае, их наличие всегда обозначает метод класса. В данном случае, переменная типа Graphicsотвечает за отображение графических объектов – именно через неё мы с вами будем вводить графику в наше окно:

class myPanel extends JPanel

{

public void paintComponent(Graphics gr)

{

}

}

Воспользуемся переменной типа Graphicsи выведем на экран первую фигуру –синий прямоугольник.

Рисунок 4.

Рисунок 5.

Укажем цвет фигуры: gr.setColor(Color.BLUE);. Для того чтобы выбрать синий цвет, необходимо набрать на клавиатуре Color и,нажав оператор точка ".", в списке цветов выберем BLUE. setColor(Color.BLUE); –метод, устанавливающий цвет. На следующей строчке нарисуем проямоугольник: gr.drawRect(10, 10, 300, 400); Это метод рисования прямоугольника: draw– рисовать, Rect – от слова rectangle – прямоугольник.

class myPanel extends JPanel

{

public void paintComponent(Graphics gr)

{

gr.setColor(Color.BLUE); // Установка синего цвета

gr.drawRect(10, 10, 300, 400); // Рисование прямоугольника

}

}

После создания класса под названием myPanel,мы можем создать объект типа myPanel –назовём его просто pn.

Запишем строчку программного кода: myPanel np = new myPanel(); Поместим эту строчку внутри класса myFrameперед методом setBounds(10, 10, 800, 600); Тем самым был создана реальная панель. Теперь прикрепим её к нашему окну – вложим внутрь. Для того, чтобы это сделать, необходимо создать переменную типа Сontainer, которая позволяет прикреплять к окну различные элементы, в данном случае, панель: Container cont = getContentPane();. Эта переменная contотвечает за связывание их в одно целое – то есть, панель и окно сливаются воедино. Добавление панели к окну производится командой: cont.add(np); Этот метод (добавить) говорит о том, что мы добавляем панель pn в наше окно. Класс myFrame теперь будет выглядеть так:

class myFrame extends JFrame

{

public myFrame()

{

myPanel np= new myPanel(); // Создаем панель – объект

// Создаем переменную для связывания окна и

// панели

Container cont= getContentPane();

cont.add(np); // Добавляем, прикрепляем панель к окну

setBounds(10, 10, 800, 600);

setVisible(true);

}

}

Теперь в программе существуют два класса: класс панели и класс окна. Осталось создать окно, чтобы увидеть его на экране.

Напишем строку myFrame okno = new myFrame(); внутри метода public static void main(String[] args) Полный код программы должен выглядеть так:

// Урок №5

import javax.swing.*;

import java.awt.*;

public class prog5 {

public static void main(String[] args) {

myFrame okno = new myFrame();

}

}

class myFrame extends JFrame

{

public myFrame()

{

myPanel np = new myPanel(); // Создаем панель – объект

// Создаем переменную для связывания окна и

// панели

Container cont = getContentPane();

cont.add(np); // Добавляем, прикрепляем панель к окну

setBounds(10, 10, 800, 600);

setVisible(true);

}

}

class myPanel extends JPanel

{

public void paintComponent(Graphics gr)

{

gr.setColor(Color.BLUE); // Установка синего цвета

gr.drawRect(10, 10, 300, 400); // Рисование прямоугольника

}

}

Запустим программу на выполнение, и на экране окно с прямоугольником синего цвета (cм. рисунок 44).

Рисунок 44

Окно на экране было создано строкой myFrame okno = new myFrame(); по шаблону класса myFrame. Т.е., этот класс был описанием, на основании которого было создано это окно.Область, лежащая внутри рамки окна – панель, вложенная нами внутрь окна.Именно на этой панели мы нарисовали прямоугольник синего цвета. Посмотрим, чем он характеризуется, в каком месте нарисован:

Класс myPanelотвечает за панель, которая вложена в окно. Внутри этого класса есть метод public void paintComponent(Graphics gr), который отвечает за рисование на этой панели.Метод gr.setColor(Color.BLUE); устанавливает цвет контура прямоугольника на экране. И, наконец, метод gr.drawRect(10, 10, 300, 400); отображает сам прямоугольник. Значение 300 – это его ширина;значение 400 – высота. И, наконец, первые два значения 10 и 10 – положение верхней левой точки прямоугольника относительно угла окна.

Можно рассмотреть некоторые, самые простые, геометрические фигуры, которые можно отображать на экране.

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

Эллипс (овал). Если его продольный и поперечный диаметры равны, получается круг. Эллипс можно поместить (вписать) в прямоугольник (прямоугольную область). При описании данных эллипса, указываются размеры прямоугольной области, в которую вписывается эллипс (размеры описанного прямоугольника). Данные записываются так же, как в случае прямоугольника.Указывается положение верхней левой точки описанного прямоугольника, егоширина и высота. Эллипс вписывается внутрь прямоугольника.

Линия. Линия характеризуется двумя точками – начальной и конечной. Каждая точка имеет две координаты – X и Y.

Нарисуем линию на нашей панели, для этого добавим после строчек рисования прямоугольника следующие две строки:

gr.setColor(Color.GREEN); // Установка зеленого цвета

gr.drawLine (50,50,700,700); // Рисование линии

Запустим программу и увидим, кроме прямоугольника еще и нарисованную линию (cм. рисунок 45).

Рисунок 45

Линия характеризуется точками с координатами (x1, y1, x2, y2). Первые два числа– x1, y1 –координаты начальной точки, вторые два числа – x2, y2 –координаты конечной точки. Мы присвоили им значения: x1– 50, y1 – 50, x2– 700, y2 – 700. Цвет линии задан строкой: gr.setColor(Color.GREEN);.

Теперь попробуем нарисовать эллипс и залить его красным цветом.

Укажем параметры эллипса. Например, 100, 100, 500 и500. Это параметры прямоугольной области, в которую будет вписан эллипс,нарисованный красным контуром. Поместим две строки программного кода под рисованием линии:

gr.setColor(Color.RED); // Установка красного цвета

gr.fillOval(100, 100, 500, 500); // Рисование закрашенного эллипса(круга)

Запустим программу и посмотрим на экран. Так как прямоугольник, в который вписан эллипс, является квадратом, то наш эллипс является кругом. Круг получился большой, не поместился на экран, но можно увеличить окошко, потянув его мышкой за сторону (cм.рисунок 46).

Рисунок 46

В этом методе мы указали начальную точку этой прямоугольной области, её ширину и высоту. В отличие от прямоугольника – наш круг закрашен красным цветом. Mетод заливки начинается со слова fill. Если метод начинается с этого слова, то фигура закрашивается внутри. Рассмотренные нами фигуры носят название графические примитивы.

Перейдем к рассмотрению настройки палитры цветов в языке Java.

Все цвета в компьютерной графике комбинируются из трех основных составляющих: красный, зеленый и синий цвет – Red,Green, и Blue.Сокращенно – RGB.

Каждая составляющая может принимать значения от 0 до 255включительно, т. е., может иметь 256 значений. Все возможные комбинации этих значений каждой из трёх составляющих дают более 16 млн. цветов, А точнее256х256х256= 16 777 216. По одним результатам исследований, человеческий глаз может различать около 10 млн. цветов, по другим – около 16 млн. цветов. В любом случае, мы имеем полный спектр – большее количество цветов человеческий глаз не различает. Таким образом, на современном компьютере мы можем настроить цветовую гамму максимально различимую человеческим глазом.

Первые мониторы позволяли отображать два цвета, затем 4цвета, 16 цветов, 256 сейчас мы можем создавать полноценную графику,использовать любую цветовую гамму и устанавливать любой цвет. Давайте попробуем сделать что-то более интересное, заложим некую программную логику, чтобы получить новый, запрограммированный нами эффект. Воспользуемся циклом for и внутри метода public void paintComponent(Graphics gr).

удалим имеющиеся строки и вместо них запишем:

public void paintComponent(Graphics gr)

{

gr.setColor(Color.BLUE);

for (int i=0;i<10;i++)

{

gr.fillRect(10*i, 10*i, 50*i, 50*i);

}

}

Запустим программу и увидим ступенчатую фигуру синего цвета (cм. рисунок 47).

Рисунок 47

В теле нашего цикла мы записали команду, действие, которое цикл будет выполнять заданное число раз. В настроечной части мы создали, так называемый, счетчик цикла - переменную целого типа, и присвоили ей начальное значение 0. Далее указали условие, выполнения цикла: пока i<10. Заложили увеличение переменной i на единицу на каждом шаге цикла i++. Таким образом, переменная i будет менять свои значения: 0, 1, 2, 3, 4… , а когда она станет равной 10 –цикл прервется, и произойдет выход из цикла. Строкой выше мы установили синий цвет - цвет вывода наших прямоугольников, в нашем случае квадратов, т.к. его стороны равны.

Давайте пошагово разберём, как меняется геометрическая фигура на экране при изменении i на 1 в методе

gr.fillRect(10*i, 10*i, 50*i, 50*i);

Шаг 1 i=0 gr.fillRect(0, 0, 0, 0);

Шаг 2 i=1 gr.fillRect(10, 10, 50, 50);

Шаг 3 i=2 gr.fillRect(20, 20, 100, 100);

Шаг 4 i=3 gr.fillRect(30, 30, 150, 150);

Так i меняется от 0до 10. Каждый шаг цикла выводит на экран квадрат с определёнными характеристиками, принимающими конкретное значение, в зависимости от значения i. Квадраты накладываются друг на друга, и в результате получается так называемая "ёлочка". На каждом новом шаге цикла квадрат увеличивается, так как значение iрастёт. Начальная угловая точка перемещается, т. к. меняются значения координат по осям X и Y. Таким образом, мы задаём программную логику в создаваемое приложение и на выходе получаем результат в виде графического обьекта сложной формы. Компьютер выполняет наши задачи. Мы могли и вручную 10 раз написать команду gr.fillRect(…);, последовательно вывести на экран 10прямоугольников, но мы воспользовались циклом forи получили нужный нам результат, не "раздувая" наш программный код.

Используя подобные возможности, мы можем отображать на экране различные геометрические фигуры. Насколько хватит вашей фантазии, вы можете заполнить различными графическими объектами свое окно. У нас появились некоторые возможности для графического оформления компьютерной игры.