The jQuery Bloodforge Smoke Effect

by filip 12. June 2015 02:07

I stumbled upon a very neat piece of code written by Jonny Cornwell for a particle smoke effect. The concept was really neat, but I really wanted it to be easier to use. The end result is a jQuery plugin that allows the developer to add a particle smoke effect background to any element on the page.

The latest source files are located here:


<div id="smoke-effect-standard" style="padding: 2em;">
   This works in webkit!

This works in webkit!

The above code should work on webkit browsers (so Chrome, Safari).

Support all modern browsers

To make it work on Internet Explorer and Firefox, use the forceBackgroundRender flag. This has a much bigger performance hit (there is no performance hit on webkit since the standard render method is used), but it may be acceptable based on the size of the background.

<div id="smoke-effect-force-background" style="padding: 2em;">
   This works in all modern browsers!
   $('#smoke-effect-force-background').SmokeEffect( { forceBackgroundRender: true } );

This works in all modern browsers!

Write directly to a canvas element

Also, if you call this directly on a CANVAS tag, it will draw directly to that element.

<canvas id="smoke-effect-canvas" width="300" height="100" />


  • backgroundColor: A hex or rgba value indicating the background color for the effect. If the container already has a background, the effect will inherit that. If the container does not have a background, it will be set to rgba(0, 0, 0, 0.5).
  • density: A number indicating how dense the smoke is. The higher the number, the more dense. The default is 8.
  • maximumVelocity: A number indicating how quickly the smoke travels. Default is 1
  • fps: A number indicating how often to redraw the smoke. Default is 15
  • forceBackgroundRender: If set to true, this will make the SmokeEffect work in browser that are not based on webkit. However, this comes at a performance hit. The default is false
  • image: The image to use as the smoke particle. This can be either a URL or a Base64 string of the image. You can change the color of the smoke by changing the image. If you provide a custom image, you need to update the imageWidth and imageHeight properties described below.
  • imageWidth: The width of the image for the smoke particle. Default is 128 pixels.
  • imageHeight: The height of the image for the smoke particle. Default is 128 pixels.

Example of setting all options (you don’t need to set all}.

$('selector').SmokeEffect( {
    backgroundColor: '#FF0000',
    density: 12.
    maximumVelocity: 1.5,
    fps: 20,
    forceBackgroundRender: true,
    image: '',
    imageWidth: 100,
    imageHeight: 150
} );


Thermostat Statistics via Logs for Honeywell Prestige IAQ 2

by filip 21. November 2014 09:00

I created a log viewer for my Honeywell thermostat. In addition to providing a much more friendly way of viewing log files, it aggregates logs over time allowing for some pretty neat analysis.

The site is located at 


Personal | Web Development

Updating my BlogEngine.NET blog to use SSL (HTTPS) from HTTP

by filip 28. October 2014 17:57

I’m using this post to document how I upgraded my blog for HTTPS.

The first thing I needed to do was to get a SSL certificate. I really didn’t feel like paying for one, so I went with a free certificate from StartSSL. Their free certificates expire after a year (I wish it was longer), so I’ll need to do this again next year.  But they work and… they’re free.

After I got my p12 certificate above, I asked my web host (Arvixe) to set everything up. It took them about 2 days (it was the weekend though, so maybe it would have been faster if it was during the week). This was pretty much the easiest part since all I had to do was to provide them with the cert, and they got it installed and set up the correct ports for HTTPS.

At this point, I could browse my site using HTTPS. I did have some security warnings, and to fix those I had to update my stylesheets with secure paths to my images. Also, I needed to update some script paths, as they were not secure either.

Finally, I added a rule into my web.config file so that all traffic always gets re-routed to HTTPS.


Web Development

Detailed Geothermal Analysis in Cincinnati, Ohio

by filip 19. June 2014 02:49

The following numbers are all in kWh, and for my single-family house that is about 2,000 square feet, plus basement. All heating is electric. My electric bills usually come in around the 17th to 20th of the month. In the data below, an October value is actually the usage from the second half of September to the first half of October. 

The data is current as of 10/18/2015. I'll try to update this monthly.

kWh Usage Details, Monthly

Below is a breakdown of my monthly electric usage since late 2007. The gray cells is my usage when using an inefficient air-source heat pump (probably 10 or 11 SEER). The green cells is my usage since installing a geothermal heat pump.

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
2007                     1,613 4,572
2008 5,053 5,676 4,644 2,815 1,404 1,325 1,235 863 1,358 962 1,517 3,764
2009 4,700 3,495 3,170 2,724 920 836 1,354 1,347 1,497 1,410 1,788 3,119
2010 5,836 5,462 3,127 1,625 1,032 1,390 1,197 1,651 1,445 1,315 1,517 4,697
2011 6,144 5,035 3,768 2,585 1,702 1,568 1,641 1,643 1,536 1,065 1,496 2,345
2012 3,028 3,663 2,922 1,637 1,422 1,358 1,800 1,485 1,523 1,317 1,683 2,695
2013 2,870 3,515 2,544 1,800 1,100 1,179 1,381 1,256 1,836 942 1,476 3,182
2014 4,416 5,750 3,226 1,488 1,193 1,331 1,408 1,294 1,467 1,088 1,441 2,427
2015 3,071 2,674 2,659 1,617 1,190 1,297 1,491 1,509 1,526 1,203 1,227

kWh Usage, Monthly Average

Here is a summary of the above table. The grey cells is the average, per month, of the grey cells from the table above, and the green cells are the average, per month, of the green cells above.

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
4,578 4,656 3,343 2,096 1,263 1,276 1,435 1,363 1,523 1,169 1,580 3,304
3,071 2,674 2,659 1,617 1,192 1,314 1,450 1,402 1,497 1,146 1,334 2,427

In the summer months I'm obviously not really saving any (significant) money, even when compared to the 20-year old, inefficient air source heat pump. I never did use much electric (for cooling) in the summer months though.

Based on the "Monthly Average" data above, I'm saving about 5,412 kWh per year. At my current electric rate of about $0.10 per kWh (it varies slightly month-to-month), the yearly savings from upgrading to geothermal is $541.17. This translates to a 19.9% savings per year over my previous electric bills.



Arronco Geothermal Installation in Cincinnati Part 2

by filip 23. April 2014 05:42

This is a follow-up article to my initial article about my geothermal installation.

For the past couple days, Arronco was finishing up their geothermal installation in my house. The first day was spent on removing my existing unit as well as setting up the Byrant geothermal unit (GT-PB). The second day was spent on finishing up the GT-PB install, hooking up the tubes that run outside to the unit, attaching my water heater to the geothermal unit, and finally setting up my thermostat.

The first set of pictures is some of the work outside of the house.







And here it is with all of the work complete:







Too see how this has affected my electric usage click here



Bloodforge Band

Looking for the Bloodforge band site? Click here.

About Filip Stanek

Death Note Pic I'm a developer at ACG in Cincinnati, OH. I like ASP.NET, Flash, and other web technologies, & enjoy playing chess, video games, etc.

Currently playing:


Month List