Archief - Mooi staaltje css :-)

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

Gurdt

Legacy Member
adrianhates zei:
met spannetjes. Die ket heeft een kleurenmap gemaakt van die afbeelding alle voorkomende (188?) kleuren in css gezet, via php en dan met php die html gegenereerd. ( of met een andere prog. taal. :p )

(snelle indruk van hoe ik het zou doen :) )

zelfs die kleuren genereert ge :D ge opent een afbeelding in bv C++ en schrijft voor elke pixelwaarde die ge nog nie kent een CSS-item naar file + een random karakter in ne span bijhorend aan da CSS-item.

klaar!

adrianhates

Legacy Member
Gurdt zei:
zelfs die kleuren genereert ge :D ge opent een afbeelding in bv C++ en schrijft voor elke pixelwaarde die ge nog nie kent een CSS-item naar file + een random karakter in ne span bijhorend aan da CSS-item.

klaar!

Ja ik zou het ook ni handmatig doen ze..
(die kleurenmap maakt ge met 20 lijnen PHP code)

Teknoman

Legacy Member
Een maat van mij had de html-pagina van in de OP naar me gelinkt en ik vond het wel een tof idee om zelf eens uit te werken. Ik heb snel een progje geschreven (in .net) waarmee je je eigen images kunt omzetten naar zo'n type pagina: linkje

Voorbeeld:
origineel - resultaat

Dus ja, wie het eens wil proberen, u doet maar :)
Afbeelding, kleurdiepte, hoogte, tekst en titel van de pagina kun je zelf allemaal instellen. Logischerwijs zal de resulterende html een pak groter zijn als je de kleurdiepte en hoogte opdrijft ;)

edit: heb een nieuwe versie geupload die kleinere html en css genereert en die een beter resizing-algoritme gebruikt.

adrianhates

Legacy Member
mooi :) Hoeveel lijnen code is het genereren van de html + indexatie van de kleuren?

kaketoe

Legacy Member
haha zalig :)
Je zou het progje wel nog kunnen updaten door een soort compressiealgoritme toe te passen zodat de dimensies wel nog min of meer bewaard blijven...

't is doenbaar :p Maar sowieso al zeer plezant :D nice job!

Gurdt

Legacy Member
adrianhates zei:
mooi :) Hoeveel lijnen code is het genereren van de html + indexatie van de kleuren?

Niet zo veel lijkt me :D Als je het eens wilt proberen, hier is wat pseudocode over hoe je het ZOU kunnen doen!

Code:
parseImage() {
    image = open(image);

    while(pixel = geefPixel(image)) {
        kleurwaarde = geefKleurwaardePixel(pixel); // doorzoekt vector van kleuren
    
        // is de kleur al gedefinieerd?
        if(kleurwaarde == -1) /* nog niet gedefinieerd */ {
            // juiste code toevoegen aan string en kleurenvector updaten
            kleurwaarde = cssGedeelte.voegKleurToe(pixel);
        }
        // juiste code aan string toevoegen
        htmlGedeelte.voegPixelToe(kleurwaarde);
    }

    close(image);

    // de 2 strings met andere info naar file schrijven, klaar!
    writeCssAndHtml();
}

Edit: deze pseudocode houdt wel geen rekeninng met de grootte enzo van een afbeelding ;)

Cycloon

Legacy Member
In matlab kan je zoiets maken in een goeie 10-20 regels code volgens mij. Het enige wat prutswerk is, is om eerst te vinden hoeveel pixels je moet samennemen om te laten overlappen met de achtergrond die 1 letter inneemt.

Teknoman

Legacy Member
Ik heb het wat geupdate zodat het omzetten iets efficiënter verloopt.

Wat bedoel je met een compressiealgoritme om de dimensies te bewaren?
Als je de tekst selecteert in een browser (ik heb het getest in firefox en safari) dan is 1 de selectie van 1 letter ongeveer dubbel zo hoog als dat hij breed is. Bij het resizen van de afbeelding verander ik de hoogte en laat de breedte berekenen in functie van de hoogte zodat de verhoudingen ongeveer bewaard blijven (aangezien je uiteindelijk rechthoekige "pixels" uitkomt moet de afbeelding 2 keer zo breed gemaakt worden dan wanneer de "pixels" vierkant zouden zijn).

Als je bedoelt om bvb de letters zelf kleiner te maken en een afbeelding uit meer lijnen tekst te laten bestaan dan nu toegelaten is in het programma (256) is dat zeker mogelijk, dat is niet veel werk. Het html-bestand dat je dan uitkomt zal dan wel veel groter zijn.

@AdrianHates: De klasse waarin het converteren gebeurt is 168 lijnen (komt vooral door het gebruik van StringBuilders ipv gewone string-concatenatie omdat anders de performance tamelijk laag is. Ipv op 1 lijn een hoop zaken aan elkaar te plakken moet ik elke keer een nieuwe lijn nemen). Daar zitten wel nog wat witregels, commentaarregels en imports bij, als ik die er af trek kom ik op 160 lijnen

Teknoman

Legacy Member
Cycloon zei:
In matlab kan je zoiets maken in een goeie 10-20 regels code volgens mij. Het enige wat prutswerk is, is om eerst te vinden hoeveel pixels je moet samennemen om te laten overlappen met de achtergrond die 1 letter inneemt.

Bwa, is toch zoveel werk niet. In .net kun je makkelijk afbeeldingen resizen, dunno of je dat kan in matlab. Ik resize gewoon de high res versie naar een low res versie en converteer die low res versie.

kaketoe

Legacy Member
Met compressiealgoritmen bedoel ik gewoon dat je een aantal manieren hebt om de gezamelijke pixelwaarde te berekenen van een pixelveld (van de grootte die jij kiest).

Ik weet nie hoe het nu werkt, maar ik denk dat je de waarde neemt van een pixel en er dan 'x' overslaat enz. Je zou een ander algoritme kunnen gebruiken dat een gemiddelde waarde gebruikt. (cfr. kwantisatie (Kwantisatie (informatica) - Wikipedia)).

't Is eigenlijk een écht aangenaam projectje omdat je je op hetzelfde onderzoeksterrein bevindt als professionele codecs als JPEG enz.

Dit begint begint steeds meer in programming & gamedesign thuis te horen :)

Als dit topic nog leeft na de examens probeer ik het eens in Python.

Cycloon

Legacy Member
Teknoman zei:
Bwa, is toch zoveel werk niet. In .net kun je makkelijk afbeeldingen resizen, dunno of je dat kan in matlab. Ik resize gewoon de high res versie naar een low res versie en converteer die low res versie.

Matlab heeft wel héél wat meer functies voor handen om bepaalde zaken te kunnen uitvoeren zonder zelf bergen code te moeten schrijven (het is dan ook wel een stuk minder performant met momenten). Zeker als je verder wilt gaan door bepaalde regio's met een zelfde bereik enzo samen te nemen om nog minder css te hebben dan kan matlab wel handig zijn. Maar in andere talen zal het ook wel niet zoveel voorstellen zoals ik eerder ook al zei. Het is maar een kwestie van een achtergrond te maken voor elke pixel en css te genereren. Het enige wat moet bijgehouden worden is of er reeds css voor aanwezig is of niet.

Teknoman

Legacy Member
kaketoe zei:
Met compressiealgoritmen bedoel ik gewoon dat je een aantal manieren hebt om de gezamelijke pixelwaarde te berekenen van een pixelveld (van de grootte die jij kiest).

Ik weet nie hoe het nu werkt, maar ik denk dat je de waarde neemt van een pixel en er dan 'x' overslaat enz. Je zou een ander algoritme kunnen gebruiken dat een gemiddelde waarde gebruikt. (cfr. kwantisatie (Kwantisatie (informatica) - Wikipedia)).

't Is eigenlijk een écht aangenaam projectje omdat je je op hetzelfde onderzoeksterrein bevindt als professionele codecs als JPEG enz.

Dit begint begint steeds meer in programming & gamedesign thuis te horen :)

Als dit topic nog leeft na de examens probeer ik het eens in Python.

Nee, ik neem niet de waarde van bvb pixel 0 op rij 0 en dan de waarde van bvb pixel 5 op rij 0 (want dat zou maar een lelijk resultaat geven ;) ).
Ik resize de high res versie gewoon naar een low res versie (gaat makkelijk met het graphics-object) en op basis van die low-res versie bepaal ik de kleuren en maak ik de html. Ik liet het wel eerst resizen via het algoritme dat .NET standaard gebruikt (dunno wat het is). Ik heb dat nu eens veranderd naar HighQualityBicubic en dat geeft precies een iets beter resultaat. Ik denk dat dit is wat je bedoelde met pixels samen nemen?

Om het aantal mogelijke kleuren te verlagen neem ik de ARGB-waarde van een pixel (is een 32-bit integer) en daar gooi ik dan per kleurkanaal een aantal van de minst significante bits uit door ze op 0 te zetten met behulp van een logische AND. Bvb: kleur = pixel_ARGB AND 0xC0C0C0 om zo 2 bit per kleurkanaal over te houden (=6bit voor heel het kleur) en het alphakanaal weg te gooien aangezien je dat toch niet kunt gebruiken in css-kleuren.

kaketoe

Legacy Member
zeer intelligent om die minst beduidende bits eruit te gooien... Impliciet heb je gebruik gemaakt van de zgn. bitplanes (Bit plane - Wikipedia, the free encyclopedia).

Je hebt dus eigenlijk ook gebruik gemaakt van een gelijkaardig algoritme door het "resizen", dat gebeurd natuurlijk niet zomaar. Ik ga eens googlen op dat HighQualityBicubic algoritme :)

Tziet er allesinds erg boeiend uit allemaal, maar waarom neem je de ARGB waarde als je er toch de alpha uitknalt? Of kan je in .net geen standaard RGB waarde opvragen?
(totaal geen ervaring in .net)

Dikke chapeau! Je hebt een paar boeiende multimediaconcepten hun nut bewezen voor iedereen hier :D

Teknoman

Legacy Member
Nee, je kunt de RGB-waarde niet opvragen. De waarde per kleurkanaal gaat wel, maar het is meer moeite om die elk afzonderlijk op te vragen en samen te voegen dan om gewoon de ARGB-waarde op te vragen :).

Teknoman

Legacy Member
Die in de OP is Sasha Grey, die uit mijn voorbeeld is Laura Vandervoort.

dJeez

Legacy Member
Ietwat webdeveloper had toch Lorem ipsum genomen als tekst ze, pfff. :p

Nu, dit bewijst gewoon dat alles terugkomt : voor er zelfs maar sprake was van JPEG of andere grafische bestandsformaten circuleerde er al ASCII porn :p.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan