Tag: webdev

Entries for tag "webdev", ordered from most recent. Entry count: 15.

Uwaga! Informacje na tej stronie mają ponad 3 lata. Nadal je udostępniam, ale prawdopodobnie nie odzwierciedlają one mojej aktualnej wiedzy ani przekonań.

Pages: 1 2 >

20:25
Wed
05
Dec 2012

Nearest-Neighbor Filtering in HTML

In 3D graphics programming, when a texture is enlarged, sampler performs filtering to interpolate between texture pixels. That's also what happens by default when an image is resized on HTML page - browser does some interpolation (e.g. bilinear or bicubic), which makes the image blurry.

What if you have a small pixel-art image and you want to show it on a web page as pixelated, not blurred? It turns out there are nonstandard CSS attributes for this. I found these two - first one is for Internet Explorer and the second one works in Firefox.

-ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;

Comments (3) | Tags: webdev css html | Author: Adam Sawicki | Share

20:02
Sat
28
Jan 2012

Improved RSS Feed

I improved the script for generating news feed for my website. It now shows entire contents of my blog posts, including HTML formatting. So if you visit my blog sometimes and haven't done it yet, subscribe to my...

RSS Feed: Adam Sawicki - Homepage (Blog) RSS Feed

using some desktop or online reader, like the popular Google Reader. I use this one for some time and I like it a lot. RSS/Atom is really good technology. With it you can see unread updates from dozens of your favourite blogs in a single place and read them all without actually visiting the website.

Comments (0) | Tags: homepage webdev web | Author: Adam Sawicki | Share

20:32
Fri
06
Jan 2012

Resizing Images to Generate Thumbnails in PHP

Some time ago I came across a problem of calculating an image size for automatically generated thumbnail for gallery script coded in PHP. It required a moment's thought, so I'd like to share this algorithm. In fact there will be two algorithms.

First code scales the image down with following rules: Destination size will not exceed given thumbnail size, but the width or height can be smaller to always preserve aspect ratio. Images smaller than thumbnail size are not magnified.

Inputs:
$src_size_x, $src_size_y - Source image size.
THUMBNAIL_SIZE_X, THUMBNAIL_SIZE_Y - Constants defining thumbnail size.

Outputs:
$dst_size_x, $dst_size_y - Destination thumbnail size.

if( $src_size_x <= THUMBNAIL_SIZE_X && $src_size_y <= THUMBNAIL_SIZE_Y )
{
  $dst_size_x = $src_size_x;
  $dst_size_y = $src_size_y;
}
else
{
  $dst_size_x = THUMBNAIL_SIZE_X;
  $dst_size_y = (int)( $src_size_y * THUMBNAIL_SIZE_X / $src_size_x );
  
  if( $dst_size_y > THUMBNAIL_SIZE_Y )
  {
    $dst_size_x = (int)( $src_size_x * THUMBNAIL_SIZE_Y / $src_size_y );
    $dst_size_y = THUMBNAIL_SIZE_Y;
  }
}

Second algorithm also helps with generating image thumbnails, but works differently. It assumes that destination image will always be of size (THUMBNAIL_SIZE_X, THUMBNAIL_SIZE_Y), while source iamge can be cropped to select only the center of the image if it has different aspect ratio than the thumbnail.

Inputs to this algorithm are the same, while outputs are:

$src_x, $src_y - Offset in the source image to begin copying from.
$src_w, $src_h - Size of the rectangle to select from cropped source image.

The code that uses this algorithm should then select from the source image a rectangle with left-top position ($src_x, $src_y), size ($src_w, $src_h) and copy it, with scaling and resampling, to the destination image with the size exactly (THUMBNAIL_SIZE_X, THUMBNAIL_SIZE_Y). That's what imagecopyresampled function from GD library can do. This algorithm does not handle cases where source image is smaller than thumbnail.

$src_h = $src_size_y;
$src_w = (int)( $src_h * THUMBNAIL_SIZE_X / THUMBNAIL_SIZE_Y );

if( $src_w <= $src_size_x )
{
  $src_x = ( $src_size_x - $src_w ) / 2;
  $src_y = 0;
}
else
{
  $src_w = $src_size_x;
  $src_h = (int)( $src_w * THUMBNAIL_SIZE_Y / THUMBNAIL_SIZE_X );
  $src_x = 0;
  $src_y = ( $src_size_y - $src_h ) / 2;
}

Comments (4) | Tags: webdev algorithms php | Author: Adam Sawicki | Share

20:45
Sun
24
Jul 2011

DevMeeting and Demoscene Night

Yesterday I attended two events related to my interests. First was about collision detection in JavaScript games, organized by Marek Pawłowski from devmeetings.pl. During this almost 12-hour workshop we could learn about JavaScript, as well as some theory of 2D collision detection and space partitioning techniques. Nothing new for me, but I liked formula of this workshop. We could learn some theory from slides, but most of the time we had some tasks to code on our laptops - first to implement a simple library for aspects in JavaScript and then to code Asteroids game, including precise collision detection and QuadTree. Most of the code for this game was ready - we were given a framework, as well as libraries with math and a class for QuadTree. Our task was to just to connect it together. I think it's a good way of teaching programming in practice.

Web technologies are not my main interest, but I like JavaScript. I even think  it's the most beautiful scripting language in terms of syntax. Being able to freely draw 2D (using HTML Canvas) as well as 3D graphics (using WebGL) makes it a good technology for learning and prototyping geometry or gameplay algorithms. Marek also pointed on the DevMeeting an interesting conclusion that it's very easy to port algorithms from C/C++ to JavaScript. But on the other hand, Dab reminded me today that Lua is a scripting language with very similar features, but faster and more lightweight interpreter, so it's still better choice as a scripting language embedded in high-performance software like games.


More photos

Second event was Noc z Demosceną - Demoscene Night. It took place in Fabryka Kotłów club (former No Mercy). During that night we could see some olschool, as well as newschool demos presented on a a big screen and, what is most important, meet some nice people there. Thanks Voyager for organizing this event! It was great especially because the 3-day demoscene party RiverWash, which took place here in Warsaw in last 2 years, this year is in Łódź and I can't attend it. This night was very inspiring and now I feel like developing a technology to make a demo :)

Comments (0) | Tags: demoscene webdev javascript math events | Author: Adam Sawicki | Share

23:32
Sat
16
Apr 2011

Hakaton - HTML5 Programming Event

Today I was on Hakaton - a full day event organized by Google at Warsaw University of Technology. It was actually a contest in HTML5 programming. I had no previous experience in HTML5, but as a team with two other participants we scored 2nd place out of 17, won nice backpacks and books on web design :)

The theme was "Creative Science", but as always in such contests, participants just coded different stuff. Our entry is a simulation game where creatures of different species (red, green and blue) move around and do different things. Red creatures are predators - they have to eat blue ones or else they die from starvation. Blue ones try to avoid reds, eat green plants and form couples to generate offspring. Finally, green creatures do not move - they are plants, they just grow by generating new elements. Interesting situations can emerge from such simple rules. For example, sometimes only plants remain and grow infinitely, but sometimes blue creatures consume all plants and breed to a large number. We even managed to make it interactive - you can put new creatures on the map with mouse clicks. The game is coded in HTML5 and JavaScript using <canvas>. It requires a modern web browser with support for these technologies. You can play our game online here:

RGBCreatures

What I also liked was extensive use of Twitter during the party. #hakaton was second most popular hashtag in Poland today! Some screenshots:

RGB Creatures

Comments (0) | Tags: webdev events competitions html | Author: Adam Sawicki | Share

20:16
Fri
04
Jun 2010

Smarty Cheatsheet

I knew about this before, but today I've found some time to deeply study Smarty - a free template engine for PHP. Templates in webdev (not to confuse with templates in C++) look like an interesting concept, because they separate PHP code from HTML code. I wish I used them from the start during coding my homepage and the www.gamedev.pl website instead of print()-ing HTML tags directly...

Anyway, I've written a small Smarty Cheatseet. Of course it makes sense only after studying the original library documentation, it cannot replace it.

By the way, I was also looking for some PHP library for creating RSS or ATOM feeds and I've found Feedcreator. Now I'm going to make something useful with it...

NEW: This "something" is an RSS feed for newest screenshots uploaded into www.gamedev.pl website: Feed Warsztat - Screeny, as well as for projects: Feed Warsztat - Projekty.

Comments (17) | Tags: webdev php libraries | Author: Adam Sawicki | Share

08:34
Sun
22
Feb 2009

Znajdowanie podobnych stringów

Kiedy wpisujemy w Google jakieś słowo, które jest ewidentną pomyłką, wyszukiwarka sugeruje jego poprawną wersję (np. Programmowanie). Jak zrobić coś takiego i ogólnie jak wyszukiwać w bazie danych podobne łańcuchy, by uodpornić pisaną stronę WWW na drobne pomyłki we wprowadzonym zapytaniu albo wyświetlać sugestię poprawnej pisowni? Niedawno kolega, którego poznałem przy piwie, zdradził mi kilka ciekawych pomysłów.

Po pierwsze, łańcuch trzeba przeliczyć na Hash - inny łańcuch, który dopiero jest wyszukiwany w bazie danych. Algorytm na ten Hash może wyglądać różnie, np.:

Taki Hash wyszukiwany jest w bazie danych, przy czym z bazy pobierany jest nie jeden pasujący rekord, ale też kilka sąsiednich rekordów (poprzednich i następnych wg kolejności alfabetycznej).

Następnie każdy z wyników zwróconych z bazy danych jest porównywany z hashem słowa wejściowego algorytmem Levenshtein Distance (który zwraca podobieństwo dwóch łańcuchów, tak jakby odległość między nimi). Jego wynik mnożony jest przez częstość występowania danego słowa wyszukanego w bazie (czyli np. po prostu ilość wystąpień w skatalogowanym tekście). Np. Punkty = Częstość_słowa / Levenshtein_distance.

Na koniec wybierane jest to słowo lub słowa spośród wyszukanych z bazy danych, które mają największy ten współczynnik Punkty.

Comments (0) | Tags: webdev algorithms | Author: Adam Sawicki | Share

21:24
Wed
21
Jan 2009

Pasek przełączania stron w PHP

Tym razem, nietypowo, napiszę o programowaniu stron WWW w PHP, a konkretnie o kwestii przełączania między stronami. Jeśli lista zarejestrowanych użytkowników, dodanych projektów, newsów czy czegokolwiek jest długa, istnieją różne rozwiązania na jej pokazywanie. Pierwsza to pokazać wszytkie (jak lista Parties na pouet.net). Druga to pokazać wszystkie na wybraną literę (jak lista Groups na pouet.net). Ta najczęściej stosowana to grupować obiekty po kilka na stronie i dać możliwość przełączania się między numerami stron.

Z kolei wybór strony też można pokazywać na różne sposoby. Można wstawić formularz z kontrolką <select>, czyli ComboBox. Można pokazać listę numerów stron. Jeśli jednak sama ta lista jest długa, warto ją skrócić. Tu właśnie, kończąc ten wstęp, chciałbym zaprezentować kawałek kodu PHP, który ostatnio napisałem. Wprowadziłem go do swojej strony domowej oraz na www.gamedev.pl. Wzorem SMF (używanego na naszym forum.gamedev.pl) pokazuje tylko numer strony bieżącej, pierwszej, ostatniej, dwóch poprzednich, dwóch następnych oraz dodatkowe strzałeczki do następnej i poprzedniej. Oto kod: Pasek_stron_PHP.txt. Tak to wygląda:

Pasek przełączania stron w PHP

Comments (1) | Tags: php webdev web gui | Author: Adam Sawicki | Share

Pages: 1 2 >

STAT NO AD [Stat] [Admin] [STAT NO AD] [pub] [Mirror] Copyright © 2004-2017 Adam Sawicki
Copyright © 2004-2017 Adam Sawicki