LukeJL

LukeJL
2019-07-25 20:57

W mojej apce edytorze będą dziać się cuda. Robisz jeden obiekt, klonujesz, przesuwasz w inne miejsce, a potem podłączasz oba obiekty do obiektu "morphing" i generuje ci automatycznie ileś obiektów pośrednich (jak na screenie). Później planuję dorobić tego możliwość animacji. Że będą się same właściwości zmieniały na podstawie obiektu źródłowego i obiektu docelowego.

Z innych rzeczy to wywaliłem Mobxa i napisałem własny minisilnik stanu. Początkowo miał to być wrapper na Rx, ale okazało się, że nawet Rx nie potrzebuję. I że mogę napisać własny silnik, który sprawdza, które właściwości się zmieniły (pod warunkiem, że każda zmiana będzie enkapsulowana w wywołaniu funkcji update z funkcją updatującą), a potem uaktualnia wszystkie właściwości zależne w innych obiektach. W ogóle jaram się, bo wreszcie piszę testy. Wcześniej tylko manualne, a do tego modułu z silnikiem stanu stosuję podejście TDD, i wszystko ładnie otestowane w tym module.

GUI natomiast testuję manualnie póki co, muszę klikać, ale apka się rozrasta, więc w miarę dalszego rozwoju planuję jeszcze napisać trochę testów, które będą sprawdzać czy podstawowe opcje w programie działają poprawnie (ale to takie smoke testy będą, bo GUI jednak trzeba klikać tak czy siak, bo testy automatyczne ci nie powiedzą np. że coś brzydko wygląda, albo działa mało płynnie albo się coś rozjeżdża, albo że menu jest w złym miejscu pod kątem usability*. Tego wszystkiego natomiast można się dowiedzieć dopiero korzystając z aplikacji i próbując wykonać w niej pewne zadania i notując niedociągnięcia czy błędy, albo wymyślając usprawnienia.

* dobra, chociaż są narzędzia takie jak Lighthouse w Chrome, które mogą ci zrobić z automatu ogólny audyt i znaleźć ogólne problemy z wydajnością czy innymi rzeczami. Ale to dość ogólne wyniki - np. robiłem dla testów 10 000 obiektów i mi Lighthouse powiedziało, że "zmniejsz liczbę elementów DOM bo muli".

czysteskarpety

Lighthouse w Chrome, które mogą ci zrobić z automatu ogólny audyt tak, to im się akurat udało, chyba jedyny powód aby trzymać chrome na dysku to narzędzia dev.

anonimowy

@LukeJL: Mógłbyś pokazać jakiś trywialny przykład gdzie przydaje się Twoje narzędzie? Bo nie do końca łapie jakie problemu ono rozwiązuje lub ułatwia rozwiązanie

Silv

<czeka na udostępnienie aplikacji> O, ja też piszę testy, ale nie wiem, czy TDD. ;) Muszę jeszcze to poznać (ale może kiedy indziej – teraz mam podejście "product first").

LukeJL

@anonimowy dopiero będzie się przydawało, bo na razie jest niegotowe, w trakcie robienia (dlatego tylko screeny wrzucam, a nie wrzucam jeszcze linka do apki). Ale np. załóżmy, że chcesz szybko coś zaprototypować i wrzucić do internetu. Nie chce ci się robić full aplikacji powiedzmy w React, i rozwiązywać problemów typowo Reactowych (np. zarządzanie stanem, optymalne podzielenie apki na komponenty itp.) ani pieprzyć z CSSem. To otwierasz takie narzędzie, i wstawiasz przyciski, formularze, robisz myszą interakcje. Czyli wyklikujesz sobie aplikacje - a potem wrzucasz do netu. Może to być prosta strona, gra albo animacja, może zaledwie jeden interaktywny element (np. konfigurator produktu, animacja na intro, interaktywna prezentacja, jakiś formularz), który zintegrujesz sobie potem z resztą kodu pisaną normalnie w JavaScript. Czyli generalnie coś wizualnego/interaktywnego, co chcesz zrobić na szybko, i coś, co możesz sobie na żywo testować, jak to będzie wyglądać itp.

LukeJL
2019-07-17 16:44

Widziałem niedawno filmik o produkcji płytek drukowanych(PCB), wiecie te zielone(zwykle) płytki, które są w urządzeniach elektronicznych i na których dzieje się elektroniczna magia: https://www.youtube.com/watch?v=ljOoGyCso8s

Fascynujące, nie spodziewałem się nawet, ile oddzielnych kroków trzeba wykonać, żeby taką płytkę wyprodukować. Tzn. samo się robi w dużej mierze, ale ludzie też tam chodzą (chociaż to mnie zastanawia, że skoro i tak są maszyny, to po co w ogóle ludzie jeszcze muszą coś tam robić? Nie dałoby się tego w pełni zautomatyzować?)

furious programming

To je fajna rzecz dla majsterkowiczów – CNC Wegstr (cena też fajna). ;)

LukeJL
2019-07-13 20:48

Dorobiłem masę rzeczy do edytora.

  • dorobienie drugiego sposobu linkowania właściwości obiektów (że ciągniesz linię z obiektu do obiektu, a potem wybierasz nazwy właściwości)

  • pokazywanie tych linków za pomocą linii. Link można skasować. Kasuje się też z automatu, kiedy stworzysz nowy link, który będzie wchodził do tego samego wejścia w obiekcie. Co prawda jest też sytuacja, w którym się link nie kasuje, ale to już naprawię później.

  • klonowanie obiektów. Bardzo potężny ficzer xD planuję potem zrobić jeszcze możliwość klonowania na zasadzie dziedziczenia (tj. takie klonowanie, które będzie pozwalało, żeby elementy skopiowane uaktualniały się razem z oryginałem).

  • estetyka (dalej to nie wygląda jakoś super pewnie, ale i tak lepiej niż kilka dni temu, plus ściągnąłem ikonki z Material Design)

  • jak się kliknie obiekt, który jest za innym obiektem, to automatycznie wychodzi na wierzch, tak jak można się tego spodziewać

  • dodałem możliwość edycji tekstu (naiwne podejście - czyli włączenie contentEditable w elemencie DOM)

Odkrycia / wnioski

  • linkowanie właściwości obiektów pozwala na tworzenie fajnych constraintów (np. wyrównywanie elementów - wystarczy podłączyć, żeby miał taką samą właściwość x jak inny obiekt.

  • UX jest trudniejsze od programowania. Ciągle muszę się zastanawiać nad tym, jak zjeść ciastko i mieć ciastko. Tzn. jak zrobić coś, co będzie miało maksymalnie minimalistyczny interfejs, a z drugiej strony w jaki sposób zaprezentować pewne dane użytkownikowi i pozwalać na ich edycję (istniejące edytory podobne w założeniach do tego co robię są często zbyt napaćkane/mają ciężki interfejs - ja chcę stworzyć coś lżejszego, minimalistycznego, ale znowu - to wcale nie tak łatwo, bo trzeba dużo sprzecznych założeń pogodzić).

  • Udało mi się pogodzić pisanie w miarę chaotycznego kodu z utrzymywalnością. Tzn. ten kod, który teraz jest, trzeba będzie mocno przepisać, bo jest tam dużo chaosu - z drugiej strony na poziomie architektury jeszcze się trzyma. Jestem w stanie dopisywać kolejne ficzery z prędkością światła oraz dokonywać refaktoringu, żeby w miarę możliwości zmniejszać ten dług technologiczny jednak. Tym niemniej jest to świeży projekt - aktualna implementacja ma dopiero z kilka tygodni i jest to w dużej mierze eksperymentowanie i prototypowanie funkcjonalności.

Aczkolwiek teraz przede mną będzie master refactor - gdzie zmienię całkowicie zarządzanie stanem z Mobx na rozwiązanie oparte o Rx.js, xstream czy podobną bibliotekę observabli, więc to będzie master wyzwanie. Ale zobaczymy jak mi pójdzie.

Silv

Jestem w stanie dopisywać kolejne ficzery z prędkością światła oraz dokonywać refaktoringu, żeby w miarę możliwości zmniejszać ten dług technologiczny jednak. :D Cieszę się, że na razie kontynuujesz to samo. To kiedy będzie można to gdzieś zobaczyć? Może dodaj jakieś tagi do wpisów na mikro odnoszących się do tego edytora.

LukeJL

@nohtyp @Silv za kilka dni wrzucę demówkę do sieci :) na razie closed source. Mógłbym w sumie już dzisiaj wrzucić, ale jest parę WTFów (jeden z WTFów polega na tym, że nazwy właściwości są niespójne, w jednym obiekcie główne wyjście jest on, w innym value, w innym output - a praca polega na łączeniu konkretnych właściwości (tych właściwości jest z około 10 w każdym obiekcie), więc trzeba wiedzieć co z czym się łączy. Ja to wiem, ale użytkownik końcowy będzie miał WTFa. I parę innych tego typu rzeczy tam jest. Więc na razie chcę to dopracować jeszcze. (ale to też praca koncepcyjna po części, bo muszę zadecydować o tych nazwach właściwości, sposobie ich prezentacji itp.)

anonimowy

Nie no w sumie to żartuję :P Nie wiem nawet do końca do czego to ma służyć bo z tego pierwszego wpisu to nie łapię (w sensie wizualne programowanie to dla mnie zło, nie widzę plusów)

Silv

@LukeJL: OK. A będzie semantyczne wersjonowanie?

LukeJL

@anonimowy docelowo będzie można tego używać do wielu celów, w zależności od tego, jakie dodatki zrobię (będzie core + wiele dodatków). ale przykładowe zastosowania: to, które obecnie realizuje, i które widać bezpośrednio na screenach to... zabawka kreatywna xD nie wiem jak to inaczej nazwać, ale to nad czym obecnie pracuję, to żeby sprawić, że łączenie obiektów było po prostu przyjemne, że widzisz, że coś się łączy i coś się samo zmienia w jakiś sposób. Natomiast inne zastosowania, bardziej praktyczne - 1. szybkie prototypowanie aplikacji webowych/stron . Zamiast męczyć się z pisaniem logiki, to kładziesz parę rzeczy i wyklikujesz sobie apkę, a potem eksportujesz do paczki z assetami (HTML, CSS, JS itp.) i masz normalnie stronę, która działa. Marzy mi się, że kiedyś się to rozwinie do tego stopnia, że ludzie będą produkcyjnie rozwijać apki webowe w tym - ale póki co nastawiam się na prototypowanie. wizualne programowanie to dla mnie zło, nie widzę plusów) - jest szybciej. Przynajmniej przy tych narzędziach które mamy, to myślę, że szybciej jest wyklikać sobie rzecz, niż zrobić adekwatną rzecz np. w React od zera 2. robienie rzeczy, które będą interaktywne jak np. różnego rodzaju prezentacji (czy to edukacyjnych, czy to np. prezentacji w stylu "konfigurator produktu dla sklepu") albo nawet gier przeglądarkowych (tylko znowu - żeby gry w tym robić, to bym musiał się skupić na dorobieniu obsługi animacji czy innych rzeczy, które są potrzebne w grach. Ale core byłby ten sam. 3. mam jeszcze inne pomysły, ale o tym za dużo by mówić na teraz.

LukeJL

@Silv na razie nie będzie repo publicznego i tak, natomiast jak zrobię opcję zapisu/odczytu projektów (np. na plik w postaci JSON i odczyt z takiego pliku JSON) to będę musiał pomyśleć co z wersjonowaniem projektów. Bo w nowej wersji format zapisu/odczytu może się zmienić, natomiast apka powinna wiedzieć, jak czytać wcześniejsze formaty...

no_solution_found

fajnie by było jakby można było wybrać róg/ścianę z którą łączy się elementy. Teraz wszystko idzie z lewego górnego rogu i momentami wygląda to dziwacznie :) ale zaczyna to coraz lepiej wyglądać!

LukeJL

@no_solution_found też się nad tym zastanawiałem i jeszcze nie wiem, jak zrobię. może, że strzałki będą się zaczynać od środka elementu i kończyć w środku (BTW teraz są już strzałki, a nie same linie).

no_solution_found

@LukeJL: ja bym widział to raczej tak, że ja jako użytkownik mogę sobie wybrać od której ściany strzałka wychodzi.

LukeJL

@no_solution_found: przemyślę to, tylko co wtedy jak jest kilka połączeń. Tzn. jeśli połączę kilka właściwości obiektów A i B na raz (np. mam dwa przyciski on/off, i połączę właściwość y do wyrównania w poziomie, oraz właściwość on, żeby były zsynchronizowane ze sobą - jeden przycisk na on, drugi też na on. I odwrotnie), to mam taką wizję, żeby jedna linia pokazywała naraz wszystkie te właściwości, które są połączone w obiektach. Żeby nie zaśmiecać ekranu ilomaś liniami naraz, plus to, że po kliknięciu w strzałkę będzie można edytować te połączenia.

LukeJL

@no_solution_found: Natomiast przy podejściu, że użytkownik może sobie wybrać od której ścianki strzałka wychodzi - co jeśli robiąc kilka połączeń, połączy za każdym razem z inną ścianką? Wtedy powstaną 2 linie. (chyba, że to raczej zrobić w ten sposób - że użytkownik może konfigurować od której ścianki wychodzi - ale jak zrobi kilka właściwości naraz to zawsze będą od tej samej ścianki już. Chociaż ogólnie myślę, że to może być dobry pomysł, żeby umożliwić użytkownikowi wybranie początka strzałki, a nawet myślałem, żeby użytkownik miał jeszcze większą swobodę - i np. mógł dowolnie przesuwać "zaczepienie"("początek strzałki") nawet poza obiekt. (jeśli obiekty będą małe i gęsto ułożone, to przesunięcie początków strzałek poza obiekty może sprawić, że diagram połączeń będzie czytelniej wyglądać).

LukeJL
2019-07-08 18:29

Robię edytor, w którym można kłaść obiekty na ekranie, a potem tworzyć myszą połączenia między nimi definiując logikę (np. co się stanie, jak ktoś kliknie przycisk) i przepływ danych (np. tekst tego obiektu jest zależny od tekstu innego obiektu). Czyli wizualne programowanie i wizualny edytor GUI w jednym

Co z tym dalej będzie? To się zobaczy. Na razie chcę zrobić coś fajnego, co pozwoliłoby na fajną rozrywkę, eksperymentowanie z interfejsem, z logiką, z animacjami. A później zobaczymy, co z tego wyniknie.

Silv

@LukeJL: Ma to coś wspólnego z Twoim projektem mapy myśli? Bo wygląda jak mapa myśli. :)

LukeJL

@TomaszSmykowski w JS/HTML/CSS/SVG + React + Mobx. Przy czym mam trochę dziwnych problemów z Mobx (za dużo magii się tam dzieje pod spodem), więc nie wiem, czy nie przejdę na inne rozwiązanie (generalnie to co potrzebuję, to żeby każdy obiekt mógł mieć ileś właściwości i żeby te właściwości potem mogły być "nasłuchiwane" przez inne właściwości w innych obiektach - czyli taka reaktywność, która jest potrzebna do zasymulowania przepływu danych). No i jeszcze jak będę dodawał animację, to użyję jakiejś biblioteki do animacji - ale nie wiem, czy Popmotion, czy Anime.js, czy Scene.js czy jeszcze co innego. Albo po prostu napiszę coś swojego, korzystając najwyżej z jakichś utilsów typu funkcje easingowe (np. d3-ease z D3 https://github.com/d3/d3-ease ).

furious programming

@LukeJL: dorzuć jakieś tagi, co najmniej technologie, tak aby nie trzeba było dopytywać. ;)

LukeJL

@Silv raczej średni. Raczej to coś podobnego do tego typu rzeczy: https://www.google.com/search[...]&source=lnms&tbm=isch z tą różnicą, że łączysz ze sobą elementy interfejsu np. przyciski (chociaż są również abstrakcyjne elementy, np. timer dorobiłem dzisiaj, tzn. mam na myśli coś, co generuje event w określonych odstępach czasu. Albo węzeł reprezentujący dowolne wyrażenie (na razie używam brzydkiego eval, potem zastanowię się jak to można lepiej zrobić, bo eval is evil :/ ). Kurczę, niedawno się bawiłem płytką stykową, ustawiałem diody, przyciski, czujniki, i chciałbym osiągnąć podobny feeling - taki edytor do robienia różnych kreatywnych eksperymentów, łączenia elementów ze sobą i patrzenia co się stanie.

Silv

W takim razie co z mapą myśli?

LukeJL

@Silv na razie tamten pomysł wstrzymany, chociaż kto wie, czy nie połączę tego jakoś. Kiedyś. Np. chodzisz po węzłach mapy myśli, ale nie jest to suchy tekst, ale są to animacje i interaktywne wizualizacje w każdym węźle. Albo odwrotnie - po prostu potraktować mapę myśli jako jeszcze jeden rodzaj obiektu, który można dodać. Ale zobaczymy. Na razie to dwa totalnie oddzielne projekty.

tdudzik

A co z projektem IDE? :)

rozacek

Ten timer, który dodałeś sugeruje mi jakbyś zamierzał kiedyś sterowniki PLC w tym programować :)
Rozumiem, że w poszczególnych obiektach można wpisywać jakieś proste instrukcje, co taki obiekt robi z "wejściem" zanim przekaże je na "wyjście" (obiekt <=> funkcja)??

LukeJL

@rozacek ten timer, który dodałeś sugeruje mi jakbyś zamierzał kiedyś sterowniki PLC w tym programować - nie wybiegałbym aż tak daleko ;) Rozumiem, że w poszczególnych obiektach można wpisywać jakieś proste instrukcje, co taki obiekt robi z "wejściem" zanim przekaże je na "wyjście" (obiekt <=> funkcja)?? - nie, tzn. owszem w obiekcie typu "expression" można wpisywać wyrażenie JS, ale to escape hatch, żeby było to elastyczne w razie potrzeby - natomiast główny workflow ma być taki, że masz pewne predefiniowane obiekty, które mają zestaw wejść, wyjść. I podłączając odpowiednie wejścia (albo konfigurując ręcznie parametry) wpływasz na działanie obiektu, a podłączając wyjścia możesz np. podłączyć odpowiednie zdarzenia (np. onClick) albo wynik obliczeń. W tej chwili obiekty mogą być zarówno abstrakcyjne (np. logiczne NOT) jak i wizualne/GUI - np. przycisk do klikania. I do tych wizualnych również można się podłączać, np. można podłączyć output timera(1, 2, 3, 4....) do właściwości x jakiegoś innego obiektu i obiekt będzie się przesuwać.

LukeJL

@Marcin.Miga na pewnym poziomie można to porównywać o tyle, że jest tam pewne wirtualne środowisko uruchomieniowe, którym można dynamicznie sterować, tym niemniej model programowania jest inny, u mnie definiujesz przepływ danych (podobnie jak w innych tego typu edytorach - edytor node'ów z Blendera choćby), natomiast w Scratchu piszesz(czy tam wyklikujesz) programiki, które ręcznie odpytują obiekty i odpalają jakieś akcje albo ustawiają zmienne (czyli Scratch jest bardziej imperatywny, u mnie raczej jest model reaktywny - obiekty same wiedzą, kiedy dane na wejściu się zmieniły).

LukeJL

@NickOver nom, trochę tak. Tylko w Lunie nie widzę za bardzo, żeby się GUI dało robić.

LukeJL

@tdudzik to będzie IDE :) tzn. będzie można sobie wyklikać aplikację :) W przyszłości planuję też możliwość dodania własnego kodu (np. customowe obiekty), chociaż niekoniecznie jego edycję (tzn. pewnie workflow by był taki, że możesz integrować wyklikany moduł aplikacji z kodem, który piszesz sobie w jakimś dowolnym innym edytorze.

LukeJL
2019-06-04 00:11

Inni kołczują, a ja pojadę nerdozą.

No więc opowiem wam historię o imporcie siatek ruskich. Tzn. robię ostatnio model pociągu w Blenderze. Wagonik warszawskiego metra, taki ruski. Więc zrobiłem go, wyeksportowałem siatki do formatu *.obj i potem Visual Studio Code otwieram i jadę. Tzn. próbuję zaimportować w Three.js i wyświetlić w przeglądarce.

No ale co się okazuje. Że kod z dokumentacji nie działa. Dlaczego? Ano dlatego, że obiekt new THREE.OBJLoader(); nie istnieje. Czyżby oficjalna dokumentacja Three.js mnie oszukała? No nie, po prostu Three.js to staroć i zakłada zdaje się pisanie na tagach script, i nowoczesna praca za pomocą pakietów nie jest za bardzo wspierana z pudełka. Trzeba dopiero na npm szukać jakichś nieoficjalnych pakietów, które eksportują to, co domyślnie jest dołączane jako script. No więc znajduję pakiet, instaluję. Ale jakiś dziwny błąd się pojawia. Coś jest undefined.

Po szukaniu odpowiedzi w necie znalazłem jakiś wątek na Githubie, w którym ktoś miał podobny problem. I okazało się, że ma nieaktualny (Zabugowany) pakiet, że w oficjalnym loaderze już ten bug został załatany. I rozwiązanie to dopisanie w loaderze 1 linijki kodu. Więc otwieram katalog node_modules i ręcznie dopisuję tę linijkę.

I tutaj zaczynam rozumieć narzekania na Three.js

http://www.html5gamedevs.com/[...]g-a-webgl-framework-for-sony/
three.js had far more libraries and extensions - however, this was not the strength of three.js since there is no cohesive development cycles with three.js and although many libraries, tools, and extensions exist, more than often they are not maintained. So it was easy to demonstrate that practically any tool or extension (...) would require myself or the team updating the extension or tool to be compatible with the other tools we might use on the project

Przypomina mi się koszmar pluginów w Gulpie, gdzie też każdy plugin z innej parafii albo nieutrzymywany.

Ale myślicie, że co, zmieniłem 1 linijkę i działa? No nie! To dopiero początek problemów.

OBJ po załadowaniu w Three źle się wyświetla. Jako wireframe, nie wiedzieć czemu, a nie jako solidna bryła.

Więc szukam dalej po forach. Okazuje się, że format .obj jest już nie modny i że lepiej używać formatu glTF, który jest teraz super modny i że glTF to taki jakby "jotpeg dla 3D" i nawet Facebook go wspiera i pozwala na publikowanie postów 3D pod warunkiem, że są w tym formacie (.glb zdaje się rozszerzenie musi być), więc używając glTF będziemy iść z duchem czasu.

No więc próbuję eksportować z Blendera do glTF. Ale nie ma takiej opcji. Czytam, że w nowej wersji Blendera (która jest dostępna w wersji beta) jest już eksporter do glTF. No to ściągam nową wersję blendka, przy okazji ciesząc się nowym GUI i nowym rendererem (Eeevee). Ale dobra, eksportuję te siatki, importuję w JavaScript. Dobra nasza?

Hahahah. Dalej nie ma tego, co bym chciał. Materiały się nie zaimportowały.

Gdzieś przeczytałem, że glTF musi mieć jakieś specjalne materiały a nie dowolne (tylko Principled w edytorze materiałów w Blenderze i jeszcze jakieś inne). No i robię.

Tylko znowu problem - w jaki sposób zrobić szkło, żeby było przezroczyste?(normalnie w edytorze materiałów miałem po prostu shader Glass i się robiło szkło). Więc znowu - szukam sposobu, jak można zrobić szkło tak, żeby zaimportować to JavaScriptem jako glTF. Okazuje się jednak, że glTF nie wspiera (podobno?) szkła, a jedynie pseudoszkło za pomocą przezroczystości. WTF glTF?

W końcu dowiedziałem się, jak się to pseudoszkło robi i zrobiłem. No ale efekt na razie nie powala. Popatrzcie, to nie wygląda współcześnie. 2019 rok, a grafika jak z lat 90 mi wyszła (patrz screen, chociaż tu widzę jeszcze brak antyaliasingu czy coś). No ale to nie moja wina, że materiały się nie importują :D Kurczę, ledwo co się nauczyłem robić materiały w Blenderze, to muszę się teraz uczyć od nowa robić takie, żeby się importowały w JavaScript (chociaż na tym screenie to brak chyba jeszcze antyaliasingu czy coś, bo jakieś schodki są straszne). Nie to, żeby to musiała być wada - widok retro też jest fajny. Tak będę sobie tłumaczył, jak mi się nie będzie udawało :)

No i tym optymistycznym zakończymy ten wywód. Jeśli się podobało, to dajcie łapki w górę. Może wskoczę na podium miesiąca. Chociaż konkurencja jest ostra.

Silv

Szczegóły techniczne sobie odpuściłem (nie mam siły na więcej problemów niż z własnym kodem), ale wagonik mi się podoba. PS. Miałeś chyba na myśli "rosyjski"?

tamtamtu

czytam sam poczatek - widzie blender - i zastanawiam sie jak to budujesz - przeciez jak go wlaczysz to Ci ten wagonik poszatkuje :)

kate87

Dzięki, przez Ciebie zajrzałam na Wiki z pytaniem o dostawców wagonów metra, bo pamiętałam że dostawcami są Alstom i Simens. Jakby nie można było Newagu czy jakieś elfy z Bydgoszczy, tak btw. Ale teraz będę się bała wsiadać do tych starych pociągów. Dzięki.

czysteskarpety

Ostatnio kumpel robił animacje magazynów, to mówi, że pewnie szybciej by mu było zrobić w drukarce 3D + efekt 360 stopni, lub kupić gotowca niż to składać samemu w progsie do grafy :)

LukeJL

@czysteskarpety jakich magazynów? Budynków? Cóż, niektórzy robią makiety z tektury (tacy architekci podobno).

LukeJL

@tamtamtu o tym też myślałem, symulator miksera, który miksuje na ekranie cokolwiek, dowolny model 3D. To by mogła być fajna nauka, w jaki sposób to zaimplementować.

kate87

@LukeJL: wiem już obczaiłam do których nie wsiadać;-)

Silv

@LukeJL: ale poprawisz we wpisie? :)

LukeJL

@Silv ale to ruskie to specjalnie. bo chodzi mi generalnie o siatkę (mesh) w 3D modelu rosyjskiego pociągu, ale jak napisałem siatka, to mi się skojarzyło z tymi siatkami "od ruskich" (te białe z niebieskimi paskami https://www.google.com/search[...]&source=lnms&tbm=isch ). Nikt nie mówi "siatka rosyjska" tak jak nikt nie mówi na Vifon "zupka wietnamska", tylko raczej "zupka chińska". Swoją drogą sądząc po wynikach z Google, to ruska siatka też nie jest popularnym określeniem (torba bazarowa ma więcej wyników).

LukeJL

@Silv chociaż zaraz, nie siatka, ale już "torba ruska" ma więcej wyników https://www.google.com/search?q="torba+ruska

Silv

Mnie się "ruskie" źle kojarzy, no ale może to tylko mnie.

lambdadziara

nikt chyba juz nie uzywa tego webgl/three.js - malo ksiazek na libgenie, dokumentacji do bibliotek czesto brak

LukeJL
2019-05-31 00:26

Ostatnio wchodzę głębiej w tematykę grafiki 3D ogólnie i w przeglądarce. I co się okazuje?

Ano, że można robić coś wyższej jakości w programie do robienia 3D a potem eksportować w niższej, gdzie będzie mniej wierzchołków, jednak można dodać np. bump mapy (które będą pokazywać w którym miejscu jest bardziej wypukły model), więc można symulować większą liczbę wierzchołków, albo np. nierówną powierzchnię.

Zrobiłem prostą bump mapę (ręcznie, w Gimpie, bo to normalny plik graficzny, gdzie jasność piksela oznacza wypukłość/wklęsłość) i podłączyłem do Three.js i voila - działa

Jednak problem z bump mapami jest taki, że widać, że to oszustwo więc jak się spojrzy pod odpowiednim kątem, to iluzja pryska, że widać, że to dalej płaska ścianka.

Można dodać jeszcze displacement mapy, czyli coś podobnego, ale że naprawdę potem jest coś wypukłe, naprawdę "wystaje" ze ścianki.

I cóż, próbowałem tę ręcznie zrobioną mapę podpiąć pod Three.js (tę samą, co do bump mapy), ale nie udało się. Gdzieś wyczytałem, że jak displacement mapę dodaję to muszę jednak dodać jeszcze normal mapę (czyli mapę, która pokaże jak są położone normalne, czyli jak jest nachylona powierzchnia w danym punkcie.

Tylko problem z normal mapą jest taki, że tam jest więcej informacji zakodowane w pliku graficznym (kąt i nachylenie), więc ciężko to zrobić ręcznie. Będę musiał to w Blenderze zrobić już na poważnie, tylko najpierw się nauczę jak się robi mapę normalnych w Blenderze.

Żeby optymalizować zasoby (i nie tracić na jakości) można też "piec" tekstury (ang. baking) czyli jakby prerenderować obiekt w programie do 3D w wysokiej jakości, tylko że renderować to w formie tekstury. I potem tę wysokiej jakości teksturę wyświetlać real time że niby to taki obiekt dokładny. I to mi się udało zrobić w Blenderze, chociaż jeszcze nie przeniosłem tego do Three.js.

Tylko z bakingiem jest taki problem, że on zapamiętuje położenie światła, więc to się ponoć nie nadaje do dynamicznych scenerii z dynamicznym światłem. No i żeby dokonać bakingu, należy ręcznie "odwinąć" obiekt, do pojedynczych ścianek (żeby dać wskazówkę Blenderowi w jaki sposób ma generować teksturę, jak ma liczyć jej współrzędne). Chociaż nie wiem, czy to jedyna opcja. Na razie jestem na etapie kombinowania i tutoriali.

Dobra, brzmi to pewnie wszystko dość dziwne, ale daję słowo, że jest fascynujące ;P

EDIT: dołączam screena z nałożoną bump mapą (generowaną dymanicznie z canvas) - mam na myśli te prostokąty. Tłem się nie przejmujcie, bo to zdjęcia w formie sky boxu...

WeiXiao

tyle o tej grafice a żadnego screena :/

Silv

@LukeJL: ja Ci wierzę, że może być fascynujące. :)

mar-ek1

Jakbyś szukał też takiej opcji to dodam, że kiedy bawiłem się grafiką 3D to korzystałem też z CrazyBump do generowania Normal/BumpMap z tekstur/obrazków. Całkiem nieźle się sprawdza jak po prostu chcesz mieć na powierzchni fakturę np. kamienia czy kory bez modelowania tego np. w Z-Brushu. http://www.crazybump.com/

LukeJL

@WeiXiao ok, dołączyłem screena tego, co sobie kombinuję w Three.js. Za parę dni pewnie będzie coś więcej, jak juz zrobię coś konkretnego (chciałbym to wrzucić do netu już jako konkretną aplikację-zabawkę).

LukeJL

@mar-ek1 o, ciekawe. chociaż Chrome mnie ostrzega, jak wchodzę na tę stronę.

mar-ek1

Chyba im certyfikat się zepsuł bo wcześniej normalnie wchodziłem. W każdym razie jak wpiszesz w Google to znajdziesz też pewnie inne generatory normal map

Spine

Screen wygląda jak okienka w Windows 95 :)

LukeJL

@Spine kto wie, może jakieś Windows 2025 będzie już w 3D, w jakiejś tam wirtualnej rzeczywistości.

Spine

@LukeJL: https://www.imdb.com/title/tt1677720/ :)

Jeśli chodzi o same okienka, to już od dawna jakieś tam efekty 3D można osiągnąć, ale to pewnie wiesz ;)
Jakieś Compiz Fusion, jakiś Beryl, Aero też jakieś tam efekty dodaje...

Spine

@nullpt4: I to mi śmigało płynnie na 512 MB ram, RADEON 9500 PRO, AMD Athlon XP 2600+ :]
Podczas gdy ludzie narzekali na wydajność Visty :D

LukeJL
2019-05-22 13:59

Wpadłem na pomysł nazwania biblioteki JSowej od nazwy jakiegoś pierwiastka. Jednak za cholerę się nie da. Istnieje chyba biblioteka JSowa o nazwie każdego pierwiastka. Próbowałem iść dalej i może w związki chemiczne iść?
Może Salt? Jest: http://npmjs.com/salt
To może nazwać wzorem NaCl? Też jest: https://www.npmjs.com/package/nacl
W końcu wpadłem na pomysł, żeby pojechać po bandzie i nazwać bibliotekę Chlorek Sodu (po angielsku: Sodium Chloride)...
.
.
.
i też już jest! https://npmjs.com/sodium-chloride XD XD XD
...
Jak widać znalezienie wolnej nazwy jest ciężkie.

Chociaż ciekawym trickiem jest nazywanie bibliotek w języku innym niż angielski. Np. nie ma jeszcze biblioteki Chrząszcz, więc jak ktoś chce, to się śpieszcie: https://www.npmjs.com/package/chrzaszcz ;)

Silv

Nawet nie jedna, a dwie: "sodium-chloride", "sodium_chloride". Ciekawe.

WhiteLightning

Nawet w szachach masz otwarcie "sodium attack" :)

Silv

Jednak nie wszystkie pierwiastki są w nazwach paczek w npm. Zapisz sobie listę z tej strony do pliku tekstowego o nazwie element-names. Przygotowałem na szybko skrypt w Bashu – możesz(na) sprawdzić: for elementName in $(cut -d- -f3 element-names | cut -d" " -f2) ; do if [[ $(npm search $elementName | wc -l ) > 1 ]] ; then echo "true - "$elementName ; else echo "false - "$elementName ; fi ; done Wydaje się działać poprawnie.

Silv

PS. To znaczy to zakłada na przykład, że komunikat z informacją o braku paczki o danej nazwie będzie mieć jedną linię. ;) Należałoby to ulepszyć, a w ogóle może skorzystać z API npm (jeśli jakieś jest).

WhiteLightning

Z innej beczki, latwo sie taka wlasna paczke robi ? :)

LukeJL

@WhiteLightning robi łatwo, gorzej z utrzymywaniem, odpowiadaniem na requesty użytkowników itp. Nie mówiąc już o promocji. Kiedyś zrobiłem paczkę, która rozwiązywała pewien problem z Redux, opublikowałem, niewiele osób korzystało. A pół roku później bardzo podobną paczkę zrobił znany JavaScriptowy influencer - i miał lepszy marketing, i rezultat jest taki, że w jego paczce ma 1,804,774 ściągnięc tygodniowo, a o mojej paczce nikt nie pamięta (187 tygodniowo). Mimo, że technicznie to bardzo zbliżone biblioteki (tyle, że ja już sobie odpuściłem potem i przestałem ją jakoś aktywnie rozwijać). Najpierw mnie to wkurzało, ale teraz myśle, że to dobrze, bo przynajmniej nie musze tego utrzymywać, a za samo utrzymywanie biblioteki nikt mi nie zapłaci (z drugiej strony autor tej drugiej paczki zrobił przy okazji kurs do niej na Egghead, więc może mu się to opłaca jakoś, ta ciężka praca, nie wiem).

spartanPAGE

Kilka wolnych propozycji: triamminetriaquachromium(iii)chloride, 4-methylpentan-2-one, (5R)-[(1S)-1,2-Dihydroxyethyl]-3,4-dihydroxyfuran-2(5H)-one. Tylko szybko!

no_solution_found

a nie lepiej nazwać ja tak, aby mówiła po co w ogóle została stworzona? :P

Pinek

@LukeJL: nazwij ją na cześć użytkownika @czysteskarpety

nohtyp

@LukeJL załóż 500-1000 fikcyjnych kont na github (byś sobie ogwiadkował projetk), następnie zrób bota, który wygeneruje Ci milion pobrań tygodniowo, zrób 2-3 stronki by była podkładka pod dokumentację i pyknij coś klikalnego na github <- wtedy ludzie przestaną myślać "aa testowy projekt, nie pobieram - mimo, że 99% bibliotek w js to właśnie eksperyment"

WeiXiao

@nohtyp: szybko by cię pewnie usunęli :P

Wibowit

unobtanium, kryptonite i adamantium też zajęte :/

Haskell

Ja od razu znalazłem wolną i chwytliwą nazwę https://www.npmjs.com/package/bulbulator

LukeJL

@członek zarządu https://en.wikipedia.org/wiki/Viton .The name is a registered trademark of The Chemours Company.

Kamil Raju

Trochę offtop, ale przez lata nastukałem sporo bibliotek, do których wydzielałem powtarzający się kod. Dostawały nazwy po moich pupilach. Szur, Mira, Mars, Funfel(fąfel bez unicode), Pestka itd.. Teraz ilekroć tworzę projekt, na start mam doła, bo importuję do niego pół cmentarza :F .

konserwa

Nie myślałeś o warzywach ? Jak pierwiastki są zajęte to niech spadają na bambus.

athaylean

W kwestii wolnych nazw na npm to nawet powstał drinking game: https://npmdrinkinggame.party/

karpov

Łatwiej będzie znaleźć najpierw nowy pierwiastek ;)

kate87

A nie lepiej wyłamać się z trendu i nazwać imieniem jakiejś choroby, czy zaburzenia? Amelia, czy tam emalia, albo Heksakosjoiheksekontaheksafobia.

spartanPAGE

Albo klinowo-podniebienna ganglioneuralgia (sphenopalatine ganglioneuralgia) (ból głowy wywołany "zmrożeniem mózgu")

Wibowit

Syphilis, chlamydia, oneitis są wolne :]

orchowskia

a może z jakąś literówką? np Saltrl , jak Flickr Tickr itd :D

vpiotr

Proponuje moduły a'la alternatywne komendy gita. Np. nazwa modułu sciagnij-to-gosciu jest wolna.

Koziołek

Młodzi jesteście. Jedna z popularniejszych alkogier na konferencjach. Ktoś podaje słowo (po angielsku, rzeczownik) i sprawdzamy, czy istnieje biblioteka JS o takiej nazwie. Jak nie istnieje, to pijemy. Jak istnieje, to też pijemy.

kate87

Brzmi jak sposób na odpadnięcie Kate w ciągu 3 minut po rozpoczęciu gry.

Koziołek

@kate87: to jest gra dla desperatów. Tam chodzi tylko o to by odpaść.

kate87

@Koziołek: czyli w pewnym sensie była bym pierwsza pytanie czy wygrywa ten kto pierwszy odpada czy raczej ten kto zostaje jako jedyny.

Koziołek

@kate87: pisząc w JS nie jesteś zwycięzcą.

kate87

A reszcie po medalu, jak na olimpiadzie pracowniczej :D

WhiteLightning

@Koziołek: jak to nie, skor piszesz w JS to znaczy ze nie piszesz w wielu jeszcze gorszych jezykach :)

Cogito

A może nazwy bogów? Osiris, Serapis, Quetzacoatl. Lub imiona królewskie w stylu Suppululiuluma albo Assurbanipal albo Ankhessenamon czy Menkaure?

kate87

To mi się z syropami na kaszel kojarzy raczej.

LukeJL

jeszcze mogą być owoce, zwierzęta.. no i niekoniecznie po angielsku xD

LukeJL
2019-05-21 15:56

próbowałem zanimować linię w SVG, myślałem, że ustawię efekt przejścia w CSS, i walnę w SVG po prostu <line x1="10".......... i potem zmienię x1 i się zanimuje. A to figa! x1 się nie animuje w ten sposób. Co robić, co robić? Czy tylko animacja za pomocą JSa zostanie?

Ależ nie! Dowiedziałem się ze StackOverflow porady, żeby użyć <path> zamiast <line> (dla nie wtajemniczonych - <line> to taki odcinek - ma pozycję startową i końcową, a <path> to w sumie dowolna linia, może być nawet krzywa) i to <path> proszę was się animuje i nawet do pewnego stopnia morfuje.

Porównajcie sobie: dwie linie - jedna za pomocą line, druga za pomocą path. I ustawiamy je na tę samą pozycję. Ta, która jest za pomocą "line" przeskakuje od razu, a ta, która za pomocą path płynnie się przesuwa zgodnie z CSS transition. https://codepen.io/anon/pen/xNPRrJ

Silv

Ja zawsze mam problem, jak tu uruchomić kod na Codepen... CTRL+ENTER nie działa.

LukeJL

on się sam uruchamia jak coś zmienisz. Dlatego ja na codepen.io wchodzę jak chcę coś przetestować bardziej HTML/CSS, a jak coś bardziej związane z JS to na jsfiddle, bo tam się ręcznie uruchamia co jest lepiej. Swoją drogą w codepen irytuje mnie to, że jest takie sekundowe albo i więcej opóźnienienie zanim się odświeży

Silv

@LukeJL: dzięki, teraz sobie przypominam.

LukeJL
2019-05-11 00:45

"Keeps friends close and formatters closer" - taki mi wyskoczył napis na Codepen.io. Jakieś frontendowe wróżby teraz dają czy co? A wam co wyskoczyło?

Silv

"The best caches are like the best hugs. Warm."

czysteskarpety

"You Will Die in Seven Days" :|

cerrato

Ustawię sobie zaraz przypomnienie w kalendarzu, żeby za tydzień sprawdzić Twoje ostatnie logowanie. Jakoś tak trochę smutno i pusto będzie bez Skarpetki na forum :(

Spine

Ale jak można zginąć w rogalu?

Hispano-Suiza

"Stop using stupid frameworks"

LukeJL
2019-03-04 15:02

Śniło mi się, że się rekrutowałem do Microsoftu i były jakieś dziwne testy psychologiczne, które sprawdzały zgodność z ich kulturą. Pytali o jakieś aury(??) i kolory (trzeba było zgadnąć kolor aury, WTF?). Aż mnie kusi, żeby wysłać CV do Microsoftu i zobaczyć, czy faktycznie tak jest.

Akihito

@LukeJL: pewno chodzilo o kolory z logo :D

superdurszlak

Chyba miałem namiary na headhuntera, chcesz? :D

cerrato

Czasami sny się sprawdzają. Mi jakiś tydzień temu się śniło, że stoimy z kumplem na firmowym parkingu obok firmowego auta, które się rozpada/rozsypuje na kawałki. Tego samego dnia w tym samym samochodzie padło sprzęgło i trzeba było go zholować pod firmę. Weź im wyślij CV, zobaczymy co z tego wyniknie :D

vpiotr

O ile nie aplikujesz na "dyrektora kreatywnego" to pytania są raczej o wiele bardziej techniczne: algorytmy, grafy, drzewa, bazy danych. Jedna z ciekawszych rekrutacji na jakich byłem (oprócz Googla).

cerrato

@vpiotr: a jaki był efekt spotkania? Kto kogo nie chciał? A może robisz w Ms?

vpiotr

Efekt: darmowa wycieczka do Dublina i kolacja na koszt M$. Trochę degustacji piwa irlandzkiego i posłuchanie języka irlandzkiego (to nie jest angielski). Może też uświadomienie sobie pewnych braków. Nie będę ściemniał że mi się nie podobało ;-) Pracownicy przesłuchujący wydawali się bardzo kompetentni. Polecam próbować jeśli będzie okazja.

WhiteLightning

@vpiotr: co do angielskiego w Irlandii mialem podobnie, zagdalem do goscia w taksowce i w pewnym momencie zaczalem sie zastanawiac jak to jest, ze przeciez dobrze znam angielski a prawie nie rozumie co on mowi :)

Afish

Ogólnie rekrutacje w dużych firmach mają ten urok, że można zwiedzić trochę świata za darmo. To Londyn, to Bruksela, to Zurych, zawsze fajnie jest się w to pobawić.

WhiteLightning

@vpiotr: aa, to tobie o Gaelic chodzilo. Oni w tym nie mowia i nie specjalnie znaja. Tutaj fajna miniaturka o tym: https://www.youtube.com/watch?v=JqYtG9BNhfM

LukeJL

@superdurszlak jakie to namiary? Zapodaj. Może złożę CV, chociaż w sumie i tak nie wiem czy mnie przyjmą, jeśli będę miał zły kolor aury.

Olsztyn

Jak Ci się przyśni Sasha Grey to też do niej napiszesz?