JavaScript wykorzystany do utworzenia bluescreen

Projekt polega na generowaniu obrazów w HTML przy użyciu dwuwymiarowej tablicy elementów "div". Zawiera funkcje takie jak wypełnianie obszarów (flood fill), które zmieniają kolor sąsiadujących regionów na obrazie na podstawie danych od użytkownika. Kolejną kluczową funkcją jest możliwość łączenia dwóch obrazów, gdzie jeden obraz może być w trybie niebieskiego ekranu (bluescreen). W trybie niebieskiego ekranu, niebieskie tło jest ignorowane, co pozwala na jego przezroczystość podczas procesu łączenia. Użytkownicy mogą tworzyć obrazy, manipulując kolorem tła każdego "div". Funkcja wypełniania obszarów zapewnia, że połączone elementy "div" o tym samym początkowym kolorze są zmieniane na wybrany kolor wypełnienia. Podczas łączenia obrazów, niebieskie części obrazu w trybie niebieskiego ekranu są nakładane na obraz podstawowy. Ten projekt nie używa elementu canvas; opiera się całkowicie na elementach "div" rozmieszczonych w siatce. Końcowy połączony obraz jest wyświetlany poprawnie, łącząc elementy wizualne obu obrazów, ignorując niebieskie tło. To podejście zapewnia dynamiczny i interaktywny sposób generowania i manipulowania obrazami bezpośrednio w przeglądarce.

zrodlo - http://infinityhost.ct8.pl/code_4/

Okrutna potworność, rób dalej.

Pytanie tylko, na co Ci to?

bagietMajster napisał(a):

Okrutna potworność, rób dalej.

Sprawdziłem czy to co teoertycznie rozumiem, działa w praktyce. Podstawa do utworzenia programu graficznego i programu do efektów specjalnych. Wygląda jak wygląda ale daję zamiast 20 x 100 tablicę 1000 x 1000 i mam taki efekt jaki widzisz na filmach.

no ale czemu nie użyć po prostu canvasa?

obscurity napisał(a):

no ale czemu nie użyć po prostu canvasa?

Canvas chyba nie obsługuje pixeli.

@johnny_Be_good: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

Spine napisał(a):

@johnny_Be_good: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

Dwie kwestie

1. CORS blokuje całą zabawę, jak bym chciał walczyć z JS bym użył Reacta

2. Że niby w tym moim edytorze, mogę ustawiać kolory na obrazku tak aby wykonały kod? Przecież to szaleństwo :|

   ALE mogę kolory ustawiać i wyświetlić napis z nich zamienionych w ascii. Fajną zabawkę mogę zrobić.

Jako eksperyment "jak sobie przeglądarka poradzi z wieloma małymi divami" spoko, ale obstawiam, że przy większej ilości tych divów albo na słabszym sprzęcie mogą się pojawić problemy.

Ogólnie do takich rzeczy masz Canvasa.
Masz też dostęp do poszczególnych pikseli https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
jak również możesz sobie rysować za pomocą fillRect czy innych bardziej wysokopoziomowych funkcji.

Też innym, jeszcze potężniejszym rozwiązaniem jest WebGL. A w WebGL można rysować pikselami w ten sposób, że masz binarne dane tekstury i zmieniasz określone pozycje (oznaczające red, green, blue, alpha danego piksela) i tę teksturę przekazujesz do WebGL i renderujesz w shaderze.

I albo używasz biblioteki opartej o WebGL (Three.js, Pixi itp.), albo opcja dla masochistów - piszesz z palca wszystko. Jak lubisz wynajdywać koło na nowo, to pisząc z palca WebGL będziesz mieć kupę okazji do eksploracji i tworzenia własnych abstrakcji, własnych shaderów (w shaderze w zasadzie jesteś królem i możesz rozmaite wymyślone przez siebie efekty robić, jeśli skille ci na to pozwolą). Chociaż nawet wysokopoziomowe biblioteki oparte o WebGL pozwalają na pisanie własnych shaderów.

LukeJL napisał(a):

Jako eksperyment "jak sobie przeglądarka poradzi z wieloma małymi divami" spoko, ale obstawiam, że przy większej ilości tych divów albo na słabszym sprzęcie mogą się pojawić problemy.

Ogólnie do takich rzeczy masz Canvasa.
Masz też dostęp do poszczególnych pikseli https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
jak również możesz sobie rysować za pomocą fillRect czy innych bardziej wysokopoziomowych funkcji.

Też innym, jeszcze potężniejszym rozwiązaniem jest WebGL. I albo używasz biblioteki opartej o WebGL(Three.js, Pixi itp.), albo opcja dla masochistów - piszesz z palca wszystko. Jak lubisz wynajdywać koło na nowo, to pisząc z palca WebGL będziesz mieć kupę okazji do eksploracji i tworzenia własnych abstrakcji, własnych shaderów itp.
A w WebGL można rysować pikselami w ten sposób, że masz binarne dane tekstury i zmieniasz określone pozycje (oznaczające red, green, blue, alpha danego piksela) i tę teksturę przekazujesz do WebGL i renderujesz w shaderze.

Tak tylko w tym obrazie mogą być różne informacje, CORS to blokuje.

Te shadery to już zacząłem (rozmiar pędzla zwiększyłem - zobacz zamiast jednego div zamalował 5) teraz się zastanawiam czy nie robić antyalisingu.

@LukeJL

Przy sporym rozmiarze jak na rozwiązanie webowe 100 x 100 - 10000 pixeli (z lewej duży pędzel , z prawej mały) ładowanie około 10 sekund

Przy dużym rozmiarze jak na rozwiązanie webowe 300 x 300 - 90000 pixeli (z lewej duży pędzel , z prawej mały) ładowanie 20 sekund (jeszcze za mały pędzel żeby fajnie wyglądało)

Generalnie może się nadawać do tworzenia malych fajnych rysunkow (rozmiar nie musi być duży)

Przy malym rozmiarze jak na rozwiązanie webowe 50 x 50 - 2500 pixeli (z lewej duży pędzel , z prawej mały) ładowanie 4 sekundy

johnny_Be_good napisał(a):

Tak tylko w tym obrazie mogą być różne informacje, CORS to blokuje.

Blokuje jeśli pobierasz obrazki z innych domen.
Albo jeśli odpalasz plik HTML na swoim komputerze przez file://
Może dlatego się zdawać, że nie działa, ale na serwerze powinno działać (jeszcze możesz też lokalnie sprawdzić python -m http.server).

Proszę państwa - znowu coś mnie nie pykło

@johnny_Be_good wyregexuj to.......

johnny_Be_good napisał(a):

Tak tylko w tym obrazie mogą być różne informacje, CORS to blokuje.

Jak mi przykro, ze twój własny serwer, który kontrolujesz wysyła do przeglądarki, żeby nie pozwalała wysyłać requestów z innych urlów niż ten przesłany przez headery serwera.
Możesz zawsze corsy * zwrócić, wtedy przeglądarka nie będzie CORS uwzględniał, CORS jest serwera, który mówi przeglądarce co powinna unikać, przeglądarka tylko słucha, serwer mówi, cookies dodaje do każdego requesta nie pozwalaj na requesty z innych stron, żeby ktoś nie zbaitował request za innego użytkownika i przeglądarka przypadkiem dodała tokeny autentykujące.