Бывало ли у кого-нибудь так, что начинаете реализовывать одну идею, а она плавно преобразовывается в другую, а затем ещё в одну, и вот, у вас «на выходе» уже совершенно свежая история, только лишь отдалённо напоминающая начальную задумку. Думаю, наверняка, бывало!
Этим особенно хороши свои собственные проекты, когда нет чётко прописанных ТЗ, и начальник не стоит за вашей спиной, одёргивая при любом отклонении от плана. А также этим особенно славится «магия программирования», ведь код — потрясающе гибкая магическая субстанция, которая в соединении с железом современных смартфонов, может творить настоящие чудеса.
Вот и на этот раз, у меня была идея сначала попробовать реализовать простейшую игру, на подобие «крестиков‑ноликов», только с более расширенным сюжетом (о ней как‑нибудь тоже обязательно расскажем). Но в какой то момент совершенно неожиданно пропали все мои программные наработки, которые были написаны на промежуточном этапе, и «со скрипом», но таки пришлось возвращаться к самому началу написания кода.
И вот, когда повторно пишешь что‑нибудь, во‑первых, часто бывает просто лень и неинтересно заново точь‑в-точь воспроизводить то, что делал все последние месяцы, поэтому начинаешь импровизировать. А во‑вторых, обязательно будут появляться новые мысли, и как оказывается, начальный замысел может «уплывать» совсем в другую сторону от первоначального — потому что, заново обдумывая свою главную мысль, может возникнуть вопрос — «В зачем, собственно, это?...» :)
Вот уж, правильно сказал в свое время Гераклит Эфесский: «Нельзя войти в одну и ту же реку дважды...». Но с другой стороны, это и не плохо, тем более, что предыдущая мысль у вас также останется, и может быть, даже преобразуется со временем к более интересному виду — и вопрос «Зачем?» — решится сам собой. Но ведь именно рождение и преобразование мыслей очень важны в творческой жизни, ведь получается, даже на таком простом примере мы отчётливо видим ветвление — раздвоение одной мысли на старую и новую, то есть прорастание дерева идей, главное только, чтобы идеи были полезные.
Так вот, вернёмся к нашей конкретной сегодняшней задаче — реализации новой идеи! Предлагаем сделать мобильное приложение, которое поможет нам создавать «каплю росы» простым прикосновением пальца к поверхности смартфона. Эта капелька будет реагировать на наши действия с телефоном, и перемещаться по поверхности экрана в зависимости от его угла наклона. В дальнейшем можно будет дополнить это приложение какими‑нибудь более «расширенными заклинаниями», но пока остановимся на простейшем варианте! Задачка, в первую очередь, обучающая, и придумана для того, чтобы прививать молодёжи интерес к изучению техники, да и просто самому интересно поработать со встроенными в смартфон сенсорами.
Итак, в данной задаче нам поможет «магический» 3-х осевой акселерометр, встроенный в наш смартфон. В качестве софта для написания логики мы снова возьмём IDE DroidScript, так как эта IDE позволяет отрабатывать программу прямо на смартфоне без эмуляторов, а это особенно важно, когда мы пишем код с использованием датчиков, так как можно сразу же «в живую» увидеть, как «материализуется» и живёт наша магия.
Для начала нам нужно сделать поле, по которому будет перемещаться капелька, допустим, оно будет размером 10×10 ячеек (в нашем случае, в качестве ячеек мы можем использовать обычные кнопки). По нажатию на любую из этих ячеек на поверхности смартфона будет появляться наша капелька. Которая в дальнейшем будет перемещаться по экрану смартфона...
Хочу отметить, что с написанием программы в среде DroidScript, и пониманием основ JavaScript, мне очень помог Espirito Embriagado, а также сам DroidScript, который имеет множество встроенных примеров с открытыми кодами в своем составе. Весь код написан на языке JavaScript.
// Dew Drop interactive
// Капля создана = 1, нет = 0
var dewPointExist;
// Массив ячеек поля
var buttons = [];
// Предыдущие значения с датчика
var prevX=0;
var prevY=0;
var prevZ=10;
// Размер ячеек поля
var width = 0.1; // ширина
var height = 0.05; // высота
var margin = 0; // расстояние между ячейками
var rows = 10; // число строк
var columns = 10; // число столбцов
// Создаем класс для поля
class gameField {
constructor() {
// Создание массива из 100 ячеек
this.cellsArray = new Array(rows*columns);
// Обнуление всех ячеек
for (var i=0; i<rows* columns; i++) {
this.cellsArray[i] = 0;
}
}
// Значение в ячейке:
// 0 - свободна
// 1 - капелька росы
// 2 - ...? ( доработка )
setCellValue(cellNum, cellValue) {
this.cellsArray[cellNum] = cellValue;
}
getCellValue(cellNum) {
return this.cellsArray[cellNum];
}
}
// Создаем класс для нашей капельки росы
class dewPoint {
constructor( dewPoint ) {
// Координата капельки
this.dewPoint = dewPoint;
}
setDewPoint( dewPoint ) {
this.dewPoint = dewPoint;
}
getDewPoint( ) {
return this.dewPoint;
}
}
// Создаём новое чистое поле
var currentGameField = new gameField();
// Подготавливаем наше капельку
var dewPoint1 = new dewPoint(0);
Теперь, в соответствии с изменениями показаний внутреннего акселерометра, наша капелька должна будет перемещаться по поверхности (т.е. изменять свои координаты, и перерисовываться снова и снова).
Чтобы было интереснее, давайте создадим эффект переливания капельки разными цветами. Для этого по мере обновления данных с нашего акселерометра, будем формировать строку нового цвета следующим образом.
// Переменные для работы с акселерометром
sampleCount = 10;
updateInterval = 10;
sensorData = null;
// Инициализация акселерометра
function accelerometerInitializing() {
snsAcc = app.CreateSensor( "Accelerometer", "Fast" );
snsAcc.Start();
// Считывание данных
var vals = snsAcc.GetValues();
var series = GetSeries( sampleCount, [vals[1],vals[2],vals[3]] );
// Запись данных с акселерометра в текстовые поля
txt1.SetText( "X: " + vals[1] );
txt2.SetText( "Y: " + vals[2] );
txt3.SetText( "Z: " + vals[3] );
// Обновляем данные с акселерометра
Update();
}
// Функция обновления данных с акселерометра
function Update() {
// Считывание данных
var vals = snsAcc.GetValues();
var series = GetSeries( sampleCount, [vals[1],vals[2],vals[3]] );
// Обновляем данные в текстовых полях
txt1.SetText( "X: " + Math.round(vals[1]) );
txt2.SetText( "Y: " + Math.round(vals[2]) );
txt3.SetText( "Z: " + Math.round(vals[3]) );
// Перемннные для изменения цвета капельки
let s1 = transtoStr16Value(calc10to16in10( vals[1] ));
let s2 = transtoStr16Value(calc10to16in10( vals[2] ));
let s3 = transtoStr16Value(calc10to16in10( vals[3] ));
// Считываем новые данные с акселкрометра
let newX=Math.round(vals[1]);
let newY=Math.round(vals[2]);
let newZ=Math.round(vals[3]);
// Переменная для новой координаты капельки
let nnewCoordinate=0;
// Капелька создана?
if (dewPointExist == 1) {
// Далее перерисовываем капельку в зависимости от изменения показаний датчика
if(newX > prevX) {
if(cellsVerticalWallChecking( "right")==false) {
// cell[i+1] = 1
nnewCoordinate=dewPoint1.getDewPoint( ) +1;
currentGameField.setCellValue(nnewCoordinate, 1);
// cell[i] = 0
currentGameField.setCellValue(dewPoint1.getDewPoint( ), 0);
dewPoint1.setDewPoint( nnewCoordinate);
}
}
if (newY > prevY) {
if (dewPoint1.getDewPoint( )<rows*columns-rows) {
// cell[i+7] = 1
nnewCoordinate=dewPoint1.getDewPoint( ) +rows;
currentGameField.setCellValue(nnewCoordinate, 1);
// cell[i] = 0
currentGameField.setCellValue(dewPoint1.getDewPoint( ), 0);
dewPoint1.setDewPoint( nnewCoordinate);
}
}
if (newX < prevX) {
if(cellsVerticalWallChecking( "left")==false) {
// cell[i-1] = 1
nnewCoordinate=dewPoint1.getDewPoint( ) -1;
currentGameField.setCellValue(nnewCoordinate, 1);
// cell[i] = 0
currentGameField.setCellValue(dewPoint1.getDewPoint( ), 0);
dewPoint1.setDewPoint( nnewCoordinate);
}
}
if (newY < prevY) {
if (dewPoint1.getDewPoint( )>=rows) {
// cell[i-7] = 1
nnewCoordinate=dewPoint1.getDewPoint( ) -rows;
currentGameField.setCellValue(nnewCoordinate, 1);
// cell[i] = 0
currentGameField.setCellValue(dewPoint1.getDewPoint( ), 0);
dewPoint1.setDewPoint( nnewCoordinate);
}
}
changingButtonsColors( colorCompilation( s1, s2, s3) );
prevSensorDataStore( Math.round(vals[1]), Math.round(vals[2]), Math.round(vals[3]));
}
txtNewCo.SetText( "NewCoordinate: " + nnewCoordinate);
// Повторяем вызов функции
setTimeout( Update, updateInterval );
}
// Обновление предыдущих данных с акселерометра
function prevSensorDataStore( prevX, prevY, prevZ ) {
prevX = prevX;
prevY = prevY;
prevZ = prevZ;
}
// Получение саккумулированных данных акселерометра
function GetSeries( points, funcs ) {
if( typeof flt_dataStore == "undefined" ) {
flt_dataStore = new Array( funcs.length );
}
var series = [];
for( var i=0; i< funcs.length; i++ ) {
if( !flt_dataStore[i] ) {
flt_dataStore[i] = [];
}
if( flt_dataStore[i].length > sampleCount ) {
flt_dataStore[i] = flt_dataStore[i].slice(1);
}
var val = funcs[i];
flt_dataStore[i].push( val );
var res = [];
var len = flt_dataStore[i].length;
for( var j = 0; j < len; j++ ) {
res.push( [j-len, flt_dataStore[i][j]] )
}
series[i] = res;
}
return series;
}
// Запускаем при загрузке
function OnStart() {
// Создаем наше новое поле с ячейками
buttonsArrayCreation();
// Инициализируем акселерометр
accelerometerInitializing();
// Инициализируем датчик света
lightSensorInitialisation()
// Изначально капельки ещё нет
dewPointExist = 0;
// Задаем начальные значения с акселерометра
prevSensorDataStore( 0, 0, 10 )
}
// Функция создания поля с ячейками
function buttonsArrayCreation() {
app.SetOrientation("Portrait");
layVert = app.CreateLayout( "Linear", "Vertical");
// Цикл создания поля ячеек
for (var row = 0; row < rows; row++) {
// Новая горизонтальная строка ячеек
layHoriz = app.CreateLayout( "Linear", "Horizontal");
layVert.AddChild( layHoriz );
// Вертикальные ячейки
for (var col = 0; col < columns; col++) {
var index = row * columns + col; // Вычисляем текущий индекс ячейки поля
// Создание кнопок поля
var btn = app.CreateButton(index, width, height);
btn.SetMargins(0, margin);
btn.data = { index: index, customInfo: "Coordinate: "+ row + ", " + col };
btn.SetOnTouch(GenericButtonCallback);
btn.SetBackColor( "#4B4C4E" );
buttons.push(btn);
layHoriz.AddChild(btn);
}
}
// 3 горизонтальных поля для отображения данных с акселерометра
layHoriz = app.CreateLayout( "Linear", "Horizontal");
layVert.AddChild( layHoriz );
txt1 = app.CreateText( "X:" );
txt1.SetMargins(0.05, 0);
txt1.SetTextSize( 20 );
layHoriz.AddChild(txt1);
layHoriz = app.CreateLayout( "Linear", "Horizontal");
layVert.AddChild( layHoriz );
txt2 = app.CreateText( "Y:" );
txt2.SetMargins(0.05, 0);
txt2.SetTextSize( 20 );
layHoriz.AddChild(txt2);
layHoriz = app.CreateLayout("Linear", "Horizontal");
layVert.AddChild( layHoriz );
txt3 = app.CreateText( "Z:" );
txt3.SetMargins(0.05, 0);
txt3.SetTextSize( 20 );
layHoriz.AddChild(txt3);
// Инфо поле для отображения составленного цвета капли
layHoriz = app.CreateLayout( "Linear", "Horizontal");
layVert.AddChild( layHoriz );
txtInfo = app.CreateText( "Info:" );
txtInfo.SetMargins(0.05, 0);
txtInfo.SetTextSize( 20 );
layHoriz.AddChild(txtInfo);
// Поле для отображения данных с датчика света
layHoriz = app.CreateLayout( "Linear", "Horizontal");
layVert.AddChild( layHoriz );
txtLux = app.CreateText( "Lux:" );
txtLux.SetMargins(0.05, 0);
txtLux.SetTextSize( 20 );
layHoriz.AddChild(txtLux);
// Поле для отображения текущей координаты капельки
layHoriz = app.CreateLayout( "Linear", "Horizontal");
layVert.AddChild( layHoriz );
txtNewCo = app.CreateText( "NewCoordinate:" );
txtNewCo.SetMargins(0.05, 0);
txtNewCo.SetTextSize( 20 );
layHoriz.AddChild(txtNewCo);
app.AddLayout( layVert );
}
// Функция по нажатию ячейки поля
function GenericButtonCallback() {
// Отображаем на экране данные нажатой ячейки
app.ShowPopup("Button " + this.data.index + " with " + this.data.customInfo);
// Изменяем цвет нажатой кнопки
var button = this;
button.SetBackColor("blue");
// Изменяем значения классов поля и капельки
currentGameField.setCellValue(this.data.index, 1);
dewPoint1.setDewPoint(this.data.index);
// Теперь наша капелька создана
dewPointExist = 1;
}
// Функция ограничения поля по вертикали слева и справа
function cellsVerticalWallChecking( sleftOrRight) {
let boolResult=false;
if ( sleftOrRight == "left" ) {
if ( dewPoint1.getDewPoint() % 10 == 0) {
//app.Alert("%10 = " + dewPoint1.getDewPoint( ) % 10);
boolResult=true;
}
}
if ( sleftOrRight == "right" ) {
if ( dewPoint1.getDewPoint() % 10 == 9) {
//app.Alert("%10 = " + dewPoint1.getDewPoint( ) % 10);
boolResult=true;
}
}
return boolResult;
}
// Функция перевода данных из 10-ричной
// В 16-ричную форму с акселерометра
// -10...+10 -> 0...255 (00...FF)
// X = 128*(y/10 + 1)
function calc10to16in10( nmeas10Value ) {
let nmeas16Value = Math.round(128 * ((nmeas10Value/10) +1));
return nmeas16Value;
}
// Преобразование X в 16-ричное представление:
// Например, 255 / 16 = 15 остаток 15 (FF)
function transtoStr16Value ( nmeas16Value ) {
let sdivideFirst = s16ValueTransform(String(Math.floor( nmeas16Value / 16)));
let sdivideSecond = s16ValueTransform(String(nmeas16Value % 16));
let s16measValue = "";
s16measValue = s16measValue.concat(sdivideSecond, sdivideFirst);
return s16measValue;
}
// Заменяем десятичные числа из двух цифр на буквы в 16-ричном виде
function s16ValueTransform( sValue ) {
switch ( sValue ) {
case "10":
sValue = "A";
break;
case "11":
sValue = "B";
break;
case "12":
sValue = "C";
break;
case "13":
sValue = "D";
break;
case "14":
sValue = "E";
break;
case "15":
sValue = "F";
break;
default:
sValue = sValue;
}
return sValue;
}
// Формируем строку цвета, составленную из 16-ричных чисел с 3-х осевого датчика
function colorCompilation( s1, s2, s3) {
let scommonColor = "";
scommonColor = scommonColor.concat("#", s1, s2, s3);
txtInfo.SetText( "Info: " + scommonColor);
return scommonColor;
}
// Изменяем цвета ячеек нашего поля
function changingButtonsColors( scommonColor ) {
// Цикл для подкрашивания капелек на поле
for (var i = 0; i < rows*columns; i++) {
// Проверяем есть ли капелька на данной ячейке
if (currentGameField.getCellValue(i) == 1) {
buttons[i].SetBackColor( scommonColor );
} else {
buttons[i].SetBackColor( "#4B4C4E" );
}
}
}А теперь давайте ещё сделаем так, чтобы можно было убрать капельку с поля взмахом руки над смартфоном. Для этого задействуем встроенный датчик света.
// Инициализируем датчик света
function lightSensorInitialisation() {
snsLux = app.CreateSensor( "Light" );
snsLux.SetOnChange( sns_OnChange );
snsLux.Start();
}
// При изменении значений с датчика света мигает желтым светом и стираем нашу капельку
function sns_OnChange( lux ) {
txtLux.SetText( "level = " + lux + " lux" );
// При уменьшении света изменяем цвет капельки на цвет фона м удаляем
if (lux < 5) {
layVert.SetBackColor("#FAED27");
dewPointExist=0;
currentGameField.setCellValue(dewPoint1.getDewPoint( ), 0);
buttons[dewPoint1.getDewPoint( )].SetBackColor( "#4B4C4E" );
dewPoint1.setDewPoint( 0 );
} else {
layVert.SetBackColor("#013212");
}
}Вот так, теперь запустив нашу программу в DroidDscript, получаем волшебную площадку в лице нашего смартфона, на которой мы можем создавать капельку росы, «катать» её по экрану из стороны в сторону, и стирать с поля простым взмахом руки вблизи экрана. Небольшое, но волшебство :))
Само приложение можно скачать и посмотреть на своем Android-смартфоне из RuStore.
Всем добрых мыслей :))
