Wednesday, February 12, 2014

Playing with Moiré Patterns and HTML5 Canvas


A few days ago I was programatically creating some Polar + Cartesian dual coordinate graph paper as a teaching aide for a lesson on coordinate systems.  While doing so I accidentally created a pretty cool Moiré pattern.  I encountered enough fun math, physics, and biology concepts while playing with the pattern that I decided to code up what I saw in an animation to share.  It was also good practice for transferring my JavaFX canvas experience to HTML5.

The main Moiré pattern has a few interesting properties in addition to being quite pretty.  All of the phenomena I'll be describing can be seen by clicking the Start button on the animation below, or by manipulating the image yourself.  It is fun to attempt to discern which patterns are caused by the mathematical limitations of discrete rectangular pixel grids, the limits imposed by the materials/technology used in your screen's pixels (how long it takes a pixel to change color), and limitations of your eyes and brain.

Moiré Patterns

The pattern I'll be discussing was created by drawing 800 evenly spaced radials extending from the center of an image.  For best viewing it is important to have your browser set to 100% zoom (700x700 px).  Attempting to scale the image will result in some interesting artifacts which I'll discuss later.

WARNING! If you're sensitive to rapidly flashing lights or flickering graphics it may be best to avoid viewing the animation.  It is a bit of an optical migraine simulator.


Light & Dark Banding
The bright and dark bands in the image are the result of interference caused by trying to display radial components using a rectangular (pixel) sampling grid.  The light portions of the image are locations at which the diagonals match up nicely with the pixel grid, the dark bands are a result of the opposite.  The effect is a visual manifestation of the same circumstances responsible for the creation of acoustic beat frequencies.

The means by which this phenomenon arises can be seen clearly in the image below.  To emphasize what's happening I've taken a radial pattern and overlaid it with a square grid.  If you look closely you can see that the lighter portions of the image are locations in which the radials and the grid line up cleanly.  From a distance the pattern begins to resemble that of the original, without the added grid.

Movement Interference
Moving the main image around on a computer screen creates a series of circular patterns reminiscent of magnetic field lines.  The effect is caused by a common limitation of computer screens, the time it takes a pixel to change colors.  The pixels don't respond immediately when the image is moved.  Instead, a ghosted image from the previous position remains on the screen for a few milliseconds.  The interference between the current image and the ghost image creates a secondary Moiré pattern.  The appearance of the pattern will vary depending on the response rate of the screen's pixels and the movement speed.  In the image below I've spaced two radial patterns a few pixels apart to show how the light and dark inference bands are formed.

Flicker Colors
While moving the main image around you may see flickers of color in parts of the image.  I think these are a manifestation of Fechner colors rather than a result of the individual RGB pixels having different response rates.  If I had a fast enough camera I'd take a picture of it just to be sure.

Fechner colors are an illusion created by the human visual system's reaction to rapidly shifting black and white patterns.  Why they occur is not entirely understood.  A likely explanation is that certain parts of the neuronal network or certain cone cells respond to intensity changes at different rates than others.  The end result is a brief colored afterimage.

Resizing Interference
Some very cool effects are created if you take a snapshot of the radial Moiré pattern and then attempt to resize it.  The computer does its best to create a scaled version of the Moiré pattern.  However, the same underlying structure of radially expanding lines is still there (albeit with thinner lines).  This means that in addition to the scaled image, we also still see a portion of the original Moiré pattern!  More Moiré!

Again we have two Moiré patterns and again they can interfere to create a third!  When the image scaling nears the major fractions (¾, ⅔, ⅗, ½, ⅓, ¼, ⅕, ect.) beat frequencies build up between the two Moiré patterns.  The beat frequencies manifest as a grid pattern with spacing equal to the inverse of the misalignment between the natural and artificial (scaled) pixel grids.

It is amazing how much is going on in such a simple image!  Thinking of all the additional trigonometric and frequency domain stuff that is going on is quite fun too.  Math is beautiful.

Friday, November 8, 2013

Chameleon Arch - Doctor Who Themed Animated Clock

In anticipation of the Doctor Who 50th Anniversary, I've put together a Chameleon Arch inspired clock program.  It is built in JavaFX and requires at least Java 7 to run.  Downloads can be found at the bottom of this post.

Demonstration Video:

The plan was just to make an animated clock.  Eventually ended up having so much fun that I added sounds, time dilation/contraction/reversal, and a TARDIS themed user interface.  If any programmers are interested in the source code or have any questions/comments let me know and I'll do my best to answer.

Should run fine on Windows, Linux, and Mac.  Requires at least Java 7!

Update: Just Tried to run this on a Sandy Bridge i5 with integrated graphics.  I would not recommend anyone try to repeat this.  Five frames per second makes everything look pretty pathetic.  I may try to pre-render the background animations to alleviate processor load.

I haven't made pretty launchers for Mac and Linux like I have for Windows, but the .jar file should work perfectly fine for those platforms.  Let me know if you encounter any problems.

Windows Installer (Start menu entry + README)  ▼ Chameleon Arch Setup.exe
Windows Executable▼ Chameleon Arch.exe
Multiplatform Jar▼ ChameleonArch.jar

Currently Known Bugs v1.0:
(These are caused by my code being a bit wibbly-wobbly timey-wimmey, I need to play around a bit more with Executors and Service classes to fix them.  In the mean time we'll call them features)
  • The playback rate for sounds at extremely low time speeds does not sync up nicely with the animation.  We'll say this is because passing too close to the walls of the time vortex causes anomalies, couldn't be a double rounding/bitrate issue or lax coding, nope!
  • Sounds triggered at extremely low speeds will continue through a full playback even after the time has been sped up.
Base image for the background animation --- Jake Hildebrandt:

Minute and hour hands base image:

Tick sound --- Louis Bartlett:

TARDIS sound effects:
Rights to these sounds belong to the BBC © 1963

Legal Stuff
This software was developed by Kristofer Weisshaupt. 

Rights to Doctor Who intellectual property belong to the BBC.  I am not associated with the BBC and did not intend any copyright violation.    This post and its contents are for educational/nonprofit purposes.

This software is provided free of charge "as-is," without any express or implied warranty.  In no event shall the author be held liable for any damages arising from the use of this software.

Please contact me before redistributing or reusing any of my code/projects.  A citation in the following format would be greatly appreciated:

"___<Component Used>___ courtesy of Kristofer Weisshaupt"

Tuesday, August 27, 2013

PictoStencil --- Image Manipulation Software

This month I've been working on an image processing application that takes images and converts them to fully supported, contiguous stencils for woodworking, paper-craft, jack o' lantern carving, and more.  It can do this either automatically, or through a guided process.  I'd hoped to finish it before September hit, not happening.  Figured I'd throw up a post describing some of what I have so far.

I'm continuing to use my custom JavaFX windows.  I'm using a much lighter color scheme this time around.  I've written algorithms for Color Balance, Gaussian Smoothing, Otsu Binarization, Sobel Edge Detection, as well as some binary morphological image transforms (Manhattan dilate&erode, close, open, invert, edge find, Tarjan connected component search).  There are so many cool mathematical operators out there for applying to images.  I really want to keep going, but I think I'm going to refrain from writing any more myself.  I'd really like to have Fourier band pass filtering.  Might go back some time and incorporate a few of OpenCV's free to use image operations.

I also had to write custom code for the paint tools.  They've been problematic.  I'm using a JavaFX Canvas for the working area and it loves to anti-alias everything.  There are no rendering hints that would allow me to customize this behavior.  I'll make a post if I find a way around this, but at the moment it appears I'll need to try some other option.

I'll try to get a video and .jar file up some time in September/October.  That way it'll be useful for making custom jack 'o lantern patterns.  I shouldn't have to write installers unless I start incorporating native libraries.

Update:  Haven't done any more work on this project.  I might come back to it once I've played around with Java 8 some more.  At the moment though there are enough minor canvas problems that they've added up to kill my initiative.