Afbeelding pixel voor pixel kunnen tonen

[Verwijderd]

Ik ben aan een uitdaging begonnen waarbij ik er nog niet achter ben wat de juiste werkwijze is. Wat probeer ik precies te doen....

Een spel waarbij een afbeelding ergens is opgeslagen en getoond wordt in een browser. Bij het begin van dit spel is de afbeelding niet zichtbaar. Een speler kan items kopen/verdienen en daarmee pixels zichtbaar maken. Op het moment dat een speler iets verdient, moeten er een aantal willekeurige pixels van de afbeelding zichtbaar worden. Deze nieuwe afbeelding, met een aantal pixels zichtbaar, dient nu over de oude worden opgeslagen. Wanneer een andere speler de afbeelding in de browser bekijkt, zal deze ook dezelfde zichtbare pixels zien. Dit proces herhaalt zich steeds zodat de afbeelding steeds wat duidelijker wordt.

Om dit principe werkende te krijgen heb ik eerst met een programmaatje alle losse pixels in een mysql database kunnen stoppen (id, kleurcode, x-coordinaat en y-coordinaat) . Met een query en een formulier kan ik deze vrij eenvoudig uitspugen. Je begrijpt alleen dat een afbeelding van 500x500 uit 250.000 pixels oftwel records bestaat en dit toch wat overkill is.

Dus ben ik op zoek gegaan naar andere mogelijkheden. Bijvoorbeeld html5 en canvas. Ik haal nu een base64 afbeelding met php uit een mysql database en pass deze door naar het canvas. Daar probeer ik de alpha van de pixels te manipuleren maar dit gaat nog niet helemaal goed. Daarnaast heb ik het idee dat dit ook nog niet de juiste oplossing is.

http://jsfiddle.net/LuEzG/11/ --> Hier kan ik de alpha willekeurig manipuleren

http://jsfiddle.net/pLMMF/ --> hier probeer ik hetzelfde met een afbeelding maar dat gaat nog niet goed.

Mijn grootste zorg is of ik met canvas pixels van een afbeelding zichtbaar kan laten worden, terwijl de uiteindelijke afbeelding op het moment van spelen geheim blijft voor de speler. De speler ziet dus alleen de pixels die zichtbaar worden tijdens het spelen en kan op geen enkele andere manier achter de onzichtbare pixels komen.

Hoop dat jullie nog met ideeen/aanvullingen etc kunnen komen.

[ Voor 4% gewijzigd door Verwijderd op 21-11-2012 10:03 ]

[RobIII]

Was het niet handig(er) geweest als je je SO topic er even bij had vermeld?

Wat ik niet uit je topic (hier) haal: wat is nou je concrete vraag/probleem? Ik zie alleen:

Verwijderd schreef op woensdag 21 november 2012 @ 10:00:
Daar probeer ik de alpha van de pixels te manipuleren maar dit gaat nog niet helemaal goed.
...
hier probeer ik hetzelfde met een afbeelding maar dat gaat nog niet goed.

Define: nog niet goed.

[ Voor 38% gewijzigd door RobIII op 21-11-2012 10:18 ]

[Verwijderd]

Helemaal gelijk!! Dan voor het delen.

Mijn concrete vraag is of ik mijn spel kan realiseren door middel van het aanpassen van de transparantie in het canvas element.

[RobIII]

Verwijderd schreef op woensdag 21 november 2012 @ 10:18:
Helemaal gelijk!! Dan voor het delen.

Mijn concrete vraag is of ik mijn spel kan realiseren door middel van het aanpassen van de transparantie in het canvas element.

Alles kan
Maar je beseft dat een beetje bovengemiddeld persoon gewoon op F12 ramt en in z'n netwerk tab kijkt welke file er gedownload wordt? Dus daar zul je (ook) al iets anders op moeten verzinnen.



Wat betreft je aanpak: Waarom lopen klooien met alpha? Als je nou eens (om te beginnen) begint met een witte (rode/groene/zwarte) canvas en telkens een pixel uit de afbeelding op die canvas tekent i.p.v. proberen een kraslot na te doen. Als je dat werkend hebt kun je per pixel nog een "fade in" doen door wat te stoeien met alpha maar dat is een zorg voor later.

[ Voor 32% gewijzigd door RobIII op 21-11-2012 10:24 ]

[CodeCaster]

Kun je je server niet een afbeelding-met-alpha laten genereren per stap? Dus een afbeelding die enkel de pixels bevat die je wil tonen, met de rest van de (zwarte) pixels op alpha 0?

Zo gaat er nooit informatie over de lijn die je niet wil ontsluiten.

De afbeeldingen leg je dan na iedere stap over elkaar (of die merge je op je canvas), waardoor je uiteindelijk de gehele afbeelding te zien krijgt. Moet je natuurlijk wel zorgen dát je de hele afbeelding na N stappen te zien krijgt, en dat je dus niet telkens dezelfde pixel(s) opstuurt.

[ Voor 36% gewijzigd door CodeCaster op 21-11-2012 10:27 ]

[RobIII]

CodeCaster schreef op woensdag 21 november 2012 @ 10:26:
Kun je je server niet een afbeelding-met-alpha laten genereren per stap? Dus een afbeelding die enkel de pixels bevat die je wil tonen, met de rest van de (zwarte) pixels op alpha 0?

Zo gaat er nooit informatie over de lijn die je niet wil ontsluiten.

Inderdaad. Het is misschien niet het platform dat TS wil gebruiken maar dit lijkt me een leuk projectje om uit te werken met SignalR (afhankelijk van overige requirements uiteraard). Meer hier.

[ Voor 8% gewijzigd door RobIII op 21-11-2012 10:34 ]

[Verwijderd]

Ik ken het niet maar het is het proberen waard. Ik zal de vorderingen laten weten!

[Tarilo]

Ik zou het bestand als bitmap o.i.d. openen en vervolgens de alpha-waarde van de pixel die je wilt laten zien aanpassen. Daarna kan je het dan weer opslaan en heb je een nieuwe afbeelding met extra pixel zichtbaar.

Ik zou het sowieso nooit client-side doen, want dan krijg je de hierboven genoemde problemen. Iemand met enige kennis kan dan zo je hele afbeelding zien.

edit: ik ging er vanuit dat TS php gebruikte. Heb de post aangepast, omdat ik dit achteraf nergens zag staan.

[ Voor 26% gewijzigd door Tarilo op 21-11-2012 11:08 ]

[Erwin537]

Volgens mij is het veel makkelijker om met php een overlay achtig iets overheen te gooien. Met één of andere hashing of vaste overlay in de database (een aantal records met daaraan gekoppeld verschillende overlays) kan je wellicht beveiligen dat mensen zomaar de afbeelding opzoeken.

Het blijft natuurlijk mogelijk om uit te zoeken met welke URL je de volledige afbeelding kan opvragen, maar het is al moeilijker.

Echt goed beveiligen tegen url aanpassingen zou je het moeten koppelen aan accounts met progressie in dat 'level'.

[Verwijderd]

CodeCaster schreef op woensdag 21 november 2012 @ 10:26:
Kun je je server niet een afbeelding-met-alpha laten genereren per stap? Dus een afbeelding die enkel de pixels bevat die je wil tonen, met de rest van de (zwarte) pixels op alpha 0?

Op zich een goed idee, ware het niet dat het aantal pixels wat zichtbaar moet worden, kan verschillen. De ene keer kunnen er 10 zichtbare pixels bij komen en de volgende keer maar 5. Dan lijkt me deze methode minder handig.

[RobIII]

Verwijderd schreef op woensdag 21 november 2012 @ 12:24:
[...]


Op zich een goed idee, ware het niet dat het aantal pixels wat zichtbaar moet worden, kan verschillen. De ene keer kunnen er 10 zichtbare pixels bij komen en de volgende keer maar 5. Dan lijkt me deze methode minder handig.

Want? Dat kun je toch gewoon server-side verwerken?

[CodeCaster]

Het kan toch niet uitmaken of je een bepaald aantal pixels clientside of serverside zichtbaar maakt?

Ik bedoel dus een serverside functie à la:

code:

getPixels(userID, imageID, pixelAmount)
{
    original = loadImage(imageID);
    pixelMap = loadPixelMap(userID, imageID);

    revealedImage = revealImage(original,pixelMap, pixelAmount);

    savePixelMap(pixelMap);

    return revealedImage;
}

In de pixelmap hou je dan bij welke pixels voor de opgegeven user al zichtbaar zijn gemaakt (een bitmap ter grootte van de originele bitmap, maar met één bit per pixel) zodat je in revealImage() niet twee keer dezelfde pixel 'vrijgeeft'.

Clientside leg je dan die revealedImage (die dus net zo groot is als de originele image, maar die alleen een alpha-waarde van 1 en kleurgegevens heeft bij de pixels die je wil laten zien in deze stap, de rest is zwart/paars/wit/whatever en doorzichtig) over de eventueel eerder ontvangen images heen.

Hoe je dat laatste realiseert is aan jou; dat kan simpelweg met DOM-manipulatie door de images letterlijk over elkaar te leggen, maar ook door de image uit te lezen en de pixels waar Alpha > 0 op dezelfde positie te tekenen op je canvas.

Als je de verschillende stappen (de images per stap) ook wil opslaan, kun je de afbeeldingen ook serverside over elkaar leggen en dan opslaan. Vervolgens retourneer je de (URL naar de) nieuwste afbeelding.

[ Voor 60% gewijzigd door CodeCaster op 21-11-2012 12:48 ]

[TheNephilim]

Inderdaad zoals hierboven beschreven, gewoon met PHP GD aan de slag. Een nieuwe afbeelding maken en de vrijgegeven pixels tekenen op de nieuwe afbeelding. De host afbeelding krijgt de gebruiker dan nooit te weten, aangezien je alles server side afhandeld.

Bij wijze van een for lusje op alle 'zichtbare' pixels en die kopiëren naar de nieuwe afbeelding.

Het klinkt wel als een leuk idee trouwens, succes en laat even weten wat het geworden is!

[RobIII]

Even kort door de bocht; het is wel wat meer werk maar ik zou sowieso enkel updates van X bij Y (zeg 10x10, 25x25) over-en-weer sturen en niet telkens afbeeldingen van 800x600. Dat houdt de belasting qua bandbreedte een stuk lager en daarbij zit je (in-mem) veel minder pixels te bewerken/verstouwen voor elke update. Er zitten wel wat haken en ogen aan en, nogmaals, het is afhankelijk van de requirements of dat allemaal wel kan (zitten de pixels altijd in een bepaald "cluster" of zijn ze random verdeeld over de hele pagina etc.) maar als je er een beetje tijd en moeite in stopt is dit heel erg goed te optimaliseren zodat 't ook nog een beetje schaalt / leuke aantallen bezoekers aan kan.

[Verwijderd]

Er zullen in de gehele afbeelding pixels random zichtbaar moeten worden. Dus niet per cluster. De pixels die zichtbaar geworden zijn, dienen bij de volgende loop gecontroleerd te worden zodat ze niet voor een 2e keer zichtbaar worden.

Ik heb overigens ergens wel gelezen dat de PHP GD library niet echt geschikt is vanwege zijn traagheid.

[ Voor 18% gewijzigd door Verwijderd op 21-11-2012 19:32 ]

[P.O. Box]

hou ook rekening met de cache van de bezoeker, anders zullen veel bezoekers geen wijzigingen in het plaatje zien en al snel afhaken van je website...

GD library is prima geschikt... je gaat toch geen 1000-en afbeeldingen bewerken? en je bewerkt steeds maar x pixels... de vorige bewerking laat je staan, die ga je niet opnieuw uitvoeren...

[ Voor 39% gewijzigd door P.O. Box op 21-11-2012 20:37 ]

[TheNephilim]

Verwijderd schreef op woensdag 21 november 2012 @ 19:31:
Ik heb overigens ergens wel gelezen dat de PHP GD library niet echt geschikt is vanwege zijn traagheid.

Niet elke keer dat de afbeelding bekeken word, hoef je die aanpassing toe te passen. Je bewerkt de afbeelding als dat moet, slaat deze dan op en gaat die afbeelding die je opslaat aan bezoekers serveren. Daar hoeft geen php aan te pas te komen.

[Verwijderd]

Goed, ik denk dat ik het allemaal voor elkaar heb. Alles is gedaan met de PHP GD library. Ik ben zeker geen held met PHP dus het was vooral verschillende ideeën van anderen gebruiken.

Uiteindelijk is het volgens mij vrij eenvoudig gebleken om dit te verwezenlijken. Ik gebruik de volgende functies vanuit de GD library. De gedachte is dat er twee afbeeldingen zijn. Een bronbestand en een toplaag die er overheen komt te liggen. In deze toplaag worden willekeurig pixels transparant. De toplaag bestaat uit 1 kleur zodat ik die gemakkelijk kan detecteren

1) imagecreatefrompng om een toplaag te creëren
2) imagecolorallocatealpha om een alpha te creëren
3) imagecolorat om de kleur uit toplaag te detecteren zodat deze omgezet kan worden naar alpha
4) imagecolorsforindex geeft een array van alle gevonden kleuren
5) in een if statement check ik of er een kleur in de toplaag aanwezig is. Zo ja dan ga ik in een for loop de pixels aanpassen met imagesetpixel. Het aantal pixels dat transparant moet worden haal ik uit een variabele.

De afbeelding wordt opgeslagen.Zodra het script opnieuw gedraaid moet worden, wordt deze afbeelding weer in de imagecreatefrompng geladen.


met imagecopy zorg ik er voor dat boven gecreëerde afbeelding wordt samengesmolten met de bronafbeelding. Deze samengesmolten afbeelding wordt in de browser getoond.

Nu ging het er juist ook om dat de bronafbeelding geheim blijft, totdat alle pixels van de afbeelding zichtbaar zijn. Om dit te testen is hier de link naar de test. In deze afbeelding zijn al een paar pixels transparant. In de onderliggende afbeelding staan een aantal cijfers. Deze cijfers vormen een som. Ik ben benieuwd of een van jullie er achter kan komen.

[Erwin537]

Op deze manier is het volgens mij onmogelijk om te achterhalen wat de afbeelding is. Het ziet er naar uit dat je hard coded hebt welke afbeelding hij moet gebruiken en waar hij hem moet outputten.

Als je het dynamisch doet, dus parameters mee geeft voor welke afbeelding hij moet pakken, wordt het makkelijker. Dan nog kan je dat volgens mij tegen gaan door de afbeelding op een plaats te zetten waar php wel bij kan, en de gebruiker niet (of nog een hard-coded subfolder). Zo maak je het onmogelijk/lastig het origineel te downloaden van de server.

Maar het hangt er allemaal van af hoe goed je script is. Als het makkelijk is om de overlay aan te passen, maakt het allemaal niet meer uit.

[Verwijderd]

Ik begrijp niet helemaal wat je bedoeld met je antwoord . De bronafbeelding staat inderdaad ergens in een subfolder. Denk je dat deze manier van werken nog risico's met zich mee brengt?

De afbeelding die zichtbaar moet worden hoeft niet steeds te veranderen. Ik gebruik dit eenmalig. Eventueel zou ik de afbeelding nog uit een database kunnen halen als base64.

[Erwin537]

Ik bedoel dat als je dit dynamisch doet met meerdere afbeeldingen waarbij je dus zoiets krijgt: pixelshow.php?i=testafbeelding.png. In zo'n geval weet je al dat de naam van de afbeelding (zeer waarschijnlijk, tenzij je daar nog iets mee doet) testafbeelding.png is. dan is het een kwestie van de URL aanpassen en hopen dat je hem in iets simpels als / of /images/ hebt staan.

Op die manier kan je dus gokken waar de afbeelding staat en het origineel achterhalen. In je huidige test-case lijkt het er echter op dat je het pad naar de afbeelding hard-coded in je script hebt staan. Dan is het volgens mij onmogelijk om te achterhalen waar de afbeelding staat, tenzij je gaat brute-forcen, maar dan ben je ook wel gestoord bezig.

[Verwijderd]

Lijkt me ook haha.

Maar goed, dit is precies wat ik nodig had.

[Paul]

Verwijderd schreef op dinsdag 27 november 2012 @ 00:40:
5) in een if statement check ik of er een kleur in de toplaag aanwezig is. Zo ja dan ga ik in een for loop de pixels aanpassen met imagesetpixel. Het aantal pixels dat transparant moet worden haal ik uit een variabele.

De afbeelding wordt opgeslagen.Zodra het script opnieuw gedraaid moet worden, wordt deze afbeelding weer in de imagecreatefrompng geladen.

Hoe bepaal je _welke_ pixels er tevoorschijn komen?

Nu weet ik niet in welke vorm dit uiteindelijk plaats gaat vinden en hoe groot de belangen zijn maar als iemand zich 100x in kan schrijven en je iedere keer random pixels invult kun je in theorie dus met 100 plaatjes met alleen de eerste 20 px zichtbaar als 2000 pixels zichtbaar krijgen (uitgaande van 0 collisions, aangezien 2k px ~2% is van 300x300 is de collisionrate nog niet echt hoog).

Als je het random doet zou ik voor iedere 'beginpositie' dezelfde seed gebruiken om dit tegen te gaan Als je overigens per 'stap' evenveel pixels krijgt kun je misschien alle stappen van te voren berekenen en dan in je app alleen testen of degene die iets opvraagt wel geautoriseerd is om stap X te bekijken; dat kan misschien veel serverside image-bewerkingen schelen in the long run

[Verwijderd]

Denk dat dit wel zal meevallen. De uiteindelijke vorm zal gegoten worden in een promotioneel kansspel. Dit betekent dat iemand items koopt op mijn website. Wanneer iemand iets aanschaft, kan deze gene meedoen met het spel. Het aantal items dat men koopt is ook het aantal pixels wat zichtbaar zal worden.