{"id":1228,"date":"2026-04-11T14:30:59","date_gmt":"2026-04-11T12:30:59","guid":{"rendered":"https:\/\/trzykody.pl\/?p=1228"},"modified":"2026-04-11T14:31:01","modified_gmt":"2026-04-11T12:31:01","slug":"prosty-rysunek-pokoju","status":"publish","type":"post","link":"https:\/\/trzykody.pl\/index.php\/2026\/04\/11\/prosty-rysunek-pokoju\/","title":{"rendered":"Prosty rysunek pokoju"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Rysowanie uproszczonego planu pomieszczenia to w praktyce zadanie z pogranicza grafiki komputerowej, geometrii i reprezentacji danych. Nawet bardzo prosty model pokoju wymaga decyzji: jak zapisa\u0107 \u015bciany, jak odwzorowa\u0107 skal\u0119, jak przechowywa\u0107 obiekty oraz jak je narysowa\u0107 na ekranie lub w pliku. Te decyzje przek\u0142adaj\u0105 si\u0119 p\u00f3\u017aniej na poprawno\u015b\u0107 oblicze\u0144, mo\u017cliwo\u015b\u0107 modyfikacji oraz czytelno\u015b\u0107 wizualn\u0105. W wielu zastosowaniach \u2013 od prostych aplikacji edukacyjnych po narz\u0119dzia do planowania wn\u0119trz \u2013 wystarcza model dwuwymiarowy oparty o uk\u0142ad wsp\u00f3\u0142rz\u0119dnych, w kt\u00f3rym reprezentujemy \u015bciany jako odcinki, a meble jako prostok\u0105ty, co dobrze oddaje ide\u0119 jak\u0105 niesie <strong>prosty rysunek pokoju<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Spis Tre\u015bci<\/h2><nav><ol><li><a href=\"#prosty-rysunek-pokoju-jako-reprezentacja-geometryczna-w-ukladzie-wspolrzednych-kartezjanskich-i-jego-ograniczenia\">Prosty rysunek pokoju jako reprezentacja geometryczna w uk\u0142adzie wsp\u00f3\u0142rz\u0119dnych kartezja\u0144skich i jego ograniczenia<\/a><\/li><li><a href=\"#struktury-danych-opisujace-sciany-meble-i-elementy-wyposazenia-w-kontekscie-prostego-modelu-graficznego\">Struktury danych opisuj\u0105ce \u015bciany, meble i elementy wyposa\u017cenia w kontek\u015bcie prostego modelu graficznego<\/a><\/li><li><a href=\"#prosty-rysunek-pokoju-w-kontekscie-algorytmu-rysowania-linii-i-prostokatow-na-ekranie-lub-w-pliku-graficznym\">Prosty rysunek pokoju w kontek\u015bcie algorytmu rysowania linii i prostok\u0105t\u00f3w na ekranie lub w pliku graficznym<\/a><\/li><li><a href=\"#obsluga-skali-i-transformacji-wspolrzednych-przy-przejsciu-z-modelu-logicznego-do-obrazu\">Obs\u0142uga skali i transformacji wsp\u00f3\u0142rz\u0119dnych przy przej\u015bciu z modelu logicznego do obrazu<\/a><\/li><li><a href=\"#wykrywanie-kolizji-i-poprawnosc-geometryczna-przy-rozmieszczaniu-obiektow-w-pokoju\">Wykrywanie kolizji i poprawno\u015b\u0107 geometryczna przy rozmieszczaniu obiekt\u00f3w w pokoju<\/a><ol><li><a href=\"#prosty-rysunek-pokoju-jako-baza-do-dalszego-rozwoju-eksport-do-svg-json-i-wizualizacja-w-przegladarce\">Prosty rysunek pokoju jako baza do dalszego rozwoju: eksport do SVG, JSON i wizualizacja w przegl\u0105darce<\/a><\/li><\/ol><\/li><li><a href=\"#uwagi-praktyczne-wynikajace-z-implementacji-i-bledow-spotykanych-w-prostych-projektach-graficznych\">Uwagi praktyczne wynikaj\u0105ce z implementacji i b\u0142\u0119d\u00f3w spotykanych w prostych projektach graficznych<\/a><\/li><li><a href=\"#faq\">FAQ<\/a><\/li><\/ol><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prosty-rysunek-pokoju-jako-reprezentacja-geometryczna-w-ukladzie-wspolrzednych-kartezjanskich-i-jego-ograniczenia\">Prosty rysunek pokoju jako reprezentacja geometryczna w uk\u0142adzie wsp\u00f3\u0142rz\u0119dnych kartezja\u0144skich i jego ograniczenia<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Podstaw\u0105 jest uk\u0142ad wsp\u00f3\u0142rz\u0119dnych 2D. Przyjmujemy zwykle, \u017ce punkt (0,0) znajduje si\u0119 w lewym dolnym rogu przestrzeni roboczej. Ka\u017cdy element rysunku opisujemy wsp\u00f3\u0142rz\u0119dnymi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u015bciany \u2192 odcinki (x1, y1) \u2192 (x2, y2)<\/li>\n\n\n\n<li>meble \u2192 prostok\u0105ty (x, y, szeroko\u015b\u0107, wysoko\u015b\u0107)<\/li>\n\n\n\n<li>drzwi\/okna \u2192 odcinki lub \u0142uki<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Wa\u017cna decyzja dotyczy jednostek. Je\u015bli 1 jednostka odpowiada 1 cm, uzyskujemy wysok\u0105 dok\u0142adno\u015b\u0107 kosztem wi\u0119kszych warto\u015bci liczbowych. Przy skali 1 jednostka = 10 cm zapis jest kr\u00f3tszy, ale tracimy szczeg\u00f3\u0142y.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Przyk\u0142ad:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>pok\u00f3j 4 m \u00d7 5 m<\/li>\n\n\n\n<li>zapis dok\u0142adny: 400 \u00d7 500<\/li>\n\n\n\n<li>zapis uproszczony: 40 \u00d7 50<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ograniczenia modelu:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>brak informacji o wysoko\u015bci<\/li>\n\n\n\n<li>brak perspektywy<\/li>\n\n\n\n<li>brak fizycznych w\u0142a\u015bciwo\u015bci obiekt\u00f3w<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"struktury-danych-opisujace-sciany-meble-i-elementy-wyposazenia-w-kontekscie-prostego-modelu-graficznego\">Struktury danych opisuj\u0105ce \u015bciany, meble i elementy wyposa\u017cenia w kontek\u015bcie prostego modelu graficznego<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Minimalny model danych mo\u017cna sprowadzi\u0107 do kilku struktur.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Element<\/th><th>Struktura<\/th><th>Opis<\/th><\/tr><\/thead><tbody><tr><td>\u015aciana<\/td><td>(x1, y1, x2, y2)<\/td><td>Odcinek<\/td><\/tr><tr><td>Mebel<\/td><td>(x, y, w, h)<\/td><td>Prostok\u0105t<\/td><\/tr><tr><td>Drzwi<\/td><td>(x, y, szeroko\u015b\u0107, k\u0105t)<\/td><td>Segment + rotacja<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Przyk\u0142ady implementacji:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>J\u0119zyk<\/th><th>Kod<\/th><\/tr><\/thead><tbody><tr><td>Python<\/td><td><code>python\\nwalls = [(0,0,400,0), (400,0,400,300), (400,300,0,300), (0,300,0,0)]\\nfurniture = [(50,50,100,50)]\\n<\/code><\/td><\/tr><tr><td>C<\/td><td><code>c\\nstruct Wall { int x1,y1,x2,y2; };\\nstruct Rect { int x,y,w,h; };\\n<\/code><\/td><\/tr><tr><td>C++<\/td><td><code>cpp\\nstruct Wall { int x1,y1,x2,y2; };\\nstd::vector&lt;Wall&gt; walls;\\n<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Warto unika\u0107 przechowywania danych pochodnych, np. d\u0142ugo\u015bci \u015bciany, bo mo\u017cna j\u0105 zawsze obliczy\u0107.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prosty-rysunek-pokoju-w-kontekscie-algorytmu-rysowania-linii-i-prostokatow-na-ekranie-lub-w-pliku-graficznym\">Prosty rysunek pokoju w kontek\u015bcie algorytmu rysowania linii i prostok\u0105t\u00f3w na ekranie lub w pliku graficznym<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Rysowanie sprowadza si\u0119 do rasteryzacji.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>linie \u2192 algorytm Bresenhama<\/li>\n\n\n\n<li>prostok\u0105ty \u2192 cztery linie lub wype\u0142nienie<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Algorytm Bresenhama dzia\u0142a w czasie liniowym wzgl\u0119dem d\u0142ugo\u015bci odcinka i nie wymaga liczb zmiennoprzecinkowych.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>J\u0119zyk<\/th><th>Kod<\/th><\/tr><\/thead><tbody><tr><td>C<\/td><td><code>c\\nvoid drawLine(int x1,int y1,int x2,int y2){\\n int dx=abs(x2-x1), dy=abs(y2-y1);\\n int sx = x1&lt;x2?1:-1;\\n int sy = y1&lt;y2?1:-1;\\n int err = dx-dy;\\n while(1){\\n putpixel(x1,y1);\\n if(x1==x2 &amp;&amp; y1==y2) break;\\n int e2=2*err;\\n if(e2&gt;-dy){ err-=dy; x1+=sx; }\\n if(e2&lt;dx){ err+=dx; y1+=sy; }\\n }\\n}\\n<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">| Python | <code>python\\ndef draw_rect(x,y,w,h):\\n draw_line(x,y,x+w,y)\\n draw_line(x+w,y,x+w,y+h)\\n draw_line(x+w,y+h,x,y+h)\\n draw_line(x,y+h,x,y)\\n<\/code> |<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Z\u0142o\u017cono\u015b\u0107:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>linia: O(n)<\/li>\n\n\n\n<li>prostok\u0105t: O(4n)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"obsluga-skali-i-transformacji-wspolrzednych-przy-przejsciu-z-modelu-logicznego-do-obrazu\">Obs\u0142uga skali i transformacji wsp\u00f3\u0142rz\u0119dnych przy przej\u015bciu z modelu logicznego do obrazu<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Model logiczny nie jest bezpo\u015brednio tym, co trafia na ekran.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Stosujemy trzy operacje:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>skalowanie<\/li>\n\n\n\n<li>przesuni\u0119cie<\/li>\n\n\n\n<li>odwr\u00f3cenie osi Y<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Wzory:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Operacja<\/th><th>Wz\u00f3r<\/th><\/tr><\/thead><tbody><tr><td>Skalowanie<\/td><td>x&#8217; = x * s<\/td><\/tr><tr><td>Przesuni\u0119cie<\/td><td>x&#8217; = x + dx<\/td><\/tr><tr><td>Odwr\u00f3cenie Y<\/td><td>y&#8217; = H &#8211; y<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Przyk\u0142ad implementacji:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>J\u0119zyk<\/th><th>Kod<\/th><\/tr><\/thead><tbody><tr><td>Python<\/td><td><code>python\\ndef transform(x,y,scale,dx,dy,H):\\n x2 = x*scale + dx\\n y2 = H - (y*scale + dy)\\n return x2,y2\\n<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Typowy b\u0142\u0105d: brak odwr\u00f3cenia osi Y, przez co rysunek jest odwr\u00f3cony.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"wykrywanie-kolizji-i-poprawnosc-geometryczna-przy-rozmieszczaniu-obiektow-w-pokoju\">Wykrywanie kolizji i poprawno\u015b\u0107 geometryczna przy rozmieszczaniu obiekt\u00f3w w pokoju<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kolizje wykrywamy dla prostok\u0105t\u00f3w osiowo wyr\u00f3wnanych.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><math xmlns=\"http:\/\/www.w3.org\/1998\/Math\/MathML\"><semantics><mrow><msub><mi>x<\/mi><mn>1<\/mn><\/msub><mo>&lt;<\/mo><msub><mi>x<\/mi><mn>2<\/mn><\/msub><mo>+<\/mo><msub><mi>w<\/mi><mn>2<\/mn><\/msub><mo>\u2227<\/mo><msub><mi>x<\/mi><mn>1<\/mn><\/msub><mo>+<\/mo><msub><mi>w<\/mi><mn>1<\/mn><\/msub><mo>&gt;<\/mo><msub><mi>x<\/mi><mn>2<\/mn><\/msub><mo>\u2227<\/mo><msub><mi>y<\/mi><mn>1<\/mn><\/msub><mo>&lt;<\/mo><msub><mi>y<\/mi><mn>2<\/mn><\/msub><mo>+<\/mo><msub><mi>h<\/mi><mn>2<\/mn><\/msub><mo>\u2227<\/mo><msub><mi>y<\/mi><mn>1<\/mn><\/msub><mo>+<\/mo><msub><mi>h<\/mi><mn>1<\/mn><\/msub><mo>&gt;<\/mo><msub><mi>y<\/mi><mn>2<\/mn><\/msub><\/mrow><annotation encoding=\"application\/x-tex\">x_1 &lt; x_2 + w_2 \\land x_1 + w_1 &gt; x_2 \\land y_1 &lt; y_2 + h_2 \\land y_1 + h_1 &gt; y_2<\/annotation><\/semantics><\/math>x1\u200b&lt;x2\u200b+w2\u200b\u2227x1\u200b+w1\u200b&gt;x2\u200b\u2227y1\u200b&lt;y2\u200b+h2\u200b\u2227y1\u200b+h1\u200b&gt;y2\u200b<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Warunek oznacza, \u017ce dwa prostok\u0105ty nachodz\u0105 na siebie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Implementacja:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>J\u0119zyk<\/th><th>Kod<\/th><\/tr><\/thead><tbody><tr><td>C++<\/td><td><code>cpp\\nbool collide(Rect a, Rect b){\\n return (a.x &lt; b.x+b.w &amp;&amp; a.x+a.w &gt; b.x &amp;&amp;\\n a.y &lt; b.y+b.h &amp;&amp; a.y+a.h &gt; b.y);\\n}\\n<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Z\u0142o\u017cono\u015b\u0107:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>naiwnie: O(n\u00b2)<\/li>\n\n\n\n<li>optymalnie: u\u017cycie podzia\u0142u przestrzeni<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"prosty-rysunek-pokoju-jako-baza-do-dalszego-rozwoju-eksport-do-svg-json-i-wizualizacja-w-przegladarce\">Prosty rysunek pokoju jako baza do dalszego rozwoju: eksport do SVG, JSON i wizualizacja w przegl\u0105darce<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Format SVG pozwala na zapis wektorowy.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Format<\/th><th>Kod<\/th><\/tr><\/thead><tbody><tr><td>SVG<\/td><td><code>xml\\n&lt;svg width=\\\"500\\\" height=\\\"400\\\"&gt;\\n &lt;rect x=\\\"50\\\" y=\\\"50\\\" width=\\\"100\\\" height=\\\"50\\\" fill=\\\"gray\\\"\/&gt;\\n &lt;line x1=\\\"0\\\" y1=\\\"0\\\" x2=\\\"400\\\" y2=\\\"0\\\" stroke=\\\"black\\\"\/&gt;\\n&lt;\/svg&gt;\\n<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Format JSON:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Format<\/th><th>Kod<\/th><\/tr><\/thead><tbody><tr><td>JSON<\/td><td><code>json\\n{\\n \\\"walls\\\": [[0,0,400,0]],\\n \\\"furniture\\\": [[50,50,100,50]]\\n}\\n<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Zastosowania:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>zapis projektu<\/li>\n\n\n\n<li>komunikacja mi\u0119dzy modu\u0142ami<\/li>\n\n\n\n<li>wizualizacja w przegl\u0105darce<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"uwagi-praktyczne-wynikajace-z-implementacji-i-bledow-spotykanych-w-prostych-projektach-graficznych\">Uwagi praktyczne wynikaj\u0105ce z implementacji i b\u0142\u0119d\u00f3w spotykanych w prostych projektach graficznych<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Niesp\u00f3jna skala prowadzi do b\u0142\u0119d\u00f3w trudnych do wykrycia.<br>Brak zamkni\u0119cia \u015bcian powoduje nieszczelny model.<br>Zaokr\u0105glenia zmiennoprzecinkowe wprowadzaj\u0105 przesuni\u0119cia pikselowe.<br>Zbyt du\u017ca liczba obiekt\u00f3w bez optymalizacji spowalnia rysowanie.<br>Nieprawid\u0142owa kolejno\u015b\u0107 rysowania powoduje zas\u0142anianie element\u00f3w.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">FAQ<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Czy trzeba u\u017cywa\u0107 algorytmu Bresenhama?<\/strong><br>Nie, ale jest wydajny i prosty.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Czy model 2D wystarcza?<\/strong><br>Tak do planowania, nie do wizualizacji 3D.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Jak dobra\u0107 skal\u0119?<\/strong><br>Najcz\u0119\u015bciej 1 jednostka = 1 cm lub 10 cm.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Czy SVG jest lepsze od bitmapy?<\/strong><br>Tak przy skalowaniu i edycji.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Jak wykrywa\u0107 kolizje?<\/strong><br>Test AABB.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Czy Python nadaje si\u0119 do takich projekt\u00f3w?<\/strong><br>Tak, szczeg\u00f3lnie do prototyp\u00f3w.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Czy trzeba u\u017cywa\u0107 bibliotek graficznych?<\/strong><br>Nie, ale upraszczaj\u0105 prac\u0119.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\u0179r\u00f3d\u0142o Foto: Freepik<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rysowanie uproszczonego planu pomieszczenia to w praktyce zadanie z pogranicza grafiki komputerowej, geometrii i reprezentacji danych. Nawet bardzo prosty model pokoju wymaga decyzji: jak zapisa\u0107 \u015bciany, jak odwzorowa\u0107 skal\u0119, jak przechowywa\u0107 obiekty oraz jak je narysowa\u0107 na ekranie lub w pliku. Te decyzje przek\u0142adaj\u0105 si\u0119 p\u00f3\u017aniej na poprawno\u015b\u0107 oblicze\u0144, mo\u017cliwo\u015b\u0107 modyfikacji oraz czytelno\u015b\u0107 wizualn\u0105. W wielu zastosowaniach \u2013 od prostych aplikacji edukacyjnych po narz\u0119dzia do planowania wn\u0119trz \u2013 wystarcza model dwuwymiarowy oparty o uk\u0142ad wsp\u00f3\u0142rz\u0119dnych, w kt\u00f3rym reprezentujemy \u015bciany jako odcinki, a meble jako prostok\u0105ty, co dobrze oddaje ide\u0119 jak\u0105 niesie prosty rysunek pokoju. Prosty rysunek pokoju jako reprezentacja geometryczna w uk\u0142adzie wsp\u00f3\u0142rz\u0119dnych kartezja\u0144skich i jego ograniczenia Podstaw\u0105 jest uk\u0142ad wsp\u00f3\u0142rz\u0119dnych 2D. Przyjmujemy zwykle, \u017ce punkt (0,0) znajduje si\u0119 w lewym dolnym rogu przestrzeni roboczej. Ka\u017cdy element rysunku opisujemy wsp\u00f3\u0142rz\u0119dnymi: Wa\u017cna decyzja dotyczy jednostek. Je\u015bli 1 jednostka odpowiada 1 cm, uzyskujemy wysok\u0105 dok\u0142adno\u015b\u0107 kosztem wi\u0119kszych warto\u015bci liczbowych. Przy skali 1 jednostka = 10 cm zapis jest kr\u00f3tszy, ale tracimy szczeg\u00f3\u0142y. Przyk\u0142ad: Ograniczenia modelu: Struktury danych opisuj\u0105ce \u015bciany, meble i elementy wyposa\u017cenia w kontek\u015bcie prostego modelu graficznego Minimalny model danych mo\u017cna sprowadzi\u0107 do kilku struktur. Element Struktura Opis \u015aciana (x1, y1, x2, y2) Odcinek Mebel (x, y, w, h) Prostok\u0105t Drzwi (x, y, szeroko\u015b\u0107, k\u0105t) Segment + rotacja Przyk\u0142ady implementacji: J\u0119zyk Kod Python python\\nwalls = [(0,0,400,0), (400,0,400,300), (400,300,0,300), (0,300,0,0)]\\nfurniture = [(50,50,100,50)]\\n C c\\nstruct Wall { int x1,y1,x2,y2; };\\nstruct Rect { int x,y,w,h; };\\n C++ cpp\\nstruct Wall { int x1,y1,x2,y2; };\\nstd::vector&lt;Wall&gt; walls;\\n Warto unika\u0107 przechowywania danych pochodnych, np. d\u0142ugo\u015bci \u015bciany, bo mo\u017cna j\u0105 zawsze obliczy\u0107. Prosty rysunek pokoju w kontek\u015bcie algorytmu rysowania linii i prostok\u0105t\u00f3w na ekranie lub w pliku graficznym Rysowanie sprowadza si\u0119 do rasteryzacji. Algorytm Bresenhama dzia\u0142a w czasie liniowym wzgl\u0119dem d\u0142ugo\u015bci odcinka i nie wymaga liczb zmiennoprzecinkowych. J\u0119zyk Kod C c\\nvoid drawLine(int x1,int y1,int x2,int y2){\\n int dx=abs(x2-x1), dy=abs(y2-y1);\\n int sx = x1&lt;x2?1:-1;\\n int sy = y1&lt;y2?1:-1;\\n int err = dx-dy;\\n while(1){\\n putpixel(x1,y1);\\n if(x1==x2 &amp;&amp; y1==y2) break;\\n int e2=2*err;\\n if(e2&gt;-dy){ err-=dy; x1+=sx; }\\n if(e2&lt;dx){ err+=dx; y1+=sy; }\\n }\\n}\\n | Python | python\\ndef draw_rect(x,y,w,h):\\n draw_line(x,y,x+w,y)\\n draw_line(x+w,y,x+w,y+h)\\n draw_line(x+w,y+h,x,y+h)\\n draw_line(x,y+h,x,y)\\n | Z\u0142o\u017cono\u015b\u0107: Obs\u0142uga skali i transformacji wsp\u00f3\u0142rz\u0119dnych przy przej\u015bciu z modelu logicznego do obrazu Model logiczny nie jest bezpo\u015brednio tym, co trafia na ekran. Stosujemy trzy operacje: Wzory: Operacja Wz\u00f3r Skalowanie x&#8217; = x * s Przesuni\u0119cie x&#8217; = x + dx Odwr\u00f3cenie Y y&#8217; = H &#8211; y Przyk\u0142ad implementacji: J\u0119zyk Kod Python python\\ndef transform(x,y,scale,dx,dy,H):\\n x2 = x*scale + dx\\n y2 = H &#8211; (y*scale + dy)\\n return x2,y2\\n Typowy b\u0142\u0105d: brak odwr\u00f3cenia osi Y, przez co rysunek jest odwr\u00f3cony. Wykrywanie kolizji i poprawno\u015b\u0107 geometryczna przy rozmieszczaniu obiekt\u00f3w w pokoju Kolizje wykrywamy dla prostok\u0105t\u00f3w osiowo wyr\u00f3wnanych. x1&lt;x2+w2\u2227x1+w1&gt;x2\u2227y1&lt;y2+h2\u2227y1+h1&gt;y2x_1 &lt; x_2 + w_2 \\land x_1 + w_1 &gt; x_2 \\land y_1 &lt; y_2 + h_2 \\land y_1 + h_1 &gt; y_2x1\u200b&lt;x2\u200b+w2\u200b\u2227x1\u200b+w1\u200b&gt;x2\u200b\u2227y1\u200b&lt;y2\u200b+h2\u200b\u2227y1\u200b+h1\u200b&gt;y2\u200b Warunek oznacza, \u017ce dwa prostok\u0105ty nachodz\u0105 na siebie. Implementacja: J\u0119zyk Kod C++ cpp\\nbool collide(Rect a, Rect b){\\n return (a.x &lt; b.x+b.w &amp;&amp; a.x+a.w &gt; b.x &amp;&amp;\\n a.y &lt; b.y+b.h &amp;&amp; a.y+a.h &gt; b.y);\\n}\\n Z\u0142o\u017cono\u015b\u0107: Prosty rysunek pokoju jako baza do dalszego rozwoju: eksport do SVG, JSON i wizualizacja w przegl\u0105darce Format SVG pozwala na zapis wektorowy. Format Kod SVG xml\\n&lt;svg width=\\&#8221;500\\&#8221; height=\\&#8221;400\\&#8221;&gt;\\n &lt;rect x=\\&#8221;50\\&#8221; y=\\&#8221;50\\&#8221; width=\\&#8221;100\\&#8221; height=\\&#8221;50\\&#8221; fill=\\&#8221;gray\\&#8221;\/&gt;\\n &lt;line x1=\\&#8221;0\\&#8221; y1=\\&#8221;0\\&#8221; x2=\\&#8221;400\\&#8221; y2=\\&#8221;0\\&#8221; stroke=\\&#8221;black\\&#8221;\/&gt;\\n&lt;\/svg&gt;\\n Format JSON: Format Kod JSON json\\n{\\n \\&#8221;walls\\&#8221;: [[0,0,400,0]],\\n \\&#8221;furniture\\&#8221;: [[50,50,100,50]]\\n}\\n Zastosowania: Uwagi praktyczne wynikaj\u0105ce z implementacji i b\u0142\u0119d\u00f3w spotykanych w prostych projektach graficznych Niesp\u00f3jna skala prowadzi do b\u0142\u0119d\u00f3w trudnych do wykrycia.Brak zamkni\u0119cia \u015bcian powoduje nieszczelny model.Zaokr\u0105glenia zmiennoprzecinkowe wprowadzaj\u0105 przesuni\u0119cia pikselowe.Zbyt du\u017ca liczba obiekt\u00f3w bez optymalizacji spowalnia rysowanie.Nieprawid\u0142owa kolejno\u015b\u0107 rysowania powoduje zas\u0142anianie element\u00f3w. FAQ Czy trzeba u\u017cywa\u0107 algorytmu Bresenhama?Nie, ale jest wydajny i prosty. Czy model 2D wystarcza?Tak do planowania, nie do wizualizacji 3D. Jak dobra\u0107 skal\u0119?Najcz\u0119\u015bciej 1 jednostka = 1 cm lub 10 cm. Czy SVG jest lepsze od bitmapy?Tak przy skalowaniu i edycji. Jak wykrywa\u0107 kolizje?Test AABB. Czy Python nadaje si\u0119 do takich projekt\u00f3w?Tak, szczeg\u00f3lnie do prototyp\u00f3w. Czy trzeba u\u017cywa\u0107 bibliotek graficznych?Nie, ale upraszczaj\u0105 prac\u0119. \u0179r\u00f3d\u0142o Foto: Freepik<\/p>\n","protected":false},"author":1,"featured_media":1229,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,24],"tags":[],"class_list":["post-1228","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-grafika","category-kodowanie"],"_links":{"self":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts\/1228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/comments?post=1228"}],"version-history":[{"count":1,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts\/1228\/revisions"}],"predecessor-version":[{"id":1230,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts\/1228\/revisions\/1230"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/media\/1229"}],"wp:attachment":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/media?parent=1228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/categories?post=1228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/tags?post=1228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}