Canvas Cycle
July 26, 2010
Launch Experiment
Slow? Not Working? Try it in Google Chrome.
From the Author:
Anyone remember Color Cycling from the 90s? This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette.
This demo is an implementation of a full 8-bit color cycling engine, rendered into a 32-bit HTML5 Canvas in real-time. There are many color cycling scenes to choose from, and I added some ambient environmental soundtracks to match. Enjoy!
All the art was drawn by Mark Ferrari.
Technology:
HTML5 Canvas, HTML5 Audio, JavaScript
Comments
Very nice
is there any way to download these .gifs ?
Reply to this commentThis one is great.
Reply to this commentReminds me of old games, different quest series with similar background animation, you know. =))
Smooth and fast on Firefox 9
Reply to this commentintresting
Reply to this commentJoe, why did you remove the comments from your blog? Some of them (and your replies) were really instructive.
Reply to this commentVery Good
Reply to this commentWelcome ysl tribute shoes to ysl tribute shoes uk visit
Reply to this commentshow muito lindo uma bela foto quem a fez esta de parabens as outras tanbem sao muito bonitas mas essa me chamou atensao maravilha uma obra de arte
Reply to this commentM'encanta veure com lo verd es va expandint per les roques. Ara és quan veig que s'ha de passar el pont per veure l'altre costat i espero fer-ho habiat amb la gent que estimo. El riu sen's emporta al mar per tornar a ser peixos...
Reply to this commentBrilliant - the use of colour outside of the cycling palette is incredible. Thanks for sharing these with us.
Reply to this commenton
Reply to this commentamazing..!!..speechless..!!..:)
Reply to this commentvery good to know that there are such works going on. Please read http://vinner.hubpages.com/
Reply to this commentVery nice article giving an excellent listing of topics of this manner in technology topics
Reply to this commentGreat work!
Reply to this commentawesome how can I get it for screen saver
Reply to this commentok
Reply to this commenti love it
Reply to this commenthuuh
Reply to this commentmagnifique paysage chinois ou japonais
Reply to this commenti love it
Reply to this commentJust beutyfull one of the coolest Experiments so far. Good Work
Reply to this commentI love what you've done with this...absolutely stunning.
Reply to this commentThank you . I really hope that we all as indaviduals will see the beauty that I see in these amazing pictures I myself enjoy as well. I hope we can all be as one. together we are great leaders and I myself have seen better days. i like to say that harder you put your mind into doing something the better you get at it , even if we have our down falls. I speak for myself casuse I see my own troubles.... looking at the bright side of it all I am happy to be a part of your lives as well to my own family who I love dearly . I hope those who veiw the website enjoy the meaning and the hard work everyone has put into it by making a differance and sharing the main sorce of communication with one another as well with me. I love you all that I would do for you before I could do for myself . to see you happy make me happy. when we can't come to a understanding it makes life un liveable and unsocial with other. I am mot perfect and I hope you see that when your freeling on the edge remember to look up and give thanks to THE GLOY OF OUR HEAVENLY FATHER JESUS CHRIST....THE BLESSING ARE TO LOVE YOUR NEIGHBOR NO MATTER WHAT EVEN IF THEY ARE FALLING LOST SOULS . DON'T GIVE UP!!!! PRAY FOR THOSE WHO NEED THE HAND OR STAND UP TO A CHALLENGE BY BEING A FRIEND TO SOMEONE IN PAIN . I thank God for loving me for me I hope that you will see it like my god see over us ...... He see our problems and he know our wrongs but he's a Loving God. With out you, I wouldn't be able to express my feelings . Thank you and those who live to make the word go around . thank you for seeing the brighter side of me . Let's help The world Become A Better And Bigger World Today ..... Peace/Love/Share/ By giving back to the community. LOve Sincerely Lisa Mrie Crespin
Reply to this commentI'm catalan, so my english is not very very well (^^) i love your comment. I see the things that you see.
Reply to this commentLOL, ease off the E's girl
Reply to this comment
Reply to this commentbeautifull
Reply to this commentIncredible.
Reply to this commentI was looking for examples of the use of the tag and found your work. I think it's brilliant and beautiful! The great thing about it is that the perspective is perfect, the reflections are spot on and the movement of the elements conjures up the real world. Beautiful rendering, imagining places that create that real longing for other places that sits deep within us all.
Reply to this commentthis is the best one i saw
Reply to this commentVery nice! This IS art!
Reply to this commentit will be awesome if you can upgrade the resolution.. and like put it as a wallpaper or scrennsaver
Reply to this commentI remember coding palette cycling. They're so... mesmerizing and a prefect in all their 8-bit glory. Thank you for this! :D
Reply to this commentExcellent! very very refreshing... nice work.
Reply to this commente,,,,,,,,,,,,,,,,,
Reply to this commentI used it from other computer and run smooth so it is easy to use it
Reply to this commentomg so relaxing & peaceful i luv it
Reply to this comment000 :O
Reply to this commentWOW those images are beautiful and relaxing...
Reply to this commentPerfect and amazing!
Reply to this commentRain was falled steadily, the price of good haven't fallen recently. His suggestion for a party fell on deaf ears, it is good to have a friend to fall back on, they were falled over backwards to please their boss, I fell for this cottage as soon as I saw it.
Reply to this commentI am an honor to my parents, it is an honor to hear you speak so highly of me, will he honor me with a visit? I shall graduate from my university with honors. May I have the honor of your company at dinner? Yes, I have, it is honorable to steal, it is only a party in honor of my birthday, children should honor their parents.
Reply to this commentNo matter how far technology comes to provide ever more realistic graphics, this art will remain forever brilliant.
Reply to this commentwhy don't they makes games that look like this anymore
Reply to this commentwell done. It is very beautiful and relaxing.
Reply to this commenti love you
Reply to this commentGorgeous! Really makes me miss 8-bit adventure games.
Reply to this commentWow !!! Thatz great maan. You nailed it.!!!
Reply to this commentholiozzzzzzzzzzz
Reply to this commentvery good
Reply to this comment太好玩
Reply to this commentIN. CREDIBLE.
Reply to this commentgood job and its very nice...
Reply to this commentthis is wounderfull great job you guys i am a chrome addict.... this is lots of creative fun thanks for the work
Reply to this commentEspectacular!!!!. Las convinaciones de colores, paisajes y el ruido del agiua tanto fluyendo como cayendo en forma de lluvia, están esquisitemente combinados. Cuanto más se mira y escucha, más se relaja y disfruta.
Reply to this commentbien
Reply to this commentyugezijcijqh sdj
Reply to this commentbeautiful
Reply to this commentThis is amazing!
Reply to this commentthis is really awesome... i love the sound of rain and this stimulates it real well
Reply to this commentgreat job. you are a genius man. can you make it can use in my notebook wall paper
Reply to this commentGHUJI
Reply to this commentadorei isso é tao lindo e grandioso que belo trabalho como faz para colocar como proteçao de tela. parabens amei lindooooo
Reply to this commentExcellent job! congratulations.
Reply to this commentExquisite, especially the mountain storm with the shimmering water below.
Reply to this commentoiiiiiiiiiiiiii
Reply to this commentadult-rated R ,vedio,movirs lookinng for your help Iam from saudia arabia
Reply to this commentPEANUT BUTTER JELLY TIME!
Reply to this commentIncredible.
Reply to this commentAre you looking for a nice way to develop videogames for chrome? Good job.
Reply to this commentTodos são incrivelmente belos. Parabéns ao Joseph e ao Mark
Reply to this commenthiii
Reply to this commentoi what blad what you chattin ill beat you round the face!!
Reply to this commentOh, shut up.
this is very power full inhansed by google
Reply to this commentWA,DA,DA
Reply to this commentojhbgm
Reply to this commentnice! i LOVE it! one thing though, ALMOST everything had water noises. love it nonetheless!
Reply to this commentsin comentario
Reply to this commentI want this for wallpaper!!
Reply to this commentI like the painting so much that i would like you to get me some of them so that i can set it as my wallpaper on my phone and my laptop,
Reply to this commentamazing water fall
Reply to this comment我的電腦
Reply to this commentOur good friends and fair trading partners from China stole some of your pretty waterfalls. It's now an android app called "8-bit waterfall live paper" on the android market. I do hope Google helps you do something about this.
Reply to this commentSIMLY AMAZING. NEVER FORGATE. WAH WAH WAH.
Reply to this commentI have know clue about what you have done, but I will say, you have done it fabulously.
Reply to this commentvery asome
Reply to this commentAnd why is that? It's for us nostalgic freaks :P
Reply to this commentAWESOME!!!!!
Reply to this commentDanke für die Bilder Gerd !!! Einfach Spitze !!!!!
Reply to this commentSimply amazing!
Reply to this commentwould you be willing to set-up a base-script download so others with less coding skill can make their own version with their own pictures? (I don't have much coding skill and don't know how easy it would be to do someting like it)
Reply to this commentBeautiful ART!!!!
Reply to this commentHow are you
Reply to this commenthiiiiii five star all the way
Reply to this commentWe should put it in the museum.
Reply to this commentBIS! but 90s? I saw it in 1982, using TI TMS9918? chip
Reply to this commentSolo una palabra... GUuuuuuuuaaaaaaauuuu
Reply to this commentchome esperiments . nunca lo avia provodo .peror como siempre he usado el google chrome.bueno de ¿mear y no echar jota ?
Reply to this commentfantastic
Reply to this commentIn a way, this is better than those super advanced 3D graphics. :)
Reply to this commentYOU ARE REALLY HARD WORKER.....
Reply to this comment8-bit arts?! WTF?!?! LOL!!!
Reply to this comment
Reply to this commentBlast from the past; thanks for this awesome addition to the chrome experiments site :D
Reply to this commentOnly one word could describe this experiment: AMAZING.
Reply to this commentThese are so beautiful. Also, if you have the colour pallet open and run the mouse over it really fast, especially the sky parts, it looks like lightning. I'd love to see one with that as part of the cycle already.
Reply to this commentVery good
Reply to this commentso zen... next, could you make it responsive to the mouse? like in the pic itself in addition to the sidebar. it would make me just melt into my chair...
Reply to this commentmuito lindo bjs
Reply to this commentbreathtakingly beautiful~ thanks
Reply to this commentThis was a trip down memory lane. I was a color cycling guru back in days of Amiga computers. DeluxePaint used my color cycle animations in their tutorials, and Commodore used some in their promotional videos. I even sold them internationally so people could show off their Amiga Computers. I'd like to praise the artist Mark Ferrari and Jospeh Huckaby for doing such a good job with this art form. I felt my color cycling skills were obsolete, but this Chrome experiment gives me hope.
Reply to this commentit looks fun, huh? my dad still loves his old Amiga 2000. Amigas and the cool things that came of them will never go out of style.
Reply to this commentGreat Experiment! This has given me inspiration to begin writing again!
Bravo
Reply to this commentwhat really strikes me is the sense of depth it seems like i'm looking out of a window at a real place
Reply to this commentThat is so incredibly difficult to do - as I well remember! Brilliant work. Love the fog ones - no idea how you sorted out the cycles and pixel positioning on those. Can you tell I'm impressed? :-)
Reply to this commentso beautiful thnak u for sharing
Reply to this commentColor cycling actually dates back to 1986, possibly before. I started making such drawings with Deluxe Paint on my Amiga 1000 way back then, and thanks to its dedicated graphics chipset, color cycling used nearly no CPU at all on that 7MHz 68000 machine. By contrast, that JavaScript brings my 1600MHz PC to a crawl :-P I'm glad to see that people like color cycling, I was begining to feel like it had become a lost art. I still play with it now and then on my modern Amiga and you can too even if you don't have an Amiga, by using Deluxe Paint with an emulator like AmigaForever. It's really fun to draw with one of the cycling color WHILE it is cycling at the same time!
Reply to this commentI started pondering how to view original Amiga or DOS Deluxe Paint color cycling iff-ilbm images on a PC/Mac and found that http://www.randelshofer.ch/multishow/ does a really good job at it and hardly takes any CPU load. You can find some color-cycling images on the aminet.net website (search for ac-bootpic FishStuff Lake Snowman and SpecBall for example.
Reply to this commentThere also exists an applet version of MultiShow that allows to put original Amiga color cycling images directly on a webpage: http://www.randelshofer.ch/animations/anims/jim_sachs/DCTitle.ilbm.html
The applet is supporting Amiga IFF ILBM, PBM and ANIM files with color cycling codes CRNG and DRNG (this is the very same file format Mark Ferrari preferred to save his artwork).
I ❤ Huckaby
Reply to this commentYou've made me incredibly nostalgic for King's Quest right now. :(
Reply to this commentThis is stunningly beautiful,man
Reply to this commentbom legal
Reply to this commentYou can't question Evolution. I too can do that. (Only Virtually).
Reply to this commentPara que sirve todo esto?
Reply to this commentI am very impressed with your work. Wonderful!!
Reply to this commentbom de mais........
Reply to this commentThis is the most amazing thing I have ever seen... didn't even know thing type of "rendering" existed! Great job, both of you!
Reply to this commentthat is seriously impressive
Reply to this commentJust beautiful. The places are so peaceful, i wish i would be there.
Reply to this commentVery, ver nice, good work !! ^^
Reply to this commentSencillamente maravilloso
Reply to this commentAwsome
Reply to this commentThe art is beautiful. I spent a good half-hour going through all the pictures imagining what it would be like to be there.
Reply to this commenty'a t il des paysages en asie avec les temple de Bali par exemple avec des rizieres en terasse et le mont Agung deriere?c'est a penser...
Reply to this commentsangat luar biasa!!!c'est magnifique!!!bagus sekali saya mengancungkan jempol untuk kreasi2 ini....
Reply to this commentMaybe because it is from Chronicles of Narnia 2. :)
Reply to this commentguillermo
Reply to this commentexcellent!
Reply to this commentby colleen on august 31 , 2010
Reply to this commentIt would be perfect for Android live wallpapers.
Reply to this commentNice experiment that really takes this old art back in to the modern area. The artist is REALLY good! Very nice touch!
Reply to this commentSeascape one creeps me out. I've had a dream that looked just like it......
Reply to this commentMaybe because it is from Chronicles of Narnia 2. :)
Reply to this commentSimply terrific)) I had no idea that JS and html can do such a thing together! This thing opens plenty of new possibillities for web design... Gee, I am thankful for creating of such ability.. I hope that it will be used wide soon - and that it will give you a lot of money, Joseph)
Reply to this commentThe artwork is AMAZING! Some of the animations are better than what you see in modern 3D games. The sheer amount of scenes gives you almost have an hour of drooling over your keyboard. Gorgeous artwork, Mark!
And the code is neat too. ;)
Reply to this commentNot only nice from a technical point of view (which it definitely is) but also graphically beautiful! This is a great work!
Reply to this commentI'M no
Reply to this commentits awesome!!!
Reply to this commentDIT IS SO COOL
Reply to this commentamazing
Reply to this commentbuttar is best
Reply to this commentVladimir
Reply to this commentNo Selleck or Sandwich
http://selleckwaterfallsandwich.tumblr.com/
Reply to this commentekseretiko ine
Reply to this commentbueno muy excelente
Reply to this commentplease update to google chrome
Reply to this commenti can feel heaven..........
Reply to this commentthis location very funny so beautifully.
Reply to this commentAWESOME!!
Reply to this commentRealy Beautiful,but wat the language its coded in :(
Reply to this commentAll the stuff on Chrome Experiments is written in ECMA-262, edition 3. AKA Javascript.
Reply to this commentOMG I remember these from Magic the Gathering Battlemage on Playstation 1! I used to love these.
Reply to this commentMerci pour ces effets éblouissant.Google chrome devrait les proposer dans ses extensions pour décorer la page d'accueil C'est magnifique, bravo pour cette création. Le 18.08.2010
Reply to this commentThat is really cool!
Reply to this commentOn the rainy ones if you change the colors of the sky real quick, it looks like lightning.
Reply to this commentlove
Reply to this commentGreat experiment and AWESOME ART!!! Five!
Reply to this commentbhgat bhrade chhuli
Reply to this commentluar biasa ..... fantastic, absolutely fantastic
Reply to this commente muito importante a google e aceus clientes obrigado.
Reply to this commentThese are truly amazing, and very inspiring. I want to use all of them as as backdrops for a story I'm writing, really great! (don't worry, I'm not going to steal them at all, just be inspired by them ^__^)
Reply to this commentEm portuguez Brasil....
Reply to this commentGostaria de obter o navegador da web novo e mais rapido.Como fazer?
Reply to this commentthanks
Reply to this commentits wonderful,really nice
Reply to this commentmintu
Reply to this commentlooks so peaceful. location?
Reply to this commentahh the good old days... this makes me a bit nostalgic. :P makes me remember the old assembly intros and demos this is very good old style coding and art work the younger ones reading this can check on http://www.hornet.org/ they still have some good example code there for 2d and effects most ppl will need http://www.dosbox.com/ to see the demos has almost all are for DOS. and here http://www.assembly.org/summer10/ has a reference of what i am talking about :)
Reply to this commentUnFu*kingBelievable, You Have Inspired Me To No End
Reply to this commentانا مصرى
Reply to this commentHI IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Reply to this commentGah, it's full of AWESOME!
Reply to this commentThis does not work in IE 9 Platform Preview 4 which has canvas support. Seems like the block is for IE and not acuttally using vesion number or feature detection
Reply to this commentThis is brilliant.
I'd really like to see a 3D game that looks like this (including the lighting and reflections). Not just camera facing sprites but more like voxel graphics. The resolution and color depth would be low but I think it would look more awesome as newer 3D games in some respects.
Other than that I'd like to see old games that use such graphics to be fully ported to canvas.
Reply to this commentMark is absolutely genius artist! And this is a great demo. Oh, so gorgeous!
Reply to this commentshum e bukur
Reply to this commentGood to see other people appreciated this as well. Beautiful work.
Reply to this commentgood
Reply to this commentMark Ferrari, you are simply the best in pixel art. And Joseph has been making a great canvas engine to emphasize your talent. Congratulations to both of you.
Reply to this commentThis is so lovely and soothing, the artwork is wonderful. Well done guys. Please make these available to the public, and how about designing some space canvas's? Oh, the things you could do with this...
It was great to hear the waves, the wind, ect.
I can see this being used on a large screen as an ever changing piece of almost living art. Would look cool hung on my living room wall.
Thank you.
Reply to this commentgood
Reply to this commentcool!
Reply to this commentIt's so beautiful. I wish I could live there.
Reply to this commentbravo j installe google chrome
Reply to this commentI love 8-bit art, so this is kind of a "treat" for me.
The scenes are epicly drawn, and the effects are freaking beautiful. The ripples, flowing water, everything is epic. And the sheer amount of scenes are epicly awesome. TONS of scenes.
Reply to this commentSo nostalgic it made me subconsciously remember deluxe paint's pc port hot key for palette cycling - tab and I accidentally clicked it :)
Reply to this commentAmazing!
Reply to this commentThank you for bringing such beauty - TRUE TALENT!!
***** = 5 STARS IN MY BOOK :)
Reply to this commentWhat can I say? I LOVE YOU!!! Can you please bring back more 8bit art into your demo?
Reply to this commentAbsolutely wonderful artwork. I'd love to see this as my desktop background... I wonder if you could even make them into giant animated gifs to put as a wallpaper... either way... AWESOME!
Reply to this commentI'd like these too, I hope he does this!
Reply to this commentWow. Mark Ferrari FTW! ood work on the blend mode too :)
Reply to this commentThats awesome... You did a great job... It's not to slow, and the quality is just right...
Reply to this commentReally beautiful! Both the art and the code running. It would be gorgeous if games using those level of art and animation were launched for HTML5. Any volunteers for creating one? hehehe ;)
Reply to this commentAbsolutely amazing! It really blows my mind. 5 stars!
Reply to this commentCan I change color palette?
http://www.giuseppesicari.it
Reply to this commentabsolutely fantastic!!!
Reply to this commentvery nice
Reply to this commentThey are BEAUTIFUL!
Reply to this commentnever saw anything more beautiful.
Thank you for sharing
Reply to this commentAWESOME!!!!!!!
Five stars all the way.
Reply to this commentThis is HANDS DOWN the coolest chrome experiment that I've seen. The artwork is stunningly enchanting and the brilliant animation effect is flawlessly pulled off. Perhaps there's a touch of nostalgia playing its part in my bias (actually, it's more than likely a certainty), but this I had a great time cycling through the various works and contemplating the effect itself.
As for the effect, having not considered it before, it took me a couple of seconds to wrap my head around what was happening and how one would go about creating such a scene, and it's simply brilliant! An ingenious use of an old graphics limitation!
Thank you for a bringing this effect to my attention, and for such a wonderful display of art!
Bravo! 5 stars!
Reply to this commentabsolutely awesome!
Reply to this commentso pretty!
Reply to this commentbueno
Reply to this comment