Fun with BitmapData - graphics

[mknol]

Ik kreeg op verzoek van een PM op het forum de vraag of ik niet een aantal beelden wilde posten. Zoals je in eerdere topics van mij afgelopen tijd in de testcase kon lezen, zijn dit allemaal gegenereerde beelden die ik met actionscript 3.0 heb gemaakt. Pure code dus. Voor wie dus denkt dat je alleen sites en games met Flash kunt maken, gaat er waarschijnlijk nu een andere wereld open. Het mooie vind ik hiervan dat dit een ultieme kruising is tussen design en code, wat best een inspirerende gedachte is.

Dus bij deze (met korte uitleg):

Opgebouwde plaat van cirkels op basis van het Google logo
http://farm4.static.flickr.com/3059/2568436053_a9734f5d0d.jpg (http://www.flickr.com/photos/markknol/2568436053/)

Experiment met random sinus bewegingen en curven
http://farm4.static.flickr.com/3150/2568248641_a21e04fdb4.jpg (http://www.flickr.com/photos/markknol/2568248641/)

Ik wilde hier mooie vloeiende curven maken. Tijdens het zoeken naar een strakke curve, stuitte ik op dit beeld. Eigenlijk was het dus een foutje, maar er zitten allemaal haken aan, wat het beeld eigenlijk beter maakt. Ik heb het dus maar zo gehouden.
http://farm3.static.flickr.com/2065/2490121017_e4d5b81010.jpg (http://www.flickr.com/photos/markknol/2490121017/)

Onderstaand duurde 35 minuten om te "renderen". Dit is een detail van dit beeld (http://www.flickr.com/photos/markknol/2542565595/), welke ik zelf aansprekender vond dan het grote beeld.
http://farm4.static.flickr.com/3164/2543326826_32805507aa.jpg (http://www.flickr.com/photos/markknol/2543326826/)

Deze gebruikt een foto van een roos als basis voor de kleuren. De lijnen verschillen van dikte op basis van kleur en wat andere factoren. Elke lijn heeft een soort border, waardoor de lijnen meer opvallen en aanspreken.
http://farm3.static.flickr.com/2171/2531180973_84586a1e13.jpg (http://www.flickr.com/photos/markknol/2531180973/)

Test met lijnen en circles. Kleuren komen ook uit klein detail van een foto.
http://farm3.static.flickr.com/2057/2506330307_6eb756b1c1.jpg (http://www.flickr.com/photos/markknol/2506330307/)

Al mijn online experimenten kun je hier vinden:
http://www.flickr.com/photos/markknol/
(voeg me gerust toe als contact)

[Dauntless]

Niiiiicee !!! Ik wil meer! :D

(En evt wat uitleg over hoe je ze juist maakt :))

[W0utR]

Echt heel schoon gedaan, en idd meer wil ik ook zien

[Ea.Z]

SHOWCASE!
Meer woorden moet je daar niet aan vuil maken :D
Ik Koen de Weggheleire, Joshua Davis, en nog enkele anderen doen ook zo'n dingen, maar dat ziet er allemaal niet zo impressive uit vind ik. Dit hier vind ik gewoon F#CKING VET :D
Google is mijn favoriet!
Vet werk man!
Beetje uitleg hoe je het doet lijkt me wel spannend, ja :)

[TheDutch]

Kijk dit vind ik nu heel erg leuk! Dit is kunst met code, iets waarvan je eigenlijk de broncode nooit vrij moet geven. Het heeft mij in elk geval geinspireerd om, wanneer ik terug ben uit San Francisco, ook eens wat kunstzinnigs te creëeren met ActionScript :).

Puik werk mknol!

ps. Dit doet me trouwens weer erg denken aan Erik Natzke (http://jot.eriknatzke.com/) die jaren terug al bezig was met kunstzinnig experimenteren in ActionScript, zonder soms eigenlijk te weten wat hij nu werkelijk aan het maken was, gewoon dingen uitproberen en zien wat eruit komt.

[Koen!]

Ja, euh.. heel heftig natuurlijk. :D Ik zou nu toch wel willen weten hoe je dat precies gedaan hebt. :) Zal ook wel veel tijd in hebben gezetten, zeker aangezien je het Google-logo met 'trial&error' hebt gemaakt en zo'n ding best lang zal renderen. :P

[Neuro]

Erg knap mknol !!! :O
Van sommige heb ik wel een idee hoe je het hebt gedaan, maar bij die spiraal zie ik het toch niet onmiddelijk. Ik ben erg onder de indruk!

Mijn favorieten zijn de curves met haken en en de spiralen (maar dan wel als volledig plaatje) :)

http://farm4.static.flickr.com/3061/2542565595_5211f97794.jpg?v=0

[mknol]

Leuk dat jullie zo enthousiast zijn! Over de code valt veel te praten maar het komt er op neer dat je een bitmapdata object aanmaakt, ter plekke sprites tekent. Of je breidt deze sprite uit door er meer in te tekenen. Tekenen kan met de lineTo functie bijvoorbeeld. Deze wordt op willekeurige positie geplaatst met semi-willekeurige beweging. Deze draw() je dan in de bitmapdata. De kleuren haal ik vaak uit een externe foto met getPixel functie. Dit herhaal ik dan elk frame, zodat je de bewegingen uitbreiden. Het is een kwestie van veel doen en veel uitbreiden en het jezelf alleen maar moeilijker maken. Door veel te spelen met de willekeurige waardes kun je dergelijke creaties maken.

[bouke_]

Erg cool gedaan. Mijn favoriet is dezeL: dot.line abstract pattern (http://www.flickr.com/photos/markknol/2506330307/). Wat Ea.Z ook al zei: Showcase!

[mknol]

Erg cool gedaan. Mijn favoriet is dezeL: dot.line abstract pattern (http://www.flickr.com/photos/markknol/2506330307/). Wat Ea.Z ook al zei: Showcase!
Thanks. Speciaal voor jou heb ik hem in mijn starttopic toegevoegd. (vind het zelf ook best een goed gelukte)

[Ea.Z]

Hmz... Meningen lijken verdeeld over deze creaties. Ik vind het nochtans erg showcase waardig. Anderen zijn niet zo showcaserig? :(

[ninetynine]

Jawel, mijn stem krijg je ook Mark (showcase).
Erg vet wat je daar doet !

[VAW]

Erg cool gedaan. Mijn favoriet is dezeL: dot.line abstract pattern (http://www.flickr.com/photos/markknol/2506330307/). Wat Ea.Z ook al zei: Showcase!

Deze vind ik ook erg knap! De rest is ook knap, maar deze springt er echt bovenuit! Showcase!

Als je hier nu een nice dualscreen wallpaper van zou willen maken, staat die direct op mijn bureaublad. trioscreen mag ook eventueel ;). (1280x800, 1440x900 en 1680x1050, maar enkel die laatste twee zijn ook goed :P)

[sandersnake]

Heel gaaf gedaan en zeker Showcase waardig!
Ik zou dit wel eens geanimeerd willen zien ontstaan.

[Midas]

Ik zeg Showcase!!
Heel knap gedaan Mark ;) .

Heel gaaf gedaan en zeker Showcase waardig!
Ik zou dit wel eens geanimeerd willen zien ontstaan.>> Stroep.nl (http://stroep.nl/)

[W0utR]

SHOWCASE

[mknol]

Bedankt voor de feedback gasten! Ik wist zelf niet of jullie dit nu wel/niet koel zouden vinden. Een ding scheelt bij deze testcase; er zijn geen aanpassingen die ik hoef te doen :P

[Mr. Black]

Een ding scheelt bij deze testcase; er zijn geen aanpassingen die ik hoef te doen :P
a.k.a.
Ik wil in de Showcase :)
En dat vind ik ook.

[mknol]

Ik wil in de Showcase :)LOL, Dat heb ik nooit gezegd..?! Is dat uit een hele oude post ergens op het forum ofzo?

[Mr. Black]

LOL, Dat heb ik nooit gezegd..?! Is dat uit een hele oude post ergens op het forum ofzo?
Nee hoor. :)

Maar iedereen zegt de hele tijd 'Showcase, Showcase' maar hij komt er maar niet in (terwijl hij er wel thuishoort). Ik dacht dat die zin een 'subtiele hint' was - nee? :)

[Bargok]

Ziet er allemaal erg leuk uit.
Zodra je hier de code erbij zeg ik showcase ;).

[alexnowa]

zoekt zo mooi - grote werk!

[Arjen93]

zekker showcase! echt top. het ziet er echt super gaaf uit net of je het zelf heb geschildert maar je heb het alleen met codes gedaan!( dus dan heeft eigenlijk de computer het gemaakt :P) grapje
echt heel vet! meer pics!!!

gr Arjen ;)

[moisarina]

SHOWCASE! He nog niet :p
Btw je had een zip met een .exe toch erbij een week geleden of ben ik nou zo scheel? :s die heb ik nog wel gedownload maar vat nog niet echt hoe hij werkt.

[mknol]

@Arjen93: Ja makkelijk eigenlijk he? :P

@moisarina: ja (klik hier (http://www.flashfocus.nl/forum/showthread.php?t=45052)), maar dat was weer een andere testcase. :)

Voor degene die code willen zien voordat ze showcase zeggen: klik (http://www.flashfocus.nl/forum/attachment.php?attachmentid=9101). Of was dat een beetje te makkelijke grap?

[Ea.Z]

Normaalgezien quote ik een aantal keer het woord showcase, maar jullie zien het ook wel staan neem ik aan ;)

[ninetynine]

Voor degene die code willen zien voordat ze showcase zeggen: klik (http://www.flashfocus.nl/forum/attachment.php?attachmentid=9101). Of was dat een beetje te makkelijke grap?

Haha :),

Ik vind ook niet dat je je code moet tonen, alleen het principe uitleggen en dat heb je al
gedaan.

Proficiat met de verdiende showcase.

[Nauzer]

Winnaar! :D
Dit is echt ontzettend cool en zeker een hele coole toevoeging aan de FlashFocus ShowCase!

Puik werk!

[Aeronobe]

vind dat dit een heel nieuw licht werpt op AS,
echt vernieuwend hoe je dit doet !
(en zeker showcase waardig :P )

[Pimm]

Voor degene die code willen zien voordat ze showcase zeggen: klik (http://www.flashfocus.nl/forum/attachment.php?attachmentid=9101). Of was dat een beetje te makkelijke grap?Gast, ik zie al waarom je je code niet post. Math.floor, tssss. As well as for ([...]; j < bitmapArray.length[...]). Maar still nice werk, zoals ik al zei (in IRC).

[Alassea]

Ik vind het echt hele stoere afbeeldingen!!

zeker showcase waardig!

[mknol]

Bedankt mensen voor de support en de toffe reacties!

[Arjen93]

ik vind als je iets tof`s heb gemaakt verdien je een toffe reactie;)

[vector monkey]

Deze code zou ik inderdaad ook lekker voor jezelf houden!
Zou wel cool zijn om er een tooltje voor te maken zo dat wij zelf ook ff lekker op een knopje kunnen klikken en random een plaatje te brouwen :)

mogelijk?

[Arjen93]

ja dat zou wel een tof idee zijn! ik zou het wel willen gebruiken.

[mknol]

Deze code zou ik inderdaad ook lekker voor jezelf houden!
Zou wel cool zijn om er een tooltje voor te maken zo dat wij zelf ook ff lekker op een knopje kunnen klikken en random een plaatje te brouwen :)

mogelijk?Bedankt voor je reactie! Ik ben/was bezig met een dergelijke online tool, momenteel staat (zoals eerder aangegeven) op www.stroep.nl. Deze is nog vrij basic en niet heel spectaculair. Je voert een url van een online foto in, en deze wordt (nog vrij strak) opgebouwd. Ik wil er nog een keer aan gaan werken om meerdere 'brushes' en shapes te gebruiken zoals ik in mijn laatste platen heb gedaan, en er een soort master "generative art tool" van te maken.

Ik heb hiervoor een hoop ideeën, maar momenteel ligt 'de bouw' een beetje stil. Helaas is mijn PHP kennis erg laag (heb voor het bestaande al hulp gekregen van een collega), dus zou wel wat extra hulp hiervoor kunnen gebruiken. Ik wil er bijvoorbeeld een uploader in bouwen of nog koeler; dat je een flickr feed, google picasa feed of ander sociaal netwerk mee kan openen en daar bijvoorbeeld een foto mee kan uitkiezen. Ook zou ik willen dat men de gegenereerde plaat kan downloaden/opslaan. Momenteel verbruikt de huidige tool al ontzettend veel bandbreedte, vanwege het POSTen van een complete image naar de Flash. Hier moet ook nog eens een oplossing voor komen (downscalen met bepaalde kwaliteit), want dan worden de mogelijkheden ook groter. Dit zijn een aantal ideeën die ik allemaal nog eens uitgevoerd zie willen worden.

[StevenW]

Is het misschien mogelijk om black abstract lines in een wat grotere resolutie te krijgen? :D ik wil hem namelijk als wallpaper op mijn pc. :P Zou je hem dan ook voor me willen signen? Ik heb 1440x900. Misschien een beetje veel gevraagd, maar ik vind het kunst! (en eigenlijk hou ik helemaal niet van moderne kunst).

[awesomo]

Momenteel verbruikt de huidige tool al ontzettend veel bandbreedte, vanwege het POSTen van een complete image naar de Flash.
Via flash player 10 kan iemand local files direct lezen en schrijven. ;) *nog even geduld dus*
Hier alvast een kleine tutorial. http://www.gotoandlearn.com/player.php?id=76
Dit zou je bandbreedte verbruik sterk naar beneden halen.

http://sherifabdou.com/2008/06/05/using-the-new-filereference-class-in-flex-to-save-and-load-without-a-server/
Hier tonen ze hoe je een png kunt uploaden. (ik weet niet of het ook werkt met jpg,...)

[mknol]

Is het misschien mogelijk om black abstract lines in een wat grotere resolutie te krijgen? :D ik wil hem namelijk als wallpaper op mijn pc. :P Zou je hem dan ook voor me willen signen? Ik heb 1440x900. Misschien een beetje veel gevraagd, maar ik vind het kunst! (en eigenlijk hou ik helemaal niet van moderne kunst).
Leuk dat je zo enthousiast bent! Ik voel me vereerd.

Speciaal voor jou heb ik een wallpaper versie gemaakt met naam erop. Ik heb hem in vrij hoge JPG kwaliteit opgeslagen, zodat het goed strak blijft.
Download: 1440x900 (http://mknol.stroep.nl/black-lines-1440x900.jpg) - 1280x1024 (http://mknol.stroep.nl/black-lines-1280x1024.jpg)

[Arjen93]

wajooo mooi. ik heb er een nieuwe achtergrond bij :P

[b-here]

Hey cool man! Mooi om te zien dat je met code zoiets kan genereren. Vind je google plaat erg goed! Ga je hier nu verder mee experimenteren? Lijkt me gaaf om te zien waar dit heen gaat! Zou leuk zijn als je er een eigen stijl aan kan geven! Iets heel nieuws binnen deze stroming!

[StevenW]

Bedankt, ik heb hem nu als bureaublad achtergrond, en ook als achtergrond op mijn samsung f700. Een vriend van me geloofde niet dat het met flash gedaan was. :D

[mknol]

Hey cool man! Mooi om te zien dat je met code zoiets kan genereren. Vind je google plaat erg goed! Ga je hier nu verder mee experimenteren? Lijkt me gaaf om te zien waar dit heen gaat! Zou leuk zijn als je er een eigen stijl aan kan geven! Iets heel nieuws binnen deze stroming!Thanks! Ja ik maak nog regelmatig nieuwe, dus als je op de hoogte wilt blijven moet je mijn flickr feed bijhouden. :D Een eigen stijl hieraan geven is nog vrij moeilijk, hoewel ik het wel meer herkenbaard wil gaan maken. Teveel platen verschillen nog van erg van stijl.
Bedankt, ik heb hem nu als bureaublad achtergrond, en ook als achtergrond op mijn samsung f700. Een vriend van me geloofde niet dat het met flash gedaan was.Leuk! Ja het is echt allemaal flash. Bij sommige is er een kleine photoshop tweak, maar dit betreft vaak alleen kleur correcties of opstapeling van lagen (die dan wel weer uit Flash komen).

[Niintek]

Poowii , ziet dr mooi uit!

[slickshots]

heel erg cool!!!

[b-here]

Thanks! Ja ik maak nog regelmatig nieuwe, dus als je op de hoogte wilt blijven moet je mijn flickr feed bijhouden. :D Een eigen stijl hieraan geven is nog vrij moeilijk, hoewel ik het wel meer herkenbaard wil gaan maken. Teveel platen verschillen nog van erg van stijl.

Misschien kun je bepaalde stijlelementen in je werk terug laten komen zodat het je werk uniek maakt. zoals josua davis deed met chineze stijlelementen! Ik heb hem gezien in offf in portugal, hij hield daar een presentatie over code generated artwork! Hij was in china geweest en had daar zijn inspiratie uitgehaald! Zou iig cool zijn als je er je eigen id aan kan geven!

[Gollum]

En nu nog eentje waarbij de applicatie zelf beslist watie gaat maken, en vooral of het iets moois is geworden :)

Maar, puik werk!

[M0L]

Dit is echt cool, ga ik ook eens probere :D

[rackdoll]

Kijk eens naar de pixel bender engine.... daar zal je veel plezier uit halen denk ik :)

[excited]

Gast, ik zie al waarom je je code niet post. Math.floor, tssss. As well as for ([...]; j < bitmapArray.length[...]). Maar still nice werk, zoals ik al zei (in IRC).
sorry maar WTF bedoel je met die post?

[Pimm]

sorry maar WTF bedoel je met die post?Ik grapte een beetje met mknol. Hij wil de code die gebruikt is om bovenstaande plaatjes te produceren niet posten (waarom weet ik niet, maar dat doet er verder niet toe). Nu postte hij heel bijdehand een screenshot van zijn code, waarop ik heel bijdehand meteen een aantal slordigheden in zijn code aanstipte en deed alsof die slordigheden de redenen zijn dat hij zijn code niet vrij wilt geven.

Specifieker, ik zag dat hij Math.floor() gebruikt; terwijl zolang je waarde onder de uint.MAX_VALUE zit typecasten naar een uint - met uint() - veel sneller gaat en hetzelfde resultaat oplevert. Verder gebruikt hij for ([...]; j < bitmapArray.length[...]) terwijl zolang bitmapArray.length constant blijft het veel sneller is de property op te slaan:const bitmapArrayLength:uint = bitmapArray.length;
for ([...]; j < bitmapArrayLength[...])
Het is misschien een beetje een insider grap, sinds ik mknol al eerder op dit soort dingen heb gewezen in het IRC kanaal.

[mknol]

@Pimm : Ik neem trouwens aan dat jij wel eens testjes heb gemaakt. Ik ben benieuwd hoeveel winst dit werkelijk heeft. Overigens had ik er naar gekeken en de code al een deel aangepast :) Hoewel, het meeste is eigenlijk al herschreven/geëvolueerd. Anyway.. zullen we eens een topic openen over het testen van optimalisatie dingen? Lijkt me eigenlijk best boeiend om te calculeren wat precies sneller is.

@excited : Van Pimm kan ik het hebben :P Feedback is altijd goed.

Ontopic: Er zijn al een hoop nieuwe gemaakt in de tussentijd. Zie startpost waar je ze kunt vinden.

[Pimm]

@Pimm : [...] Anyway.. zullen we eens een topic openen over het testen van optimalisatie dingen? Lijkt me eigenlijk best boeiend om te calculeren wat precies sneller is.Zal ik dat vanmiddag even doen? (Ben nu net wakker)

[mknol]

Zal ik dat vanmiddag even doen? (Ben nu net wakker)
http://www.flashfocus.nl/forum/showthread.php?p=335806

[excited]

sorry maar is dit echt allemaal actionscript??



http://farm4.static.flickr.com/3266/2630621656_8f19e639aa.jpg?v=0

[Dauntless]

Wellicht, maar de kans is groot dat het wel gebaseerd is op een foto (vooral door die kleuren dan)

[mknol]

sorry maar is dit echt allemaal actionscript??
Ja dit is echt allemaal actionscript. Er komt geen photoshop of illustrator aan te pas. Er komen in dit geval zelfs geen voorgebakken movieclips aan te pas, alles wordt met code opgebouwd. Het enige zijn de kleuren, die zijn inderdaad op basis van een foto. Dit principe van foto's gebruik ik vrijwel altijd, aangezien je dan meer en de beste kleurenvariaties krijgt.

De render is gebaseerd op deze foto: ;)
http://baixaki.ig.com.br/imagens/wpapers/mona_lisa800.jpg
Zie je?
http://farm4.static.flickr.com/3266/2630621656_8f19e639aa.jpg?v=0

[MAST]

Ik als nieuwe nieuweling kijk echt m'n ogen uit van al die dingen die jullie hier maken...
waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaauuuuuuuuuuuuuuu uuuuuuw :O :O :O :o

Heel leuk trouwens om te weten dat de kleuren uit de Mona Lisa komen. Die van jou is alleen wel wat 3D'iger dan de Mona Lisa :P

[mknol]

Ik als nieuwe nieuweling kijk echt m'n ogen uit van al die dingen die jullie hier maken...
waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaauuuuuuuuuuuuuuu uuuuuuw :O :O :O :o

Heel leuk trouwens om te weten dat de kleuren uit de Mona Lisa komen. Die van jou is alleen wel wat 3D'iger dan de Mona Lisa :P
:D

Behalve van de kleuren blijft er inderdaad weinig 'mona lisa' meer over. :)

[Gollum]

Wellicht leuk om te proberen om 'mooie' kleuren ook digitaal te maken? Wellicht een kleurenpalet mbv contrasten, primaire kleuren, tinten, mengsels etc.?