Winter is approaching, lurking on the horizon, days are getting shorter, leaves are falling and temperatures are dropping. You might be thinking about your couch, a good glass of your favorite drink and your fireplace, just like we were!
So we present you, the virtual fireplace. As you can see is a virtual fireplace coded in Kano Code, set up as the Pixel Kit we have on Kickstarter. You can use it on your screen for now, and send it over to your Pixel Kit once you have it. Here's the fireplace working on our Pixel Kit.
Interested on the code? Here's an outline of how we've done it! Remix it on Kano Code to see the entire project.
Get yourself some colors
First we define a couple of lists that will contain our color schemes. We are creating one for the fire named firecolors and another one for the log called logcolors.
Prepare some variables
Variables are numbers we need to keep track of to control our fireplace, they store the position of the lights, the intensity of the flames and keep track of where you are when drawing each of the pixels on our Pixel Kit.
We set up some of them including the starting area for the logs (logx & logy), how big will they be (log__height & log__width), a couple of auxiliary ones to help us draw each of the pixels (i & j). We also keep track of the flameintensity and the position where to start the fire (firex && firey) which actually depends on where the logs are. Makes sense right?
Everchanging flames, keeping our fire interesting
Before we draw the flames we need to prepare a small routine that will clean up the fire area and make sure the flames fade away. If we don't do this, the pixels will get painted but will remain colored and we won't be able to see the nice changing colors of the fire evolving.
We do this by defining a loop that sweeps the area where the flames are being painted and turns off every single of the pixels every now and then. We are only doing this on the area where the fire is, not the logs, so the logs don't flicker. We use a couple of extra variables here (deletex & deletey) to keep track of the pixel being cleared. We need to do this delete operation pixel by pixel, so we need to remember in which position we are.
Note the timer set to 440 milliseconds. This means that every 440 milliseconds our flames will be deleted and changed for new ones.
Get some logs in
To get a fire you need some wood, so here we are now creating our logs. As we want our logs to be lit we are also looping over the pixels they occupy over time, and shifting the colors between the ones on the palette we created earlier. We do this once every 660ms, 50% slower than we clean up the flames on our screen, to give it a sense of peace and tranquility.
We draw 2 rows of wooden logs at the bottom of the pixel and set a random color to each of the pixels that comprise them. Again we use some variables (i & j) to keep track of drawing the logs.
Fire it up!
Finally, we lit up the fire and get the logs burning. With a third loop set to 220 milliseconds (2 times faster than we clean the screen, 3 times faster than the logs get illuminated) we define a region just above the logs to hold the fire. This region is 4 pixels shorter than the lenght of the logs (2 on each side) and goes from just above the logs to the top of the Pixel panel.
We set the height of the flames depending on a variable fireheight that we will control later, so we can turn on the heat as much as we want. We use this variable to define how high from the logs we will be painting pixels, and then go over the different rows painting the right pixels with a random color from the fire palette.
Make it interactive!
Finally we add some interactivity to our fireplace, allowing you to increase the height of the flames with the button A and decreaset it with button B. Throw more logs into the fire!
That's it! If you liked the project you can remix it on Kano Code and change parameters, apply different colors and make it yours. If you have any question leave us a comment on the project!
Here is another variation with greenier logs.