День 9: Заметка 1: Анимация загрузки на RGB матрице с Arduino
🤚Всем привет!
В прошлом сообщении я описал процесс работы с изображениями, соответственно, теперь можно легко делать различные анимации.
🎯 В любом проекте можно встретить задачу отображения прогресса выполнения длительной операции, например, загрузка данных.
На момент загрузки обычно показывают прогресс бар, который может быть круговым (обычно это крутилка в центре экрана) или линейным.
✏️ Вчера я отрисовал всю необходимую графику, чтобы реализовать линейный прогресс бар.
🤟 Получилось как и все на
Алгорим следующий:
👉 готовим графические изображения для анимации, конвертируем их в Си массивы данных;
👉 графические изображения должны собой представлять набор последовательно изменяющихся картинок, мы их будем отрисовывать друг за другом, чтобы визуально добавить некоторую динамику;
👉 в коде приложения для Arduino пишем метод, который будет в цикле пробегать по этому массиву изображений и выводить каждую из картинок на экран.
По расходованию памяти этот вариант накладный. Все-таки во флеш памяти приходится держать все изображения. Есть ли варианты избежать этого? Да, но об этом в другой раз.
📷 Пример на видео (в следующем сообщении).
#Arduino
#RGBMatrix
🤚Всем привет!
В прошлом сообщении я описал процесс работы с изображениями, соответственно, теперь можно легко делать различные анимации.
🎯 В любом проекте можно встретить задачу отображения прогресса выполнения длительной операции, например, загрузка данных.
На момент загрузки обычно показывают прогресс бар, который может быть круговым (обычно это крутилка в центре экрана) или линейным.
✏️ Вчера я отрисовал всю необходимую графику, чтобы реализовать линейный прогресс бар.
🤟 Получилось как и все на
RGB матрице oldschool -но, но в этом есть свой шарм. Лично мне нравится.Алгорим следующий:
👉 готовим графические изображения для анимации, конвертируем их в Си массивы данных;
👉 графические изображения должны собой представлять набор последовательно изменяющихся картинок, мы их будем отрисовывать друг за другом, чтобы визуально добавить некоторую динамику;
👉 в коде приложения для Arduino пишем метод, который будет в цикле пробегать по этому массиву изображений и выводить каждую из картинок на экран.
По расходованию памяти этот вариант накладный. Все-таки во флеш памяти приходится держать все изображения. Есть ли варианты избежать этого? Да, но об этом в другой раз.
📷 Пример на видео (в следующем сообщении).
#Arduino
#RGBMatrix
👍1
Code Every Day 🚀
День 9: Заметка 1: Анимация загрузки на RGB матрице с Arduino 🤚Всем привет! В прошлом сообщении я описал процесс работы с изображениями, соответственно, теперь можно легко делать различные анимации. 🎯 В любом проекте можно встретить задачу отображения прогресса…
Media is too big
VIEW IN TELEGRAM
Пример работы анимации прогресс бара
🔥1
Code Every Day 🚀
День 9: Заметка 1: Анимация загрузки на RGB матрице с Arduino 🤚Всем привет! В прошлом сообщении я описал процесс работы с изображениями, соответственно, теперь можно легко делать различные анимации. 🎯 В любом проекте можно встретить задачу отображения прогресса…
sketch_aug1a_animations.zip
6.9 KB
Код примера
👍1
Media is too big
VIEW IN TELEGRAM
День 10: Заметка 1: reveal circular анимация для RGB матрицы
🤟 Хай, Кодерс!
👉 Сегодня хотел показать пример реализации
Реализовать данный вид анимации не составляет труда.
👉 В основе реализации лежит использование метода отрисовки и заливки круга из библиотеки для работы с
По-моему, выглядит симпатично.
📷 Пример на видео.
#Arduino
#RGBMatrix
🤟 Хай, Кодерс!
👉 Сегодня хотел показать пример реализации
reveal circular анимации заливки.Реализовать данный вид анимации не составляет труда.
👉 В основе реализации лежит использование метода отрисовки и заливки круга из библиотеки для работы с
RGB матрицей RGBmatrixPanel drawCircle(int x, int y, int r, uint16_t color);.По-моему, выглядит симпатично.
📷 Пример на видео.
#Arduino
#RGBMatrix
🔥1
Code Every Day 🚀
День 10: Заметка 1: reveal circular анимация для RGB матрицы 🤟 Хай, Кодерс! 👉 Сегодня хотел показать пример реализации reveal circular анимации заливки. Реализовать данный вид анимации не составляет труда. 👉 В основе реализации лежит использование метода…
День 11: Заметка 1: Код примера reveal circular анимации
👨💻Код примера
#Arduino
#RGBMatrix
👨💻Код примера
// тип анимации
class Direction {
public:
static const int TYPE_OUT = 0;
static const int TYPE_IN = 1;
static bool isTypeIn(int value) {
return value == Direction::TYPE_IN;
}
static bool isTypeOut(int value) {
return value == Direction::TYPE_OUT;
}
};
// логика анимации
void revealCircular(
int x, int y, // координаты центар
int r, // радиус заливки круга
int direction, // 0 - расширение, 1 - сужение
uint16_t color
) {
if (Direction::isTypeOut(direction)) {
for (int i = 0; i < r; ++i) {
drawCircle(x, y, i, color);
}
} else if (Direction::isTypeIn(direction)) {
for (int i = r; i > 0; --i) {
drawCircle(x, y, i, color);
}
}
}
// вывод на матрицу круга
void drawCircle(
int x, int y,
int r,
uint16_t color
) {
matrix->drawCircle(x, y, r, color);
matrix->swapBuffers(true);
}
#Arduino
#RGBMatrix
❤1
Media is too big
VIEW IN TELEGRAM
День 11: Заметка 2: Перемещение объектов на RGB матрице, интерполяторы
🤟 Хай, Кодерс!
👉 Сегодня утром проснулся и подумал, что сегодня отличный день, чтобы рисовать точки.
😎 Сказано-сделано!
🎯 Для будущих проектов потребуется перемещать объекты на
👉
Описывается формулой
👉
Описывается формулой
👉
Описывается формулой
👉
Эмулирует скачки, как будто мяч скачет
Размера матрицы не хватило, чтобы наглядно продемонстрировать динамику изменения положения точек.
🤔 Поработаю еще над этим.
#Arduino
#RGBMatrix
🤟 Хай, Кодерс!
👉 Сегодня утром проснулся и подумал, что сегодня отличный день, чтобы рисовать точки.
😎 Сказано-сделано!
🎯 Для будущих проектов потребуется перемещать объекты на
RGB панели, например, в играх. Нужно набросать прототип перемещения точек. Помимо этого для реалистичности движения решил реализовать интерполяторы, хотя бы самые распространные.👉
LinearInterpolatorОписывается формулой
x = t, t - время👉
AccelerateInterpolatorОписывается формулой
x = t^(2f), добавляет ускорение перемещению👉
DecelerateInterpolatorОписывается формулой
x = 1 – (1 – t)^(2f), добавляет замедление перемещению👉
BounceInterpolatorЭмулирует скачки, как будто мяч скачет
Размера матрицы не хватило, чтобы наглядно продемонстрировать динамику изменения положения точек.
🤔 Поработаю еще над этим.
#Arduino
#RGBMatrix
👍2
Code Every Day 🚀
День 11: Заметка 2: Перемещение объектов на RGB матрице, интерполяторы 🤟 Хай, Кодерс! 👉 Сегодня утром проснулся и подумал, что сегодня отличный день, чтобы рисовать точки. 😎 Сказано-сделано! 🎯 Для будущих проектов потребуется перемещать объекты на RGB панели…
👉 Примечание
Размера матрицы не хватило, чтобы наглядно продемонстрировать динамику изменения положения точек. Для
Размера матрицы не хватило, чтобы наглядно продемонстрировать динамику изменения положения точек. Для
2, 3, 4 точек сделал возможность цикла движения в несколько полетов от края до края панели, потом все сбрасывается и точка снова начинает движение слевого края панели.День 12: Заметка 1: Пример кода интерполяторов
🤟Хай, Кодерс!
Сегодня приводил код, который отвечает за перемещение объектов на RGB матрице в порядок, чтобы было удобно с этим работать.
В итоге основные моменты программы опишу в рамках отдельных сообщений. Похоже, что получиться дичь, но так как программировать надо каждый день, а больше я ничего не успел сделать за сегодня, то приведу что есть.
Сами интерполяторы выделелил в базовый класс, с возможностью переопределения методов рассчета координат:
#Arduino
#RGBMatrix
🤟Хай, Кодерс!
Сегодня приводил код, который отвечает за перемещение объектов на RGB матрице в порядок, чтобы было удобно с этим работать.
В итоге основные моменты программы опишу в рамках отдельных сообщений. Похоже, что получиться дичь, но так как программировать надо каждый день, а больше я ничего не успел сделать за сегодня, то приведу что есть.
Сами интерполяторы выделелил в базовый класс, с возможностью переопределения методов рассчета координат:
class Interpolator {
public:
static const int TYPE_CONSTANT = 1;
static const int TYPE_LINEAR = 2;
static const int TYPE_ACCELERATE = 3;
static const int TYPE_BOUNCE = 4;
public:
int type = Interpolator::TYPE_CONSTANT;
virtual int calculateX(double time) { return 1; }
virtual int calculateY(double time) { return 1; }
};
class LinearInterpolator : public Interpolator {
public:
int type = Interpolator::TYPE_LINEAR;
virtual int calculateX(double time) { return time; }
};
class AccelerateInterpolator : public Interpolator {
public:
int type = Interpolator::TYPE_ACCELERATE;
virtual int calculateX(double time) {
return (int) pow(time, 2 * 0.8);
}
};
class BounceInterpolator : public Interpolator {
public:
int type = Interpolator::TYPE_BOUNCE;
virtual int calculateX(double time) {
double result = 0;
if (time < 0.31489) {
result = 8 * pow(1.1226 * time, 2);
} else if (0.31489 <= time && time < 0.65990) {
result = 8 * pow(1.1226 * time - 0.54719, 2) + 0.7;
} else if (0.65990 <= time && time < 0.85908) {
result = 8 * pow(1.1226 * time - 0.85260, 2) + 0.9;
} else if (0.85908 <= time) {
result = 8 * pow(1.1226 * time - 1.04350, 2) + 0.95;
}
return (int) result;
}
};
#Arduino
#RGBMatrix
👍1
Логические модели объектов, которые отрисовываются на
позиция на экране
Соответственно, основная программа содержит список
Есть специальный метод для перемещения объекта, который меняет координаты объекта с использованием интерполяторов.
RGB матрице, описываются свойствами:позиция на экране
(x,y) координаты, рамер прямоугольной области для заливки объекта - size, цвет заливки и набор дополнительных параметров в отдельной модели RenderParams.;
class MovableSprite {
public:
MovableSprite(
int x,
int y,
int size,
uint16_t color
) {
_x = x;
_y = y;
_size = size;
_color = color;
_renderParams = new RenderParams();
};
int x() { return _x; }
int y() { return _y; }
int size() { return _size; }
uint16_t color() { return _color; }
void setX(int x) { _x = x; }
void setY(int y) { _y = y; }
void setColor(uint16_t color) { _color = color; }
RenderParams* getRenderParams() {
return _renderParams;
}
String toString() {
return String(x()) + "," + String(y()) + "," + String(size()) + "," + String(color());
}
void move(int dx, int dy) {
_x += dx;
_y += dy;
}
private:
int _x, _y;
int _size;
uint16_t _color;
RenderParams *_renderParams;
}
Соответственно, основная программа содержит список
MovableSprite, отрисовывает их на панели.
List<MovableSprite*> sprites = List<MovableSprite*>();
MovableSprite *sprite1 = new MovableSprite(5, 5, 2, 99);
MovableSprite *sprite2 = new MovableSprite(5, 10, 2, 89);
MovableSprite *sprite3 = new MovableSprite(5, 15, 2, 79);
MovableSprite *sprite4 = new MovableSprite(5, 20, 2, 69);
List<Interpolator> interpolators = List<Interpolator>()
Есть специальный метод для перемещения объекта, который меняет координаты объекта с использованием интерполяторов.
void loop() {
if (isRequireGreeting) {
displayGreeting();
isRequireGreeting = false;
} else {
displayMovables();
changeRanderParams();
}
}
...
void changeRanderParams() {
for (int i = 0; i < sprites.getSize(); ++i) {
RenderParams *render = sprites[i]->getRenderParams();
render->changeTime();
}
}
void displayMovables() {
draw();
moving();
}
void moving() {
for (int i = 0; i < sprites.getSize(); ++i) {
MovableSprite *sprite = sprites[i];
RenderParams *render = sprite->getRenderParams();
if (isDebug) {
Serial.println(
"moving: " + String(i) + ", "
+ String(render->getTime()) + ", "
+ String(sprite->x())
);
}
if (sprite->x() >= 64) {
if (render->getCycles() > 3) {
render->resetCycles();
render->resetTime();
sprite->setX(0);
} else {
render->incrementCycles();
}
sprite->setX(sprite->x() - render->getCycles()*64);
}
double time = render->getTime();
int x = Interpolator().calculateX(time);
if (i == 1) {
x = LinearInterpolator().calculateX(time);
} else if (i == 2) {
x = AccelerateInterpolator().calculateX(time);
} else if (i == 3) {
x = BounceInterpolator().calculateX(time);
}
if (i == 0) {
sprite->move(x, 0);
} else {
sprite->setX(x);
}
}
}👉Если кому-то будет интересно поразбираться, то верхнеуровнево основные моменты описал.
Но такой формат описания не оч хороший, на будущее это учту.
Но такой формат описания не оч хороший, на будущее это учту.
👍1
День 12: Заметка 2: Сувениры на память
👉Рекомендую по ходу дела обзаводиться сувенирами, они будут напоминать об этапах жизни.
🤟Последовал своей же рекомендации.
#Life
👉Рекомендую по ходу дела обзаводиться сувенирами, они будут напоминать об этапах жизни.
🤟Последовал своей же рекомендации.
#Life
🔥2
День 13: Заметка 1: Arduino + Bluetooth = 💪
🤟 Хай, Кодерс!
💪 Уже пару недель, как начал эксперименты с
🎯 На текущий момент в демо видео обычно весь флоу жестко зашит в рамках основной программы. Хотелось бы влиять на ход исполнения программы из вне.
🤔 Размышляя над вариантами решения задачи взаимодействия с
👉 буду управлять
Для этих целей:
💰 закупил
🛠 собрал прототип на
🤔 Данная модель модуля может работать как
👉 Но это не беда. Значит, в мобильном приложении попробую сделать сервис и поосле первого подключения сохраню
🤟 По итогу я планирую сделать несколько игр, которые будут отрисовываться на
📷 На фото (в следующем сообщении) собранный прототипчик и сам модуль.
#Arduino
#Bluetooth
🤟 Хай, Кодерс!
💪 Уже пару недель, как начал эксперименты с
RGB матрицей и Arduino, получается интересно, но нету некоторой интерактивности. А без нее скоро будет скучно.🎯 На текущий момент в демо видео обычно весь флоу жестко зашит в рамках основной программы. Хотелось бы влиять на ход исполнения программы из вне.
🤔 Размышляя над вариантами решения задачи взаимодействия с
Arduino, я остановился на самом удобном: 👉 буду управлять
Arduino через Bluetooth из мобильного приложения.Для этих целей:
💰 закупил
bluetooth модуль HC-06; 🛠 собрал прототип на
Arduino Uno, подключился к модулю, через простой bluetooth терминал проверил работоспособность, все работает как положено: отправлял сообщение через bluetooth в Arduino, Arduino отправляла это сообщение обратно, то есть своеобразный ping отработал.🤔 Данная модель модуля может работать как
slave, то есть самостоятельно не умеет подключаться у другому устройству. 👉 Но это не беда. Значит, в мобильном приложении попробую сделать сервис и поосле первого подключения сохраню
mac адрес модуля для дальнейшего подключения из фонового сервиса. Ну это первое, что пришло в голову. Попробую так сделать.🤟 По итогу я планирую сделать несколько игр, которые будут отрисовываться на
RGB матрице, а в качестве джостика управления будет выступать мобильное приложение.📷 На фото (в следующем сообщении) собранный прототипчик и сам модуль.
#Arduino
#Bluetooth
👍1