Разработка на iPad: пробуем новый мобильный веб

Осталось только устроить маленький карманный веб-сервер. Если в вашей системе есть python, то для этого достаточно находясь в этой папке, выполнить в консоли команду

python -m SimpleHTTPServer

теперь, наше приложение будет доступно из браузера iPad по адресу http://xxx.xxx.xxx.xxx:8000, где xxx.xxx.xxx.xxx - IP компьютера.

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

var w = 1024;
var h = 600;
var sp;
var orientation = [0,0,0];

void setup() {
size(w, h);
fill(0);
sp = new sphere(w/2, h/2);
}

* This source code was highlighted with Source Code Highlighter.

Получив три составляющие accelerationWithGravity, мы кладём их массив, чтобы вывести их потом при перерисовке холста в виде текста и, для наглядности, отрезка. Код, перерисовки в processing содержится в функции draw, в ней мы выведем необходимый текст и нарисуем отрезок.

void draw() {
background(255);
var x = orientation[0];
var y = orientation[1];
text("x="+x, 10, 10);
text("y="+y, 10, 30);
text("z="+orientation[2], 10, 50);
text("t="+(new Date().getTime()), 10, 70);
text("FPS: "+frameRate, 10, 90);
line(w/2, h/2, w/2-(y*20), h/2-(x*20));
}

window.ondevicemotion=function(event) {
var aig = event.accelerationIncludingGravity;

orientation[0] = aig.x;
orientation[1] = aig.y;
orientation[2] = aig.z;
}

* This source code was highlighted with Source Code Highlighter.

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

Теперь попробуем сделать небольшой пример, который при желании можно превратить в вариацию на тему labyrinth. Для этого нужно всего ничего: создаём объект Ball, который инкапсулирует в себе состояние шарика (координаты и скорость), время последнего изменения (оно нам пригодится для того чтобы узнать интервал времени прошедший с момента прошлой перерисовки) и пару методов - для перерасчёта состояния, и для отрисовки.

var w = 1024;
var h = 600;
var b;
var orientation = [0,0,0];

void setup() {
size(w, h);
fill(0);
frameRate(60);
b = new ball(w/2, h/2);
}

void draw() {
background(255);
var x = orientation[0];
var y = orientation[1];
text("x="+x, 10, 10);
text("y="+y, 10, 30);
text("z="+orientation[2], 10, 50);
text("t="+(new Date().getTime()), 10, 70);
text("FPS: "+frameRate, 10, 90);
b.move(x, y);
b.draw();

if (b.x < 0 || b.x > w || b.y < 0 || b.y > h) {
alert("you lose!");
noLoop();
}
}

window.ondevicemotion=function(event) {
var aig = event.accelerationIncludingGravity;

orientation[0] = aig.x;
orientation[1] = aig.y;
orientation[2] = aig.z;
}

ball = function(x, y){
this.x = x;
this.y = y;

this.lastUpd = new Date().getTime();

this.draw = function() {
text("x:"+this.x+"; y:"+this.y, 20, 110);
ellipse(this.x, this.y, 20, 20);
}

this.move = function(ax, ay){
var now = new Date().getTime();
var td = (now-this.lastUpd)/1000;

this.y -= ax * td * 30;
this.x -= ay * td * 30;

this.lastUpd = now;
}
}

* This source code was highlighted with Source Code Highlighter.

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

К сожалению, несмотря на громкие заявления Googe о будущем HTML 5 в качестве мобильной платформы, даже в браузере HTC Desire эта фича не заработала. То ли её вообще там нет, то ли API для него не совместим с моим кодом.
Интересно также было бы сравнить быстродействие processing.js с работой напрямую с canvas, но и эта версия выдавала на iPad вполне нормальные для мобильного устройства 20-25 FPS.