Skip to content

Commit 20ae146

Browse files
committed
Add onbording.md, polish code-style
1 parent 87295ff commit 20ae146

98 files changed

Lines changed: 3685 additions & 959 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ A browser-based editor that turns a photo into low-poly art (a picture built fro
2323
For the curious: points are placed by Poisson-disk sampling (Bridson's algorithm) with a variable radius - set by a Sobel edge map, so the mesh is denser along contours. Generation is deterministic: the same seed yields the same mesh.
2424
The whole heavy geometry pipeline - edge map, point placement, and the triangulation itself - is bundled into a WASM module written in Rust. Triangle color is computed separately, in a Web Worker.
2525

26+
If you're going to read the source, start with the [architecture overview](docs/onboarding.md).
27+
2628
## Development
2729

2830
```sh

docs/README.az.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ Bir fotoşəkili low-poly təsvirə (üçbucaqlardan yığılmış şəklə) çe
2323
Maraqlananlar üçün: nöqtələr dəyişkən radiuslu Puasson diski seçməsi (Bridson alqoritmi) ilə yerləşdirilir - radiusu Sobel sərhəd xəritəsi təyin edir, ona görə də konturlar boyunca şəbəkə daha sıx olur. Generasiya deterministikdir: eyni seed hər zaman eyni şəbəkəni verir.
2424
Bütün ağır həndəsi konveyer - sərhəd xəritəsi, nöqtələrin yerləşdirilməsi və triangulyasiyanın özü - Rust dilində yazılmış WASM modulunda toplanıb. Üçbucaqların rəngi isə ayrıca, bir Web Worker daxilində hesablanır.
2525

26-
## İşləmə
26+
Mənbə kodunu oxumağı planlaşdırırsansa, [arxitekturaya icmaldan](onboarding.az.md) başla.
27+
28+
## İnkişaf
2729

2830
```sh
2931
npm install

docs/README.be.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
[en](../README.md) · [zh-Hans](README.zh-Hans.md) · [hi](README.hi.md) · [es](README.es.md) · [fr](README.fr.md) · [bn](README.bn.md) · [pt](README.pt.md) · [ru](README.ru.md) · [id](README.id.md) · [de](README.de.md) · [ja](README.ja.md) · [tr](README.tr.md) · [vi](README.vi.md) · [ko](README.ko.md) · [it](README.it.md) · [pl](README.pl.md) · [uk](README.uk.md) · [uz](README.uz.md) · [az](README.az.md) · [kk](README.kk.md) · **be**
44

5-
Браўзерны рэдактар, які дазваляе ператварыць фотаздымак у low-poly (выяву, сабраную з трохвугольнікаў). Ад звычайных генератараў яго адрознівае галоўнае: апроч базавай згенераванай сеткі, ты і сам можаш маляваць накіроўвальныя, і рэбры трохвугольнікаў пойдуць уздоўж іх. Таму важныя контуры - лінія падбародка, аправа акуляраў, сілуэт - застаюцца выразнымі, а не губляюцца ў выпадковай сетцы. Гатовы вынік можна захаваць у вектар (SVG, PDF) або карцінку (PNG, JPG, WebP).
5+
Браўзерны рэдактар, які ператварае фотаздымак у low-poly - карцінку, сабраную з трохвугольнікаў. Ад звычайных генератараў ён адрозніваецца галоўным: паверх згенераванай сеткі ты сам малюеш накіроўвальныя, і рэбры трохвугольнікаў ідуць уздоўж іх. Важныя контуры - лінія падбародка, аправа акуляраў, сілуэт - застаюцца выразнымі, а не тонуць у выпадковай сетцы.
66

77
**[АДКРЫЦЬ РЭДАКТАР](https://jango-git.github.io/polygonize/)**
88

@@ -23,6 +23,8 @@
2323
Для дапытлівых: пункты расстаўляюцца выбаркай па дыску Пуасона (алгарытм Bridson) са зменным радыусам - яго задае карта меж Sobel, таму ўздоўж контураў сетка шчыльнейшая. Генерацыя дэтэрмінаваная: адзін і той жа seed дае адну і тую ж сетку.
2424
Увесь цяжкі геаметрычны канвеер - карта меж, расстаноўка пунктаў і сама трыянгуляцыя - сабраны ў WASM-модулі на Rust. Колер трохвугольнікаў лічыцца асобна, у Web Worker.
2525

26+
Калі збіраешся чытаць зыходны код, пачні з [агляду архітэктуры](onboarding.be.md).
27+
2628
## Распрацоўка
2729

2830
```sh

docs/README.bn.md

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,33 @@
22

33
[en](../README.md) · [zh-Hans](README.zh-Hans.md) · [hi](README.hi.md) · [es](README.es.md) · [fr](README.fr.md) · **bn** · [pt](README.pt.md) · [ru](README.ru.md) · [id](README.id.md) · [de](README.de.md) · [ja](README.ja.md) · [tr](README.tr.md) · [vi](README.vi.md) · [ko](README.ko.md) · [it](README.it.md) · [pl](README.pl.md) · [uk](README.uk.md) · [uz](README.uz.md) · [az](README.az.md) · [kk](README.kk.md) · [be](README.be.md)
44

5-
ব্রাউজারে চলা একটা এডিটর, যেটা একটা ছবিকে low-poly ছবিতে (ত্রিভুজ দিয়ে গড়া ছবি) বদলে দেয়। সাধারণ জেনারেটরগুলোর থেকে এর সবচেয়ে বড় তফাত হলো: তৈরি হওয়া বেসিক জাল ছাড়াও তুমি নিজে গাইড লাইন আঁকতে পারো, আর ত্রিভুজের কিনারাগুলো সেগুলোর সঙ্গে সঙ্গে চলে। তাই গুরুত্বপূর্ণ রূপরেখাগুলো - থুতনির রেখা, চশমার ফ্রেম, কারও অবয়ব - স্পষ্ট থেকে যায়, কোনো এলোমেলো জালে হারিয়ে যায় না। তৈরি ফলটা তুমি ভেক্টর (SVG, PDF) বা ছবি (PNG, JPG, WebP) হিসেবে সেভ করতে পারো
5+
ব্রাউজার-ভিত্তিক এডিটর, যা যেকোনো ছবিকে ত্রিভুজ দিয়ে তৈরি একটি low-poly ছবিতে রূপান্তর করে। সাধারণ জেনারেটরগুলোর থেকে এর প্রধান পার্থক্য হলো: তৈরি হওয়া জালের উপর তুমি নিজেই গাইডলাইন আঁকো, আর ত্রিভুজের প্রান্তগুলো সেই গাইডলাইন বরাবর চলে। থুতনির রেখা, চশমার ফ্রেম, সিলুয়েটের মতো গুরুত্বপূর্ণ রূপরেখা এলোমেলো জালে হারিয়ে না গিয়ে স্পষ্ট থেকে যায়
66

7-
**[এডিটর খোলো](https://jango-git.github.io/polygonize/)**
7+
**[এডিটর খুলুন](https://jango-git.github.io/polygonize/)**
88

99
![স্ক্রিনশট](../image.png)
1010

11-
## কী কী পারে
11+
## যা করতে পারে
1212

13-
- **গাইড লাইন যেগুলো তুমি নিজে আঁকো** ছবির ওপরে রেখা, বৃত্ত, মসৃণ বক্ররেখা টানো - আর ত্রিভুজগুলো সেগুলোর সঙ্গে সঙ্গে নিজেদের সাজিয়ে নেয়। এগুলো ছবির ওপরে আলাদা আলাদা মডিফায়ার, তাই যেকোনো সময় এগুলো সরানো যায়, ডিটেলের সেটিং বদলানো যায়, কিংবা গ্রুপ করা যায়।
14-
- **জাল ডিটেলের সঙ্গে মানিয়ে নেয়।** যেখানে অনেক খুঁটিনাটি আর তীক্ষ্ণ কিনারা, সেখানে ত্রিভুজ ছোট; আকাশ বা ব্যাকগ্রাউন্ডের মতো সমান জায়গায় বড়। ছবিটা সেখানেই সূক্ষ্ম হয় যেখানে দরকার, বাকি জায়গায় শান্ত থাকে। আবার ফলটা নিশ্চিতভাবে পুনরায় তৈরি করা যায়: একই সেটিং দিলে জালটা ঠিক একইরকম হবে
15-
- **শুরুর জন্য স্বয়ংক্রিয় ট্রেসিং** যাতে একদম শূন্য থেকে শুরু করতে না হয়, তার জন্য "ছবি ট্রেস করুন" চাপো - এডিটর নিজেই ছবির কিনারাগুলো খুঁজে বের করে আর সেগুলোকে এডিট করা যায় এমন মডিফায়ারে বদলে দেয়, যেগুলো একটা আলাদা গ্রুপে জড়ো হয়
16-
- **ত্রিভুজের রং।** প্রতিটা ত্রিভুজ তার নিচের পিক্সেলগুলোর গড় রঙে ভরে যায় - কিংবা মিডিয়ান রঙে, যদি কড়া ঝলমলে রংগুলো একটু চাপা দিতে চাও
17-
- **এক্সপোর্ট।** ভেক্টর (SVG, PDF) বা র‍্যাস্টার (PNG, JPG, WebP), 4096 পিক্সেল পর্যন্ত।
18-
- **প্রজেক্ট।** তোমার কাজ একটা `.json` ফাইলে সেভ করো আর পরে আবার সেটায় ফিরে এসো। আর চলতি সেশনটা নিজে থেকেই ফিরে আসে, এমনকি তুমি শুধু ট্যাবটা বন্ধ করে দিলেও
19-
- **21টি ভাষায় ইন্টারফেস।** ভাষা ব্রাউজার দেখে ঠিক হয়, আর ওপরের প্যানেল থেকে বদলানো যায়।
13+
- **গাইডলাইন** ছবির উপর রেখা, বৃত্ত এবং মসৃণ কার্ভ আঁকো - ত্রিভুজগুলো সেগুলো বরাবর সাজে। এটা এককালীন কোনো কাজ নয়, বরং মডিফায়ার: যেকোনো সময় সেগুলো সরানো যায়, বিস্তারিততা বদলানো যায়, গ্রুপ করা যায়।
14+
- **জাল যা খুঁটিনাটির সাথে মানিয়ে নেয়।** যেখানে বেশি খুঁটিনাটি তীক্ষ্ণ সীমারেখা আছে, সেখানে ত্রিভুজ ছোট; আকাশের মতো সমতল অংশে সেগুলো বড়। ফলে ছবি যেখানে দরকার সেখানে বিস্তারিত, আর বাকি জায়গায় শান্ত থাকে।
15+
- **স্বয়ংক্রিয় রূপরেখা** একদম শূন্য থেকে শুরু না করার জন্য "রূপরেখা আঁকো" বাটনে চাপো: এডিটর ছবির প্রান্তগুলো খুঁজে সেগুলোকে একটি আলাদা গ্রুপে সংগৃহীত, সম্পাদনাযোগ্য মডিফায়ারে রূপান্তরিত করবে
16+
- **ত্রিভুজের রং।** প্রতিটি ত্রিভুজ তার নিচের পিক্সেলগুলোর গড় রং দিয়ে ভরাট হয় - অথবা প্রয়োজনে উজ্জ্বল ব্যতিক্রমগুলোকে কমাতে মিডিয়ান রং দিয়ে
17+
- **এক্সপোর্ট।** ভেক্টর (SVG, PDF) অথবা র‍্যাস্টার (PNG, JPG, WebP), সর্বোচ্চ 4096 পিক্সেল পর্যন্ত।
18+
- **প্রজেক্ট।** কাজ একটি `.json` ফাইলে সংরক্ষণ করে পরে ফিরে আসতে পারো। বর্তমান সেশন নিজে থেকেও পুনরুদ্ধার হয় - এমনকি শুধু ট্যাব বন্ধ করলেও
19+
- **21টি ভাষায় ইন্টারফেস।** ব্রাউজার অনুযায়ী ভাষা নির্ধারিত হয়, উপরের প্যানেল থেকে পরিবর্তন করা যায়।
2020

21-
## ভেতরের কথা
21+
## ভেতরের প্রক্রিয়া
2222

23-
কৌতূহলীদের জন্য: বিন্দুগুলো বসানো হয় Poisson ডিস্ক স্যাম্পলিং (Bridson অ্যালগরিদম) দিয়ে, যেখানে ব্যাসার্ধ পাল্টায় - সেটা ঠিক করে Sobel-এর কিনারা-ম্যাপ, তাই রূপরেখা বরাবর জাল ঘন হয়। জেনারেশন ডিটারমিনিস্টিক: একই seed সবসময় একই জাল দেয়।
24-
পুরো ভারী জ্যামিতিক পাইপলাইন - কিনারা-ম্যাপ, বিন্দু বসানো আর নিজে ত্রিভুজীকরণ - Rust-এ লেখা একটা WASM মডিউলে বাঁধা। ত্রিভুজের রং আলাদাভাবে, একটা Web Worker-এ গোনা হয়।
23+
পয়েসন-ডিস্ক স্যাম্পলিং (Bridson অ্যালগরিদম) ব্যবহার করে পরিবর্তনশীল ব্যাসার্ধ সহ পয়েন্টগুলো বসানো হয় - এই ব্যাসার্ধ নির্ধারণ করে একটি Sobel প্রান্ত মানচিত্র, তাই রূপরেখা বরাবর জাল ঘনতর হয়। জেনারেশন নির্ণায়ক (deterministic): একই সিড সবসময় একই জাল তৈরি করে। সম্পূর্ণ ভারী জ্যামিতিক পাইপলাইন - প্রান্ত মানচিত্র, পয়েন্ট বসানো, ট্রায়াঙ্গুলেশন - Rust-এ লেখা একটি WASM মডিউলে সংকলিত; ত্রিভুজের রং আলাদাভাবে, একটি Web Worker-এ গণনা করা হয়।
24+
25+
সোর্স কোড পড়া শুরু করতে চাইলে, [আর্কিটেকচার ওভারভিউ](onboarding.bn.md) দিয়ে শুরু করো।
2526

2627
## ডেভেলপমেন্ট
2728

2829
```sh
2930
npm install
30-
npm run dev # ডেভেলপমেন্ট সার্ভার http://localhost:3000-এ
31+
npm run dev # http://localhost:3000 ঠিকানায় ডেভেলপমেন্ট সার্ভার
3132
npm run build # dist/bundle.js তৈরি করে
3233
```
3334

docs/README.de.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Ein Editor im Browser, mit dem du ein Foto in ein Low-Poly-Bild verwandelst (ein
88

99
![Bildschirmfoto](../image.png)
1010

11-
## Features
11+
## Funktionen
1212

1313
- **Hilfslinien, die du selbst zeichnest.** Du ziehst Linien, Kreise und sanfte Kurven über das Bild - und die Dreiecke richten sich daran aus. Das sind eigenständige Modifikatoren über dem Bild, deshalb kannst du sie jederzeit verschieben, ihre Detailparameter anpassen oder sie gruppieren.
1414
- **Das Netz passt sich den Details an.** Wo viele Feinheiten und scharfe Kanten sind, werden die Dreiecke kleiner; auf gleichmäßigen Flächen wie Himmel oder Hintergrund größer. So wird das Bild dort detailreich, wo es nötig ist, und ruhig im Rest. Dabei ist das Ergebnis vorhersagbar reproduzierbar: Mit denselben Einstellungen entsteht exakt dasselbe Netz.
@@ -18,19 +18,20 @@ Ein Editor im Browser, mit dem du ein Foto in ein Low-Poly-Bild verwandelst (ein
1818
- **Projekte.** Speichere deine Arbeit in einer `.json`-Datei und kehre später dazu zurück. Aber auch die aktuelle Sitzung stellt sich von selbst wieder her, selbst wenn du den Tab einfach geschlossen hast.
1919
- **Oberfläche in 21 Sprachen.** Die Sprache wird anhand des Browsers erkannt und lässt sich in der oberen Leiste umschalten.
2020

21-
## Under the hood
21+
## Unter der Haube
2222

23-
Für Neugierige: Die Punkte werden per Poisson-Disk-Sampling (Bridson-Algorithmus) mit variablem Radius gesetzt - diesen gibt eine Sobel-Kantenkarte vor, weshalb das Netz entlang der Konturen dichter ist. Die Erzeugung ist deterministisch: Derselbe Seed liefert dasselbe Netz.
24-
Die gesamte rechenintensive Geometrie-Pipeline - Kantenkarte, Punktverteilung und die Triangulation selbst - steckt in einem WASM-Modul in Rust. Die Farbe der Dreiecke wird getrennt davon in einem Web Worker berechnet.
23+
Die Punkte werden per Poisson-Disk-Sampling (Bridson-Algorithmus) mit variablem Radius gesetzt - diesen gibt eine Sobel-Kantenkarte vor, weshalb das Netz entlang der Konturen dichter ist. Die Erzeugung ist deterministisch: Derselbe Seed liefert dasselbe Netz. Die gesamte rechenintensive Geometrie-Pipeline - Kantenkarte, Punktverteilung, Triangulation - steckt in einem WASM-Modul in Rust; die Farbe der Dreiecke wird getrennt davon in einem Web Worker berechnet.
2524

26-
## Development
25+
Wenn du vorhast, den Quellcode zu lesen, beginne mit dem [Architekturüberblick](onboarding.de.md).
26+
27+
## Entwicklung
2728

2829
```sh
2930
npm install
3031
npm run dev # Entwicklungsserver auf http://localhost:3000
3132
npm run build # erzeugt dist/bundle.js
3233
```
3334

34-
## License
35+
## Lizenz
3536

3637
[MIT](../LICENSE)

0 commit comments

Comments
 (0)