Autor Wątek: szarady  (Przeczytany 7283 razy)

Offline lazarus

  • Czeladnik
  • Czeladnik
  • *
  • Wiadomości: 60
  • Reputacja: +1/-0
  • Płeć: Mężczyzna
    • Zobacz profil
Odp: szarady
« Odpowiedź #15 dnia: Wrzesień 04, 2016, 22:42:37 »
Dzięki Marcinie i cieszę się, że niektóre się nadają - większość była robiona pod presją czasową i chętnie bym w tamte miejsca wrócił i zrobił je ponownie.

Fajnie to wygląda, nawet trochę potestowałem. Podoba mi się przyciąganie elementów do siebie gdy pasują, obracać też można; ogólnie wciągające :).

A jak generujesz elementy? Trzeba to robić ręcznie, czy jest jakiś automatyczny algorytm (podejrzewam, że coś powinno być)? Czy też właśnie raz robisz szablon o danych rozmiarach i później można tylko podmieniać obrazki do wycinki? Aż mnie to zaintrygowało :)

Offline MarcinRejment

  • Czeladnik
  • Czeladnik
  • *
  • Wiadomości: 84
  • Reputacja: +2/-0
    • Zobacz profil
    • Marcin Rejment - Fotografia Przyrodnicza
Odp: szarady
« Odpowiedź #16 dnia: Wrzesień 04, 2016, 23:58:41 »
Mariusz to ja dziękuję!
Zdjęcia są świetne, sam mam tylko samą przyrodę na których w większości mam nieostre tło. Z tego powodu monotonnie się to układa. Twoje zdjęcia są naprawdę świetne. Świetnie wykonane i świetnie na puzzle pasują!

Co do samych puzzli to dobrze podejrzewasz. Korzystam ze zrobionego przez siebie szablonu, który potem sprzężam z PHP. Do pracy z grafiką używam biblioteki GD. W wielkim skrócie wygląda to tak, że skrypt posiłkując się grafiką szablonu robi kolejne kopie puzzli z podstawionego mu zdjęcia. Tak to sobie wymyśliłem, wydaje mi się, że to logiczne. Nie wiem, może istnieją jakieś gotowe sposoby, właściwie to nawet nie szukałem... Ale przynajmniej teraz jestem w stanie wszystko sobie poprawić i dopasować dokładnie pod moje potrzeby.

Tak więc, kiedy mam już szablony, sama produkcja puzzli nie wymaga już ode mnie większego wkładu. Po prostu ustawiam rodzaj szablonu, nazwy, linki i startuję. Po 2-3 minutach mam puzzle gotowe, wstawione na stronę;]

Potem podnoszenie, obracanie i inne akcje to już javascript. Z javascript na razie mam najwięcej kłopotu - można powiedzieć, że uczę się go. Ale jakoś idę do przodu, jeszcze rok temu nie wiedziałem jak mam się zabrać za puzzle;] - bo już od dawna pomysł kołatał mi się po głowie;]
pozdr
« Ostatnia zmiana: Wrzesień 05, 2016, 00:00:18 przez MarcinRejment »
http://www.marcinrejment.pl
http://www.logifan.pl

Offline lazarus

  • Czeladnik
  • Czeladnik
  • *
  • Wiadomości: 60
  • Reputacja: +1/-0
  • Płeć: Mężczyzna
    • Zobacz profil
Odp: szarady
« Odpowiedź #17 dnia: Wrzesień 06, 2016, 22:55:07 »
Grunt to automatyzacja :)

Z ciekawości wpisałem sobie na listę TODO: zbadanie kwestii algorytmów generujących losowy podział na elementy automatycznie. Jakbym coś ciekawego znalazł lub zrobił, to dam Ci znać.

Pozdro!

Offline MarcinRejment

  • Czeladnik
  • Czeladnik
  • *
  • Wiadomości: 84
  • Reputacja: +2/-0
    • Zobacz profil
    • Marcin Rejment - Fotografia Przyrodnicza
Odp: szarady
« Odpowiedź #18 dnia: Wrzesień 07, 2016, 00:50:17 »
chmm. myślisz, że można dostać gotowy skrypt dzielący fotke na losowe elemeny puzzle? to by było interesujące...
jeśli już zrobię szablon - co w przypadku tego który właśnie niedawno skończyłem zajęło mi około 3-4 dni (szablon składa się z 204 elementów) to potem całą resztę już zautomatyzowałem chyba można powiedzieć maksymalnie.
Czyli teraz wystarczy mi około 5 minut, żeby przerobić jakiekolwiek zdjęcie z internetu na puzzle 204 elementowe. ale jednak zrobić porządnie szablon jest ciężko. nie wymyśliłem (właściwie to nawet nie próbowałem wymyślić) funkcji, która rysowałaby te wszystkie linie. Tak z lotu od razu narzuca mi się stwierdzenie, że to już zbyt skomplikowana matematyka dla mnie.
daj znak jak znajdziesz coś ciekawego.
A tak przy okazji, też się bawisz w takie trochę programowanie?

póki co na razie zrobiłem 200 elementowe puzzle z Twojego zdjęcia w rozdzielczości 1024
http://www.logifan.pl/index.php?id=puzzle&galeria=1&pow=39&li=1#39

Świetne zdjęcie!

na razie chyba zatrzymam się na tym etapie bo muszę poprawić/uwydajnić skrypt operujący grafiką tych rozmiarów. chodzi mi o trudności wyświetlenia takich puzzli na mniejszych ekranach. mam pewne pomysły jak to zrobić więc pewnie posiedzę nad tym trochę.
pozdrawiam!
http://www.marcinrejment.pl
http://www.logifan.pl

Offline lazarus

  • Czeladnik
  • Czeladnik
  • *
  • Wiadomości: 60
  • Reputacja: +1/-0
  • Płeć: Mężczyzna
    • Zobacz profil
Odp: szarady
« Odpowiedź #19 dnia: Wrzesień 08, 2016, 19:20:51 »
Rzeczywiście fajnie sobie tam pobudowali te chatki. BTW, taka ilość elementów to dla mnie jest już poziom hardcore :).

Podział powierzchni jest problemem geometrii, więc algorytmy są. Co ciekawe jednak, większość poszukiwań zwracało wyniki na temat algorytmów rozwiązujących puzzle, nie je tworzące. Tutaj jest trochę na temat tworzenia, ale nie ma klasycznych kształtów: http://mathematica.stackexchange.com/questions/6706/how-can-i-calculate-a-jigsaw-puzzle-cut-path

Tak czy inaczej, można wymyślić kilka rozwiązań. Cała układanka może być dwuwymiarową tablicą, gdzie każdy element ma 4 właściwości "wypustek" (góra, dół, lewo, prawo) w dwóch stanach: wewnątrz, zewnątrz (pomijamy na razie wartości brzegowe). Stany są ustawiane losowo, jednak trzeba dbać, aby sąsiadujące wypustki się zgadzały.

Łatwiejszym podejściem jest myślenie o samych krawędziach między elementami. Są one losowo wygięte w lewo / prawo oraz na dół / do góry. W dwóch pętlach można generować losowe krawędzie, które utworzą elementy. Dbając o warunki brzegowe (brak wypukłości na skrajnych krawędziach) można uzyskać wstępny generator. Wczoraj wieczorem z pierwszego eksperymentu wyszło mi coś takiego jak w załączniku.

Źródło wrzuciłem na GitHuba: https://github.com/Lazarus247/jigsaw-puzzle-generator

Nie jest to jeszcze taki profesjonalny wzór jak u Ciebie, ale wprowadzając więcej losowości do kształtu i położenia wypustek można dostać więcej unikalnych kształtów. Ilość elementów można łatwo zmieniać w źródle, ale można też dorobić interfejs. Za każdym odświeżeniem index.htm wygeneruje się inny wzór.

Tak, jestem programistą, więc od czasu do czasu zdarza mi się trochę bawić w programowanie ;). Lubię programować grafikę 3D, ale na co dzień robię "nudniejsze" systemy i narzędzia.

Jeśli rozwinę ten temat generowania w coś bardziej zaawansowanego, to napiszę artykuł i wstawię na http://mariuszbartosik.com

Gdybyś wolał użyć gotowców, to googlując "Jigsaw Puzzle Generator" można znaleźć kilka (ale ich nie testowałem).

Pozdro!

Offline MarcinRejment

  • Czeladnik
  • Czeladnik
  • *
  • Wiadomości: 84
  • Reputacja: +2/-0
    • Zobacz profil
    • Marcin Rejment - Fotografia Przyrodnicza
Odp: szarady
« Odpowiedź #20 dnia: Wrzesień 09, 2016, 02:54:07 »
Mariusz naprawde ciekawie się to zapowiada. Przez weekend przeanalizuję sobie dokładniej kod od Ciebie.Na razie jest zbyt symetrycznie zdecydowanie ale punkt wyjścia już jest. Ogólnie każdy puzzel musi być niepowtarzalny. z tą nieregularnością mam najwięcej kłopotów właśnie.
spróbuję też wygooglować jeszcze te gotowce. Dzięki za sugestie!
odezwę się jak coś znajdę ciekawego.

Post do??czony: [time]Wrzesień 10, 2016, 06:06:10[/time]
Mariusz dodałem trochę elementu losowości za Twoją poradą do Twojego kodu i rzeczywiście można tym osiągnąć całkiem przyzwoity rezultat. Oczywiście jeszcze daleko temu do ideału ale jak najbardziej można to zrobić i co najważniejsze nie wydaje się takie trudne...
Na tyle mnie to zachęciło, że wezmę się za to chyba tyle że w PHP chciałbym to zrobić. Jeśli można, chciałbym wesprzeć się Twoim kodem.

tutaj kod, który nieco zmodyfikowałem:
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.lineJoin = 'round';
      context.lineWidth = 1;
      var size = 60;
      var bumb_1;
      var bumb_2;
      var stop_1;
      var stop_1a;
      var stop_2;
      var stop_2a;
      var pom;
      var przesuniecie;
      var amountX = 12;
      var amountY = 8;
      context.translate((800 - size * amountX) / 2.0, (600 - size * amountY) / 2.0);  // center on canvas
      for (i = 0; i < amountX; i++) {
         for (j = 0; j < amountY; j++) {
            bumb_1=Math.random() > 0.5 ? 0.05 : 0.025;
            bumb_2=Math.random() > 0.5 ? 0.05 : 0.025;
            stop_1=Math.random();
            stop_1=stop_1 > 0.5 ? 0.5 : stop_1;
            stop_1=stop_1 < 0.3 ? 0.3 : Math.round(stop_1*100)/100;
            stop_1a=Math.random() > 0.5 ? 0.15 : 0.1;
            przesuniecie=Math.random() > 0.5 ? 0.25 : 0.2;
            stop_2a=Math.random() > 0.5 ? 0.15 : 0.1;
            stop_2=stop_1+przesuniecie;
            context.beginPath();                // horizontal
            context.moveTo(i * size, j * size);
            context.lineTo(i * size, j * size + stop_1 * size);
            flip = Math.random() > 0.5 ? 1.0 : -1.0;
            flip = (i == 0 ? 0 : flip);         // no bump if left border
            pom = flip==0 ? 0 : 1;
            context.quadraticCurveTo(i * size + flip * 0.1 * size, j * size + stop_1 * size + bumb_1 * size, i * size + flip * stop_1a * size, j * size + stop_1 * size);
            context.bezierCurveTo(i * size + flip * stop_1a * size + (flip * 0.2 * size), j * size + stop_1 * size + (-0.1 * size), i * size + flip * stop_2a * size + (flip * 0.2 * size), j * size + stop_2 * size + 0.1 * size, i * size + flip * stop_2a * size, j * size + stop_2 * size);
            context.quadraticCurveTo(i * size + flip * 0.1 * size * pom, j * size + stop_2 * size - bumb_2 * size, i * size * pom, j * size + stop_2 * size);
            context.lineTo(i * size, j * size + 1.0 * size);
            context.stroke();
            bumb_1=Math.random() > 0.5 ? 0.1 : 0.05;
            bumb_2=Math.random() > 0.5 ? 0.1 : 0.05;
            stop_1=Math.random();
            stop_1=stop_1 > 0.5 ? 0.5 : stop_1;
            stop_1=stop_1 < 0.3 ? 0.3 : Math.round(stop_1*100)/100;
            stop_1a=Math.random() > 0.5 ? 0.2 : 0.15;
            przesuniecie=Math.random() > 0.5 ? 0.25 : 0.2;
            stop_2a=Math.random() > 0.5 ? 0.25 : 0.2;
            stop_2=stop_1+przesuniecie;
            context.beginPath();                // vertical
            context.moveTo(i * size, j * size);
            context.lineTo(i * size + stop_1 * size, j * size);
            flip = Math.random() > 0.5 ? 1.0 : -1.0;
            flip = (j == 0 ? 0 : flip);         // no bump if top border
            pom = flip==0 ? 0 : 1;
            context.quadraticCurveTo(i * size + stop_1 * size + bumb_1 * size, j * size + flip * 0.1 * size, i * size + stop_1 * size, j * size + flip * stop_1a * size);
            context.bezierCurveTo(i * size + stop_1 * size + (-0.1 * size), j * size + flip * stop_1a * size + (flip * 0.2 * size), i * size + stop_2 * size + 0.1 * size, j * size + flip * stop_2a * size + (flip * 0.2 * size), i * size + stop_2 * size, j * size + flip * stop_2a * size);
            context.quadraticCurveTo(i * size + stop_2 * size - bumb_2 * size, j * size + flip * 0.1 * size * pom, i * size + stop_2 * size, j * size * pom);
            context.lineTo(i * size + 1.0 * size, j * size);
            context.stroke();
         }
      }
      context.beginPath();                    // bottom and right border
      context.moveTo(0, amountY * size);
      context.lineTo(amountX * size, amountY * size);
      context.lineTo(amountX * size, 0);
      context.stroke();
    </script>
i efekt końcowy:
http://www.na.marcinrejment.pl/pliki/index_test_1.html
« Ostatnia zmiana: Wrzesień 10, 2016, 06:08:02 przez MarcinRejment »
http://www.marcinrejment.pl
http://www.logifan.pl

Offline lazarus

  • Czeladnik
  • Czeladnik
  • *
  • Wiadomości: 60
  • Reputacja: +1/-0
  • Płeć: Mężczyzna
    • Zobacz profil
Odp: szarady
« Odpowiedź #21 dnia: Wrzesień 10, 2016, 17:51:44 »
Hej Marcinie, widzę, że pracujesz nad tym po nocach :).

Tak, najwięcej pracy teraz to eksperymentalny dobór zakresów losowości, dopracowanie kształtów krzywych wypustek itd. Jak najbardziej możesz użyć tego co napisałem, przepisać do PHP itd. Chwilowo pracuję nad innym artykułem, ale wrócę jeszcze do tego, zobaczymy, co wyjdzie. Tak czy inaczej idziesz w dobrym kierunku i będziesz miał automat do generowania losowych wzorów w locie :).