それをパズル！ -これらの同じパズルをブラウザウィンドウで直接組み立てることができるオンラインパズルジェネレーター。 以下に、この興味深いツールの作成のストーリーを説明します。
どういうわけか、夕方に座ってHabrを見ていると、同志のガンザーが、自分のニーズに合ったパズルデザイナーを探しているというメモに出会いました。 すべてはうまくいきますが、私自身は、このアクティビティで数時間を殺すことのファンとして、すぐに組み立てることができるシンプルなパズルを作成するための快適で「正しい」ツールがネットワーク上にないことに気付きました。
そしてここで、意識の奥で強迫観念がかゆみ始めました。 それがすべての始まりです。
始める前に
もう一度、制限のないサービス（javaまたはflashがそのような制限を参照）の存在を検索エンジンで確認しましたが、私はまだ無駄に見ないことを決め、そのようなコンストラクタを自分で作成しました。 しかし、単純な場所でそれを行うのは面白くありませんでした。何らかの目的が必要でした。 私にとって、「Just For Fun」というモットーはそのような目標になり、私は熱心に私の将来の発案について考え始めました。 それにもかかわらず、すべての基礎は絵の粒子の作成であると判断したので、私が最初にすることはそれだと決めました。
簡単な数学
迷惑な考えが将来の奉仕の美しい絵に発展し始めた後、私が最初に取り上げたのは数学です。 より正確には-その永遠の法則を持つ通常の平面幾何学。 将来のパズルのピースの基本となる方法とアスペクト比を決定する必要がありました。 まだ熱狂的ではないので、私は絵の粒子の幾何学的モデルを描き、座標面上の正確な点を決定するための基本的な縦横比と関数を計算する式を構築し、得られたすべてのメカニズム
そして、数学ガイドを鉛筆、定規、開いたInkscapeで2日間過ごした後、そのようなモデルは単に大きいだけでなく、非常にかさばり、遅いことがわかりました。 正しい結果を得るには多くの時間と時間がかかりました-唯一のコストは、作業中のノートパソコンで、元の画像から2秒以上、結果のモデルで1つのパズルピースが生成されたことです。 さて、このような粒子がたくさんあると想像すると（20x20パズルには400個あります）、絵は非常に残念です。
パズルを視覚的に簡素化する必要がありました。そして、パズルの側面の選択の「ランダム性」を4〜5個のオプションに制限することにしました。
数学の参考書が再び棚から出てきました。
プロセス
簡素化を決めた後、Inkscapeの素晴らしさを実感しました。 その中で、私は非常に単純にパーティーのすべてのオプションを作成し、これらすべてを画像粒子の生成の主要な素材として非常に迅速にPNGにエクスポートしました。
その後、すべてが本来のはずでした。 基本的な寸法が決定されました。「尾」のない目に見える粒子のサイズは50x50ピクセルです。 したがって、ダウンロードしたすべての画像のサイズは50の倍数になります。
サイズ変更ソリューションは、プロジェクト全体の基盤の1つになりました。 サイズ変更は、元の画像が目的の幅に収まらない場合、元の画像を縮小することで実装されました。次に、高さを必要なサイズにトリミングしました。 これにより、画像の再スケーリングの問題を回避できましたが、下からトリミングされた49ピクセルに重要なものがまだある場合、興味深い点を引き起こす可能性があります。 これまでのところ、この問題に対する正しい正統的な解決策を見ていません。これにより、線やその他のアーティファクトの形で画像を組み立てる際に、パズルの部分に直接見える「ヘルプ」を回避できます。
私たちは働き続けます。 これで、処理の準備ができた写真ができました。 次に何をする？
その後、最も興味深い瞬間が訪れました-パズル全体の「マトリックス」を構築するプロセス、そして実際には、パズルの部分のすべての画像の作成。 最初から、パズルビットの基礎として8ビット透明度のPNG形式が選択されましたが、IE6にはまだ問題があり、残念ながらテストすることさえできません。LinuxIE6のフィルターは機能しません。 それにもかかわらず、このフォーマットにより、私は彼から得たものを実行することができました。
最後の最終行列の各要素は、元の画像の座標と各辺の4つの値を受け取りました。 サイドの値では、サイドのタイプ（あなたが気付いた場合-それらが4つしかない）と「反転」を保持しました-すなわち 側面が凸面かどうか。
マトリックスを受け取った後、すべての要素を調べてモザイクの最終部分を作成することができました。 一般的に、ここではすべてが単純です。ソースイメージの座標を持つピクセルは、側面の「空白」にあるアルファチャネル値で最終イメージにコピーされましたが、側面の残りは中心に点線の三角形で塗りつぶされました。 幸いなことに-それは非常に簡単に実装されています。 視覚的には、このプロセス全体が写真に示されています。
全体として、GDの優れた知識はこの部分で本当に役立ちました。私はこのライブラリとのコミュニケーションに非常に積極的でした。 唯一のこと-ピクセル単位のコピーは依然としてリソースを消費します。
途中で浮上した別の落とし穴は、画像の最終サイズの違いによる相対的なサイズ変更です（粒子のランダムな膨らみが感じられ、息をのむような挨拶を定期的に送信しました）。 したがって、（）コンストラクトが単なる怪物であることが判明し、別のパスがすぐに検索され、コードの断片が再び書き換えられた場合があります。
粒子画像の作成に関するすべての試練の後、画像マップが決定されました。 マトリックスを部分的に別のインデックス付きデータベーステーブルに追加します。
組立
組み立てプロセスについても言及する価値があります。 すべてのJavascript機能はjQueryで実装されていますが、標準のDrag'n'Drop（このようなゲームがないとどうなりますか？）jQuery.UIパッケージのFFではかなり遅いため、より軽量なソリューションを探し始めました。 まだ見つかっています-webtoolkit Drag'n'Drop。 将来同様のタスクが発生する場合は、試してください。 この実装には余分なものはなく、正常に機能します。
アセンブリを設計するときに、将来の発案を示した友人や同志からのフィードバックが非常に役立ちました。 組み立てプロセスの議論の後、部品が適切な場所にあり、組み立てられた部品全体を動かすと、部品が互いに「くっつく」ように見えました。 ピース全体のドラッグを個別に言及する価値があります-Drag'n'Dropのいくつかの変更によってjQueryに実装されます。 複数のピースを正しいデザインに接続すると、それらは一意のIDで「コロニー」を形成します。 そして、jQueryを使用してピースの1つに関連して移動すると、「コロニー」の他のすべてのメンバーも移動します。 すべてがシンプルですが、うまく機能します。
ここでも、テンプレート内で、アセンブリ画面上のドロップアウトパズルパーティクルの「ランダム性」の単純な機能が作成されました。 もちろん、私が望んでいたものとは少し違いますが、うまくいきます。
ハブラエフェクト
また、作業中のラップトップで完全なイメージマップを作成するのに30秒以上かかり、PHPの制限が機能した後、この部分について考える必要がありました。 そのため、翌日、単純なシングルスレッドデーモンがキューを使用して作成されました。このデーモンは、パズルパーティクルの画像を生成するために完全に設計されています。 一般に、イメージ生成のほとんどは既存のメカニズムから取得され、デーモンに対してわずかに調整されました。
ホスティングでテストした後、1つのイメージを処理するための0.25秒の遅延で通常の動作に十分であると判断しました。
少し待つようにという要求とともに画面が表示されたのは、悪魔が動作を開始した後です。 それでも、サーバーの寿命と健康状態は私のサービスよりもはるかに高く、我慢する必要があります。 結局のところ、ホステルは、私にとって非常に楽しいものです。
ルーチン
はい、私はそれで少し立ち往生しています。 私はルーチン作業があまり好きではありませんが、ここでは一般に受け入れられている事実の一部としてそれをしなければなりませんでした。 このステップでは、FAQが作成され、レビューが行われ、ページのレイアウトが少し調整され、画像とコメントを読み込むためのバリデーターが修正され、最新のパズルが読み込まれたある種のメインページが作成されました...マイナープロジェクト。
時々あなたは自分自身を強制しなければなりませんでした。 15の質問に対するよくないFAQから、10時間のV_vが生まれました。
しかし、このステップは敗北しました。
終わり
最後にすべてのページをコーミングして機能を確認した後、ソースをホスティングサーバーにアップロードし、そこでデーモンを起動して、世界をキャプチャするための最初のステップが完了したことをゆっくりと喜んで始めました-私は自分のアイデアで最初のサービスを持っていましたが、これはネットワーク上ではあまり普及していませんが、それはどうだろう。
もちろん、このパズルジェネレーターは理想とはほど遠いものです。 すぐに実装されるものの短いリストは次のとおりです。
- サテンレイアウトの代わりにベジェ曲線を使用してパーティクル作成を変更する
- 「未完成」パズルの粒子の位置を何らかの形で保存します。 パズルが大きく、6時間連続で収集できない場合に便利です。
- マウスのクリックでパーティクルを反転する機能。したがって、表示されたときにランダムに反転します。
- デーモンをマルチスレッド化して、最終的なパズルをより速く取得します。
- パズルアセンブリタイマー、複数のコンピューターからの集合アセンブリモード
- パズル自体にコメントする
そして、これはあなたの目を引く最初のものです。 しかし、作業はすでに開始されており、サービスが誰かに興味がある場合は、引き続き作業を進めます。 はい、もし興味がなければ、とにかくそれを投げません^ _ ^私に関しては、これは非常に興味深く、有望なことです。
サービス全体がJust For Funで行われたものであり、実質的な返品を意味するものではないことを付け加えます。 しかし、利益を上げる方法についてアイデアがあれば、喜んで聞きます。 とにかく、発電機を改善するためのアイデアがあれば、私はいつもあなたのサービスにいます。
Project Dares ： puzzleit.org.ua
テストパズルは、 http ： //puzzleit.org.ua/puzzle/cb287c8f7d69827344d053d0f0b97362/で組み立てることができます。
一般的に、このような小さな話。
ご清聴ありがとうございました。
Z.Y. すべてにメリークリスマス！
Z.Y.Y. 様式化されたinput = fileとマルチスレッドデーモンの構築に関する記事を読んでくれたHabrahabrと彼のユーザーに感謝します。 たくさん助けました。