As part of looking into evolution in programming, I wanted to modify this blog to be a little better-themed to my design matrix. What I figured could prove useful is a system that adapts its form to the presence of other objects. To integrate that idea with this blog, I wanted to make a background that adapts its form the location of the mouse. Depending on how useful it proves, this could be reapplied later in 3D for form generation in my final project.
Currently, I've got a background that reacts to the mouse and uses the HTML5 canvas element. This was a test I threw together to see if it'd have any problems when working with Blogger or Firefox / Chrome. There's two canvases being used at the moment, but I'll roll back a version tomorrow so I can instead have one large canvas that will let the evolving block units interact more easily.
Looks like the canvas isn't working in IE8 (and probably the other IE versions, too). I'll put that down to the fact I didn't want to spend ages writing IE-specific script, because it'd slow down the progress of this experiment too much.
ReplyDeleteIn one of the first iterations of this background, I had intended for the blocks to fade out over time. I did this by drawing a large semi-transparent black rectangle over the entire canvas each frame. Chrome had no issues with this at all, and the orange rectangles you see would fade out smoothly. However, testing in Firefox resulted in two things:
ReplyDeletea) a different blending mode for semi-transparent objects (the orange rectangles would turn yellow, rather than fading to dark orange, and eventually black), and
b) a huge drop in framerate.
I managed to fix the framerate issue a bit by creating a specific function that draws the large semi-transparent black rectangle, and then calling that function once every 100 milliseconds rather than every frame. However, that really limited the rate at which the rectangles could fade out without perceptible jumps in colour. My current idea is to use only opaque colours, and have the individual orange squares loaded into an array of arrays so I can redraw them every frame with a new colour. That will make them easier to work with in terms of being evolving organisms.
Hopefully this solution won't cause a slowdown in Firefox, too!