JavaScript animation / game loop (ნაწილი 1)

იმ დღეს ერთ-ერთ ვებ აპლიკაციაში არც თუ ისე მარტივი ანიმაციის გაკეთება მომინდა და ბოლოს ჯავასკრიპტამდე მივედი. თუმცა რამდენიმე გზის გამოკვლევა დამჭირდა და გადავწყვიტე ამ თემაზე პოსტი კარგი იქნებოდა. იქნებ ვინმეს უკეთესი იდეა ჰქონდეს…

ჩემი პირველი ნაბიჯი CSS3-ის გამოცდა იყო. მაგის ანიმაციების მოდული ძალიან მომწონს და ვიფიქრე იქნებ როგორმე მის ფარგლებში ჩავმჯდარიყავი, მაგრამ როცა ანიმირებულ ელემენტებს შორის კოლიზიების დადგენა დამჭირდა, გავიჭედე 🙂

კოლიზიის შესახებ ინფორმაციას ბრაუზერი ვერ მაძლევს css ანიმაციის დროს (და არც მაქვს მაგის მოთხოვნის უფლება). შესაბამისად, როგორღაც მოძრავი ობიექტების ადგილსამყოფელის გაკონტროლება მჭირდებოდა. ეს ნიშნავს რომ რაღაც ინტერვალით ვამოწმო თითოეული მათგანის კოორდინატი და თანაკვეთა შევამოწმო, ამასთან ინტერვალებში არ გადავახტე კოლიზიის მომენტს.

როგორც აღმოჩნდა, მოძრავი ობიექტის კოორდინატებიც არ არის ზედაპირზე. თუ ვინმეს დაგჭირდებათ, ვებკიტში არის ერთი ადგილი საიდანაც მათი აღება შეიძლება – ეს არის ტრანსფორმაციის მატრიცა, რომელიც ახალი მდგომარეობის გამოსათვლელად გამოიყენება. ეს მატრიცა შეიცავს მიმდინარე კოორდინატების ინფორმაციასაც. მაგალითად:

var animatedElement = document.getElementById("animatedElement");
var transform = window.getComputedStyle(animatedElement).webkitTransform;
var curTransform = new WebKitCSSMatrix(transform);
console.log(animatedElement.offsetLeft + curTransform.m41);
console.log(animatedElement.offsetTop + curTransform.m42);

ამიტომ გადავწყვიტე ჩემს შემთხვევაში მხოლოდ CSS3-ის იმედზე ვერ ვიქნებოდი და ისევ ჯავასკრიპტს მოვკიდე ხელი. იდეაში საჭიროა შემდეგი: უნდა გავაკეთო კადრების ციკლი. დროის პატარა ინტერვალებში უნდა მოხდეს ელემენტების მდგომარეობის / მდებარეობის განახლება და შესაბამისად გადახატვა. კოლიზიების შემოწმებაც მანდ შეიძლება – მდგომარეობის გენერაციის დროს.

წინათ ჯავასკრიპტის ანიმაცია რომ გაგეკეთებინათ, ერთმანეთში ჩადგმული და გადაბმული setTimeout ან setInteval მეთოდებით მოგიწევდათ ანიმაციის ციკლის შეკვრა. მაგალითად, ასე:

function draw(){
    console.log('timestamp ' + +new Date());
    // update positions and redraw frame
}
setInterval(draw, 10);

ყოველ 10 მილიწამში მოხდება draw მეთოდის გამოძახება და მაგ მეთოდში იქნებოდა ანიმაციის ახალი მდგომარეობის გენერაცია.

ზოგი ახლაც იყენებს ამ გზას მარტივი ამოცანების გადასაჭრელად, თუმცა გასათვალისწინებელია მათი პრობლემები:

1. არაზუსტი დრო. დაყოვნება, რომელსაც ამ მეთოდებს (setTimeout ან setInteval) მილიწამების სახით გადავცემთ არგუმენტად, მხოლოდ იმას ნიშნავს, რომ ჩვენი ფუნქციები ამ დროის შემდეგ ბრაუზერის UI thread queue-ში ჩაემატებიან და თავის რიგს დაელოდებიან შესასრულებლად. შესაბამისად თუ UI ნაკადი სხვა საქმითაა დაკავებული, ჩვენი ანიმაციის ფრაგმენტი ზუსტად საჭირო დროს ვერ შესრულდება.

2. Browser timer resolution. მისი ქართული შესატყვისი ვერ მოვიფიქრე – ეს არის დრო, რამდენ ხანში ერთხელაც ახლდება საათი. მაგალითად, წინათ ბრაუზერები OS-ის სისტემურ დროს უყურებდნენ, რომელსაც ეს რეზოლუცია გაცილებით დიდი ჰქონდა (მაგალითად 10-15 მილიწამი), შესაბამისად რამდენიმე მილიწამის მითითების შემთხვევაში, შედეგის განსაზღვრა ვერ ხდებოდა. დღეს მთლად ასე აღარ არის, მაგრამ ამაზე ლაპარაკი შორს წამიყვანს.

მოკლედ რომ ვთქვათ, არ იყო გარანტია თუ როდის გადახატავდა ბრაუზერი ეკრანს.
შემდეგ მოზილას ერთ-ერთი თანამშრომელი მივიდა ახალ იდეამდე და Firefox-ში ჩაემატა მეთოდი mozRequestAnimationFrame, რომელიც შემდეგ სხვა ბრაუზერებმაც გადაიღეს და სპეციფიკაციაში requestAnimationFrame სახელით შევიდა.

ამ მეთოდს მხოლოდ ერთი პარამეტრი აქვს – თქვენი ფუნქცია, რომელსაც ბრაუზერი ეკრანის გადახატვამდე გამოიძახებს. ხოლო თქვენს ქოლბექს გამოძახების დროს გადმოეცემა მაღალი სიზუსტის ტაიმსტემპი – დრო როცა requestAnimationFrame-მა ქოლბექების გამოძახება დაიწყო მიმდინარე კადრისთვის.

მაგალითად:

function step(timestamp) {
    console.log(timestamp);
    requestAnimationFrame(step);
}
requestAnimationFrame(step);

requestAnimationFrame-ს გამოძახებით მხოლოდ მომდევნო გადახატვაზე გამოიძახება ქოლბექი. რადგან ჩვენ ანიმაციის ციკლი გვჭირდება, მოგვიწევს რომ ქოლბექში შიგნით ხელახლა მივებათ ბრაუზერის მოვლენას.

ეს მაღალი სიზუსტის ტაიმსტემპი არის DOMHighResTimeStamp ობიექტი და განსხვავდება ჩვეულებრივი Date.now() ფუნქციის დასაბრუნებელი მნიშვნელობისგან. თუ მაგ ფორმატის მიმდინარე ტაიმსტემპი გჭირდებათ, მისი მიღება შეიძლება performance.now() მეთოდით.

CNC მანქანების დაპროგრამება

ორი დღის წინ თსუ-ში მაგისტრატურა დავამთავრე. ჩემი ბოლო სემესტრში შესრულებული კვლევა CNC მანქანებს და მათ დაპროგრამებას ეხებოდა. თემა არც ისე ახლოს არის ჩემს საქმიანობასთან, მაგრამ მაინც საინტერესო იყო ჩემთვის. განსაკუთრებით კი ექსპერიმენტები ამ მანქანების ახალი პროგრამირების ენით, რომლის შესახებაც უფრო დაწვრილებით თემაში მიწერია.

რამდენადაც ვიცი, საქართველოშიც არის პატარა საწარმოები, რომლებიც ასეთი ტიპის მანქანებს იყენებენ, თუმცა პასუხი ვერ მივიღე მათგან.

შემთხვევით ვინმეს ხომ არ ჩაგიტარებიან ექსპერიმენტები ან სახლში აგიწყვიათ მსგავის მანქანა? თემის ბლოგზე გამოქვეყნება მე მგონი შეიძლება, რადგან თსუ-ს კონფერენციის საიტზე სახალხოდ დევს. თუ დაგაინტერესებთ ჩემი მიმოხილვა, ფაილი ამ ბმულზეა 🙂

lcamtuf_robot1

ყალიბის გაკეთება რობოტის ნაწილებისთვის. ფოტო აღებულია lcamtuf-ის საიტიდან.

othermill

Othermill კომპანია otherfab-ისგან

რჩევები საიტის ოპტიმიზაციისთვის (Front end)

დაახლოებით ერთი თვის წინ GeOlymp-ის საიტის გარეგნული მხარე განვაახლეთ თუმცა ბრაუზერის მხარეს სწრაფად ჩატვირთვისთვის საჭირო ოპტიმიზაცია არ გამიკეთებია. ამ პოსტში შევეცდები იმ თემებზე ვისაუბრო, რასაც ამ პროცესზე აქვს გავლენა; ამასთან, რეალურად შევასრულო ისინი საიტზე და ჩატვირთვის დროები შევადარო.

ახლა ქრომი მაჩვენებს, რომ ჯეოლიმპის ერთ-ერთი მთავარი გვერდის გახსნის დროს სერვერზე 42 მოთხოვნა იგზავნება, 307.9 კილობაიტი იტვირთება და 1.2 – 2.3 წამს ანდომებს გვერდის ჩატვირთვას. შევეცდები ამის გაუმჯობესებას..

1. ნაკლები რაოდენობის HTTP მოთხოვნის გაგზავნა სერვერზე
ერთ-ერთი ყველაზე მნიშვნელოვანი წესი, რომელსაც შესამჩნევი შედეგი აქვს, სერვერზე გასაგზავნი HTTP მოთხოვნების შემცირებაა. ეს მოთხოვნები იგზავნება თვითონ html ფაილის და ასევე თითოეული კომპონენტის წამოსაღებად, რასაც საიტი შეიცავს (სურათები, css და javascript ფაილები, ა.შ.).

http მოთხოვნა საკმაოდ მძიმე ოპერაციაა, რადგან მის შესასრულებლად საჭიროა DNS სერვერთან მისვლა, დომენის შესაბამისი ip მისამართის მიღება, მიღებული მისამართის საშუალებით ჰოსტ სერვერის მიგნება და ბოლო ბოლო ვებსერვერიდან რესურსის წამოღება. თუ ეს პუნქტები გეოგრაფიულადაც დაშორებულია (მაგალითად სხვადასხვა ქვეყნებში), მოთხოვნას უფრო მეტი სერვერის და ქსელის გავლა უწევს და დრო შესაბამისად იზრდება (ილუსტრაცია: როგორ მუშაობს ინტერნეტი).

Read more

Polling და Pushing აჯაქსით

მივადექი საიტის შეტყობინებების (notifications) ნაწილს და ბლოგი ძალიან რომ არ მივივიწყო, ნანახის მიმოხილვას აქ გავაკეთებ 😀

შეტყობინებებში ვგულისხმობ მომხმარებელს რომ პატარა ღრუბელი გამოუჩნდება ხოლმე ”თქვენ მიიღეთ ახალი შეტყობინება”, ან ”თქვენს თემას აქვს ახალი გამოხმაურება”.. ან ჩატის ანალოგი ავიღოთ..  ეს არის შემთხვევა, როდესაც სერვერზე ხდება რაღაც მოვლენა და კლიენტს უნდა მიუვიდეს ამის შესახებ ინფორმაცია.

რადგან სერვერი ვერ იქნება ინიციატორი, აუცილებელია რომ პირველად მოთხოვნა კლიენტისგან გაიგზავნოს. პრობლემა კი იმაშია, რომ კლიენტმა წინასწარ არ იცის მოვლენა როდის მოხდება სერვერზე.

ამ ამოცანის გადასაჭრელად ძირითადად ორ გზას იყენებენ ხოლმე:

1. ყოველ 5 წამში (სიტყვაზე) ბრაუზერი ეკითხება სერვერს ჩემთვის რამე ახალი ხომ არ გაქვსო (უგზავნის მოთხოვნას XMLHttpRequest ობიექტის საშუალებით). სერვერიც თავის მხრივ პასუხს უბრუნებს და ასე გრძელდება დაუსრულებლად. ამას polling-ს ეძახიან.

2. ბრაუზერი მიმართავს სერვერს და ამის შემდეგ კავშირს არც ერთი მხარე არ ხურავს. HTTP ქონექშენი ღიაა. თუ სერვერზე რამე ახალი მოხდება, სტრიმის სახით გაუშვებს ინფორმაციას კლიენტთან ამ კავშირით. ეს push-ია.

ორივე მეთოდს თავისი დადებითი და უარყოფითი მხარეები აქვს და ამიტომ ერთი ხელის მოსმით ვერ იტყვი რომელია უკეთესი. განვიხილოთ.

polling-ს ზედვე ეტყობა როგორ ხარჯავს რესურს. ჯერ მარტო ამდენი ქონექშენის გახსნით და დახურვით სერვერს ტვირთავს, მით უმეტეს როცა მომხმარებლების რაოდენობა ძალიან დიდია. ბოლოს ვეღარ გაუძლებს იქით მხარეს სერვისი და მოკვდება 😀

მიუხედავად იმისა, რომ push-ს ეს პრობლემა არ აქვს, აქ სხვა სახით გვაქვს სერვერზე დატვირთვა. მას ძალიან დიდი რაოდენობით გახსნილი ქონექშენის ხელში ჭერა უწევს.

გადატვირთვის თავიდან ასაცილებლად IE 6/7 -ში შეზღუდვაც კია დაუხურავ კავშირებზე. ამ ბრაუზერში კლიენტს არ შეუძლია ქონდეს ორზე მეტი ღია ქონექშენი სერვერთან. ანუ მაგალითად, თუ ორ ტაბში გვაქვს გახსნილი ერთი და იგივე საიტი, რომელიც ასეთ დაუხურავ კავშირს იყენებს და მესამე ტაბშიც გავხსნით, მესამე აღარ ჩაიტვირთება.

ამისთვის ჰეკები არსებობს რა თქმა უნდა. სხვა მნიშვნელოვან ბრაუზერებს ამის პრობლემა არ ქონიათ.

გასათვალისწინებელია გახსნილი ქონექშენის სტრიმის გამაჩერებლებიც – ეს შეიძლება იყოს პროქსი სერვერები, სხვადასხვა firewall-ები ან ვებ სერვერი.. მაგალითად აპაჩის mod_jk კონექტორი (ტომკეტისთვის) ხელს უშლის თურმე push-ის რეალიზაციას.

იმ ბრაუზერებისთვის, რომლებსაც ნამდვილი push-ის გაკეთებაზე ბევრი პრობლემა აქვთ, არის კიდევ ერთი მეთოდი – long polling. აქ push-იც გვაქვს და poll-იც. ბრაუზერი გზავნის მოთხოვნას სერვერთან და თუ მეორე მხარეს მისთვის ჯერ არაფერი არ არის, სერვერი არ პასუხობს და ქონექშენს ღიას ტოვებს, ხოლო როცა რამე გამოჩნდება, ნაკადად კი არ უშვებს არამედ მთელ პასუხს უგზავნის უკან და ხურავს კიდეც. შემდეგ კლიენტი ისევ თავიდან გზავნის მოთხოვნას და ასე შემდეგ.

ძალიან აღარ ჩავუღრმავდები, მით უმეტეს რომ პრაქტიკულად ამის გაკეთება გადავიფიქრე და polling ვიკმარე, რომელიც ცუდი გადაწყვეტილება არ არის, თუ რეაქციის პატარა დრო არ არის აუცილებელი ამოცანისთვის და რამდენიმე წუთში ერთხელ განახლებაც საკმარისია.

თუმცა რა თქმა უნდა ამოცანას გააჩნია. Push , რომლის პატერნს Comet-საც ეძახიან გამოიყენება GMail-ში, GMail-ის ჩატში, GDocs-ში, Meebo-სა და სხვა ჩატის თუ collaborate რედაქტირების საიტებში.

პ.ს. long polling-ის თავიდან ასაცილებლად და სულ ღია კავშირების ხარჯზე ინფორმაციის მიმოცვლისთვის HTML 5-ის სპეციფიკაციაში შემოაქვთ WebSocket კლასი, რომლითაც ასეთი პატერნის რეალიზაციაა შესაძლებელი. http://dev.w3.org/html5/websockets/

პ.პ.ს. იმედია, ჩემი სიტყვებით გადმოცემული პოსტი დიდად არ დაშორდა რეალურ შინაარს 😀

რეკომენდირებული საყურებელი:

Interactive Websites with Comet and DWR  by Joe Walker

Treelist – jQuery plugin

Update: დაემატა expandAll() და collapseAll() ფუნქციები. ასევე აქტიური ელემენტის დამახსოვრება გვერდის განახლების დროს.

სინამდვილეში ამას პლაგინი მარტო იმის გამო ქვია, რომ ძალიან მინდოდა პლაგინის დაწერა :))) პატარაა და თან მისი მსგავსები ძალიან ბევრია ინტერნეტში სხვადასხვა ფერის და გემოსი.

პლაგინის დანიშნულება ასაკეცი/ჩამოსაშლელი მენიუს შექმნაა. უფრო სწორად, არსებულ ქვეპუნქტებიან ლისტს აკეცვა/ჩამოშლის შესაძლებლობას აძლევს.

გამოყენების ინსტრუქცია:
1. სკრიპტი ჩავამატოთ საიტზე, ხოლო სკრიპტამდე ჩავამატოთ თვითონ jQuery-ის სკრიპტი. მაგალითად:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.treelist.js" type="text/javascript"></script>

2. Tip: jQuery-ის ჩამატებისას შეგიძლიათ თქვენს სერვერზე არსებული ფაილის მაგივრად Google-ის ჰოსტზე განთავსებული ფაილი აიღოთ. ბევრი მომხმარებლის ბრაუზერში უკვე არის მისი კეშირებული ვარიანტი და ჩატვირთვა აღარ დასჭირდება:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js" type="text/javascript"></script>

3. თვითონ საიტზე კი, სადაც სიაა, ჩავამატოთ ჯავასკრიპტი.

$('#tree').treelist();

ამ მაგალითში tree სიის ძირეული <ul> ელემენტის id-ია.

1.3.0 ვერსიაში დამატებით არის ორი ფუნქცია. expandAll ყველაფერს ჩამოშლის, ხოლო collapseAll ყველაფერს აკეცავს.

$('#tree').expandAll();
$('#tree').collapseAll();

თუ გვინდა რომ გვერდის განახლების შემდეგ რომელიმე პუნქტი ჩამოშლილი დარჩეს, მაშინ სიის შესაბამის <li> ელემენტს უნდა მივანიჭოთ ”active” კლასი. “active” არის default-ად. კლასის სხვა სახელის შემთხვევაში, treelist() ფუნქციას პარამეტრად უნდა გადასცეთ კლასის სახელი.

შესაძლო პარამეტრები: active, show_speed, hide_speed.

პარამეტრების გადაცემების მაგალითი:

$('#tree').treelist({show_speed:200,
active:'active_item'
});

სადემონსტრაციო ვერსია

გადმოწერა:
jquery.treelist-1.3.0.js 09-08-2009
jquery.treelist-1.0.0.js 02-07-2009

პ.ს. ვცადე IE 6+, Mozilla FireFox, Chrome ბრაუზერებში.. სკრიპტის წარმადობას ვერ ვამოწმებ, მაგრამ თუ გავაუმჯობესე და დავაოპტიმიზირე, ახალ ვერსიასაც ავტვირთავ.