юли 24 2011

Game of Life (javascript + html5’s canvas)

Category: Dev,HTML5,WebLucho @ 23:55

Тези дни отново ме загриза съвестта, че не работя по някакъв сайд-проект – мой собствен или open source и за това днес реших да почета и понапиша Game of Life.

Оказа се доста прост алгоритъм с доста интересна история, която и сами може да си прочетете :-)

Демо може да видите тук: http://dailyffs.com/life/

Сорсът е тук: https://gist.github.com/1102964

Коментарът към сорса от страна на @skanev е тук: https://twitter.com/skanev/status/95213748092026880

Това, което искам да кажа в тази статия е, че колкото и да са бързи съвремените Javascript engine-и и колкото и разни светила и икони на браузър вендорите да се хвалят, че производителността скача многократно от версия до версия, това не значи че не може да забързате всичко още малко много. Цената на „забързването“ е „угрозняване“ и оптимизиране на кода. В моя конкретен случай – на една функция, която се вика 60000 пъти на преизчисление.

Въпросната фунцкия:


function getLiveNeighbours(id, data) {
  var x = id % canvas.width;
  var y = parseInt(id / canvas.width);

  var cnt = 0;
  for (var i = -1; i < 2; i++) {
    for (var j = -1; j < 2; j++) {
      if ((i != 0 || j != 0) &&
        !(x+i < 0 || x+i >= canvas.width || y+j < 0 || y+j >= canvas.height) &&
        data.data[4*((y+j)*canvas.width+(x+i))] != THE_BLACK) {
        cnt++;
      }
    }
  }
  return cnt;
}

Простата оптимизация на кода включва:

  1. Премахване на извикването на функцията (тялото на функцията се ползва директно) – спестява 60000 извиквания и времето за изпълнение на една итерация пада от 500ms на 270ms
  2. Заменяне на двата вложени цикъла проверяващи за броя на съседни клетки – от 270ms на 150ms
  3. Опростяване на пресмятанията (премахване на умножения) – от 150ms на 60ms
  4. Създаване на локални референции към често използваните данни (вместо постоянни извиквания от типа „obj.data“ при изчисленията се създава и използва локална променлива) – от 60ms на 50ms
// (4)
var width = canvas.width*4;
var d = data.data;
var nd = newdata.data;
var cw = canvas.width;
var ch = canvas.height;
var base = 0;

for (var i = 0; i < d.length/4; i++) {
  var x = i % cw;
  var y = parseInt(i / cw);

  var cnt = 0;
  // (1), (2), (3)
  if (x > 0 && d[base-4] != THE_BLACK) cnt++;
  if (x < cw-1 && d[base+4] != THE_BLACK) cnt++;
  if (x > 0 && y > 0 && d[base-4-width] != THE_BLACK) cnt++;
  if (y > 0 && d[base-width] != THE_BLACK) cnt++;
  if (x < cw-1 && y > 0 && d[base+4-width] != THE_BLACK) cnt++;
  if (x > 0 && y < ch-1 && d[base-4+width] != THE_BLACK) cnt++;
  if (y < ch-1 && d[base+width] != THE_BLACK) cnt++;
  if (x < cw-1 && y < ch-1 && d[base+4+width] != THE_BLACK) cnt++;
  ...

В крайна сметка производителността скочи 10 пъти, макар логиката на кода да изглежда по-зле от преди. Не, че преди изглеждаше много красива, но все пак :D

Разбира се има и още един доста по-умен начин за техническа оптимизация – Web Workers. Те са панацеята на всички проблеми, началото и края, давид и голиат, содом и гомор, ин и ян… за тях може да почетете тази статия - Mandelbrot + Web Workers

Забележка:

  • става дума за проста техническа оптимизация на кода, а не за подобрения на алгоритъма!
  • вероятно оптимизациите в javascript engine-ите не се фокусират върху случаи на извикване на функция 60 хиляди пъти… а би трябвало.

Етикети: , , ,


окт 03 2010

Mozilla Labs – Game On 2010

Category: Dev,HTML5,Mozilla,WebLucho @ 16:29

Тези дни хората от Mozilla Labs стартираха конкурс за разработка на изцяло уеб базирана игра. Състезанието се казва Game On 2010 и дава възможност на всички гейм или уеб разработчици да покажат на какво са способни, но… само с HTML(5)/Javascript/CSS.

Да – правилно прочетохте! Flash, Applet-и и други плъгини не са позволени, защото основната идея на конкурса е да покаже на какво са способни модерните браузъри. А те наистина са способни! HТML5 & Friends докараха на белия свят доста новости и купища ексцентрични API-та – Canvas елементът,  SVG (директно в html кода), WebGL, Web Sockets (двупосочна свързаност), няколко API-та за data storing, Video елементът и още много интересни благинки.

В конкурса могат да участват както индивидуални разработчици, така и екипи. Естествено и за награди е помислено, като за сега от Лаба са обявили само наградата за първо място – два билета за Game Development Conference 2011 в Сан Франциско, с включен път, хотел и храна. Награди ще има и за още дузина категории, така че запретвайте ръкави ;-)

Крайният срок за участие е 11.01.2011г.

Успех на всички :-)

П.П. Аз лично смятам да се включа и съм навит за обединяване на усилията с други ентусиасти.


Етикети: , , ,


авг 01 2010

ScreenShootMe на 1 година

Category: Dev,HTML5,Web,НонсенсLucho @ 23:25

Преди около година сътворих едно малко уеб-туулче, което да позволява бързо качване на скрийншот в мрежата – ScreenShootMe. Очакванията ми да стана свръх богат и да задмина Facebook по потребители не се сбъднаха, но и първоначалната ми идея никога не е била тази, де. Подбудите да го създам тогава бяха, че такъв инструмент ми е нужен и има смисъл от него. Виждам смисъл в него и сега – 1 година по-късно. Първата му версия беше функционална – имаше това което исках, но нямаше това, което искаха останалите хора – хубав вид. За това докато пътувах в автобуса от Созопол към София с изтощена батерия на телефона и празен поглед забит в хоризонта, реших да подобря творението си – да го направя „красиво“. И не просто реших, ами помислих сериозно какво искам, помислих за всеки детайл, за цветове, разположение – за всичко. Когато се прибрах веднага започнах работа по него и след 4-5 дни бях завършил всичко, което ми се въртеше в главата докато пътувах в автобуса. Всички промени касаят клиентската част – нищо по сървърната част или в Applet-а не е пипано, което беше и първоначалната идея – все пак е само фейслифтинг.

Ето и списък с промените:

  • Разположението – меню с всички бутони и контроли в ляво, до менюто е платното, а под тях е информативен текст.
  • Менюто се дели на 4 части – бутони с основни функции, бутон и контроли за crop, бутон и контроли за рисуване върху платното (избор на дебелина и цвят на четката), поле за въвеждане на специфичен ключ (ключа се ползва в URL-a с изображението).
  • Информативния текст се дели да две паралелни колони, като в лявата има информация за функциите на уеб-туулчето, а в дясната има текст с общо предназначение.
  • Състоянието на кенвъса по подразбиране трябва да има рекламен вид – да казва колко е лесно и полезно туулчето.
  • Цветовете: Тъмно синьо, жълто, оранжево и бяло (за текста). Топлите и студени цветове, някак си противно на логиката, си паснаха. Тъмно синьото и бялото бяха първите два избрани цвят, които да си призная, разбрах че си пасват благодарение на това лого – http://screenshoot.me/7r04fQ . За оранжавото знаех, че е енергичен цвят, а за жълтото че прави много добър контраст с черно и тъмни цветове (освен това ми е любим). И така от цялата каша се роди една палитра, която е ЕДИНСТВЕНАТА свястна палитра, която някога съм подбирал.
  • Бутоните и контролите представляват Canvas елементи и са изцяло генерирани от Javascript. Един ден ще бъдат заменени от HTML5 Web Forms.
  • Наех домейн за уеб-туулчето – screenshoot.me
  • Donation бутонче – домейнът струва пари :-P
  • Футър
  • Undo – в случай, че нещо се обърка тотално.

Това „разкрасяване“ за пореден път подтвърди мнението ми, че хубавията дизайн се постига много по-трудно отколкото самата функционалност. Дано поне да си е заслужавало труда  и парите за домейн и да привлече повече потребители ;-)


Етикети: , , , ,


юни 29 2010

HTML5 – Предисторията

Category: HTML5,WebLucho @ 15:44

Тази публикация е първата от поредица статии за HTML5. Пиша ги основно по две причини – обичам HTML5 стандарта и искам да помогна за популяризирането му. Дано ви харесат и приятни занимания с HTML5 ;-)

Веднага след като W3C завършиха стандарта HTML 4, се заеха с разработката на напълно нов уеб език – XHTML 2, който макар и да е „XHTML“ няма нищо общо с XHTML 1.0 или 1.1, а на всичкото отгоре не е съвместим и с тези предни версии. По този начин браузър-вендорите трябваше рано или късно да започнат да поддържат два езика за структуриране и представяне на уеб страници, които нямат много общо по между си. Естествено никой не се съгласи на това безумие и след като до 2004 година, никой от водещите браузъри не беше имплементирал абсолютно нищо от XHTML 2, a W3C не желаеше да отстъпи и да прекрати разработката на стандарта, производителите на браузъри (Microsoft, Apple, Mozilla и Opera) просто се оттеглиха и създадоха собствен работна група – WHATWG, чиято цел бе да разработи нов HTML стандарт, който да е съвместим с предни версии и да предлага нови функционалности, достъп до периферни устройства и по-лесно и уеднаквено разработване на уеб приложения. Няколко години след това W3C най-накрая забелязват, че никой не се вълнува от съдбата на XHTML 2, но пък WHATWG доста напредват с новия неофициален стандарт, и след като самият Тим Бърнърс-Лий пише в блога си, че нещата около XHTML 2 не вървят, W3C най-накрая се вразумяват. През 2007 година W3C официално решават да прекратят работа по XHTML 2 и да се обединят с WHATWG, за да разработят заедно новия стандарт – HTML5.

С течение на времето стандарта става все по-голям и по-разнообразен като до 2010 година в него вече влизат функционалности за запис и възпроизвеждане на видео и звук, няколко варианта за двупосочна връзка между потребителския клиент и уеб сървъра, няколко вида офлайн съхранение на данни в браузъра (вкл. и с база данни), възможност за чертаене на екрана, възможност за директно внасяне на MathML и SVG код в HTML документа, полета за въвеждане на специфични данни (например телефон или e-mail), един куп нови елементи, подобрена семантика в структурата на уеб страниците, нов стандартизиран начин за токенезиране и построяване на дървото от елементи в браузъра. Последното ще накара производителите на браузъри да не си измислят сами как да се интерпретира невалидния HTML5 код, а да следват ясно зададен алгоритъм, така че страниците да изглеждат еднакви на всички браузъри.

До тук всичко е повече от красиво, но следва една обезпокоителна новина – HTML5 ще бъде записан като задължителен стандарт през 2022 година, а като препоръчителен стандарт едва през 2012. Това значи, че на теория производителите на браузъри могат да си седят кротко и да се ослушват до 2022 година, с което да пречат на цялата работа по внедряването на стандарта в уеб пространството. Реално обаче това не е така, тъй като  всяка нова версия на популярните браузъри поддържа все повече и повече от новия стандарт. Очакванията са, че паралелно с официалното завършване на HTML5 (2012г.) повечето браузъри ще са го имплементирали. Това е напълно разбираемо, защото в крайна сметка хората, които пишат стандарта са хората, които правят и уеб браузърите.

Аз се запалих по HTML5 лятото на 2009 година, когато за първи път видях частична поддръжка на стандарта (Canvas елемента) в Firefox 3.5. Бях меко казано изненадан от това, което предлагаше и реших да експериментирам с едно малко уеб приложение – ScreenShotMe, което да предлага минимална редакция и ъплоуд на изображение от клипборда. Написването на кода (макар и без много примери в нета) беше лесно, като в резултат с малко код се постигна прилична функционалност. Следващото нещо, което ми направи силно впечатление бе появата на WebSocket-ите в Google Chrome през декември 2009, като те предлагаха дуплексна връзка между клиента и сървъра. Opera пък поддържат HTML5 Forms – нови потребителски контроли като слайдер, color picker и др. Само тези няколко нови функционалности загатват за десетките нови онлайн приложения, които може да видим скоро на белия свят. Например директна редакция на снимките във Facebook, Skype в браузъра, офлайн достъп до електронната поща и др.

Макар че HTML5 e още чернова и e далеч от поява на белия свят, горещо препоръчвам уеб дивелопърите да не чакат 2012 или 2022 година, за да се запознаят по-детайлно с HTML5, защото този нов стандарт ще отвори вратите за един куп нови и интерактивни уеб приложения!


Етикети: , , , , ,