Задания для 10-8. ФМЛ №239. 2024/2025

Всякое разное - полезные навыки

Sat, 17 May 2025 21:03:39 +0000

Запишу несколько как мне кажется важных тем о которых интересно поговорить:

Технические темы

Детектор прямой преобразованием Хафа
Детектор границ Канни
RANSAC
Прокладка шва в задаче склейки панорамы
Маскировка шва в задаче панорамы через разложение на частоты
Как интерполировать температуру по метеовышкам - троеликая триангуляция Делоне

Про поступления

1) Лучшие места в Петербурге как будто бы - СПбГУ МКН и ИТМО КТ.

2) Даже если вы уверены что хотите идти дальше в физику - напишите ЕГЭ по информатике и в целом сделайте пожалуйста все что можете для гипотетического сценария в будущем “вдруг я передумаю и позже захочу перейти в другой ВУЗ на программирование”. Такое ЧАСТО случается.

Как стать крутым специалистом?

Как стать крутым специалистом, получать удовольствие от работы, в т.ч. благодаря тому что вас будут ценить?

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

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

3) Не придумывать новое не изучив старое. Если у вас появилась грандиозная идея “как надо” что-то делать - сначала спросите, а “как раньше” это делали и почему именно так? Может быть не догадались до вашей идеи, а может быть были причины не делать так как вы придумали из-за какой-то специфики о которой вы не знаете. Кроме того если люди у лифта стоят и ждут - не очень красиво подходить нажимать на кнопку вызова лифта, сначала стоит посмотреть - может она уже светится т.к. другие люди тоже не дураки и уже догадались ее нажать.

4) Учитывать риски. Хотите заменить что-то старое чем-то новым? Оно будет работать в десять раз быстрее? Критично подумайте - а чем новое решение хуже? Может быть в каких-то случаях новый метод медленнее? А вдруг этих случаев - большинство? А вдруг новый метод гораздо сложнее и поэтому его будет сложнее развивать в будущем? А важна ли вообще скорость в этой задаче? А вдруг исправив один баг - вы добавите другой?

5) Делать единообразно. Хотите что-то сделать но не знаете как правильно? Найдите похожую уже сделанную работу и сделайте по аналогии. Например в программировании не так важен codestyle, как важно писать единообразный код - т.е. меняя или дописывая где-то код - писать его похоже на окружающий уже существующий код. Ваши изменения должны быть как хамелеон - быть максимально похожи на код вокруг - иногда даже вопреки формально фиксированному codestyle.

6) Делать вовремя и отвечать за свои обязательства. Сказали что сделаете что-то к пятнице - сделайте это к пятнице. Если вдруг вы ошиблись с оценкой - как только это стало ясно придите к человеку которому было дано обещание и предупредите его, чтобы он смог скорректировать планы которые от этого зависят. Еще немного и научились почти всегда угадывать сроки и не продалбывать их? Хоп, вы уже внезапно стали почти senior-помидор-девелопер-полубожеством. Не надо искать оправдательные причины почему вы что-то не смогли сделать, примите что вы совершили ошибку (хотя бы у себя в голове), извинитесь и подумайте как стать лучше.

7) Думать о том как выглядит ситуация с чужой стороны. Если у вас есть коллеги, начальник или подчиненные - они не просто так что-то от вас просят - будь-то что-то сделать/что-то подсказать и т.п.. Важно понимать зачем им это. В частности как только вы прокачали эмпатию и чувствуете чужие потребности - предыдущий пункт про сроки становится очевидным. Вас спросили про сроки чтобы планировать остальные задачи/знать когда можно будет начать что-то что зависит от результата вашей работы. Поэтому очевидно надо предупредить если работа затянулась - чтобы можно было скорректировать планы.

8) Не пытаться победить в споре, а искать истину вместе с собеседником. Да, это проигрышная позиция если ваша цель победить и самоутвердиться. Но что дает победа в споре? Краткосрочный дофомин, небольшое удовольствие и радость для эго. А если вы в споре научились искать относительно объективную истину - то в споре не будет конфликта (если собеседник хотя бы примерно тоже пытается найти истину), и вы найдете лучшее решение/сделаете оптимальный выбор (например того как подступиться к задаче, или как расставить приоритеты в работе, или какой подход/идея сработает лучше).

9) Если есть вопрос - сначала попрбовать найти ответ самому/загуглить. Если есть вопрос и кто-то из коллег отзывчиво и хорошо помогает - поборите соблазн по любому поводу спрашивать его о помощи и совете, иначе вы будете все менее самостоятельны и не будете развиваться. Научитесь сначала потратить хоть какое-то время чтобы либо загуглить, либо поискать примеры такой же похожей задачи в коде - чтобы подсмотреть решение там и сделать по аналогии.

10) Самому идти и спросить помощи или сообщить о проблеме. Если что-то пошло не так (точно не уложитесь в сроки или поняли что закоммитили баг и вот-вот все сервера упадут), или у вас что-то не получается - идите к коллегам и поговорите об этом. Если что-то пошло не так - проблему получится тем безболезненнее решить чем раньше о ней станет известно. Если вы застряли и например не знаете как что-то сделать - это тоже проблема, ведь вы уперлись в стену и тратите свое время впустую (а значит и время команды/компании).

11) Не бояться писать/говорить с незнакомыми людьми. Не знаете стоит ли поступать в этот ВУЗ/идти работать в эту компанию? Найдите тех кто там сейчас учится/работает или был там раньше. Например в группах в vkontakte или где-то еще. И вежливо напишите с просьбой подсказать и ответить на несколько вопросов. Если человек откажется или проигнорирует не беда, но чаще всего вам ответят. Лучше всего написать нескольким людям - так вы получите несколько мнений.

12) Не бояться написать в компанию мечты даже если нет вакансий. Многие компании готовы вас нанять если вы хоть сколько-то компетентны в области которой эти компании работают. И в т.ч. готовы нанять стажера если у него горят глаза и видно что большой потенциал. Даже если нигде нет ни единой вакансии. Просто вежливо напишите любому сотруднику этой компании, расскажите о себе и спросите есть ли стажировки/вакансии. То же работает с поступлением в аспирантуру к какому-нибудь профессору.

13) Если вас не взяли на работу - спросите что подтянуть. Вам отказали после собеседования? Попросите дать обратную связь - т.е. почему, чего вам не хватило. Можете даже в конце собеседования попробовать спросить дать вам обратную связь вживую, если собеседующий вас человек не против. Например может оказаться что просто нашли более опытного человека и имеет смысл написать вновь через полгода. Может быть вам надо подучить язык программирования/какую-то библиотеку/подтянуть какую-то область.

14) Систематизируйте информацию. Вы что-то обещали сделать такого-то числа или через месяц? Поставьте себе напоминание (гугл календарь, календарь в телефоне, отложенная отправка письма себе, отложенное сообщение в телеграмме себе). Пытаетесь что-то выбрать (условный ноутбук)? Составьте табличку (excel или google docs) и выпишите туда все хорошие варианты со всеми важными характеристиками и плюсами/минусами. Забываете что-то сделать? Заводите себе где-то TODO лист дел - специальные приложения или просто Saved Messages в телеграмме.

15) Записывайте идеи. Если например вы занимаетесь каким-то творчеством, например придумываете алгоритмы - ЗАПИСЫВАЙТЕ КАЖДУЮ ИДЕЮ в большой список. Иначе большую их часть ВЫ ЗАБУДЕТЕ. То же работает с классными идеями хобби/вариантами отпуска - чем угодно.

16) Рефлексируйте и пытайтесь понять себя. Ошиблись и что-то пошло не так? Кто-то на вас обиделся/сказал что вы его подвели? Долго не могли найти ошибку в коде? ПРОВЕДИТЕ АНАЛИЗ и подумайте - что вы сделали не правильно, что можно было сделать лучше чтобы результат был получен лучше/быстрее. Подумайте НЕ СОВЕРШАЛИ ЛИ ВЫ ТАКУЮ ОШИБКУ РАНЬШЕ. Если совершали - возможно вы наступаете на одни и те же грабли и это серьезный повод еще больше удилить внимание тому чтобы что-то менять в своей жизни/в подходе к этого рода задачам/ситуациям. Иначе говоря вы - нейронка которая принимает море решений, и хотя бы в самых важных аспектах жизни (не только профессиональных) - очень важно развиваться и прокачивать свою систему принятия решения - в т.ч. на базе ошибок.

[Конференция] Результаты

Sun, 27 Apr 2025 21:11:38 +0000

Пришлите мне свою финальную презентацию как можно быстрее:

1) в pdf-формате (обычно это делается через Файл->Сохранить как->Выбрать .pdf расширение)

2) назовите ее в форме номер_название_проекта.pdf, например: 01_Key_Save.pdf, 02_The_Venerable_Lodge.pdf, 03_Factor_io.pdf

Так же пожалуйста откройте по ссылке с таймштампом видео на youtube с записью демонстрации вашего проекта. Если вы хотите чтобы оттуда что-то было убрано - сообщите мне, позже я сделаю это видео публичным на своем канале (сейчас оно открывается только по ссылке).

Папка со всеми презентациями.

Официальные результаты конференции.

Номер	Автор	Описание	Диплом (степень)	Оценка	Презентация (pdf-слайды)
01	Бай. Али.	KeySave - хранение паролей (синхронизация в яндекс.диске, криптография)	1 степень	5	N/A
02	Дем. Анд.	The Venerable Lodge - пошаговая игра - управление заговором	1 степень	5+	pdf-презентация
03	Дор. Але.	Factor.io - клон Factorio - строить мини-заводики, соединять их конвейерами	1 степень	5+	pdf-презентация
04	Жук. Соф.	Space Duo - прохождение уровней с ловушками двумя игроками	1 степень	5	pdf-презентация
05	Кам. Мар.	типовая 27	N/A - типовой	4	N/A
06	Каю. Там.	Web-мессенджер “Теремок” - веб. мессенджер (React, создание групп)	3 степень	5-	pdf-презентация
07	Кол. Пав.	ChessCraft - головоломка с созданием шахматных фигур для прохождения уровней против бота	3 степень	5-	pdf-презентация
08	Лит. Ива.	типовая 2	N/A - типовой	4	N/A
09	Лоп. Дми.	типовая 1	N/A - типовой	4	N/A
10	Льв. Али.	Super Mush Bros - аркада вид сбоку, похоже на Марио	2 степень	5-	N/A
11	Ман. Вал.	типовая 36	N/A - типовой	4	N/A
12	Мат. Ива.	Мусорный шутор - волны врагов, разное оружие, бонусы, много крутых анимаций	1 степень	5+	pdf-презентация
13	Моч. Нат.	Bunny Walk - псевдо-трехмерная графика, бежать за зайца по линиям (аля Subway Surf), есть босс	3 степень	5-	pdf-презентация
14	Наз. Мат.	типовая 8	N/A - типовой	4	N/A
					N/A
15	Нем. Арс.	типовая 24	N/A - типовой	5-	N/A
16	Нов. Але.	func(math) - математические головоломки - получить число используя данные формулы и числа (польская нотация)	2 степень	5-	pdf-презентация
17	Овс. Лео.	Покер с ботом	2 степень	5-	N/A
18	Пар. Ден.	PALD (Picture Analyzator of Lego Details) - распознавание блока лего (CV, RANSAC, DepthAnything)	1 степень	5	N/A
19	Пес. Ива.	Бильярд с физикой	3 степень	5-	pdf-презентация
20	Пет. Мат.	Soccer Stars - пошаговый футбол с физикой полета мяча и удара мышкой аля-бильярд	3 степень	5	pdf-презентация
21	Руд. Кир.	Room Zero - нужно убить всех врагов, система скрытности и зоны видимости врагов	3 степень	4+	pdf-презентация
22	Руд. Али.	Space ray - головоломка с лазером и зеркалами-призмами-телепортами	2 степень	5	pdf-презентация
24	Сую. Дал.	DoomDuDum - трёхмерный шутер на простой версии 360-трассировки лучей, гранаты рикошетят от стен, стены разрушаемые	1 степень	5+	pdf-презентация
25	Тих. Иль.	Tom the robber - скрытно обворовать дом не попавшись в зону видимости охраны	2 степень	5	pdf-презентация
26	Шка. Арт.	A Dance of Fire and Ice - ритм-игра, нужно шагать в такт (похожа на A Dance of Fire and Ice)	1 степень	5+	pdf-презентация
27	Яку. Мар.	Cooking Diary - нужно выполнять заказы на готовку бегая от плиты к миксеру и другим предметам	3 степень	5	pdf-презентация

[Конференция] Регистрация

Wed, 02 Apr 2025 21:10:39 +0000

При регистрации (или после нее) вам будет нужно составить описание проекта и отправить видео, вот как они должны выглядеть:

Пример описания:

2D игра на java. Похоже на арканоид. Игрок двигает платформу чтобы отбивать мячик который рикошетит и летает по полю. При врезании в кирпичи мячик их ломает. Нужно уничтожить все кирпичи. В игре есть бонусы, рейд-боссы, отсылки на Борхеса и глубокий философский подтекст, можно кидать гранаты, менять скины персонажа, есть музыка и авторская озвучка.

Как должно выглядеть видео:

около одной-двух минут
название должно быть вида Фамилия Имя <НазваниеПроекта>, например Полярный Николай Арканоид3000.mp4
должно показывать в первую очередь основной процесс вашей игры
не обязательно исчерпывающе показывать все уровни, лучше хорошо показать самое ключевое

До урока пятницы вам нужно:

1) Если у вас не типовая геометрия - зарегистрироваться как докладчик по ссылке (в описании проекта сделайте максимально понятно как выглядит игра, что в ней надо делать игроку, и что является самой сложной его частью - например это может быть наличие компьютерного игрока-бота, или режим сетевой игры, или рассчет физики) - и сохраните себе описание проекта, т.к. его еще надо будет скинуть мне

2) Написать мне в телеграм что вы зарегистрировались + скинуть мне название вашего проекта указанного при регистрации + скинуть мне описание проекта указанное при регистрации

3) Если вы это не сделаете до конца урока пятницы - получите случайное количество колов (от одного до шести)

Так же вам нужно:

4) Отправить короткое описание проекта и видео (указание об этом и email на который нужно отправить эти материалы увидите после регистрации), что в них должно быть - описано в начале этой статьи

5) Прислать мне первую версию презентации (см. тут)

6) Сделайте тестовый прогон в ZOOM чтобы убедиться что вы укладываетесь в тайминги, темп рассказа спокойный, речь приятная, и что звук игры слышен в записи демо

Если у вас типовой проект то в дополнение вам еще нужно:

7) Прислать мне черновую версию отчета (см. тут)

8) Со следующей недели начинаем сдачу типовых проектов

[Java] Проигрывание звуков (.wav)

Mon, 10 Mar 2025 21:01:39 +0000

1) Создайте пустой проект (или откройте ваш)

2) Найдите какой-нибудь wav аудиофайл:

например вбив в гугл mp3 for games и найдя сайт вроде https://www.zapsplat.com/sound-effect-category/game-sounds/
когда для подобного сайта вас просят залогиниться - можно сэкономить время найдя сайт на котором выкладывают логины, например вбив в гугл free logins for sites -> https://login2.me/
скачав mp3 надо его преобразовать в wav - вбиваем в гугл mp3 to wav converter, находим сайт
преобразовали mp3 в wav (к сожалению mp3 - проприетарный формат, его можно проиграть через javafx, а с этим есть сложности, особенно из-под Swing GUI)

3) Вбейте в гугл java play wav file и найдите например это - создайте класс MakeSound:

import java.io.File;
import java.io.IOException;

import javax.sound.sampled.AudioFormat;
import javax.sound.sampled.AudioInputStream;
import javax.sound.sampled.AudioSystem;
import javax.sound.sampled.DataLine;
import javax.sound.sampled.LineUnavailableException;
import javax.sound.sampled.SourceDataLine;

public class MakeSound {

    private final int BUFFER_SIZE = 128000;
    private File soundFile;
    private AudioInputStream audioStream;
    private AudioFormat audioFormat;
    private SourceDataLine sourceLine;

    /**
     * @param filename the name of the file that is going to be played
     */
    public void playSound(String filename){

        String strFilename = filename;

        try {
            soundFile = new File(strFilename);
        } catch (Exception e) {
            e.printStackTrace();
            System.exit(1);
        }

        try {
            audioStream = AudioSystem.getAudioInputStream(soundFile);
        } catch (Exception e){
            e.printStackTrace();
            System.exit(1);
        }

        audioFormat = audioStream.getFormat();

        DataLine.Info info = new DataLine.Info(SourceDataLine.class, audioFormat);
        try {
            sourceLine = (SourceDataLine) AudioSystem.getLine(info);
            sourceLine.open(audioFormat);
        } catch (LineUnavailableException e) {
            e.printStackTrace();
            System.exit(1);
        } catch (Exception e) {
            e.printStackTrace();
            System.exit(1);
        }

        sourceLine.start();

        int nBytesRead = 0;
        byte[] abData = new byte[BUFFER_SIZE];
        while (nBytesRead != -1) {
            try {
                nBytesRead = audioStream.read(abData, 0, abData.length);
            } catch (IOException e) {
                e.printStackTrace();
            }
            if (nBytesRead >= 0) {
                @SuppressWarnings("unused")
                int nBytesWritten = sourceLine.write(abData, 0, nBytesRead);
            }
        }

        sourceLine.drain();
        sourceLine.close();
    }
}

4) Из Main класса проиграйте звук:

public class Main {
    public static void main(String[] args) {
        System.out.println("Start...");

        new MakeSound().playSound("bip.wav");

        System.out.println("main() finished!");
    }
}

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

6) Нужно выполнить этот код из другого потока, тогда основная программа продолжит исполнение команд дальше - а аудиофайл проиграется из метода playSound(...) выполняемого параллельно - в параллельном вычислительном потоке:

public class Main {
    public static void main(String[] args){
        System.out.println("Start...");

        new Thread(() -> {
            new MakeSound().playSound("bip.wav");
            System.out.println("audio file finished!");
        }).start();

        System.out.println("main() finished!");
    }
}

Заметьте что теперь main() finished! печатается в консоль сразу после начала проигрывания музыки (не дожидаясь ее окончания), а это значит что основная программа продолжает выполняться независимо от проигрывания звука, ведь этим занимается специально созданный независимый поток.

[Конференция] Положение о проекте, критерии, документация

Wed, 05 Mar 2025 22:02:39 +0000

Документы:

Критерии оценивания проекта (здесь в т.ч. рассказано про отчет)
Чек-лист оценивания проекта (кроме этого - еще раз проверьте что вы правильно прочитали условие задачи!)
Положение о проекте

Обязательно обратите внимание на критерии и чек лист! Особенно на секцию “Реализация программы” и “Оформление презентации” в чек-листе оценивания проекта.

Если вы делаете типовой проект - обязательно так же обратите внимание на секцию “Оформление отчета” в чек листе!

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

Ключевые моменты

К защите творческого проекта требования слабее чем к типовому проекту (геометрии), в частности не требуется “документация”, достаточно предоставить:

Презентацию (рекомендую использовать Google презентации, обязательно pdf-формат)
Дополнительный плюс если исходники опубликованы на github (инструкция)
Еще дополнительный плюс если на gtibhu опубликован запускаемый jar-файл (инструкция)

В организационном плане:

Вам надо будет презентовать проект примерно за пять минут
Все будет проходить в апреле
Сначала с помощью презентации рассказываете что за проект вы хотели сделать
Затем рассказываете как реализовали интересные детали, какие были сложности, что получилось в итоге
Запускаете и демонстрируете результат проекта
Отвечаете на вопросы комиссии
Качество кода в случае творческого проекта на оценку не влияет

[Презентация] Где рисовать иллюстрации для презентации

Wed, 05 Mar 2025 21:05:39 +0000

В какой программе рисовать иллюстрации?

1) Если вы привыкли и много рисовали в Photoshop или другой программе, то возможно это лучший вариант - т.к. за счет опыта вы этот инструмент используете быстро и эффективно

2) Если нужна какая-то специализированная иллюстрация вроде UML-диаграммы - то можно поискать онлайн редактор по запросу вроде UML diagram editor и сделав там нужную иллюстрацию - вытащить ее ввиде картинки

3) В целом в будущем если вам надо много рисовать (например для презентаций или лекций) - мне удобно и нравится использовать планшет (я использую XP Pen Deco 01 v2 + Microsoft Whiteboard как программу рисования)

4) В остальных случаях я использую Paint.net т.к. это простая и приятная программа в которой есть поддержка слоев и есть фигуры вроде прямых/стрелочек/прямоугольников и т.п.

Paint.net

Скачать Paint.net можно здесь.

Ниже есть общие идеи о самых удобных на мой взгляд инструментах:

Использование слоев
Выделение прямоугольником и волшебной палочкой
Рисование кисточкой и рисование геометрии (прямоугольники/овалы)
Рисование прямых, горизонтальных/вертикальных прямых и стрелочек
Как откатить назад случайное изменение
Как сохранить результат

Использование слоев

В Paint.net есть поддержка слоев, это очень удобный инструмент позволяющий разбить вашу картинку на логические слои, например на:

Фоновая картинка (например просто заливка одним цветом)
Система координат (оси, подписи X и Y)
График одной функции
График другой функции
Текстовые комментарии с указанием мест интереса (например точки пересечения графиков)

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

1) Сняв/нажав эту галку вы выключите/включите отображение слоя (может быть удобно временно визуально спрятать слой)

2) Этой кнопкой можно добавить новый слой для нового логического объекта

3) Этой кнопкой слой можно удалить целиком если стало ясно что этот слой с данными оказался не нужен

4) Этой кнопкой слой можно скопировать если хочется например сделать копию графика но немного сместить его вниз/вбок

5) Эта кнопка вклеивает слой намертво в слой ниже (т.е. объединяет их в один слой)

6) Слои рисуются один поверх другого, поэтому между ними важен порядок - эта кнопка позволяет поднять слой выше на поверхность

7) Эта кнопка опускает слой ниже (глубже)

Инструменты: выделение

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

Обратите внимание на выделенные красным прямоугольником четыре инструмента слева:

Выделение прямоугольником
Выделение произвольной формой (так называемое лассо, нужно просто очертить контур мышкой)
Выделение овалом
Выделение волшебной палочкой

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

Обратите внимание что выделилась так же часть пикселей самой машины (рядом с фарой сверху слева и на багажнике снизу).

Это можно поправить ослабив чувствительность волшебной палочки - просто сдвиньте Tolerance волшебной палочки к меньшему значению (см. на скрине сверху):

Теперь когда выделены только пиксели фона - нажмите кнопку Delete и теперь фон прозрачный и осталось только сохранить в формате png (но не jpeg т.к. в нем не сохраняется прозрачность):

Инструменты: рисование

Базовые инструменты рисования:

1) Кнопка заливки позволяет по клику заполнить все пиксели в выделенной зоне одним выбранным цветом. Например если вы хотите залить весь фон одним цветом - выделите его (прямоугольником или волшебной палочкой) и кликните этим инструментом заливки (предварительно выбрав нужный цвет).

2) Кисточка позволяет рисовать (с произвольной толщиной - выбор толщины вверху - Brush size)

3) Карандаш не очень удобен, но он позволяет нарисовать тонкий контур

4) Иногда удобно добавить текст - например чтобы подписать оси на графике или что-то еще

5) Удобно рисовать разные геометрические примитивы - прямоугольники, овалы

Инструменты: как рисовать прямые и стрелки

Чтобы нарисовать стрелку нужно выбрать инструмент рисования геометрических примитивов и дальше настроить:

1) Выбираем инструмент рисования прямых и кривых

2) Указываем толщину нашей прямой

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

Обратите внимание что иногда вам может быть нужно нарисовать строго горизонтальную или вертикальную прямую - в таком случае пока вы зажали мышку чтобы указать начало и конец прямой - зажмите SHIFT, тогда прямая будет “приклеиваться” в горизонтали/вертикали (и другим направлениям с шагом в 15 градусов).

Как откатить назад

Если вы случайно нарисовали что-то не то:

Ctrl+Z отменит последнее действие (можно нажимать несколько раз)
Ctrl+Y обратно выполнит только что отмененное последнее действие (т.е. по сути движение по изменениям вперед в будущее, т.е. удобно когда вы случайно отменили действие через Ctrl+Z и теперь передумали)

Как сохранить результат

Не забывайте сохранять результат:

1) Используйте либо .pdn формат если вы может быть захотите продолжить работу над картинкой позже - это формат который поддерживается только в Paint.net и в таком случае в файле будет сохранено разделение картинки на слои, так что позже можно будет продолжить работу со слоями независимо

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

Поэтому если у вас больше одного слоя и вы сохраняете в .png/.jpg - то появится предупреждение что картинка будет Flatten, т.е. расплющена - т.е. все слои будут объединены в один:

[Презентация] Примеры как часто стоит улучшить слайд

Wed, 05 Mar 2025 21:04:40 +0000

Основная идея:

Слушают ваш рассказ (текст и слова доносятся голосом)
Слайды помогают легче/правильнее понять ваш рассказ благодаря визуальному сопровождению

Отсюда вывод - текста на слайдах почти не должно быть, т.к. слушатели и так слышат текст.

Максимум что можно себе позволить на слайдах кроме картинок и иллюстраций - тезисный текст разбитый на пункты.

При этом все что можно объяснить и донести до зрителя через визуал - лучше показывать без текста (например геометрические иллюстрации - отличная идея).

[Презентация] Как сделать хорошую презентацию

Wed, 05 Mar 2025 21:03:39 +0000

Что должно быть в презентации?

Если вы делаете типовой проект - то делаете презентацию по чек-листу оценивания проекта (секция Оформление презентации).

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

1) Формулы должны быть красивыми

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

2) Не должно быть много текста

Не должно быть слайдов где очень много текста. Пример ужасного слайда:

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

3) Визуальное сопровождение рассказа

Слайд должен визуально иллюстрировать и сопровождать ту небольшую часть рассказа которая сейчас произносится.

Например вы начали рассказывать про врагов в вашей игре - пчел, которых главный персонаж (медведь) очень боится - в этот момент покажите слайд где показано как выглядят эти пчелы, тогда ваш рассказ сразу будет легко воспринимать + слушатели лучше поймут что у вас в игре происходит:

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

4) Каждый слайд должен быть с картинкой

Звучит как странное правило, но это хороший ориентир. Даже в конце презентации на слайде “Спасибо за внимание, вопросы?” - стоит добавить картинку, например:

скриншот с игрой
вашу фотографию
что-нибудь красивое - например Единорога:

5) Разбивка тяжелых слайдов на этапы

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

Например представьте что хочется рассказать математическую модель про хранение персонажа ввиде прямоугольника (ширина и высота) + координаты персонажа (\(x\), \(y\)) + скорость. Расскажите это поэтапно в несколько слайдов! Каждый следующий слайд - пусть просто визуально добавляет то что вы начали в этот момент рассказывать:

Т.е. вы пролистываете эти 4 слайда один за другим по мере того как рассказываете:

1) Математической моделью персонажа игрока является прямоугольник некоторой ширины и высоты

2) У персонажа хранятся две переменные - координаты угла прямоугольника (хорошо было бы их и на рисунке справа добавить)

4) Чтобы описать движение персонажа - есть две переменные хранящие проекцию вектора скорости на обе оси (хорошо было бы этот вектор и его проекции тоже на рисунке нарисовать - это отлично бы сопроводило рассказ визуальной интуитивной подсказкой)

5) Для того чтобы движение персонажа было плавным - важно двигать персонажа каждый раз на вектор скорости домноженный на прошедшее с предыдущего кадра время

Как сделать такие слайды?

1) Сделать полный слайд со всеми этапами (пусть есть 5 этапов)

2) Сделать его копии (через Ctrl+C + Ctrl+V в секции слева) так чтобы этот слайд повторился 5 раз

3) В каждой копии удалить лишнее этапы:

Если же хочется сделать такие картинки, то я использую для этой задачи Paint.NET - он простой и удобный и в нем есть слои, они позволяют рисовать поверх, а затем “прятать” то что было нарисовано сверху. Это позволяет мне нарисовать слой за слоем все иллюстрации, а затем сохранить все поэтапные версии иллюстрации и положить их на слайды.

Примеры презентаций

[Проект] Как фиксировать камеру на игроке если игровой мир - большой?

Wed, 13 Nov 2024 21:02:39 +0000

Представим что у вас в игре есть некий мир (например некая карта замка и его окрестностей). Игровой персонаж - Единорог - исследует и взаимодействует с этим миром, делая его лучше:

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

Поэтому на иллюстрации:

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

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

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

Т.е. нам осталось придумать функцию \(f(x_{world}, y_{world}) = ... = (x_{screen}, y_{screen})\), такую что:

Игрок обязательно должен быть в центре экрана, т.е. \(f(x_0, y_0) = (w/2, h/2)\)
Масштаб может быть произвольным (возможно он меняется - в зависимости от скорости движения персонажа, или от колесика мышки), поэтому давайте введем некий коэффициент \(s\) (от слова scale = масштаб), он будет говорить сколько пикселей в одном метре

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

Упражнение Попробуйте сами вывести формулу которая удовлетворяет двум вышеописанным свойствам

Итак, мы хотим чтобы в метре было \(s\) пикселей и чтобы функция переводила координаты игрока в центр экрана, т.е. \(f(x_0, y_0) = (w/2, h/2)\).

Давайте выведем общий вид формулы:

1) Во-первых, переведем изначальные метровые координаты в пиксели (т.е. \(s \cdot x, s \cdot y\))

2) Во-вторых, учтем что мы хотим сместить координаты на некие \((x_{shift}, y_{shift})\) так чтобы игрок оказался в центре экрана, т.е.:

\[f(x_0, y_0) = (w/2, h/2) \implies (s \cdot x_0 + x_{shift}, s \cdot y_0 + y_{shift}) = (w/2, h/2) \implies (x_{shift}, y_{shift}) = (w/2 - s \cdot x_0, h/2 - s \cdot y_0)\]

Т.о. формула для пересчета метровых координат мира в пиксельные координаты экрана вокруг игрока:

\[f(x_{world}, y_{world}) = (s \cdot x_{world} + w/2 - s \cdot x_0, s \cdot y_{world} + h/2 - s \cdot y_0) = (x_{screen}, y_{screen})\]

Где:

\(x_0, y_0\) - координаты игрока в мировых координатах
\(s\) - произвольно выбранный масштаб - сколько пикселей в метре
\(w, h\) - размеры экрана в пикселях

Как это выразить в коде?

Сделайте методы int toScreenX(int worldX) и int toScreenY(int worldY) в классе откуда будет доступ до:

размера окна (\(w, h\))
координат игрока в мировых координатах (\(x_0, y_0\))

Реализуйте в этих методах формулы которые переводят соответственно из системы координат мира в систему координат экрана с учетом того какого размера окно и где находится игрок.

Теперь в месте где вызывается отрисовка предмета (например печеньки) - выполняйте отрисовку картинки с учетом данных преобразований (вызвав эти методы toScreenX и toScreenY).

[Java] Добавляем кнопки

Wed, 13 Nov 2024 21:01:39 +0000

Что если нам надо добавить кнопки в нашу программу? Например в Paint мы можем хотеть добавить кнопки выбора режима рисования - овалы по кликам или росчерк по движению мыши, или добавить кнопку очистки экрана (чтобы начать рисовать заново).

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

Что требуется от кнопки?

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

Пример как это может выглядеть:

1) Создаем базовое окно для экспериментов

Давайте начнем с того чтобы сделать базовое окно подобное тому что было сделано в прошлом задании про Paint:

1.1) Создаем класс MyFrame:

import javax.swing.*;
import java.awt.*;
import java.awt.image.BufferStrategy;

public class MyFrame extends JFrame {
    public MyFrame() {
        setSize(640, 480);
        setDefaultCloseOperation(EXIT_ON_CLOSE);

        setVisible(true); // делаем окно видимым только после того как оно полностью готово
    }

    @Override
    public void paint(Graphics g) {
        BufferStrategy bufferStrategy = getBufferStrategy(); // Обращаемся к стратегии буферизации
        if (bufferStrategy == null) { // Если она еще не создана
            createBufferStrategy(2); // то создаем ее
            bufferStrategy = getBufferStrategy(); // и опять обращаемся к уже наверняка созданной стратегии
        }
        g = bufferStrategy.getDrawGraphics(); // Достаем текущую графику (текущий буфер) - это наш холст для рисования (спрятанный от глаз пользователя)
        g.clearRect(0, 0, getWidth(), getHeight()); // Очищаем наш холст (ведь там остался предыдущий кадр)

        // Выполняем рисование:
        g.drawOval(200, 100, 20, 10); // рисуем тестовый овал чтобы убедиться что все работает

        g.dispose();                // Освободить все временные ресурсы графики (после этого в нее уже нельзя рисовать)
        bufferStrategy.show();      // Сказать буферизирующей стратегии отрисовать новый буфер (т.е. поменять показываемый и обновляемый буферы местами)
    }
}

1.2) Создаем окно в main-функции:

public class Main {
    public static void main(String[] args) throws InterruptedException {
        MyFrame frame = new MyFrame();
        while (true) {
            frame.repaint();

            // давайте отрисовывать окно не чаще чем раз в 10 миллисекунд - т.е. не чаще чем 100 раз в секунду
            Thread.sleep(10); // для этого ждем 10 миллисекунд прежде чем вновь вызвать frame.repaint();
            // это полезно для того чтобы не грузить процессор компьютера слишком сильно
        }
    }
}

2) Создаем класс Button

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

поля x, y - координаты верхнего левого угла (в пикселях)
поля width, height - ширина и высота (в пикселях)
поле image - картинка (которую нужно вписать в указанный прямоугольник)
метод paint(...) - кнопка должна уметь рисовать себя
метод onMouseHit(...) - кнопка должна уметь проверять “попал ли клик мышки по мне” и если мышка попала - реагировать на это (как минимум провоцируя какое-то событие, но может быть еще прожимаясь вглубь под тяжестью нажатия)

2.1) Создайте класс Button с полями x, y, width, height.

2.2) Создайте метод paint(...) который рисует кнопку в переданной извне графике Graphics g (т.е. через аргумент функции paint(...)). Пока что давайте просто нарисуем прямоугольник.

2.3) Создайте метод onMouseHit(int mouseX, int mouseY) который проверяет правда ли что переданные через аргументы координаты клика мышки попали в кнопку. Если попали - то пусть этот метод выведет в консоль “Button hit!”.

3) Создаем объект этой кнопки в окне

Теперь нам надо создать экземпляр этой кнопки. Т.е. создать конкретный объект-кнопку в окне.

3.1) Создайте поле в окне MyFrame которое будет хранить кнопку, т.е. объект только что созданного класса Button.

3.2) Инициализируйте это поле (создав объект через вызов конструктора - ... = new Button(...);) в конструкторе окна по каким-нибудь координатам. Сделайте это до setVisible(true).

3.3) В отрисовке окна (т.е. в методе paint(...) в MyFrame) добавьте отрисовку кнопки - вызвав ее метод отрисовки.

3.4) Запустите программу - убедитесь что кнопка (прямоугольник) рисуется там где вы бы ожидали с учетом ее координат.

4) Добавляем обработку мышки

Теперь надо добавить обработку нажатий мышки. Это делается так же как и раньше, но теперь мы не хотим сразу что-то делать при клике мышки - а хотим просто сообщить об этом кнопке.

И кнопка в свою очередь проверит - а попало ли нажатие мышки в кнопку? Если да, то кнопка на это будет реагировать.

4.1) MyFrame должен заявить себя как “слушатель мышки”, т.е. реализовать интерфейс: implements MouseListener. А значит и реализовать в себе 5 методов - mouseClicked(...) и прочие.

4.2) В методе который обрабатывает событие нажатия мышки оповестите об этом кнопку - т.е. вызовите ее метод onMouseHit(...). Обратите внимание что этому методу надо сообщить где именно мышка нажала - передав два аргумента - координаты клика мышки.

4.3) Окно должно добавить себя в список “почетных слушателей мышки” - в конструкторе добавьте строчку addMouseListener(this);.

4.4) Запустите программу - убедитесь что при клике мышкой в консоли появлется “Button hit!” тогда и только тогда когда мышка попала в кнопку.

5) Добавляем картинку для кнопки

5.1) Вбейте в гугл “gui button image” и найдите картинку которая вам по душе, или например скачайте эту:

5.2) Создайте папку data в проекте рядом с папкой src как мы уже это делали раньше.

5.3) Создайте в классе кнопки поле хранящее картинку кнопки - BufferedImage image; и инициализируйте это поле в конструкторе картинки, т.е. через ImageIO.read(new File("data\\button.png")) (тоже так же как раньше).

5.4) Поправьте рисование кнопки - теперь надо рисовать картинку, т.е. используя g.drawImage(...) (напоминаю что последний аргумент этого метода observer нас не интересует, можно вместо него передать отстутствующий объект - null).

5.5) Запустите программу - убедитесь что кнопка рисуется во всей красе и клики по ней все еще работают.

6) Добавляем более интересную реакцию на кнопку

Что если мы хотим чтобы нажатие на кнопку делало что-то интересное?

Например перезапускало уровень или выбирало персонажа (тоже своего рода кнопка) чтобы начать диалог с ним. Или кнопкой может быть одна из фраз в диалоге которую может выбрать наш персонаж.

Давайте для примера решим что у нас есть некий счетчик - поле в окне которое хранит число, изначально это число равно \(0\). И пусть каждое нажатие на кнопку увеличивает этот счетчик на \(1\) и выводит новое значение в консоль.

6.1) Добавьте в окно поле int counter;, в конструкторе окна инициализируйте это поле нулем.

6.2) Теперь кнопка должна уметь делать произвольное действие при нажатии на нее. По сути “действие” стало новым параметром кнопки, в дополнение к ее ширине и высоте!

6.3) Создайте интерфейс ButtonAction - это делается так же как создание нового класса, но в момент когда вы вводите имя ButtonAction - внизу выберите Interface.

6.4) В этом интерфейсе мы укажем какие методы требуются от любого кто заявит что реализовывает этот интерфейст. От любого кто заявит что он “является ButtonAction”. В нашем случае мы требуем лишь одного - наличия метода void onClick(); - это метод который будет вызываться когда кнопка нажата.

6.5) Теперь в кнопке мы можем добавить новое поле ButtonAction action; которое будет хранить “как реагировать на нажатие”. По сути это объект который может делать ровно одну вещь - выполнить метод onClick(), и кнопка попросит его об этом в момент когда мышка кликнет по кнопке.

6.6) Это поле надо чем-то инициализировать - добавьте новый аргумент в конструктор кнопки (наравне с x, y, width, height), пусть тот кто создает кнопку сам решает какой ButtonAction привязан к этой кнопке. Т.е. по сути - какое действие нужно делать при нажатии на эту кнопку.

6.7) Поправьте метод onMouseHit(...) - теперь нам надо не писать в консоль сообщение, а вызывать наше поле-реакцию, чтобы уже он сделал то что надо в ответ на нажатие, т.е. нам надо теперь вызывать action.onClick();.

6.8) Теперь там где кнопка создавалась (где вызывался ее конструктор через new Button(...) из конструктора окна) - нужно добавить еще один - пятый - аргумент - “действие при нажатии на кнопку”, добавьте запятую сразу после ширины и высоты кнопки и начните печатать new ButtonAction - IDEA предложит вам подсказкой - нажмите Enter, получится что-то навроде:

button = new Button(..., new ButtonAction() { // это создание объекта реализующего интерфейс ButtonAction
    @Override
    public void onClick() { // а значит вам надо прямо тут указать какая реализация у его метода onClick()
        
    }
});

6.9) Добавьте в этом методе onClick() что-то свое, например System.out.println("My onClick()!!!");.

6.10) Запустите программу, убедитесь что кнопка рисуется и если кликнуть в нее - появляется “My onClick()!!!”.

6.11) Давайте вернемся к тому что кнопка должна увеличивать на \(1\) счетчик int counter; который объявлен в окне и выводит его в консоль. Попробуйте это написать в методе onClick() который только что создали.

6.12) Запустите программу, убедитесь что кнопка рисуется и что нажатие на кнопку выводит возрастающие числа от \(1\) и дальше - т.е. значения увеличенного счетчика.

7) Добавим еще одну кнопку

А теперь то ради чего мы мучались! Давайте добавим еще одну кнопку, которая будет увеличивать этот же счетчик counter но на этот раз сразу на \(10\) (и тоже сразу выводить новое значение в консоль).

7.1) Создайте в окне новое поле Button button2;

7.2) Инициализируйте ее в конструкторе окна: button2 = new Button(...);, но с отличиями от первой кнопки - по другим координатам и счетчик теперь нужно увеличивать на \(10\).

7.3) Запустите программу. Появилась ли новая кнопка? Нет? Но мы ведь забыли добавить ее в отрисовку окна - поправьте. Пример результата:

7.4) Запустите программу. Появилась ли новая кнопка? Срабатывают ли нажатия на нее? Нет? Но мы ведь забыли добавить ее проверку “попала ли мышка” - поправьте, окно при событии “мышка нажала” должно оповещать обе кнопки об этом.

7.5) Запустите программу, все должно работать.

7.6) Заметьте что для будущих добавлений новых кнопок можно избавиться от шага 7.3) и 7.4) если хранить кнопки не отдельными полями - а списком ArrayList<Button> buttons;.

7.7) Тогда в конструкторе окна кнопки вместо создания и сохранения в поле - будут добавляться в этот список кнопок:

buttons = new ArrayList<>();
buttons.add(new Button(200, 100, 250, 50, new ButtonAction() {
    @Override
    public void onClick() {
        counter += 1;
        System.out.println(counter);
    }
}));
buttons.add(new Button(..., new ButtonAction() {
    ...
}));

7.8) А отрисовка всех кнопок будет выглядеть так:

for (Button button : buttons) {
    button.paint(g);
}

7.9) А запуск проверки каждой кнопкой “не попала ли в меня мышка” - так:

for (Button button : buttons) {
    button.onMouseHit(e.getX(), e.getY());
}

7.10) Убедитесь что обе кнопки все еще работают и реагируют на мышку как и раньше.

8) Делаем красиво! Увеличивание кнопок!

Давайте теперь сделаем так чтобы кнопка становилась больше когда мышка над ней нависает.

Чтобы увеличивать кнопку когда мышка сверху, нам достаточно в кнопке хранить флажок “мышка сейчас над нами или нет”, при каждом движении мышки - обновлять этот флажок проверяя “правда ли мышка над нами?” И при отрисовке учитывать этот флаг - если он выставлен в true то нужно рисовать кнопку чуть больше чем обычно.

8.1) Добавляем в кнопку флаг boolean isMouseOver;, в конструкторе мышки выставляем этот флаг в false (в момент создания кнопки мышка не над нею).

8.2) Добавляем в кнопку метод void onMouseMove(int mouseX, int mouseY) - в нем проверяем, если координаты в которых теперь находится мышка - внутри кнопки - то выставляем флажок isMouseOver = true; - иначе выставляем isMouseOver = false;.

8.3) Подправляем логику отрисовки кнопки - если флаг isMouseOver выставлен в true то надо рисовать кнопку чуть большего размера.

8.4) Заявляем что наше окно implements MouseMotionListener - чтобы следить за движениями мышки.

8.5) Реализуем методы mouseDragged и mouseMoved, в обоих методах нам надо оповестить все кнопки о движении мышки:

for (Button button : buttons) {
    button.onMouseMove(e.getX(), e.getY());
}

8.6) Не забываем зарегистрировать окно как “слушателя движений мышки” - в конструкторе надо добавить addMouseMotionListener(this);.

8.7) Проверьте что программа все еще работает как надо, но что теперь кнопки еще и увеличиваются когда мышка над ними!

9) Делаем красиво! Уменьшение кнопок!

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

Т.е. вместо того чтобы просто оповестить кнопку о нажатии мышкой мы хотим:

когда кнопка мышки нажимается (т.е. mousePressed(MouseEvent e)) - сообщаем об этом кнопке чтобы она могла выставить свой флаг “меня нажали но еще не отпустили”.
когда кнопка мышки отпускается (т.е. mouseReleased(MouseEvent e)) - сообщаем об этом кнопке чтобы она могла сбросить свой флаг “меня нажали но еще не отпустили”, ведь ее только что отпустили. Но при этом кнопка НЕ ВЫЗЫВАЕТ action.onClick();, ведь обработка кнопки уже проихошла при опускании кнопки мыши.