Welcome to Virtual Pet List - the fastest growing online games forum on the internet

Would you like to become a member of the largest and most successful virtual pets & sim games community on the internet today? We've been opened since 2011 and since then, we've been providing developers, artists, players and writers with the most relevant, up to date, quality and in depth content covering the entire online games community. So, if you just like virtual pet sites, we have you covered. But, if you prefer sim games, well we're here for you as well. However, if you're a new game developer and you're looking to show off your game to all of our members, then we'd love to hear all about your game in our sneak peeks forum. Just because our name is Virtual pet list doesn't mean pet games is the only thing we talk about. Our community talks about technology, making money, making art, writing and a lot more. So, please don't be afraid to say hello to everyone here because you never know what type of friends you'll make on our community. We strive to be friendly and offer positive discussions. We're very passionate, caring and hard working members of these niche, so if you hear about a new pet game from your friend, then it's highly likely that your friend found that game on our forum. If you want to learn anything about developing your own online game, then just go through our guides forum. You'll notice that whatever you're seeking on other developer's communities has more than likely already been talked about, researched and has already been put into good use by highly skilled developers.

  1. An upcoming virtual pet site that's owned by one of our moderators, Pepper-headAn upcoming virtual pet site that's owned by one of our moderators, Pepper-head sim game where you can breed your very own cats Kaylune, a virtual pet site Grophland.com : Breed virtual pets, Play, Explore
    VigLink badge

    Comment, rate or review Virtual Pet Sites, Sim Games or Role Playing games.
    Help vpl reach 10k users by Promoting us or purchase advertising
    : Development Guides - The Admin Effect - Browser games

    Donations are now being accepted again!!!
    What would you like us to improve?

Canvas Cycling in HTML5?

Discussion in 'Programming General' started by CometTheMicroraptor, Jun 30, 2012.

  1. Okay, so I'm curious about something, and this is entirely for future reference, so don't get too excited just yet. I also apologize if I'm not articulating myself very well, since I know very little about how this works.

    Now, I happened upon this site a while ago now, and it remains to be something that absolutely stuns and baffles me every time I look at it.
    The artist says that he and another programmer used HTML5 to make these images, which are like traditional canvas cycling pixelled images seen in older games.

    This is the site in question: http://www.effectgames.com/demos/canvascycle/
    I highly recommend going through it to see what I'm trying to describe here. Basically, though, they are images (with pleasant accompanying sounds, I might add) that have certain pixels cycling in color to create animations (most of which you see is precipitation and moving water).

    Now, out of curiosity... is anybody on here able to do that? I've mentioned before that a friend of mine and myself want to open a site that is slowly turning into something exclusively pixel based and we'd love to have our maps be like this. However, we'd love to have different weather patterns and light cycles happening on them as well (not that these would cycle but I think you get what I mean), and I'd love to know how it works or if anybody can help me do this so that I don't have to make the animations myself, as that is incredibly complicated. It just seems incredibly fascinating.
    Your banner/button can be located here for an entire month or year, please see our advertising on virtualpetlist thread for more information.

  2. I'm trying to wrap my head around how they are doing this. I assumed that this was done simply with images, and just cycling through them on the canvas to create the animation. But the way you described it sounds a little bit more complicated. Do you have a link to them describing this method?
  3. A better way is array operations on imagedata objects. I'm working on an example.
  4. The following example uses imagedata manipulation:


    Programming this demo reinforced my preference of flash over HTML5 (CanvasPixelArray doesn't support the regular Array methods, meaning I had to use for loops to set each pixel value individually, adding extra code and time)

    On the bright side, it's still more flexible than using images (suppose, for example, that you wanted to slow down the animation. With this method, you can simply change a single number) :)
  5. It's done by using one image and changing the colours of the palette and blending them with the original colour. If you click "Show Options »" you can see the colours changing.

    How does that compare to this?
  6. And how do you think they show / change the colors?

    Basically you use a loop to check each set of four values (the data of each pixel) to see if it matches the target color, and if it does you set the values to 255, 255, 255, 0.


    That being said, I will concede that they were actually using images for the animation.
    #7 Dart, Jul 1, 2012
    Last edited: Jul 1, 2012
  7. On an 8-bit animation system you achieved these effects by directly manipulating the color palette used to draw an image. This provided very fast color cycling animations, where waves of color moved across an image. I used to have a screensaver that acted just like that. By changing only part of the palette you could make only part of the image animate.

    In the JS implementation you can't change the actual color palette, so the author makes an object representing the palette, with cycles defined for each color, and then updates the canvas image as the colors change. For speed he redraws only the individual pixels whose colors have changed. He doesn't ever test the pixel's current color, just changes the palette.

Share This Page

  • About VPL

    We are a community of artists, writers, programmers and general users who have a vested interest in virtual pet games. All of us are from different backgrounds and yet we group together with one goal, to ensure our community is one of the best!
  • Like VPL on Facebook!

  • Support VPL

    We have to face that the site doesn't run for free sadly. If it did, we would be all set but unfortunately the costs are getting higher and higher as we grow. We offer members a Supporter premium usergroup. If you donate to VPL you are joined to this group and you get many perks that members do not get.

    Donate to VPL!